멋대 수료증 발급 로직 (마이페이지, 어드민) (#137)

* Feat : SignUp 기수 추가 * Feat : 기수 추가 * Feat : 마이페이지 수료증 발급 추가 * Feat : 마이페이지 수료증 개발 모달 추가 * Feat : 수료증 개발 * Fix : console.log 삭제 * Fix : 수료증 개발 모바일 * Feat : 수료증 개발 웹 * Fix : 어드민 수료증 등급 변환 후 체크 이슈 해결 * Fix : 수료증 중복 post 제거
LikelionUniv · Jan 9, 2025 · 1a2220c · 1a2220c
1 parent 592c126
commit 1a2220c
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 34 deletions.
diff --git a/src/pages/admin/components/modal/AdminCertificateModal.tsx b/src/pages/admin/components/modal/AdminCertificateModal.tsx
@@ -3,15 +3,18 @@ import styled from 'styled-components';
 import Cancel from '../../../../img/admin/Cancel.svg';
 import DropDownOrdinal from '../../../signUp/components/DropDownOrdinal';
 import useChangeGraduations from '../../../../query/post/useChangeGraduations';
+import { useSelectedUsers } from '../SelectedUserContext';
 
 interface CertificateModalProps {
     onClose: () => void;
     selectedUserIds: number[];
+    setSelectedUserIds: React.Dispatch<React.SetStateAction<number[]>>;
 }
 
 const AdminCertificateModal: React.FC<CertificateModalProps> = ({
     onClose,
     selectedUserIds,
+    setSelectedUserIds,
 }) => {
     const trackOptions = [
         { value: 10, label: '10기' },
@@ -20,6 +23,7 @@ const AdminCertificateModal: React.FC<CertificateModalProps> = ({
     ];
 
     const { mutate } = useChangeGraduations();
+    const { selectAll, setSelectAll } = useSelectedUsers();
 
     const [ordinal, setOrdinal] = useState<number | undefined>(undefined);
 
@@ -36,6 +40,10 @@ const AdminCertificateModal: React.FC<CertificateModalProps> = ({
             onSuccess: () => {
                 onClose();
                 alert('변경되었습니다.');
+                setSelectedUserIds([]);
+                if (selectAll) {
+                    setSelectAll(false);
+                }
             },
         });
     };

diff --git a/src/pages/admin/components/user/TableBottom.tsx b/src/pages/admin/components/user/TableBottom.tsx
@@ -77,6 +77,7 @@ const TableBottom: React.FC = () => {
                 <AdminCertificateModal
                     onClose={() => setIsChangeCertificateModal(false)}
                     selectedUserIds={selectedUserIds}
+                    setSelectedUserIds={setSelectedUserIds}
                 />
             )}
         </Wrapper>

diff --git a/src/pages/login/components/mobile/MMoreInfo.style.tsx b/src/pages/login/components/mobile/MMoreInfo.style.tsx
@@ -31,7 +31,7 @@ export const Form = styled.form`
 export const Field = styled.div`
     margin-bottom: 34px;
 
-    &:nth-child(3) {
+    &:nth-child(4) {
         margin-bottom: 222px;
     }
 

diff --git a/src/pages/login/components/mobile/MMoreInfo.tsx b/src/pages/login/components/mobile/MMoreInfo.tsx
@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 
 import * as MI from './MMoreInfo.style';
 import SignupModal from './SignupModal';
 import { axiosInstance } from '../../../../api/axios';
 import { LoginComplete } from '../LoginComplete';
+import DropDownOrdinal from '../../../signUp/components/DropDownOrdinal';
 
 interface IForm {
     name: string;
@@ -14,7 +15,26 @@ interface IForm {
 }
 
 function MMoreInfo() {
+    const trackOptions = [
+        { value: 1, label: '1기' },
+        { value: 2, label: '2기' },
+        { value: 3, label: '3기' },
+        { value: 4, label: '4기' },
+        { value: 5, label: '5기' },
+        { value: 6, label: '6기' },
+        { value: 7, label: '7기' },
+        { value: 8, label: '8기' },
+        { value: 9, label: '9기' },
+        { value: 10, label: '10기' },
+        { value: 11, label: '11기' },
+        { value: 12, label: '12기' },
+        { value: 13, label: '13기' },
+    ];
+
     const [universityName, setUniversityName] = useState('학교');
+    const [ordinalNumber, setOrdinalNumber] = useState<undefined | number>(
+        undefined,
+    );
     const [modalOpen, setModalOpen] = useState(false);
     const { provider } = useParams();
     const [isSuccess, updateIsSuccess] = useState<boolean>(false);
@@ -28,6 +48,7 @@ function MMoreInfo() {
 
     const requestSignup = async (data: IForm) => {
         const idtoken = localStorage.getItem('idtoken');
+
         try {
             const response = await axiosInstance.post(
                 `/api/v1/auth/${provider}/signup?idtoken=${idtoken}`,
@@ -52,7 +73,14 @@ function MMoreInfo() {
     };
 
     const onSubmit = (data: IForm) => {
-        requestSignup(data);
+        if (!ordinalNumber) return;
+        const totalData = { ...data, ordinal: ordinalNumber };
+
+        requestSignup(totalData);
+    };
+
+    const handleOrdinal = (e: any) => {
+        setOrdinalNumber(e.value);
     };
     if (isSuccess) return <LoginComplete />;
     return (
@@ -91,7 +119,19 @@ function MMoreInfo() {
                             {...register('major', { required: true })}
                         />
                     </MI.Field>
-                    <MI.SaveBtn type="submit" active={isValid}>
+                    <MI.Field>
+                        <MI.Label>기수</MI.Label>
+                        <DropDownOrdinal
+                            options={trackOptions}
+                            onChange={handleOrdinal}
+                            placeholder={'기수를 선택해주세요.'}
+                        />
+                    </MI.Field>
+
+                    <MI.SaveBtn
+                        type="submit"
+                        active={isValid && ordinalNumber !== undefined}
+                    >
                         저장하기
                     </MI.SaveBtn>
                 </MI.Form>

diff --git a/src/pages/mypage/modal/CertificateModal.tsx b/src/pages/mypage/modal/CertificateModal.tsx
@@ -15,26 +15,19 @@ const CertificateModal: React.FC<CertificateModalProps> = ({ onClose }) => {
         { value: 12, label: '12기' },
         { value: 11, label: '11기' },
         { value: 10, label: '10기' },
-        { value: 9, label: '9기' },
-        { value: 8, label: '8기' },
-        { value: 7, label: '7기' },
-        { value: 6, label: '6기' },
-        { value: 5, label: '5기' },
-        { value: 4, label: '4기' },
-        { value: 3, label: '3기' },
-        { value: 2, label: '2기' },
-        { value: 1, label: '1기' },
     ];
 
     const [ordinal, setOrdinal] = useState<number | undefined>(undefined);
     const [isError, setIsError] = useState<boolean>(false);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
 
     const { mutate } = usePostGraduations();
     const handleOrdinal = (e: any) => {
         setOrdinal(e.value);
     };
 
     const onGraduation = () => {
+        setIsLoading(true);
         mutate(ordinal!, {
             onSuccess: async data => {
                 const response = await fetch(data.url);
@@ -52,10 +45,14 @@ const CertificateModal: React.FC<CertificateModalProps> = ({ onClose }) => {
 
                 // Blob URL 해제
                 URL.revokeObjectURL(blobUrl);
+                setIsLoading(false);
+                setOrdinal(undefined);
             },
             onError: (err: any) => {
                 if (err.response.status === 404) {
                     setIsError(true);
+                    setIsLoading(false);
+                    setOrdinal(undefined);
                 }
             },
         });
@@ -114,14 +111,18 @@ const CertificateModal: React.FC<CertificateModalProps> = ({ onClose }) => {
                             </div>
                         </Text>
                         <Content>
-                            <>
-                                <div className="BoxName">기수 선택</div>
-                                <DropDownOrdinal
-                                    options={trackOptions}
-                                    onChange={handleOrdinal}
-                                    placeholder={'기수를 선택해주세요.'}
-                                />
-                            </>
+                            {isLoading ? (
+                                <Center> 수료 확인중입니다.</Center>
+                            ) : (
+                                <>
+                                    <div className="BoxName">기수 선택</div>
+                                    <DropDownOrdinal
+                                        options={trackOptions}
+                                        onChange={handleOrdinal}
+                                        placeholder={'기수를 선택해주세요.'}
+                                    />
+                                </>
+                            )}
                         </Content>
                     </>
                 )}
@@ -130,9 +131,19 @@ const CertificateModal: React.FC<CertificateModalProps> = ({ onClose }) => {
                         취소하기
                     </Button>
 
-                    <Button isColor={true} onClick={onGraduation}>
-                        발급하기
-                    </Button>
+                    {ordinal === undefined ? (
+                        <Button isColor={false}>발급하기</Button>
+                    ) : (
+                        <>
+                            {isLoading ? (
+                                <Button isColor={false}>로딩중</Button>
+                            ) : (
+                                <Button isColor={true} onClick={onGraduation}>
+                                    발급하기
+                                </Button>
+                            )}
+                        </>
+                    )}
                 </ButtonWrapper>
             </Wrapper>
         </BackgroundOverlay>
@@ -209,7 +220,10 @@ const ButtonWrapper = styled.div`
         margin-top: 25px;
     }
 `;
-
+const Center = styled.div`
+    text-align: center;
+    padding: 34px 0;
+`;
 const Button = styled.div<{ isColor: boolean }>`
     margin: 20px;
     width: 100%;

diff --git a/src/pages/signUp/components/Sform.tsx b/src/pages/signUp/components/Sform.tsx
@@ -7,7 +7,6 @@ import DropDownOrdinal, { OptionType } from './DropDownOrdinal';
 import { useParams } from 'react-router-dom';
 import { axiosInstance } from '../../../api/axios';
 import { LoginComplete } from '../../login/components/LoginComplete';
-import { cpSync } from 'fs';
 
 const Ndiv = styled.div`
     color: var(--black, #000);
@@ -48,7 +47,6 @@ for (let i = 11; i >= 1; i--) {
 }
 
 const trackOptions = [
-    { value: 0, label: '알럼나이' },
     { value: 1, label: '1기' },
     { value: 2, label: '2기' },
     { value: 3, label: '3기' },
@@ -70,18 +68,19 @@ const roleOptions = [
     { value: 3, label: '아기사자' },
 ];
 
-/* form type */
 interface FormState {
     name: string;
     universityName: string;
     major: string;
+    ordinal: undefined | number;
 }
 
 const Sform = () => {
     const [formState, setFormState] = useState<FormState>({
         name: '',
         universityName: '',
         major: '',
+        ordinal: undefined,
     });
 
     const handleSelectChange =
@@ -130,7 +129,8 @@ const Sform = () => {
         if (
             formState.name === '' ||
             formState.universityName === '' ||
-            formState.major === ''
+            formState.major === '' ||
+            formState.ordinal === undefined
             // formState.generation === 0 ||
             // formState.role === 0 ||
             // formState.track === 0
@@ -143,10 +143,6 @@ const Sform = () => {
         }
     };
 
-    const handleOrdinal = (e: any) => {
-        console.log(e.value);
-    };
-
     return (
         <>
             {!isSuccess ? (
@@ -180,7 +176,12 @@ const Sform = () => {
 
                     <DropDownOrdinal
                         options={trackOptions}
-                        onChange={handleOrdinal}
+                        onChange={e =>
+                            setFormState({
+                                ...formState,
+                                ordinal: e!.value,
+                            })
+                        }
                         placeholder={'기수를 선택해주세요.'}
                     />