Merge pull request #218 from prgrms-web-devcourse-final-project/feat/217-signUp-resend

[feat] 재전송 횟수 로직 추가

Author: kangsuyeong

src/hooks/useResendEmailVerification.ts

@@ -1,15 +1,21 @@
 import { postEmailVerificationRequest } from '@/apis/email';
+import { MAX_RESEND_COUNT } from '@/constants/email';
 import { useMutation } from '@tanstack/react-query';
 
 // 이메일 재전송 훅
 export const useResendEmailVerification = (
   email: string,
   setValidationMessage: (val: { success: boolean; message: string }) => void,
-  setButtonVariant: (val: 'primary' | 'disabled') => void,
   setResendCount: React.Dispatch<React.SetStateAction<number>>,
+  resendCount: number, // 재전송횟수
 ) => {
   const resendEmailMutation = useMutation({
-    mutationFn: () => postEmailVerificationRequest(email),
+    mutationFn: () => {
+      if (resendCount >= MAX_RESEND_COUNT) {
+        throw new Error('최대 재전송 횟수를 초과');
+      }
+      return postEmailVerificationRequest(email);
+    },
     onSuccess: ({ code }) => {
       if (code === 200) {
         setValidationMessage({
@@ -18,13 +24,15 @@ export const useResendEmailVerification = (
         });
 
         setResendCount((count) => count + 1);
-        setButtonVariant('disabled');
       }
     },
-    onError: () => {
+    onError: (error) => {
       setValidationMessage({
         success: false,
-        message: '이메일 재전송 중 오류가 발생했습니다. 다시 시도해주세요.',
+        message:
+          error.message === '최대 재전송 횟수를 초과'
+            ? '최대 재전송 횟수를 초과했습니다.'
+            : '이메일 재전송 중 오류가 발생했습니다. 다시 시도해주세요.',
       });
     },
   });

src/pages/signup/components/AuthCodeInput.tsx

@@ -14,9 +14,9 @@ interface AuthCodeInputProps {
 }
 function AuthCodeInput({ email, emailvalidity, validity, setValidity }: AuthCodeInputProps) {
   const [resendCount, setResendCount] = useState(0); // 재전송 횟수
-  // 유효성 검사
   const [showLoading, setShowLoading] = useState(false); // 로딩 UI 표시 여부
 
+  // 유효성 검사
   const handleValidation = (value: string) => {
     if (value == '') {
       return { success: false, message: '인증번호가 오지 않았나요?' };
@@ -46,8 +46,8 @@ function AuthCodeInput({ email, emailvalidity, validity, setValidity }: AuthCode
   const { resendEmailVerification } = useResendEmailVerification(
     email,
     setValidationMessage,
-    setButtonVariant,
     setResendCount,
+    resendCount,
   );
   // 인증번호 확인 훅
   const { verifyEmail, isLoading } = useEmailVerificationCheck(