From e00f9679ecca68128a5639b80aaf1f43ea76fbda Mon Sep 17 00:00:00 2001
From: hyuna <hyuna_0525@dsm.hs.kr>
Date: Mon, 8 Jul 2024 10:12:42 +0900
Subject: [PATCH] =?UTF-8?q?fix=20::=09=EB=AA=A8=EC=A7=91=EC=9D=98=EB=A2=B0?=
 =?UTF-8?q?=EC=84=9C,=20=EA=B8=B0=EC=97=85=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=97=91=EC=85=80=20=EB=8B=A4=EC=9A=B4=EB=A1=9C=EB=93=9C=20?=
 =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Apis/Companies/index.ts                   | 15 +++++++++
 src/Apis/Recruitments/index.ts                | 16 +++++++++
 .../CompanyRecruitment/Table/index.tsx        | 33 +++++++------------
 .../RecruitmentForm/Table/index.tsx           | 28 +++++++---------
 4 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/src/Apis/Companies/index.ts b/src/Apis/Companies/index.ts
index da93d4f..e37f8a1 100644
--- a/src/Apis/Companies/index.ts
+++ b/src/Apis/Companies/index.ts
@@ -171,3 +171,18 @@ export const useCompanyCount = () => {
 		return data;
 	});
 };
+
+export const useCompanyExcel = (options: MutationOptions) => {
+	return useMutation(async () => {
+		const { data } = await instance.get(`${router}/file`, {
+			responseType: 'blob',
+		});
+		const url = window.URL.createObjectURL(new Blob([data]));
+		const link = document.createElement('a');
+		link.href = url;
+		link.setAttribute('download', '모집기업의뢰서.xlsx');
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	}, options);
+};
diff --git a/src/Apis/Recruitments/index.ts b/src/Apis/Recruitments/index.ts
index 81f1195..4ac9206 100644
--- a/src/Apis/Recruitments/index.ts
+++ b/src/Apis/Recruitments/index.ts
@@ -174,3 +174,19 @@ export const useRecruitmentCount = () => {
 		return data;
 	});
 };
+
+
+export const useRecruitmentExcel = (options: MutationOptions) => {
+	return useMutation(async () => {
+		const { data } = await instance.get(`${router}/file`, {
+			responseType: 'blob',
+		});
+		const url = window.URL.createObjectURL(new Blob([data]));
+		const link = document.createElement('a');
+		link.href = url;
+		link.setAttribute('download', '모집기업의뢰서.xlsx');
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	}, options);
+};
diff --git a/src/Components/CompanyRecruitment/Table/index.tsx b/src/Components/CompanyRecruitment/Table/index.tsx
index f715567..cd5810c 100644
--- a/src/Components/CompanyRecruitment/Table/index.tsx
+++ b/src/Components/CompanyRecruitment/Table/index.tsx
@@ -11,14 +11,13 @@ import {
 	useChangeCompanyStatus,
 	useChangeContractCompany,
 	useCompanyCount,
+	useCompanyExcel,
 } from '../../../Apis/Companies';
 import { CompanyRecruitmentResponse } from '../../../Apis/Companies/response';
 import { companyType } from '../../../Utils/Translation';
 import { searchInArray } from '../../../Utils/useSearchForArray';
 import { Link } from 'react-router-dom';
 import { useCompanyRecruitmentQueryString } from '../../../Store/State';
