어드민 원서 관리 엑셀 내보내기 기능 개발

apps/admin/src/app/page.tsx

@@ -2,8 +2,9 @@
 
 import ButtonMenu from '@/components/common/ButtonMenu/ButtonMenu';
 import ButtonMenuItem from '@/components/common/ButtonMenu/ButtonMenuItem/ButtonMenuItem';
+import ExportExcelModal from '@/components/form/ExportExcelModal/ExportExcelModal';
 import FormList from '@/components/form/FormList/FormList';
-import SecondScoreInputModal from '@/components/form/SecondScoreUploadModal/SecondScoreUploadModal';
+import SecondScoreUploadModal from '@/components/form/SecondScoreUploadModal/SecondScoreUploadModal';
 import AppLayout from '@/layouts/AppLayout';
 import initMockAPI from '@/mocks';
 import { useFormListTypeStore } from '@/store/form/type';
@@ -33,12 +34,16 @@ const MainPage = () => {
 
     const overlay = useOverlay();
 
-    const openSecondScoreInputModal = () => {
+    const openSecondScoreUplaodModal = () => {
         overlay.open(({ isOpen, close }) => (
-            <SecondScoreInputModal isOpen={isOpen} onClose={close} />
+            <SecondScoreUploadModal isOpen={isOpen} onClose={close} />
         ));
     };
 
+    const openExportExcelModal = () => {
+        overlay.open(({ isOpen, close }) => <ExportExcelModal isOpen={isOpen} onClose={close} />);
+    };
+
     return (
         <AppLayout>
             <StyledMainPage>
@@ -77,7 +82,7 @@ const MainPage = () => {
                                             검토해야 하는 원서 모아보기
                                         </Text>
                                     </ButtonMenuItem>,
-                                    <ButtonMenuItem onClick={openSecondScoreInputModal}>
+                                    <ButtonMenuItem onClick={openSecondScoreUplaodModal}>
                                         <IconEditDocument
                                             color={color.gray600}
                                             width={24}
@@ -87,7 +92,7 @@ const MainPage = () => {
                                             2차 전형 점수 입력하기
                                         </Text>
                                     </ButtonMenuItem>,
-                                    <ButtonMenuItem>
+                                    <ButtonMenuItem onClick={openExportExcelModal}>
                                         <IconUpload color={color.gray600} width={24} height={24} />
                                         <Text fontType="p2" color={color.gray900}>
                                             명단 엑셀로 내보내기

apps/admin/src/components/form/ExportExcelModal/ExportExcelModal.hooks.tsx

@@ -0,0 +1,21 @@
+import { useExportExcelQuery } from '@/services/form/queries';
+import { ExportExcelType } from '@/types/form/client';
+
+export const useExportExcelAction = (exportExcelType: ExportExcelType | null) => {
+    const { data: exportExcelData } = useExportExcelQuery(exportExcelType);
+
+    const handleExportExcelButtonClick = () => {
+        if (!exportExcelData) return;
+        const excelUrl = window.URL.createObjectURL(new Blob([exportExcelData]));
+
+        const link = document.createElement('a');
+        link.href = excelUrl;
+        link.download = `${exportExcelType}.xlsx`;
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        window.URL.revokeObjectURL(excelUrl);
+    };
+
+    return { handleExportExcelButtonClick };
+};

apps/admin/src/components/form/ExportExcelModal/ExportExcelModal.tsx

@@ -0,0 +1,173 @@
+import { ExportExcelType } from '@/types/form/client';
+import { IconClose } from '@maru/icon';
+import { color } from '@maru/theme';
+import { Button, Column, Row, Text } from '@maru/ui';
+import { flex } from '@maru/utils';
+import { ChangeEventHandler, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { useExportExcelAction } from './ExportExcelModal.hooks';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const ExportExcelModal = ({ isOpen, onClose }: Props) => {
+    const [exportExcelType, setExportExcelType] = useState<ExportExcelType | null>(null);
+
+    const handleExportExcelTypeRadioChagne: ChangeEventHandler<HTMLInputElement> = (e) => {
+        const { value } = e.target;
+        setExportExcelType(value as ExportExcelType);
+    };
+
+    const { handleExportExcelButtonClick } = useExportExcelAction(exportExcelType);
+
+    return (
+        <BlurBackground $isOpen={isOpen}>
+            <StyledExportExcelModal>
+                <Row justifyContent="space-between">
+                    <Column gap={8}>
+                        <Text fontType="H2" color={color.gray900}>
+                            엑셀 내보내기
+                        </Text>
+                        <Text fontType="p3" color={color.gray600}>
+                            무슨 명단을 엑셀로 내보내실 건가요?
+                        </Text>
+                    </Column>
+                    <IconClose
+                        width={36}
+                        height={36}
+                        color={color.gray600}
+                        cursor="pointer"
+                        onClick={onClose}
+                    />
+                </Row>
+                <Row justifyContent="space-between" gap={12}>
+                    <CardRadioBox $checked={exportExcelType === '전체 내보내기'}>
+                        <Text
+                            fontType="context"
+                            color={
+                                exportExcelType === '전체 내보내기'
+                                    ? color.maruDefault
+                                    : color.gray600
+                            }>
+                            전체 내보내기
+                        </Text>
+                        <input
+                            type="radio"
+                            name="exportExcelType"
+                            value="전체 내보내기"
+                            onChange={handleExportExcelTypeRadioChagne}
+                            hidden
+                        />
+                    </CardRadioBox>
+                    <CardRadioBox $checked={exportExcelType === '1차 전형 결과'}>
+                        <Text
+                            fontType="context"
+                            color={
+                                exportExcelType === '1차 전형 결과'
+                                    ? color.maruDefault
+                                    : color.gray600
+                            }>
+                            1차 전형 결과
+                        </Text>
+                        <input
+                            type="radio"
+                            name="exportExcelType"
+                            value="1차 전형 결과"
+                            onChange={handleExportExcelTypeRadioChagne}
+                            hidden
+                        />
+                    </CardRadioBox>
+                    <CardRadioBox $checked={exportExcelType === '2차 전형 결과'}>
+                        <Text
+                            fontType="context"
+                            color={
+                                exportExcelType === '2차 전형 결과'
+                                    ? color.maruDefault
+                                    : color.gray600
+                            }>
+                            2차 전형 결과
+                        </Text>
+                        <input
+                            type="radio"
+                            name="exportExcelType"
+                            value="2차 전형 결과"
+                            onChange={handleExportExcelTypeRadioChagne}
+                            hidden
+                        />
+                    </CardRadioBox>
+                    <CardRadioBox $checked={exportExcelType === '최종 합격자'}>
+                        <Text
+                            fontType="context"
+                            color={
+                                exportExcelType === '최종 합격자'
+                                    ? color.maruDefault
+                                    : color.gray600
+                            }>
+                            최종 합격자
+                        </Text>
+                        <input
+                            type="radio"
+                            name="exportExcelType"
+                            value="최종 합격자"
+                            onChange={handleExportExcelTypeRadioChagne}
+                            hidden
+                        />
+                    </CardRadioBox>
+                </Row>
+                <Row gap={16} style={{ alignSelf: 'flex-end' }}>
+                    <Button size="SMALL" option="SECONDARY" onClick={onClose}>
+                        취소
+                    </Button>
+                    <Button
+                        size="SMALL"
+                        option={exportExcelType ? 'PRIMARY' : 'DISABLED'}
+                        onClick={handleExportExcelButtonClick}>
+                        내보내기
+                    </Button>
+                </Row>
+            </StyledExportExcelModal>
+        </BlurBackground>
+    );
+};
+
+export default ExportExcelModal;
+
+const BlurBackground = styled.div<{ $isOpen: boolean }>`
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: ${(props) => (props.$isOpen ? 'flex' : 'none')};
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 1;
+`;
+
+const StyledExportExcelModal = styled.div`
+    ${flex({ flexDirection: 'column', justifyContent: 'space-between' })}
+    width: 720px;
+    height: 350px;
+    padding: 36px;
+    border-radius: 16px;
+    background: ${color.white};
+`;
+
+const CardRadioBox = styled.label<{ $checked: boolean }>`
+    ${flex({ alignItems: 'center', justifyContent: 'center' })}
+    height: 80px;
+    width: 100%;
+    padding: 12px 0px;
+    background: ${color.white};
+    border-radius: 12px;
+    border: 1px solid ${color.gray200};
+
+    ${({ $checked }) =>
+        $checked &&
+        css`
+            background: ${color.maruLightBlue};
+        `}
+`;

apps/admin/src/components/form/SecondScoreUploadModal/SecondScoreUploadModal.tsx

@@ -3,7 +3,7 @@ import { IconClose } from '@maru/icon';
 import { color } from '@maru/theme';
 import { Button, Column, Row, Text, TextButton } from '@maru/ui';
 import { flex } from '@maru/utils';
-import { useState } from 'react';
+import { ChangeEventHandler, useRef } from 'react';
 import styled from 'styled-components';
 import SecondScoreUploader from '../SecondScoreUploader/SecondScoreUploader';
 import {
@@ -19,12 +19,28 @@ interface Props {
 const SecondScoreUploadModal = ({ isOpen, onClose }: Props) => {
     const { handleDownloadSecondScoreFormatButtonClick } = useSecondScoreFormatAction();
     const [fileData, setFileData] = useSecondScoreFileStore();
-    /* TODO :: 이거 좀 별론데... 요청 성공했을 때 input value도 지워야 됨... */
-    const [inputFileValue, setInputFileValue] = useState('');
+
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleUploadFileButtonClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const removeFileInputValue = () => {
+        if (!fileInputRef.current) return;
+        fileInputRef.current.value = '';
+    };
+
+    const handleFileDataChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+        const { files } = e.target;
+
+        if (!files || files.length === 0) return;
+        setFileData(files[0]);
+    };
 
     const removeFileAndCloseModal = () => {
         setFileData(null);
-        setInputFileValue('');
+        removeFileInputValue();
         onClose();
     };
 
@@ -50,13 +66,13 @@ const SecondScoreUploadModal = ({ isOpen, onClose }: Props) => {
                         height={36}
                         color={color.gray600}
                         cursor="pointer"
-                        onClick={onClose}
+                        onClick={removeFileAndCloseModal}
                     />
                 </Row>
                 <Column gap={16}>
                     <SecondScoreUploader
-                        inputFileValue={inputFileValue}
-                        setInputFileValue={setInputFileValue}
+                        removeFileInputValue={removeFileInputValue}
+                        handleUploadFileButtonClick={handleUploadFileButtonClick}
                     />
                     <TextButton
                         fontType="btn2"
@@ -66,7 +82,7 @@ const SecondScoreUploadModal = ({ isOpen, onClose }: Props) => {
                     </TextButton>
                 </Column>
                 <Row gap={16} style={{ alignSelf: 'flex-end' }}>
-                    <Button size="SMALL" option="SECONDARY" onClick={onClose}>
+                    <Button size="SMALL" option="SECONDARY" onClick={removeFileAndCloseModal}>
                         취소
                     </Button>
                     <Button
@@ -77,6 +93,13 @@ const SecondScoreUploadModal = ({ isOpen, onClose }: Props) => {
                     </Button>
                 </Row>
             </StyledSecondScoreUploadModal>
+            <input
+                type="file"
+                ref={fileInputRef}
+                accept=".xlsx"
+                onChange={handleFileDataChange}
+                hidden
+            />
         </BlurBackground>
     );
 };

apps/admin/src/components/form/SecondScoreUploader/SecondScoreUploader.tsx

@@ -3,36 +3,23 @@ import { IconClose } from '@maru/icon';
 import { color } from '@maru/theme';
 import { Button, Column, Text } from '@maru/ui';
 import { flex } from '@maru/utils';
-import { ChangeEventHandler, Dispatch, DragEvent, SetStateAction, useRef, useState } from 'react';
+import { DragEvent, useState } from 'react';
 import styled from 'styled-components';
 
 interface Props {
-    inputFileValue: string;
-    setInputFileValue: Dispatch<SetStateAction<string>>;
+    removeFileInputValue: () => void;
+    handleUploadFileButtonClick: () => void;
 }
 
-const SecondScoreUploader = ({ inputFileValue, setInputFileValue }: Props) => {
+const SecondScoreUploader = ({ removeFileInputValue, handleUploadFileButtonClick }: Props) => {
     const [fileData, setFileData] = useSecondScoreFileStore();
-    const imageFileInputRef = useRef<HTMLInputElement>(null);
     const [isDragging, setIsDragging] = useState(false);
 
-    const handleUploadFileButtonClick = () => {
-        imageFileInputRef.current?.click();
-    };
-
     const handleUploadCancelButtonClick = () => {
-        setInputFileValue('');
+        removeFileInputValue();
         setFileData(null);
     };
 
-    const handleFileDataChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-        const { files, value } = e.target;
-
-        if (!files || files.length === 0) return;
-        setInputFileValue(value);
-        setFileData(files[0]);
-    };
-
     // DnD
     const onDragEnter = (e: DragEvent<HTMLDivElement>) => {
         e.preventDefault();
@@ -91,14 +78,6 @@ const SecondScoreUploader = ({ inputFileValue, setInputFileValue }: Props) => {
                     </>
                 )}
             </Column>
-            <input
-                type="file"
-                ref={imageFileInputRef}
-                value={inputFileValue}
-                accept=".xlsx"
-                onChange={handleFileDataChange}
-                hidden
-            />
         </StyledSecondScoreUploader>
     );
 };

apps/admin/src/constants/common/constant.ts

@@ -6,6 +6,7 @@ export const KEY = {
     FAQ_LIST: 'useFaqList',
     FAQ_DETAIL: 'useFaqDetail',
     NOTICE_DETAIL: 'useNoticeDetail',
+    EXPORT_EXCEL: 'useExportExcel',
 };
 
 export const ROUTES = {