feat :: 모집의뢰서,기업,지원서 총 개수 추가

Team-return · Jun 4, 2024 · dabfe1f · dabfe1f
2 parents 1526315 + d8c083a
commit dabfe1f
Show file tree

Hide file tree

Showing 9 changed files with 255 additions and 138 deletions.
diff --git a/src/Apis/Applications/index.ts b/src/Apis/Applications/index.ts
@@ -1,8 +1,4 @@
-import {
-	useMutation,
-	MutationOptions,
-	useQuery,
-} from 'react-query';
+import { useMutation, MutationOptions, useQuery } from 'react-query';
 import { instance } from '../axios';
 import { ApplicantInfoQueryStringType } from './request';
 import { ApplicationResponse, InternshipStudentResponse } from './response';
@@ -101,3 +97,11 @@ export const useRejectApplication = (
 		}
 	);
 };
+
+/**지원서 총 개수 조회 */
+export const useApplicationCount = () => {
+	return useQuery(['applicationCount'], async () => {
+		const { data } = await instance.get(`${router}/count`);
+		return data;
+	});
+};
diff --git a/src/Apis/Companies/index.ts b/src/Apis/Companies/index.ts
@@ -163,3 +163,11 @@ export const useChangeCompanyInfo = (
 		}
 	);
 };
+
+/**기업 총 개수 조회 */
+export const useCompanyCount = () => {
+	return useQuery(['CompanyCount'], async () => {
+		const { data } = await instance.get(`${router}/count`);
+		return data;
+	});
+};
diff --git a/src/Apis/Recruitments/index.ts b/src/Apis/Recruitments/index.ts
@@ -166,3 +166,11 @@ export const useEditRecruitment = (
 		}
 	);
 };
+
+/**모집의뢰서 총 개수 조회 */
+export const useRecruitmentCount = () => {
+	return useQuery(['RecruitmentCount'], async () => {
+		const { data } = await instance.get(`${router}/count`);
+		return data;
+	});
+};
diff --git a/src/Components/ApplicationView/Table/index.tsx b/src/Components/ApplicationView/Table/index.tsx
@@ -7,14 +7,15 @@ import {
 	useToastStore,
 } from '@team-return/design-system';
 import * as _ from './style';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Pagination } from '../../../Utils/Pagination';
 import { ApplicationResponse } from '../../../Apis/Applications/response';
 import { selectStudent } from '../../../Apis/Applications/request';
 import { DownloadDataPropsType } from '../../../Apis/File/request';
 import { useDownloadData } from '../../../Apis/File';
 import { useModalContext } from '../../../Utils/Modal';
 import {
+	useApplicationCount,
 	useChangeRequestStatus,
 	useRejectApplication,
 } from '../../../Apis/Applications';