-import { DownloadDataPropsType } from '../../../Apis/File/request';
-import { useDownloadData } from '../../../Apis/File';
 
 interface PropsType {
 	companyRecruitment: CompanyRecruitmentResponse;
@@ -40,15 +39,20 @@ export function CompanyRecruitmentTable({
 	const [clickedData, setClickedData] = useState<number[]>([]);
 	const [changeStatus, setChangeStatus] = useState<string>('');
 	const [companyCount, setCompanyCount] = useState<number>(0);
-	const [downloadUrl, setDownloadUrl] = useState<DownloadDataPropsType>({
-		fileUrl: '',
-		fileName: '',
-	});
 
 	const { companyRecruitmentQueryString, setCompanyRecruitmentQueryString } =
 		useCompanyRecruitmentQueryString();
 
 	const { data: CompanyCountData } = useCompanyCount();
+	const { mutate: useCompanyExcelMutate } = useCompanyExcel({
+		onError: () => {
+			append({
+				title: '엑셀 다운로드에 실패하였습니다',
+				message: '',
+				type: 'RED',
+			});
+		},
+	});
 
 	useEffect(() => {
 		if (CompanyCountData) {
@@ -56,8 +60,6 @@ export function CompanyRecruitmentTable({
 		}
 	}, [CompanyCountData]);
 
-	const { mutate: downloadExcel } = useDownloadData(downloadUrl);
-
 	/** 전체 선택 & 전체 선택 해제하는 함수입니다. */
 	const checkAllBox = () => {
 		if (searchInArray(allSelectFormId, clickedData).length === dataLength) {
@@ -116,14 +118,6 @@ export function CompanyRecruitmentTable({
 		},
 	});
 
-	const fileDownloadAPI = () => {
-		setDownloadUrl({
-			fileUrl: '/companies/file',
-			fileName: '모집기업리스트.xlsx',
-		});
-		setTimeout(downloadExcel);
-	};
-
 	/** 변경 버튼을 클릭했을 때 실행할 함수입니다. */
 	const changeStatusBtnClick = (statusName: string) => {
 		setChangeStatus(statusName);
@@ -282,12 +276,7 @@ export function CompanyRecruitmentTable({
 					총 <_.CountContent>{companyCount}</_.CountContent>개
 				</_.CountTitle>
 				<_.BtnWrapper>
-					<Button
-						size="S"
-						onClick={() => {
-							fileDownloadAPI();
-						}}
-					>
+					<Button size="S" onClick={useCompanyExcelMutate}>
 						엑셀 출력
 					</Button>
 					<Button
diff --git a/src/Components/RecruitmentForm/Table/index.tsx b/src/Components/RecruitmentForm/Table/index.tsx
index 1d9cd3d..25cc311 100644
--- a/src/Components/RecruitmentForm/Table/index.tsx
+++ b/src/Components/RecruitmentForm/Table/index.tsx
@@ -11,14 +11,13 @@ import { Pagination } from '../../../Utils/Pagination';
 import {
 	useChangeRecruitmentsStatus,
 	useRecruitmentCount,
+	useRecruitmentExcel,
 } from '../../../Apis/Recruitments/index';
 import { companyStatus, companyType } from '../../../Utils/Translation';
 import { getValueByKey } from '../../../Utils/useGetPropertyKey';
 import { searchInArray } from '../../../Utils/useSearchForArray';
 import { Link } from 'react-router-dom';
 import { useRecruitmentFormQueryString } from '../../../Store/State';
-import { useDownloadData } from '../../../Apis/File';
-import { DownloadDataPropsType } from '../../../Apis/File/request';
 
 interface PropsType {
 	recruitmentForm: RecruitmentFormResponse;
@@ -37,6 +36,15 @@ export function RecruitmentFormTable({
 }: PropsType) {
 	const { append } = useToastStore();
 	const { data: RecruitmentCountData } = useRecruitmentCount();
+	const { mutate: useRecruitmentExcelMutate } = useRecruitmentExcel({
+		onError: () => {
+			append({
+				title: '엑셀 다운로드에 실패하였습니다',
+				message: '',
+				type: 'RED',
+			});
+		},
+	});
 
 	const { recruitmentFormQueryString, setRecruitmentFormQueryString } =
 		useRecruitmentFormQueryString();
@@ -46,10 +54,6 @@ export function RecruitmentFormTable({
 	const [clickedData, setClickedData] = useState<string[]>([]);
 	const [changeStatus, setChangeStatus] = useState<string>('');
 	const [recruitmentCount, setRecruitmentCount] = useState<number>(0);
-	const [downloadUrl, setDownloadUrl] = useState<DownloadDataPropsType>({
-		fileUrl: '',
-		fileName: '',
-	});
 
 	/** 지원서 상태를 변경하는 api를 호출합니다. */
 	const { mutate: changeStatusAPI, isLoading } = useChangeRecruitmentsStatus(
@@ -242,16 +246,6 @@ export function RecruitmentFormTable({
 		<_.TitleText>모집종료일</_.TitleText>,
 	];
 
-	const { mutate: downloadExcel } = useDownloadData(downloadUrl);
-
-	const fileDownloadAPI = () => {
-		setDownloadUrl({
-			fileUrl: '/recruitments/file',
-			fileName: '모집의뢰서리스트.xlsx',
-		});
-		setTimeout(downloadExcel);
-	};
-
 	/** 테이블의 width입니다. */
 	const tableWidth: number[] = [3, 7, 18, 30, 6, 6, 6, 6, 10, 10];
 
@@ -264,7 +258,7 @@ export function RecruitmentFormTable({
 					총 <_.CountContent>{recruitmentCount}</_.CountContent>개
 				</_.CountTitle>
 				<_.BtnWrapper>
-					<Button size="S" onClick={() => fileDownloadAPI()}>
+					<Button size="S" onClick={useRecruitmentExcelMutate}>
 						엑셀출력
 					</Button>
 					<Button