[FE] feat: 회원 탈퇴 기능 구현

frontend/src/apis/member.ts

@@ -3,3 +3,6 @@ import { http } from './fetch';
 
 // 멤버페이지 정보 조회: GET
 export const getMemberInfo = () => http.get(memberURL);
+
+// 멤버 탈퇴: POST
+export const deleteMemberAccount = () => http.post(`${memberURL}/delete`);

frontend/src/components/Modal/DeleteAccountModal.tsx/DeleteAccountModal.tsx

@@ -0,0 +1,86 @@
+import Modal from 'components/@common/Modal/Modal';
+import { useMemberDelete } from 'hooks/queries/member/useMemberDelete';
+import { styled } from 'styled-components';
+
+type Props = {
+  isOpen: boolean;
+  closeModal: () => void;
+};
+
+const DeleteAccountModal = ({ isOpen, closeModal }: Props) => {
+  const deleteMember = useMemberDelete();
+
+  const deleteAccount = () => {
+    deleteMember.mutate();
+  };
+
+  return (
+    <Modal isOpen={isOpen} closeModal={closeModal}>
+      <S.Container>
+        <S.Title>회원 탈퇴</S.Title>
+        <S.Content>
+          <p>탈퇴 시, 회원 정보가 모두 삭제되고 재가입 시 복원되지 않습니다.</p>
+          <p>정말 탈퇴하시겠습니까?</p>
+        </S.Content>
+        <S.ButtonContainer>
+          <S.DeleteAccountButton onClick={deleteAccount}>탈퇴</S.DeleteAccountButton>
+          <S.CancelButton onClick={closeModal}>취소</S.CancelButton>
+        </S.ButtonContainer>
+      </S.Container>
+    </Modal>
+  );
+};
+
+export default DeleteAccountModal;
+
+const S = {
+  Container: styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3rem;
+    width: 50vw;
+    max-width: 40rem;
+  `,
+  Title: styled.h1`
+    font-size: 2rem;
+    font-weight: 700;
+  `,
+  Content: styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    height: 100%;
+    margin: 2rem 0;
+    font-size: 1.3rem;
+  `,
+  ButtonContainer: styled.div`
+    display: flex;
+    gap: 1rem;
+    button {
+      padding: 1rem 6rem;
+      border-radius: 8px;
+    }
+  `,
+  DeleteAccountButton: styled.button`
+    border: 2px solid ${({ theme }) => theme.color.red5};
+    background-color: ${({ theme }) => theme.color.red5};
+    color: ${({ theme }) => theme.color.gray1};
+
+    &:hover {
+      border: 2px solid ${({ theme }) => theme.color.red6};
+      background-color: ${({ theme }) => theme.color.red6};
+    }
+  `,
+  CancelButton: styled.button`
+    border: 2px solid ${({ theme }) => theme.color.gray4};
+    background-color: ${({ theme }) => theme.color.gray4};
+
+    &:hover {
+      border: 2px solid ${({ theme }) => theme.color.gray5};
+      background-color: ${({ theme }) => theme.color.gray5};
+    }
+  `,
+};

frontend/src/components/Profile/Profile.tsx

@@ -1,16 +1,24 @@
 import { DefaultUserProfileIcon } from 'assets/icons';
+import DeleteAccountModal from 'components/Modal/DeleteAccountModal.tsx/DeleteAccountModal';
+import { useModal } from 'hooks/@common/useModal';
 import { styled } from 'styled-components';
 
 type Props = {
   name: string;
 };
 
 const Profile = ({ name }: Props) => {
+  const { isOpen, openModal, closeModal } = useModal();
+
   return (
-    <S.Profile>
-      <DefaultUserProfileIcon />
-      {name}
-    </S.Profile>
+    <>
+      <S.Profile>
+        <DefaultUserProfileIcon />
+        {name}
+        <S.DeleteAccountButton onClick={openModal}>탈퇴하기</S.DeleteAccountButton>
+      </S.Profile>
+      <DeleteAccountModal isOpen={isOpen} closeModal={closeModal} />
+    </>
   );
 };
 
@@ -30,4 +38,14 @@ const S = {
     font-size: 2rem;
     font-weight: bold;
   `,
+  DeleteAccountButton: styled.button`
+    padding: 0.1rem 0;
+    color: ${({ theme }) => theme.color.gray7};
+    border-bottom: 1px solid ${({ theme }) => theme.color.gray6};
+
+    &:hover {
+      color: ${({ theme }) => theme.color.gray8};
+      border-bottom: 1px solid ${({ theme }) => theme.color.gray7};
+    }
+  `,
 };

frontend/src/hooks/queries/member/useMemberDelete.ts

@@ -0,0 +1,21 @@
+import { useMutation } from '@tanstack/react-query';
+import { deleteMemberAccount } from 'apis/member';
+import { useToast } from 'hooks/@common/useToast';
+import { usePageNavigate } from 'hooks/usePageNavigate';
+import { getErrorMessage } from 'utils/error';
+
+export const useMemberDelete = () => {
+  const toast = useToast();
+  const { goIntroducePage } = usePageNavigate();
+
+  return useMutation(deleteMemberAccount, {
+    onSuccess: () => {
+      localStorage.removeItem('accessToken');
+      goIntroducePage();
+      toast.show({ type: 'success', message: '탈퇴가 완료되었습니다.' });
+    },
+    onError: (error) => {
+      toast.show({ type: 'error', message: getErrorMessage(error) });
+    },
+  });
+};

frontend/src/mocks/handlers/member.ts

@@ -6,4 +6,9 @@ export const memberHandlers = [
   rest.get(memberURL, (_, res, ctx) => {
     return res(ctx.json(member), ctx.status(200));
   }),
+
+  // 회원 탈퇴: POST
+  rest.post(`${memberURL}/delete`, (_, res, ctx) => {
+    return res(ctx.status(200));
+  }),
 ];