Feature/certificate (#135)

* Feat : SignUp 기수 추가

* Feat : 기수 추가

* Feat : 마이페이지 수료증 발급 추가

* Feat : 마이페이지 수료증 개발 모달 추가

* Feat : 수료증 개발

* Fix : console.log 삭제

src/api/axios.ts

@@ -96,6 +96,8 @@ axiosInstance.interceptors.response.use(
             return Promise.reject(error);
         }
 
+        if (axiosError?.code === 'GRADUATION_404_1')
+            return Promise.reject(error);
         alert(axiosError?.message);
         return Promise.reject(error);
     },

src/pages/admin/components/modal/AdminCertificateModal.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import Cancel from '../../../../img/admin/Cancel.svg';
+import DropDownOrdinal from '../../../signUp/components/DropDownOrdinal';
+import useChangeGraduations from '../../../../query/post/useChangeGraduations';
+
+interface CertificateModalProps {
+    onClose: () => void;
+    selectedUserIds: number[];
+}
+
+const AdminCertificateModal: React.FC<CertificateModalProps> = ({
+    onClose,
+    selectedUserIds,
+}) => {
+    const trackOptions = [
+        { value: 10, label: '10기' },
+        { value: 11, label: '11기' },
+        { value: 12, label: '12기' },
+    ];
+
+    const { mutate } = useChangeGraduations();
+
+    const [ordinal, setOrdinal] = useState<number | undefined>(undefined);
+
+    const handleOrdinal = (e: any) => {
+        setOrdinal(e.value);
+    };
+
+    const onGraduation = () => {
+        const data = {
+            ordinal,
+            userIds: selectedUserIds,
+        };
+        mutate(data, {
+            onSuccess: () => {
+                onClose();
+                alert('변경되었습니다.');
+            },
+        });
+    };
+
+    useEffect(() => {
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = 'unset';
+        };
+    }, []);
+
+    return (
+        <BackgroundOverlay>
+            <Wrapper>
+                <Title>수료증 등급 변환</Title>
+                <CancelIcon
+                    style={{ width: '18px', height: '40px' }}
+                    src={Cancel}
+                    onClick={onClose}
+                    alt="취소"
+                />
+
+                <Divider />
+
+                <Text>
+                    <div>수료자 기수를 선택해주세요.</div>
+                </Text>
+                <Content>
+                    <>
+                        <div className="BoxName">기수 선택</div>
+                        <DropDownOrdinal
+                            options={trackOptions}
+                            onChange={handleOrdinal}
+                            placeholder={'기수를 선택해주세요.'}
+                        />
+                    </>
+                </Content>
+                <ButtonWrapper>
+                    <Button isColor={false} onClick={onClose}>
+                        취소하기
+                    </Button>
+
+                    <Button isColor={true} onClick={onGraduation}>
+                        변경하기
+                    </Button>
+                </ButtonWrapper>
+            </Wrapper>
+        </BackgroundOverlay>
+    );
+};
+
+export default AdminCertificateModal;
+
+const BackgroundOverlay = styled.div`
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 998;
+`;
+
+export const Content = styled.div`
+    flex-direction: column;
+    margin: 20px;
+
+    .BoxName {
+        margin: 20px 0;
+        font-weight: 700;
+        @media screen and (max-width: 767px) {
+            margin: 5px 0;
+        }
+    }
+
+    @media screen and (max-width: 767px) {
+        margin: 0;
+    }
+`;
+export const Wrapper = styled.div`
+    background-color: white;
+    padding: 32px 24px 24px 24px;
+    min-width: 588px;
+    border-radius: 20px;
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 999;
+    @media screen and (max-width: 767px) {
+        min-width: 80%;
+        top: 54%;
+        height: 50%;
+        overflow: scroll;
+    }
+`;
+const ButtonWrapper = styled.div`
+    display: flex;
+    @media screen and (max-width: 540px) {
+        margin-top: 25px;
+    }
+`;
+
+const Button = styled.div<{ isColor: boolean }>`
+    margin: 20px;
+    width: 100%;
+    height: 40px;
+    padding: 4px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    color: ${props => (props.isColor ? '#fff' : 'rgba(77, 83, 89, 1)')};
+    background-color: ${props =>
+        props.isColor ? '#ff7710' : 'rgba(234, 236, 238, 1)'};
+
+    border-radius: 8px;
+    @media screen and (max-width: 767px) {
+        margin: 0;
+        width: 100%;
+        padding: 4px 0;
+    }
+    @media screen and (max-width: 540px) {
+        margin-left: ${props => props.isColor && '5px'};
+        margin-right: ${props => !props.isColor && '5px'};
+    }
+`;
+const Title = styled.div`
+    font-size: 20px;
+    font-weight: 700;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+`;
+const Text = styled.div`
+    text-align: center;
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 10px;
+    @media screen and (max-width: 540px) {
+        font-size: 24px;
+    }
+    margin-bottom: 45px;
+    @media screen and (max-width: 540px) {
+        margin-bottom: 25px;
+    }
+`;
+const CancelIcon = styled.img`
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    cursor: pointer;
+`;
+
+const Divider = styled.div`
+    height: 1px;
+
+    background-color: var(--Grey-900, #dcdfe3);
+    width: 100%;
+    margin: 26px 0px;
+`;

