[가게 생성] 가게 생성/수정 리팩토링

src/component/common/Auth/ProgressBar/index.tsx → src/component/Auth/ProgressBar/index.tsx

@@ -3,17 +3,17 @@ import styles from './ProgressBar.module.scss';
 interface ProgressBarProps {
   step: number;
   total: number;
-  progressTitle: { step: number; title: string }[];
+  progressTitle: string;
 }
 
 export default function ProgressBar({ step, total, progressTitle }: ProgressBarProps) {
   return (
     <div className={styles.progress}>
       <div className={styles.progress__title}>
-        <span>{`${progressTitle[step].step}. ${progressTitle[step].title}`}</span>
-        <span>{`${progressTitle[step].step} / ${total}`}</span>
+        <span>{`${step}. ${progressTitle}`}</span>
+        <span>{`${step} / ${total}`}</span>
       </div>
-      <progress className={styles.progress__bar} value={step + 1} max={total} />
+      <progress className={styles.progress__bar} value={step} max={total} />
     </div>
   );
 }

src/page/AddMenu/components/AddMenuImgModal/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { ReactComponent as CancelIcon } from 'assets/svg/addmenu/mobile-cancle-icon.svg';
 import useAddMenuStore from 'store/addMenu';
-import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
 import { UploadError } from 'utils/hooks/useImagesUpload';
 import styles from './AddMenuImgModal.module.scss';

src/page/AddMenu/components/MenuImage/index.tsx

@@ -5,7 +5,7 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import AddMenuImgModal from 'page/AddMenu/components/AddMenuImgModal';
 import useAddMenuStore from 'store/addMenu';
-import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
 import useImagesUpload from 'utils/hooks/useImagesUpload';
 import styles from './MenuImage.module.scss';

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

@@ -3,7 +3,7 @@ import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import useValidateEmail from 'page/Auth/Signup/hooks/useValidateEmail';
 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 ErrorMessage from 'component/common/ErrorMessage';
 import useRegisterInfo from 'store/registerStore';
 import useTimer from 'page/Auth/Signup/hooks/useTimer';
 import { useEffect } from 'react';

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

@@ -2,7 +2,7 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import useValidateEmail from 'page/Auth/Signup/hooks/useValidateEmail';
 import useCheckEmailDuplicate from 'page/Auth/Signup/hooks/useCheckEmailDuplicate';
-import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import styles from './UserId.module.scss';
 
 export default function UserId() {

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

@@ -6,7 +6,7 @@ import usePasswordConfirm from 'page/Auth/Signup/hooks/usePasswordConfirm';
 import { User } from 'page/Auth/Signup/types/User';
 
 import { SubmitHandler } from 'react-hook-form';
-import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import useRegisterInfo from 'store/registerStore';
 import styles from './UserPassword.module.scss';
 

src/page/Auth/Signup/index.tsx

@@ -3,7 +3,7 @@ import { ReactComponent as Logo } from 'assets/svg/auth/koin-logo.svg';
 import { ReactComponent as Back } from 'assets/svg/common/back-arrow.svg';
 import { Link } from 'react-router-dom';
 import ProgressBar from 'component/common/ProgressBar';
-import PreviousStep from 'component/common/Auth/PreviousStep';
+import PreviousStep from 'component/Auth/PreviousStep';
 import { useRef } from 'react';
 import OwnerData from './view/OwnerDataPage';
 import TermsOfService from './view/TermsOfServicePage';

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

@@ -6,7 +6,7 @@ import SearchShop from 'page/ShopRegistration/component/Modal/SearchShop';
 import { ReactComponent as FileImage } from 'assets/svg/auth/default-file.svg';
 import CustomModal from 'component/common/CustomModal';
 import useCheckOwnerData from 'page/Auth/Signup/hooks/useOwnerData';
-import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import useFileController from 'page/Auth/Signup/hooks/useFileController';
 import useCheckNext from 'page/Auth/Signup/hooks/useCheckNext';
 import { useEffect } from 'react';

src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss

@@ -138,6 +138,10 @@
     margin-bottom: 24px;
   }
 
+  &__error-message {
+    margin-bottom: 5px;
+  }
+
   &__header {
     font-size: 18px;
     color: #17518e;
@@ -316,7 +320,15 @@
 
   &__label {
     display: flex;
-    margin-bottom: 16px;
+    margin-bottom: 24px;
+
+    &--error {
+      margin-bottom: 0;
+    }
+  }
+
+  &__error-message {
+    margin-bottom: 5px;
   }
 
   &__header {