Merge pull request #180 from prgrms-web-devcourse-final-project/feat/175-delete-member

kangsuyeong · web-flow · commit e4f08f11d950 · 2025-03-06T10:44:57.000+09:00
[feat] 회원탈퇴 구현
diff --git a/src/apis/user.ts b/src/apis/user.ts
@@ -72,3 +72,15 @@ export const patchEditProfile = async (editInfo: Partial<UserProfileEdit>) => {
   const { data } = await axiosInstance.patch(`/user`, editInfo);
   return data;
 };
+
+// 회원 정보 조회
+export const getUserInfo = async () => {
+  const { data } = await axiosInstance.get('/user');
+  return data;
+};
+
+// 회원 탈퇴
+export const deleteAccount = async () => {
+  const { data } = await axiosInstance.delete('/user');
+  return data;
+};
diff --git a/src/components/KaKaoRedirection.tsx b/src/components/KaKaoRedirection.tsx
@@ -11,6 +11,7 @@ function KaKaoRedirection() {
 
   const handleKaKaoLogin = async () => {
     try {
+      console.log('kakaoCode', kakaoCode);
       const { code, data } = await getKakaoLogin(kakaoCode as string);
       if (code === 200) {
         setAccessToken(data.accessToken);
@@ -24,7 +25,7 @@ function KaKaoRedirection() {
   };
 
   useEffect(() => {
-    handleKaKaoLogin();
+    if (kakaoCode) handleKaKaoLogin();
   }, []);
   return <Loading />;
 }
diff --git a/src/hooks/useMoreOptions.ts b/src/hooks/useMoreOptions.ts
@@ -1,20 +1,28 @@
 import { postLogout } from '@/apis/auth';
+import { addBlockList } from '@/apis/blockList';
+import { deleteAccount, getUserInfo } from '@/apis/user';
 import { useAuthStore } from '@/store/authStore';
-import { useLocation, useNavigate } from 'react-router';
+import { useModalStore } from '@/store/modalStore';
+import { useUserStore } from '@/store/userStore';
+import { useLocation, useNavigate, useParams } from 'react-router';
 
 // url에 따라서 헤더의 moreOptions 선택
 export const useMoreOptions = () => {
   const navigate = useNavigate();
   const location = useLocation();
+  const param = useParams();
+
   const { logout } = useAuthStore();
+  const { openModal, closeModal } = useModalStore();
+  const { userData } = useUserStore(); // 차단할 유저 정보
 
   const handleEditProfile = () => navigate('/mypage/edit');
   const handleBlockList = () => navigate('/mypage/blocklist');
   const handleLogout = async () => {
     try {
       const { code } = await postLogout();
       if (code === 200) {
-        logout();
+        logout(); // 토큰 초기화
         useAuthStore.persist.clearStorage(); // 로컬스토리지에서 persist 데이터 삭제
         navigate('/');
       }
@@ -23,18 +31,86 @@ export const useMoreOptions = () => {
     }
   };
 
+  const handleBlockUser = async () => {
+    if (!param.userId) {
+      console.log('차단 실패');
+      return;
+    }
+
+    openModal({
+      title: `${userData?.nickname}을 차단할까요?`,
+      message: '차단된 사용자는 더이상 피드에 나타나지 않습니다',
+      onConfirm: async () => {
+        if (param.userId) {
+          try {
+            const data = await addBlockList(param.userId);
+            closeModal();
+            console.log(data);
+          } catch (error) {
+            console.log(error);
+          }
+        }
+      },
+      onCancel: () => {
+        closeModal();
+      },
+    });
+  };
+
+  const handleDeleteAccount = async () => {
+    try {
+      const { code, data } = await getUserInfo();
+      if (code === 200) {
+        openModal({
+          title: [
+            { text: data.nickName, className: 'text-primary-normal' },
+            { text: '님 떠나시는 건가요?' },
+          ],
+          message: '탈퇴 버튼 선택 시, 모든 활동 정보가 삭제됩니다',
+          confirmText: '탈퇴',
+          onConfirm: async () => {
+            try {
+              const { code } = await deleteAccount();
+              if (code === 200) {
+                logout();
+                useAuthStore.persist.clearStorage(); // 로컬스토리지에서 persist 데이터 삭제
+                closeModal();
+                navigate('/');
+              }
+            } catch (error) {
+              console.log(error);
+            }
+          },
+          onCancel: () => {
+            closeModal();
+          },
+        });
+      } else {
+        throw new Error('정보를 불러오는 중 오류가 생겼습니다.');
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   // url에 따라서 다른 items값 return
   const getMoreOptionsItems = () => {
-    switch (location.pathname) {
-      case '/mypage':
-        return [
-          { label: '프로필 수정', onClick: handleEditProfile },
-          { label: '차단 목록', onClick: handleBlockList },
-          { label: '로그아웃', onClick: handleLogout },
-        ];
-      default:
-        return [{ label: '로그아웃', onClick: handleLogout }];
+    if (location.pathname.startsWith('/user/')) {
+      return [{ label: '차단', onClick: handleBlockUser }];
     }
+
+    if (location.pathname === '/mypage/edit') {
+      return [{ label: '탈퇴하기', onClick: handleDeleteAccount }];
+    }
+    if (location.pathname === '/mypage') {
+      return [
+        { label: '프로필 수정', onClick: handleEditProfile },
+        { label: '차단 목록', onClick: handleBlockList },
+        { label: '로그아웃', onClick: handleLogout },
+      ];
+    }
+
+    return [{ label: '로그아웃', onClick: handleLogout }];
   };
 
   return getMoreOptionsItems();
diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
@@ -33,7 +33,7 @@ function Layout() {
     '/post': <HeaderWithBack text="글 등록" />,
     '/signup': <HeaderWithBack text="회원가입" />,
     '/mypage/blocklist': <HeaderWithBack text="차단 목록" />,
-    '/mypage/edit': <HeaderWithBack text="내 정보 수정" />,
+    '/mypage/edit': <HeaderWithBack text="내 정보 수정" showMoreOptions />,
   };
 
   const renderHeader = () => {
diff --git a/src/layouts/header/HeaderWithBack.tsx b/src/layouts/header/HeaderWithBack.tsx
@@ -1,10 +1,8 @@
-import { addBlockList } from '@/apis/blockList';
 import MoreOptionsSelect from '@/components/MoreOptionsSelect';
+import { useMoreOptions } from '@/hooks/useMoreOptions';
 import HedaerLayout from '@/layouts/header/HedaerLayout';
-import { useModalStore } from '@/store/modalStore';
-import { useUserStore } from '@/store/userStore';
 import backIcon from '@assets/icons/back-icon.svg';
-import { useNavigate, useParams } from 'react-router';
+import { useNavigate } from 'react-router';
 
 interface HeaderWithBackProps {
   showMoreOptions?: boolean; // 더보기 메뉴를 표시할지 여부
@@ -14,38 +12,7 @@ interface HeaderWithBackProps {
 // 뒤로 가기 있는 헤더
 function HeaderWithBack({ showMoreOptions = false, text }: HeaderWithBackProps) {
   const navigate = useNavigate();
-  const param = useParams();
-
-  const { openModal, closeModal } = useModalStore();
-  const { userData } = useUserStore(); // 차단할 유저 정보
-
-  // 임시함수
-  const handleBlockUser = async () => {
-    if (!param.userId) {
-      console.log('차단 실패');
-      return;
-    }
-
-    openModal({
-      title: `${userData?.nickname}을 차단할까요?`,
-      message: '차단된 사용자는 더이상 피드에 나타나지 않습니다',
-      onConfirm: async () => {
-        if (param.userId) {
-          try {
-            const data = await addBlockList(param.userId);
-            closeModal();
-            console.log(data);
-          } catch (error) {
-            console.log(error);
-          }
-        }
-      },
-      onCancel: () => {
-        closeModal();
-      },
-    });
-  };
-
+  const moreOptionsItems = useMoreOptions();
   return (
     <HedaerLayout>
       <div className="flex items-center justify-between w-full">
@@ -64,9 +31,7 @@ function HeaderWithBack({ showMoreOptions = false, text }: HeaderWithBackProps)
         </div>
 
         {/* 더보기 메뉴 */}
-        {showMoreOptions && (
-          <MoreOptionsSelect items={[{ label: '차단', onClick: handleBlockUser }]} />
-        )}
+        {showMoreOptions && <MoreOptionsSelect items={moreOptionsItems} />}
       </div>
     </HedaerLayout>
   );
