[공통] 비즈니스팀 QA 이슈 해결

src/component/common/Auth/Complete/index.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { ReactComponent as Check } from 'assets/svg/auth/check.svg';
+import useStepStore from 'store/useStepStore';
 import styles from './Complete.module.scss';
 
 interface CompleteProps {
@@ -12,6 +13,11 @@ interface CompleteProps {
 export default function Complete({
   title, topText, bottomText, link, linkText,
 }: CompleteProps) {
+  const { setStep } = useStepStore();
+
+  const initialize = () => {
+    setStep(0);
+  };
   return (
     <div className={styles.content}>
       <div className={styles.content__complete}>
@@ -26,7 +32,7 @@ export default function Complete({
           {bottomText}
         </span>
       </div>
-      <Link to={link} className={styles.content__link}>{linkText}</Link>
+      <Link to={link} className={styles.content__link} onClick={initialize}>{linkText}</Link>
     </div>
   );
 }

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

@@ -44,17 +44,17 @@ export default function UserEmail() {
           <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 message={
-              [errors.email?.message, errorMessage].filter((msg) => typeof msg === 'string')
-            }
-            />
+            {(errors.email || (errorMessage && watch().email === email)) && (
+              <ErrorMessage message={
+                [errors.email?.message, errorMessage].filter((msg) => typeof msg === 'string')
+              }
+              />
             )}
             {isOpen && <input className={styles['input--code']} type="text" pattern="\d*" maxLength={6} placeholder="인증번호" ref={codeInput} disabled={userData.isAuthentication} />}
           </div>
           {isOpen ? (
             <>
-              { verificateError ? <ErrorMessage message={[verificateError]} />
+              {verificateError ? <ErrorMessage message={[verificateError]} />
                 : <span className={styles['email-check__alert']}>{`* 제한시간 ${getTime()}`}</span>}
               <div className={styles.button}>
                 <CustomButton
@@ -81,19 +81,19 @@ export default function UserEmail() {
           <div className={styles['email-check']}>
             <span className={styles['email-check__phrase']}>
               <span className={styles['email-check__phrase--user-email']}>{userData.email}</span>
-            &nbsp;으로
+              &nbsp;으로
               <br />
               발송된 인증번호 6자리를 입력해 주세요
             </span>
             <div className={styles['email-check__input']}>
               <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}>
             <CustomButton buttonSize="mobile" content="재발송" onClick={reSubmit} />
-            <CustomButton buttonSize="mobile" content="다음" onClick={verificationCode} disable={(!codeInput.current || codeInput.current.value.length < 6)} />
+            <CustomButton buttonSize="mobile" content="다음" onClick={verificationCode} disable={(!codeInput.current || codeInput.current.value.length < 6 || getTime() === '0 : 00')} />
           </div>
         </>
       )

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

@@ -9,7 +9,7 @@ export default function useAuthCheck(userEmail:string, isMobile:boolean) {
   const {
     status, refetch, isError, error,
   } = useGenerateAuthCode(email);
-  const errorMessage = status === 'error' ? Object(error).response.data.message : null;
+  const errorMessage = status === 'error' ? Object(error).message : null;
   const onSubmit:SubmitHandler<User> = (data) => {
     setEmail(() => (data.email ? data.email : ''));
   };

src/page/Auth/Signup/view/CompletePage/index.tsx

@@ -1,8 +1,15 @@
 import { Link } from 'react-router-dom';
 import { ReactComponent as Check } from 'assets/svg/auth/check.svg';
+import useStepStore from 'store/useStepStore';
 import styles from './Complete.module.scss';
 
 export default function Complete() {
+  const { setStep } = useStepStore();
+
+  const initialize = () => {
+    setStep(0); // 회원가입을 진행하면서 전역으로 사용하는 step이 증가하고 있음, 따라서 step을 초기화해야 가게 정보 입력 시 처음 스텝부터 시작
+  };
+
   return (
     <div className={styles.content}>
       <div className={styles['complete-circle']}><Check className={styles['complete-circle--check-image']} /></div>
@@ -15,7 +22,7 @@ export default function Complete() {
           가입 허가가 승인되면 로그인이 가능합니다.
         </span>
       </div>
-      <Link to="/login" className={styles['link-button']}>로그인 화면 바로가기</Link>
+      <Link to="/login" className={styles['link-button']} onClick={initialize}>로그인 화면 바로가기</Link>
     </div>
   );
 }

src/page/ShopRegistration/view/Mobile/ShopConfirmation/index.tsx

@@ -11,16 +11,23 @@ import { useEffect } from 'react';
 import { DAY_OF_WEEK, WEEK } from 'utils/constant/week';
 import useModalStore from 'store/modalStore';
 import CheckSameTime from 'page/ShopRegistration/hooks/CheckSameTime';
+import { isKoinError } from '@bcsdlab/koin';
+import showToast from 'utils/ts/showToast';
 import styles from './ShopConfirmation.module.scss';
 
-const usePostData = (setStep: (step: number) => void) => {
+export const usePostData = (setStep: (step: number) => void) => {
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: (form: OwnerShop) => postShop(form),
     onSuccess: () => {
       setStep(5);
       queryClient.refetchQueries();
     },
+    onError: (e) => {
+      if (isKoinError(e)) {
+        showToast('error', e.message);
+      }
+    },
   });
   return mutation;
 };

src/page/ShopRegistration/view/PC/index.tsx

@@ -19,14 +19,13 @@ import { WEEK, DAY_OF_WEEK } from 'utils/constant/week';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { OwnerShop } from 'model/shopInfo/ownerShop';
-import { useMutation } from '@tanstack/react-query';
-import { postShop } from 'api/shop';
 import useImagesUpload from 'utils/hooks/useImagesUpload';
 import CheckSameTime from 'page/ShopRegistration/hooks/CheckSameTime';
 import useOperateTimeState from 'page/ShopRegistration/hooks/useOperateTimeState';
 import useShopRegistrationStore from 'store/shopRegistration';
 import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
+import { usePostData } from 'page/ShopRegistration/view/Mobile/ShopConfirmation/index';
 import styles from './ShopRegistrationPC.module.scss';
 
 export default function ShopRegistrationPC() {
@@ -99,17 +98,14 @@ export default function ShopRegistrationPC() {
     isAllClosed,
   } = CheckSameTime();
 
+  const mutation = usePostData(setStep);
+
   const {
     register, handleSubmit, setValue, formState: { errors },
   } = useForm<OwnerShop>({
     resolver: zodResolver(OwnerShop),
   });
 
-  const mutation = useMutation({
-    mutationFn: (form: OwnerShop) => postShop(form),
-    onSuccess: () => setStep(5),
-  });
-
   const formatPhoneNumber = (inputNumber: string) => {
     const phoneNumber = inputNumber.replace(/\D/g, '');
     const formattedPhoneNumber = phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
@@ -205,7 +201,7 @@ export default function ShopRegistrationPC() {
                     )}
                 </label>
                 {uploadError === '' && imageUrls.length === 0 && isError
-                && <ErrorMessage message={ERRORMESSAGE.image} />}
+                  && <ErrorMessage message={ERRORMESSAGE.image} />}
                 {uploadError !== '' && <ErrorMessage message={ERRORMESSAGE[uploadError]} />}
               </div>
               <div>

src/query/auth.ts

@@ -57,13 +57,15 @@ export const useLogin = () => {
           setLoginError('비밀번호가 일치하지 않습니다.');
         }
         if (err.status === 403) {
-          setLoginError('이메일 인증을 완료해주세요.');
+          setLoginError('관리자 승인 대기 중입니다.');
         }
         if (err.status === 404) {
           setLoginError('가입되지 않은 이메일입니다.');
         }
         if (err.status === 500) {
           setLoginError('서버 오류가 발생했습니다.');
+        } else {
+          sendClientError(err);
         }
         sessionStorage.removeItem('access_token');
         localStorage.removeItem('refresh_token');