API 재활용1

src/app/menu/ChangePasswordModal.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import ModalCloseSvg from "../svgs/closexsvg";
+import apiService from "../lib/apiService";
 
 type Props = {
   open: boolean;
@@ -22,6 +23,8 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
   const [isCodeSent, setIsCodeSent] = useState<boolean>(showVerification);
   const canConfirm = code.trim().length > 0;
   const [isVerified, setIsVerified] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);
   const hasError = !!error;
 
   // initialEmail이 변경되면 email state 업데이트
@@ -127,14 +130,32 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
               />
               <button
                 type="button"
-                onClick={() => {
-                  setRequireCode(true);
-                  setIsCodeSent(true);
+                onClick={async () => {
+                  if (!email.trim()) {
+                    setError("이메일을 입력해 주세요.");
+                    return;
+                  }
+                  
+                  setIsSending(true);
                   setError(null);
+                  
+                  try {
+                    await apiService.sendPasswordReset(email);
+                    setRequireCode(true);
+                    setIsCodeSent(true);
+                  } catch (err) {
+                    setError(err instanceof Error ? err.message : "인증번호 전송에 실패했습니다.");
+                  } finally {
+                    setIsSending(false);
+                  }
                 }}
-                className="h-10 w-[136px] rounded-[8px] bg-bg-gray-light px-3 text-[16px] font-semibold leading-[1.5] text-neutral-700 cursor-pointer"
+                disabled={isSending}
+                className={[
+                  "h-10 w-[136px] rounded-[8px] bg-bg-gray-light px-3 text-[16px] font-semibold leading-[1.5] text-neutral-700",
+                  isSending ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+                ].join(" ")}
               >
-                {isCodeSent ? "인증번호 재전송" : "인증번호 전송"}
+                {isSending ? "전송 중..." : (isCodeSent ? "인증번호 재전송" : "인증번호 전송")}
               </button>
             </div>
           </div>
@@ -151,13 +172,37 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
                 />
                 <button
                   type="button"
-                  disabled={!canConfirm}
+                  disabled={!canConfirm || isVerifying}
+                  onClick={async () => {
+                    if (!email.trim()) {
+                      setError("이메일을 입력해 주세요.");
+                      return;
+                    }
+                    if (!code.trim()) {
+                      setError("인증번호를 입력해 주세요.");
+                      return;
+                    }
+                    
+                    setIsVerifying(true);
+                    setError(null);
+                    
+                    try {
+                      await apiService.verifyPasswordResetCode(email, code);
+                      setIsVerified(true);
+                      setError(null);
+                    } catch (err) {
+                      setError(err instanceof Error ? err.message : "올바르지 않은 인증번호입니다. 인증번호를 확인해주세요.");
+                      setIsVerified(false);
+                    } finally {
+                      setIsVerifying(false);
+                    }
+                  }}
                   className={[
-                    "h-10 w-[136px] rounded-[8px] px-3 text-[16px] font-semibold leading-[1.5] cursor-pointer disabled:cursor-default",
-                    canConfirm ? "bg-bg-gray-light text-basic-text" : "bg-gray-50 text-text-placeholder-alt",
+                    "h-10 w-[136px] rounded-[8px] px-3 text-[16px] font-semibold leading-[1.5]",
+                    canConfirm && !isVerifying ? "bg-bg-gray-light text-basic-text cursor-pointer" : "bg-gray-50 text-text-placeholder-alt cursor-default",
                   ].join(" ")}
                 >
-                  인증번호 확인
+                  {isVerifying ? "확인 중..." : "인증번호 확인"}
                 </button>
               </div>
               {isCodeSent && !hasError && !isVerified ? (