회원가입 api

src/app/menu/AccountDeleteModal.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useState } from "react";
+import { useRouter } from "next/navigation";
 import ModalCloseSvg from "../svgs/closexsvg";
 
 type Props = {
@@ -9,6 +11,78 @@ type Props = {
 };
 
 export default function AccountDeleteModal({ open, onClose, onConfirm }: Props) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleConfirm = async () => {
+    if (onConfirm) {
+      onConfirm();
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) {
+        alert('로그인이 필요합니다.');
+        setIsLoading(false);
+        onClose();
+        router.push('/login');
+        return;
+      }
+
+      console.log('회원 탈퇴 요청 시작, 토큰 존재:', !!token);
+      console.log('토큰 길이:', token?.length);
+      console.log('토큰 시작 부분:', token?.substring(0, 20));
+      
+      const response = await fetch('https://hrdi.coconutmeet.net/auth/delete/me', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      
+      console.log('회원 탈퇴 응답 상태:', response.status);
+
+      if (!response.ok) {
+        let errorMessage = `회원 탈퇴 실패 (${response.status})`;
+        try {
+          const errorData = await response.json();
+          console.error('회원 탈퇴 API 오류 응답:', errorData);
+          if (errorData.error) {
+            errorMessage = errorData.error;
+          } else if (errorData.message) {
+            errorMessage = errorData.message;
+          } else if (errorData.errorMessage) {
+            errorMessage = errorData.errorMessage;
+          } else if (response.statusText) {
+            errorMessage = `${response.statusText} (${response.status})`;
+          }
+        } catch (parseError) {
+          console.error('응답 파싱 오류:', parseError);
+          if (response.statusText) {
+            errorMessage = `${response.statusText} (${response.status})`;
+          }
+        }
+        console.error('회원 탈퇴 실패:', errorMessage, '상태 코드:', response.status);
+        alert(errorMessage);
+        setIsLoading(false);
+        return;
+      }
+
+      // 성공 시 토큰 제거 및 로그인 페이지로 이동
+      localStorage.removeItem('token');
+      onClose();
+      router.push('/login');
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.';
+      console.error('회원 탈퇴 오류:', errorMessage);
+      alert(errorMessage);
+      setIsLoading(false);
+    }
+  };
+
   if (!open) return null;
 
   return (
@@ -20,7 +94,7 @@ export default function AccountDeleteModal({ open, onClose, onConfirm }: Props)
       <div className="w-[528px] rounded-[12px] border border-[#dee1e6] bg-white shadow-[0_10px_30px_rgba(0,0,0,0.06)]">
         {/* header */}
         <div className="flex items-center justify-between p-6">
-          <h2 className="text-[20px] font-bold leading-[1.5] text-[#333c47]">회원 탈퇴</h2>
+          <h2 className="text-[20px] font-bold leading-normal text-[#333c47]">회원 탈퇴</h2>
           <button
             type="button"
             aria-label="닫기"
@@ -34,10 +108,10 @@ export default function AccountDeleteModal({ open, onClose, onConfirm }: Props)
         {/* body */}
         <div className="px-6">
           <div className="rounded-[16px] border border-[#dee1e6] bg-gray-50 p-6">
-            <p className="mb-3 text-[15px] font-bold leading-[1.5] text-[#4c5561]">
+            <p className="mb-3 text-[15px] font-bold leading-normal text-basic-text">
               회원 탈퇴 시 유의사항을 확인해주세요.
             </p>
-            <div className="text-[15px] leading-[1.5] text-[#4c5561]">
+            <div className="text-[15px] leading-normal text-basic-text">
               <p className="mb-0">- 탈퇴 후에도 재가입은 가능합니다.</p>
               <p className="mb-0">- 수강 및 학습 이력이 모두 삭제되며, 복구가 불가능합니다.</p>
               <p>- 수강 서비스 이용 권한이 즉시 종료됩니다.</p>
@@ -50,16 +124,17 @@ export default function AccountDeleteModal({ open, onClose, onConfirm }: Props)
           <button
             type="button"
             onClick={onClose}
-            className="h-12 w-[136px] rounded-[10px] bg-[#f1f3f5] px-4 text-[16px] font-semibold leading-[1.5] text-[#4c5561] cursor-pointer"
+            className="h-12 w-[136px] rounded-[10px] bg-[#f1f3f5] px-4 text-[16px] font-semibold leading-normal text-basic-text cursor-pointer"
           >
             취소
           </button>
           <button
             type="button"
-            onClick={onConfirm}
-            className="h-12 w-[136px] rounded-[10px] bg-red-50 px-4 text-[16px] font-semibold leading-[1.5] text-[#f64c4c] cursor-pointer"
+            onClick={handleConfirm}
+            disabled={isLoading}
+            className="h-12 w-[136px] rounded-[10px] bg-red-50 px-4 text-[16px] font-semibold leading-normal text-error cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
           >
-            회원 탈퇴
+            {isLoading ? '처리 중...' : '회원 탈퇴'}
           </button>
         </div>
       </div>