fix: merge error fixing

4bujak-4bujak · May 13, 2024 · c3e3206 · c3e3206
2 parents a9552a3 + c46f400
commit c3e3206
Show file tree

Hide file tree

Showing 16 changed files with 547 additions and 164 deletions.
diff --git a/public/sign/doneCircle.png b/public/sign/doneCircle.png
diff --git a/public/sign/emailerror.png b/public/sign/emailerror.png
diff --git a/src/api/auth/auth.post.api.ts b/src/api/auth/auth.post.api.ts
@@ -1,5 +1,4 @@
 // import { ICommon } from '../types/common';
-import { basicResponse } from '../../models/response';
 import { postRequest } from '../request';
 import {
   ISignIn,
@@ -10,27 +9,24 @@ import {
   IPhoneNumber,
   IPhoneAuth
 } from '../types/auth';
+import { ICommon } from '../types/common';
 
 /* 회원가입 */
 
 export const signup = async ({
   memberEmail,
   memberPassword,
   memberName,
-  memberGender,
   memberJob,
   memberPhone,
-  memberBirthDate,
   memberSmsAgree
 }: ISignUp) => {
-  const response = await postRequest<null, ISignUp>('members', {
+  const response = await postRequest<ICommon<null>, ISignUp>('members', {
     memberEmail,
     memberPassword,
     memberName,
-    memberGender,
     memberJob,
     memberPhone,
-    memberBirthDate,
     memberSmsAgree
   });
   return response;
@@ -50,7 +46,7 @@ export const signin = async ({ memberEmail, memberPassword }: ISignIn) => {
 /* 이메일 인증 요청 */
 
 export const emailauthrequest = async ({ emailAddress }: IEmail) => {
-  const response = await postRequest<null, IEmail>('auth/email', {
+  const response = await postRequest<ICommon<null>, IEmail>(`auth/email`, {
     emailAddress
   });
 
@@ -60,7 +56,7 @@ export const emailauthrequest = async ({ emailAddress }: IEmail) => {
 /* 이메일 코드 검증 */
 
 export const emailauthverify = async ({ emailAddress, code }: IEmailAuth) => {
-  const response = await postRequest<null, IEmailAuth>('auth/email/verify', {
+  const response = await postRequest<ICommon<null>, IEmailAuth>(`auth/email/verify`, {
     emailAddress,
     code
   });
@@ -71,7 +67,7 @@ export const emailauthverify = async ({ emailAddress, code }: IEmailAuth) => {
 /* 휴대전화 번호 인증 요청*/
 
 export const phoneauthrequest = async ({ phoneNumber }: IPhoneNumber) => {
-  const response = await postRequest<null, IPhoneNumber>(`auth/phone`, {
+  const response = await postRequest<ICommon<null>, IPhoneNumber>(`auth/phone`, {
     phoneNumber
   });
 
@@ -81,7 +77,7 @@ export const phoneauthrequest = async ({ phoneNumber }: IPhoneNumber) => {
 /* 휴대전화 번호 코드 검증*/
 
 export const phoneauthverify = async ({ phoneNumber, code }: IPhoneAuth) => {
-  const response = await postRequest<null, IPhoneAuth>(`auth/phone/verify`, {
+  const response = await postRequest<ICommon<null>, IPhoneAuth>(`auth/phone/verify`, {
     phoneNumber,
     code
   });

diff --git a/src/api/types/auth.ts b/src/api/types/auth.ts
@@ -7,10 +7,8 @@ export interface ISignIn {
 
 export interface ISignUp extends ISignIn {
   memberName: string;
-  memberGender: string;
   memberJob: string;
   memberPhone: string;
-  memberBirthDate: string;
   memberSmsAgree: boolean;
 }
 
@@ -19,7 +17,6 @@ export interface IUpdateProfile {
   memberName: string;
   memberJob: string;
   memberPhone: string;
-  memberBirthDate: string;
 }
 
 export interface IPhoneNumber {

diff --git a/src/api/types/common.ts b/src/api/types/common.ts
@@ -1,6 +1,6 @@
 export interface ICommon<T> {
-  status: number;
-  code: string;
+  status: string;
+  errorCode: string;
   message: string;
-  value: T;
+  data: T;
 }
diff --git a/src/components/findpassword/EmailCertification.tsx b/src/components/findpassword/EmailCertification.tsx
@@ -1,10 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { ChangeEvent, Dispatch, useEffect, useRef, useState } from 'react';
 import ToBack from '../shared/sign/ToBack';
 import { SignupBtnStatus } from '@/models/signupBtnStatus';
 import { motion } from 'framer-motion';
 import { useMutation } from 'react-query';
 import { invertSecond } from '@/utils/invertSecond';
 import { emailauthrequest, emailauthverify } from '@/api/auth/auth.post.api';
+import { signError } from '@/constant/signError';
 
 interface EmailCertificationProps {
   setStep: Dispatch<React.SetStateAction<number>>;
@@ -17,10 +19,10 @@ const EmailCertification = ({ setStep }: EmailCertificationProps) => {
   const [isRequest, setIsRequest] = useState(false);
   const [validNumber, setValidNumber] = useState<string>('');
   const [validTime, setValidTime] = useState<number>(300);
-  const [isError, setIsError] = useState(false);
-  const [emailError, setEmailError] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const startRef = useRef<HTMLInputElement>(null);
+  //추가
+  const [errorMessage, setErrorMessage] = useState('');
 
   const { mutateAsync: emailRequest } = useMutation((email: string) => {
     return emailauthrequest({ emailAddress: email });
@@ -65,14 +67,13 @@ const EmailCertification = ({ setStep }: EmailCertificationProps) => {
 
   useEffect(() => {
     let timeoutId: NodeJS.Timeout;
-    if (isError || emailError) {
+    if (errorMessage != '') {
       timeoutId = setTimeout(() => {
-        setIsError(false);
-        setEmailError(false);
+        setErrorMessage('');
       }, 4000);
     }
     return () => clearTimeout(timeoutId);
-  }, [isError, emailError]);
+  }, [errorMessage]);
 
   useEffect(() => {
     let intervalId: NodeJS.Timeout;
@@ -88,37 +89,51 @@ const EmailCertification = ({ setStep }: EmailCertificationProps) => {
 
   const handleClick = async () => {
     if (btnStatus == 'SECOND') {
-      const { status } = (await emailRequest(userEmail)) as { status: string };
-      if (status == 'SUCCESS') {
-        setIsRequest(true);
-        setBtnStatus('THIRD');
-      }
-      if (status == 'FAIL') {
-        setUserEmail('');
-        setEmailError(true);
-        return;
+      try {
+        const { status } = await emailRequest(userEmail);
+        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);
+          setUserEmail('');
+          setBtnStatus('FIRST');
+          startRef.current?.focus();
+          return;
+        }
       }
     }
     if (btnStatus == 'THIRD') {
       if (validNumber.length != 6) {
         setValidNumber('');
-        setIsError(true);
+        setErrorMessage('6자리 코드를 입력해주세요.');
         inputRef.current?.focus();
         return;
       }
-      const { status } = (await emailVerify({
-        emailAddress: userEmail,
-        code: Number(validNumber)
-      })) as { status: string };
+      try {
+        const { status } = (await emailVerify({
+          emailAddress: userEmail,
+          code: Number(validNumber)
+        })) as { status: string };
 
-      if (status == 'SUCCESS') {
-        setStep((prev) => prev + 1);
-      }
-      if (status == 'FAIL') {
-        setValidNumber('');
-        setIsError(true);
-        inputRef.current?.focus();
-        return;
+        if (status == 'SUCCESS') {
+          setStep((prev) => prev + 1);
+        }
+      } 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);
+          setValidNumber('');
+          inputRef.current?.focus();
+          return;
+        }
       }
     }
   };
@@ -176,6 +191,7 @@ const EmailCertification = ({ setStep }: EmailCertificationProps) => {
                 value={userEmail}
                 onChange={handleEmailChange}
                 ref={startRef}
+                autoComplete="off"
               />
             </div>
             <button
@@ -190,10 +206,10 @@ const EmailCertification = ({ setStep }: EmailCertificationProps) => {
             </button>
           </div>
         </div>
-        {emailError ? (
+        {errorMessage != '' && isRequest === false ? (
           <div className="flex ml-4">
             <div className="text-red-700 text-xs font-normal font-pretendard leading-tight">
-              *등록되지 않은 이메일입니다.
+              {errorMessage}
             </div>
           </div>
         ) : (
@@ -202,12 +218,22 @@ const EmailCertification = ({ setStep }: EmailCertificationProps) => {
       </motion.div>
 
       {isRequest && (
-        <>
+        <motion.div
+          initial={{ opacity: 0, translateX: -90 }}
+          transition={{
+            duration: 0.4,
+            ease: 'easeInOut',
+            delay: 0.6
+          }}
+          animate={{
+            opacity: 1,
+            translateX: 0
+          }}>
           <div className="mt-[48px] border-b border-neutral-300 ml-4">
-            {isError ? (
+            {errorMessage != '' ? (
               <div className="flex flex-row-reverse">
                 <div className="text-red-700 text-xs font-normal font-pretendard leading-tight">
-                  *올바르지 않은 코드입니다.
+                  {errorMessage}
                 </div>
               </div>
             ) : (
@@ -241,7 +267,7 @@ const EmailCertification = ({ setStep }: EmailCertificationProps) => {
               이메일로 발송된 코드를 입력해주세요.
             </div>
           </div>
-        </>
+        </motion.div>
       )}
     </div>
   );