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) => { + const verifyCode = (verificationCode: string, setError: UseFormSetError) => { // 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); const [loading, setLoading] = useState(false); const { toastError } = useToast(); const nav = useNavigate(); const { + watch, register, handleSubmit, + setError, formState: { errors, isSubmitting }, } = useForm({ 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(null); const [loading, setLoading] = useState(false); const { toastError } = useToast(); const nav = useNavigate(); const { + watch, register, handleSubmit, + setError, formState: { errors, isSubmitting }, } = useForm({ 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);