Merge pull request #135 from Team-Waggle/feat/responsive-web

refactor: 회원 탈퇴 기능 추가

Author: Min9ithub

src/api/user.ts

@@ -31,9 +31,16 @@ export async function updateUserMe(
   return data;
 }
 
-export async function deleteUserMe(): Promise<UserMeResponse> {
-  const { data } = await axiosInstance.delete<UserMeResponse>(USER_ME_URL);
-  return data;
+type BasicSuccessResponse = { success: boolean };
+
+export async function deleteUserMe(): Promise<BasicSuccessResponse | UserMeResponse> {
+  const res = await axiosInstance.delete(USER_ME_URL);
+
+  if (res.status === 204) {
+    return { success: true };
+  }
+
+  return res.data as UserMeResponse;
 }
 
 export async function uploadUserProfileImage(

src/components/Modal/CancelModal.tsx

@@ -11,6 +11,7 @@ import InputCheckbox from '../common/Checkbox/InputCheckbox';
 const CancelModal = ({
   // size = 'large', // 기본 크기는 large로 설정
   isOpen,
+  handleDone,
   onClose,
   // CharacterComponent, // SVG 컴포넌트로 캐릭터 이미지 받기
 }: BaseModalProps) => {
@@ -62,7 +63,13 @@ const CancelModal = ({
               <BaseButton onClick={onClose} size="xl" color="line">
                 취소
               </BaseButton>
-              <BaseButton size="xl" color="primary">
+              <BaseButton
+                size="xl"
+                color="primary"
+                onClick={() => {
+                  handleDone?.();
+                }}
+              >
                 확인
               </BaseButton>
             </div>

src/hooks/useUser.ts

@@ -41,29 +41,27 @@ export function useUser() {
     [setUser],
   );
 
-  // 서버 오류, 500 에러 발생
-  // 백엔드에 이야기 해두고 주석 해제 하도록 하겠습니다.
-  // const deleteUser = useCallback(async () => {
-  //   try {
-  //     const res = await deleteUserMe();
-  //     if (res.success) {
-  //       clearUser();
-  //       clearAccessToken();
-  //       clearRefreshToken();
-  //       return true;
-  //     } else {
-  //       clearUser();
-  //       clearAccessToken();
-  //       clearRefreshToken();
-  //       throw new Error('탈퇴 처리 실패 (서버 응답)');
-  //     }
-  //   } catch (err) {
-  //     clearUser();
-  //     clearAccessToken();
-  //     clearRefreshToken();
-  //     throw err;
-  //   }
-  // }, [clearUser, clearAccessToken, clearRefreshToken]);
+  const deleteUser = useCallback(async () => {
+    try {
+      const res = await deleteUserMe();
+      if (res.success) {
+        clearUser();
+        clearAccessToken();
+        clearRefreshToken();
+        return true;
+      } else {
+        clearUser();
+        clearAccessToken();
+        clearRefreshToken();
+        throw new Error('탈퇴 처리 실패 (서버 응답)');
+      }
+    } catch (err) {
+      clearUser();
+      clearAccessToken();
+      clearRefreshToken();
+      throw err;
+    }
+  }, [clearUser, clearAccessToken, clearRefreshToken]);
 
   const uploadProfileImage = useCallback(
     async (file: File) => {
@@ -82,6 +80,7 @@ export function useUser() {
     user,
     fetchUser,
     updateUser,
+    deleteUser,
     uploadProfileImage,
   };
 }

src/pages/ProfileForm.tsx

@@ -30,9 +30,7 @@ interface LinkRow {
 }
 
 const ProfileForm = () => {
-  // delete User 오류 해결 후 주석 해제
-  // const { user, fetchUser, updateUser, deleteUser } = useUser();
-  const { user, fetchUser, updateUser, uploadProfileImage } = useUser();
+  const { user, fetchUser, updateUser, deleteUser, uploadProfileImage } = useUser();
   const [loading, setLoading] = useState(true);
 
   const { id } = useParams();
@@ -193,19 +191,19 @@ const ProfileForm = () => {
     }
   };
 
-    // const handleDelete = async () => {
-  //   if (!confirm('정말 탈퇴하시겠습니까? 이 작업은 되돌릴 수 없습니다.'))
-  //     return;
-
-  //   try {
-  //     await deleteUser();
-  //     alert('계정이 탈퇴되었습니다.');
-  //     navigate('/'); // 홈 또는 로그인 화면으로 리다이렉트
-  //   } catch (err) {
-  //     console.error('탈퇴 중 오류:', err);
-  //     alert('탈퇴 중 오류가 발생했습니다. 다시 시도해주세요.');
-  //   }
-  // };
+    const handleDelete = async () => {
+    if (!confirm('정말 탈퇴하시겠습니까? 이 작업은 되돌릴 수 없습니다.'))
+      return;
+
+    try {
+      await deleteUser();
+      alert('계정이 탈퇴되었습니다.');
+      navigate('/');
+    } catch (err) {
+      console.error('탈퇴 중 오류:', err);
+      alert('탈퇴 중 오류가 발생했습니다. 다시 시도해주세요.');
+    }
+  };
 
   if (loading) return <div>로딩 중 ...</div>;
 
@@ -371,7 +369,7 @@ const ProfileForm = () => {
         onClose={() => setOpenDeleteConfirm(false)}
         handleDone={() => {
           setOpenDeleteConfirm(false);
-          // handleDelete();
+          handleDelete();
         }}
         title="정말 탈퇴하시겠어요?"
         content="탈퇴 시 데이터가 삭제될 수 있으며 되돌릴 수 없습니다."