From ce1623a62c6fc98c900bbcc9f4ee555d55213004 Mon Sep 17 00:00:00 2001
From: yoonyesol <maniac970430@naver.com>
Date: Thu, 19 Sep 2024 03:34:43 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20#137=20=ED=8F=BC=20=EC=A0=84=EC=86=A1?=
 =?UTF-8?q?=20=EC=9D=B4=EC=A0=84=EC=97=90=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9D=B8=EC=A6=9D=20=EC=BD=94=EB=93=9C=20=ED=99=95=EC=9D=B8=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useEmailVerification.ts     |  4 ++--
 src/pages/user/SearchIdPage.tsx       | 12 +++++++++++-
 src/pages/user/SearchPasswordPage.tsx | 11 ++++++++++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useEmailVerification.ts b/src/hooks/useEmailVerification.ts
index d691a56b..39997d3e 100644
--- a/src/hooks/useEmailVerification.ts
+++ b/src/hooks/useEmailVerification.ts
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { UseFormSetError } from 'react-hook-form';
 import useToast from '@hooks/useToast';
-import type { EmailVerificationForm, UserSignUpForm } from '@/types/UserType';
+import type { UserSignUpForm } from '@/types/UserType';
 
 export default function useEmailVerification() {
   const [isVerificationRequested, setIsVerificationRequested] = useState(false);
@@ -16,7 +16,7 @@ export default function useEmailVerification() {
   };
 
   // 인증번호 확인 함수
-  const verifyCode = (verificationCode: string, setError: UseFormSetError<UserSignUpForm | EmailVerificationForm>) => {
+  const verifyCode = (verificationCode: string, setError: UseFormSetError<UserSignUpForm>) => {
     // ToDo: 이메일 인증 API 추가
     if (verificationCode === '1234') return true;
 
diff --git a/src/pages/user/SearchIdPage.tsx b/src/pages/user/SearchIdPage.tsx
index ca98b6f7..b7c2bd98 100644
--- a/src/pages/user/SearchIdPage.tsx
+++ b/src/pages/user/SearchIdPage.tsx
@@ -15,14 +15,17 @@ import { generateSecureUserId } from '@utils/converter';
 import { EmailVerificationForm } from '@/types/UserType';
 
 export default function SearchIdPage() {
-  const { isVerificationRequested, requestVerificationCode, expireVerificationCode } = useEmailVerification();
+  const { isVerificationRequested, requestVerificationCode, verifyCode, expireVerificationCode } =
+    useEmailVerification();
   const [searchIdResult, setSearchIdResult] = useState<null | string>(null);
   const [loading, setLoading] = useState(false);
   const { toastError } = useToast();
   const nav = useNavigate();
   const {
+    watch,
     register,
     handleSubmit,
+    setError,
     formState: { errors, isSubmitting },
   } = useForm<EmailVerificationForm>({
     mode: 'onChange',
@@ -35,6 +38,13 @@ export default function SearchIdPage() {
   // ToDo: useAxios 훅을 이용한 네트워크 로직으로 변경
   const onSubmit = async (data: EmailVerificationForm) => {
     setLoading(true);
+
+    const verifyResult = verifyCode(watch('code'), setError);
+    if (!verifyResult) {
+      setLoading(false);
+      return;
+    }
+
     try {
       const fetchData = await searchUserId(data);
       setSearchIdResult(fetchData.data.username);
diff --git a/src/pages/user/SearchPasswordPage.tsx b/src/pages/user/SearchPasswordPage.tsx
index 46477f03..9ffa95e9 100644
--- a/src/pages/user/SearchPasswordPage.tsx
+++ b/src/pages/user/SearchPasswordPage.tsx
@@ -14,14 +14,17 @@ import useToast from '@hooks/useToast';
 import type { SearchPasswordForm } from '@/types/UserType';
 
 export default function SearchPasswordPage() {
-  const { isVerificationRequested, requestVerificationCode, expireVerificationCode } = useEmailVerification();
+  const { isVerificationRequested, requestVerificationCode, verifyCode, expireVerificationCode } =
+    useEmailVerification();
   const [tempPassword, setTempPassword] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const { toastError } = useToast();
   const nav = useNavigate();
   const {
+    watch,
     register,
     handleSubmit,
+    setError,
     formState: { errors, isSubmitting },
   } = useForm<SearchPasswordForm>({
     mode: 'onChange',
@@ -34,6 +37,12 @@ export default function SearchPasswordPage() {
 
   // ToDo: useAxios 훅을 이용한 네트워크 로직으로 변경
   const onSubmit = async (data: SearchPasswordForm) => {
+    const verifyResult = verifyCode(watch('code'), setError);
+    if (!verifyResult) {
+      setLoading(false);
+      return;
+    }
+
     setLoading(true);
     try {
       const fetchData = await searchUserPassword(data);