src/pages/admin/components/user/TableBottom.tsx

@@ -3,13 +3,17 @@ import { useSelectedUsers } from '../SelectedUserContext';
 import useDeleteUserList from '../../../../query/delete/useDeleteUserList';
 import styled from 'styled-components';
 import EmailModal from '../modal/EmailModal';
-import { useUserProfile } from '../../../../query/mypage/useUserProfile';
+// import { useUserProfile } from '../../../../query/mypage/useUserProfile';
 import { useOutletContext } from 'react-router-dom';
 import { OutletContext } from '../../../../inteface/adminType';
+import AdminCertificateModal from '../modal/AdminCertificateModal';
 
 const TableBottom: React.FC = () => {
     const { selectedUserIds, setSelectedUserIds, selectedUserEmails } =
         useSelectedUsers();
+    const [isChangeCertificateModal, setIsChangeCertificateModal] =
+        useState(false);
+
     const { mutate } = useDeleteUserList();
 
     const [isEmailModalOpen, setIsEmailModalOpen] = useState(false);
@@ -36,6 +40,11 @@ const TableBottom: React.FC = () => {
         openEmailModal();
     };
 
+    const handleChangeOrdinal = () => {
+        if (selectedUserIds.length <= 0) return;
+        setIsChangeCertificateModal(true);
+    };
+
     return (
         <Wrapper>
             <SelectedActions>
@@ -50,6 +59,12 @@ const TableBottom: React.FC = () => {
                             이메일 보내기
                         </Button>
                     )}
+                    <Button
+                        style={{ color: '#4D5359' }}
+                        onClick={handleChangeOrdinal}
+                    >
+                        수료증 등급 변환
+                    </Button>
                 </div>
             </SelectedActions>
             {isEmailModalOpen && (
@@ -58,6 +73,12 @@ const TableBottom: React.FC = () => {
                     onCancel={closeEmailModal}
                 />
             )}
+            {isChangeCertificateModal && (
+                <AdminCertificateModal
+                    onClose={() => setIsChangeCertificateModal(false)}
+                    selectedUserIds={selectedUserIds}
+                />
+            )}
         </Wrapper>
     );
 };
@@ -72,8 +93,12 @@ const SelectedActions = styled.div`
     display: flex;
     margin-top: 20px;
     align-items: center;
-    @media screen and (max-width: 767px) {
-        justify-content: space-between;
+    @media screen and (max-width: 650px) {
+        flex-direction: column;
+        align-items: start;
+        & > div {
+            margin-bottom: 5px;
+        }
     }
     div {
         font-weight: bold;
@@ -96,9 +121,3 @@ const Button = styled.button`
         background-color: #d45a07;
     }
 `;
-
-const PageWrapper = styled.div`
-    margin: 64px 0 100px 0;
-    display: flex;
-    justify-content: center;
-`;

src/pages/mypage/components/Certificate.tsx

@@ -0,0 +1,47 @@
+import { styled } from 'styled-components';
+import { PostBoxWrapper } from './UserPostSelect';
+import { Button } from './Common';
+import { useState } from 'react';
+import CertificateModal from '../modal/CertificateModal';
+
+const Certificate = () => {
+    const [isModal, setIsModal] = useState<boolean>(false);
+
+    return (
+        <>
+            <PostBoxWrapper>
+                <Container>
+                    <Left>멋쟁이사자처럼대학</Left>
+                    <Button onClick={() => setIsModal(true)}>
+                        수료증 발급
+                    </Button>
+                </Container>
+            </PostBoxWrapper>
+            {isModal && <CertificateModal onClose={() => setIsModal(false)} />}
+        </>
+    );
+};
+
+const Container = styled.div`
+    width: 100%;
+    padding: 0 40px 49px 40px;
+    border-bottom: 1px solid rgba(234, 236, 238, 1);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    @media screen and (max-width: 1200px) {
+        padding: 0 24px 49px 24px;
+    }
+    @media screen and (max-width: 720px) {
+        padding: 0 14px 25px 14px;
+    }
+`;
+const Left = styled.div`
+    font-weight: 700;
+    font-size: 24px;
+    @media screen and (max-width: 720px) {
+        font-size: 20px;
+    }
+`;
+
+export default Certificate;