feat : 회원가입 실패시 error페이지 띄우기 기능

4bujak-4bujak · May 13, 2024 · c46f400 · c46f400
1 parent 17976a3
commit c46f400
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 294 deletions.
diff --git a/src/api/types/common.ts b/src/api/types/common.ts
@@ -1,6 +1,6 @@
 export interface ICommon<T> {
   status: string;
-  code: string;
+  errorCode: string;
   message: string;
-  value: T;
+  data: T;
 }
diff --git a/src/components/findpassword/EmailCertification.tsx b/src/components/findpassword/EmailCertification.tsx
@@ -191,6 +191,7 @@ const EmailCertification = ({ setStep }: EmailCertificationProps) => {
                 value={userEmail}
                 onChange={handleEmailChange}
                 ref={startRef}
+                autoComplete="off"
               />
             </div>
             <button

diff --git a/src/components/signup/PhoneCertification.tsx b/src/components/signup/PhoneCertification.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import ToBack from '../shared/sign/ToBack';
 import { SignupBtnStatus } from '@/models/signupBtnStatus';
@@ -6,6 +7,7 @@ import { invertSecond } from '@/utils/invertSecond';
 import { useMutation } from 'react-query';
 import { phoneauthrequest, phoneauthverify } from '@/api/auth/auth.post.api';
 import { ApplyValues } from '@/models/applyValues';
+import { signError } from '@/constant/signError';
 
 interface PhoneCertificationProps {
   onNext: (phoneNumber: ApplyValues['memberPhone']) => void;
@@ -17,12 +19,11 @@ const PhoneCertification = ({ onNext }: PhoneCertificationProps) => {
   const [isRequest, setIsRequest] = useState(false);
   const [validNumber, setValidNumber] = useState<string>('');
   const [validTime, setValidTime] = useState<number>(300);
-  const [isError, setIsError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
   const inputRef = useRef<HTMLInputElement>(null);
   const startRef = useRef<HTMLInputElement>(null);
 
-  console.log(isError);
-
   const { mutateAsync: phoneRequest } = useMutation((number: string) => {
     return phoneauthrequest({
       phoneNumber: number
@@ -68,13 +69,13 @@ const PhoneCertification = ({ onNext }: PhoneCertificationProps) => {
 
   useEffect(() => {
     let timeoutId: NodeJS.Timeout;
-    if (isError) {
+    if (errorMessage != '') {
       timeoutId = setTimeout(() => {
-        setIsError(false);
-      }, 3000);
+        setErrorMessage('');
+      }, 4000);
     }
     return () => clearTimeout(timeoutId);
-  }, [isError]);
+  }, [errorMessage]);
 
   useEffect(() => {
     let intervalId: NodeJS.Timeout;
@@ -90,18 +91,32 @@ const PhoneCertification = ({ onNext }: PhoneCertificationProps) => {
 
   const handleClick = async () => {
     if (btnStatus == 'SECOND') {
-      const { status } = (await phoneRequest(phoneNumber.replace(/-/g, ''))) as {
-        status: string;
-      };
-      if (status == 'SUCCESS') {
-        setIsRequest(true);
-        setBtnStatus('THIRD');
+      try {
+        const { status } = (await phoneRequest(phoneNumber.replace(/-/g, ''))) as {
+          status: string;
+        };
+        if (status == 'SUCCESS') {
+          setIsRequest(true);
+          setBtnStatus('THIRD');
+        }
+      } catch (error: any) {
+        const errorResponse = error.response.data;
+        const errorCode = errorResponse.errorCode;
+        const select = signError.find((item) => item.errorCode === errorCode);
+        if (select) {
+          setErrorMessage(select.message);
+          setPhoneNumber('');
+          setBtnStatus('FIRST');
+          startRef.current?.focus();
+          return;
+        }
       }
     }
+
     if (btnStatus == 'THIRD') {
       if (validNumber.length != 6) {
         setValidNumber('');
-        setIsError(true);
+        setErrorMessage('6자리 코드를 입력해주세요.');
         inputRef.current?.focus();
         return;
       }
@@ -118,9 +133,10 @@ const PhoneCertification = ({ onNext }: PhoneCertificationProps) => {
       } catch (error: any) {
         const errorResponse = error.response.data;
         const errorCode = errorResponse.errorCode;
-        if (errorCode === '1-007') {
+        const select = signError.find((item) => item.errorCode === errorCode);
+        if (select) {
+          setErrorMessage(select.message);
           setValidNumber('');
-          setIsError(true);
           inputRef.current?.focus();
           return;
         }
@@ -223,9 +239,9 @@ const PhoneCertification = ({ onNext }: PhoneCertificationProps) => {
               </div>
             </div>
           </div>
-          {isError ? (
+          {errorMessage != '' ? (
             <div className="text-red-700 font-semibold font-pretendard text-xs">
-              *올바르지 않은 코드입니다.
+              {errorMessage}
             </div>
           ) : (
             ''