Merge pull request #234 from DevKor-github/feat/#233/delete-user

[#233] 회원 탈퇴 구현 구현

Author: halionaz

src/features/my/apis/useDeleteUser.ts

@@ -0,0 +1,20 @@
+import client from '@/common/utils/client';
+import { QUERY_KEYS } from '@/libs/queryKeys';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+const deleteUser = async () => {
+  const response = await client.delete('/api/v1/user');
+  return response.data;
+};
+
+export const useDeleteUser = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteUser,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.USER] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.IS_LOGIN] });
+    },
+  });
+};

src/features/my/components/MyTrade/DeleteAccountButton.tsx

@@ -0,0 +1,44 @@
+import CustomAlert from '@/common/components/CustomAlert';
+import { useToast } from '@/common/hooks/useToast';
+import { useDeleteUser } from '@/features/my/apis/useDeleteUser';
+import { cx } from '@styled-system/css';
+
+import * as s from './style.css';
+import { useState } from 'react';
+
+const DeleteAccountButton = () => {
+  const { openToast } = useToast();
+  const { mutate: deleteUser } = useDeleteUser();
+  const [showDeleteAlert, setShowDeleteAlert] = useState(false);
+
+  const handleDelete = () => {
+    deleteUser(undefined, {
+      onSuccess: () => {
+        openToast({ message: '회원탈퇴 완료!' });
+      },
+    });
+    setShowDeleteAlert(false);
+  };
+
+  return (
+    <>
+      <button className={s.GoMenu} onClick={() => setShowDeleteAlert(true)}>
+        <div className={s.MenuContent}>
+          <span className={cx(`mgc_user_x_fill`)} />
+          회원 탈퇴
+        </div>
+        <div className={cx('mgc_right_line', s.Icon)} />
+      </button>
+      {showDeleteAlert && (
+        <CustomAlert
+          title="회원 탈퇴 후 복구가 불가능해요!"
+          subTitle="정말 탈퇴하실 건가요?"
+          yesBtn="네, 탈퇴할게요"
+          onNo={() => setShowDeleteAlert(false)}
+          onYes={handleDelete}
+        />
+      )}
+    </>
+  );
+};
+export default DeleteAccountButton;

src/features/my/components/MyTrade/index.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router';
 import { usePostLogout } from '../../apis/usePostLogout';
 import { useToast } from '@/common/hooks/useToast';
 import { REPICKA_INSTAGRAM } from '@/libs/constants';
+import DeleteAccountButton from '@/features/my/components/MyTrade/DeleteAccountButton';
 
 interface MenuProps {
   Title: string;
@@ -28,35 +29,35 @@ const Menu = ({ Title, Icon, Addr }: MenuProps) => {
     );
   }
 
-  if (Title !== '로그아웃') {
+  if (Title === '로그아웃') {
     return (
-      <Link className={s.GoMenu} to={Addr}>
+      <button
+        className={s.GoMenu}
+        onClick={() => {
+          postLogout(undefined, {
+            onSuccess: () => {
+              openToast({ message: '로그아웃 완료!' });
+            },
+          });
+        }}
+      >
         <div className={s.MenuContent}>
           <span className={cx(`${Icon}`)} />
           {Title}
         </div>
         <div className={cx('mgc_right_line', s.Icon)} />
-      </Link>
+      </button>
     );
   }
 
   return (
-    <button
-      className={s.GoMenu}
-      onClick={() => {
-        postLogout(undefined, {
-          onSuccess: () => {
-            openToast({ message: '로그아웃 완료!' });
-          },
-        });
-      }}
-    >
+    <Link className={s.GoMenu} to={Addr}>
       <div className={s.MenuContent}>
         <span className={cx(`${Icon}`)} />
         {Title}
       </div>
       <div className={cx('mgc_right_line', s.Icon)} />
-    </button>
+    </Link>
   );
 };
 
@@ -69,6 +70,7 @@ const MyTrade = () => {
         <Menu Icon="mgc_shopping_bag_1_fill" Title="나의 판매 내역" Addr="/my-trade" />
         <Menu Icon="mgc_instagram_line" Title="문의하기" Addr="/my-trade" />
         <Menu Icon="mgc_exit_fill" Title="로그아웃" Addr="/my-trade" />
+        <DeleteAccountButton />
       </div>
     </div>
   );

src/pages/LoginPage/index.tsx

@@ -12,7 +12,7 @@ import AppleLogo from '@/libs/assets/AppleLogo';
 const LoginPage = () => {
   const navigate = useNavigate();
   const { data: isLogin, isLoading } = useGetIsLogin();
-  const redirectionUrl = encodeURIComponent(window.location.origin + '/');
+  const redirectUrl = import.meta.env.VITE_REDIRECT_URL || undefined;
 
   useEffect(() => {
     if (isLogin) {
@@ -32,21 +32,21 @@ const LoginPage = () => {
         <div className={s.ButtonContainer}>
           <a
             className={s.LoginButton({ src: 'apple' })}
-            href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/apple?redirectURI=${redirectionUrl}`}
+            href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/apple${redirectUrl ? `?redirectURI=${redirectUrl}` : ''}`}
           >
             <AppleLogo />
             Apple로 로그인
           </a>
           <a
             className={s.LoginButton({ src: 'google' })}
-            href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/google?redirectURI=${redirectionUrl}`}
+            href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/google${redirectUrl ? `?redirectURI=${redirectUrl}` : ''}`}
           >
             <GoogleLogo />
             Google로 로그인
           </a>
           <a
             className={s.LoginButton({ src: 'kakao' })}
-            href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/kakao?redirectURI=${redirectionUrl}`}
+            href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/kakao${redirectUrl ? `?redirectURI=${redirectUrl}` : ''}`}
           >
             <KakaoLogo />
             카카오톡으로 로그인