feat: add account delete button

wanted-fork-fork · Dec 29, 2024 · b23b6e6 · b23b6e6
1 parent ef23bba
commit b23b6e6
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 10 deletions.
diff --git a/src/features/DeleteAccount/useDeleteAccount.ts 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
@@ -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;
 }
diff --git 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,17 +81,30 @@ export const MyPage = ({ userInfo }: { userInfo: UserInfoResponse }) => {
                 color={'neutral'}
                 variant={'ghost'}
                 widthType={'fill'}
-                suffixSlot={<ArrowRight />}
+                suffixSlot={<ArrowIcon />}
                 textAlign={'left'}
               >
                 이용정책
               </Button>
             </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>
     </>
   );