@@ -59,6 +60,7 @@ export function ApplicationViewTable({
 	const [clickedData, setClickedData] = useState<selectStudent[]>([]);
 	const [changeStatus, setChangeStatus] = useState<string>('');
 	const [downloadBoxView, setDownloadBoxView] = useState<number>(0);
+	const [applicationCount, setApplicationCount] = useState<number>(0);
 	const [rejectReason, setRejectReason] = useState('');
 	const { form: trainDate, handleChange: trainDateChange } = useForm({
 		start_date: '',
@@ -114,6 +116,13 @@ export function ApplicationViewTable({
 		}
 	);
 	const { isLoading: requestStatusIsLoading } = changeStatusAPI;
+	const { data: applicationCountData } = useApplicationCount();
+
+	useEffect(() => {
+		if (applicationCountData) {
+			setApplicationCount(applicationCountData.count);
+		}
+	}, [applicationCountData]);
 
 	/** 지원서 상태 변경할 때 확인하는 확인 모달을 여는 함수입니다. */
 	const openChangeStatusModal = (statusName: string) => {
@@ -483,56 +492,65 @@ export function ApplicationViewTable({
 
 	return (
 		<_.Container>
-			<_.BtnWrapper>
-				<Button
-					kind="Ghost"
-					size="S"
-					onClick={() => openChangeStatusModal('APPROVED')}
-					disabled={requestStatusIsLoading || !clickedData.length}
-				>
-					승인
-				</Button>
-				<Button
-					kind="Ghost"
-					size="S"
-					onClick={openRejectApplicationModal}
-					disabled={RejectApplicationIsLoading || !clickedData.length}
-				>
-					반려
-				</Button>
-				<Button
-					kind="Ghost"
-					size="S"
-					onClick={() => openChangeStatusModal('SEND')}
-					disabled={RejectApplicationIsLoading || !clickedData.length}
-				>
-					전송
-				</Button>
-				<Button
-					kind="Ghost"
-					size="S"
-					onClick={() => openChangeStatusModal('PASS')}
-					disabled={requestStatusIsLoading || !clickedData.length}
-				>
-					합격
-				</Button>
-				<Button
-					kind="Ghost"
-					size="S"
-					onClick={() => openChangeStatusModal('FAILED')}
-					disabled={requestStatusIsLoading || !clickedData.length}
-				>
-					불합격
-				</Button>
-				<Button
-					kind="Ghost"
-					size="S"
-					onClick={openChangeTrainDateModal}
-					disabled={trainDateIsLoading || !clickedData.length}
-				>
-					현장실습
-				</Button>
-			</_.BtnWrapper>
+			<_.BtnContentWrapper>
+				<_.CountTitle>
+					총 <_.CountContent>{applicationCount}</_.CountContent>개
+				</_.CountTitle>
+				<_.BtnWrapper>
+					<Button
+						kind="Ghost"
+						size="S"
+						onClick={() => openChangeStatusModal('APPROVED')}
+						disabled={requestStatusIsLoading || !clickedData.length}
+					>
+						승인
+					</Button>
+					<Button
+						kind="Ghost"
+						size="S"
+						onClick={openRejectApplicationModal}
+						disabled={
+							RejectApplicationIsLoading || !clickedData.length
+						}
+					>
+						반려
+					</Button>
+					<Button
+						kind="Ghost"
+						size="S"
+						onClick={() => openChangeStatusModal('SEND')}
+						disabled={
+							RejectApplicationIsLoading || !clickedData.length
+						}
+					>
+						전송
+					</Button>
+					<Button
+						kind="Ghost"
+						size="S"
+						onClick={() => openChangeStatusModal('PASS')}
+						disabled={requestStatusIsLoading || !clickedData.length}
+					>
+						합격
+					</Button>
+					<Button
+						kind="Ghost"
+						size="S"
+						onClick={() => openChangeStatusModal('FAILED')}
+						disabled={requestStatusIsLoading || !clickedData.length}
+					>
+						불합격
+					</Button>
+					<Button
+						kind="Ghost"
+						size="S"
+						onClick={openChangeTrainDateModal}
+						disabled={trainDateIsLoading || !clickedData.length}
+					>
+						현장실습
+					</Button>
+				</_.BtnWrapper>
+			</_.BtnContentWrapper>
 			<_.TableWrapper>
 				<Table
 					tableData={

diff --git a/src/Components/ApplicationView/Table/style.ts b/src/Components/ApplicationView/Table/style.ts
@@ -13,8 +13,6 @@ export const Container = styled.div`
 
 export const BtnWrapper = styled.div`
 	display: flex;
-	justify-content: flex-end;
-	width: 100%;
 	gap: 15px;
 	margin-bottom: 10px;
 `;
@@ -23,6 +21,13 @@ export const TableWrapper = styled.div`
 	width: 100%;
 `;
 
+export const BtnContentWrapper = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+`;
+
 export const TitleText = styled.div`
 	font-weight: 700;
 	font-size: 20px;
@@ -95,3 +100,14 @@ export const MiddleText = styled.div`
 	margin: 30px 0 0 25px;
 	color: black;
 `;
+
+export const CountContent = styled.p`
+	color: #135c9d;
+	margin-left: 4px;
+`;
+
+export const CountTitle = styled.p`
+	font-weight: 600;
+	font-size: 24px;
+	display: flex;
+`;
diff --git a/src/Components/CompanyRecruitment/Table/index.tsx b/src/Components/CompanyRecruitment/Table/index.tsx
@@ -5,11 +5,12 @@ import {
 	useToastStore,
 } from '@team-return/design-system';
 import * as _ from './style';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Pagination } from '../../../Utils/Pagination';
 import {
 	useChangeCompanyStatus,
 	useChangeContractCompany,
+	useCompanyCount,
 } from '../../../Apis/Companies';
 import { CompanyRecruitmentResponse } from '../../../Apis/Companies/response';
 import { companyType } from '../../../Utils/Translation';
@@ -38,6 +39,7 @@ export function CompanyRecruitmentTable({
 	const dataLength = companyRecruitment?.companies.length;
 	const [clickedData, setClickedData] = useState<number[]>([]);
 	const [changeStatus, setChangeStatus] = useState<string>('');
+	const [companyCount, setCompanyCount] = useState<number>(0);
 	const [downloadUrl, setDownloadUrl] = useState<DownloadDataPropsType>({
 		fileUrl: '',
 		fileName: '',
@@ -46,6 +48,14 @@ export function CompanyRecruitmentTable({
 	const { companyRecruitmentQueryString, setCompanyRecruitmentQueryString } =
 		useCompanyRecruitmentQueryString();
 
+	const { data: CompanyCountData } = useCompanyCount();
+
+	useEffect(() => {
+		if (CompanyCountData) {
+			setCompanyCount(CompanyCountData.count);
+		}
+	}, [CompanyCountData]);
+
 	const { mutate: downloadExcel } = useDownloadData(downloadUrl);
 
 	/** 전체 선택 & 전체 선택 해제하는 함수입니다. */
@@ -267,44 +277,49 @@ export function CompanyRecruitmentTable({
 
 	return (
 		<_.Container>
-			<_.BtnWrapper>
-				<Button
-					size="S"
-					onClick={() => {
-						fileDownloadAPI();
-					}}
-				>
-					엑셀 출력
-				</Button>
-				<Button
-					kind="Ghost"
-					size="S"
-					disabled={buttonDisabled}
-					onClick={() => {
-						changeStatusBtnClick('PARTICIPATING');
-					}}
-				>
-					참여기업 등록
-				</Button>
-				<Button
-					kind="Ghost"
-					size="S"
-					disabled={buttonDisabled}
-					onClick={() => {
-						changeStatusBtnClick('LEAD');
-					}}
-				>
-					선도기업 등록
-				</Button>
-				<Button
-					kind="Ghost"
-					size="S"
-					disabled={buttonDisabled}
-					onClick={changeContractAPI.mutate}
-				>
-					협약등록
-				</Button>
-			</_.BtnWrapper>
+			<_.BtnContentWrapper>
+				<_.CountTitle>
+					총 <_.CountContent>{companyCount}</_.CountContent>개
+				</_.CountTitle>
+				<_.BtnWrapper>
+					<Button
+						size="S"
+						onClick={() => {
+							fileDownloadAPI();
+						}}
+					>
+						엑셀 출력
+					</Button>
+					<Button
+						kind="Ghost"
+						size="S"
+						disabled={buttonDisabled}
+						onClick={() => {
+							changeStatusBtnClick('PARTICIPATING');
+						}}
+					>
+						참여기업 등록
+					</Button>
+					<Button
+						kind="Ghost"
+						size="S"
+						disabled={buttonDisabled}
+						onClick={() => {
+							changeStatusBtnClick('LEAD');
+						}}
+					>
+						선도기업 등록
+					</Button>
+					<Button
+						kind="Ghost"
+						size="S"
+						disabled={buttonDisabled}
+						onClick={changeContractAPI.mutate}
+					>
+						협약등록
+					</Button>
+				</_.BtnWrapper>
+			</_.BtnContentWrapper>
 			<_.TableWrapper>
 				<Table
 					tableData={