From ed17859f535e617573648a9d32468ff9363c1531 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Mon, 27 Nov 2023 16:36:13 +0900
Subject: [PATCH 01/39] =?UTF-8?q?feat:=20=EA=B0=80=EA=B2=A9=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B2=84=ED=8A=BC=20=EB=8F=99=EC=9E=91=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MenuPrice/MenuPrice.module.scss           | 83 ++++++++++++-------
 .../AddMenu/components/MenuPrice/index.tsx    | 79 +++++++++++++-----
 2 files changed, 113 insertions(+), 49 deletions(-)

diff --git a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
index 0e5e1e44..63f4c578 100644
--- a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
+++ b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
@@ -44,17 +44,18 @@
   &__price-info-input-box {
     margin-top: 10px;
     display: flex;
+    justify-content: space-between;
     align-items: center;
     gap: 4px;
   }
 
   &__price-info-inputs {
     display: flex;
+    width: 100%;
     align-items: center;
     gap: 8px;
-    width: 100%;
 
-    input {
+    &__size-input {
       width: 100%;
       height: 35px;
       border: 0.5px solid #898a8d;
@@ -67,21 +68,33 @@
         font-weight: 400;
       }
     }
-  }
 
-  &__price-input-box {
-    position: relative;
-    width: 100%;
+    &__price-input-box {
+      position: relative;
+      width: 100%;
+    }
+
+    &__price-input {
+      width: 100%;
+      height: 35px;
+      border: 0.5px solid #898a8d;
+      padding: 8px;
+      box-sizing: border-box;
+    }
+
+    &__price-input-won {
+      box-sizing: border-box;
+      position: absolute;
+      right: 8px;
+      top: 32%;
+      color: #a1a1a1;
+      font-size: 13px;
+      font-weight: 400;
+    }
   }
 
