diff --git a/src/page/Auth/FindPassword/Verify/index.tsx b/src/page/Auth/FindPassword/Verify/index.tsx index 8240b0c9..c108d71f 100644 --- a/src/page/Auth/FindPassword/Verify/index.tsx +++ b/src/page/Auth/FindPassword/Verify/index.tsx @@ -1,8 +1,7 @@ import { isKoinError, sendClientError } from '@bcsdlab/koin'; import { sendVerifyCode, verifyCode } from 'api/auth'; -import { ChangeEvent, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { - UseFormClearErrors, useFormContext, UseFormGetValues, UseFormSetError, } from 'react-hook-form'; import { useOutletContext } from 'react-router-dom'; @@ -11,6 +10,7 @@ import { ReactComponent as Warning } from 'assets/svg/auth/warning.svg'; import styles from 'page/Auth/FindPassword/index.module.scss'; import { OutletProps } from 'page/Auth/FindPassword/entity'; import { useDebounce } from 'utils/hooks/useDebounce'; +import showToast from 'utils/ts/showToast'; interface SendCode { getValues: UseFormGetValues; @@ -27,7 +27,10 @@ const code = ( }: SendCode, ) => { sendVerifyCode(getValues('phone_number')) - .then(() => setIsSent(true)) + .then(() => { + setIsSent(true); + showToast('success', '인증번호를 발송했습니다'); + }) .catch((e) => { if (isKoinError(e)) { setError('phone_number', { type: 'custom', message: e.message }); @@ -35,51 +38,6 @@ const code = ( }); }; -const useCheckCode = ( - setIsStepComplete: React.Dispatch>, - getValues: UseFormGetValues, - setError: UseFormSetError, - clearErrors: UseFormClearErrors, -) => { - const [certificationCode, setCertificationCode] = useState(''); - const [isCertified, setIsCertified] = useState(false); - - const setCode = (e: ChangeEvent) => { - setCertificationCode(e.target.value); - if (e.target.value.length < 6) { - setError('certification_code', { message: '필수 입력 항목입니다.' }); - setIsCertified(false); - setIsStepComplete(false); - return; - } - clearErrors(); - }; - - useEffect(() => { - if (certificationCode.length === 6) { - verifyCode({ - certification_code: certificationCode, - phone_number: getValues('phone_number'), - }).then((data) => { - setIsStepComplete(true); - setIsCertified(true); - clearErrors(); - sessionStorage.setItem('accessToken', data.data.token); - }) - .catch((e) => { - if (isKoinError(e)) { - setError('certification_code', { type: 'error', message: e.message }); - } else { - sendClientError(e); - } - setIsStepComplete(false); - }); - } - }, [certificationCode, setIsStepComplete, getValues, setError, clearErrors]); - - return { certificationCode, setCode, isCertified }; -}; - interface Verify { phone_number: string; certification_code: string; @@ -91,43 +49,78 @@ export default function Verify() { } = useFormContext(); const [isSent, setIsSent] = useState(false); + const [isCertified, setIsCertified] = useState(false); const debounce = useDebounce(code, { getValues, setError, setIsSent }); const steps = useOutletContext(); - const { setCode, isCertified } = useCheckCode( - steps.setIsStepComplete, - getValues, - setError, - clearErrors, - ); - const sendCode = () => { if (getValues('phone_number').length === 0) { setError('phone_number', { type: 'custom', message: '필수 입력 항목입니다.' }); return; } debounce(); + clearErrors(); }; + const verify = () => verifyCode({ + certification_code: getValues('certification_code'), + phone_number: getValues('phone_number'), + }).then((data) => { + steps.setIsStepComplete(true); + setIsCertified(true); + clearErrors(); + sessionStorage.setItem('accessToken', data.data.token); + }) + .catch((e) => { + if (isKoinError(e)) { + setError('certification_code', { type: 'error', message: e.message }); + } else { + sendClientError(e); + } + setIsCertified(false); + steps.setIsStepComplete(false); + }); + + useEffect(() => { + if (errors.certification_code || errors.phone_number) { + steps.setIsStepComplete(false); + setIsCertified(false); + } + }, [errors, steps]); + return (
휴대폰 번호
- +
+ + +
{errors.phone_number && (
@@ -140,23 +133,31 @@ export default function Verify() {
인증번호
{ @@ -168,7 +169,7 @@ export default function Verify() { ) } { - isCertified && ( + isCertified && watch('certification_code').length === 6 && (
인증되었습니다