Merge pull request #323 from BCSDLab/feat/#322/email-issue

[코인 오너] 이메일 인증 관련 이슈 해결

src/page/Auth/Signup/component/UserEmail/index.tsx

@@ -7,6 +7,7 @@ import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
 import useRegisterInfo from 'store/registerStore';
 import useTimer from 'page/Auth/Signup/hooks/useTimer';
 import { useEffect } from 'react';
+import { isKoinError } from '@bcsdlab/koin';
 import styles from './UserEmail.module.scss';
 
 export default function UserEmail() {
@@ -16,22 +17,29 @@ export default function UserEmail() {
     emailHandleSubmit, errors, emailDuplicateRegister, watch,
   } = useValidateEmail();
   const {
-    isOpen, onSubmit: emailSubmit, email, refetch, errorMessage,
-  } = useAuthCheck(userData.email ? userData.email : '', isMobile);
+    isOpen, onSubmit: emailSubmit, email, refetch, errorMessage, status,
+  } = useAuthCheck(userData.email ? userData.email : '', isMobile); // 회원가입 인증번호 전송
   const {
     verificationCode,
-    codeInput, errorMessage: verificateError, status,
-  } = useVerification(email);
+    codeInput, errorMessage: verificateError,
+  } = useVerification(email); // 사장님 이메일 인증번호 확인
   const { getTime, startTimer, stopTimer } = useTimer(300);
-  const reSubmit = () => {
+  const reSubmit = async () => {
+    const { error, isError } = await refetch();
+    if (isError) {
+      if (isKoinError(error)) {
+        if (error.status === 409) {
+          return; // 재발송 요청이 너무 빠르면 시간을 초기화하지 않고 에러를 보여줌
+        }
+      }
+    }
     startTimer();
-    refetch();
   };
   useEffect(() => {
     if (userData.isAuthentication) {
       stopTimer();
     }
-  }, [stopTimer, userData.isAuthentication]);
+  }, [stopTimer, userData.isAuthentication, verificateError]);
   useEffect(() => {
     if (status === 'success') {
       startTimer();
@@ -89,6 +97,7 @@ export default function UserEmail() {
               <input className={styles.input} type="password" pattern="\d*" maxLength={6} placeholder="인증번호 입력" ref={codeInput} />
             </div>
             {verificateError && <ErrorMessage message={verificateError} />}
+            {errorMessage && <ErrorMessage message={errorMessage} />}
             <span className={styles['email-check__alert']}>{`* 제한시간 ${getTime()}`}</span>
           </div>
           <div className={styles.buttons}>

src/page/Auth/Signup/hooks/useAuthCheck.ts

@@ -2,14 +2,15 @@ import { useGenerateAuthCode } from 'query/register';
 import { useEffect, useState } from 'react';
 import { SubmitHandler } from 'react-hook-form';
 import { User } from 'page/Auth/Signup/types/User';
+import { AxiosError } from 'axios';
 
 export default function useAuthCheck(userEmail:string, isMobile:boolean) {
   const [email, setEmail] = useState('');
   const [isOpen, setOpen] = useState(false);
   const {
     status, refetch, isError, error,
   } = useGenerateAuthCode(email);
-  const errorMessage = status === 'error' ? Object(error).message : null;
+  const errorMessage = isError ? (error as AxiosError).message : null;
   const onSubmit:SubmitHandler<User> = (data) => {
     setEmail(() => (data.email ? data.email : ''));
   };
@@ -33,6 +34,6 @@ export default function useAuthCheck(userEmail:string, isMobile:boolean) {
   }, [status, isError, error]);
 
   return {
-    onSubmit, isOpen, errorMessage, email, refetch, status,
+    onSubmit, isOpen, errorMessage, email, refetch, status, error,
   };
 }

src/page/Auth/Signup/hooks/useTimer.ts

@@ -32,10 +32,6 @@ export default function useTimer(targetTime:number) {
     }
   }, [time]);
 
-  useEffect(() => {
-    startTimer();
-  }, [startTimer]);
-
   const getTime = () => getTimeString(time);
 
   return { getTime, startTimer, stopTimer };