-  &__price-input-won {
-    box-sizing: border-box;
-    position: absolute;
-    right: 8px;
-    top: 32%;
-    color: #a1a1a1;
-    font-size: 13px;
-    font-weight: 400;
+  &__cancle-button {
+    background-color: white;
   }
 
   &__cancle-icon {
@@ -99,6 +112,7 @@
     align-items: center;
     margin-top: 16px;
     gap: 8px;
+    background-color: white;
 
     &__icon {
       width: 12px;
@@ -161,13 +175,19 @@
   }
 }
 
-.price-info-inputs {
+.price-info-input-box {
   margin-top: 24px;
   display: flex;
   gap: 16px;
   align-items: center;
+}
 
-  .size-input {
+.price-info-inputs {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+
+  &__size-input {
     box-sizing: border-box;
     width: 335px;
     height: 62px;
@@ -184,16 +204,16 @@
       font-weight: 400;
     }
   }
-}
 
-.prcie-input-box {
-  position: relative;
-  box-sizing: border-box;
-  width: 335px;
-  height: 62px;
-  border: 0.5px solid #858585;
+  &__price-input-box {
+    position: relative;
+    box-sizing: border-box;
+    width: 335px;
+    height: 62px;
+    border: 0.5px solid #858585;
+  }
 
-  .price-input {
+  &__price-input {
     text-align: right;
     box-sizing: border-box;
     width: 303px;
@@ -206,7 +226,7 @@
     outline: none;
   }
 
-  .price-input-won {
+  &__price-input-won {
     position: absolute;
     top: 32%;
     right: 10px;
@@ -216,12 +236,18 @@
   }
 }
 
-.cancle-icon {
+.cancle-button {
   width: 24px;
   height: 24px;
+  background-color: white;
 
-  &:hover {
-    cursor: pointer;
+  &__icon {
+    width: 24px;
+    height: 24px;
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 }
 
@@ -232,6 +258,7 @@
   gap: 8px;
   height: 28px;
   width: 107px;
+  background-color: white;
 
   &__icon {
     width: 24px;
diff --git a/src/page/AddMenu/components/MenuPrice/index.tsx b/src/page/AddMenu/components/MenuPrice/index.tsx
index d259c577..718e285e 100644
--- a/src/page/AddMenu/components/MenuPrice/index.tsx
+++ b/src/page/AddMenu/components/MenuPrice/index.tsx
@@ -1,12 +1,23 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
+import { useState } from 'react';
 import { ReactComponent as PlusIcon } from 'assets/svg/main/plus.svg';
-import { ReactComponent as CancleIcon } from 'assets/svg/mystore/x-in-circle-cancle.svg';
+import { ReactComponent as DeleteIcon } from 'assets/svg/addmenu/delete-icon.svg';
+import { ReactComponent as MobileDeleteIcon } from 'assets/svg/addmenu/mobile-delete-icon.svg';
 import { ReactComponent as CheckCircleIcon } from 'assets/svg/mystore/check-circle.svg';
 import { ReactComponent as MobilePlusIcon } from 'assets/svg/addmenu/mobile-plus-icon.svg';
 import styles from './MenuPrice.module.scss';
 
 export default function MenuPrice() {
   const { isMobile } = useMediaQuery();
+  const [priceInputs, setPriceInputs] = useState([{ id: 1 }]);
+
+  const addPriceInput = () => {
+    setPriceInputs([...priceInputs, { id: priceInputs.length + 1 }]);
+  };
+  const deletePriceInput = (id : number) => {
+    setPriceInputs(priceInputs.filter((input) => input.id !== id));
+  };
+
   return (
     <div>
       {isMobile ? (
@@ -18,20 +29,32 @@ export default function MenuPrice() {
               <CheckCircleIcon className={styles['mobile__header-condition__icon']} />
             </div>
           </div>
-          <div className={styles['mobile__price-info-input-box']}>
-            <div className={styles['mobile__price-info-inputs']}>
-              <input className={styles['mobile__size-input']} placeholder="예) 소 (1~2 인분)" />
-              <div className={styles['mobile__price-input-box']}>
-                <input className={styles['mobile__price-input']} />
-                <span className={styles['mobile__price-input-won']}>원</span>
+          {priceInputs.map((input) => (
+            <div key={input.id} className={styles['mobile__price-info-input-box']}>
+              <div className={styles['mobile__price-info-inputs']}>
+                <input className={styles['mobile__price-info-inputs__size-input']} placeholder="예) 소 (1~2 인분)" />
+                <div className={styles['mobile__price-info-inputs__price-input-box']}>
+                  <input className={styles['mobile__price-info-inputs__price-input']} />
+                  <p className={styles['mobile__price-info-inputs__price-input-won']}>원</p>
+                </div>
               </div>
+              <button
+                type="button"
+                className={styles['mobile__cancle-button']}
+                onClick={() => deletePriceInput(input.id)}
+              >
+                <MobileDeleteIcon className={styles['mobile__cancle-icon']} />
+              </button>
             </div>
-            <CancleIcon className={styles['mobile__cancle-icon']} />
-          </div>
-          <div className={styles['mobile__add-price-button']}>
+          ))}
+          <button
+            type="button"
+            className={styles['mobile__add-price-button']}
+            onClick={addPriceInput}
+          >
             <MobilePlusIcon className={styles['mobile__add-price-button__icon']} />
-            <div className={styles['mobile__add-price-button__text']}>가격 추가</div>
-          </div>
+            <span className={styles['mobile__add-price-button__text']}>가격 추가</span>
+          </button>
         </div>
       ) : (
         <div className={styles.container}>
@@ -42,18 +65,32 @@ export default function MenuPrice() {
               <CheckCircleIcon className={styles['header__condition-icon']} />
             </div>
           </div>
-          <div className={styles['price-info-inputs']}>
-            <input className={styles['size-input']} placeholder="예) 소 (1~2 인분)" />
-            <div className={styles['prcie-input-box']}>
-              <input className={styles['price-input']} />
-              <span className={styles['price-input-won']}>원</span>
+          {priceInputs.map((input) => (
+            <div key={input.id} className={styles['price-info-input-box']}>
+              <div className={styles['price-info-inputs']}>
+                <input className={styles['price-info-inputs__size-input']} placeholder="예) 소 (1~2 인분)" />
+                <div className={styles['price-info-inputs__price-input-box']}>
+                  <input className={styles['price-info-inputs__price-input']} />
+                  <p className={styles['price-info-inputs__price-input-won']}>원</p>
+                </div>
+              </div>
+              <button
+                type="button"
+                className={styles['cancle-button']}
+                onClick={() => deletePriceInput(input.id)}
+              >
+                <DeleteIcon className={styles['cancle-button__icon']} />
+              </button>
             </div>
-            <CancleIcon className={styles['cancle-icon']} />
-          </div>
-          <div className={styles['add-price-button']}>
+          ))}
+          <button
+            type="button"
+            className={styles['add-price-button']}
+            onClick={addPriceInput}
+          >
             <PlusIcon className={styles['add-price-button__icon']} />
             <div className={styles['add-price-button__text']}>가격 추가</div>
-          </div>
+          </button>
         </div>
       )}
     </div>

From a94185df49d2e16ef3774c2b5fdacaa2b7f5ed04 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Tue, 2 Jan 2024 19:41:43 +0900
Subject: [PATCH 02/39] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../svg/addmenu/mobile-delete-new-image.svg   |   3 +
 .../components/AddMenuImgModal/index.tsx      |  35 +++-
 .../MenuCategory/MenuCategory.module.scss     |  19 ++
 .../AddMenu/components/MenuCategory/index.tsx | 149 +++++++++-----
 .../MenuDetail/MenuDetail.module.scss         |  16 +-
 .../AddMenu/components/MenuDetail/index.tsx   |  34 ++-
 .../MenuImage/MenuImage.module.scss           |  39 +++-
 .../AddMenu/components/MenuImage/index.tsx    |  33 ++-
 .../components/MenuName/MenuName.module.scss  |   7 +-
 .../AddMenu/components/MenuName/index.tsx     |  39 +++-
 .../MenuPrice/MenuPrice.module.scss           |  24 ++-
 .../AddMenu/components/MenuPrice/index.tsx    | 193 ++++++++++++------
 src/page/AddMenu/index.tsx                    | 118 +++++++----
 13 files changed, 545 insertions(+), 164 deletions(-)
 create mode 100644 src/assets/svg/addmenu/mobile-delete-new-image.svg

diff --git a/src/assets/svg/addmenu/mobile-delete-new-image.svg b/src/assets/svg/addmenu/mobile-delete-new-image.svg
new file mode 100644
index 00000000..f9943cc1
--- /dev/null
+++ b/src/assets/svg/addmenu/mobile-delete-new-image.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.91194 5.6188L8.05815 8.76501L8.76526 8.0579L5.61905 4.9117L9.17712 1.35363L8.47001 0.646522L4.91194 4.20459L0.941726 0.234375L0.234619 0.941482L4.20483 4.9117L0.646479 8.47005L1.35359 9.17716L4.91194 5.6188Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
index 6ead02a9..e858c6b1 100644
--- a/src/page/AddMenu/components/AddMenuImgModal/index.tsx
+++ b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
@@ -1,13 +1,37 @@
+// 필요한 모듈과 컴포넌트 임포트
 import { createPortal } from 'react-dom';
+import { useRef } from 'react';
 import { ReactComponent as CancleIcon } from 'assets/svg/addmenu/mobile-cancle-icon.svg';
 import styles from './AddMenuImgModal.module.scss';
 
 interface AddMenuImgModalProps {
   isOpen: boolean;
   onCancel: (event: React.MouseEvent | React.KeyboardEvent<Element>) => void;
+  onImageSelect: (image: string) => void; // 이미지 선택 콜백 함수
 }
 
-export default function AddMenuImgModal({ isOpen, onCancel }: AddMenuImgModalProps) {
+export default function AddMenuImgModal({ isOpen, onCancel, onImageSelect }: AddMenuImgModalProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null); // 파일 입력을 위한 ref
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { files } = event.target;
+    if (files && files.length > 0) {
+      const file = files[0];
+      const reader = new FileReader();
+
+      reader.onloadend = () => {
+        if (reader.result && typeof reader.result === 'string') {
+          onImageSelect(reader.result);
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const triggerFileInput = () => {
+    fileInputRef.current?.click(); // 파일 입력 트리거
+  };
+
   if (!isOpen) return null;
 
   return createPortal(
@@ -34,10 +58,17 @@ export default function AddMenuImgModal({ isOpen, onCancel }: AddMenuImgModalPro
         <span className={styles['content__main-text']}>이미지 추가</span>
         <span className={styles['content__sub-text']}>메뉴 사진을 추가 할 수 있습니다.</span>
         <div className={styles['content__button-container']}>
+          <input
+            type="file"
+            accept="image/*"
+            style={{ display: 'none' }}
+            onChange={handleFileChange}
+            ref={fileInputRef}
+          />
           <button
             type="button"
             className={styles['content__album-button']}
-            onClick={onCancel}
+            onClick={triggerFileInput}
           >
             사진 앨범
           </button>
diff --git a/src/page/AddMenu/components/MenuCategory/MenuCategory.module.scss b/src/page/AddMenu/components/MenuCategory/MenuCategory.module.scss
index 4ea0cd3a..05f8e14b 100644
--- a/src/page/AddMenu/components/MenuCategory/MenuCategory.module.scss
+++ b/src/page/AddMenu/components/MenuCategory/MenuCategory.module.scss
@@ -63,6 +63,18 @@ $button-text-color: #252525;
   }
 }
 
+.category-text-container {
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.category-text {
+  font-size: 20px;
+  font-weight: 500;
+}
+
 .mobile {
   &__container {
     width: 100%;
@@ -120,4 +132,11 @@ $button-text-color: #252525;
       cursor: pointer;
     }
   }
+
+  &__category-text-container {
+    margin-top: 12px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
 }
diff --git a/src/page/AddMenu/components/MenuCategory/index.tsx b/src/page/AddMenu/components/MenuCategory/index.tsx
index 879cc48b..64252899 100644
--- a/src/page/AddMenu/components/MenuCategory/index.tsx
+++ b/src/page/AddMenu/components/MenuCategory/index.tsx
@@ -8,8 +8,11 @@ interface MenuCategory {
   id: number;
   name: string;
 }
+interface MenuCategoryProps {
+  isComplete: boolean;
+}
 
-export default function MenuCategory() {
+export default function MenuCategory({ isComplete }:MenuCategoryProps) {
   const { isMobile } = useMediaQuery();
   const [menuCategories/* , setMenuCategories */] = useState<MenuCategory[]>([
     { id: 1, name: '이벤트 메뉴' },
@@ -31,61 +34,109 @@ export default function MenuCategory() {
     <div>
       {isMobile ? (
         <div className={styles.mobile__container}>
-          <div className={styles['mobile__category-header']}>
-            <div className={styles['mobile__caption-container']}>
-              <div className={styles['mobile__category-header__caption']}>
-                메뉴 카테고리
+          {isComplete ? (
+            <>
+              <div className={styles['mobile__category-header']}>
+                <div className={styles['mobile__caption-container']}>
+                  <div className={styles['mobile__category-header__caption']}>
+                    메뉴 카테고리
+                  </div>
+                </div>
+              </div>
+              <div className={styles['mobile__category-text-container']}>
+                {selectedCategories.map((category, index) => (
+                  <React.Fragment key={category.id}>
+                    <div className={styles['mobile__category-text']}>
+                      {category.name}
+                    </div>
+                    {index < selectedCategories.length - 1 && <span>/</span>}
+                  </React.Fragment>
+                ))}
+              </div>
+            </>
+          ) : (
+            <>
+              <div className={styles['mobile__category-header']}>
+                <div className={styles['mobile__caption-container']}>
+                  <div className={styles['mobile__category-header__caption']}>
+                    메뉴 카테고리
+                  </div>
+                  <div className={styles['mobile__category-header__condition']}>
+                    (최대 선택 n개)
+                  </div>
+                </div>
+                <GearIcon className={styles['mobile__category-header__icon']} />
               </div>
-              <div className={styles['mobile__category-header__condition']}>
-                (최대 선택 n개)
+              <div className={styles['mobile__category-button-container']}>
+                {menuCategories.map((category) => (
+                  <button
+                    key={category.id}
+                    className={cn({
+                      [styles['mobile__category-button']]: true,
+                      [styles['mobile__category-button--selected']]: selectedCategories.some((c) => c.id === category.id),
+                    })}
+                    type="button"
+                    onClick={() => appendSelectCategory(category)}
+                  >
+                    {category.name}
+                  </button>
+                ))}
               </div>
-            </div>
-            <GearIcon className={styles['mobile__category-header__icon']} />
-          </div>
-          <div className={styles['mobile__category-button-container']}>
-            {menuCategories.map((category) => (
-              <button
-                key={category.id}
-                className={cn({
-                  [styles['mobile__category-button']]: true,
-                  [styles['mobile__category-button--selected']]: selectedCategories.some((c) => c.id === category.id),
-                })}
-                type="button"
-                onClick={() => appendSelectCategory(category)}
-              >
-                {category.name}
-              </button>
-            ))}
-          </div>
+            </>
+          )}
         </div>
       ) : (
         <div className={styles.container}>
-          <div className={styles['category-header']}>
-            <div className={styles['caption-container']}>
-              <div className={styles['category-header__caption']}>
-                메뉴 카테고리
+          {isComplete ? (
+            <>
+              <div className={styles['category-header']}>
+                <div className={styles['caption-container']}>
+                  <div className={styles['category-header__caption']}>
+                    메뉴 카테고리
+                  </div>
+                </div>
+              </div>
+              <div className={styles['category-text-container']}>
+                {selectedCategories.map((category, index) => (
+                  <React.Fragment key={category.id}>
+                    <div className={styles['category-text']}>
+                      {category.name}
+                    </div>
+                    {index < selectedCategories.length - 1 && <span>/</span>}
+                  </React.Fragment>
+                ))}
+              </div>
+            </>
+          ) : (
+            <>
+              <div className={styles['category-header']}>
+                <div className={styles['caption-container']}>
+                  <div className={styles['category-header__caption']}>
+                    메뉴 카테고리
+                  </div>
+                  <div className={styles['category-header__condition']}>
+                    (최대 선택 n개)
+                  </div>
+                </div>
+                <GearIcon className={styles['category-header__icon']} />
               </div>
-              <div className={styles['category-header__condition']}>
-                (최대 선택 n개)
+              <div className={styles['category-button-container']}>
+                {menuCategories.map((category) => (
+                  <button
+                    key={category.id}
+                    className={cn({
+                      [styles['category-button']]: true,
+                      [styles['category-button--selected']]: selectedCategories.some((c) => c.id === category.id),
+                    })}
+                    type="button"
+                    onClick={() => appendSelectCategory(category)}
+                  >
+                    {category.name}
+                  </button>
+                ))}
               </div>
-            </div>
-            <GearIcon className={styles['category-header__icon']} />
-          </div>
-          <div className={styles['category-button-container']}>
-            {menuCategories.map((category) => (
-              <button
-                key={category.id}
-                className={cn({
-                  [styles['category-button']]: true,
-                  [styles['category-button--selected']]: selectedCategories.some((c) => c.id === category.id),
-                })}
-                type="button"
-                onClick={() => appendSelectCategory(category)}
-              >
-                {category.name}
-              </button>
-            ))}
-          </div>
+            </>
+          )}
         </div>
       )}
     </div>
diff --git a/src/page/AddMenu/components/MenuDetail/MenuDetail.module.scss b/src/page/AddMenu/components/MenuDetail/MenuDetail.module.scss
index 25842ddd..35659304 100644
--- a/src/page/AddMenu/components/MenuDetail/MenuDetail.module.scss
+++ b/src/page/AddMenu/components/MenuDetail/MenuDetail.module.scss
@@ -17,14 +17,19 @@
   height: 153px;
   flex-shrink: 0;
   padding: 16px;
-  border: 0.5px solid var(--stroke, #858585);
-  color: var(--text-color, #252525);
+  border: 0.5px solid #858585;
+  color: #252525;
   font-size: 20px;
   font-weight: 500;
   resize: none;
 
+  &--complete {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
   &::placeholder {
-    color: var(--stroke, #858585);
+    color: #858585;
     font-size: 20px;
     font-weight: 400;
   }
@@ -52,6 +57,11 @@
     resize: none;
     box-sizing: border-box;
 
+    &--complete {
+      font-size: 15px;
+      font-weight: 400;
+    }
+
     &::placeholder {
       color: #a1a1a1;
       font-size: 13px;
diff --git a/src/page/AddMenu/components/MenuDetail/index.tsx b/src/page/AddMenu/components/MenuDetail/index.tsx
index ccf778ee..d3d578ad 100644
--- a/src/page/AddMenu/components/MenuDetail/index.tsx
+++ b/src/page/AddMenu/components/MenuDetail/index.tsx
@@ -1,21 +1,45 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
-
+import { useState } from 'react';
 import styles from './MenuDetail.module.scss';
 
-export default function MenuDetail() {
+interface MenuCategoryProps {
+  isComplete:boolean;
+}
+export default function MenuDetail({ isComplete }:MenuCategoryProps) {
   const { isMobile } = useMediaQuery();
-
+  const [detail, setDetail] = useState('');
+  const handleDetailChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setDetail(e.target.value);
+  };
   return (
     <div>
       {isMobile ? (
         <div className={styles.mobile__container}>
           <div className={styles.mobile__caption}>메뉴구성</div>
-          <textarea className={styles['mobile__menu-detail-input']} placeholder=" 예) 불족발(소,중,대) + 막국수 + 랜덤 서비스 음료(500ml)" />
+          {isComplete ? (
+            <div className={styles['mobile__menu-detail-input--complete']}>{detail}</div>
+          ) : (
+            <textarea
+              className={styles['mobile__menu-detail-input']}
+              placeholder=" 예) 불족발(소,중,대) + 막국수 + 랜덤 서비스 음료(500ml)"
+              onChange={handleDetailChange}
+              value={detail}
+            />
+          )}
         </div>
       ) : (
         <div className={styles.container}>
           <div className={styles.caption}>메뉴구성</div>
-          <textarea className={styles['menu-detail-input']} placeholder=" 예) 불족발(소,중,대) + 막국수 + 랜덤 서비스 음료(500ml)" />
+          {isComplete ? (
+            <div className={styles['menu-detail-input--complete']}>{detail}</div>
+          ) : (
+            <textarea
+              className={styles['menu-detail-input']}
+              placeholder=" 예) 불족발(소,중,대) + 막국수 + 랜덤 서비스 음료(500ml)"
+              onChange={handleDetailChange}
+              value={detail}
+            />
+          )}
         </div>
       )}
     </div>
diff --git a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
index 7546999b..83f52e24 100644
--- a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
+++ b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
@@ -86,9 +86,19 @@
 
   &__new-image {
     display: flex;
+    align-items: center;
 
-    &__add-btn {
+    &__container {
+      display: flex;
+      overflow-x: auto;
       margin-top: 16px;
+      gap: 16px;
+      white-space: nowrap;
+      align-items: center;
+      height: 155px;
+    }
+
+    &__add-btn {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -115,5 +125,32 @@
       font-size: 13px;
       font-weight: 400;
     }
+
+    &__item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      width: 137px;
+      height: 137px;
+    }
+
+    &__selected-image {
+      width: 137px;
+      height: 137px;
+    }
+  }
+
+  &__delete-img-button {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f7941e;
+    width: 16.765px;
+    height: 16.765px;
+    border-radius: 50%;
   }
 }
diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx
index 4974e839..614378b3 100644
--- a/src/page/AddMenu/components/MenuImage/index.tsx
+++ b/src/page/AddMenu/components/MenuImage/index.tsx
@@ -1,17 +1,32 @@
 import { ReactComponent as ImgPlusIcon } from 'assets/svg/mystore/imgplus.svg';
+import { ReactComponent as MobileDeleteImgIcon } from 'assets/svg/addmenu/mobile-delete-new-image.svg'; // Ensure correct import
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import useBooleanState from 'utils/hooks/useBooleanState';
-
+import { useState } from 'react';
 import AddMenuImgModal from 'page/AddMenu/components/AddMenuImgModal';
 import styles from './MenuImage.module.scss';
 
 export default function MenuImage() {
   const { isMobile } = useMediaQuery();
+  const [selectedImages, setSelectedImages] = useState<string[]>([]);
+  const [ableselecrteImage, setableselecrteImage] = useState(true);
   const {
     value: isAddMenuImgModal,
     setTrue: openAddMenuImgModal,
     setFalse: closeAddMenuImgModal,
   } = useBooleanState(false);
+  const handleDeleteImage = (image: string) => {
+    setSelectedImages((prevImages) => prevImages.filter((img) => img !== image));
+  };
+  const handleImageSelect = (imageData: string) => {
+    if (selectedImages.length < 3) {
+      setSelectedImages((prevImages: string[]) => [...prevImages, imageData]);
+    } else {
+      setableselecrteImage(false);
+    }
+    closeAddMenuImgModal();
+  };
+
   return (
     <div>
       {isMobile ? (
@@ -25,6 +40,7 @@ export default function MenuImage() {
             </div>
           </div>
           <div className={styles['mobile__new-image__container']}>
+            {ableselecrteImage && (
             <button
               type="button"
               className={styles['mobile__new-image__add-btn']}
@@ -33,10 +49,25 @@ export default function MenuImage() {
               <ImgPlusIcon className={styles['mobile__new-image__plusIcon']} />
               <div className={styles['mobile__new-image__add-caption']}>이미지 추가</div>
             </button>
+            )}
+            {selectedImages.map((image, index) => (
+              <div key={image} className={styles['mobile__new-image__item']}>
+                <img src={image} alt={`Selected ${index + 1}`} className={styles['mobile__new-image__selected-image']} />
+                <button
+                  type="button"
+                  onClick={() => handleDeleteImage(image)}
+                  className={styles['mobile__delete-img-button']}
+                  aria-label="Delete image"
+                >
+                  <MobileDeleteImgIcon className={styles['mobile__delete-img-button__icon']} />
+                </button>
+              </div>
+            ))}
           </div>
           <AddMenuImgModal
             isOpen={isAddMenuImgModal}
             onCancel={closeAddMenuImgModal}
+            onImageSelect={handleImageSelect}
           />
         </div>
       ) : (
diff --git a/src/page/AddMenu/components/MenuName/MenuName.module.scss b/src/page/AddMenu/components/MenuName/MenuName.module.scss
index a82f0c9a..75b2e82e 100644
--- a/src/page/AddMenu/components/MenuName/MenuName.module.scss
+++ b/src/page/AddMenu/components/MenuName/MenuName.module.scss
@@ -56,7 +56,7 @@
   width: 100%;
   border: 0.5px solid #858585;
   outline: none;
-  color: #a1a1a1;
+  color: #252525;
   font-size: 20px;
   font-weight: 500;
   padding-left: 16px;
@@ -67,3 +67,8 @@
     font-weight: 400;
   }
 }
+
+.name-text {
+  font-size: 20px;
+  font-weight: 500;
+}
diff --git a/src/page/AddMenu/components/MenuName/index.tsx b/src/page/AddMenu/components/MenuName/index.tsx
index a5c94e17..c260c73c 100644
--- a/src/page/AddMenu/components/MenuName/index.tsx
+++ b/src/page/AddMenu/components/MenuName/index.tsx
@@ -1,8 +1,17 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
+import { useState } from 'react';
 import styles from './MenuName.module.scss';
 
-export default function MenuName() {
+interface MenuNameProps {
+  isComplete: boolean;
+}
+
+export default function MenuName({ isComplete }: MenuNameProps) {
   const { isMobile } = useMediaQuery();
+  const [name, setName] = useState('');
+  const handleNameChange = (e : React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+  };
   return (
     <div>
       {isMobile ? (
@@ -10,20 +19,32 @@ export default function MenuName() {
           <div className={styles.mobile__caption}>
             메뉴명
           </div>
-          <input
-            className={styles.mobile__nameInput}
-            placeholder="예) 불족발 + 막국수 저녁 SET"
-          />
+          {isComplete ? (
+            <span className={styles['mobile__name-text']}>{name}</span>
+          ) : (
+            <input
+              className={styles.mobile__nameInput}
+              placeholder="예) 불족발 + 막국수 저녁 SET"
+              onChange={handleNameChange}
+              value={name}
+            />
+          )}
         </div>
       ) : (
         <div className={styles.container}>
           <div className={styles.caption}>
             메뉴명
           </div>
-          <input
-            className={styles.nameInput}
-            placeholder="예) 불족발 + 막국수 저녁 SET"
-          />
+          {isComplete ? (
+            <span className={styles['name-text']}>{name}</span>
+          ) : (
+            <input
+              className={styles.nameInput}
+              placeholder="예) 불족발 + 막국수 저녁 SET"
+              onChange={handleNameChange}
+              value={name}
+            />
+          )}
         </div>
       )}
     </div>
diff --git a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
index 63f4c578..9710ebea 100644
--- a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
+++ b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
@@ -16,6 +16,13 @@
     color: #175c8e;
     font-size: 15px;
     font-weight: 500;
+
+    &--complete {
+      color: #175c8e;
+      font-size: 15px;
+      font-weight: 500;
+      margin-bottom: 12px;
+    }
   }
 
   &__header-condition {
@@ -109,7 +116,6 @@
 
   &__add-price-button {
     display: flex;
-    align-items: center;
     margin-top: 16px;
     gap: 8px;
     background-color: white;
@@ -129,6 +135,14 @@
       cursor: pointer;
     }
   }
+
+  &__price-info-text {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 15px;
+    font-weight: 500;
+  }
 }
 
 .container {
@@ -277,3 +291,11 @@
     cursor: pointer;
   }
 }
+
+.price-info-text {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 20px;
+  font-weight: 500;
+}
diff --git a/src/page/AddMenu/components/MenuPrice/index.tsx b/src/page/AddMenu/components/MenuPrice/index.tsx
index 718e285e..ed58e731 100644
--- a/src/page/AddMenu/components/MenuPrice/index.tsx
+++ b/src/page/AddMenu/components/MenuPrice/index.tsx
@@ -7,12 +7,21 @@ import { ReactComponent as CheckCircleIcon } from 'assets/svg/mystore/check-circ
 import { ReactComponent as MobilePlusIcon } from 'assets/svg/addmenu/mobile-plus-icon.svg';
 import styles from './MenuPrice.module.scss';
 
-export default function MenuPrice() {
+interface MenuPriceProps {
+  isComplete : boolean;
+}
+
+export default function MenuPrice({ isComplete }:MenuPriceProps) {
   const { isMobile } = useMediaQuery();
-  const [priceInputs, setPriceInputs] = useState([{ id: 1 }]);
+  const [priceInputs, setPriceInputs] = useState([{ id: 1, size: '', price: '' }]);
 
+  const updatePriceInput = (id: number, field: string, newValue: string) => {
+    setPriceInputs(
+      priceInputs.map((input) => (input.id === id ? { ...input, [field]: newValue } : input)),
+    );
+  };
   const addPriceInput = () => {
-    setPriceInputs([...priceInputs, { id: priceInputs.length + 1 }]);
+    setPriceInputs([...priceInputs, { id: priceInputs.length + 1, size: '', price: '' }]);
   };
   const deletePriceInput = (id : number) => {
     setPriceInputs(priceInputs.filter((input) => input.id !== id));
@@ -22,75 +31,145 @@ export default function MenuPrice() {
     <div>
       {isMobile ? (
         <div className={styles.mobile__container}>
-          <div className={styles.mobile__header}>
-            <div className={styles['mobile__header-title']}>가격</div>
-            <div className={styles['mobile__header-condition']}>
-              <div className={styles['mobile__header-condition__text']}>단일메뉴</div>
-              <CheckCircleIcon className={styles['mobile__header-condition__icon']} />
-            </div>
-          </div>
-          {priceInputs.map((input) => (
-            <div key={input.id} className={styles['mobile__price-info-input-box']}>
-              <div className={styles['mobile__price-info-inputs']}>
-                <input className={styles['mobile__price-info-inputs__size-input']} placeholder="예) 소 (1~2 인분)" />
-                <div className={styles['mobile__price-info-inputs__price-input-box']}>
-                  <input className={styles['mobile__price-info-inputs__price-input']} />
-                  <p className={styles['mobile__price-info-inputs__price-input-won']}>원</p>
+          {isComplete ? (
+            <>
+              <div className={styles.mobile__header}>
+                <div className={styles['mobile__header-title--complete']}>가격</div>
+              </div>
+              {priceInputs.map((input) => (
+                <div key={input.id} className={styles['mobile__price-info-text-box']}>
+                  <div className={styles['mobile__price-info-text']}>
+                    <div className={styles['mobile__price-info-text__size']}>
+                      {input.size}
+                    </div>
+                    <div>
+                      /
+                    </div>
+                    <div className={styles['mobile__price-info-text__price']}>
+                      {input.price}
+                      원
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </>
+          ) : (
+            <>
+              <div className={styles.mobile__header}>
+                <div className={styles['mobile__header-title']}>가격</div>
+                <div className={styles['mobile__header-condition']}>
+                  <div className={styles['mobile__header-condition__text']}>단일메뉴</div>
+                  <CheckCircleIcon className={styles['mobile__header-condition__icon']} />
                 </div>
               </div>
+              {priceInputs.map((input) => (
+                <div key={input.id} className={styles['mobile__price-info-input-box']}>
+                  <div className={styles['mobile__price-info-inputs']}>
+                    <input
+                      className={styles['mobile__price-info-inputs__size-input']}
+                      placeholder="예) 소 (1~2 인분)"
+                      value={input.size}
+                      onChange={(e) => updatePriceInput(input.id, 'size', e.target.value)}
+                    />
+                    <div className={styles['mobile__price-info-inputs__price-input-box']}>
+                      <input
+                        className={styles['mobile__price-info-inputs__price-input']}
+                        value={input.price}
+                        onChange={(e) => updatePriceInput(input.id, 'price', e.target.value)}
+                      />
+                      <p className={styles['mobile__price-info-inputs__price-input-won']}>원</p>
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    className={styles['mobile__cancle-button']}
+                    onClick={() => deletePriceInput(input.id)}
+                  >
+                    <MobileDeleteIcon className={styles['mobile__cancle-icon']} />
+                  </button>
+                </div>
+              ))}
               <button
                 type="button"
-                className={styles['mobile__cancle-button']}
-                onClick={() => deletePriceInput(input.id)}
+                className={styles['mobile__add-price-button']}
+                onClick={addPriceInput}
               >
-                <MobileDeleteIcon className={styles['mobile__cancle-icon']} />
+                <MobilePlusIcon className={styles['mobile__add-price-button__icon']} />
+                <span className={styles['mobile__add-price-button__text']}>가격 추가</span>
               </button>
-            </div>
-          ))}
-          <button
-            type="button"
-            className={styles['mobile__add-price-button']}
-            onClick={addPriceInput}
-          >
-            <MobilePlusIcon className={styles['mobile__add-price-button__icon']} />
-            <span className={styles['mobile__add-price-button__text']}>가격 추가</span>
-          </button>
+            </>
+          )}
         </div>
       ) : (
         <div className={styles.container}>
-          <div className={styles.header}>
-            <div className={styles.header__title}>가격</div>
-            <div className={styles.header__condition}>
-              <div className={styles['header__condition-text']}>단일메뉴</div>
-              <CheckCircleIcon className={styles['header__condition-icon']} />
-            </div>
-          </div>
-          {priceInputs.map((input) => (
-            <div key={input.id} className={styles['price-info-input-box']}>
-              <div className={styles['price-info-inputs']}>
-                <input className={styles['price-info-inputs__size-input']} placeholder="예) 소 (1~2 인분)" />
-                <div className={styles['price-info-inputs__price-input-box']}>
-                  <input className={styles['price-info-inputs__price-input']} />
-                  <p className={styles['price-info-inputs__price-input-won']}>원</p>
+          {isComplete ? (
+            <>
+              <div className={styles.header}>
+                <div className={styles.header__title}>가격</div>
+              </div>
+              {priceInputs.map((input) => (
+                <div key={input.id} className={styles['price-info-text-box']}>
+                  <div className={styles['price-info-text']}>
+                    <div className={styles['price-info-text__size']}>
+                      {input.size}
+                    </div>
+                    <div>
+                      /
+                    </div>
+                    <div className={styles['price-info-text__price']}>
+                      {input.price}
+                      원
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </>
+          ) : (
+            <>
+              <div className={styles.header}>
+                <div className={styles.header__title}>가격</div>
+                <div className={styles.header__condition}>
+                  <div className={styles['header__condition-text']}>단일메뉴</div>
+                  <CheckCircleIcon className={styles['header__condition-icon']} />
                 </div>
               </div>
+              {priceInputs.map((input) => (
+                <div key={input.id} className={styles['price-info-input-box']}>
+                  <div className={styles['price-info-inputs']}>
+                    <input
+                      className={styles['price-info-inputs__size-input']}
+                      placeholder="예) 소 (1~2 인분)"
+                      value={input.size}
+                      onChange={(e) => updatePriceInput(input.id, 'size', e.target.value)}
+                    />
+                    <div className={styles['price-info-inputs__price-input-box']}>
+                      <input
+                        className={styles['price-info-inputs__price-input']}
+                        value={input.price}
+                        onChange={(e) => updatePriceInput(input.id, 'price', e.target.value)}
+                      />
+                      <p className={styles['price-info-inputs__price-input-won']}>원</p>
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    className={styles['cancle-button']}
+                    onClick={() => deletePriceInput(input.id)}
+                  >
+                    <DeleteIcon className={styles['cancle-button__icon']} />
+                  </button>
+                </div>
+              ))}
               <button
                 type="button"
-                className={styles['cancle-button']}
-                onClick={() => deletePriceInput(input.id)}
+                className={styles['add-price-button']}
+                onClick={addPriceInput}
               >
-                <DeleteIcon className={styles['cancle-button__icon']} />
+                <PlusIcon className={styles['add-price-button__icon']} />
+                <div className={styles['add-price-button__text']}>가격 추가</div>
               </button>
-            </div>
-          ))}
-          <button
-            type="button"
-            className={styles['add-price-button']}
-            onClick={addPriceInput}
-          >
-            <PlusIcon className={styles['add-price-button__icon']} />
-            <div className={styles['add-price-button__text']}>가격 추가</div>
-          </button>
+            </>
+          )}
         </div>
       )}
     </div>
diff --git a/src/page/AddMenu/index.tsx b/src/page/AddMenu/index.tsx
index 09a8096f..89ca47a4 100644
--- a/src/page/AddMenu/index.tsx
+++ b/src/page/AddMenu/index.tsx
@@ -1,5 +1,6 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import useBooleanState from 'utils/hooks/useBooleanState';
+import { useState } from 'react';
 import MenuImage from './components/MenuImage';
 import MenuName from './components/MenuName';
 import styles from './AddMenu.module.scss';
@@ -11,6 +12,10 @@ import MobileDivide from './components/MobileDivide';
 
 export default function AddMenu() {
   const { isMobile } = useMediaQuery();
+  const [isComplete, setIsComplete] = useState<boolean>(false);
+  const toggleConfirmClick = () => {
+    setIsComplete((prevState) => !prevState);
+  };
   const {
     value: isGoMyShopModal,
     setTrue: openGoMyShopModal,
@@ -25,11 +30,11 @@ export default function AddMenu() {
               메뉴 정보
             </div>
             <div className={styles['mobile__menu-content']}>
-              <MenuName />
+              <MenuName isComplete={isComplete} />
               <MobileDivide />
-              <MenuPrice />
+              <MenuPrice isComplete={isComplete} />
               <MobileDivide />
-              <MenuCategory />
+              <MenuCategory isComplete={isComplete} />
             </div>
           </div>
           <div className={styles['mobile__menu-detail']}>
@@ -37,26 +42,47 @@ export default function AddMenu() {
               메뉴 세부
             </div>
             <div className={styles['mobile__menu-content']}>
-              <MenuDetail />
+              <MenuDetail isComplete={isComplete} />
               <MobileDivide />
               <MenuImage />
             </div>
           </div>
           <div className={styles['mobile__button-container']}>
-            <button
-              className={styles['mobile__button-cancel']}
-              type="button"
-              onClick={openGoMyShopModal}
-            >
-              취소
-            </button>
-            <button
-              className={styles['mobile__button-check']}
-              type="button"
-              onClick={openGoMyShopModal}
-            >
-              확인
-            </button>
+            {isComplete ? (
+              <>
+                <button
+                  className={styles['mobile__button-cancel']}
+                  type="button"
+                  onClick={toggleConfirmClick}
+                >
+                  취소
+                </button>
+                <button
+                  className={styles['mobile__button-check']}
+                  type="button"
+                  onClick={openGoMyShopModal}
+                >
+                  확인
+                </button>
+              </>
+            ) : (
+              <>
+                <button
+                  className={styles['mobile__button-cancel']}
+                  type="button"
+                  onClick={openGoMyShopModal}
+                >
+                  취소
+                </button>
+                <button
+                  className={styles['mobile__button-check']}
+                  type="button"
+                  onClick={toggleConfirmClick}
+                >
+                  확인
+                </button>
+              </>
+            )}
           </div>
         </div>
       ) : (
@@ -64,19 +90,41 @@ export default function AddMenu() {
           <div className={styles.header}>
             <h1 className={styles.header__title}>메뉴 추가</h1>
             <div className={styles['header__button-container']}>
-              <button
-                className={styles['header__button-cancel']}
-                type="button"
-              >
-                취소
-              </button>
-              <button
-                className={styles['header__button-check']}
-                type="button"
-                onClick={openGoMyShopModal}
-              >
-                확인
-              </button>
+              {isComplete ? (
+                <>
+                  <button
+                    className={styles['header__button-cancel']}
+                    type="button"
+                    onClick={toggleConfirmClick}
+                  >
+                    취소
+                  </button>
+                  <button
+                    className={styles['header__button-check']}
+                    type="button"
+                    onClick={openGoMyShopModal}
+                  >
+                    확인
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button
+                    className={styles['header__button-cancel']}
+                    type="button"
+                    onClick={openGoMyShopModal}
+                  >
+                    취소
+                  </button>
+                  <button
+                    className={styles['header__button-check']}
+                    type="button"
+                    onClick={toggleConfirmClick}
+                  >
+                    확인
+                  </button>
+                </>
+              )}
             </div>
           </div>
           <div className={styles.content}>
@@ -84,10 +132,10 @@ export default function AddMenu() {
               <MenuImage />
             </div>
             <div className={styles.content__right}>
-              <MenuName />
-              <MenuPrice />
-              <MenuCategory />
-              <MenuDetail />
+              <MenuName isComplete={isComplete} />
+              <MenuPrice isComplete={isComplete} />
+              <MenuCategory isComplete={isComplete} />
+              <MenuDetail isComplete={isComplete} />
             </div>
           </div>
           <GoMyShopModal isOpen={isGoMyShopModal} onCancel={closeGOMyShopModal} />

From 4dccc3b6970bf96c01b8fb04db6679e504d41504 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Wed, 3 Jan 2024 21:23:46 +0900
Subject: [PATCH 03/39] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=ED=99=95=EC=9D=B8=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AddMenuImgModal/index.tsx      |  7 +++---
 .../MenuDetail/MenuDetail.module.scss         |  2 ++
 .../MenuImage/MenuImage.module.scss           |  4 ++++
 .../AddMenu/components/MenuImage/index.tsx    | 24 ++++++++++++-------
 src/page/AddMenu/index.tsx                    |  4 ++--
 5 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
index e858c6b1..227355ef 100644
--- a/src/page/AddMenu/components/AddMenuImgModal/index.tsx
+++ b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
@@ -1,4 +1,3 @@
-// 필요한 모듈과 컴포넌트 임포트
 import { createPortal } from 'react-dom';
 import { useRef } from 'react';
 import { ReactComponent as CancleIcon } from 'assets/svg/addmenu/mobile-cancle-icon.svg';
@@ -7,11 +6,11 @@ import styles from './AddMenuImgModal.module.scss';
 interface AddMenuImgModalProps {
   isOpen: boolean;
   onCancel: (event: React.MouseEvent | React.KeyboardEvent<Element>) => void;
-  onImageSelect: (image: string) => void; // 이미지 선택 콜백 함수
+  onImageSelect: (image: string) => void;
 }
 
 export default function AddMenuImgModal({ isOpen, onCancel, onImageSelect }: AddMenuImgModalProps) {
-  const fileInputRef = useRef<HTMLInputElement>(null); // 파일 입력을 위한 ref
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { files } = event.target;
@@ -29,7 +28,7 @@ export default function AddMenuImgModal({ isOpen, onCancel, onImageSelect }: Add
   };
 
   const triggerFileInput = () => {
-    fileInputRef.current?.click(); // 파일 입력 트리거
+    fileInputRef.current?.click();
   };
 
   if (!isOpen) return null;
diff --git a/src/page/AddMenu/components/MenuDetail/MenuDetail.module.scss b/src/page/AddMenu/components/MenuDetail/MenuDetail.module.scss
index 35659304..69e52618 100644
--- a/src/page/AddMenu/components/MenuDetail/MenuDetail.module.scss
+++ b/src/page/AddMenu/components/MenuDetail/MenuDetail.module.scss
@@ -24,6 +24,7 @@
   resize: none;
 
   &--complete {
+    margin-top: 24px;
     font-size: 20px;
     font-weight: 500;
   }
@@ -58,6 +59,7 @@
     box-sizing: border-box;
 
     &--complete {
+      margin-top: 8px;
       font-size: 15px;
       font-weight: 400;
     }
diff --git a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
index 83f52e24..eb23f34e 100644
--- a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
+++ b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
@@ -152,5 +152,9 @@
     width: 16.765px;
     height: 16.765px;
     border-radius: 50%;
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 }
diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx
index 614378b3..cc41ca26 100644
--- a/src/page/AddMenu/components/MenuImage/index.tsx
+++ b/src/page/AddMenu/components/MenuImage/index.tsx
@@ -6,7 +6,11 @@ import { useState } from 'react';
 import AddMenuImgModal from 'page/AddMenu/components/AddMenuImgModal';
 import styles from './MenuImage.module.scss';
 
-export default function MenuImage() {
+interface MenuImageProps {
+  isComplete:boolean;
+}
+
+export default function MenuImage({ isComplete }:MenuImageProps) {
   const { isMobile } = useMediaQuery();
   const [selectedImages, setSelectedImages] = useState<string[]>([]);
   const [ableselecrteImage, setableselecrteImage] = useState(true);
@@ -53,14 +57,16 @@ export default function MenuImage() {
             {selectedImages.map((image, index) => (
               <div key={image} className={styles['mobile__new-image__item']}>
                 <img src={image} alt={`Selected ${index + 1}`} className={styles['mobile__new-image__selected-image']} />
-                <button
-                  type="button"
-                  onClick={() => handleDeleteImage(image)}
-                  className={styles['mobile__delete-img-button']}
-                  aria-label="Delete image"
-                >
-                  <MobileDeleteImgIcon className={styles['mobile__delete-img-button__icon']} />
-                </button>
+                {isComplete || (
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteImage(image)}
+                    className={styles['mobile__delete-img-button']}
+                    aria-label="Delete image"
+                  >
+                    <MobileDeleteImgIcon className={styles['mobile__delete-img-button__icon']} />
+                  </button>
+                )}
               </div>
             ))}
           </div>
diff --git a/src/page/AddMenu/index.tsx b/src/page/AddMenu/index.tsx
index 89ca47a4..5b83b072 100644
--- a/src/page/AddMenu/index.tsx
+++ b/src/page/AddMenu/index.tsx
@@ -44,7 +44,7 @@ export default function AddMenu() {
             <div className={styles['mobile__menu-content']}>
               <MenuDetail isComplete={isComplete} />
               <MobileDivide />
-              <MenuImage />
+              <MenuImage isComplete={isComplete} />
             </div>
           </div>
           <div className={styles['mobile__button-container']}>
@@ -129,7 +129,7 @@ export default function AddMenu() {
           </div>
           <div className={styles.content}>
             <div className={styles.content__left}>
-              <MenuImage />
+              <MenuImage isComplete={isComplete} />
             </div>
             <div className={styles.content__right}>
               <MenuName isComplete={isComplete} />

From 7bef4570e28df4df59a504c1cb3180aa3f633543 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Fri, 5 Jan 2024 00:11:02 +0900
Subject: [PATCH 04/39] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AddMenuImgModal/index.tsx      | 76 ++++-------------
 .../MenuImage/MenuImage.module.scss           | 40 ++++++++-
 .../AddMenu/components/MenuImage/index.tsx    | 83 +++++++++++--------
 .../MenuPrice/MenuPrice.module.scss           |  4 +
 .../AddMenu/components/MenuPrice/index.tsx    | 24 +++++-
 src/page/AddMenu/hook/useMenuImageUpload.ts   | 20 +++++
 src/store/addMenu.ts                          | 48 +++++++++++
 7 files changed, 196 insertions(+), 99 deletions(-)
 create mode 100644 src/page/AddMenu/hook/useMenuImageUpload.ts
 create mode 100644 src/store/addMenu.ts

diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
index 227355ef..571f1f42 100644
--- a/src/page/AddMenu/components/AddMenuImgModal/index.tsx
+++ b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
@@ -1,83 +1,39 @@
+import React from 'react';
 import { createPortal } from 'react-dom';
-import { useRef } from 'react';
-import { ReactComponent as CancleIcon } from 'assets/svg/addmenu/mobile-cancle-icon.svg';
+import { ReactComponent as CancelIcon } from 'assets/svg/addmenu/mobile-cancle-icon.svg';
+import useMenuImageUpload from 'page/AddMenu/hook/useMenuImageUpload';
 import styles from './AddMenuImgModal.module.scss';
 
 interface AddMenuImgModalProps {
   isOpen: boolean;
   onCancel: (event: React.MouseEvent | React.KeyboardEvent<Element>) => void;
-  onImageSelect: (image: string) => void;
 }
 
-export default function AddMenuImgModal({ isOpen, onCancel, onImageSelect }: AddMenuImgModalProps) {
-  const fileInputRef = useRef<HTMLInputElement>(null);
+export default function AddMenuImgModal({ isOpen, onCancel }: AddMenuImgModalProps) {
+  const { imgRef, saveImgFile } = useMenuImageUpload();
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { files } = event.target;
-    if (files && files.length > 0) {
-      const file = files[0];
-      const reader = new FileReader();
-
-      reader.onloadend = () => {
-        if (reader.result && typeof reader.result === 'string') {
-          onImageSelect(reader.result);
-        }
-      };
-      reader.readAsDataURL(file);
-    }
+  const handleFileChange = () => {
+    saveImgFile();
   };
 
   const triggerFileInput = () => {
-    fileInputRef.current?.click();
+    imgRef.current?.click();
   };
 
   if (!isOpen) return null;
 
   return createPortal(
-    <div
-      className={styles.modal}
-      onClick={onCancel}
-      onKeyDown={onCancel}
-      role="button"
-      tabIndex={0}
-    >
-      <div
-        className={styles.content}
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
-        role="presentation"
-      >
-        <button
-          type="button"
-          className={styles['cancel-button']}
-          onClick={onCancel}
-        >
-          <CancleIcon className={styles.cancelIcon} />
+    <div className={styles.modal} onClick={onCancel} onKeyDown={onCancel} role="button" tabIndex={0}>
+      <div className={styles.content} onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()} role="presentation">
+        <button type="button" className={styles['cancel-button']} onClick={onCancel}>
+          <CancelIcon className={styles.cancelIcon} />
         </button>
         <span className={styles['content__main-text']}>이미지 추가</span>
-        <span className={styles['content__sub-text']}>메뉴 사진을 추가 할 수 있습니다.</span>
+        <span className={styles['content__sub-text']}>메뉴 사진을 추가할 수 있습니다.</span>
         <div className={styles['content__button-container']}>
-          <input
-            type="file"
-            accept="image/*"
-            style={{ display: 'none' }}
-            onChange={handleFileChange}
-            ref={fileInputRef}
-          />
-          <button
-            type="button"
-            className={styles['content__album-button']}
-            onClick={triggerFileInput}
-          >
-            사진 앨범
-          </button>
-          <button
-            type="button"
-            className={styles['content__camera-button']}
-            onClick={onCancel}
-          >
-            카메라 촬영
-          </button>
+          <input type="file" accept="image/*" style={{ display: 'none' }} onChange={handleFileChange} ref={imgRef} />
+          <button type="button" className={styles['content__album-button']} onClick={triggerFileInput}>사진 앨범</button>
+          <button type="button" className={styles['content__camera-button']} onClick={onCancel}>카메라 촬영</button>
         </div>
       </div>
     </div>,
diff --git a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
index eb23f34e..58208b7a 100644
--- a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
+++ b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
@@ -24,15 +24,18 @@
     flex-direction: column;
     align-items: center;
     margin-top: 24px;
+    gap: 32px;
     padding: 40px;
     width: 266px;
     height: 613px;
-    border: 0.5px solid var(--stroke, #858585);
+    border: 0.5px solid #858585;
     background: #fff;
+    overflow-y: auto;
   }
 
   &__add-btn {
     display: flex;
+    flex-shrink: 0;
     flex-direction: column;
     gap: 32px;
     justify-content: center;
@@ -40,6 +43,7 @@
     width: 264px;
     height: 176px;
     border: 1px dashed #858585;
+    background-color: white;
 
     &:hover {
       cursor: pointer;
@@ -52,6 +56,40 @@
     font-size: 20px;
     font-weight: 400;
   }
+
+  &__item {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: 264px;
+    height: 176px;
+  }
+
+  &__selected-image {
+    flex-shrink: 0;
+    width: 100%;
+    width: 264px;
+    height: 176px;
+  }
+
+  &__delete-img-button {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f7941e;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }
 
 .plusIcon {
diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx
index cc41ca26..2847c958 100644
--- a/src/page/AddMenu/components/MenuImage/index.tsx
+++ b/src/page/AddMenu/components/MenuImage/index.tsx
@@ -1,34 +1,32 @@
+import React from 'react';
 import { ReactComponent as ImgPlusIcon } from 'assets/svg/mystore/imgplus.svg';
-import { ReactComponent as MobileDeleteImgIcon } from 'assets/svg/addmenu/mobile-delete-new-image.svg'; // Ensure correct import
+import { ReactComponent as MobileDeleteImgIcon } from 'assets/svg/addmenu/mobile-delete-new-image.svg';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import useBooleanState from 'utils/hooks/useBooleanState';
-import { useState } from 'react';
 import AddMenuImgModal from 'page/AddMenu/components/AddMenuImgModal';
+import useAddMenuStore from 'store/addMenu';
+import useMenuImageUpload from 'page/AddMenu/hook/useMenuImageUpload';
 import styles from './MenuImage.module.scss';
 
 interface MenuImageProps {
-  isComplete:boolean;
+  isComplete: boolean;
 }
 
-export default function MenuImage({ isComplete }:MenuImageProps) {
+export default function MenuImage({ isComplete }: MenuImageProps) {
   const { isMobile } = useMediaQuery();
-  const [selectedImages, setSelectedImages] = useState<string[]>([]);
-  const [ableselecrteImage, setableselecrteImage] = useState(true);
+  const { imageUrl, removeImageUrl } = useAddMenuStore();
+  const { imgRef, saveImgFile } = useMenuImageUpload();
   const {
     value: isAddMenuImgModal,
     setTrue: openAddMenuImgModal,
     setFalse: closeAddMenuImgModal,
   } = useBooleanState(false);
-  const handleDeleteImage = (image: string) => {
-    setSelectedImages((prevImages) => prevImages.filter((img) => img !== image));
+
+  const handleAddImage = () => {
+    imgRef.current?.click();
   };
-  const handleImageSelect = (imageData: string) => {
-    if (selectedImages.length < 3) {
-      setSelectedImages((prevImages: string[]) => [...prevImages, imageData]);
-    } else {
-      setableselecrteImage(false);
-    }
-    closeAddMenuImgModal();
+  const handleDeleteImage = (image: string) => {
+    removeImageUrl(image);
   };
 
   return (
@@ -36,15 +34,10 @@ export default function MenuImage({ isComplete }:MenuImageProps) {
       {isMobile ? (
         <div className={styles.mobile__container}>
           <div className={styles.mobile__header}>
-            <div className={styles.mobile__header__caption}>
-              메뉴사진
-            </div>
-            <div className={styles.mobile__header__condition}>
-              (최대 이미지 3장)
-            </div>
+            <div className={styles.mobile__header__caption}>메뉴사진</div>
+            <div className={styles.mobile__header__condition}>(최대 이미지 3장)</div>
           </div>
           <div className={styles['mobile__new-image__container']}>
-            {ableselecrteImage && (
             <button
               type="button"
               className={styles['mobile__new-image__add-btn']}
@@ -53,18 +46,17 @@ export default function MenuImage({ isComplete }:MenuImageProps) {
               <ImgPlusIcon className={styles['mobile__new-image__plusIcon']} />
               <div className={styles['mobile__new-image__add-caption']}>이미지 추가</div>
             </button>
-            )}
-            {selectedImages.map((image, index) => (
+            {imageUrl.map((image, index) => (
               <div key={image} className={styles['mobile__new-image__item']}>
                 <img src={image} alt={`Selected ${index + 1}`} className={styles['mobile__new-image__selected-image']} />
-                {isComplete || (
+                {!isComplete && (
                   <button
                     type="button"
                     onClick={() => handleDeleteImage(image)}
                     className={styles['mobile__delete-img-button']}
                     aria-label="Delete image"
                   >
-                    <MobileDeleteImgIcon className={styles['mobile__delete-img-button__icon']} />
+                    <MobileDeleteImgIcon className={styles['mobile__delete-img-icon']} />
                   </button>
                 )}
               </div>
@@ -73,24 +65,45 @@ export default function MenuImage({ isComplete }:MenuImageProps) {
           <AddMenuImgModal
             isOpen={isAddMenuImgModal}
             onCancel={closeAddMenuImgModal}
-            onImageSelect={handleImageSelect}
           />
         </div>
       ) : (
         <div className={styles.container}>
           <div className={styles.header}>
-            <div className={styles.header__caption}>
-              메뉴사진
-            </div>
-            <div className={styles.header__condition}>
-              (최대 이미지 3장)
-            </div>
+            <div className={styles.header__caption}>메뉴사진</div>
+            <div className={styles.header__condition}>(최대 이미지 3장)</div>
           </div>
           <div className={styles['new-image__container']}>
-            <div className={styles['new-image__add-btn']}>
+            {imageUrl.map((image, index) => (
+              <div key={image} className={styles['new-image__item']}>
+                <img src={image} alt={`Selected ${index + 1}`} className={styles['new-image__selected-image']} />
+                {!isComplete && (
+                <button
+                  type="button"
+                  onClick={() => handleDeleteImage(image)}
+                  className={styles['new-image__delete-img-button']}
+                  aria-label="Delete image"
+                >
+                  <MobileDeleteImgIcon className={styles['new-image__delete-img-icon']} />
+                </button>
+                )}
+              </div>
+            ))}
+            <button
+              type="button"
+              className={styles['new-image__add-btn']}
+              onClick={handleAddImage}
+            >
               <ImgPlusIcon className={styles.plusIcon} />
               <div className={styles['new-image__add-caption']}>이미지 추가</div>
-            </div>
+            </button>
+            <input
+              type="file"
+              accept="image/*"
+              style={{ display: 'none' }}
+              onChange={saveImgFile}
+              ref={imgRef}
+            />
           </div>
         </div>
       )}
diff --git a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
index 9710ebea..9a0fb782 100644
--- a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
+++ b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
@@ -168,6 +168,10 @@
     gap: 17.5px;
   }
 
+  &__condition-button {
+    background-color: white;
+  }
+
   &__condition-text {
     color: #a1a1a1;
     text-align: right;
diff --git a/src/page/AddMenu/components/MenuPrice/index.tsx b/src/page/AddMenu/components/MenuPrice/index.tsx
index ed58e731..16224192 100644
--- a/src/page/AddMenu/components/MenuPrice/index.tsx
+++ b/src/page/AddMenu/components/MenuPrice/index.tsx
@@ -1,5 +1,6 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { useState } from 'react';
+import cn from 'utils/ts/className';
 import { ReactComponent as PlusIcon } from 'assets/svg/main/plus.svg';
 import { ReactComponent as DeleteIcon } from 'assets/svg/addmenu/delete-icon.svg';
 import { ReactComponent as MobileDeleteIcon } from 'assets/svg/addmenu/mobile-delete-icon.svg';
@@ -14,7 +15,7 @@ interface MenuPriceProps {
 export default function MenuPrice({ isComplete }:MenuPriceProps) {
   const { isMobile } = useMediaQuery();
   const [priceInputs, setPriceInputs] = useState([{ id: 1, size: '', price: '' }]);
-
+  const [isSingleMenu, setIsSingleMenu] = useState(false);
   const updatePriceInput = (id: number, field: string, newValue: string) => {
     setPriceInputs(
       priceInputs.map((input) => (input.id === id ? { ...input, [field]: newValue } : input)),
@@ -26,7 +27,13 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
   const deletePriceInput = (id : number) => {
     setPriceInputs(priceInputs.filter((input) => input.id !== id));
   };
-
+  const handleIsSingleMenu = () => {
+    if (isSingleMenu) {
+      setIsSingleMenu(false);
+    } else {
+      setIsSingleMenu(true);
+    }
+  };
   return (
     <div>
       {isMobile ? (
@@ -130,7 +137,18 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
                 <div className={styles.header__title}>가격</div>
                 <div className={styles.header__condition}>
                   <div className={styles['header__condition-text']}>단일메뉴</div>
-                  <CheckCircleIcon className={styles['header__condition-icon']} />
+                  <button
+                    type="button"
+                    className={styles['header__condition-button']}
+                    onClick={handleIsSingleMenu}
+                  >
+                    <CheckCircleIcon
+                      className={cn({
+                        [styles['header__condition-icon']]: true,
+                        [styles['header__condition-icon--seleted']]: isSingleMenu,
+                      })}
+                    />
+                  </button>
                 </div>
               </div>
               {priceInputs.map((input) => (
diff --git a/src/page/AddMenu/hook/useMenuImageUpload.ts b/src/page/AddMenu/hook/useMenuImageUpload.ts
new file mode 100644
index 00000000..e7666eb5
--- /dev/null
+++ b/src/page/AddMenu/hook/useMenuImageUpload.ts
@@ -0,0 +1,20 @@
+import { useRef } from 'react';
+import useAddMenuStore from 'store/addMenu';
+
+export default function useMenuImageUpload() {
+  const imgRef = useRef<HTMLInputElement>(null);
+  const { setImageUrl } = useAddMenuStore();
+
+  const saveImgFile = () => {
+    const file = imgRef.current?.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onloadend = () => {
+        setImageUrl(reader.result as string);
+      };
+    }
+  };
+
+  return { imgRef, saveImgFile };
+}
diff --git a/src/store/addMenu.ts b/src/store/addMenu.ts
new file mode 100644
index 00000000..53a0a7b6
--- /dev/null
+++ b/src/store/addMenu.ts
@@ -0,0 +1,48 @@
+import { create } from 'zustand';
+
+interface OptionPrices {
+  option: string;
+  price: number;
+}
+
+interface AddMenuStore {
+  categoryIds: number[];
+  description: string;
+  imageUrl: string[];
+  isSingle: boolean;
+  name: string;
+  optionPrices: OptionPrices[];
+  singlePrice: number;
+  setCategoryIds: (categoryIds: number[]) => void;
+  setDescription: (description: string) => void;
+  setImageUrl: (newImageUrl: string) => void;
+  removeImageUrl: (imageUrlToRemove: string) => void;
+  setIsSingle: (isSingle: boolean) => void;
+  setName: (name: string) => void;
+  setOptionPrices: (optionPrices: OptionPrices[]) => void;
+  setSinglePrice: (singlePrice: number) => void;
+}
+
+const useAddMenuStore = create<AddMenuStore>((set) => ({
+  categoryIds: [],
+  description: '',
+  imageUrl: [],
+  isSingle: false,
+  name: '',
+  optionPrices: [],
+  singlePrice: 0,
+  setCategoryIds: (categoryIds) => set({ categoryIds }),
+  setDescription: (description) => set({ description }),
+  setImageUrl: (newImageUrl) => set((state) => ({
+    imageUrl: [...state.imageUrl, newImageUrl],
+  })),
+  removeImageUrl: (imageUrlToRemove) => set((state) => ({
+    imageUrl: state.imageUrl.filter((img) => img !== imageUrlToRemove),
+  })),
+  setIsSingle: (isSingle) => set({ isSingle }),
+  setName: (name) => set({ name }),
+  setOptionPrices: (optionPrices) => set({ optionPrices }),
+  setSinglePrice: (singlePrice) => set({ singlePrice }),
+}));
+
+export default useAddMenuStore;

From 62e87db89081ee47ef5b4bcee3b20daadfa80c7a Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Sat, 6 Jan 2024 17:49:02 +0900
Subject: [PATCH 05/39] =?UTF-8?q?feat:=20=EB=8B=A8=EC=9D=BC=EA=B0=80?=
 =?UTF-8?q?=EA=B2=A9=20=EC=B2=B4=ED=81=AC=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svg/addmenu/selected-check.svg     |  4 ++
 src/assets/svg/addmenu/single-menu-check.svg  |  4 ++
 .../AddMenu/components/MenuPrice/index.tsx    | 71 +++++++++++--------
 src/store/addMenu.ts                          |  3 +-
 4 files changed, 50 insertions(+), 32 deletions(-)
 create mode 100644 src/assets/svg/addmenu/selected-check.svg
 create mode 100644 src/assets/svg/addmenu/single-menu-check.svg

diff --git a/src/assets/svg/addmenu/selected-check.svg b/src/assets/svg/addmenu/selected-check.svg
new file mode 100644
index 00000000..d021fc02
--- /dev/null
+++ b/src/assets/svg/addmenu/selected-check.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+  <circle cx="13" cy="13" r="12" fill="#F7941E" stroke="#F7941E"/>
+  <path d="M7.875 14.875L11.375 18.375L20.125 9.625" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/svg/addmenu/single-menu-check.svg b/src/assets/svg/addmenu/single-menu-check.svg
new file mode 100644
index 00000000..ce49d8d0
--- /dev/null
+++ b/src/assets/svg/addmenu/single-menu-check.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+  <circle cx="13" cy="13" r="12" stroke="#A1A1A1"/>
+  <path d="M6.875 13.875L10.375 17.375L19.125 8.625" stroke="#A1A1A1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/page/AddMenu/components/MenuPrice/index.tsx b/src/page/AddMenu/components/MenuPrice/index.tsx
index 16224192..d4f1c91d 100644
--- a/src/page/AddMenu/components/MenuPrice/index.tsx
+++ b/src/page/AddMenu/components/MenuPrice/index.tsx
@@ -1,11 +1,12 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
-import { useState } from 'react';
-import cn from 'utils/ts/className';
+import useAddMenuStore from 'store/addMenu';
 import { ReactComponent as PlusIcon } from 'assets/svg/main/plus.svg';
 import { ReactComponent as DeleteIcon } from 'assets/svg/addmenu/delete-icon.svg';
 import { ReactComponent as MobileDeleteIcon } from 'assets/svg/addmenu/mobile-delete-icon.svg';
-import { ReactComponent as CheckCircleIcon } from 'assets/svg/mystore/check-circle.svg';
+import { ReactComponent as MobileCheckCircleIcon } from 'assets/svg/mystore/check-circle.svg';
+import { ReactComponent as CheckCircleIcon } from 'assets/svg/addmenu/single-menu-check.svg';
 import { ReactComponent as MobilePlusIcon } from 'assets/svg/addmenu/mobile-plus-icon.svg';
+import { ReactComponent as SelectedCheck } from 'assets/svg/addmenu/selected-check.svg';
 import styles from './MenuPrice.module.scss';
 
 interface MenuPriceProps {
@@ -14,25 +15,27 @@ interface MenuPriceProps {
 
 export default function MenuPrice({ isComplete }:MenuPriceProps) {
   const { isMobile } = useMediaQuery();
-  const [priceInputs, setPriceInputs] = useState([{ id: 1, size: '', price: '' }]);
-  const [isSingleMenu, setIsSingleMenu] = useState(false);
-  const updatePriceInput = (id: number, field: string, newValue: string) => {
-    setPriceInputs(
-      priceInputs.map((input) => (input.id === id ? { ...input, [field]: newValue } : input)),
+  const {
+    optionPrices, setOptionPrices, isSingle, setIsSingle,
+  } = useAddMenuStore();
+
+  const updatePriceInput = (index: number, field: string, newValue: string | number) => {
+    const updatedOptionPrices = optionPrices.map(
+      (price, idx) => (index === idx ? { ...price, [field]: newValue } : price),
     );
+    setOptionPrices(updatedOptionPrices);
   };
+
   const addPriceInput = () => {
-    setPriceInputs([...priceInputs, { id: priceInputs.length + 1, size: '', price: '' }]);
+    const newId = optionPrices.length;
+    setOptionPrices([...optionPrices, { id: newId, option: '', price: '' }]);
   };
-  const deletePriceInput = (id : number) => {
-    setPriceInputs(priceInputs.filter((input) => input.id !== id));
+
+  const deletePriceInput = (index: number) => {
+    setOptionPrices(optionPrices.filter((_, idx) => idx !== index));
   };
   const handleIsSingleMenu = () => {
-    if (isSingleMenu) {
-      setIsSingleMenu(false);
-    } else {
-      setIsSingleMenu(true);
-    }
+    setIsSingle(!isSingle);
   };
   return (
     <div>
@@ -43,11 +46,11 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
               <div className={styles.mobile__header}>
                 <div className={styles['mobile__header-title--complete']}>가격</div>
               </div>
-              {priceInputs.map((input) => (
+              {optionPrices.map((input) => (
                 <div key={input.id} className={styles['mobile__price-info-text-box']}>
                   <div className={styles['mobile__price-info-text']}>
                     <div className={styles['mobile__price-info-text__size']}>
-                      {input.size}
+                      {input.option}
                     </div>
                     <div>
                       /
@@ -66,16 +69,22 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
                 <div className={styles['mobile__header-title']}>가격</div>
                 <div className={styles['mobile__header-condition']}>
                   <div className={styles['mobile__header-condition__text']}>단일메뉴</div>
-                  <CheckCircleIcon className={styles['mobile__header-condition__icon']} />
+                  <button
+                    type="button"
+                    className={styles['mobile__header__condition-button']}
+                    onClick={handleIsSingleMenu}
+                  >
+                    <MobileCheckCircleIcon className={styles['mobile__header-condition__icon']} />
+                  </button>
                 </div>
               </div>
-              {priceInputs.map((input) => (
+              {optionPrices.map((input) => (
                 <div key={input.id} className={styles['mobile__price-info-input-box']}>
                   <div className={styles['mobile__price-info-inputs']}>
                     <input
                       className={styles['mobile__price-info-inputs__size-input']}
                       placeholder="예) 소 (1~2 인분)"
-                      value={input.size}
+                      value={input.option}
                       onChange={(e) => updatePriceInput(input.id, 'size', e.target.value)}
                     />
                     <div className={styles['mobile__price-info-inputs__price-input-box']}>
@@ -114,11 +123,11 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
               <div className={styles.header}>
                 <div className={styles.header__title}>가격</div>
               </div>
-              {priceInputs.map((input) => (
+              {optionPrices.map((input) => (
                 <div key={input.id} className={styles['price-info-text-box']}>
                   <div className={styles['price-info-text']}>
                     <div className={styles['price-info-text__size']}>
-                      {input.size}
+                      {input.option}
                     </div>
                     <div>
                       /
@@ -142,22 +151,22 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
                     className={styles['header__condition-button']}
                     onClick={handleIsSingleMenu}
                   >
-                    <CheckCircleIcon
-                      className={cn({
-                        [styles['header__condition-icon']]: true,
-                        [styles['header__condition-icon--seleted']]: isSingleMenu,
-                      })}
-                    />
+                    {isSingle ? (
+                      <SelectedCheck className={styles['header__condition-icon']} />
+                    ) : (
+                      <CheckCircleIcon className={styles['header__condition-icon']} />
+                    )}
                   </button>
+
                 </div>
               </div>
-              {priceInputs.map((input) => (
+              {optionPrices.map((input) => (
                 <div key={input.id} className={styles['price-info-input-box']}>
                   <div className={styles['price-info-inputs']}>
                     <input
                       className={styles['price-info-inputs__size-input']}
                       placeholder="예) 소 (1~2 인분)"
-                      value={input.size}
+                      value={input.option}
                       onChange={(e) => updatePriceInput(input.id, 'size', e.target.value)}
                     />
                     <div className={styles['price-info-inputs__price-input-box']}>
diff --git a/src/store/addMenu.ts b/src/store/addMenu.ts
index 53a0a7b6..1ea3b4b2 100644
--- a/src/store/addMenu.ts
+++ b/src/store/addMenu.ts
@@ -1,8 +1,9 @@
 import { create } from 'zustand';
 
 interface OptionPrices {
+  id: number;
   option: string;
-  price: number;
+  price: number | string;
 }
 
 interface AddMenuStore {

From e67fcb43b3d3c10d6ad5154f9cf5d4dfa6950441 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Sun, 7 Jan 2024 01:00:59 +0900
Subject: [PATCH 06/39] =?UTF-8?q?freat:=20=EB=A9=94=EB=89=B4=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20api=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AddMenu/components/MenuCategory/index.tsx | 25 +++++++++++--------
 .../AddMenu/components/MenuName/index.tsx     |  4 +--
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/page/AddMenu/components/MenuCategory/index.tsx b/src/page/AddMenu/components/MenuCategory/index.tsx
index 64252899..626c3c8f 100644
--- a/src/page/AddMenu/components/MenuCategory/index.tsx
+++ b/src/page/AddMenu/components/MenuCategory/index.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { ReactComponent as GearIcon } from 'assets/svg/mystore/gear.svg';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
+import useAddMenuStore from 'store/addMenu';
+import useMyShop from 'query/shop';
 import cn from 'utils/ts/className';
 import styles from './MenuCategory.module.scss';
 
@@ -14,22 +16,23 @@ interface MenuCategoryProps {
 
 export default function MenuCategory({ isComplete }:MenuCategoryProps) {
   const { isMobile } = useMediaQuery();
-  const [menuCategories/* , setMenuCategories */] = useState<MenuCategory[]>([
-    { id: 1, name: '이벤트 메뉴' },
-    { id: 2, name: '대표 메뉴' },
-    { id: 3, name: '사이드 메뉴' },
-    { id: 4, name: '세트 메뉴' },
-  ]);
+  const { shopData } = useMyShop();
+  const { setCategoryIds } = useAddMenuStore();
   const [selectedCategories, setSelectedCategories] = useState<MenuCategory[]>([]);
   const appendSelectCategory = (category: MenuCategory) => {
     if (selectedCategories.some((alreadySelected) => alreadySelected.id === category.id)) {
-      setSelectedCategories(
-        selectedCategories.filter((alreadySelected) => alreadySelected.id !== category.id),
+      const newSelected = selectedCategories.filter(
+        (alreadySelected) => alreadySelected.id !== category.id,
       );
+      setSelectedCategories(newSelected);
+      setCategoryIds(newSelected.map((cat) => cat.id));
     } else {
-      setSelectedCategories([...selectedCategories, category]);
+      const newSelected = [...selectedCategories, category];
+      setSelectedCategories(newSelected);
+      setCategoryIds(newSelected.map((cat) => cat.id));
     }
   };
+
   return (
     <div>
       {isMobile ? (
@@ -68,7 +71,7 @@ export default function MenuCategory({ isComplete }:MenuCategoryProps) {
                 <GearIcon className={styles['mobile__category-header__icon']} />
               </div>
               <div className={styles['mobile__category-button-container']}>
-                {menuCategories.map((category) => (
+                {shopData && shopData.menu_categories.map((category) => (
                   <button
                     key={category.id}
                     className={cn({
@@ -121,7 +124,7 @@ export default function MenuCategory({ isComplete }:MenuCategoryProps) {
                 <GearIcon className={styles['category-header__icon']} />
               </div>
               <div className={styles['category-button-container']}>
-                {menuCategories.map((category) => (
+                {shopData && shopData.menu_categories.map((category) => (
                   <button
                     key={category.id}
                     className={cn({
diff --git a/src/page/AddMenu/components/MenuName/index.tsx b/src/page/AddMenu/components/MenuName/index.tsx
index c260c73c..a8f01d2e 100644
--- a/src/page/AddMenu/components/MenuName/index.tsx
+++ b/src/page/AddMenu/components/MenuName/index.tsx
@@ -1,5 +1,5 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
-import { useState } from 'react';
+import useAddMenuStore from 'store/addMenu';
 import styles from './MenuName.module.scss';
 
 interface MenuNameProps {
@@ -8,7 +8,7 @@ interface MenuNameProps {
 
 export default function MenuName({ isComplete }: MenuNameProps) {
   const { isMobile } = useMediaQuery();
-  const [name, setName] = useState('');
+  const { name, setName } = useAddMenuStore();
   const handleNameChange = (e : React.ChangeEvent<HTMLInputElement>) => {
     setName(e.target.value);
   };

From 87a183c0b3e9d1fc914ee5677cfe182891c9d331 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Sun, 7 Jan 2024 04:21:14 +0900
Subject: [PATCH 07/39] =?UTF-8?q?feat:=20=EB=A9=94=EB=89=B4=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20api,=20=EC=BF=BC=EB=A6=AC=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/shop/index.ts                         |  3 +++
 src/model/shopInfo/newMenu.ts                 | 19 ++++++++++++++++++
 .../AddMenu/components/MenuDetail/index.tsx   | 14 ++++++-------
 .../AddMenu/components/MenuPrice/index.tsx    |  6 ++++--
 src/query/shop.ts                             | 20 ++++++++++++++++---
 src/store/addMenu.ts                          |  2 +-
 6 files changed, 51 insertions(+), 13 deletions(-)
 create mode 100644 src/model/shopInfo/newMenu.ts

diff --git a/src/api/shop/index.ts b/src/api/shop/index.ts
index 23629969..0ae6c1a5 100644
--- a/src/api/shop/index.ts
+++ b/src/api/shop/index.ts
@@ -3,6 +3,7 @@ import { MenuInfoRes } from 'model/shopInfo/menuCategory';
 import { ShopListRes } from 'model/shopInfo/allShopInfo';
 import { accessClient, client } from 'api';
 import { OwnerShop } from 'model/shopInfo/ownerShop';
+import { NewMenu } from 'model/shopInfo/newMenu';
 
 export const getMyShopList = async () => {
   const { data } = await accessClient.get<MyShopListRes>('/owner/shops');
@@ -24,4 +25,6 @@ export const getShopList = async () => {
   return ShopListRes.parse(data);
 };
 
+export const addMenu = (shopid:number, param: NewMenu) => client.post(`/owner/shops/${shopid}/menus`, param);
+
 export const postShop = (data: OwnerShop) => accessClient.post('/owner/shops', data);
diff --git a/src/model/shopInfo/newMenu.ts b/src/model/shopInfo/newMenu.ts
new file mode 100644
index 00000000..85be929d
--- /dev/null
+++ b/src/model/shopInfo/newMenu.ts
@@ -0,0 +1,19 @@
+import z from 'zod';
+
+export const OptionPrice = z.object({
+  option: z.string(),
+  price: z.number(),
+});
+export type OptionPrice = z.infer<typeof OptionPrice>;
+
+export const NewMenu = z.object({
+  category_id: z.array(z.string()),
+  description: z.string().nullable(),
+  image_urls: z.array(z.string()),
+  is_single: z.boolean(),
+  name: z.string(),
+  option_prices: z.array(OptionPrice.nullable()),
+  single_price: z.number(),
+});
+
+export type NewMenu = z.infer<typeof NewMenu>;
diff --git a/src/page/AddMenu/components/MenuDetail/index.tsx b/src/page/AddMenu/components/MenuDetail/index.tsx
index d3d578ad..305b9cd1 100644
--- a/src/page/AddMenu/components/MenuDetail/index.tsx
+++ b/src/page/AddMenu/components/MenuDetail/index.tsx
@@ -1,5 +1,5 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
-import { useState } from 'react';
+import useAddMenuStore from 'store/addMenu';
 import styles from './MenuDetail.module.scss';
 
 interface MenuCategoryProps {
@@ -7,9 +7,9 @@ interface MenuCategoryProps {
 }
 export default function MenuDetail({ isComplete }:MenuCategoryProps) {
   const { isMobile } = useMediaQuery();
-  const [detail, setDetail] = useState('');
+  const { description, setDescription } = useAddMenuStore();
   const handleDetailChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setDetail(e.target.value);
+    setDescription(e.target.value);
   };
   return (
     <div>
@@ -17,13 +17,13 @@ export default function MenuDetail({ isComplete }:MenuCategoryProps) {
         <div className={styles.mobile__container}>
           <div className={styles.mobile__caption}>메뉴구성</div>
           {isComplete ? (
-            <div className={styles['mobile__menu-detail-input--complete']}>{detail}</div>
+            <div className={styles['mobile__menu-detail-input--complete']}>{description}</div>
           ) : (
             <textarea
               className={styles['mobile__menu-detail-input']}
               placeholder=" 예) 불족발(소,중,대) + 막국수 + 랜덤 서비스 음료(500ml)"
               onChange={handleDetailChange}
-              value={detail}
+              value={description}
             />
           )}
         </div>
@@ -31,13 +31,13 @@ export default function MenuDetail({ isComplete }:MenuCategoryProps) {
         <div className={styles.container}>
           <div className={styles.caption}>메뉴구성</div>
           {isComplete ? (
-            <div className={styles['menu-detail-input--complete']}>{detail}</div>
+            <div className={styles['menu-detail-input--complete']}>{description}</div>
           ) : (
             <textarea
               className={styles['menu-detail-input']}
               placeholder=" 예) 불족발(소,중,대) + 막국수 + 랜덤 서비스 음료(500ml)"
               onChange={handleDetailChange}
-              value={detail}
+              value={description}
             />
           )}
         </div>
diff --git a/src/page/AddMenu/components/MenuPrice/index.tsx b/src/page/AddMenu/components/MenuPrice/index.tsx
index d4f1c91d..9e3f648b 100644
--- a/src/page/AddMenu/components/MenuPrice/index.tsx
+++ b/src/page/AddMenu/components/MenuPrice/index.tsx
@@ -28,7 +28,9 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
 
   const addPriceInput = () => {
     const newId = optionPrices.length;
-    setOptionPrices([...optionPrices, { id: newId, option: '', price: '' }]);
+    if (!isSingle) {
+      setOptionPrices([...optionPrices, { id: newId, option: '', price: '' }]);
+    }
   };
 
   const deletePriceInput = (index: number) => {
@@ -167,7 +169,7 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
                       className={styles['price-info-inputs__size-input']}
                       placeholder="예) 소 (1~2 인분)"
                       value={input.option}
-                      onChange={(e) => updatePriceInput(input.id, 'size', e.target.value)}
+                      onChange={(e) => updatePriceInput(input.id, 'option', e.target.value)}
                     />
                     <div className={styles['price-info-inputs__price-input-box']}>
                       <input
diff --git a/src/query/shop.ts b/src/query/shop.ts
index c93ef06c..ec58cbd7 100644
--- a/src/query/shop.ts
+++ b/src/query/shop.ts
@@ -1,6 +1,9 @@
-import { useQuery } from '@tanstack/react-query';
-import { getMyShopList, getShopInfo, getMenuInfoList } from 'api/shop';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import {
+  getMyShopList, getShopInfo, getMenuInfoList, addMenu,
+} from 'api/shop';
 import useUserStore from 'store/user';
+import { NewMenu } from 'model/shopInfo/newMenu';
 
 const useMyShop = () => {
   const myShopQueryKey = useUserStore.getState().user?.company_number;
@@ -29,7 +32,18 @@ const useMyShop = () => {
     enabled: !!shopId,
   });
 
-  return { shopData, menuData };
+  const { mutate: addMenuMutation, isError: addMenuError } = useMutation({
+    mutationFn: (param: NewMenu) => {
+      if (typeof shopId === 'number') {
+        return addMenu(shopId, param);
+      }
+      throw new Error('Invalid shopId');
+    },
+  });
+
+  return {
+    shopData, menuData, addMenuMutation, addMenuError,
+  };
 };
 
 export default useMyShop;
diff --git a/src/store/addMenu.ts b/src/store/addMenu.ts
index 1ea3b4b2..39ad2108 100644
--- a/src/store/addMenu.ts
+++ b/src/store/addMenu.ts
@@ -30,7 +30,7 @@ const useAddMenuStore = create<AddMenuStore>((set) => ({
   imageUrl: [],
   isSingle: false,
   name: '',
-  optionPrices: [],
+  optionPrices: [{ id: 0, option: '', price: '' }],
   singlePrice: 0,
   setCategoryIds: (categoryIds) => set({ categoryIds }),
   setDescription: (description) => set({ description }),

From 258e7686a760d4ade89d185a2f8a595cf7d9c232 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Sun, 7 Jan 2024 07:23:46 +0900
Subject: [PATCH 08/39] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/shop/index.ts                         |  2 +-
 src/api/uploadFile/Uploadfile.ts              |  9 +++++
 src/model/File/index.ts                       | 13 +++++++
 src/model/shopInfo/newMenu.ts                 |  2 +-
 .../AddMenu/components/GoMyShop/index.tsx     |  4 ++-
 src/page/AddMenu/hook/useMenuImageUpload.ts   | 17 +++++----
 src/page/AddMenu/index.tsx                    | 36 ++++++++++++++++++-
 src/query/upload.ts                           | 21 +++++++++++
 8 files changed, 94 insertions(+), 10 deletions(-)
 create mode 100644 src/api/uploadFile/Uploadfile.ts
 create mode 100644 src/model/File/index.ts
 create mode 100644 src/query/upload.ts

diff --git a/src/api/shop/index.ts b/src/api/shop/index.ts
index 0ae6c1a5..5c9eb418 100644
--- a/src/api/shop/index.ts
+++ b/src/api/shop/index.ts
@@ -25,6 +25,6 @@ export const getShopList = async () => {
   return ShopListRes.parse(data);
 };
 
-export const addMenu = (shopid:number, param: NewMenu) => client.post(`/owner/shops/${shopid}/menus`, param);
+export const addMenu = (shopid:number, param: NewMenu) => accessClient.post(`/owner/shops/${shopid}/menus`, param);
 
 export const postShop = (data: OwnerShop) => accessClient.post('/owner/shops', data);
diff --git a/src/api/uploadFile/Uploadfile.ts b/src/api/uploadFile/Uploadfile.ts
new file mode 100644
index 00000000..0f757e0f
--- /dev/null
+++ b/src/api/uploadFile/Uploadfile.ts
@@ -0,0 +1,9 @@
+import { accessClient } from 'api';
+
+export const uploadFile = (formData: FormData) => accessClient.post('/OWNERS/upload/file', formData, {
+  headers: { 'Content-Type': 'multipart/form-data' },
+});
+
+export const uploadFiles = (formData: FormData) => accessClient.post('/OWNERS/upload/files', formData, {
+  headers: { 'Content-Type': 'multipart/form-data' },
+});
diff --git a/src/model/File/index.ts b/src/model/File/index.ts
new file mode 100644
index 00000000..91d5bc34
--- /dev/null
+++ b/src/model/File/index.ts
@@ -0,0 +1,13 @@
+import z from 'zod';
+
+export const File = z.object({
+  fileURL: z.string(),
+});
+
+export type File = z.infer<typeof File>;
+
+export const Files = z.object({
+  fileURLs: z.array(File),
+});
+
+export type Files = z.infer<typeof Files>;
diff --git a/src/model/shopInfo/newMenu.ts b/src/model/shopInfo/newMenu.ts
index 85be929d..ab51af65 100644
--- a/src/model/shopInfo/newMenu.ts
+++ b/src/model/shopInfo/newMenu.ts
@@ -7,7 +7,7 @@ export const OptionPrice = z.object({
 export type OptionPrice = z.infer<typeof OptionPrice>;
 
 export const NewMenu = z.object({
-  category_id: z.array(z.string()),
+  category_ids: z.array(z.number()),
   description: z.string().nullable(),
   image_urls: z.array(z.string()),
   is_single: z.boolean(),
diff --git a/src/page/AddMenu/components/GoMyShop/index.tsx b/src/page/AddMenu/components/GoMyShop/index.tsx
index 1a85d98d..48287f91 100644
--- a/src/page/AddMenu/components/GoMyShop/index.tsx
+++ b/src/page/AddMenu/components/GoMyShop/index.tsx
@@ -5,9 +5,10 @@ import styles from './GoMyShopModal.module.scss';
 interface CheckModalProps {
   isOpen: boolean;
   onCancel: (event: React.MouseEvent | React.KeyboardEvent<Element>) => void;
+  onConfirm: () => void;
 }
 
-export default function GoMyShopModal({ isOpen, onCancel }: CheckModalProps) {
+export default function GoMyShopModal({ isOpen, onCancel, onConfirm }: CheckModalProps) {
   if (!isOpen) return null;
   return createPortal(
     <div
@@ -29,6 +30,7 @@ export default function GoMyShopModal({ isOpen, onCancel }: CheckModalProps) {
           <button
             type="button"
             className={styles['content__goMyShop-button']}
+            onClick={onConfirm}
           >
             내 상점으로
           </button>
diff --git a/src/page/AddMenu/hook/useMenuImageUpload.ts b/src/page/AddMenu/hook/useMenuImageUpload.ts
index e7666eb5..7d82f17d 100644
--- a/src/page/AddMenu/hook/useMenuImageUpload.ts
+++ b/src/page/AddMenu/hook/useMenuImageUpload.ts
@@ -1,18 +1,23 @@
 import { useRef } from 'react';
+import useUploadFile from 'query/upload';
 import useAddMenuStore from 'store/addMenu';
 
 export default function useMenuImageUpload() {
   const imgRef = useRef<HTMLInputElement>(null);
   const { setImageUrl } = useAddMenuStore();
+  const { uploadFile } = useUploadFile();
 
-  const saveImgFile = () => {
+  const saveImgFile = async () => {
     const file = imgRef.current?.files?.[0];
     if (file) {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onloadend = () => {
-        setImageUrl(reader.result as string);
-      };
+      const formData = new FormData();
+      formData.append('multipartFile', file);
+
+      const data = await uploadFile(formData);
+
+      if (data?.data?.file_url) {
+        setImageUrl(`https://${data.data.file_url}`);
+      }
     }
   };
 
diff --git a/src/page/AddMenu/index.tsx b/src/page/AddMenu/index.tsx
index 5b83b072..eb6d35df 100644
--- a/src/page/AddMenu/index.tsx
+++ b/src/page/AddMenu/index.tsx
@@ -1,6 +1,8 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import { useState } from 'react';
+import useMyShop from 'query/shop';
+import useAddMenuStore from 'store/addMenu';
 import MenuImage from './components/MenuImage';
 import MenuName from './components/MenuName';
 import styles from './AddMenu.module.scss';
@@ -13,6 +15,7 @@ import MobileDivide from './components/MobileDivide';
 export default function AddMenu() {
   const { isMobile } = useMediaQuery();
   const [isComplete, setIsComplete] = useState<boolean>(false);
+
   const toggleConfirmClick = () => {
     setIsComplete((prevState) => !prevState);
   };
@@ -21,6 +24,33 @@ export default function AddMenu() {
     setTrue: openGoMyShopModal,
     setFalse: closeGOMyShopModal,
   } = useBooleanState(false);
+  const {
+    categoryIds,
+    description,
+    imageUrl,
+    isSingle,
+    name,
+    optionPrices,
+    singlePrice,
+  } = useAddMenuStore();
+  const { addMenuMutation } = useMyShop();
+
+  const addMenu = () => {
+    const newMenuData = {
+      category_ids: categoryIds,
+      description,
+      image_urls: imageUrl,
+      is_single: isSingle,
+      name,
+      option_prices: optionPrices.map(({ option, price }) => ({
+        option,
+        price: typeof price === 'string' ? parseFloat(price) : price,
+      })),
+      single_price: singlePrice,
+    };
+
+    addMenuMutation(newMenuData);
+  };
   return (
     <div>
       {isMobile ? (
@@ -138,7 +168,11 @@ export default function AddMenu() {
               <MenuDetail isComplete={isComplete} />
             </div>
           </div>
-          <GoMyShopModal isOpen={isGoMyShopModal} onCancel={closeGOMyShopModal} />
+          <GoMyShopModal
+            isOpen={isGoMyShopModal}
+            onCancel={closeGOMyShopModal}
+            onConfirm={addMenu}
+          />
         </div>
       )}
     </div>
diff --git a/src/query/upload.ts b/src/query/upload.ts
new file mode 100644
index 00000000..a6b0c160
--- /dev/null
+++ b/src/query/upload.ts
@@ -0,0 +1,21 @@
+import { useMutation } from '@tanstack/react-query';
+import { uploadFile, uploadFiles } from 'api/uploadFile/Uploadfile';
+
+const useUploadFile = () => {
+  const uploadFileMutation = useMutation({
+    mutationFn: (formData: FormData) => uploadFile(formData),
+  });
+
+  const uploadFilesMutation = useMutation({
+    mutationFn: (formData: FormData) => uploadFiles(formData),
+  });
+
+  return {
+    uploadFile: uploadFileMutation.mutateAsync,
+    uploadFileError: uploadFileMutation.isError,
+    uploadFiles: uploadFilesMutation.mutateAsync,
+    uploadFilesError: uploadFilesMutation.isError,
+  };
+};
+
+export default useUploadFile;

From 114d8acde0c1a1760721a51073e1857b46a45d73 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Tue, 9 Jan 2024 02:49:46 +0900
Subject: [PATCH 09/39] =?UTF-8?q?fix:=20=EA=B9=83=ED=97=88=EB=B8=8C=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=EC=B2=B4=ED=81=AC=20=EC=95=A1=EC=85=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/LINT_CHECK.yml | 2 ++
 package.json                     | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/LINT_CHECK.yml b/.github/workflows/LINT_CHECK.yml
index 68972c97..3c1469e7 100644
--- a/.github/workflows/LINT_CHECK.yml
+++ b/.github/workflows/LINT_CHECK.yml
@@ -26,3 +26,5 @@ jobs:
         run: yarn
       - name: Check lint
         run: yarn lint
+      - name: Type Check
+        run: yarn tsc
\ No newline at end of file
diff --git a/package.json b/package.json
index b704d2b3..71695218 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,8 @@
     "eject": "react-scripts eject",
     "lint": "yarn lint:eslint && yarn lint:stylelint",
     "lint:eslint": "eslint src/ --ext .tsx,.ts",
-    "lint:stylelint": "stylelint \"src/**/*.scss\" --config .stylelint.json"
+    "lint:stylelint": "stylelint \"src/**/*.scss\" --config .stylelint.json",
+    "typecheck": "tsc"
   },
   "eslintConfig": {
     "extends": [

From 22aa902af2363bd05b9b62fd7a7223049613805c Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Tue, 9 Jan 2024 03:00:22 +0900
Subject: [PATCH 10/39] =?UTF-8?q?fix:=20useModalStore=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=9E=84=EC=8B=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/LINT_CHECK.yml | 2 +-
 package.json                     | 2 +-
 src/store/modalStore.ts          | 8 ++++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/LINT_CHECK.yml b/.github/workflows/LINT_CHECK.yml
index 3c1469e7..4199a5a9 100644
--- a/.github/workflows/LINT_CHECK.yml
+++ b/.github/workflows/LINT_CHECK.yml
@@ -27,4 +27,4 @@ jobs:
       - name: Check lint
         run: yarn lint
       - name: Type Check
-        run: yarn tsc
\ No newline at end of file
+        run: yarn typecheck
\ No newline at end of file
diff --git a/package.json b/package.json
index 71695218..e638765a 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "lint": "yarn lint:eslint && yarn lint:stylelint",
     "lint:eslint": "eslint src/ --ext .tsx,.ts",
     "lint:stylelint": "stylelint \"src/**/*.scss\" --config .stylelint.json",
-    "typecheck": "tsc"
+    "typecheck": "tsc --project tsconfig.json"
   },
   "eslintConfig": {
     "extends": [
diff --git a/src/store/modalStore.ts b/src/store/modalStore.ts
index d078e2a7..282facd8 100644
--- a/src/store/modalStore.ts
+++ b/src/store/modalStore.ts
@@ -7,9 +7,13 @@ interface ModalStore {
   openTimeState: OperatingTime;
   closeTimeState: OperatingTime;
   shopClosedState: { [key: string]: boolean };
+  searchShopState: string; // 수정 요망
+  selectedShopId:string; // 수정 요망
   setOpenTimeState: (state: OperatingTime) => void;
   setCloseTimeState: (state: OperatingTime) => void;
   setShopClosedState: (state: { [key: string]: boolean }) => void;
+  setSearchShopState: (state: string) => void; // 수정 요망
+  setSelectedShopId:(state:string) => void; // 수정 요망
 }
 
 const initialOperatingTime: OperatingTime = {
@@ -36,9 +40,13 @@ const useModalStore = create<ModalStore>((set) => ({
   openTimeState: initialOperatingTime,
   closeTimeState: initialOperatingTime,
   shopClosedState: initialShopClosed,
+  searchShopState: '', // 수정 요망
+  selectedShopId: '', // 수정 요망
   setOpenTimeState: (state) => set(() => ({ openTimeState: state })),
   setCloseTimeState: (state) => set(() => ({ closeTimeState: state })),
   setShopClosedState: (state) => set({ shopClosedState: state }),
+  setSearchShopState: (state) => set({ searchShopState: state }), // 수정 요망
+  setSelectedShopId: (state) => set({ selectedShopId: state }), // 수정 요망
 }));
 
 export default useModalStore;

From c4f9baeb36909a9eff7f16c72107e6d3abd6f917 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Tue, 9 Jan 2024 03:36:45 +0900
Subject: [PATCH 11/39] =?UTF-8?q?refactor:=20=EC=84=A0=ED=83=9D=EB=90=9C?=
 =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/AddMenu/components/MenuImage/MenuImage.module.scss | 4 ++--
 src/page/AddMenu/components/MenuImage/index.tsx             | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
index 58208b7a..a6b2632d 100644
--- a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
+++ b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
@@ -67,7 +67,7 @@
     height: 176px;
   }
 
-  &__selected-image {
+  &__selected {
     flex-shrink: 0;
     width: 100%;
     width: 264px;
@@ -173,7 +173,7 @@
       height: 137px;
     }
 
-    &__selected-image {
+    &__selected {
       width: 137px;
       height: 137px;
     }
diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx
index 2847c958..bed47fb4 100644
--- a/src/page/AddMenu/components/MenuImage/index.tsx
+++ b/src/page/AddMenu/components/MenuImage/index.tsx
@@ -48,7 +48,7 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
             </button>
             {imageUrl.map((image, index) => (
               <div key={image} className={styles['mobile__new-image__item']}>
-                <img src={image} alt={`Selected ${index + 1}`} className={styles['mobile__new-image__selected-image']} />
+                <img src={image} alt={`Selected ${index + 1}`} className={styles['mobile__new-image__selected']} />
                 {!isComplete && (
                   <button
                     type="button"
@@ -76,7 +76,7 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
           <div className={styles['new-image__container']}>
             {imageUrl.map((image, index) => (
               <div key={image} className={styles['new-image__item']}>
-                <img src={image} alt={`Selected ${index + 1}`} className={styles['new-image__selected-image']} />
+                <img src={image} alt={`Selected ${index + 1}`} className={styles['new-image__selected']} />
                 {!isComplete && (
                 <button
                   type="button"

From e37c696610f4f0c950bd43700044114b70633c3f Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Tue, 9 Jan 2024 15:57:15 +0900
Subject: [PATCH 12/39] =?UTF-8?q?refactor:=20=EB=84=A4=EC=9D=B4=EB=B0=8D?=
 =?UTF-8?q?=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/AddMenu/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/page/AddMenu/index.tsx b/src/page/AddMenu/index.tsx
index eb6d35df..78625ed2 100644
--- a/src/page/AddMenu/index.tsx
+++ b/src/page/AddMenu/index.tsx
@@ -22,7 +22,7 @@ export default function AddMenu() {
   const {
     value: isGoMyShopModal,
     setTrue: openGoMyShopModal,
-    setFalse: closeGOMyShopModal,
+    setFalse: closeGoMyShopModal,
   } = useBooleanState(false);
   const {
     categoryIds,
@@ -170,7 +170,7 @@ export default function AddMenu() {
           </div>
           <GoMyShopModal
             isOpen={isGoMyShopModal}
-            onCancel={closeGOMyShopModal}
+            onCancel={closeGoMyShopModal}
             onConfirm={addMenu}
           />
         </div>

From b69a7ac642936fd19435122966b5e124f38c3596 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Tue, 9 Jan 2024 16:11:05 +0900
Subject: [PATCH 13/39] =?UTF-8?q?refactor:=20onKeyDown=20=EB=B2=84?=
 =?UTF-8?q?=EB=B8=94=EB=A7=81=20=EB=B0=A9=EC=A7=80=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/AddMenu/components/AddMenuImgModal/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
index 571f1f42..189e2caf 100644
--- a/src/page/AddMenu/components/AddMenuImgModal/index.tsx
+++ b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
@@ -24,7 +24,7 @@ export default function AddMenuImgModal({ isOpen, onCancel }: AddMenuImgModalPro
 
   return createPortal(
     <div className={styles.modal} onClick={onCancel} onKeyDown={onCancel} role="button" tabIndex={0}>
-      <div className={styles.content} onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()} role="presentation">
+      <div className={styles.content} onClick={(e) => e.stopPropagation()} role="presentation">
         <button type="button" className={styles['cancel-button']} onClick={onCancel}>
           <CancelIcon className={styles.cancelIcon} />
         </button>

From c6ddf4a61bd22ef94812f1dd1905a131fbc34916 Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Tue, 9 Jan 2024 17:21:28 +0900
Subject: [PATCH 14/39] =?UTF-8?q?feat:=20myShopList=EC=9D=98=20count=20?=
 =?UTF-8?q?=EA=B0=92=EC=97=90=20=EB=94=B0=EB=A5=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=9D=B4=EB=8F=99=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/query/auth.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/query/auth.ts b/src/query/auth.ts
index f2b924ec..62499e35 100644
--- a/src/query/auth.ts
+++ b/src/query/auth.ts
@@ -2,6 +2,7 @@ import { useMutation } from '@tanstack/react-query';
 import {
   postLogin, findPasswordVerify, findPassword, newPassword,
 } from 'api/auth';
+import { getMyShopList } from 'api/shop';
 import { LoginForm } from 'model/auth';
 import { useNavigate } from 'react-router-dom';
 import usePrevPathStore from 'store/path';
@@ -13,19 +14,26 @@ interface VerifyInput {
 
 export const useLogin = () => {
   const navigate = useNavigate();
-  const { prevPath } = usePrevPathStore((state) => state);
+  const { setPrevPath } = usePrevPathStore((state) => state);
 
   const { mutate, error, isError } = useMutation({
     mutationFn: (variables: LoginForm) => postLogin({
       email: variables.email, password: variables.password,
     }),
-    onSuccess: (data, variables) => {
+    onSuccess: async (data, variables) => {
       if (data.token) { sessionStorage.setItem('access_token', data.token); }
 
       if (variables.isAutoLogin) {
         localStorage.setItem('refresh_token', data.refresh_token);
       }
-      navigate(prevPath, { replace: true });
+
+      const myShopData = await getMyShopList();
+      if (myShopData.count > 0) {
+        setPrevPath('/');
+        navigate('/');
+      } else {
+        navigate('/store-registration');
+      }
     },
     onError: () => {
       sessionStorage.removeItem('access_token');

From 8f40c2ea3a828c4bd19ecd146cc26795b866a037 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Tue, 9 Jan 2024 21:36:42 +0900
Subject: [PATCH 15/39] =?UTF-8?q?refactor:=20onCancel=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?closeModal=EB=A1=9C=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AddMenuImgModal/index.tsx      | 10 +++---
 .../AddMenu/components/MenuImage/index.tsx    | 33 ++++++++++---------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
index 189e2caf..ebe1e032 100644
--- a/src/page/AddMenu/components/AddMenuImgModal/index.tsx
+++ b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
@@ -6,10 +6,10 @@ import styles from './AddMenuImgModal.module.scss';
 
 interface AddMenuImgModalProps {
   isOpen: boolean;
-  onCancel: (event: React.MouseEvent | React.KeyboardEvent<Element>) => void;
+  closeModal: (event: React.MouseEvent | React.KeyboardEvent<Element>) => void;
 }
 
-export default function AddMenuImgModal({ isOpen, onCancel }: AddMenuImgModalProps) {
+export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalProps) {
   const { imgRef, saveImgFile } = useMenuImageUpload();
 
   const handleFileChange = () => {
@@ -23,9 +23,9 @@ export default function AddMenuImgModal({ isOpen, onCancel }: AddMenuImgModalPro
   if (!isOpen) return null;
 
   return createPortal(
-    <div className={styles.modal} onClick={onCancel} onKeyDown={onCancel} role="button" tabIndex={0}>
+    <div className={styles.modal} onClick={closeModal} onKeyDown={closeModal} role="button" tabIndex={0}>
       <div className={styles.content} onClick={(e) => e.stopPropagation()} role="presentation">
-        <button type="button" className={styles['cancel-button']} onClick={onCancel}>
+        <button type="button" className={styles['cancel-button']} onClick={closeModal}>
           <CancelIcon className={styles.cancelIcon} />
         </button>
         <span className={styles['content__main-text']}>이미지 추가</span>
@@ -33,7 +33,7 @@ export default function AddMenuImgModal({ isOpen, onCancel }: AddMenuImgModalPro
         <div className={styles['content__button-container']}>
           <input type="file" accept="image/*" style={{ display: 'none' }} onChange={handleFileChange} ref={imgRef} />
           <button type="button" className={styles['content__album-button']} onClick={triggerFileInput}>사진 앨범</button>
-          <button type="button" className={styles['content__camera-button']} onClick={onCancel}>카메라 촬영</button>
+          <button type="button" className={styles['content__camera-button']} onClick={closeModal}>카메라 촬영</button>
         </div>
       </div>
     </div>,
diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx
index bed47fb4..92ad5b0e 100644
--- a/src/page/AddMenu/components/MenuImage/index.tsx
+++ b/src/page/AddMenu/components/MenuImage/index.tsx
@@ -25,6 +25,7 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
   const handleAddImage = () => {
     imgRef.current?.click();
   };
+
   const handleDeleteImage = (image: string) => {
     removeImageUrl(image);
   };
@@ -38,6 +39,21 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
             <div className={styles.mobile__header__condition}>(최대 이미지 3장)</div>
           </div>
           <div className={styles['mobile__new-image__container']}>
+            {imageUrl.map((image, index) => (
+              <div key={image} className={styles['mobile__new-image__item']}>
+                <img src={image} alt={`Selected ${index + 1}`} className={styles['mobile__new-image__selected']} />
+                {!isComplete && (
+                <button
+                  type="button"
+                  onClick={() => handleDeleteImage(image)}
+                  className={styles['mobile__delete-img-button']}
+                  aria-label="Delete image"
+                >
+                  <MobileDeleteImgIcon className={styles['mobile__delete-img-icon']} />
+                </button>
+                )}
+              </div>
+            ))}
             <button
               type="button"
               className={styles['mobile__new-image__add-btn']}
@@ -46,25 +62,10 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
               <ImgPlusIcon className={styles['mobile__new-image__plusIcon']} />
               <div className={styles['mobile__new-image__add-caption']}>이미지 추가</div>
             </button>
-            {imageUrl.map((image, index) => (
-              <div key={image} className={styles['mobile__new-image__item']}>
-                <img src={image} alt={`Selected ${index + 1}`} className={styles['mobile__new-image__selected']} />
-                {!isComplete && (
-                  <button
-                    type="button"
-                    onClick={() => handleDeleteImage(image)}
-                    className={styles['mobile__delete-img-button']}
-                    aria-label="Delete image"
-                  >
-                    <MobileDeleteImgIcon className={styles['mobile__delete-img-icon']} />
-                  </button>
-                )}
-              </div>
-            ))}
           </div>
           <AddMenuImgModal
             isOpen={isAddMenuImgModal}
-            onCancel={closeAddMenuImgModal}
+            closeModal={closeAddMenuImgModal}
           />
         </div>
       ) : (

From 77dad0277c5be201590bb02f7ca573596958ff69 Mon Sep 17 00:00:00 2001
From: hoooooony <cjh41820@gmail.com>
Date: Tue, 9 Jan 2024 21:43:11 +0900
Subject: [PATCH 16/39] =?UTF-8?q?refactor:=20MenuName=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20nameInput=20=EB=84=A4=EC=9D=B4?=
 =?UTF-8?q?=EB=B0=8D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/AddMenu/components/MenuName/MenuName.module.scss | 4 ++--
 src/page/AddMenu/components/MenuName/index.tsx            | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/page/AddMenu/components/MenuName/MenuName.module.scss b/src/page/AddMenu/components/MenuName/MenuName.module.scss
index 75b2e82e..d727fdd8 100644
--- a/src/page/AddMenu/components/MenuName/MenuName.module.scss
+++ b/src/page/AddMenu/components/MenuName/MenuName.module.scss
@@ -10,7 +10,7 @@
     font-weight: 500;
   }
 
-  &__nameInput {
+  &__name-input {
     width: 100%;
     height: 35px;
     flex-shrink: 0;
@@ -50,7 +50,7 @@
   font-weight: 500;
 }
 
-.nameInput {
+.name-input {
   margin-top: 24px;
   height: 62px;
   width: 100%;
diff --git a/src/page/AddMenu/components/MenuName/index.tsx b/src/page/AddMenu/components/MenuName/index.tsx
index a8f01d2e..4cc009b9 100644
--- a/src/page/AddMenu/components/MenuName/index.tsx
+++ b/src/page/AddMenu/components/MenuName/index.tsx
@@ -23,7 +23,7 @@ export default function MenuName({ isComplete }: MenuNameProps) {
             <span className={styles['mobile__name-text']}>{name}</span>
           ) : (
             <input
-              className={styles.mobile__nameInput}
+              className={styles['mobile__name-input']}
               placeholder="예) 불족발 + 막국수 저녁 SET"
               onChange={handleNameChange}
               value={name}
@@ -39,7 +39,7 @@ export default function MenuName({ isComplete }: MenuNameProps) {
             <span className={styles['name-text']}>{name}</span>
           ) : (
             <input
-              className={styles.nameInput}
+              className={styles['name-input']}
               placeholder="예) 불족발 + 막국수 저녁 SET"
               onChange={handleNameChange}
               value={name}

From eee8a25f673aab94f152c793cfb698054f7e0d71 Mon Sep 17 00:00:00 2001
From: hoooooony <cjh41820@gmail.com>
Date: Tue, 9 Jan 2024 21:56:43 +0900
Subject: [PATCH 17/39] =?UTF-8?q?fix:=20=EA=B0=80=EA=B2=A9=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B2=84=ED=8A=BC=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=84=98=EC=96=B4=EA=B0=90=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
index 9a0fb782..4208a092 100644
--- a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
+++ b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
@@ -275,7 +275,6 @@
   margin-top: 16px;
   gap: 8px;
   height: 28px;
-  width: 107px;
   background-color: white;
 
   &__icon {

From 05210a3d8a233e69b2126db59566173f4707d575 Mon Sep 17 00:00:00 2001
From: Hana Kim <101982606+hanagertrudekim@users.noreply.github.com>
Date: Tue, 9 Jan 2024 22:02:31 +0900
Subject: [PATCH 18/39] Create BUG-REPORT

---
 .github/ISSUE_TEMPLATE/BUG-REPORT | 37 +++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/BUG-REPORT

diff --git a/.github/ISSUE_TEMPLATE/BUG-REPORT b/.github/ISSUE_TEMPLATE/BUG-REPORT
new file mode 100644
index 00000000..6122685d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/BUG-REPORT
@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: Bug
+assignees: ''
+---
+
+<!-- Template from tui.chart -->
+## Describe the bug
+A clear and concise description of what the bug is.
+
+## To Reproduce
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+## Expected behavior
+A clear and concise description of what you expected to happen.
+
+## Screenshot
+If applicable, add screenshots to help explain your problem.
+
+## Environment
+
+**Desktop:**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone:**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]

From f5c1744d32a63abc65999bb64c18c598f31ff61a Mon Sep 17 00:00:00 2001
From: Hana Kim <101982606+hanagertrudekim@users.noreply.github.com>
Date: Tue, 9 Jan 2024 22:03:33 +0900
Subject: [PATCH 19/39] Rename BUG-REPORT to BUG-REPORT.md

---
 .github/ISSUE_TEMPLATE/{BUG-REPORT => BUG-REPORT.md} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename .github/ISSUE_TEMPLATE/{BUG-REPORT => BUG-REPORT.md} (100%)

diff --git a/.github/ISSUE_TEMPLATE/BUG-REPORT b/.github/ISSUE_TEMPLATE/BUG-REPORT.md
similarity index 100%
rename from .github/ISSUE_TEMPLATE/BUG-REPORT
rename to .github/ISSUE_TEMPLATE/BUG-REPORT.md

From d54923052f79e787787014af88c643b40efdd95d Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Tue, 9 Jan 2024 22:29:46 +0900
Subject: [PATCH 20/39] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=A1=B0=EC=A0=88=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AddMenu/components/MenuImage/MenuImage.module.scss   | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
index a6b2632d..39921495 100644
--- a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
+++ b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
@@ -69,9 +69,8 @@
 
   &__selected {
     flex-shrink: 0;
-    width: 100%;
-    width: 264px;
-    height: 176px;
+    max-width: 264px;
+    max-height: 176px;
   }
 
   &__delete-img-button {
@@ -174,8 +173,8 @@
     }
 
     &__selected {
-      width: 137px;
-      height: 137px;
+      max-width: 137px;
+      max-height: 137px;
     }
   }
 

From c0db509169122a770b45ee9ba93fd9edc0d564e1 Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Tue, 9 Jan 2024 23:23:43 +0900
Subject: [PATCH 21/39] =?UTF-8?q?fix:=20=EB=AA=A8=EB=93=A0=20=EB=82=A0?=
 =?UTF-8?q?=EC=9D=B4=20=ED=9C=B4=EB=AC=B4=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20?=
 =?UTF-8?q?UI=20=EB=B0=8F=20=EB=A1=9C=EC=A7=81=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/ShopRegistration/hooks/CheckSameTime.ts | 5 +++--
 src/page/ShopRegistration/view/PC/index.tsx      | 8 +++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/page/ShopRegistration/hooks/CheckSameTime.ts b/src/page/ShopRegistration/hooks/CheckSameTime.ts
index 8f5adef9..efc6b675 100644
--- a/src/page/ShopRegistration/hooks/CheckSameTime.ts
+++ b/src/page/ShopRegistration/hooks/CheckSameTime.ts
@@ -30,15 +30,16 @@ export default function CheckSameTime() {
       return time === nonClosedCloseTime;
     });
   }, [closeTimeArray, storeClosedArray]);
+  const isAllClosed = storeClosedArray.every((closed) => closed);
   const isSpecificDayClosedAndAllSameTime = hasClosedDay
     && isAllSameOpenTimeExceptClosedDays
-    && isAllSameCloseTimeExceptClosedDays;
-
+    && isAllSameCloseTimeExceptClosedDays && !isAllClosed;
   return {
     isAllSameTime,
     hasClosedDay,
     isAllSameOpenTimeExceptClosedDays,
     isAllSameCloseTimeExceptClosedDays,
     isSpecificDayClosedAndAllSameTime,
+    isAllClosed,
   };
 }
diff --git a/src/page/ShopRegistration/view/PC/index.tsx b/src/page/ShopRegistration/view/PC/index.tsx
index b28933f8..43331387 100644
--- a/src/page/ShopRegistration/view/PC/index.tsx
+++ b/src/page/ShopRegistration/view/PC/index.tsx
@@ -74,6 +74,7 @@ export default function ShopRegistrationPC() {
     isAllSameTime,
     hasClosedDay,
     isSpecificDayClosedAndAllSameTime,
+    isAllClosed,
   } = CheckSameTime();
 
   const {
@@ -248,7 +249,7 @@ export default function ShopRegistrationPC() {
                         ) : null
                       }
                       {
-                        !isAllSameTime && !isSpecificDayClosedAndAllSameTime ? (
+                        !isAllSameTime && !isSpecificDayClosedAndAllSameTime && !isAllClosed ? (
                           <>
                             {WEEK.map((day) => (
                               <div key={day}>
@@ -258,6 +259,11 @@ export default function ShopRegistrationPC() {
                           </>
                         ) : null
                       }
+                      {
+                        isAllClosed ? (
+                          <span>매일 휴무</span>
+                        ) : null
+                      }
                     </div>
                   </div>
                   <CustomButton content="시간수정" buttonSize="small" onClick={openOperateTime} />

From 4237535eed83d19cd1e6b794fd27a42052694839 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Tue, 9 Jan 2024 23:56:26 +0900
Subject: [PATCH 22/39] =?UTF-8?q?refactor:=20option=5Fprices=20option?=
 =?UTF-8?q?=EC=9D=98=20price=20=ED=83=80=EC=9E=85=20int=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/AddMenu/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/page/AddMenu/index.tsx b/src/page/AddMenu/index.tsx
index 78625ed2..5d2a0c6d 100644
--- a/src/page/AddMenu/index.tsx
+++ b/src/page/AddMenu/index.tsx
@@ -44,7 +44,7 @@ export default function AddMenu() {
       name,
       option_prices: optionPrices.map(({ option, price }) => ({
         option,
-        price: typeof price === 'string' ? parseFloat(price) : price,
+        price: typeof price === 'string' ? parseInt(price, 10) : price,
       })),
       single_price: singlePrice,
     };

From 2b96894a96e45a2cfc6fe2cf1bf074cb42e2c676 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Wed, 10 Jan 2024 00:17:44 +0900
Subject: [PATCH 23/39] =?UTF-8?q?refactor:=20shopid=20=EB=84=A4=EC=9D=B4?=
 =?UTF-8?q?=EB=B0=8D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/shop/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/shop/index.ts b/src/api/shop/index.ts
index 5c9eb418..f75656f4 100644
--- a/src/api/shop/index.ts
+++ b/src/api/shop/index.ts
@@ -25,6 +25,6 @@ export const getShopList = async () => {
   return ShopListRes.parse(data);
 };
 
-export const addMenu = (shopid:number, param: NewMenu) => accessClient.post(`/owner/shops/${shopid}/menus`, param);
+export const addMenu = (shopId:number, param: NewMenu) => accessClient.post(`/owner/shops/${shopId}/menus`, param);
 
 export const postShop = (data: OwnerShop) => accessClient.post('/owner/shops', data);

From 6721660dfba0348b49d38f06d98204e890f0a991 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Wed, 10 Jan 2024 00:30:51 +0900
Subject: [PATCH 24/39] =?UTF-8?q?refactor:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20=EC=84=A0=ED=83=9D=20=EC=A4=91=EB=B3=B5=EB=90=98?=
 =?UTF-8?q?=EB=8A=94=20=EB=A1=9C=EC=A7=81=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AddMenu/components/MenuCategory/index.tsx    | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/page/AddMenu/components/MenuCategory/index.tsx b/src/page/AddMenu/components/MenuCategory/index.tsx
index 626c3c8f..54fc93da 100644
--- a/src/page/AddMenu/components/MenuCategory/index.tsx
+++ b/src/page/AddMenu/components/MenuCategory/index.tsx
@@ -20,17 +20,11 @@ export default function MenuCategory({ isComplete }:MenuCategoryProps) {
   const { setCategoryIds } = useAddMenuStore();
   const [selectedCategories, setSelectedCategories] = useState<MenuCategory[]>([]);
   const appendSelectCategory = (category: MenuCategory) => {
-    if (selectedCategories.some((alreadySelected) => alreadySelected.id === category.id)) {
-      const newSelected = selectedCategories.filter(
-        (alreadySelected) => alreadySelected.id !== category.id,
-      );
-      setSelectedCategories(newSelected);
-      setCategoryIds(newSelected.map((cat) => cat.id));
-    } else {
-      const newSelected = [...selectedCategories, category];
-      setSelectedCategories(newSelected);
-      setCategoryIds(newSelected.map((cat) => cat.id));
-    }
+    const newSelected = selectedCategories.some((c) => c.id === category.id)
+      ? selectedCategories.filter((c) => c.id !== category.id)
+      : [...selectedCategories, category];
+    setSelectedCategories(newSelected);
+    setCategoryIds(newSelected.map((cat) => cat.id));
   };
 
   return (

From 81539046327a505ce54466818a0f223489f16bd0 Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 12:22:29 +0900
Subject: [PATCH 25/39] =?UTF-8?q?fix:=20=EB=AA=A8=EB=93=A0=20=EB=82=A0?=
 =?UTF-8?q?=EC=9D=B4=20=ED=9C=B4=EB=AC=B4=EC=9D=B8=20=EA=B2=BD=EC=9A=B0?=
 =?UTF-8?q?=EC=9D=98=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20UI=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ShopRegistration/view/Mobile/Sub/index.tsx     | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/page/ShopRegistration/view/Mobile/Sub/index.tsx b/src/page/ShopRegistration/view/Mobile/Sub/index.tsx
index d4e69d42..a102a4e9 100644
--- a/src/page/ShopRegistration/view/Mobile/Sub/index.tsx
+++ b/src/page/ShopRegistration/view/Mobile/Sub/index.tsx
@@ -33,7 +33,12 @@ export default function Sub() {
   } = useShopRegistrationStore();
 
   const operateTimeState = useOperateTimeState();
-  const { isAllSameTime, hasClosedDay, isSpecificDayClosedAndAllSameTime } = CheckSameTime();
+  const {
+    isAllSameTime,
+    hasClosedDay,
+    isSpecificDayClosedAndAllSameTime,
+    isAllClosed,
+  } = CheckSameTime();
   const { shopClosedState } = useModalStore();
 
   const formatPhoneNumber = (inputNumber: string) => {
@@ -96,7 +101,7 @@ export default function Sub() {
             ) : null
           }
           {
-            !isAllSameTime && !isSpecificDayClosedAndAllSameTime ? (
+            !isAllSameTime && !isSpecificDayClosedAndAllSameTime && !isAllClosed ? (
               <>
                 {WEEK.map((day) => (
                   <div key={day}>
@@ -106,6 +111,11 @@ export default function Sub() {
               </>
             ) : null
           }
+          {
+            isAllClosed ? (
+              <span>매일 휴무</span>
+            ) : null
+          }
         </span>
         <button
           type="button"

From e9f1d7bfd677afa0fd6647d5d628fcd8d01ab427 Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 15:54:57 +0900
Subject: [PATCH 26/39] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=20=EB=A9=94?=
 =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EB=AC=B8=EA=B5=AC=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/ShopRegistration/constant/errorMessage.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/page/ShopRegistration/constant/errorMessage.ts

diff --git a/src/page/ShopRegistration/constant/errorMessage.ts b/src/page/ShopRegistration/constant/errorMessage.ts
new file mode 100644
index 00000000..1a5f0eee
--- /dev/null
+++ b/src/page/ShopRegistration/constant/errorMessage.ts
@@ -0,0 +1,10 @@
+export const ERRORMESSAGE = {
+  image: '이미지를 등록해주세요.',
+  category: '카테고리를 선택해주세요.',
+  owner: '대표자명을 입력해주세요',
+  name: '가게명을 입력해주세요',
+  address: '주소를 입력해주세요.',
+  phone: '전화번호를 입력해주세요.',
+  deliveryPrice: '배달금액을 입력해주세요.',
+  invalidPhone: '전화번호 형식이 올바르지 않습니다.',
+};

From 991de89b42d7711c84d74dafbb90ec2b5316f236 Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 15:56:30 +0900
Subject: [PATCH 27/39] =?UTF-8?q?refactor:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EB=AF=B8=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EC=8B=9C=20=EC=97=90=EB=9F=AC=20=ED=95=B8=EB=93=A4?=
 =?UTF-8?q?=EB=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ShopCategory/ShopCategory.module.scss     |  6 ++++-
 .../view/Mobile/ShopCategory/index.tsx        | 22 +++++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/page/ShopRegistration/view/Mobile/ShopCategory/ShopCategory.module.scss b/src/page/ShopRegistration/view/Mobile/ShopCategory/ShopCategory.module.scss
index e7b0f899..b8b0762d 100644
--- a/src/page/ShopRegistration/view/Mobile/ShopCategory/ShopCategory.module.scss
+++ b/src/page/ShopRegistration/view/Mobile/ShopCategory/ShopCategory.module.scss
@@ -47,7 +47,7 @@
   &__button {
     display: flex;
     justify-content: flex-end;
-    margin-top: 155px;
+    margin-top: 130px;
 
     button {
       padding: 8px 40px;
@@ -57,5 +57,9 @@
       color: #ffffff;
       cursor: pointer;
     }
+
+    &--error {
+      margin-top: 111px;
+    }
   }
 }
diff --git a/src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx b/src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx
index 7761680e..46491899 100644
--- a/src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx
+++ b/src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx
@@ -3,9 +3,13 @@ import useShopCategory from 'query/shopCategory';
 import cn from 'utils/ts/className';
 import { Category as CategoryProps } from 'model/category/storeCategory';
 import useShopRegistrationStore from 'store/shopRegistration';
+import { useState } from 'react';
+import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
+import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
 import styles from './ShopCategory.module.scss';
 
 export default function ShopCategory() {
+  const [isError, setIsError] = useState(false);
   const { categoryList } = useShopCategory();
   const { increaseStep } = useStepStore();
   const {
@@ -17,6 +21,15 @@ export default function ShopCategory() {
     setCategoryId(categoryInfo.id);
   };
 
+  const handleNextClick = () => {
+    if (category === '') {
+      setIsError(true);
+    } else {
+      setIsError(false);
+      increaseStep();
+    }
+  };
+
   return (
     <div className={styles.category}>
       <div className={styles.category__title}>카테고리를 골라주세요.</div>
@@ -40,8 +53,13 @@ export default function ShopCategory() {
           </button>
         ))}
       </div>
-      <div className={styles.category__button}>
-        <button type="button" onClick={increaseStep}>다음</button>
+      {category === '' && isError && <ErrorMessage message={ERRORMESSAGE.category} />}
+      <div className={cn({
+        [styles.category__button]: true,
+        [styles['category__button--error']]: category === '' && isError,
+      })}
+      >
+        <button type="button" onClick={handleNextClick}>다음</button>
       </div>
     </div>
   );

From 693b496eefe82b40bb73997cc5bc3c416e4ed0b3 Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 15:57:02 +0900
Subject: [PATCH 28/39] =?UTF-8?q?refactor:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=20=EB=A9=94=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AF=B8?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20=EC=97=90=EB=9F=AC=20=ED=95=B8?=
 =?UTF-8?q?=EB=93=A4=EB=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../view/Mobile/Main/Main.module.scss         | 20 ++++++--
 .../view/Mobile/Main/index.tsx                | 50 +++++++++++++++++--
 2 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss b/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss
index aaf0918b..ce0cd881 100644
--- a/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss
+++ b/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss
@@ -28,7 +28,19 @@
     width: 295px;
     height: 200px;
     border: 1px solid #858585;
-    margin-bottom: 32px;
+    margin-bottom: 19px;
+
+    &--error {
+      margin-bottom: 0;
+    }
+  }
+
+  &__image-error-message {
+    margin-bottom: 11px;
+  }
+
+  &__error-message {
+    margin-bottom: 4px;
   }
 
   &__upload-file {
@@ -49,14 +61,14 @@
   &__label {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 24px;
+    margin-bottom: 21px;
     align-items: center;
     font-weight: 500;
     font-size: 14px;
     color: #175c8e;
 
-    &:last-of-type {
-      margin-bottom: 32px;
+    &--error {
+      margin-bottom: 2px;
     }
   }
 
diff --git a/src/page/ShopRegistration/view/Mobile/Main/index.tsx b/src/page/ShopRegistration/view/Mobile/Main/index.tsx
index a02aba07..0dfdaf60 100644
--- a/src/page/ShopRegistration/view/Mobile/Main/index.tsx
+++ b/src/page/ShopRegistration/view/Mobile/Main/index.tsx
@@ -3,22 +3,41 @@ import { ReactComponent as EmptyImgIcon } from 'assets/svg/shopRegistration/mobi
 import useStepStore from 'store/useStepStore';
 import useImageUpload from 'utils/hooks/useImageUpload';
 import useShopRegistrationStore from 'store/shopRegistration';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
+import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
+import cn from 'utils/ts/className';
 import styles from './Main.module.scss';
 
 export default function Main() {
+  const [isError, setIsError] = useState(false);
   const { increaseStep } = useStepStore();
   const { imageFile, imgRef, saveImgFile } = useImageUpload();
   const {
     name, setName, address, setAddress, imageUrl, setImageUrl,
   } = useShopRegistrationStore();
 
+  const handleNextClick = () => {
+    if (name === '' || address === '' || imageUrl === '') {
+      setIsError(true);
+    } else {
+      setIsError(false);
+      increaseStep();
+    }
+  };
+
   useEffect(() => {
     if (imageFile !== '') setImageUrl(imageFile);
   }, [imageFile]);
   return (
     <div className={styles.form}>
-      <label className={styles['form__image-upload']} htmlFor="mainMenuImage">
+      <label
+        className={cn({
+          [styles['form__image-upload']]: true,
+          [styles['form__image-upload--error']]: imageUrl === '' && isError,
+        })}
+        htmlFor="mainMenuImage"
+      >
         <input
           type="file"
           accept="image/*"
@@ -36,7 +55,16 @@ export default function Main() {
             </>
           )}
       </label>
-      <label htmlFor="name" className={styles.form__label}>
+      <div className={styles['form__image-error-message']}>
+        {imageUrl === '' && isError && <ErrorMessage message={ERRORMESSAGE.image} />}
+      </div>
+      <label
+        htmlFor="name"
+        className={cn({
+          [styles.form__label]: true,
+          [styles['form__label--error']]: name === '' && isError,
+        })}
+      >
         가게명
         <input
           type="text"
@@ -46,7 +74,16 @@ export default function Main() {
           className={styles.form__input}
         />
       </label>
-      <label htmlFor="address" className={styles.form__label}>
+      <div className={styles['form__error-message']}>
+        {name === '' && isError && <ErrorMessage message={ERRORMESSAGE.name} />}
+      </div>
+      <label
+        htmlFor="address"
+        className={cn({
+          [styles.form__label]: true,
+          [styles['form__label--error']]: address === '' && isError,
+        })}
+      >
         주소정보
         <input
           type="text"
@@ -56,8 +93,11 @@ export default function Main() {
           className={styles.form__input}
         />
       </label>
+      <div className={styles['form__error-message']}>
+        {address === '' && isError && <ErrorMessage message={ERRORMESSAGE.address} />}
+      </div>
       <div className={styles.form__button}>
-        <button type="button" onClick={increaseStep}>다음</button>
+        <button type="button" onClick={handleNextClick}>다음</button>
       </div>
     </div>
   );

From 24297058624d8894a77ce090112c583773a5de91 Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 15:57:36 +0900
Subject: [PATCH 29/39] =?UTF-8?q?refactor:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=20=EC=84=9C=EB=B8=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AF=B8?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20=EC=97=90=EB=9F=AC=20=ED=95=B8?=
 =?UTF-8?q?=EB=93=A4=EB=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../view/Mobile/Sub/Sub.module.scss           | 10 ++++-
 .../view/Mobile/Sub/index.tsx                 | 44 +++++++++++++++----
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/page/ShopRegistration/view/Mobile/Sub/Sub.module.scss b/src/page/ShopRegistration/view/Mobile/Sub/Sub.module.scss
index 0a4c77c8..8f3df1a0 100644
--- a/src/page/ShopRegistration/view/Mobile/Sub/Sub.module.scss
+++ b/src/page/ShopRegistration/view/Mobile/Sub/Sub.module.scss
@@ -6,12 +6,16 @@
   &__label {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 24px;
+    margin-bottom: 19px;
     align-items: center;
     font-weight: 500;
     font-size: 14px;
     color: #175c8e;
 
+    &--error {
+      margin-bottom: 0;
+    }
+
     span {
       width: 160px;
       color: #858585;
@@ -95,4 +99,8 @@
       background-color: #f7941e;
     }
   }
+
+  &__error-message {
+    margin-bottom: 5px;
+  }
 }
diff --git a/src/page/ShopRegistration/view/Mobile/Sub/index.tsx b/src/page/ShopRegistration/view/Mobile/Sub/index.tsx
index d4e69d42..299a4bfa 100644
--- a/src/page/ShopRegistration/view/Mobile/Sub/index.tsx
+++ b/src/page/ShopRegistration/view/Mobile/Sub/index.tsx
@@ -7,6 +7,10 @@ import useOperateTimeState from 'page/ShopRegistration/hooks/useOperateTimeState
 import CheckSameTime from 'page/ShopRegistration/hooks/CheckSameTime';
 import { WEEK } from 'utils/constant/week';
 import useModalStore from 'store/modalStore';
+import { useState } from 'react';
+import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
+import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
+import cn from 'utils/ts/className';
 import styles from './Sub.module.scss';
 
 export default function Sub() {
@@ -21,9 +25,6 @@ export default function Sub() {
   } = useShopRegistrationStore();
 
   const {
-    category,
-    name,
-    address,
     phone,
     deliveryPrice,
     description,
@@ -35,6 +36,7 @@ export default function Sub() {
   const operateTimeState = useOperateTimeState();
   const { isAllSameTime, hasClosedDay, isSpecificDayClosedAndAllSameTime } = CheckSameTime();
   const { shopClosedState } = useModalStore();
+  const [isError, setIsError] = useState(false);
 
   const formatPhoneNumber = (inputNumber: string) => {
     const phoneNumber = inputNumber.replace(/\D/g, '');
@@ -42,10 +44,15 @@ export default function Sub() {
     return formattedPhoneNumber;
   };
 
+  const phoneNumberPattern = /^\d{3}-\d{4}-\d{4}$/;
+  const isValidPhoneNumber = phoneNumberPattern.test(phone);
   const handleNextClick = () => {
-    if (category === '' || name === '' || address === '' || phone === '' || deliveryPrice === '') {
-      // TODO: 필수 입력 사항이 없을 때 알림 컴포넌트 띄우기
-    } else increaseStep();
+    if (phone === '' || deliveryPrice === '' || !isValidPhoneNumber) {
+      setIsError(true);
+    } else {
+      setIsError(false);
+      increaseStep();
+    }
   };
 
   if (showOperateTime) {
@@ -56,7 +63,13 @@ export default function Sub() {
 
   return (
     <div className={styles.form}>
-      <label htmlFor="phone" className={styles.form__label}>
+      <label
+        htmlFor="phone"
+        className={cn({
+          [styles.form__label]: true,
+          [styles['form__label--error']]: (phone === '' || !isValidPhoneNumber) && isError,
+        })}
+      >
         전화번호
         <input
           type="text"
@@ -66,16 +79,29 @@ export default function Sub() {
           className={styles.form__input}
         />
       </label>
-      <label htmlFor="deliveryPrice" className={styles.form__label}>
+      <div className={styles['form__error-message']}>
+        {phone === '' && isError && <ErrorMessage message={ERRORMESSAGE.phone} />}
+        {(!isValidPhoneNumber && phone !== '' && isError) && <ErrorMessage message={ERRORMESSAGE.invalidPhone} />}
+      </div>
+      <label
+        htmlFor="deliveryPrice"
+        className={cn({
+          [styles.form__label]: true,
+          [styles['form__label--error']]: deliveryPrice === '' && isError,
+        })}
+      >
         배달금액
         <input
-          type="number"
+          type="text"
           id="deliveryPrice"
           onChange={(e) => setDeliveryPrice(e.target.value)}
           value={deliveryPrice}
           className={styles.form__input}
         />
       </label>
+      <div className={styles['form__error-message']}>
+        {deliveryPrice === '' && isError && <ErrorMessage message={ERRORMESSAGE.deliveryPrice} />}
+      </div>
       <div className={styles.form__label}>
         운영시간
         <span>

From 488c888792d84e7b186437800f01aeebe71d35cb Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 15:58:18 +0900
Subject: [PATCH 30/39] =?UTF-8?q?feat:=20PC=20=EA=B0=80=EA=B2=8C=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=EC=A0=95=EB=B3=B4=20=EB=AF=B8=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EC=8B=9C=20=EC=97=90=EB=9F=AC=20=ED=95=B8=EB=93=A4?=
 =?UTF-8?q?=EB=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/ShopRegistration/view/PC/index.tsx | 56 ++++++++++++++++++---
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/page/ShopRegistration/view/PC/index.tsx b/src/page/ShopRegistration/view/PC/index.tsx
index b28933f8..a19a6177 100644
--- a/src/page/ShopRegistration/view/PC/index.tsx
+++ b/src/page/ShopRegistration/view/PC/index.tsx
@@ -2,7 +2,7 @@
 import { ReactComponent as Memo } from 'assets/svg/shopRegistration/memo.svg';
 import { ReactComponent as Logo } from 'assets/svg/auth/koin-logo.svg';
 import { ReactComponent as Cutlery } from 'assets/svg/shopRegistration/cutlery.svg';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import useStepStore from 'store/useStepStore';
 import Copyright from 'component/common/Copyright';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
@@ -26,6 +26,8 @@ import useImageUpload from 'utils/hooks/useImageUpload';
 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 styles from './ShopRegistrationPC.module.scss';
 
 export default function ShopRegistrationPC() {
@@ -53,6 +55,7 @@ export default function ShopRegistrationPC() {
     setFalse: closeConfirmPopup,
   } = useBooleanState(false);
   const { imageFile, imgRef, saveImgFile } = useImageUpload();
+  const [isError, setIsError] = useState(false);
 
   const {
     openTimeState,
@@ -61,11 +64,21 @@ export default function ShopRegistrationPC() {
   } = useModalStore();
 
   const {
-    setImageUrl, setName, setDelivery, setPayCard, setPayBank,
+    setImageUrl, setOwner, setName, setDelivery, setPayCard, setPayBank,
   } = useShopRegistrationStore();
 
   const {
-    imageUrl, categoryId, category, name, delivery, payCard, payBank, deliveryPrice,
+    imageUrl,
+    categoryId,
+    category,
+    owner,
+    name,
+    delivery,
+    payCard,
+    payBank,
+    deliveryPrice,
+    address,
+    phone,
   } = useShopRegistrationStore();
 
   const operateTimeState = useOperateTimeState();
@@ -87,6 +100,17 @@ export default function ShopRegistrationPC() {
     onSuccess: () => setStep(5),
   });
 
+  const phoneNumberPattern = /^\d{3}-\d{4}-\d{4}$/;
+  const isValidPhoneNumber = phoneNumberPattern.test(phone);
+  const handleNextClick = () => {
+    if (imageUrl === '' || name === '' || category === '' || deliveryPrice === '' || address === '' || phone === '' || !isValidPhoneNumber) {
+      setIsError(true);
+    } else {
+      setIsError(false);
+      openConfirmPopup();
+    }
+  };
+
   const openTimeArray = Object.values(openTimeState);
   const closeTimeArray = Object.values(closeTimeState);
   const shopClosedArray = Object.values(shopClosedState);
@@ -166,6 +190,7 @@ export default function ShopRegistrationPC() {
                       </>
                     )}
                 </label>
+                {imageUrl === '' && isError && <ErrorMessage message={ERRORMESSAGE.image} />}
               </div>
               <div>
                 <span className={styles.form__title}>카테고리</span>
@@ -178,6 +203,7 @@ export default function ShopRegistrationPC() {
                   />
                   <CustomButton content="카테고리 검색" buttonSize="small" onClick={openCategory} />
                 </div>
+                {category === '' && isError && <ErrorMessage message={ERRORMESSAGE.category} />}
               </div>
               <CustomModal
                 buttonText="다음"
@@ -196,8 +222,13 @@ export default function ShopRegistrationPC() {
                   <input
                     type="text"
                     className={styles['form__input-large']}
+                    value={owner}
+                    onChange={(e) => {
+                      setOwner(e.target.value);
+                    }}
                   />
                 </div>
+                {owner === '' && isError && <ErrorMessage message={ERRORMESSAGE.owner} />}
               </div>
               <div>
                 <span className={styles.form__title}>가게명</span>
@@ -212,6 +243,7 @@ export default function ShopRegistrationPC() {
                   />
                   <CustomButton content="가게검색" buttonSize="small" onClick={openSearchShop} />
                 </div>
+                {name === '' && isError && <ErrorMessage message={ERRORMESSAGE.name} />}
               </div>
               <CustomModal
                 title="가게검색"
@@ -223,9 +255,19 @@ export default function ShopRegistrationPC() {
               >
                 <SearchShop open={showSearchShop} onCancel={closeSearchShop} />
               </CustomModal>
-              <InputBox content="주소정보" id="address" register={register} inputType="text" />
-              <InputBox content="전화번호" id="phone" register={register} inputType="tel" />
-              <InputBox content="배달금액" id="delivery_price" register={register} inputType="number" />
+              <div>
+                <InputBox content="주소정보" id="address" register={register} inputType="text" />
+                {address === '' && isError && <ErrorMessage message={ERRORMESSAGE.address} />}
+              </div>
+              <div>
+                <InputBox content="전화번호" id="phone" register={register} inputType="tel" />
+                {phone === '' && isError && <ErrorMessage message={ERRORMESSAGE.phone} />}
+                {(!isValidPhoneNumber && phone !== '' && isError) && <ErrorMessage message={ERRORMESSAGE.invalidPhone} />}
+              </div>
+              <div>
+                <InputBox content="배달금액" id="delivery_price" register={register} inputType="text" />
+                {deliveryPrice === '' && isError && <ErrorMessage message={ERRORMESSAGE.deliveryPrice} />}
+              </div>
               <div>
                 <span className={styles.form__title}>운영시간</span>
                 <div className={styles.form__section}>
@@ -314,7 +356,7 @@ export default function ShopRegistrationPC() {
                 <CustomButton
                   content="다음"
                   buttonSize="large"
-                  onClick={openConfirmPopup}
+                  onClick={handleNextClick}
                 />
               </div>
               <ConfirmPopup

From 36fd9f2d7443f6941218d97748f416e11aad271d Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 15:58:51 +0900
Subject: [PATCH 31/39] =?UTF-8?q?feat:=20=EB=8C=80=ED=91=9C=EC=9E=90?=
 =?UTF-8?q?=EB=AA=85=20=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/shopRegistration.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/store/shopRegistration.ts b/src/store/shopRegistration.ts
index 26546797..26fefe98 100644
--- a/src/store/shopRegistration.ts
+++ b/src/store/shopRegistration.ts
@@ -7,6 +7,7 @@ interface ShopRegistrationStore {
   deliveryPrice: number | string;
   description: string;
   imageUrl: string;
+  owner: string;
   name: string;
   phone: string;
   delivery: boolean;
@@ -18,6 +19,7 @@ interface ShopRegistrationStore {
   setDeliveryPrice: (deliveryPrice: number | string) => void;
   setDescription: (description: string) => void;
   setImageUrl: (imageUrl: string) => void;
+  setOwner: (owner: string) => void;
   setName: (name: string) => void;
   setPhone: (phone: string) => void;
   setDelivery: (delivery: boolean) => void;
@@ -32,6 +34,7 @@ const useShopRegistrationStore = create<ShopRegistrationStore>((set) => ({
   deliveryPrice: '',
   description: '',
   imageUrl: '',
+  owner: '',
   name: '',
   phone: '',
   delivery: false,
@@ -43,6 +46,7 @@ const useShopRegistrationStore = create<ShopRegistrationStore>((set) => ({
   setDeliveryPrice: (deliveryPrice: number | string) => set({ deliveryPrice }),
   setDescription: (description: string) => set({ description }),
   setImageUrl: (imageUrl: string) => set({ imageUrl }),
+  setOwner: (owner: string) => set({ owner }),
   setName: (name: string) => set({ name }),
   setPhone: (phone: string) => set({ phone }),
   setDelivery: (delivery: boolean) => set({ delivery }),

From 480b88b0fa283990f9344f705749cc4215cc3aae Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 22:09:06 +0900
Subject: [PATCH 32/39] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=8B=A4=ED=8C=A8=20=EC=8B=9C=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/ShopRegistration/constant/errorMessage.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/page/ShopRegistration/constant/errorMessage.ts b/src/page/ShopRegistration/constant/errorMessage.ts
index 1a5f0eee..69643fbc 100644
--- a/src/page/ShopRegistration/constant/errorMessage.ts
+++ b/src/page/ShopRegistration/constant/errorMessage.ts
@@ -1,5 +1,6 @@
 export const ERRORMESSAGE = {
   image: '이미지를 등록해주세요.',
+  imageUpload: '이미지 등록에 실패했습니다. 다시 시도해주세요.',
   category: '카테고리를 선택해주세요.',
   owner: '대표자명을 입력해주세요',
   name: '가게명을 입력해주세요',

From feafb1a969357658bb4eeba6d300c0f66127d230 Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 22:09:34 +0900
Subject: [PATCH 33/39] =?UTF-8?q?fix:=20=EA=B0=80=EA=B2=8C=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=8B=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EA=B0=80=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EB=90=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/hooks/useImageUpload.ts | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/utils/hooks/useImageUpload.ts b/src/utils/hooks/useImageUpload.ts
index d94a46ad..7b62985c 100644
--- a/src/utils/hooks/useImageUpload.ts
+++ b/src/utils/hooks/useImageUpload.ts
@@ -1,23 +1,35 @@
+import { uploadFile } from 'api/uploadFile/Uploadfile';
 import { useRef, useState } from 'react';
 
 export default function useImageUpload() {
   const [imageFile, setImageFile] = useState('');
+  const [isUploadError, setIsUploadError] = useState(false);
   const imgRef = useRef<HTMLInputElement>(null);
 
-  const saveImgFile = () => {
+  const saveImgFile = async () => {
     const file = imgRef.current?.files?.[0];
     const reader = new FileReader();
 
-    reader.onloadend = () => {
-      const { result } = reader;
-      if (typeof result === 'string') {
-        setImageFile(result);
-      }
-    };
     if (file) {
+      const formData = new FormData();
+      formData.append('multipartFile', file);
+      try {
+        const data = await uploadFile(formData);
+
+        if (data?.data?.file_url) {
+          setImageFile(`https://${data.data.file_url}`);
+        }
+      } catch (error) {
+        if (error) {
+          setIsUploadError(true);
+        }
+      }
+      setIsUploadError(false);
       reader.readAsDataURL(file);
     }
   };
 
-  return { imageFile, imgRef, saveImgFile };
+  return {
+    imageFile, imgRef, saveImgFile, isUploadError,
+  };
 }

From 0b37c1f461a77e80221f1088abcfa1c619babd8f Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 22:09:56 +0900
Subject: [PATCH 34/39] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=8B=A4=ED=8C=A8=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=ED=95=B8=EB=93=A4=EB=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/ShopRegistration/view/Mobile/Main/index.tsx | 5 ++++-
 src/page/ShopRegistration/view/PC/index.tsx          | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/page/ShopRegistration/view/Mobile/Main/index.tsx b/src/page/ShopRegistration/view/Mobile/Main/index.tsx
index 0dfdaf60..cfe2ed8c 100644
--- a/src/page/ShopRegistration/view/Mobile/Main/index.tsx
+++ b/src/page/ShopRegistration/view/Mobile/Main/index.tsx
@@ -12,7 +12,9 @@ import styles from './Main.module.scss';
 export default function Main() {
   const [isError, setIsError] = useState(false);
   const { increaseStep } = useStepStore();
-  const { imageFile, imgRef, saveImgFile } = useImageUpload();
+  const {
+    imageFile, imgRef, saveImgFile, isUploadError,
+  } = useImageUpload();
   const {
     name, setName, address, setAddress, imageUrl, setImageUrl,
   } = useShopRegistrationStore();
@@ -57,6 +59,7 @@ export default function Main() {
       </label>
       <div className={styles['form__image-error-message']}>
         {imageUrl === '' && isError && <ErrorMessage message={ERRORMESSAGE.image} />}
+        {imageUrl !== '' && isUploadError && <ErrorMessage message={ERRORMESSAGE.imageUpload} />}
       </div>
       <label
         htmlFor="name"
diff --git a/src/page/ShopRegistration/view/PC/index.tsx b/src/page/ShopRegistration/view/PC/index.tsx
index a29b36ec..ce194aba 100644
--- a/src/page/ShopRegistration/view/PC/index.tsx
+++ b/src/page/ShopRegistration/view/PC/index.tsx
@@ -54,7 +54,9 @@ export default function ShopRegistrationPC() {
     setTrue: openConfirmPopup,
     setFalse: closeConfirmPopup,
   } = useBooleanState(false);
-  const { imageFile, imgRef, saveImgFile } = useImageUpload();
+  const {
+    imageFile, imgRef, saveImgFile, isUploadError,
+  } = useImageUpload();
   const [isError, setIsError] = useState(false);
 
   const {
@@ -192,6 +194,7 @@ export default function ShopRegistrationPC() {
                     )}
                 </label>
                 {imageUrl === '' && isError && <ErrorMessage message={ERRORMESSAGE.image} />}
+                {imageUrl !== '' && isUploadError && <ErrorMessage message={ERRORMESSAGE.imageUpload} />}
               </div>
               <div>
                 <span className={styles.form__title}>카테고리</span>

From 601a075e78ecc41a2f6cf2f00098d1829a9e2a62 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Wed, 10 Jan 2024 22:47:43 +0900
Subject: [PATCH 35/39] =?UTF-8?q?fix:=20=EB=A9=94=EB=89=B4=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=ED=9B=84=20=EB=82=B4=EC=83=81=EC=A0=90=EC=97=90=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=95=88=EB=90=98=EB=8D=98=20=EB=B6=80=EB=B6=84=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/query/shop.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/query/shop.ts b/src/query/shop.ts
index ec58cbd7..bce9ff64 100644
--- a/src/query/shop.ts
+++ b/src/query/shop.ts
@@ -1,4 +1,4 @@
-import { useQuery, useMutation } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import {
   getMyShopList, getShopInfo, getMenuInfoList, addMenu,
 } from 'api/shop';
@@ -7,6 +7,7 @@ import { NewMenu } from 'model/shopInfo/newMenu';
 
 const useMyShop = () => {
   const myShopQueryKey = useUserStore.getState().user?.company_number;
+  const queryClient = useQueryClient();
 
   const { data: myShop } = useQuery({
     queryKey: ['myShop', myShopQueryKey],
@@ -39,6 +40,9 @@ const useMyShop = () => {
       }
       throw new Error('Invalid shopId');
     },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['myMenuInfo', shopId] });
+    },
   });
 
   return {

From d458d42d51e9a5007ef062e7750e0c5141eea857 Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 23:24:54 +0900
Subject: [PATCH 36/39] =?UTF-8?q?feat:=20key=EA=B0=92=EC=9D=B4=20=EC=A1=B4?=
 =?UTF-8?q?=EC=9E=AC=ED=95=98=EC=A7=80=20=EC=95=8A=EC=95=84=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/MyShopPage/components/ShopInfo/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/page/MyShopPage/components/ShopInfo/index.tsx b/src/page/MyShopPage/components/ShopInfo/index.tsx
index 5703f1cd..1d2d3459 100644
--- a/src/page/MyShopPage/components/ShopInfo/index.tsx
+++ b/src/page/MyShopPage/components/ShopInfo/index.tsx
@@ -53,7 +53,7 @@ export default function ShopInfo({ shopInfo }: { shopInfo: MyShopInfoRes }) {
             </div>
             <div className={styles.store__content}>
               {content.map((item) => (
-                <div className={styles.detail}>
+                <div className={styles.detail} key={item.data}>
                   <div className={styles.detail__title}>{item.title}</div>
                   <div className={styles.detail__data}>
                     {item.data}
@@ -75,7 +75,7 @@ export default function ShopInfo({ shopInfo }: { shopInfo: MyShopInfoRes }) {
             </div>
             <div className={styles.store__content}>
               {content.map((item) => (
-                <div className={styles.detail}>
+                <div className={styles.detail} key={item.data}>
                   <div className={styles.detail__title}>{item.title}</div>
                   <div className={styles.detail__data}>
                     {item.data}

From 11ea39d7c3e065a5621308d55558c9aed4c24353 Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 10 Jan 2024 23:42:29 +0900
Subject: [PATCH 37/39] =?UTF-8?q?fix:=20=EC=97=85=EB=A1=9C=EB=93=9C=20?=
 =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ShopInfo/ShopInfo.module.scss  | 22 +++++++++++++++++++
 .../MyShopPage/components/ShopInfo/index.tsx  | 11 ++++++----
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/page/MyShopPage/components/ShopInfo/ShopInfo.module.scss b/src/page/MyShopPage/components/ShopInfo/ShopInfo.module.scss
index 91819f0e..e19241bf 100644
--- a/src/page/MyShopPage/components/ShopInfo/ShopInfo.module.scss
+++ b/src/page/MyShopPage/components/ShopInfo/ShopInfo.module.scss
@@ -202,6 +202,28 @@
     width: 176px;
     height: 121px;
   }
+
+  &__empty-img {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    width: 120px;
+    height: 120px;
+    border: 3px solid #175c8e;
+    border-radius: 100px;
+  }
+
+  &__empty-img-caption {
+    color: #175c8e;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 21px;
+    text-align: center;
+    font-family: "Noto Sans CJK KR", sans-serif;
+    margin-top: 3px;
+  }
 }
 
 .detail {
diff --git a/src/page/MyShopPage/components/ShopInfo/index.tsx b/src/page/MyShopPage/components/ShopInfo/index.tsx
index 1d2d3459..0ccd87dd 100644
--- a/src/page/MyShopPage/components/ShopInfo/index.tsx
+++ b/src/page/MyShopPage/components/ShopInfo/index.tsx
@@ -1,5 +1,6 @@
 import { MyShopInfoRes } from 'model/shopInfo/myShopInfo';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
+import { ReactComponent as CUTLERY } from 'assets/svg/mystore/cutlery.svg';
 import styles from './ShopInfo.module.scss';
 
 export default function ShopInfo({ shopInfo }: { shopInfo: MyShopInfoRes }) {
@@ -90,11 +91,13 @@ export default function ShopInfo({ shopInfo }: { shopInfo: MyShopInfoRes }) {
               <img src={shopInfo.image_urls[0]} alt="main" className={styles['store__imgs-main-pic']} />
             </div>
             <div className={styles.store__subimgs}>
-              <div className={styles.store__subimg}>
-                <img src={shopInfo.image_urls[1]} alt="main" className={styles['store__subimgs-pic']} />
+              <div className={styles['store__empty-img']}>
+                <CUTLERY className={styles['store__empty-img-icon']} />
+                <span className={styles['store__empty-img-caption']}>이미지 준비 중</span>
               </div>
-              <div className={styles.store__subimg}>
-                <img src={shopInfo.image_urls[2]} alt="main" className={styles['store__subimgs-pic']} />
+              <div className={styles['store__empty-img']}>
+                <CUTLERY className={styles['store__empty-img-icon']} />
+                <span className={styles['store__empty-img-caption']}>이미지 준비 중</span>
               </div>
             </div>
           </div>

From a559ed3336f45c181f01d89de5d510729be7132a Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Thu, 11 Jan 2024 00:20:34 +0900
Subject: [PATCH 38/39] =?UTF-8?q?refactor:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=20css=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../svg/addmenu/mobile-single-menu-check-selected.svg |  4 ++++
 src/assets/svg/addmenu/mobile-single-menu-check.svg   |  4 ++++
 src/page/AddMenu/components/AddMenuImgModal/index.tsx |  3 ++-
 .../components/MenuImage/MenuImage.module.scss        |  2 +-
 .../components/MenuPrice/MenuPrice.module.scss        | 11 +++++++++--
 src/page/AddMenu/components/MenuPrice/index.tsx       | 11 ++++++++---
 6 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/svg/addmenu/mobile-single-menu-check-selected.svg
 create mode 100644 src/assets/svg/addmenu/mobile-single-menu-check.svg

diff --git a/src/assets/svg/addmenu/mobile-single-menu-check-selected.svg b/src/assets/svg/addmenu/mobile-single-menu-check-selected.svg
new file mode 100644
index 00000000..c6e0e5b2
--- /dev/null
+++ b/src/assets/svg/addmenu/mobile-single-menu-check-selected.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="#F7941E"/>
+<path d="M3.91699 8.58301L6.25033 10.9163L12.0837 5.08301" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/svg/addmenu/mobile-single-menu-check.svg b/src/assets/svg/addmenu/mobile-single-menu-check.svg
new file mode 100644
index 00000000..6dcbc03c
--- /dev/null
+++ b/src/assets/svg/addmenu/mobile-single-menu-check.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="9" cy="9" r="8" stroke="#A1A1A1"/>
+<path d="M4.91699 9.58301L7.25033 11.9163L13.0837 6.08301" stroke="#A1A1A1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
index ebe1e032..ab7e2989 100644
--- a/src/page/AddMenu/components/AddMenuImgModal/index.tsx
+++ b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
@@ -6,7 +6,7 @@ import styles from './AddMenuImgModal.module.scss';
 
 interface AddMenuImgModalProps {
   isOpen: boolean;
-  closeModal: (event: React.MouseEvent | React.KeyboardEvent<Element>) => void;
+  closeModal: (event?: React.MouseEvent | React.KeyboardEvent) => void;
 }
 
 export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalProps) {
@@ -14,6 +14,7 @@ export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalP
 
   const handleFileChange = () => {
     saveImgFile();
+    closeModal();
   };
 
   const triggerFileInput = () => {
diff --git a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
index 39921495..c1aefefa 100644
--- a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
+++ b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
@@ -132,7 +132,7 @@
       gap: 16px;
       white-space: nowrap;
       align-items: center;
-      height: 155px;
+      height: 170px;
     }
 
     &__add-btn {
diff --git a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
index 4208a092..22cc587b 100644
--- a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
+++ b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
@@ -42,9 +42,16 @@
       font-weight: 400;
     }
 
+    &__button {
+      background-color: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
     &__icon {
-      width: 14px;
-      height: 14px;
+      width: 16px;
+      height: 16px;
     }
   }
 
diff --git a/src/page/AddMenu/components/MenuPrice/index.tsx b/src/page/AddMenu/components/MenuPrice/index.tsx
index 9e3f648b..5bd8dda1 100644
--- a/src/page/AddMenu/components/MenuPrice/index.tsx
+++ b/src/page/AddMenu/components/MenuPrice/index.tsx
@@ -3,10 +3,11 @@ import useAddMenuStore from 'store/addMenu';
 import { ReactComponent as PlusIcon } from 'assets/svg/main/plus.svg';
 import { ReactComponent as DeleteIcon } from 'assets/svg/addmenu/delete-icon.svg';
 import { ReactComponent as MobileDeleteIcon } from 'assets/svg/addmenu/mobile-delete-icon.svg';
-import { ReactComponent as MobileCheckCircleIcon } from 'assets/svg/mystore/check-circle.svg';
+import { ReactComponent as MobileCheckCircleIcon } from 'assets/svg/addmenu/mobile-single-menu-check.svg';
 import { ReactComponent as CheckCircleIcon } from 'assets/svg/addmenu/single-menu-check.svg';
 import { ReactComponent as MobilePlusIcon } from 'assets/svg/addmenu/mobile-plus-icon.svg';
 import { ReactComponent as SelectedCheck } from 'assets/svg/addmenu/selected-check.svg';
+import { ReactComponent as MobileselectedCheck } from 'assets/svg/addmenu/mobile-single-menu-check-selected.svg';
 import styles from './MenuPrice.module.scss';
 
 interface MenuPriceProps {
@@ -73,10 +74,14 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
                   <div className={styles['mobile__header-condition__text']}>단일메뉴</div>
                   <button
                     type="button"
-                    className={styles['mobile__header__condition-button']}
+                    className={styles['mobile__header-condition__button']}
                     onClick={handleIsSingleMenu}
                   >
-                    <MobileCheckCircleIcon className={styles['mobile__header-condition__icon']} />
+                    {isSingle ? (
+                      <MobileselectedCheck className={styles['mobile__header__condition-icon']} />
+                    ) : (
+                      <MobileCheckCircleIcon className={styles['mobile__header-condition__icon']} />
+                    )}
                   </button>
                 </div>
               </div>

From 9ea2329dc522c075d36731e9bba9b349bb364fd2 Mon Sep 17 00:00:00 2001
From: "(hoooooony)" <(cjh41820@gmail.com)>
Date: Thu, 11 Jan 2024 00:52:32 +0900
Subject: [PATCH 39/39] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B7=B0=EC=97=90=EC=84=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=EC=8B=9C=20=EB=AA=A8=EB=8B=AC=20=EB=8B=AB?=
 =?UTF-8?q?=ED=9E=88=EA=B2=8C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/AddMenu/components/AddMenuImgModal/index.tsx | 3 +--
 src/page/AddMenu/components/MenuImage/index.tsx       | 3 +--
 src/page/AddMenu/hook/useMenuImageUpload.ts           | 3 ++-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
index ab7e2989..2c66457c 100644
--- a/src/page/AddMenu/components/AddMenuImgModal/index.tsx
+++ b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
@@ -10,11 +10,10 @@ interface AddMenuImgModalProps {
 }
 
 export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalProps) {
-  const { imgRef, saveImgFile } = useMenuImageUpload();
+  const { imgRef, saveImgFile } = useMenuImageUpload(closeModal);
 
   const handleFileChange = () => {
     saveImgFile();
-    closeModal();
   };
 
   const triggerFileInput = () => {
diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx
index 92ad5b0e..32a977ab 100644
--- a/src/page/AddMenu/components/MenuImage/index.tsx
+++ b/src/page/AddMenu/components/MenuImage/index.tsx
@@ -15,13 +15,12 @@ interface MenuImageProps {
 export default function MenuImage({ isComplete }: MenuImageProps) {
   const { isMobile } = useMediaQuery();
   const { imageUrl, removeImageUrl } = useAddMenuStore();
-  const { imgRef, saveImgFile } = useMenuImageUpload();
   const {
     value: isAddMenuImgModal,
     setTrue: openAddMenuImgModal,
     setFalse: closeAddMenuImgModal,
   } = useBooleanState(false);
-
+  const { imgRef, saveImgFile } = useMenuImageUpload(closeAddMenuImgModal);
   const handleAddImage = () => {
     imgRef.current?.click();
   };
diff --git a/src/page/AddMenu/hook/useMenuImageUpload.ts b/src/page/AddMenu/hook/useMenuImageUpload.ts
index 7d82f17d..132a16b9 100644
--- a/src/page/AddMenu/hook/useMenuImageUpload.ts
+++ b/src/page/AddMenu/hook/useMenuImageUpload.ts
@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import useUploadFile from 'query/upload';
 import useAddMenuStore from 'store/addMenu';
 
-export default function useMenuImageUpload() {
+export default function useMenuImageUpload(closeModal: () => void) {
   const imgRef = useRef<HTMLInputElement>(null);
   const { setImageUrl } = useAddMenuStore();
   const { uploadFile } = useUploadFile();
@@ -17,6 +17,7 @@ export default function useMenuImageUpload() {
 
       if (data?.data?.file_url) {
         setImageUrl(`https://${data.data.file_url}`);
+        closeModal();
       }
     }
   };