diff --git a/src/page/Auth/FindPassword/ChangePassword/index.tsx b/src/page/Auth/FindPassword/ChangePassword/index.tsx index a84753b6..dc2de23f 100644 --- a/src/page/Auth/FindPassword/ChangePassword/index.tsx +++ b/src/page/Auth/FindPassword/ChangePassword/index.tsx @@ -30,7 +30,7 @@ export default function ChangePassword() {
새 비밀번호
새 비밀번호 확인
; @@ -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 && (
인증되었습니다
diff --git a/src/page/Auth/FindPassword/index.module.scss b/src/page/Auth/FindPassword/index.module.scss index f214a248..eb995044 100644 --- a/src/page/Auth/FindPassword/index.module.scss +++ b/src/page/Auth/FindPassword/index.module.scss @@ -26,16 +26,17 @@ height: 50px; padding: 2px 10px; box-sizing: border-box; + width: 55%; +} - &--verify { - background-color: #f5f5f5; - border-radius: 4px; - border: none; - height: 50px; - padding: 2px 10px; - box-sizing: border-box; - width: 55%; - } +.password-input { + background-color: #f5f5f5; + border-radius: 4px; + border: none; + height: 50px; + padding: 2px 10px; + box-sizing: border-box; + width: 100%; } .button { @@ -43,6 +44,7 @@ border-radius: 4px; height: 50px; width: 40%; + cursor: pointer; &--active { background-color: #175c8e;