Merge branch 'develop'

Team-return · Aug 13, 2024 · 9b005f0 · 9b005f0
2 parents e95fbfc + 656d51c
commit 9b005f0
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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,24 +39,27 @@ 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) {
 			setCompanyCount(CompanyCountData.count);
 		}
 	}, [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
@@ -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