diff --git a/src/entities/signUp/api/getCheckSmsCode.ts b/src/entities/signUp/api/getCheckSmsCode.ts index 99d1363..364009d 100644 --- a/src/entities/signUp/api/getCheckSmsCode.ts +++ b/src/entities/signUp/api/getCheckSmsCode.ts @@ -10,5 +10,11 @@ export const getCheckSmsCode = async (phoneNumber: string, code: string) => { const response = await axios.get( `/api/auth/sms?phoneNumber=${phoneNumber}&code=${code}`, ); - return response; + if (response.status === 200) { + toast.success('인증 번호 확인에 성공했습니다.'); + return true; + } else { + toast.error('인증 번호 확인에 실패했습니다.'); + return false; + } }; diff --git a/src/entities/signUp/model/useCheckSmsCode.ts b/src/entities/signUp/model/useCheckSmsCode.ts index 7f83505..15804cc 100644 --- a/src/entities/signUp/model/useCheckSmsCode.ts +++ b/src/entities/signUp/model/useCheckSmsCode.ts @@ -1,10 +1,20 @@ import { useQuery } from '@tanstack/react-query'; import { getCheckSmsCode } from '../api/getCheckSmsCode'; -export const useCheckSmsCode = (phoneNumber: string, code: string) => { +export const useCheckSmsCode = ( + phoneNumber: string, + code: string, + setIsSmsVerified: React.Dispatch>, +) => { return useQuery({ queryKey: ['CheckSmsCode', phoneNumber, code], - queryFn: () => getCheckSmsCode(phoneNumber, code), + queryFn: async () => { + const result = await getCheckSmsCode(phoneNumber, code); + if (typeof result === 'boolean') { + setIsSmsVerified(result); + } + return result; + }, enabled: false, }); }; diff --git a/src/entities/signUp/model/useSendSms.ts b/src/entities/signUp/model/useSendSms.ts index d2302da..1b1ba5c 100644 --- a/src/entities/signUp/model/useSendSms.ts +++ b/src/entities/signUp/model/useSendSms.ts @@ -3,8 +3,8 @@ import { toast } from 'react-toastify'; import { postSendSms } from '../api/postSendSms'; export const useSendSms = ( - setIsSmsSent: React.Dispatch>, setTimer: React.Dispatch>, + setIsSmsSent: React.Dispatch>, ) => { return useMutation({ mutationFn: (phoneNumber: string) => postSendSms(phoneNumber), @@ -14,7 +14,7 @@ export const useSendSms = ( toast.success('문자 메시지 전송이 완료되었습니다.'); }, onError: () => { - toast.error('문제 매시지 전송에 실패했습니다.'); + toast.error('문자 메시지 전송에 실패했습니다.'); }, }); }; diff --git a/src/entities/signUp/model/useTimer.ts b/src/entities/signUp/model/useTimer.ts index 9785a9c..087508c 100644 --- a/src/entities/signUp/model/useTimer.ts +++ b/src/entities/signUp/model/useTimer.ts @@ -3,17 +3,19 @@ import { useEffect } from 'react'; export const useTimer = ( timer: number, setTimer: React.Dispatch>, - setIsSmsSent: React.Dispatch>, // 추가 + setIsSmsSent: React.Dispatch>, + isSmsVerified: boolean, ) => { useEffect(() => { - if (timer > 0) { + if (timer > 0 && !isSmsVerified) { const intervalId = setInterval(() => { setTimer((prev) => prev - 1); }, 1000); return () => clearInterval(intervalId); - } else if (timer === 0) { + } else if (timer === 0 || isSmsVerified) { setIsSmsSent(false); + setTimer(0); } - }, [timer, setTimer, setIsSmsSent]); + }, [timer, setTimer, isSmsVerified]); }; diff --git a/src/entities/signUp/ui/SignUpForm/index.tsx b/src/entities/signUp/ui/SignUpForm/index.tsx index 3af7396..6d298cb 100644 --- a/src/entities/signUp/ui/SignUpForm/index.tsx +++ b/src/entities/signUp/ui/SignUpForm/index.tsx @@ -28,14 +28,20 @@ const SignUpForm = () => { } = useForm(); const [isSmsSent, setIsSmsSent] = useState(false); const [timer, setTimer] = useState(0); + const [isSmsVerified, setIsSmsVerified] = useState(false); const { mutate: signup } = useSignup(); - const { mutate: sendSms } = useSendSms(setIsSmsSent, setTimer); - const { refetch: checkSmsCode } = useCheckSmsCode( + const { mutate: sendSms, isPending: isSendingSms } = useSendSms( + setTimer, + setIsSmsSent, + ); + + const { refetch: checkSmsCode, isPending: isCheckingCode } = useCheckSmsCode( watch('phoneNumber'), watch('code'), + setIsSmsVerified, ); - useTimer(timer, setTimer, setIsSmsSent); + useTimer(timer, setTimer, setIsSmsSent, isSmsVerified); return (
{ })} type="tel" placeholder="연락처는 - 빼고 입력해주세요" + disabled={isSmsVerified} />
{ type="text" placeholder="인증 번호 입력" style={{ width: '80%' }} - disabled={!isSmsSent && watch('code') !== null} + disabled={!isSmsSent || isSmsVerified} />
@@ -143,11 +150,18 @@ const SignUpForm = () => { type="button" onClick={() => sendSms(watch('phoneNumber'))} className="text-caption2 text-gray-300" - disabled={isSmsSent} + disabled={ + !watch('phoneNumber') || + isSendingSms || + isSmsSent || + isSmsVerified + } > - {isSmsSent - ? `인증번호 재발송 (${Math.floor(timer / 60)}:${String(timer % 60).padStart(2, '0')})` - : '인증번호 발송'} + {isSmsVerified + ? '인증 완료' + : isSmsSent + ? `인증번호 재발송 (${Math.floor(timer / 60)}:${String(timer % 60).padStart(2, '0')})` + : '인증번호 발송'} diff --git a/src/shared/ui/Loading/index.tsx b/src/shared/ui/Loading/index.tsx index 477e05a..cf2bf55 100644 --- a/src/shared/ui/Loading/index.tsx +++ b/src/shared/ui/Loading/index.tsx @@ -19,7 +19,7 @@ export default function Loading() { }, []); return ( -
+

로딩중{dots} ...