fix: closeModal props 수정

services/admin/src/components/modals/LogOut.tsx

@@ -1,14 +1,12 @@
+import { useModal } from '@/hooks/useModal';
 import { pagePath } from '@/utils/pagePath';
 import { Button, Modal } from '@team-aliens/design-system';
 import { useCookies } from 'react-cookie';
 import { useNavigate } from 'react-router-dom';
 
-interface PropsType {
-  closeModal: () => void;
-}
-
-export function LogOutModal({ closeModal }: PropsType) {
+export function LogOutModal() {
   const navigate = useNavigate();
+  const { closeModal } = useModal();
 
   const [cookies, setCookie, removeCookie] = useCookies([
     'refresh_token',

services/admin/src/components/modals/SchoolCheckingCode.tsx

@@ -1,11 +1,13 @@
+import { useModal } from '@/hooks/useModal';
 import { Button, Modal } from '@team-aliens/design-system';
 
 interface PropsType {
-  closeModal: () => void;
   onClick: () => void;
 }
 
-export function SchoolCheckingCodeModal({ closeModal, onClick }: PropsType) {
+export function SchoolCheckingCodeModal({ onClick }: PropsType) {
+  const { closeModal } = useModal();
+
   const confirm = () => {
     onClick();
     closeModal();

services/admin/src/components/modals/StudentEditGrade.tsx

@@ -3,15 +3,13 @@ import styled from 'styled-components';
 import { useState } from 'react';
 import { useUploadStudentInfoFile } from '@/hooks/useMangersApis';
 import { getStudentInfoExcel } from '@/apis/managers/index';
+import { useModal } from '@/hooks/useModal';
 
-interface PropsType {
-  closeModal: () => void;
-}
-
-export const StudentEditGrade = ({ closeModal }: PropsType) => {
+export const StudentEditGrade = () => {
   const [uploadedFile, setUplodaedFile] = useState(null);
-  const studentAccount = useUploadStudentInfoFile(uploadedFile, closeModal);
+  const studentAccount = useUploadStudentInfoFile(uploadedFile);
   const { mutate: getStudentInfo } = getStudentInfoExcel();
+  const { closeModal } = useModal();
 
   const onFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     setUplodaedFile(e.target.files[0]);
@@ -36,7 +34,8 @@ export const StudentEditGrade = ({ closeModal }: PropsType) => {
     >
       <Button onClick={getStudentInfo}>학생 정보 다운로드</Button>
       <_Text margin={[15, 0, 14, 0]}>
-        학생 정보 엑셀을 다운로드 받은 후<br/>학번을 수정하여 업로드 해주세요.
+        학생 정보 엑셀을 다운로드 받은 후<br />
+        학번을 수정하여 업로드 해주세요.
       </_Text>
       {uploadedFile ? (
         <>
@@ -125,4 +124,4 @@ const _Upload = styled.input`
 
 const _Text = styled(Text)`
   width: 324px;
-`;
+`;

services/admin/src/components/modals/StudentEditRoom.tsx

@@ -1,22 +1,21 @@
 import { Button, Modal, Text } from '@team-aliens/design-system';
 import styled from 'styled-components';
 import { useState } from 'react';
-import { useUploadRoomInfoFile } from "@/hooks/useMangersApis";
+import { useUploadRoomInfoFile } from '@/hooks/useMangersApis';
 import { getStudentInfoExcel } from '@/apis/managers/index';
+import { useModal } from '@/hooks/useModal';
 
-interface PropsType {
-  closeModal: () => void;
-}
-
-export const StudentEditRoom = ({ closeModal }: PropsType) => {
+export const StudentEditRoom = () => {
   const [uploadedFile, setUplodaedFile] = useState(null);
-  const studentAccount = useUploadRoomInfoFile(uploadedFile, closeModal);
+  const studentAccount = useUploadRoomInfoFile(uploadedFile);
   const { mutate: getStudentInfo } = getStudentInfoExcel();
 
   const onFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     setUplodaedFile(e.target.files[0]);
   };
 
+  const { closeModal } = useModal();
+
   return (
     <Modal
       close={closeModal}
@@ -26,16 +25,18 @@ export const StudentEditRoom = ({ closeModal }: PropsType) => {
           취소
         </Button>,
         <Button
-          onClick={() => {studentAccount.mutate();}}
+          onClick={() => {
+            studentAccount.mutate();
+          }}
         >
           확인
         </Button>,
       ]}
     >
       <Button onClick={getStudentInfo}>학생 정보 다운로드</Button>
       <_Text margin={[15, 0, 14, 0]}>
-        학생 정보 엑셀을 다운로드 받은 후<br/>호실, 자리 위치를
-        수정하여 업로드 해주세요.
+        학생 정보 엑셀을 다운로드 받은 후<br />
+        호실, 자리 위치를 수정하여 업로드 해주세요.
       </_Text>
       {uploadedFile ? (
         <>
@@ -124,4 +125,4 @@ const _Upload = styled.input`
 
 const _Text = styled(Text)`
   width: 324px;
-`;
+`;

services/admin/src/components/modals/StudentRegistrationExcel.tsx

@@ -3,14 +3,12 @@ import styled from 'styled-components';
 import { useState } from 'react';
 import { useStudentAccountIssuance } from '@/hooks/useStudentRegistrationExcel';
 import { download } from '@/utils/excel';
+import { useModal } from '@/hooks/useModal';
 
-interface PropsType {
-  closeModal: () => void;
-}
-
-export const StudentRegistrationExcel = ({ closeModal }: PropsType) => {
+export const StudentRegistrationExcel = () => {
   const [uploadedFile, setUplodaedFile] = useState(null);
-  const studentAccount = useStudentAccountIssuance(uploadedFile, closeModal);
+  const studentAccount = useStudentAccountIssuance(uploadedFile);
+  const { closeModal } = useModal();
 
   const onFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     setUplodaedFile(e.target.files[0]);

services/admin/src/hooks/useMangersApis.tsx

@@ -15,9 +15,11 @@ import { pagePath } from '@/utils/pagePath';
 import { TagType } from '@/apis/tags/response';
 import { useSelectedStudentIdStore } from '@/store/useSelectedStudentIdStore';
 import { useQueryClient } from '@tanstack/react-query';
-import { uploadRoomInfoFile, uploadStudentInfoFile } from '@/apis/managers/index';
-import { AxiosError } from "axios";
-
+import {
+  uploadRoomInfoFile,
+  uploadStudentInfoFile,
+} from '@/apis/managers/index';
+import { AxiosError } from 'axios';
 
 interface PropsType {
   selectedId: string;
@@ -95,12 +97,9 @@ export const useDeleteStudent = (student_id: string) => {
   });
 };
 
-
-export const useUploadStudentInfoFile = (
-  file: FileList[0],
-  closeModal: () => void,
-) => {
+export const useUploadStudentInfoFile = (file: FileList[0]) => {
   const { toastDispatch } = useToast();
+  const { closeModal } = useModal();
 
   return useMutation(() => uploadStudentInfoFile(file), {
     onSuccess: () => {
@@ -121,11 +120,9 @@ export const useUploadStudentInfoFile = (
   });
 };
 
-export const useUploadRoomInfoFile = (
-  file: FileList[0],
-  closeModal: () => void,
-) => {
+export const useUploadRoomInfoFile = (file: FileList[0]) => {
   const { toastDispatch } = useToast();
+  const { closeModal } = useModal();
 
   return useMutation(() => uploadRoomInfoFile(file), {
     onSuccess: () => {

services/admin/src/hooks/useStudentRegistrationExcel.ts

@@ -2,12 +2,11 @@ import { studentAccountIssuance } from '@/apis/files';
 import { AxiosError } from 'axios';
 import { useMutation } from '@tanstack/react-query';
 import { useToast } from './useToast';
+import { useModal } from './useModal';
 
-export const useStudentAccountIssuance = (
-  file: FileList[0],
-  closeModal: () => void,
-) => {
+export const useStudentAccountIssuance = (file: FileList[0]) => {
   const { toastDispatch } = useToast();
+  const { closeModal } = useModal();
 
   return useMutation(() => studentAccountIssuance(file), {
     onSuccess: () => {

services/admin/src/pages/myPage/index.tsx

@@ -19,12 +19,13 @@ import { StudentEditRoom } from '@/components/modals/StudentEditRoom';
 import { StudentEditGrade } from '@/components/modals/StudentEditGrade';
 
 export function MyPage() {
-  const { modalState, selectModal, closeModal } = useModal();
+  const { modalState, selectModal } = useModal();
   const openNewQuestionModal = () => selectModal('NEW_QNA');
   const openLogoutModal = () => selectModal('LOGOUT');
   const openStudentExelModal = () => selectModal('STUDENT_EXEL');
   const openStudentEditRoomExcel = () => selectModal('STUDENT_EDIT_ROOM_EXCEL');
-  const openStudentEditGradeExcel = () => selectModal('STUDENT_EDIT_GRADE_EXCEL');
+  const openStudentEditGradeExcel = () =>
+    selectModal('STUDENT_EDIT_GRADE_EXCEL');
 
   const { onHandleChange: onChange, state: qnaState } =
     useForm<ChangeSchoolQnARequest>({
@@ -96,11 +97,11 @@ export function MyPage() {
                   호실 정보 변경
                 </Text>
               </_StudentEdit>
-              <_StudentEdit onClick={openStudentEditGradeExcel}>
+              <_StudentGcnEdit onClick={openStudentEditGradeExcel}>
                 <Text display="block" size="titleS">
                   학번 정보 변경
                 </Text>
-              </_StudentEdit>
+              </_StudentGcnEdit>
             </_StudentEditWrapper>
           </_StudentExcelWrapper>
         </_Wrapper>
@@ -114,22 +115,17 @@ export function MyPage() {
         />
       )}
       {modalState.selectedModal === 'SCHOOL_CHECKING_CODE' && (
-        <SchoolCheckingCodeModal
-          closeModal={closeModal}
-          onClick={getNewCode.mutate}
-        />
-      )}
-      {modalState.selectedModal === 'LOGOUT' && (
-        <LogOutModal closeModal={closeModal} />
+        <SchoolCheckingCodeModal onClick={getNewCode.mutate} />
       )}
+      {modalState.selectedModal === 'LOGOUT' && <LogOutModal />}
       {modalState.selectedModal === 'STUDENT_EXEL' && (
-        <StudentRegistrationExcel closeModal={closeModal} />
+        <StudentRegistrationExcel />
       )}
       {modalState.selectedModal === 'STUDENT_EDIT_ROOM_EXCEL' && (
-        <StudentEditRoom closeModal={closeModal} />
+        <StudentEditRoom />
       )}
       {modalState.selectedModal === 'STUDENT_EDIT_GRADE_EXCEL' && (
-        <StudentEditGrade closeModal={closeModal} />
+        <StudentEditGrade />
       )}
     </>
   );
@@ -198,6 +194,10 @@ const _StudentEdit = styled.div`
   border-radius: 4px;
 `;
 
+const _StudentGcnEdit = styled(_StudentEdit)`
+  width: 250px;
+`;
+
 const _Logout = styled(Text)`
   width: 250px;
   box-shadow: 0 1px 20px rgba(204, 204, 204, 0.24);