Revert "[회원가입] 이메일 인증 타이머 추가 및 ErrorMessage 컴포넌트 리팩토링"

BCSDLab · Jan 12, 2024 · 839e498 · 839e498
1 parent e0584fa
commit 839e498
Show file tree

Hide file tree

Showing 13 changed files with 35 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -68,4 +68,4 @@
     "stylelint-config-standard": "^26.0.0",
     "stylelint-config-standard-scss": "^4.0.0"
   }
-}
+}
diff --git a/src/page/Auth/Signup/component/ErrorMessage/index.tsx b/src/page/Auth/Signup/component/ErrorMessage/index.tsx
@@ -2,14 +2,14 @@ import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import styles from './ErrorMessage.module.scss';
 
 interface ErrorMessageProps {
-  messages: (string | undefined)[]
+  message: string | undefined
 }
 
-export default function ErrorMessage({ messages }:ErrorMessageProps) {
+export default function ErrorMessage({ message }:ErrorMessageProps) {
   return (
     <div className={styles.warn}>
       <Warn />
-      <span className={styles['warn--phrase']}>{messages[0]}</span>
+      <span className={styles['warn--phrase']}>{message}</span>
     </div>
   );
 }
diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -5,50 +5,36 @@ import useAuthCheck from 'page/Auth/Signup/hooks/useAuthCheck';
 import useVerification from 'page/Auth/Signup/hooks/useVerification';
 import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
 import useRegisterInfo from 'store/registerStore';
-import useTimer from 'page/Auth/Signup/hooks/useTimer';
 import styles from './UserEmail.module.scss';
 
 export default function UserEmail() {
   const { isMobile } = useMediaQuery();
   const { userInfo: userData } = useRegisterInfo();
   const {
-    emailHandleSubmit, errors, emailDuplicateRegister, watch,
+    emailHandleSubmit, errors, emailDuplicateRegister,
   } = useValidateEmail();
   const {
-    isOpen, onSubmit: emailSubmit, email, refetch, errorMessage,
+    isOpen, onSubmit, email, refetch,
   } = useAuthCheck(userData.email ? userData.email : '', isMobile);
   const {
     verificationCode,
     codeInput, errorMessage: verificateError,
   } = useVerification(email);
-  const { getTime, startTimer } = useTimer(300);
-  const onSubmit = <T extends {}>(data:T) => {
-    startTimer();
-    emailSubmit(data);
-  };
-  const reSubmit = () => {
-    startTimer();
-    refetch();
-  };
+
   return (
     !isMobile
       ? (
         <form className={styles['email-check']} onSubmit={emailHandleSubmit(onSubmit)}>
           <span className={styles['email-check__label']}>이메일 인증</span>
           <div className={styles['email-check__input']}>
             <input className={styles.input} type="text" placeholder="이메일 입력@example.com" {...emailDuplicateRegister} disabled={isOpen} />
-            { (errors.email || (errorMessage && watch().email === email)) && (
-            <ErrorMessage messages={
-              [errors.email?.message, errorMessage].filter((msg) => typeof msg === 'string')
-            }
-            />
-            )}
+            { errors.email && <ErrorMessage message={errors.email.message} />}
             {isOpen && <input className={styles['input--code']} type="text" pattern="\d*" maxLength={6} placeholder="인증번호" ref={codeInput} disabled={userData.isAuthentication} />}
           </div>
           {isOpen ? (
             <>
-              { verificateError ? <ErrorMessage messages={[verificateError]} />
-                : <span className={styles['email-check__alert']}>{`* 제한시간 ${getTime()}`}</span>}
+              { verificateError ? <ErrorMessage message={verificateError} />
+                : <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>}
               <div className={styles.button}>
                 <CustomButton
                   buttonSize="large"
@@ -81,11 +67,11 @@ export default function UserEmail() {
             <div className={styles['email-check__input']}>
               <input className={styles.input} type="password" pattern="\d*" maxLength={6} placeholder="인증번호 입력" ref={codeInput} />
             </div>
-            {verificateError && <ErrorMessage messages={[verificateError]} />}
-            <span className={styles['email-check__alert']}>{`* 제한시간 ${getTime()}`}</span>
+            {verificateError && <ErrorMessage message={verificateError} />}
+            <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
           </div>
           <div className={styles.buttons}>
-            <CustomButton buttonSize="mobile" content="재발송" onClick={reSubmit} />
+            <CustomButton buttonSize="mobile" content="재발송" onClick={refetch} />
             <CustomButton buttonSize="mobile" content="다음" onClick={verificationCode} />
           </div>
         </>

diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -31,9 +31,9 @@ export default function UserId() {
         />
         {!isMobile && <CustomButton content="중복확인" buttonSize="small" submit />}
       </div>
-      {formErros.email && <ErrorMessage messages={[formErros.email.message]} />}
+      {formErros.email && <ErrorMessage message={formErros.email.message} />}
       {!formErros.email && watch().email === email && requestError
-      && <ErrorMessage messages={[requestError]} />}
+      && <ErrorMessage message={requestError} />}
       {!formErros.email && watch().email === email && status === 'success'
       && <span className={styles.form__alert}>사용하실 수 있는 아이디 입니다.</span>}
     </form>

diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -36,7 +36,7 @@ export default function UserPassword() {
           {isBlind ? <BlindIcon /> : <ShowIcon />}
         </button>
         )}
-        {formErrors.password ? (<ErrorMessage messages={[formErrors.password.message]} />
+        {formErrors.password ? (<ErrorMessage message={formErrors.password.message} />
         ) : <span className={styles.form__alert}>* 특수문자 포함 영어와 숫자 조합 6~18 자리</span>}
       </div>
       <div className={styles.form__input} onChange={handleSubmit(onSubmit)}>
@@ -47,7 +47,7 @@ export default function UserPassword() {
         </button>
         )}
         {formErrors.passwordConfirm
-        && <ErrorMessage messages={[formErrors.passwordConfirm.message]} />}
+        && <ErrorMessage message={formErrors.passwordConfirm.message} />}
       </div>
     </div>
   );

diff --git a/src/page/Auth/Signup/hooks/useAuthCheck.ts b/src/page/Auth/Signup/hooks/useAuthCheck.ts
@@ -5,7 +5,7 @@ import { User } from 'page/Auth/Signup/types/User';
 
 export default function useAuthCheck(userEmail:string, isMobile:boolean) {
   const [email, setEmail] = useState('');
-  const [errorMessage, setMessage] = useState<string | undefined>();
+  const [errorMessage, setMessage] = useState<string | null>('');
   const [isOpen, setOpen] = useState(false);
   const {
     status, refetch, isError, error,
@@ -29,10 +29,9 @@ export default function useAuthCheck(userEmail:string, isMobile:boolean) {
 
   useEffect(() => {
     if (status === 'success') {
-      setMessage(() => undefined);
       setOpen(true);
-    } else if (Object(error).response) {
-      setMessage(() => Object(error).response.data.message);
+    } else {
+      setMessage(Object(error).response?.data.message);
     }
   }, [status, isError, error]);
 

diff --git a/src/page/Auth/Signup/hooks/useOwnerData.ts b/src/page/Auth/Signup/hooks/useOwnerData.ts
@@ -1,7 +1,7 @@
 import { useForm } from 'react-hook-form';
+import useModalStore from 'store/modalStore';
 import { useCallback, useEffect } from 'react';
 import useRegisterInfo from 'store/registerStore';
-import useShopRegistrationStore from 'store/shopRegistration';
 import useFileController from './useFileController';
 
 const VALIDATIONMESSAGE = {
@@ -176,11 +176,11 @@ export default function useCheckOwnerData(isMobile:boolean) {
   const getPhoneNumber = useCallback(() => [watch('phoneFront'), watch('phoneMiddle'), watch('phoneEnd')], [watch]);
   const getRegisterationNumber = useCallback(() => [watch('registrationNumberFront'), watch('registrationNumberMiddle'), watch('registrationNumberEnd')], [watch]);
 
-  const { name } = useShopRegistrationStore();
+  const { searchShopState } = useModalStore();
 
   useEffect(() => {
-    setValue('shopName', name);
-  }, [name, setValue]);
+    setValue('shopName', searchShopState);
+  }, [searchShopState, setValue]);
 
   const registerNumberFront = watch('registrationNumberFront') ? watch('registrationNumberFront') : null;
   const registerNumberMiddle = watch('registrationNumberMiddle') ? watch('registrationNumberMiddle') : null;

diff --git a/src/page/Auth/Signup/hooks/useTimer.ts b/src/page/Auth/Signup/hooks/useTimer.ts
diff --git a/src/page/Auth/Signup/view/OwnerDataPage/index.tsx b/src/page/Auth/Signup/view/OwnerDataPage/index.tsx
@@ -72,15 +72,15 @@ export default function OwnerData({ goNext }:ButtonClickEvent) {
           <span className={styles.form__label}>대표자명</span>
           <input className={styles.form__input} type="text" placeholder={isMobile ? '대표자명(실명)' : ''} {...ownerNameRegister} />
         </div>
-        {errors.ownerName && <ErrorMessage messages={[errors.ownerName.message]} />}
+        {errors.ownerName && <ErrorMessage message={errors.ownerName.message} />}
         <div>
           <span className={styles.form__label}>가게명</span>
           <div className={styles['input__shop-name--wrapper']}>
             <input className={styles['input__shop-name']} type="text" placeholder={isMobile ? '가게명' : ''} {...shopNameRegister} />
             <CustomButton content="가게검색" buttonSize={isMobile ? 'mobile-small' : 'small'} onClick={openSearchShop} />
           </div>
         </div>
-        {errors.shopName && <ErrorMessage messages={[errors.shopName.message]} />}
+        {errors.shopName && <ErrorMessage message={errors.shopName.message} />}
         <div>
           <span className={styles.form__label}>사업자등록번호</span>
           {!isMobile ? (
@@ -99,7 +99,7 @@ export default function OwnerData({ goNext }:ButtonClickEvent) {
             : <input className={styles.form__input} type="text" placeholder="사업자등록번호" maxLength={10} {...registrationNumberRegister.mobile} />}
         </div>
         {(registrationNumberRegister.message)
-        && <ErrorMessage messages={[registrationNumberRegister.message]} />}
+        && <ErrorMessage message={registrationNumberRegister.message} />}
         <div>
           <span className={styles.form__label}>개인 연락처</span>
           {!isMobile ? (
@@ -117,7 +117,7 @@ export default function OwnerData({ goNext }:ButtonClickEvent) {
           )
             : <input className={styles.form__input} type="text" placeholder="개인 연락처" maxLength={11} {...phoneNumberRegister.mobile} />}
         </div>
-        {(phoneNumberRegister.message) && <ErrorMessage messages={[phoneNumberRegister.message]} />}
+        {(phoneNumberRegister.message) && <ErrorMessage message={phoneNumberRegister.message} />}
         <div>
           <span className={styles.form__label}>파일첨부</span>
           <label
@@ -157,7 +157,7 @@ export default function OwnerData({ goNext }:ButtonClickEvent) {
           </div>
           )}
         </div>
-        {errors.registerFiles && <ErrorMessage messages={[errors.registerFiles.message]} />}
+        {errors.registerFiles && <ErrorMessage message={errors.registerFiles.message} />}
       </section>
       <div className={styles.buttons}>
         <CustomButton buttonSize="large" content={isMobile ? '확인' : '다음'} onClick={handleSubmit(onSubmit)} disable={!isDone} />

diff --git a/src/page/ShopRegistration/component/Modal/ConfirmShop/index.tsx b/src/page/ShopRegistration/component/Modal/ConfirmShop/index.tsx
@@ -14,7 +14,7 @@ interface ConfirmShopProps {
 }
 
 export default function ConfirmShop({ open, onCancel, selectedShop }: ConfirmShopProps) {
-  const { setName, setShopId } = useShopRegistrationStore();
+  const { setName } = useShopRegistrationStore();
   if (!open) return null;
   return (
     <div className={styles.container}>
@@ -29,7 +29,6 @@ export default function ConfirmShop({ open, onCancel, selectedShop }: ConfirmSho
         type="button"
         className={styles['container__select-button']}
         onClick={() => {
-          setShopId(selectedShop.id);
           setName(selectedShop.name);
           onCancel();
         }}

diff --git a/src/query/register.ts b/src/query/register.ts
@@ -3,8 +3,8 @@ import {
   getEmailAuthCode, getEmailDuplicate, getFileUrls, registerUser, verificationAuthCode,
 } from 'api/register';
 import parseRegisterData from 'page/Auth/Signup/utils/parseRegisterData';
+import useModalStore from 'store/modalStore';
 import useRegisterInfo from 'store/registerStore';
-import useShopRegistrationStore from 'store/shopRegistration';
 import useUploadToken from 'store/uploadToken';
 
 export const useCheckDuplicate = (email:string) => {
@@ -46,16 +46,16 @@ export const useVerificationAuthCode = (code:string, email:string) => {
 
 export const useRegisterUser = (goNext:()=>void) => {
   const { userInfo, ownerInfo, resetRegisterInfo } = useRegisterInfo();
-  const { name, shopId } = useShopRegistrationStore();
+  const { selectedShopId, searchShopState } = useModalStore();
   const register = useMutation({
     mutationKey: ['registerUser'],
     mutationFn: (fileUrls:string[]) => (
       registerUser(parseRegisterData(
         userInfo,
         ownerInfo,
         fileUrls,
-        shopId,
-        name,
+        selectedShopId,
+        searchShopState,
       ))
     ),
     onSuccess: () => {

diff --git a/src/store/shopRegistration.ts b/src/store/shopRegistration.ts
@@ -13,7 +13,6 @@ interface ShopRegistrationStore {
   delivery: boolean;
   payBank: boolean;
   payCard: boolean;
-  shopId:string;
   setAddress: (address: string) => void;
   setCategory: (category: string) => void;
   setCategoryId: (categoryId: number) => void;
@@ -26,7 +25,6 @@ interface ShopRegistrationStore {
   setDelivery: (delivery: boolean) => void;
   setPayBank: (payBank: boolean) => void;
   setPayCard: (payCard: boolean) => void;
-  setShopId: (shopId:string) => void;
 }
 
 const useShopRegistrationStore = create<ShopRegistrationStore>((set) => ({
@@ -42,7 +40,6 @@ const useShopRegistrationStore = create<ShopRegistrationStore>((set) => ({
   delivery: false,
   payBank: false,
   payCard: false,
-  shopId: '',
   setAddress: (address: string) => set({ address }),
   setCategory: (category: string) => set({ category }),
   setCategoryId: (categoryId: number) => set({ categoryId }),
@@ -55,7 +52,6 @@ const useShopRegistrationStore = create<ShopRegistrationStore>((set) => ({
   setDelivery: (delivery: boolean) => set({ delivery }),
   setPayBank: (payBank: boolean) => set({ payBank }),
   setPayCard: (payCard: boolean) => set({ payCard }),
-  setShopId: (shopId:string) => set({ shopId }),
 }));
 
 export default useShopRegistrationStore;
diff --git a/yarn.lock b/yarn.lock
@@ -10084,4 +10084,4 @@ zustand@^4.3.7:
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.8.tgz#37113df8e9e1421b0be1b2dca02b49b76210e7c4"
   integrity sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==
   dependencies:
-    use-sync-external-store "1.2.0"
+    use-sync-external-store "1.2.0"
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,4 +68,4 @@ @@
         "stylelint-config-standard": "^26.0.0",
         "stylelint-config-standard-scss": "^4.0.0"
       }
-    }
+    }