♻️Refector: signup sms

School-of-Company · Dec 23, 2024 · 9a440af · 9a440af
1 parent 170b288
commit 9a440af
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 19 deletions.
diff --git 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
@@ -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<React.SetStateAction<boolean>>,
+) => {
   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
@@ -3,8 +3,8 @@ import { toast } from 'react-toastify';
 import { postSendSms } from '../api/postSendSms';
 
 export const useSendSms = (
-  setIsSmsSent: React.Dispatch<React.SetStateAction<boolean>>,
   setTimer: React.Dispatch<React.SetStateAction<number>>,
+  setIsSmsSent: React.Dispatch<React.SetStateAction<boolean>>,
 ) => {
   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
@@ -3,17 +3,19 @@ import { useEffect } from 'react';
 export const useTimer = (
   timer: number,
   setTimer: React.Dispatch<React.SetStateAction<number>>,
-  setIsSmsSent: React.Dispatch<React.SetStateAction<boolean>>, // 추가
+  setIsSmsSent: React.Dispatch<React.SetStateAction<boolean>>,
+  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
@@ -28,14 +28,20 @@ const SignUpForm = () => {
   } = useForm<FormData>();
   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 (
     <form
@@ -116,6 +122,7 @@ const SignUpForm = () => {
             })}
             type="tel"
             placeholder="연락처는 - 빼고 입력해주세요"
+            disabled={isSmsVerified}
           />
           <div className="flex space-x-3">
             <Input
@@ -129,25 +136,32 @@ const SignUpForm = () => {
               type="text"
               placeholder="인증 번호 입력"
               style={{ width: '80%' }}
-              disabled={!isSmsSent && watch('code') !== null}
+              disabled={!isSmsSent || isSmsVerified}
             />
             <Button
               onClick={() => checkSmsCode()}
               text="확인"
               width="20%"
-              disabled={!isSmsSent}
+              disabled={!watch('code') || isSmsVerified || !isCheckingCode}
               type="button"
             />
           </div>
           <button
             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')})`
+                : '인증번호 발송'}
           </button>
         </div>
       </div>

diff --git a/src/shared/ui/Loading/index.tsx b/src/shared/ui/Loading/index.tsx
@@ -19,7 +19,7 @@ export default function Loading() {
   }, []);
 
   return (
-    <div className="flex h-screen items-center justify-center">
+    <div className="flex h-screen w-screen items-center justify-center">
       <p className="text-h1 text-main-600">
         로딩중{dots}
         <span className="invisible">...</span>