From b23b6e65dc688ebb0c1557aade275ad7e2c89416 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=A7=84?= <orobos654@gmail.com>
Date: Sun, 29 Dec 2024 18:32:53 +0100
Subject: [PATCH] feat: add account delete button

---
 .../DeleteAccount/useDeleteAccount.ts         | 10 +++++
 src/pages/mypage/MyPage.module.css            | 12 ++++--
 src/pages/mypage/MyPage.tsx                   | 42 +++++++++++++++----
 3 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 src/features/DeleteAccount/useDeleteAccount.ts

diff --git a/src/features/DeleteAccount/useDeleteAccount.ts b/src/features/DeleteAccount/useDeleteAccount.ts
new file mode 100644
index 0000000..f3f3649
--- /dev/null
+++ b/src/features/DeleteAccount/useDeleteAccount.ts
@@ -0,0 +1,10 @@
+import { useMutation } from '@tanstack/react-query';
+import { quit } from 'src/types';
+
+export const useDeleteAccount = () => {
+  const { mutateAsync } = useMutation({
+    mutationFn: quit,
+  });
+
+  return mutateAsync;
+};
diff --git a/src/pages/mypage/MyPage.module.css b/src/pages/mypage/MyPage.module.css
index 650796f..9ac45dd 100644
--- a/src/pages/mypage/MyPage.module.css
+++ b/src/pages/mypage/MyPage.module.css
@@ -46,11 +46,17 @@
     }
 }
 
-.Logout {
+.SmallButtonsWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    margin: 0 20px;
+}
+
+.SmallButton {
     font-weight: 600;
     font-size: 14px;
-    color: var(--color-neutral-700);
+    color: var(--color-neutral-700) !important;
 
-    margin-left: 20px;
     display: block;
 }
\ No newline at end of file
diff --git a/src/pages/mypage/MyPage.tsx b/src/pages/mypage/MyPage.tsx
index e2f9ab1..125b748 100644
--- a/src/pages/mypage/MyPage.tsx
+++ b/src/pages/mypage/MyPage.tsx
@@ -5,8 +5,23 @@ import styles from './MyPage.module.css';
 import { UserInfoResponse } from 'src/types';
 import { UserAvatar } from 'src/entities/user/ui/UserAvatar';
 import { INQUIRY_URL, NOTICE_URL, PRIVACY_POLICY_URL, TERM_URL } from 'src/shared/constants/url';
+import { useDeleteAccount } from 'src/features/DeleteAccount/useDeleteAccount';
+import { Theme } from 'src/shared/styles/constants';
+import { redirectToLoginPage } from 'src/shared/functions/redirectToLoginPage';
+
+const ArrowIcon = () => <ArrowRight color={Theme.color.neutral40} />;
 
 export const MyPage = ({ userInfo }: { userInfo: UserInfoResponse }) => {
+  const deleteAccount = useDeleteAccount();
+
+  const onClickDeleteAccount = async () => {
+    if (confirm('정말로 탈퇴하시겠어요?')) {
+      await deleteAccount({});
+      alert('탈퇴했습니다');
+      redirectToLoginPage();
+    }
+  };
+
   return (
     <>
       <div className={styles.Header}>
@@ -28,7 +43,7 @@ export const MyPage = ({ userInfo }: { userInfo: UserInfoResponse }) => {
                 color={'neutral'}
                 variant={'ghost'}
                 widthType={'fill'}
-                suffixSlot={<ArrowRight />}
+                suffixSlot={<ArrowIcon />}
                 textAlign={'left'}
               >
                 문의하기
@@ -39,7 +54,7 @@ export const MyPage = ({ userInfo }: { userInfo: UserInfoResponse }) => {
                 color={'neutral'}
                 variant={'ghost'}
                 widthType={'fill'}
-                suffixSlot={<ArrowRight />}
+                suffixSlot={<ArrowIcon />}
                 textAlign={'left'}
               >
                 공지사항
@@ -55,7 +70,7 @@ export const MyPage = ({ userInfo }: { userInfo: UserInfoResponse }) => {
                 color={'neutral'}
                 variant={'ghost'}
                 widthType={'fill'}
-                suffixSlot={<ArrowRight />}
+                suffixSlot={<ArrowIcon />}
                 textAlign={'left'}
               >
                 개인정보처리방침
@@ -66,7 +81,7 @@ export const MyPage = ({ userInfo }: { userInfo: UserInfoResponse }) => {
                 color={'neutral'}
                 variant={'ghost'}
                 widthType={'fill'}
-                suffixSlot={<ArrowRight />}
+                suffixSlot={<ArrowIcon />}
                 textAlign={'left'}
               >
                 이용정책
@@ -74,9 +89,22 @@ export const MyPage = ({ userInfo }: { userInfo: UserInfoResponse }) => {
             </Link>
           </div>
         </div>
-        <Link to={'/logout'} className={styles.Logout}>
-          로그아웃
-        </Link>
+        <div className={styles.SmallButtonsWrapper}>
+          <Link to={'/logout'} className={styles.SmallButton}>
+            로그아웃
+          </Link>
+          <Button
+            className={`${styles.SmallButton} ${styles.DeleteAccount}`}
+            size={'fit'}
+            color={'neutral'}
+            variant={'ghost'}
+            widthType={'fill'}
+            textAlign={'left'}
+            onClick={onClickDeleteAccount}
+          >
+            회원 탈퇴
+          </Button>
+        </div>
       </div>
     </>
   );