Feat: #137 폼 전송 이전에 이메일 인증 코드 확인 로직 추가

GU-99 · Sep 18, 2024 · ce1623a · ce1623a
1 parent c0e2eb6
commit ce1623a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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);