컨플릭트 해결

.github/workflows/reviewer.json

@@ -21,8 +21,8 @@
       "team" : "business"
     },
     {
-      "name": "김하나",
-      "githubName": "hanagertrudeKim",
+      "name": "윤해진",
+      "githubName": "haejinyun",
       "team" : "user"
     },
     {
@@ -51,4 +51,4 @@
       "team" : "campus"
     }
   ]
-}
+}

.gitignore

@@ -37,6 +37,7 @@ lerna-debug.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.prettierrc
 
 npm-debug.log*
 yarn-debug.log*

.yarnrc.yml

@@ -1 +1,2 @@
 yarnPath: .yarn/releases/yarn-3.8.0.cjs
+nodeLinker: pnp

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/component/common/ErrorMessage/ErrorMessage.module.scss

@@ -0,0 +1,12 @@
+.warn {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 3px;
+
+  &--phrase {
+    display: block;
+    color: #f05d3d;
+    font-size: 11px;
+  }
+}

src/component/common/ErrorMessage/index.tsx

@@ -0,0 +1,21 @@
+import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
+import styles from './ErrorMessage.module.scss';
+
+interface ErrorMessageProps {
+  message: string | (string | undefined | null)[]
+}
+
+export default function ErrorMessage({ message }: ErrorMessageProps) {
+  if (message.length > 0) {
+    return (
+      <div className={styles.warn}>
+        <Warn />
+        <span className={styles['warn--phrase']}>
+          {typeof message === 'string' ? message : message[0]}
+        </span>
+      </div>
+    );
+  }
+
+  return null;
+}

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/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/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/AddMenu/components/MenuName/index.tsx

@@ -13,17 +13,16 @@ export default function MenuName({ isComplete }: MenuNameProps) {
   const { name, setName } = useAddMenuStore();
   const { menuError } = useErrorMessageStore();
 
-  const handleNameChange = (e : React.ChangeEvent<HTMLInputElement>) => {
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
     setName(e.target.value);
   };
 
   return (
     <div>
       {isMobile ? (
         <div className={styles.mobile__container}>
-          <div className={styles.mobile__caption}>
-            메뉴명
-          </div>
+          <div className={styles.mobile__caption}>메뉴명</div>
           {isComplete ? (
             <span className={styles['mobile__name-text']}>{name}</span>
           ) : (
@@ -33,17 +32,17 @@ export default function MenuName({ isComplete }: MenuNameProps) {
                 [styles['mobile__name-input--error']]: menuError,
               })}
               placeholder="예) 불족발 + 막국수 저녁 SET"
-              onChange={handleNameChange}
+              onChange={(e) => handleNameChange(e)}
               value={name}
             />
           )}
-          {menuError && <span className={styles['error-message']}>{menuError}</span>}
+          {menuError && (
+            <span className={styles['error-message']}>{menuError}</span>
+          )}
         </div>
       ) : (
         <div className={styles.container}>
-          <div className={styles.caption}>
-            메뉴명
-          </div>
+          <div className={styles.caption}>메뉴명</div>
           {isComplete ? (
             <span className={styles['name-text']}>{name}</span>
           ) : (
@@ -53,11 +52,13 @@ export default function MenuName({ isComplete }: MenuNameProps) {
                 [styles['name-input--error']]: menuError,
               })}
               placeholder="예) 불족발 + 막국수 저녁 SET"
-              onChange={handleNameChange}
+              onChange={(e) => handleNameChange(e)}
               value={name}
             />
           )}
-          {menuError && <span className={styles['error-message']}>{menuError}</span>}
+          {menuError && (
+            <span className={styles['error-message']}>{menuError}</span>
+          )}
         </div>
       )}
     </div>