diff --git a/.github/workflows/reviewer.json b/.github/workflows/reviewer.json
index c364bc4a..6bf97d8a 100644
--- a/.github/workflows/reviewer.json
+++ b/.github/workflows/reviewer.json
@@ -21,8 +21,8 @@
       "team" : "business"
     },
     {
-      "name": "김하나",
-      "githubName": "hanagertrudeKim",
+      "name": "윤해진",
+      "githubName": "haejinyun",
       "team" : "user"
     },
     {
@@ -51,4 +51,4 @@
       "team" : "campus"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/.gitignore b/.gitignore
index c79844cf..dd0eb50c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,6 +37,7 @@ lerna-debug.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.prettierrc
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/.yarnrc.yml b/.yarnrc.yml
index 27b57c1e..68700796 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -1 +1,2 @@
 yarnPath: .yarn/releases/yarn-3.8.0.cjs
+nodeLinker: pnp
diff --git a/src/component/common/Auth/Complete/Complete.module.scss b/src/component/Auth/Complete/Complete.module.scss
similarity index 100%
rename from src/component/common/Auth/Complete/Complete.module.scss
rename to src/component/Auth/Complete/Complete.module.scss
diff --git a/src/component/common/Auth/Complete/index.tsx b/src/component/Auth/Complete/index.tsx
similarity index 100%
rename from src/component/common/Auth/Complete/index.tsx
rename to src/component/Auth/Complete/index.tsx
diff --git a/src/component/common/Auth/PreviousStep/PreviousStep.module.scss b/src/component/Auth/PreviousStep/PreviousStep.module.scss
similarity index 100%
rename from src/component/common/Auth/PreviousStep/PreviousStep.module.scss
rename to src/component/Auth/PreviousStep/PreviousStep.module.scss
diff --git a/src/component/common/Auth/PreviousStep/index.tsx b/src/component/Auth/PreviousStep/index.tsx
similarity index 100%
rename from src/component/common/Auth/PreviousStep/index.tsx
rename to src/component/Auth/PreviousStep/index.tsx
diff --git a/src/component/common/Auth/ProgressBar/ProgressBar.module.scss b/src/component/Auth/ProgressBar/ProgressBar.module.scss
similarity index 100%
rename from src/component/common/Auth/ProgressBar/ProgressBar.module.scss
rename to src/component/Auth/ProgressBar/ProgressBar.module.scss
diff --git a/src/component/common/Auth/ProgressBar/index.tsx b/src/component/Auth/ProgressBar/index.tsx
similarity index 54%
rename from src/component/common/Auth/ProgressBar/index.tsx
rename to src/component/Auth/ProgressBar/index.tsx
index f1d07ab4..c4a6b6ef 100644
--- a/src/component/common/Auth/ProgressBar/index.tsx
+++ b/src/component/Auth/ProgressBar/index.tsx
@@ -3,17 +3,17 @@ import styles from './ProgressBar.module.scss';
 interface ProgressBarProps {
   step: number;
   total: number;
-  progressTitle: { step: number; title: string }[];
+  progressTitle: string;
 }
 
 export default function ProgressBar({ step, total, progressTitle }: ProgressBarProps) {
   return (
     <div className={styles.progress}>
       <div className={styles.progress__title}>
-        <span>{`${progressTitle[step].step}. ${progressTitle[step].title}`}</span>
-        <span>{`${progressTitle[step].step} / ${total}`}</span>
+        <span>{`${step}. ${progressTitle}`}</span>
+        <span>{`${step} / ${total}`}</span>
       </div>
-      <progress className={styles.progress__bar} value={step + 1} max={total} />
+      <progress className={styles.progress__bar} value={step} max={total} />
     </div>
   );
 }
diff --git a/src/component/common/Auth/SubTitle/SubTitle.module.scss b/src/component/Auth/SubTitle/SubTitle.module.scss
similarity index 100%
rename from src/component/common/Auth/SubTitle/SubTitle.module.scss
rename to src/component/Auth/SubTitle/SubTitle.module.scss
diff --git a/src/component/common/Auth/SubTitle/index.tsx b/src/component/Auth/SubTitle/index.tsx
similarity index 100%
rename from src/component/common/Auth/SubTitle/index.tsx
rename to src/component/Auth/SubTitle/index.tsx
diff --git a/src/component/common/ErrorMessage/ErrorMessage.module.scss b/src/component/common/ErrorMessage/ErrorMessage.module.scss
new file mode 100644
index 00000000..2b2c4a31
--- /dev/null
+++ b/src/component/common/ErrorMessage/ErrorMessage.module.scss
@@ -0,0 +1,12 @@
+.warn {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 3px;
+
+  &--phrase {
+    display: block;
+    color: #f05d3d;
+    font-size: 11px;
+  }
+}
diff --git a/src/component/common/ErrorMessage/index.tsx b/src/component/common/ErrorMessage/index.tsx
new file mode 100644
index 00000000..d72c1842
--- /dev/null
+++ b/src/component/common/ErrorMessage/index.tsx
@@ -0,0 +1,21 @@
+import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
+import styles from './ErrorMessage.module.scss';
+
+interface ErrorMessageProps {
+  message: string | (string | undefined | null)[]
+}
+
+export default function ErrorMessage({ message }: ErrorMessageProps) {
+  if (message.length > 0) {
+    return (
+      <div className={styles.warn}>
+        <Warn />
+        <span className={styles['warn--phrase']}>
+          {typeof message === 'string' ? message : message[0]}
+        </span>
+      </div>
+    );
+  }
+
+  return null;
+}
diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
index 9e326ee1..d6cb6b99 100644
--- a/src/page/AddMenu/components/AddMenuImgModal/index.tsx
+++ b/src/page/AddMenu/components/AddMenuImgModal/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { ReactComponent as CancelIcon } from 'assets/svg/addmenu/mobile-cancle-icon.svg';
 import useAddMenuStore from 'store/addMenu';
-import ErrorMessage from 'page/Auth/Signup/ErrorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
 import { UploadError } from 'utils/hooks/useImagesUpload';
 import styles from './AddMenuImgModal.module.scss';
diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx
index 4e78cce5..76466f1e 100644
--- a/src/page/AddMenu/components/MenuImage/index.tsx
+++ b/src/page/AddMenu/components/MenuImage/index.tsx
@@ -5,7 +5,7 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import AddMenuImgModal from 'page/AddMenu/components/AddMenuImgModal';
 import useAddMenuStore from 'store/addMenu';
-import ErrorMessage from 'page/Auth/Signup/ErrorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
 import useImagesUpload from 'utils/hooks/useImagesUpload';
 import styles from './MenuImage.module.scss';
diff --git a/src/page/AddMenu/components/MenuName/index.tsx b/src/page/AddMenu/components/MenuName/index.tsx
index 56fa9fd5..9cb8404f 100644
--- a/src/page/AddMenu/components/MenuName/index.tsx
+++ b/src/page/AddMenu/components/MenuName/index.tsx
@@ -13,7 +13,8 @@ export default function MenuName({ isComplete }: MenuNameProps) {
   const { name, setName } = useAddMenuStore();
   const { menuError } = useErrorMessageStore();
 
-  const handleNameChange = (e : React.ChangeEvent<HTMLInputElement>) => {
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
     setName(e.target.value);
   };
 
@@ -21,9 +22,7 @@ export default function MenuName({ isComplete }: MenuNameProps) {
     <div>
       {isMobile ? (
         <div className={styles.mobile__container}>
-          <div className={styles.mobile__caption}>
-            메뉴명
-          </div>
+          <div className={styles.mobile__caption}>메뉴명</div>
           {isComplete ? (
             <span className={styles['mobile__name-text']}>{name}</span>
           ) : (
@@ -33,17 +32,17 @@ export default function MenuName({ isComplete }: MenuNameProps) {
                 [styles['mobile__name-input--error']]: menuError,
               })}
               placeholder="예) 불족발 + 막국수 저녁 SET"
-              onChange={handleNameChange}
+              onChange={(e) => handleNameChange(e)}
               value={name}
             />
           )}
-          {menuError && <span className={styles['error-message']}>{menuError}</span>}
+          {menuError && (
+            <span className={styles['error-message']}>{menuError}</span>
+          )}
         </div>
       ) : (
         <div className={styles.container}>
-          <div className={styles.caption}>
-            메뉴명
-          </div>
+          <div className={styles.caption}>메뉴명</div>
           {isComplete ? (
             <span className={styles['name-text']}>{name}</span>
           ) : (
@@ -53,11 +52,13 @@ export default function MenuName({ isComplete }: MenuNameProps) {
                 [styles['name-input--error']]: menuError,
               })}
               placeholder="예) 불족발 + 막국수 저녁 SET"
-              onChange={handleNameChange}
+              onChange={(e) => handleNameChange(e)}
               value={name}
             />
           )}
-          {menuError && <span className={styles['error-message']}>{menuError}</span>}
+          {menuError && (
+            <span className={styles['error-message']}>{menuError}</span>
+          )}
         </div>
       )}
     </div>
diff --git a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
index 5be7d192..0a2c2b88 100644
--- a/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
+++ b/src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
@@ -4,328 +4,8 @@
     margin-top: 16px;
     margin-bottom: 24px;
   }
-
-  &__header {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  &__header-title {
-    color: #175c8e;
-    font-size: 15px;
-    font-weight: 500;
-
-    &--complete {
-      color: #175c8e;
-      font-size: 15px;
-      font-weight: 500;
-      margin-bottom: 12px;
-    }
-  }
-
-  &__header-condition {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 9px;
-
-    &__text {
-      color: #a1a1a1;
-      text-align: right;
-      font-size: 14px;
-      font-weight: 400;
-    }
-
-    &__button {
-      background-color: white;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &__icon {
-      width: 16px;
-      height: 16px;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
-  &__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;
-
-    &__size-input {
-      width: 100%;
-      height: 35px;
-      border: 0.5px solid #898a8d;
-      padding: 8px;
-      box-sizing: border-box;
-
-      &--disabled {
-        width: 100%;
-        height: 35px;
-        border: 0.5px solid #898a8d;
-        background-color: #898a8d;
-        padding: 8px;
-        box-sizing: border-box;
-      }
-
-      &::placeholder {
-        color: #a1a1a1;
-        font-size: 13px;
-        font-weight: 400;
-      }
-    }
-
-    &__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;
-    }
-  }
-
-  &__cancle-button {
-    background-color: white;
-  }
-
-  &__cancle-icon {
-    width: 16px;
-    height: 16px;
-    margin-left: 4px;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  &__add-price-button {
-    display: flex;
-    margin-top: 16px;
-    gap: 8px;
-    background-color: white;
-
-    &__icon {
-      width: 12px;
-      height: 12px;
-    }
-
-    &__text {
-      color: #f7941e;
-      font-size: 13px;
-      font-weight: 700;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  &__price-info-text {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 15px;
-    font-weight: 500;
-  }
 }
 
 .container {
   margin-top: 32px;
 }
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 36px;
-
-  &__title {
-    color: #175c8e;
-    font-size: 24px;
-    font-weight: 500;
-  }
-
-  &__condition {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 17.5px;
-  }
-
-  &__condition-button {
-    background-color: white;
-  }
-
-  &__condition-text {
-    color: #a1a1a1;
-    text-align: right;
-    font-size: 20px;
-    font-weight: 400;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  &__condition-icon {
-    width: 21px;
-    height: 21px;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-
-.price-info-input-box {
-  margin-top: 24px;
-  display: flex;
-  gap: 16px;
-  align-items: center;
-}
-
-.price-info-inputs {
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  width: 100%;
-
-  &__size-input {
-    box-sizing: border-box;
-    width: 335px;
-    height: 62px;
-    border: 0.5px solid #858585;
-    padding: 16px;
-    color: #252525;
-    font-size: 20px;
-    font-weight: 500;
-    outline: none;
-
-    &--disabled {
-      box-sizing: border-box;
-      width: 335px;
-      height: 62px;
-      border: 0.5px solid #858585;
-      padding: 16px;
-      background-color: #898a8d;
-      outline: none;
-    }
-
-    &::placeholder {
-      color: #a1a1a1;
-      font-size: 20px;
-      font-weight: 400;
-    }
-  }
-
-  &__price-input-box {
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    height: 62px;
-    border: 0.5px solid #858585;
-  }
-
-  &__price-input {
-    text-align: right;
-    box-sizing: border-box;
-    width: 95%;
-    height: 60px;
-    padding: 16px;
-    color: #252525;
-    font-size: 20px;
-    font-weight: 500;
-    border: 0;
-    outline: none;
-  }
-
-  &__price-input-won {
-    position: absolute;
-    top: 32%;
-    right: 10px;
-    color: #a1a1a1;
-    font-size: 20px;
-    font-weight: 400;
-  }
-}
-
-.cancle-button {
-  width: 24px;
-  height: 24px;
-  background-color: white;
-
-  &__icon {
-    width: 24px;
-    height: 24px;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-
-.add-price-button {
-  display: flex;
-  align-items: center;
-  margin-top: 16px;
-  gap: 8px;
-  height: 28px;
-  background-color: white;
-
-  &__icon {
-    width: 24px;
-    height: 24px;
-  }
-
-  &__text {
-    display: flex;
-    align-items: center;
-    color: #f7941e;
-    font-size: 20px;
-    font-weight: 700;
-  }
-
-  &:hover {
-    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/components/PriceDisplay/PriceDisplay.module.scss b/src/page/AddMenu/components/MenuPrice/components/PriceDisplay/PriceDisplay.module.scss
new file mode 100644
index 00000000..93e64b8e
--- /dev/null
+++ b/src/page/AddMenu/components/MenuPrice/components/PriceDisplay/PriceDisplay.module.scss
@@ -0,0 +1,48 @@
+@use "src/utils/styles/mediaQuery" as media;
+
+.header {
+  display: flex;
+  align-items: center;
+  height: 117px;
+  border-bottom: 2px solid #175c8e;
+
+  @include media.media-breakpoint-down(mobile) {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: none;
+  }
+
+  &__title {
+    margin-right: auto;
+    height: 47px;
+    font-size: 36px;
+    font-weight: 500;
+    color: #175c8e;
+    font-family: "Noto Sans CJK KR", sans-serif;
+
+    @include media.media-breakpoint-down(mobile) {
+      height: auto;
+      font-size: 15px;
+      margin-bottom: 12px;
+    }
+  }
+}
+
+.price {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 20px;
+  font-weight: 500;
+
+  @include media.media-breakpoint-down(mobile) {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 15px;
+    font-weight: 500;
+  }
+}
diff --git a/src/page/AddMenu/components/MenuPrice/components/PriceDisplay/index.tsx b/src/page/AddMenu/components/MenuPrice/components/PriceDisplay/index.tsx
new file mode 100644
index 00000000..a8cc399f
--- /dev/null
+++ b/src/page/AddMenu/components/MenuPrice/components/PriceDisplay/index.tsx
@@ -0,0 +1,47 @@
+import { OptionPrices } from 'store/addMenu';
+import styles from './PriceDisplay.module.scss';
+
+interface PriceDisplayProps {
+  singlePrice: number;
+  isSingle: boolean;
+  optionPrices: OptionPrices[] | null
+}
+
+export default function PriceDisplay({
+  singlePrice,
+  isSingle,
+  optionPrices,
+}: PriceDisplayProps) {
+  return (
+    <>
+      <div className={styles.header}>
+        <div className={styles.header__title}>가격</div>
+      </div>
+      {isSingle ? (
+        <div>
+          <div className={styles.price}>
+            <div>
+              {singlePrice}
+              원
+            </div>
+          </div>
+        </div>
+      ) : (
+        (optionPrices || []).map((input) => (
+          <div key={input.id}>
+            <div className={styles.price}>
+              <div>
+                {input.option}
+              </div>
+              <div>/</div>
+              <div>
+                {input.price}
+                원
+              </div>
+            </div>
+          </div>
+        ))
+      )}
+    </>
+  );
+}
diff --git a/src/page/AddMenu/components/MenuPrice/components/PriceInput/PriceInput.module.scss b/src/page/AddMenu/components/MenuPrice/components/PriceInput/PriceInput.module.scss
new file mode 100644
index 00000000..881d4e31
--- /dev/null
+++ b/src/page/AddMenu/components/MenuPrice/components/PriceInput/PriceInput.module.scss
@@ -0,0 +1,232 @@
+@use "src/utils/styles/mediaQuery" as media;
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 36px;
+
+  @include media.media-breakpoint-down(mobile) {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__title {
+    color: #175c8e;
+    font-size: 24px;
+    font-weight: 500;
+
+    @include media.media-breakpoint-down(mobile) {
+      color: #175c8e;
+      font-size: 15px;
+      font-weight: 500;
+    }
+  }
+}
+
+.price-box {
+  margin-top: 24px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+
+  @include media.media-breakpoint-down(mobile) {
+    margin-top: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 4px;
+  }
+}
+
+.inputs {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: 100%;
+
+  @include media.media-breakpoint-down(mobile) {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__size-input {
+    box-sizing: border-box;
+    width: 335px;
+    height: 62px;
+    border: 0.5px solid #858585;
+    padding: 16px;
+    color: #252525;
+    font-size: 20px;
+    font-weight: 500;
+    outline: none;
+
+    @include media.media-breakpoint-down(mobile) {
+      width: 100%;
+      height: 35px;
+      border: 0.5px solid #898a8d;
+      padding: 8px;
+      box-sizing: border-box;
+    }
+
+    &--disabled {
+      box-sizing: border-box;
+      width: 335px;
+      height: 62px;
+      border: 0.5px solid #858585;
+      padding: 16px;
+      background-color: #898a8d;
+      outline: none;
+
+      @include media.media-breakpoint-down(mobile) {
+        width: 100%;
+        height: 35px;
+        border: 0.5px solid #898a8d;
+        background-color: #898a8d;
+        padding: 8px;
+        box-sizing: border-box;
+      }
+    }
+
+    &::placeholder {
+      color: #a1a1a1;
+      font-size: 20px;
+      font-weight: 400;
+
+      @include media.media-breakpoint-down(mobile) {
+        color: #a1a1a1;
+        font-size: 13px;
+        font-weight: 400;
+      }
+    }
+  }
+
+  &__price-input-box {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 62px;
+    border: 0.5px solid #858585;
+
+    @include media.media-breakpoint-down(mobile) {
+      position: relative;
+      height: auto;
+      width: 100%;
+      border: none;
+    }
+  }
+
+  &__price-input {
+    text-align: right;
+    box-sizing: border-box;
+    width: 95%;
+    height: 60px;
+    padding: 16px;
+    color: #252525;
+    font-size: 20px;
+    font-weight: 500;
+    border: 0;
+    outline: none;
+
+    @include media.media-breakpoint-down(mobile) {
+      width: 100%;
+      height: 35px;
+      border: 0.5px solid #898a8d;
+      padding: 8px;
+      text-align: left;
+      box-sizing: border-box;
+    }
+  }
+
+  &__price-input-won {
+    position: absolute;
+    top: 32%;
+    right: 10px;
+    color: #a1a1a1;
+    font-size: 20px;
+    font-weight: 400;
+
+    @include media.media-breakpoint-down(mobile) {
+      box-sizing: border-box;
+      position: absolute;
+      right: 8px;
+      top: 32%;
+      color: #a1a1a1;
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
+}
+
+.cancle {
+  width: 24px;
+  height: 24px;
+  background-color: white;
+
+  @include media.media-breakpoint-down(mobile) {
+    width: auto;
+    height: auto;
+    background-color: white;
+  }
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+
+    @include media.media-breakpoint-down(mobile) {
+      width: 16px;
+      height: 16px;
+      margin-left: 4px;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.add-price-button {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  gap: 8px;
+  height: 28px;
+  background-color: white;
+
+  @include media.media-breakpoint-down(mobile) {
+    display: flex;
+    margin-top: 16px;
+    gap: 8px;
+    background-color: white;
+  }
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+
+    @include media.media-breakpoint-down(mobile) {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  &__text {
+    display: flex;
+    align-items: center;
+    color: #f7941e;
+    font-size: 20px;
+    font-weight: 700;
+
+    @include media.media-breakpoint-down(mobile) {
+      font-size: 13px;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
diff --git a/src/page/AddMenu/components/MenuPrice/components/PriceInput/index.tsx b/src/page/AddMenu/components/MenuPrice/components/PriceInput/index.tsx
new file mode 100644
index 00000000..147212ed
--- /dev/null
+++ b/src/page/AddMenu/components/MenuPrice/components/PriceInput/index.tsx
@@ -0,0 +1,98 @@
+import { OptionPrices } from 'store/addMenu';
+import { ReactComponent as MobileDeleteIcon } from 'assets/svg/addmenu/mobile-delete-icon.svg';
+import { ReactComponent as MobilePlusIcon } from 'assets/svg/addmenu/mobile-plus-icon.svg';
+import styles from './PriceInput.module.scss';
+
+interface PriceInputProps {
+  singlePrice: number;
+  isSingle: boolean;
+  optionPrices: OptionPrices[] | null
+  setSinglePrice: (price: number) => void;
+  updatePriceInput: (inputId: number, field: string, newValue: string | number) => void;
+  deletePriceInput: (price: number) => void;
+  addPriceInput: () => void;
+}
+
+export default function PriceInput({
+  singlePrice,
+  isSingle,
+  optionPrices,
+  setSinglePrice,
+  updatePriceInput,
+  deletePriceInput,
+  addPriceInput,
+}: PriceInputProps) {
+  return (
+    <>
+      <div className={styles.header}>
+        <div className={styles.header__title}>가격</div>
+      </div>
+      {isSingle ? (
+        <div className={styles['price-box']}>
+          <div className={styles.inputs}>
+            <div className={styles['inputs__price-input-box']}>
+              <input
+                type="number"
+                className={styles['inputs__price-input']}
+                inputMode="decimal"
+                value={
+                  singlePrice === 0 || singlePrice === null ? '' : singlePrice
+                }
+                onChange={(e) => setSinglePrice(e.target.value === '' ? 0 : Number(e.target.value))}
+              />
+              <p className={styles['inputs__price-input-won']}>
+                원
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : (
+        (optionPrices || []).map((input) => (
+          <div
+            key={input.id}
+            className={styles['price-info-input-box']}
+          >
+            <div className={styles.inputs}>
+              <input
+                className={styles['inputs__size-input']}
+                placeholder="예) 소 (1~2 인분)"
+                value={input.option}
+                onChange={(e) => updatePriceInput(input.id, 'option', e.target.value)}
+                disabled={isSingle}
+              />
+              <div className={styles['inputs__price-input-box']}>
+                <input
+                  type="number"
+                  className={styles['inputs__price-input']}
+                  inputMode="decimal"
+                  value={input.price === 0 ? '' : input.price}
+                  onChange={(e) => updatePriceInput(input.id, 'price', Number(e.target.value))}
+                />
+                <p className={styles['inputs__price-input-won']}>
+                  원
+                </p>
+              </div>
+            </div>
+            <button
+              type="button"
+              className={styles.cancle}
+              onClick={() => deletePriceInput(input.id)}
+            >
+              <MobileDeleteIcon className={styles.cancel__icon} />
+            </button>
+          </div>
+        ))
+      )}
+      <button
+        type="button"
+        className={styles['add-price-button']}
+        onClick={addPriceInput}
+      >
+        <MobilePlusIcon className={styles['add-price-button__icon']} />
+        <span className={styles['add-price-button__text']}>
+          사이즈 추가
+        </span>
+      </button>
+    </>
+  );
+}
diff --git a/src/page/AddMenu/components/MenuPrice/index.tsx b/src/page/AddMenu/components/MenuPrice/index.tsx
index 60f5917a..44e0e600 100644
--- a/src/page/AddMenu/components/MenuPrice/index.tsx
+++ b/src/page/AddMenu/components/MenuPrice/index.tsx
@@ -1,9 +1,7 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 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 MobilePlusIcon } from 'assets/svg/addmenu/mobile-plus-icon.svg';
+import PriceDisplay from './components/PriceDisplay';
+import PriceInput from './components/PriceInput';
 import styles from './MenuPrice.module.scss';
 
 interface MenuPriceProps {
@@ -57,194 +55,44 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
       {isMobile ? (
         <div className={styles.mobile__container}>
           {isComplete ? (
-            <>
-              <div className={styles.mobile__header}>
-                <div className={styles['mobile__header-title--complete']}>가격</div>
-              </div>
-              {isSingle ? (
-                <div className={styles['mobile__price-info-text-box']}>
-                  <div className={styles['mobile__price-info-text']}>
-                    <div className={styles['mobile__price-info-text__price']}>
-                      {singlePrice}
-                      원
-                    </div>
-                  </div>
-                </div>
-              )
-                : (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.option}
-                      </div>
-                      <div>
-                        /
-                      </div>
-                      <div className={styles['mobile__price-info-text__price']}>
-                        {input.price}
-                        원
-                      </div>
-                    </div>
-                  </div>
-                ))}
-            </>
+            <PriceDisplay
+              singlePrice={singlePrice}
+              isSingle={isSingle}
+              optionPrices={optionPrices}
+            />
           ) : (
-            <>
-              <div className={styles.mobile__header}>
-                <div className={styles['mobile__header-title']}>가격</div>
-              </div>
-              {isSingle
-                ? (
-                  <div className={styles['mobile__price-info-input-box']}>
-                    <div className={styles['mobile__price-info-inputs']}>
-                      <div className={styles['mobile__price-info-inputs__price-input-box']}>
-                        <input
-                          type="number"
-                          className={styles['mobile__price-info-inputs__price-input']}
-                          inputMode="decimal"
-                          value={singlePrice === 0 || singlePrice === null ? '' : singlePrice}
-                          onChange={(e) => setSinglePrice(e.target.value === '' ? 0 : Number(e.target.value))}
-                        />
-                        <p className={styles['mobile__price-info-inputs__price-input-won']}>원</p>
-                      </div>
-                    </div>
-                  </div>
-                )
-                : (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.option}
-                        onChange={(e) => updatePriceInput(input.id, 'option', e.target.value)}
-                        disabled={isSingle}
-                      />
-                      <div className={styles['mobile__price-info-inputs__price-input-box']}>
-                        <input
-                          type="number"
-                          className={styles['mobile__price-info-inputs__price-input']}
-                          inputMode="decimal"
-                          value={input.price === 0 ? '' : input.price}
-                          onChange={(e) => updatePriceInput(input.id, 'price', Number(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__add-price-button']}
-                onClick={addPriceInput}
-              >
-                <MobilePlusIcon className={styles['mobile__add-price-button__icon']} />
-                <span className={styles['mobile__add-price-button__text']}>사이즈 추가</span>
-              </button>
-            </>
+            <PriceInput
+              singlePrice={singlePrice}
+              isSingle={isSingle}
+              optionPrices={optionPrices}
+              setSinglePrice={setSinglePrice}
+              updatePriceInput={updatePriceInput}
+              addPriceInput={addPriceInput}
+              deletePriceInput={deletePriceInput}
+            />
           )}
         </div>
       ) : (
         <div className={styles.container}>
-          {isComplete ? (
-            <>
-              <div className={styles.header}>
-                <div className={styles.header__title}>가격</div>
-              </div>
-              {isSingle ? (
-                <div className={styles['price-info-text-box']}>
-                  <div className={styles['price-info-text']}>
-                    <div className={styles['price-info-text__price']}>
-                      {singlePrice}
-                      원
-                    </div>
-                  </div>
-                </div>
-              )
-                : (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.option}
-                      </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>
-              {isSingle
-                ? (
-                  <div className={styles['price-info-input-box']}>
-                    <div className={styles['price-info-inputs']}>
-                      <div className={styles['price-info-inputs__price-input-box']}>
-                        <input
-                          type="number"
-                          className={styles['price-info-inputs__price-input']}
-                          value={singlePrice === 0 || singlePrice === null ? '' : singlePrice}
-                          onChange={(e) => setSinglePrice(e.target.value === '' ? 0 : Number(e.target.value))}
-                        />
-                        <p className={styles['price-info-inputs__price-input-won']}>원</p>
-                      </div>
-                    </div>
-                  </div>
-                )
-                : (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={isSingle ? '' : '예) 소 (1~2 인분)'}
-                        value={input.option}
-                        onChange={(e) => updatePriceInput(input.id, 'option', e.target.value)}
-                        disabled={isSingle}
-                      />
-                      <div className={styles['price-info-inputs__price-input-box']}>
-                        <input
-                          type="number"
-                          className={styles['price-info-inputs__price-input']}
-                          value={input.price === 0 ? '' : input.price}
-                          onChange={(e) => updatePriceInput(input.id, 'price', Number(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['add-price-button']}
-                onClick={addPriceInput}
-              >
-                <PlusIcon className={styles['add-price-button__icon']} />
-                <div className={styles['add-price-button__text']}>사이즈 추가</div>
-              </button>
-            </>
-          )}
+          {
+            isComplete ? (
+              <PriceDisplay
+                singlePrice={singlePrice}
+                isSingle={isSingle}
+                optionPrices={optionPrices}
+              />
+            ) : (
+              <PriceInput
+                singlePrice={singlePrice}
+                isSingle={isSingle}
+                optionPrices={optionPrices}
+                setSinglePrice={setSinglePrice}
+                updatePriceInput={updatePriceInput}
+                addPriceInput={addPriceInput}
+                deletePriceInput={deletePriceInput}
+              />
+            )
+          }
         </div>
       )}
     </div>
diff --git a/src/page/AddMenu/components/MobileDivide/index.tsx b/src/page/AddMenu/components/MobileDivide/index.tsx
index 65db9423..6ec5c3ce 100644
--- a/src/page/AddMenu/components/MobileDivide/index.tsx
+++ b/src/page/AddMenu/components/MobileDivide/index.tsx
@@ -1,7 +1,5 @@
 import styles from './MobileDivide.module.scss';
 
 export default function MobileDivide() {
-  return (
-    <div className={styles.container}> </div>
-  );
+  return <div className={styles.container} />;
 }
diff --git a/src/page/AddMenu/index.tsx b/src/page/AddMenu/index.tsx
index 31f5866b..f46d2549 100644
--- a/src/page/AddMenu/index.tsx
+++ b/src/page/AddMenu/index.tsx
@@ -8,13 +8,13 @@ import { useErrorMessageStore } from 'store/errorMessageStore';
 import useScrollToTop from 'utils/hooks/useScrollToTop';
 import MenuImage from './components/MenuImage';
 import MenuName from './components/MenuName';
-import styles from './AddMenu.module.scss';
 import MenuPrice from './components/MenuPrice';
 import MenuCategory from './components/MenuCategory';
 import MenuDetail from './components/MenuDetail';
 import GoMyShopModal from './components/GoMyShop';
 import MobileDivide from './components/MobileDivide';
 import useFormValidation from './hook/useFormValidation';
+import styles from './AddMenu.module.scss';
 
 export default function AddMenu() {
   useScrollToTop();
@@ -23,9 +23,6 @@ export default function AddMenu() {
   const navigate = useNavigate();
   const { resetMenuName, resetCategoryIds } = useAddMenuStore();
   const { setMenuError, setCategoryError } = useErrorMessageStore();
-  const goMyShop = () => {
-    navigate('/owner');
-  };
   const {
     value: isGoMyShopModal,
     setTrue: openGoMyShopModal,
@@ -47,7 +44,8 @@ export default function AddMenu() {
       setIsComplete((prevState) => !prevState);
     }
   };
-  const addMenu = () => {
+
+  const addMenuMutationEvent = () => {
     const newMenuData = {
       category_ids: categoryIds,
       description,
@@ -62,19 +60,34 @@ export default function AddMenu() {
     };
     addMenuMutation(newMenuData);
   };
-  const confirmAddMenu = () => {
-    addMenu();
-    goMyShop();
+
+  const onClickMenuAddCancelHandler = () => {
+    if (isComplete) {
+      toggleConfirmClick();
+    } else {
+      navigate('/owners');
+    }
   };
-  useEffect(
-    () => {
-      resetMenuName();
-      resetCategoryIds();
-      setMenuError('');
-      setCategoryError('');
-    },
-    [resetMenuName, setMenuError, resetCategoryIds, setCategoryError],
-  );
+
+  const onClickMenuAddConfirmHandler = () => {
+    if (isComplete) {
+      if (isMobile) {
+        openGoMyShopModal();
+        return;
+      }
+      addMenuMutationEvent();
+    } else {
+      toggleConfirmClick();
+    }
+  };
+
+  useEffect(() => {
+    resetMenuName();
+    resetCategoryIds();
+    setMenuError('');
+    setCategoryError('');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <div>
@@ -103,41 +116,20 @@ export default function AddMenu() {
             </div>
           </div>
           <div className={styles['mobile__button-container']}>
-            {isComplete ? (
-              <>
-                <button
-                  className={styles['mobile__button-cancel']}
-                  type="button"
-                  onClick={toggleConfirmClick}
-                >
-                  취소
-                </button>
-                <button
-                  className={styles['mobile__button-check']}
-                  type="button"
-                  onClick={confirmAddMenu}
-                >
-                  확인
-                </button>
-              </>
-            ) : (
-              <>
-                <button
-                  className={styles['mobile__button-cancel']}
-                  type="button"
-                  onClick={goMyShop}
-                >
-                  취소
-                </button>
-                <button
-                  className={styles['mobile__button-check']}
-                  type="button"
-                  onClick={toggleConfirmClick}
-                >
-                  확인
-                </button>
-              </>
-            )}
+            <button
+              className={styles['mobile__button-cancel']}
+              type="button"
+              onClick={() => onClickMenuAddCancelHandler()}
+            >
+              취소
+            </button>
+            <button
+              className={styles['mobile__button-check']}
+              type="button"
+              onClick={() => onClickMenuAddConfirmHandler()}
+            >
+              확인
+            </button>
           </div>
         </div>
       ) : (
@@ -145,41 +137,20 @@ export default function AddMenu() {
           <div className={styles.header}>
             <h1 className={styles.header__title}>메뉴 추가</h1>
             <div className={styles['header__button-container']}>
-              {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={goMyShop}
-                  >
-                    취소
-                  </button>
-                  <button
-                    className={styles['header__button-check']}
-                    type="button"
-                    onClick={toggleConfirmClick}
-                  >
-                    확인
-                  </button>
-                </>
-              )}
+              <button
+                className={styles['header__button-cancel']}
+                type="button"
+                onClick={() => onClickMenuAddCancelHandler()}
+              >
+                취소
+              </button>
+              <button
+                className={styles['header__button-check']}
+                type="button"
+                onClick={() => onClickMenuAddConfirmHandler()}
+              >
+                확인
+              </button>
             </div>
           </div>
           <div className={styles.content}>
@@ -196,7 +167,7 @@ export default function AddMenu() {
           <GoMyShopModal
             isOpen={isGoMyShopModal}
             onCancel={closeGoMyShopModal}
-            onConfirm={addMenu}
+            onConfirm={addMenuMutationEvent}
             mainMessage="신규 메뉴 추가 완료되었습니다."
             subMessage="메뉴 관리에서 기존 메뉴의 정보 수정이 가능합니다."
           />
diff --git a/src/page/Auth/Signup/SignUp.module.scss b/src/page/Auth/Signup/SignUp.module.scss
index 454b1a04..89657e19 100644
--- a/src/page/Auth/Signup/SignUp.module.scss
+++ b/src/page/Auth/Signup/SignUp.module.scss
@@ -21,6 +21,10 @@
 
   &:focus {
     outline: 1px solid #4590bb;
+
+    @include media.media-breakpoint-down(mobile) {
+      align-items: flex-start;
+    }
   }
 }
 
diff --git a/src/page/Auth/SignupTmp/component/UserId/UserId.module.scss b/src/page/Auth/SignupTmp/component/UserId/UserId.module.scss
index d31250e2..2d42970c 100644
--- a/src/page/Auth/SignupTmp/component/UserId/UserId.module.scss
+++ b/src/page/Auth/SignupTmp/component/UserId/UserId.module.scss
@@ -43,7 +43,7 @@
   margin-top: 8px;
 
   @include media.media-breakpoint-down(mobile) {
-    align-items: end;
+    align-items: flex-end;
   }
 
   &__input {
diff --git a/src/page/Auth/SignupTmp/component/UserId/index.tsx b/src/page/Auth/SignupTmp/component/UserId/index.tsx
index be5e0910..16d997d3 100644
--- a/src/page/Auth/SignupTmp/component/UserId/index.tsx
+++ b/src/page/Auth/SignupTmp/component/UserId/index.tsx
@@ -1,8 +1,8 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
+import ErrorMessage from 'component/common/ErrorMessage';
 import CustomButton from 'page/Auth/Signup/CustomButton';
 import useValidateEmail from 'page/Auth/SignupTmp/hooks/useValidateEmail';
 import useCheckEmailDuplicate from 'page/Auth/SignupTmp/hooks/useCheckEmailDuplicate';
-import ErrorMessage from 'page/Auth/Signup/ErrorMessage';
 import styles from './UserId.module.scss';
 
 export default function UserId() {
diff --git a/src/page/Auth/SignupTmp/component/UserPassword/index.tsx b/src/page/Auth/SignupTmp/component/UserPassword/index.tsx
index a47c5dc7..da5bde0e 100644
--- a/src/page/Auth/SignupTmp/component/UserPassword/index.tsx
+++ b/src/page/Auth/SignupTmp/component/UserPassword/index.tsx
@@ -6,7 +6,7 @@ import usePasswordConfirm from 'page/Auth/SignupTmp/hooks/usePasswordConfirm';
 import { User } from 'page/Auth/SignupTmp/types/User';
 
 import { SubmitHandler } from 'react-hook-form';
-import ErrorMessage from 'page/Auth/Signup/ErrorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import useRegisterInfo from 'store/registerStore';
 import styles from './UserPassword.module.scss';
 
diff --git a/src/page/Auth/SignupTmp/view/OwnerDataPage/OwnerData.module.scss b/src/page/Auth/SignupTmp/view/OwnerDataPage/OwnerData.module.scss
index 47f2a1b1..5e7072c0 100644
--- a/src/page/Auth/SignupTmp/view/OwnerDataPage/OwnerData.module.scss
+++ b/src/page/Auth/SignupTmp/view/OwnerDataPage/OwnerData.module.scss
@@ -138,7 +138,7 @@
   &__shop-name {
     &--wrapper {
       display: flex;
-      align-items: end;
+      align-items: flex-end;
     }
 
     width: calc(272px - 34px);
@@ -218,7 +218,7 @@
     display: flex;
     gap: 8px;
     align-items: center;
-    justify-content: start;
+    justify-content: flex-start;
 
     &--name {
       width: 90%;
@@ -297,7 +297,7 @@
 .button {
   margin-top: 16px;
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
 
   &--upload {
     display: flex;
diff --git a/src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss b/src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss
index 20bd0081..eb591186 100644
--- a/src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss
+++ b/src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss
@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  align-items: start;
+  align-items: flex-end;
   width: 752px;
   height: calc(80vh - 78px);
   margin-left: 40px;
@@ -30,7 +30,7 @@
 
   &__modify-main-image {
     display: flex;
-    justify-content: start;
+    justify-content: flex-start;
     width: 704px;
     height: 136px;
     margin-top: 24px;
@@ -138,6 +138,10 @@
     margin-bottom: 24px;
   }
 
+  &__error-message {
+    margin-bottom: 5px;
+  }
+
   &__header {
     font-size: 18px;
     color: #17518e;
@@ -290,7 +294,7 @@
 
   &__confirm-button-wrapper {
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     max-width: 328px;
     width: 100%;
   }
@@ -316,7 +320,15 @@
 
   &__label {
     display: flex;
-    margin-bottom: 16px;
+    margin-bottom: 24px;
+
+    &--error {
+      margin-bottom: 0;
+    }
+  }
+
+  &__error-message {
+    margin-bottom: 5px;
   }
 
   &__header {
diff --git a/src/page/MyShopPage/components/EditShopInfoModal/index.tsx b/src/page/MyShopPage/components/EditShopInfoModal/index.tsx
index add1cb16..dc3ce700 100644
--- a/src/page/MyShopPage/components/EditShopInfoModal/index.tsx
+++ b/src/page/MyShopPage/components/EditShopInfoModal/index.tsx
@@ -1,13 +1,9 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  Dispatch, SetStateAction, useEffect,
-} from 'react';
+import { Dispatch, SetStateAction, useEffect } from 'react';
 import { ReactComponent as DeleteImgIcon } from 'assets/svg/addmenu/mobile-delete-new-image.svg';
 import { MyShopInfoRes } from 'model/shopInfo/myShopInfo';
 import { ReactComponent as ImgPlusIcon } from 'assets/svg/myshop/imgplus.svg';
 import { DAY_OF_WEEK, WEEK } from 'utils/constant/week';
-import useShopRegistrationStore from 'store/shopRegistration';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { OwnerShop } from 'model/shopInfo/ownerShop';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation } from '@tanstack/react-query';
@@ -21,10 +17,12 @@ import CheckSameTime from 'page/ShopRegistration/hooks/CheckSameTime';
 import useModalStore from 'store/modalStore';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import OperateTimeMobile from 'page/ShopRegistration/component/Modal/OperateTimeMobile';
-import { TOTAL_CATEGORY } from 'utils/constant/category';
 import useImagesUpload from 'utils/hooks/useImagesUpload';
 import { isKoinError, sendClientError } from '@bcsdlab/koin';
 import showToast from 'utils/ts/showToast';
+import cn from 'utils/ts/className';
+import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import styles from './EditShopInfoModal.module.scss';
 
 interface EditShopInfoModalProps {
@@ -44,31 +42,16 @@ export default function EditShopInfoModal({
     setFalse: closeOperateTimeModal,
     value: isOperateTimeModalOpen,
   } = useBooleanState(false);
-  const {
-    imageFile, imgRef, saveImgFile, uploadError, setImageFile,
-  } = useImagesUpload();
 
   const {
-    setName, setAddress, setPhone, setDeliveryPrice, setDescription,
-    setImageUrls, setDelivery, setPayBank, setPayCard, setCategoryId,
-  } = useShopRegistrationStore();
-  const {
-    name, address, phone, deliveryPrice, description, imageUrls,
-    delivery, payBank, payCard, categoryId, removeImageUrl,
-  } = useShopRegistrationStore();
+    imageFile, imgRef, saveImgFile, setImageFile,
+  } = useImagesUpload();
 
   const { categoryList } = useShopCategory();
-
   const {
-    openTimeState,
-    closeTimeState,
-    shopClosedState,
+    openTimeState, closeTimeState, shopClosedState, resetOperatingTime,
   } = useModalStore();
 
-  const openTimeArray = Object.values(openTimeState);
-  const closeTimeArray = Object.values(closeTimeState);
-  const shopClosedArray = Object.values(shopClosedState);
-
   const {
     isAllSameTime,
     hasClosedDay,
@@ -76,27 +59,67 @@ export default function EditShopInfoModal({
     isAllClosed,
   } = CheckSameTime();
 
-  const handleCategoryIdChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setCategoryId(Number(e.target.value));
-  };
-
   const {
-    handleSubmit, setValue,
+    register, control, handleSubmit, setValue, formState: { errors },
   } = useForm<OwnerShop>({
     resolver: zodResolver(OwnerShop),
+    defaultValues: {
+      ...shopInfo,
+      category_ids: shopInfo.shop_categories.map((category) => category.id),
+      open: shopInfo.open.map((day) => ({
+        day_of_week: day.day_of_week,
+        closed: day.closed,
+        open_time: day.open_time,
+        close_time: day.close_time,
+      })),
+    },
   });
 
+  const imageUrls = useWatch({ control, name: 'image_urls' });
+  const name = useWatch({ control, name: 'name' });
+  const categoryId = useWatch({ control, name: 'category_ids' });
+  const phone = useWatch({ control, name: 'phone' });
+  const address = useWatch({ control, name: 'address' });
+  const deliveryPrice = useWatch({ control, name: 'delivery_price' });
+  const description = useWatch({ control, name: 'description' });
+  const delivery = useWatch({ control, name: 'delivery' });
+  const payCard = useWatch({ control, name: 'pay_card' });
+  const payBank = useWatch({ control, name: 'pay_bank' });
+
+  const handleCategoryIdChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setValue('category_ids', [Number(e.target.value), 0]);
+  };
+
+  const handleDeleteImage = (image: string) => {
+    setImageFile(imageFile.filter((img) => img !== image));
+  };
+
+  const formatPhoneNumber = (inputNumber:string) => {
+    const phoneNumber = inputNumber.replace(/\D/g, '');
+    const formattedPhoneNumber = phoneNumber.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1-$2-$3');
+    return formattedPhoneNumber;
+  };
+
+  const handlePhoneChange = (event:React.ChangeEvent<HTMLInputElement>) => {
+    const formattedValue = formatPhoneNumber(event.target.value);
+    setValue('phone', formattedValue);
+  };
+
   useEffect(() => {
-    if (imageFile && !uploadError) { // 초기에 이 값이 true기 때문에 imageUrls가 빈 배열로 초기화되고 있었음
-      setImageUrls(imageFile);
+    if (imageFile.length > 0) {
+      setValue('image_urls', imageFile);
+    } else if (imageFile.length !== imageUrls.length) {
+      setImageFile(imageUrls);
     }
-  }, [imageFile, setImageUrls]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageFile]);
 
   const mutation = useMutation({
     mutationFn: (form: OwnerShop) => putShop(shopInfo.id, form),
     onSuccess: () => {
       closeModal();
       setIsSuccess(true);
+      resetOperatingTime();
     },
     onError: (e) => {
       if (isKoinError(e)) {
@@ -106,20 +129,13 @@ export default function EditShopInfoModal({
       sendClientError(e);
     },
   });
+
+  const operateTimeState = useOperateTimeState();
+  const openTimeArray = Object.values(openTimeState);
+  const closeTimeArray = Object.values(closeTimeState);
+  const shopClosedArray = Object.values(shopClosedState);
+
   useEffect(() => {
-    setImageUrls(shopInfo.image_urls);
-    setImageFile(shopInfo.image_urls);
-    setName(shopInfo.name);
-    setAddress(shopInfo.address);
-    setPhone(shopInfo.phone);
-    setDeliveryPrice(shopInfo.delivery_price);
-    setDescription(shopInfo.description);
-    setDelivery(shopInfo.delivery);
-    setPayBank(shopInfo.pay_bank);
-    setPayCard(shopInfo.pay_card);
-    setCategoryId(shopInfo.shop_categories[1]
-      ? shopInfo.shop_categories[1].id
-      : TOTAL_CATEGORY);
     shopInfo.open.forEach((day, index) => {
       useModalStore.setState((prev) => ({
         ...prev,
@@ -137,38 +153,21 @@ export default function EditShopInfoModal({
         },
       }));
     });
-  }, []);
-  const operateTimeState = useOperateTimeState();
-  const holiday = WEEK.filter((day) => shopClosedState[day]).length > 0
-    ? `매주 ${WEEK.filter((day) => shopClosedState[day]).join('요일, ')}요일`
-    : '휴무일 없음';
+  }, [shopInfo.open]);
 
   useEffect(() => {
-    setValue('image_urls', imageUrls);
     const openValue = DAY_OF_WEEK.map((day, index) => ({
       close_time: closeTimeArray[index],
       closed: shopClosedArray[index],
       day_of_week: day,
       open_time: openTimeArray[index],
     }));
-    // shop_categories[0]은 전체보기이므로 따로 처리
-    if (shopInfo.shop_categories.length === 1) {
-      setValue('category_ids', [shopInfo.shop_categories[0].id]);
-    } else {
-      const categoryIds = shopInfo.shop_categories.map((category) => category.id);
-      setValue('category_ids', categoryIds);
-    }
     setValue('open', openValue);
-    setValue('delivery_price', Number(deliveryPrice));
-    setValue('description', description);
-    setValue('delivery', delivery);
-    setValue('pay_bank', payBank);
-    setValue('pay_card', payCard);
-    setValue('name', name);
-    setValue('phone', phone);
-    setValue('address', address);
-  }, [imageUrls, openTimeState, closeTimeState, shopClosedState, deliveryPrice,
-    description, delivery, payBank, payCard, name, phone, address, categoryId]);
+  }, [closeTimeArray, openTimeArray, setValue, shopClosedArray]);
+
+  const holiday = WEEK.filter((day) => shopClosedState[day]).length > 0
+    ? `매주 ${WEEK.filter((day) => shopClosedState[day]).join('요일, ')}요일`
+    : '휴무일 없음';
 
   const onSubmit: SubmitHandler<OwnerShop> = (data) => {
     mutation.mutate(data);
@@ -193,10 +192,7 @@ export default function EditShopInfoModal({
                 <img key={image} src={image} alt={`Selected ${index + 1}`} />
                 <button
                   type="button"
-                  onClick={() => {
-                    removeImageUrl(image);
-                    setImageFile(imageFile.filter((img) => img !== image));
-                  }}
+                  onClick={() => handleDeleteImage(image)}
                   className={styles['mobile-container__delete-button']}
                   aria-label="Delete image"
                 >
@@ -213,6 +209,7 @@ export default function EditShopInfoModal({
                 id="mainMenuImage"
                 multiple
                 className={styles['mobile-container__add-file']}
+                {...register('image_urls')}
                 onChange={saveImgFile}
                 ref={imgRef}
               />
@@ -226,14 +223,19 @@ export default function EditShopInfoModal({
                 type="text"
                 id="shopName"
                 value={name}
-                onChange={(e) => setName(e.target.value)}
                 className={styles['mobile-main-info__input']}
+                {...register('name')}
               />
             </label>
             <label htmlFor="category" className={styles['mobile-main-info__label']}>
               <span className={styles['mobile-main-info__header']}>카테고리</span>
-              <select name="category" className={styles['mobile-main-info__select']} onChange={handleCategoryIdChange}>
-                {categoryList?.shop_categories.map((category) => (
+              <select
+                name="category"
+                className={styles['mobile-main-info__select']}
+                value={categoryId[0]}
+                onChange={handleCategoryIdChange}
+              >
+                {categoryList?.shop_categories.slice(1).map((category) => (
                   <option key={category.id} value={category.id}>
                     {category.name}
                   </option>
@@ -246,8 +248,8 @@ export default function EditShopInfoModal({
                 type="text"
                 id="phone"
                 value={phone}
-                onChange={(e) => setPhone(e.target.value)}
                 className={styles['mobile-main-info__input']}
+                {...register('phone', { onChange: handlePhoneChange })}
               />
             </label>
             <div className={styles['mobile-main-info__label']}>
@@ -302,39 +304,50 @@ export default function EditShopInfoModal({
                 type="text"
                 id="shopAddress"
                 value={address}
-                onChange={(e) => setAddress(e.target.value)}
                 className={styles['mobile-main-info__input']}
+                {...register('address', { required: true })}
               />
             </label>
-            <label htmlFor="deliveryPrice" className={styles['mobile-main-info__label']}>
+            <label
+              htmlFor="deliveryPrice"
+              className={cn({
+                [styles['mobile-main-info__label']]: true,
+                [styles['mobile-main-info__label--error']]: Number.isNaN(deliveryPrice),
+              })}
+            >
               <span className={styles['mobile-main-info__header']}>배달금액</span>
               <input
                 type="number"
                 inputMode="decimal"
                 id="deliveryPrice"
-                value={deliveryPrice === 0 ? undefined : deliveryPrice}
-                onChange={(e) => setDeliveryPrice(Number(e.target.value))}
+                value={deliveryPrice}
                 className={styles['mobile-main-info__input']}
+                {...register('delivery_price', { valueAsNumber: true })}
+                onWheel={(e) => (e.target as HTMLElement).blur()} // 마우스 스크롤로 숫자 변경 방지
               />
             </label>
+            <div className={styles['mobile-main-info__error-message']}>
+              {Number.isNaN(deliveryPrice) && <ErrorMessage message={ERRORMESSAGE.invalidPrice} />}
+            </div>
             <label htmlFor="description" className={styles['mobile-main-info__label']}>
               <span className={styles['mobile-main-info__header']}>기타정보</span>
               <input
                 type="text"
                 id="description"
                 value={description}
-                onChange={(e) => setDescription(e.target.value)}
                 className={styles['mobile-main-info__input']}
+                {...register('description')}
               />
             </label>
+
             <div className={styles['mobile-main-info__checkboxes']}>
               <label htmlFor="delivery" className={styles['mobile-main-info__checkbox']}>
                 <input
                   type="checkbox"
                   id="delivery"
                   className={styles['mobile-main-info__checkbox-input']}
-                  onChange={(e) => setDelivery(e.target.checked)}
                   checked={delivery}
+                  {...register('delivery')}
                 />
                 <span>배달 가능</span>
               </label>
@@ -343,8 +356,8 @@ export default function EditShopInfoModal({
                   type="checkbox"
                   id="payCard"
                   className={styles['mobile-main-info__checkbox-input']}
-                  onChange={(e) => setPayCard(e.target.checked)}
                   checked={payCard}
+                  {...register('pay_card')}
                 />
                 <span>카드 가능</span>
               </label>
@@ -353,8 +366,8 @@ export default function EditShopInfoModal({
                   type="checkbox"
                   id="payBank"
                   className={styles['mobile-main-info__checkbox-input']}
-                  onChange={(e) => setPayBank(e.target.checked)}
                   checked={payBank}
+                  {...register('pay_bank')}
                 />
                 <span>계좌이체 가능</span>
               </label>
@@ -376,10 +389,7 @@ export default function EditShopInfoModal({
                 <img src={image} alt={`Selected ${index + 1}`} className={styles['main-image__image']} />
                 <button
                   type="button"
-                  onClick={() => {
-                    removeImageUrl(image);
-                    setImageFile(imageFile.filter((img) => img !== image));
-                  }}
+                  onClick={() => handleDeleteImage(image)}
                   className={styles['main-image__delete-button']}
                 >
                   <DeleteImgIcon />
@@ -393,6 +403,7 @@ export default function EditShopInfoModal({
                   accept="image/*"
                   id="mainMenuImage"
                   className={styles['main-image__add-file']}
+                  {...register('image_urls')}
                   onChange={saveImgFile}
                   ref={imgRef}
                 />
@@ -409,8 +420,8 @@ export default function EditShopInfoModal({
                 type="text"
                 id="shopName"
                 value={name}
-                onChange={(e) => setName(e.target.value)}
                 className={styles['main-info__input']}
+                {...register('name')}
               />
             </label>
             <label htmlFor="category" className={styles['main-info__label']}>
@@ -420,7 +431,7 @@ export default function EditShopInfoModal({
                 className={styles['main-info__select']}
                 onChange={handleCategoryIdChange}
               >
-                {categoryList?.shop_categories.map((category) => (
+                {categoryList?.shop_categories.slice(1).map((category) => (
                   <option key={category.id} value={category.id}>
                     {category.name}
                   </option>
@@ -433,8 +444,8 @@ export default function EditShopInfoModal({
                 type="text"
                 id="shopAddress"
                 value={address}
-                onChange={(e) => setAddress(e.target.value)}
                 className={styles['main-info__input']}
+                {...register('address')}
               />
             </label>
             <label htmlFor="phone" className={styles['main-info__label']}>
@@ -443,8 +454,8 @@ export default function EditShopInfoModal({
                 type="text"
                 id="phone"
                 value={phone}
-                onChange={(e) => setPhone(e.target.value)}
                 className={styles['main-info__input']}
+                {...register('phone', { onChange: handlePhoneChange })}
               />
             </label>
             <label htmlFor="deliveryPrice" className={styles['main-info__label']}>
@@ -452,10 +463,14 @@ export default function EditShopInfoModal({
               <input
                 type="number"
                 id="deliveryPrice"
-                value={deliveryPrice === 0 ? undefined : deliveryPrice}
-                onChange={(e) => setDeliveryPrice(Number(e.target.value))}
+                value={deliveryPrice}
                 className={styles['main-info__input']}
+                {...register('delivery_price', { valueAsNumber: true })}
+                onWheel={(e) => (e.target as HTMLElement).blur()} // 마우스 스크롤로 숫자 변경 방지
               />
+              <div className={styles['main-info__error-message']}>
+                {errors.delivery_price && <ErrorMessage message={ERRORMESSAGE.invalidPrice} />}
+              </div>
             </label>
             <div className={styles['main-info__label']}>
               <span className={styles['main-info__header']}>운영시간</span>
@@ -522,8 +537,8 @@ export default function EditShopInfoModal({
                 type="text"
                 id="description"
                 value={description}
-                onChange={(e) => setDescription(e.target.value)}
                 className={styles['main-info__input']}
+                {...register('description')}
               />
             </label>
             <label htmlFor="closedDay" className={styles['main-info__label']}>
@@ -542,8 +557,8 @@ export default function EditShopInfoModal({
                   type="checkbox"
                   id="delivery"
                   className={styles['main-info__checkbox-input']}
-                  onChange={(e) => setDelivery(e.target.checked)}
                   checked={delivery}
+                  {...register('delivery')}
                 />
                 <span>배달 가능</span>
               </label>
@@ -552,8 +567,8 @@ export default function EditShopInfoModal({
                   type="checkbox"
                   id="payCard"
                   className={styles['main-info__checkbox-input']}
-                  onChange={(e) => setPayCard(e.target.checked)}
                   checked={payCard}
+                  {...register('pay_card')}
                 />
                 <span>카드 가능</span>
               </label>
@@ -562,8 +577,8 @@ export default function EditShopInfoModal({
                   type="checkbox"
                   id="payBank"
                   className={styles['main-info__checkbox-input']}
-                  onChange={(e) => setPayBank(e.target.checked)}
                   checked={payBank}
+                  {...register('pay_bank')}
                 />
                 <span>계좌이체 가능</span>
               </label>
diff --git a/src/page/ShopRegistration/component/ConfirmPopup/index.tsx b/src/page/ShopRegistration/component/ConfirmPopup/index.tsx
index 29f1efb8..3ac7bed0 100644
--- a/src/page/ShopRegistration/component/ConfirmPopup/index.tsx
+++ b/src/page/ShopRegistration/component/ConfirmPopup/index.tsx
@@ -1,4 +1,4 @@
-import ErrorMessage from 'page/Auth/Signup/ErrorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import { FieldErrors } from 'react-hook-form';
 import { useState } from 'react';
 import styles from './ConfirmPopup.module.scss';
@@ -9,7 +9,9 @@ interface ConfirmPopupProps {
   errors: FieldErrors;
 }
 
-export default function ConfirmPopup({ isOpen, onCancel, errors }: ConfirmPopupProps) {
+export default function ConfirmPopup({
+  isOpen, onCancel, errors,
+}: ConfirmPopupProps) {
   const [isConfirmClicked, setIsConfirmClicked] = useState(false);
   const errorMessage = Object.keys(errors).map((key) => errors[key]?.message);
 
@@ -35,7 +37,9 @@ export default function ConfirmPopup({ isOpen, onCancel, errors }: ConfirmPopupP
           <button
             type="submit"
             className={styles['content__next-button']}
-            onClick={() => setIsConfirmClicked(true)}
+            onClick={() => {
+              setIsConfirmClicked(true);
+            }}
           >
             확인
           </button>
diff --git a/src/page/ShopRegistration/component/Modal/Category/index.tsx b/src/page/ShopRegistration/component/Modal/Category/index.tsx
index 7b09a54d..d7bb374d 100644
--- a/src/page/ShopRegistration/component/Modal/Category/index.tsx
+++ b/src/page/ShopRegistration/component/Modal/Category/index.tsx
@@ -1,18 +1,16 @@
 import useMyShop from 'query/shop';
 import cn from 'utils/ts/className';
 import { Category as CategoryProps } from 'model/category/shopCategory';
-import useShopRegistrationStore from 'store/shopRegistration';
+import { useFormContext, useWatch } from 'react-hook-form';
 import styles from './Category.module.scss';
 
 export default function Category() {
   const { categoryList } = useMyShop();
-  const {
-    category, setCategory, setCategoryId,
-  } = useShopRegistrationStore();
+  const { control, setValue } = useFormContext();
+  const categoryId = useWatch({ control, name: 'category_ids' });
 
   const handleCategoryClick = (categoryInfo: CategoryProps) => {
-    setCategory(categoryInfo.name);
-    setCategoryId(categoryInfo.id);
+    setValue('category_ids', [categoryInfo.id, 0]);
   };
 
   return (
@@ -21,10 +19,10 @@ export default function Category() {
         <button
           className={cn({
             [styles.category__menu]: true,
-            [styles['category__menu--selected']]: category === categoryInfo.name,
+            [styles['category__menu--selected']]: categoryId[0] === categoryInfo.id,
           })}
           type="button"
-          onClick={() => { handleCategoryClick(categoryInfo); }}
+          onClick={() => handleCategoryClick(categoryInfo)}
           key={categoryInfo.id}
         >
           <img
diff --git a/src/page/ShopRegistration/component/Modal/ConfirmShop/index.tsx b/src/page/ShopRegistration/component/Modal/ConfirmShop/index.tsx
index c70a5e95..9f5b0ab5 100644
--- a/src/page/ShopRegistration/component/Modal/ConfirmShop/index.tsx
+++ b/src/page/ShopRegistration/component/Modal/ConfirmShop/index.tsx
@@ -1,36 +1,26 @@
-import useShopRegistrationStore from 'store/shopRegistration';
+import { useFormContext } from 'react-hook-form';
 import styles from './ConfirmShop.module.scss';
 
-interface ShopInfo {
-  name: string;
-  phone: string;
-  id: string;
-}
-
 interface ConfirmShopProps {
-  open: boolean;
-  selectedShop: ShopInfo;
   onCancel: () => void;
 }
 
-export default function ConfirmShop({ open, onCancel, selectedShop }: ConfirmShopProps) {
-  const { setName, setShopId } = useShopRegistrationStore();
-  if (!open) return null;
+export default function ConfirmShop({ onCancel }: ConfirmShopProps) {
+  const { getValues } = useFormContext();
+  const values = getValues();
   return (
     <div className={styles.container}>
       <div className={styles.container__info}>
-        <span className={styles.container__title}>{selectedShop.name}</span>
+        <span className={styles.container__title}>{values.name}</span>
         <div className={styles.container__text}>
           <span className={styles['container__phone-number-label']}>전화번호</span>
-          <span className={styles['container__phone-number']}>{selectedShop.phone}</span>
+          <span className={styles['container__phone-number']}>{values.phone}</span>
         </div>
       </div>
       <button
         type="button"
         className={styles['container__select-button']}
         onClick={() => {
-          setName(selectedShop.name);
-          setShopId(selectedShop.id);
           onCancel();
         }}
       >
diff --git a/src/page/ShopRegistration/component/Modal/OperateTimeMobile/index.tsx b/src/page/ShopRegistration/component/Modal/OperateTimeMobile/index.tsx
index 164fddb0..0ef285dd 100644
--- a/src/page/ShopRegistration/component/Modal/OperateTimeMobile/index.tsx
+++ b/src/page/ShopRegistration/component/Modal/OperateTimeMobile/index.tsx
@@ -1,11 +1,12 @@
-import PreviousStep from 'component/common/Auth/PreviousStep';
-import SubTitle from 'component/common/Auth/SubTitle';
-import useStepStore from 'store/useStepStore';
+import PreviousStep from 'component/Auth/PreviousStep';
+import SubTitle from 'component/Auth/SubTitle';
 import TimePicker from 'page/ShopRegistration/component/TimePicker';
 import { WEEK } from 'utils/constant/week';
 import { createPortal } from 'react-dom';
 import useModalStore, { OperatingTime } from 'store/modalStore';
 import cn from 'utils/ts/className';
+import { useFunnel } from 'utils/hooks/useFunnel';
+import PROGRESS_TITLE from 'utils/constant/progress';
 import styles from './OperateTimeMobile.module.scss';
 
 interface OperateTimeMobileProps {
@@ -14,7 +15,9 @@ interface OperateTimeMobileProps {
 }
 
 export default function OperateTimeMobile({ isOpen, closeModal }: OperateTimeMobileProps) {
-  const step = useStepStore((state) => state.step);
+  const { currentStep } = useFunnel('세부 정보 입력');
+  const currentIndex = PROGRESS_TITLE.findIndex((step) => step.title === currentStep);
+
   const { shopClosedState } = useModalStore();
 
   const handleShopClosedChange = (day: typeof WEEK[number]) => {
@@ -43,7 +46,7 @@ export default function OperateTimeMobile({ isOpen, closeModal }: OperateTimeMob
     <div>
       <div className={styles.container}>
         <div className={styles['chevron-left']}>
-          <PreviousStep step={step} clickEvent={closeModal} />
+          <PreviousStep step={currentIndex} clickEvent={closeModal} />
         </div>
         <div className={styles.content}>
           <SubTitle topTitle="가게 등록" bottomTitle="" topText="시간 설정" bottomText="" />
diff --git a/src/page/ShopRegistration/component/Modal/SearchShop/SearchShop.module.scss b/src/page/ShopRegistration/component/Modal/SearchShop/SearchShop.module.scss
index 25f03a6e..4da76d80 100644
--- a/src/page/ShopRegistration/component/Modal/SearchShop/SearchShop.module.scss
+++ b/src/page/ShopRegistration/component/Modal/SearchShop/SearchShop.module.scss
@@ -58,7 +58,7 @@
   &__title {
     display: block;
     max-width: 220px;
-    text-align: start;
+    text-align: flex-start;
     font-size: 15px;
   }
 
diff --git a/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx b/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx
index 6036b5d5..660df586 100644
--- a/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx
+++ b/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx
@@ -1,9 +1,9 @@
 import { ReactComponent as Magnifier } from 'assets/svg/shopRegistration/magnifier.svg';
 import cn from 'utils/ts/className';
 import { ChangeEvent, useEffect, useState } from 'react';
-import useBooleanState from 'utils/hooks/useBooleanState';
 import ConfirmShop from 'page/ShopRegistration/component/Modal/ConfirmShop';
 import useShopList from 'query/shops';
+import { useFormContext } from 'react-hook-form';
 import styles from './SearchShop.module.scss';
 
 interface SearchShopProps {
@@ -12,54 +12,40 @@ interface SearchShopProps {
 }
 
 export default function SearchShop({ open, onCancel }: SearchShopProps) {
-  const [selectedShop, setSelectedShop] = useState({
-    name: '',
-    phone: '',
-    id: '',
-  });
-  const { value: showConfirmShop, setValue: setConfirmShop } = useBooleanState(false);
   const [searchText, setSearchText] = useState('');
 
   const { shopList, isError } = useShopList();
+  const { getValues, setValue } = useFormContext();
+  const values = getValues();
 
-  function handleClickShop(e: React.MouseEvent<HTMLButtonElement>) {
-    const { name, phone, id } = JSON.parse(e.currentTarget.value);
-    if (!showConfirmShop) {
-      setSelectedShop({
-        name,
-        phone,
-        id,
-      });
-    } else {
-      setSelectedShop({
-        name: '',
-        phone: '',
-        id: '',
-      });
-    }
-  }
-
+  const handleClickShop = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const {
+      name, phone, id, delivery, payBank, payCard,
+    } = JSON.parse(e.currentTarget.value);
+    setValue('name', name);
+    setValue('phone', phone);
+    setValue('id', id);
+    setValue('delivery', delivery);
+    setValue('pay_bank', payBank);
+    setValue('pay_card', payCard);
+  };
   const [filteredShopList, setFilteredShopList] = useState(shopList?.shops);
 
-  function handleSearch() {
+  const handleSearch = () => {
     if (searchText !== '') {
       setFilteredShopList(shopList?.shops.filter(({ name }) => name.includes(searchText)));
     }
-  }
+  };
 
-  function handleChangeSearchText(e: ChangeEvent<HTMLInputElement>) {
+  const handleChangeSearchText = (e: ChangeEvent<HTMLInputElement>) => {
     setSearchText(e.target.value);
-  }
+  };
 
-  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       handleSearch();
     }
-  }
-
-  function toggleConfirmShop() {
-    setConfirmShop((prev) => !prev);
-  }
+  };
 
   useEffect(() => {
     if (searchText === '') {
@@ -92,17 +78,19 @@ export default function SearchShop({ open, onCancel }: SearchShopProps) {
             key={shop.id}
             className={cn({
               [styles.shop]: true,
-              [styles['shop--selected']]: selectedShop.name === shop.name,
+              [styles['shop--selected']]: values.name === shop.name,
             })}
             value={JSON.stringify({
               name: shop.name,
               phone: shop.phone,
               id: shop.id,
+              delivery: shop.delivery,
+              payBank: shop.pay_bank,
+              payCard: shop.pay_card,
             })}
             type="button"
             onClick={(e) => {
               handleClickShop(e);
-              toggleConfirmShop();
             }}
           >
             <span className={styles.shop__title}>{shop.name}</span>
@@ -132,7 +120,7 @@ export default function SearchShop({ open, onCancel }: SearchShopProps) {
           </button>
         ))}
       </div>
-      <ConfirmShop open={showConfirmShop} onCancel={onCancel} selectedShop={selectedShop} />
+      {values.id && <ConfirmShop onCancel={onCancel} />}
     </div>
   );
 }
diff --git a/src/page/ShopRegistration/constant/errorMessage.ts b/src/page/ShopRegistration/constant/errorMessage.ts
index 4f261776..475caf31 100644
--- a/src/page/ShopRegistration/constant/errorMessage.ts
+++ b/src/page/ShopRegistration/constant/errorMessage.ts
@@ -5,6 +5,7 @@ export const ERRORMESSAGE: { [key: string]: string } = {
   address: '주소를 입력해주세요.',
   phone: '전화번호를 입력해주세요.',
   invalidPhone: '전화번호 형식이 올바르지 않습니다.',
+  invalidPrice: '배달금액 형식이 올바르지 않습니다',
   networkError: '네트워크 오류가 발생했습니다. 다시 시도해주세요.',
   401: '이미지 등록에 실패했습니다. 다시 시도해주세요.',
   404: '존재하지 않는 도메인입니다.',
diff --git a/src/page/ShopRegistration/hooks/useStoreTimeSetUp.ts b/src/page/ShopRegistration/hooks/useStoreTimeSetUp.ts
new file mode 100644
index 00000000..e28ed3b4
--- /dev/null
+++ b/src/page/ShopRegistration/hooks/useStoreTimeSetUp.ts
@@ -0,0 +1,26 @@
+import { OwnerShop } from 'model/shopInfo/ownerShop';
+import { useEffect } from 'react';
+import { UseFormSetValue } from 'react-hook-form';
+import useModalStore from 'store/modalStore';
+import { DAY_OF_WEEK } from 'utils/constant/week';
+
+interface StoreTimeSetUpProps {
+  setValue : UseFormSetValue<OwnerShop>;
+}
+
+export default function useStoreTimeSetUp({ setValue }: StoreTimeSetUpProps) {
+  const { openTimeState, closeTimeState, shopClosedState } = useModalStore();
+  const openTimeArray = Object.values(openTimeState);
+  const closeTimeArray = Object.values(closeTimeState);
+  const shopClosedArray = Object.values(shopClosedState);
+
+  useEffect(() => {
+    const openValue = DAY_OF_WEEK.map((day, index) => ({
+      close_time: closeTimeArray[index],
+      closed: shopClosedArray[index],
+      day_of_week: day,
+      open_time: openTimeArray[index],
+    }));
+    setValue('open', openValue);
+  }, [closeTimeArray, openTimeArray, setValue, shopClosedArray]);
+}
diff --git a/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss b/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss
index ce0cd881..67fd63f9 100644
--- a/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss
+++ b/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss
@@ -48,10 +48,40 @@
   }
 
   &__main-menu {
+    display: flex;
+    overflow-y: hidden;
+    flex-direction: row;
+    white-space: nowrap;
     max-width: 295px;
     max-height: 200px;
   }
 
+  &__main-menu-image {
+    object-fit: contain;
+    max-width: 295px;
+    height: 200px;
+  }
+
+  &__delete-img-button {
+    position: relative;
+    right: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f7941e;
+    border-radius: 50%;
+    height: 24px;
+
+    svg {
+      width: 24px;
+      height: 10px;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
   &__text {
     margin-top: 8px;
     font-size: 14px;
diff --git a/src/page/ShopRegistration/view/Mobile/Main/index.tsx b/src/page/ShopRegistration/view/Mobile/Main/index.tsx
index 2b3c538b..5b454d85 100644
--- a/src/page/ShopRegistration/view/Mobile/Main/index.tsx
+++ b/src/page/ShopRegistration/view/Mobile/Main/index.tsx
@@ -1,43 +1,50 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import { ReactComponent as EmptyImgIcon } from 'assets/svg/shopRegistration/mobile-empty-img.svg';
-import useStepStore from 'store/useStepStore';
-import useShopRegistrationStore from 'store/shopRegistration';
-import { useEffect, useState } from 'react';
-import ErrorMessage from 'page/Auth/Signup/ErrorMessage';
+import { ReactComponent as MobileDeleteImgIcon } from 'assets/svg/addmenu/mobile-delete-new-image.svg';
+import { useEffect } from 'react';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import cn from 'utils/ts/className';
 import useImagesUpload from 'utils/hooks/useImagesUpload';
+import { useFormContext, useWatch } from 'react-hook-form';
 import styles from './Main.module.scss';
 
-export default function Main() {
-  const [isError, setIsError] = useState(false);
-  const { increaseStep } = useStepStore();
+export default function Main({ onNext }:{ onNext: () => void }) {
   const {
-    imageFile, imgRef, saveImgFile, uploadError,
-  } = useImagesUpload();
+    register, control, setValue, trigger, formState: { errors },
+  } = useFormContext();
+
+  const name = useWatch({ control, name: 'name' });
+  const address = useWatch({ control, name: 'address' });
+  const imageUrls = useWatch({ control, name: 'image_urls' });
+
   const {
-    name, setName, address, setAddress, imageUrls, setImageUrls,
-  } = useShopRegistrationStore();
+    imageFile, imgRef, saveImgFile, uploadError, setImageFile,
+  } = useImagesUpload();
 
-  const handleNextClick = () => {
-    if (name === '' || address === '' || imageUrls.length === 0 || uploadError !== '') {
-      setIsError(true);
-    } else {
-      setIsError(false);
-      increaseStep();
-    }
+  const handleDeleteImage = (url: string) => {
+    setImageFile(imageFile.filter((img) => img !== url));
   };
 
   useEffect(() => {
-    if (imageFile.length > 0 || uploadError !== '') setImageUrls(imageFile);
-  }, [imageFile]);
+    if (imageFile.length > 0) {
+      setValue('image_urls', imageFile);
+    }
+  }, [imageFile, setValue]);
+
+  const handleNextClick = async () => {
+    const isValid = await trigger(['image_urls', 'name', 'address']);
+    if (!isValid) {
+      return;
+    }
+    onNext();
+  };
 
   return (
     <div className={styles.form}>
       <label
         className={cn({
           [styles['form__image-upload']]: true,
-          [styles['form__image-upload--error']]: uploadError !== '' || (imageUrls.length === 0 && isError),
+          [styles['form__image-upload--error']]: uploadError !== '' || errors.image_urls !== undefined,
         })}
         htmlFor="mainMenuImage"
       >
@@ -46,11 +53,28 @@ export default function Main() {
           accept="image/*"
           id="mainMenuImage"
           className={styles['form__upload-file']}
-          onChange={saveImgFile}
+          {...register('image_urls', { required: true })}
           ref={imgRef}
+          onChange={saveImgFile}
         />
-        {imageUrls
-          ? <img src={imageUrls[0]} className={styles['form__main-menu']} alt="메인 메뉴" />
+        {imageUrls.length !== 0
+          ? (
+            <div className={styles['form__main-menu']}>
+              {imageUrls.map((url: string) => (
+                <>
+                  <img key={url} src={url} className={styles['form__main-menu-image']} alt="대표 이미지" />
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteImage(url)}
+                    className={styles['form__delete-img-button']}
+                    aria-label="Delete image"
+                  >
+                    <MobileDeleteImgIcon />
+                  </button>
+                </>
+              ))}
+            </div>
+          )
           : (
             <>
               <EmptyImgIcon />
@@ -59,46 +83,46 @@ export default function Main() {
           )}
       </label>
       <div className={styles['form__image-error-message']}>
-        {uploadError === '' && imageUrls.length === 0 && isError && <ErrorMessage message={ERRORMESSAGE.image} />}
+        {errors.image_urls && <ErrorMessage message={ERRORMESSAGE.image} />}
         {uploadError !== '' && <ErrorMessage message={ERRORMESSAGE[uploadError]} />}
       </div>
       <label
         htmlFor="shopName"
         className={cn({
           [styles.form__label]: true,
-          [styles['form__label--error']]: name === '' && isError,
+          [styles['form__label--error']]: errors.name !== undefined,
         })}
       >
         가게명
         <input
           type="text"
           id="shopName"
-          onChange={(e) => setName(e.target.value)}
           value={name}
           className={styles.form__input}
+          {...register('name', { required: true })}
         />
       </label>
       <div className={styles['form__error-message']}>
-        {name === '' && isError && <ErrorMessage message={ERRORMESSAGE.name} />}
+        {errors.name && <ErrorMessage message={ERRORMESSAGE.name} />}
       </div>
       <label
         htmlFor="shopAddress"
         className={cn({
           [styles.form__label]: true,
-          [styles['form__label--error']]: address === '' && isError,
+          [styles['form__label--error']]: errors.address !== undefined,
         })}
       >
         주소정보
         <input
           type="text"
           id="shopAddress"
-          onChange={(e) => setAddress(e.target.value)}
           value={address}
           className={styles.form__input}
+          {...register('address', { required: true })}
         />
       </label>
       <div className={styles['form__error-message']}>
-        {address === '' && isError && <ErrorMessage message={ERRORMESSAGE.address} />}
+        {errors.address && <ErrorMessage message={ERRORMESSAGE.address} />}
       </div>
       <div className={styles.form__button}>
         <button type="button" onClick={handleNextClick}>다음</button>
diff --git a/src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx b/src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx
index deab8a5d..252bdfe3 100644
--- a/src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx
+++ b/src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx
@@ -1,32 +1,28 @@
-import useStepStore from 'store/useStepStore';
 import useMyShop from 'query/shop';
 import cn from 'utils/ts/className';
 import { Category as CategoryProps } from 'model/category/shopCategory';
-import useShopRegistrationStore from 'store/shopRegistration';
 import { useState } from 'react';
-import ErrorMessage from 'page/Auth/Signup/ErrorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
+import { useFormContext, useWatch } from 'react-hook-form';
 import styles from './ShopCategory.module.scss';
 
-export default function ShopCategory() {
+export default function ShopCategory({ onNext }:{ onNext: () => void }) {
   const [isError, setIsError] = useState(false);
   const { categoryList } = useMyShop();
-  const { increaseStep } = useStepStore();
-  const {
-    category, setCategory, setCategoryId,
-  } = useShopRegistrationStore();
+  const { control, setValue } = useFormContext();
+  const categoryId = useWatch({ control, name: 'category_ids' });
 
   const handleCategoryClick = (categoryInfo: CategoryProps) => {
-    setCategory(categoryInfo.name);
-    setCategoryId(categoryInfo.id);
+    setValue('category_ids', [categoryInfo.id, 0]);
   };
 
   const handleNextClick = () => {
-    if (category.length === 0) {
+    if (!categoryId) {
       setIsError(true);
     } else {
       setIsError(false);
-      increaseStep();
+      onNext();
     }
   };
 
@@ -38,7 +34,7 @@ export default function ShopCategory() {
           <button
             className={cn({
               [styles.category__menu]: true,
-              [styles['category__menu--selected']]: category === categoryInfo.name,
+              [styles['category__menu--selected']]: categoryId[0] === categoryInfo.id,
             })}
             type="button"
             onClick={() => handleCategoryClick(categoryInfo)}
@@ -53,10 +49,10 @@ export default function ShopCategory() {
           </button>
         ))}
       </div>
-      {category.length === 0 && isError && <ErrorMessage message={ERRORMESSAGE.category} />}
+      {isError && <ErrorMessage message={ERRORMESSAGE.category} />}
       <div className={cn({
         [styles.category__button]: true,
-        [styles['category__button--error']]: category.length === 0 && isError,
+        [styles['category__button--error']]: isError,
       })}
       >
         <button type="button" onClick={handleNextClick}>다음</button>
diff --git a/src/page/ShopRegistration/view/Mobile/ShopConfirmation/index.tsx b/src/page/ShopRegistration/view/Mobile/ShopConfirmation/index.tsx
index ba4d2f84..67255b5a 100644
--- a/src/page/ShopRegistration/view/Mobile/ShopConfirmation/index.tsx
+++ b/src/page/ShopRegistration/view/Mobile/ShopConfirmation/index.tsx
@@ -1,27 +1,31 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import useStepStore from 'store/useStepStore';
-import useShopRegistrationStore from 'store/shopRegistration';
 import useOperateTimeState from 'page/ShopRegistration/hooks/useOperateTimeState';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { SubmitHandler, useFormContext } from 'react-hook-form';
 import { OwnerShop } from 'model/shopInfo/ownerShop';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { postShop } from 'api/shop';
-import { useEffect } from 'react';
-import { DAY_OF_WEEK, WEEK } from 'utils/constant/week';
+import { WEEK } from 'utils/constant/week';
 import useModalStore from 'store/modalStore';
 import CheckSameTime from 'page/ShopRegistration/hooks/CheckSameTime';
 import { isKoinError } from '@bcsdlab/koin';
 import showToast from 'utils/ts/showToast';
+import useMyShop from 'query/shop';
 import styles from './ShopConfirmation.module.scss';
 
-export const usePostData = (setStep: (step: number) => void) => {
+interface UsePostDataProps {
+  onNext?:() => void
+}
+
+export const usePostData = ({ onNext } : UsePostDataProps) => {
   const queryClient = useQueryClient();
+  const { resetOperatingTime } = useModalStore();
   const mutation = useMutation({
     mutationFn: (form: OwnerShop) => postShop(form),
     onSuccess: () => {
-      setStep(5);
+      if (onNext) {
+        onNext();
+      }
       queryClient.refetchQueries();
+      resetOperatingTime();
     },
     onError: (e) => {
       if (isKoinError(e)) {
@@ -32,134 +36,86 @@ export const usePostData = (setStep: (step: number) => void) => {
   return mutation;
 };
 
-export default function ShopConfirmation() {
-  const { setStep } = useStepStore();
-  const {
-    category,
-    categoryId,
-    imageUrls,
-    name,
-    address,
-    phone,
-    deliveryPrice,
-    description,
-    delivery,
-    payBank,
-    payCard,
-  } = useShopRegistrationStore();
-
+export default function ShopConfirmation({ onNext }:{ onNext: () => void }) {
+  const { categoryList } = useMyShop();
   const operateTimeState = useOperateTimeState();
 
-  const { handleSubmit, setValue } = useForm<OwnerShop>({
-    resolver: zodResolver(OwnerShop),
-  });
-
-  const mutation = usePostData(setStep);
-
+  const { handleSubmit, getValues } = useFormContext<OwnerShop>();
+  const values = getValues();
+  const categoryId = categoryList?.shop_categories[values.category_ids[0] - 1].name;
+  const mutation = usePostData({ onNext });
   const onSubmit: SubmitHandler<OwnerShop> = (data) => {
     mutation.mutate(data);
   };
 
-  const { openTimeState, closeTimeState, shopClosedState } = useModalStore();
+  const { shopClosedState } = useModalStore();
   const { isAllSameTime, hasClosedDay, isSpecificDayClosedAndAllSameTime } = CheckSameTime();
 
-  const openTimeArray = Object.values(openTimeState);
-  const closeTimeArray = Object.values(closeTimeState);
-  const shopClosedArray = Object.values(shopClosedState);
-
-  useEffect(() => {
-    const openValue = DAY_OF_WEEK.map((day, index) => ({
-      close_time: closeTimeArray[index],
-      closed: shopClosedArray[index],
-      day_of_week: day,
-      open_time: openTimeArray[index],
-    }));
-    setValue('image_urls', imageUrls);
-    setValue('category_ids', [categoryId]);
-    setValue('name', name);
-    setValue('address', address);
-    setValue('phone', phone);
-    setValue('delivery_price', Number(deliveryPrice));
-    setValue('description', description);
-    setValue('delivery', delivery);
-    setValue('pay_bank', payBank);
-    setValue('pay_card', payCard);
-    setValue('open', openValue);
-  }, [openTimeArray, closeTimeArray, shopClosedArray, categoryId, name,
-    address, phone, deliveryPrice, description, delivery, payBank, payCard, imageUrls]);
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className={styles.form}>
         <div className={styles.form__info}>
           <span className={styles.form__title}>카테고리</span>
-          <span className={styles.form__value}>{category}</span>
+          <span className={styles.form__value}>{categoryId}</span>
         </div>
         <div className={styles.form__info}>
           <span className={styles.form__title}>가게명</span>
-          <span className={styles.form__value}>{name}</span>
+          <span className={styles.form__value}>{values.name}</span>
         </div>
         <div className={styles.form__info}>
           <span className={styles.form__title}>주소정보</span>
-          <span className={styles.form__value}>{address}</span>
+          <span className={styles.form__value}>{values.address}</span>
         </div>
         <div className={styles.form__info}>
           <span className={styles.form__title}>전화번호</span>
-          <span className={styles.form__value}>{phone}</span>
+          <span className={styles.form__value}>{values.phone}</span>
         </div>
         <div className={styles.form__info}>
           <span className={styles.form__title}>배달금액</span>
-          <span className={styles.form__value}>{deliveryPrice === 0 ? '무료' : `${deliveryPrice}원`}</span>
+          <span className={styles.form__value}>{values.delivery_price === 0 ? '무료' : `${values.delivery_price}원`}</span>
         </div>
         <div className={styles.form__info}>
           <span className={styles.form__title}>운영시간</span>
           <span className={styles.form__value}>
             <span>
-              {
-                isAllSameTime && !hasClosedDay ? (
-                  <div>
-                    {operateTimeState.time}
-                  </div>
-                )
-                  : null
-              }
-              {
-                isSpecificDayClosedAndAllSameTime ? (
-                  <div>
-                    <div>{operateTimeState.time}</div>
-                    <div>{operateTimeState.holiday}</div>
-                  </div>
-                ) : null
-              }
-              {
-                !isAllSameTime && !isSpecificDayClosedAndAllSameTime ? (
-                  <>
-                    {WEEK.map((day) => (
-                      <div key={day}>
-                        {shopClosedState[day] ? `${operateTimeState[day]}` : `${day} : ${operateTimeState[day]}`}
-                      </div>
-                    ))}
-                  </>
-                ) : null
-              }
+              {isAllSameTime && !hasClosedDay && (
+                <div>
+                  {operateTimeState.time}
+                </div>
+              )}
+              {isSpecificDayClosedAndAllSameTime && (
+                <div>
+                  <div>{operateTimeState.time}</div>
+                  <div>{operateTimeState.holiday}</div>
+                </div>
+              )}
+              {!isAllSameTime && !isSpecificDayClosedAndAllSameTime && (
+                <>
+                  {WEEK.map((day) => (
+                    <div key={day}>
+                      {shopClosedState[day] ? `${operateTimeState[day]}` : `${day} : ${operateTimeState[day]}`}
+                    </div>
+                  ))}
+                </>
+              )}
             </span>
           </span>
         </div>
         <div className={styles.form__info}>
           <span className={styles.form__title}>기타정보</span>
-          <span className={styles.form__value}>{description}</span>
+          <span className={styles.form__value}>{values.description}</span>
         </div>
         <div className={styles.form__checkbox}>
           <label htmlFor="delivery" className={styles['form__checkbox-label']}>
-            <input type="checkbox" id="delivery" className={styles['form__checkbox-input']} readOnly checked={delivery} />
+            <input type="checkbox" id="delivery" className={styles['form__checkbox-input']} readOnly checked={values.delivery} />
             <span>배달 가능</span>
           </label>
           <label htmlFor="card" className={styles['form__checkbox-label']}>
-            <input type="checkbox" id="card" className={styles['form__checkbox-input']} readOnly checked={payCard} />
+            <input type="checkbox" id="card" className={styles['form__checkbox-input']} readOnly checked={values.pay_card} />
             <span>카드 가능</span>
           </label>
           <label htmlFor="bank" className={styles['form__checkbox-label']}>
-            <input type="checkbox" id="bank" className={styles['form__checkbox-input']} readOnly checked={payBank} />
+            <input type="checkbox" id="bank" className={styles['form__checkbox-input']} readOnly checked={values.pay_bank} />
             <span>계좌이체 가능</span>
           </label>
         </div>
diff --git a/src/page/ShopRegistration/view/Mobile/ShopEntry/index.tsx b/src/page/ShopRegistration/view/Mobile/ShopEntry/index.tsx
index 2dab6b92..7818ac21 100644
--- a/src/page/ShopRegistration/view/Mobile/ShopEntry/index.tsx
+++ b/src/page/ShopRegistration/view/Mobile/ShopEntry/index.tsx
@@ -1,9 +1,7 @@
 import { ReactComponent as Memo } from 'assets/svg/shopRegistration/memo.svg';
-import useStepStore from 'store/useStepStore';
 import styles from './ShopEntry.module.scss';
 
-export default function ShopEntry() {
-  const { increaseStep } = useStepStore();
+export default function ShopEntry({ onNext }:{ onNext: () => void }) {
   return (
     <div className={styles.block}>
       <Memo className={styles.block__icon} />
@@ -15,7 +13,7 @@ export default function ShopEntry() {
         <span>
           학생들에게 최신 가게 정보를 알려주세요.
         </span>
-        <button type="button" className={styles.block__button} onClick={increaseStep}>가게 정보 기입</button>
+        <button type="button" className={styles.block__button} onClick={onNext}>가게 정보 기입</button>
       </div>
     </div>
   );
diff --git a/src/page/ShopRegistration/view/Mobile/Sub/index.tsx b/src/page/ShopRegistration/view/Mobile/Sub/index.tsx
index 988373ae..d5690671 100644
--- a/src/page/ShopRegistration/view/Mobile/Sub/index.tsx
+++ b/src/page/ShopRegistration/view/Mobile/Sub/index.tsx
@@ -1,37 +1,23 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import OperateTimeMobile from 'page/ShopRegistration/component/Modal/OperateTimeMobile';
 import useBooleanState from 'utils/hooks/useBooleanState';
-import useStepStore from 'store/useStepStore';
-import useShopRegistrationStore from 'store/shopRegistration';
 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/ErrorMessage';
+import ErrorMessage from 'component/common/ErrorMessage';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
 import cn from 'utils/ts/className';
+import { useFormContext, useWatch } from 'react-hook-form';
+import useStoreTimeSetUp from 'page/ShopRegistration/hooks/useStoreTimeSetUp';
+import { OwnerShop } from 'model/shopInfo/ownerShop';
 import styles from './Sub.module.scss';
 
-export default function Sub() {
-  const { increaseStep } = useStepStore();
+export default function Sub({ onNext }:{ onNext: () => void }) {
   const {
     value: showOperateTime,
     setTrue: openOperateTime,
     setFalse: closeOperateTime,
   } = useBooleanState(false);
-  const {
-    setPhone, setDeliveryPrice, setDescription, setDelivery, setPayBank, setPayCard,
-  } = useShopRegistrationStore();
-
-  const {
-    phone,
-    deliveryPrice,
-    description,
-    delivery,
-    payBank,
-    payCard,
-  } = useShopRegistrationStore();
 
   const operateTimeState = useOperateTimeState();
   const {
@@ -40,25 +26,39 @@ export default function Sub() {
     isSpecificDayClosedAndAllSameTime,
     isAllClosed,
   } = CheckSameTime();
+
   const { shopClosedState } = useModalStore();
-  const [isError, setIsError] = useState(false);
 
-  const formatPhoneNumber = (inputNumber: string) => {
+  const {
+    register, control, trigger, setValue, formState: { errors },
+  } = useFormContext<OwnerShop>();
+
+  const phone = useWatch({ control, name: 'phone' });
+  const deliveryPrice = useWatch({ control, name: 'delivery_price' });
+  const description = useWatch({ control, name: 'description' });
+  const delivery = useWatch({ control, name: 'delivery' });
+  const payBank = useWatch({ control, name: 'pay_bank' });
+  const payCard = useWatch({ control, name: 'pay_card' });
+
+  useStoreTimeSetUp({ setValue });
+
+  const formatPhoneNumber = (inputNumber:string) => {
     const phoneNumber = inputNumber.replace(/\D/g, '');
-    const formattedPhoneNumber = phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
-    if (formattedPhoneNumber.length > 13) return formattedPhoneNumber.slice(0, 13);
+    const formattedPhoneNumber = phoneNumber.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1-$2-$3');
     return formattedPhoneNumber;
   };
 
-  const phoneNumberPattern = /^\d{3}-\d{4}-\d{4}$/;
-  const isValidPhoneNumber = phoneNumberPattern.test(phone);
-  const handleNextClick = () => {
-    if (phone === '' || Number.isNaN(deliveryPrice) || !isValidPhoneNumber) {
-      setIsError(true);
-    } else {
-      setIsError(false);
-      increaseStep();
+  const handlePhoneChange = (event:React.ChangeEvent<HTMLInputElement>) => {
+    const formattedValue = formatPhoneNumber(event.target.value);
+    setValue('phone', formattedValue);
+  };
+
+  const handleNextClick = async () => {
+    const isValid = await trigger(['phone', 'delivery_price']);
+    if (!isValid) {
+      return;
     }
+    onNext();
   };
 
   if (showOperateTime) {
@@ -73,21 +73,28 @@ export default function Sub() {
         htmlFor="phone"
         className={cn({
           [styles.form__label]: true,
-          [styles['form__label--error']]: (phone === '' || !isValidPhoneNumber) && isError,
+          [styles['form__label--error']]: errors.phone !== undefined,
         })}
       >
         전화번호
         <input
           type="text"
+          inputMode="numeric"
           id="phone"
-          onChange={(e) => setPhone(formatPhoneNumber(e.target.value))}
           value={phone}
           className={styles.form__input}
+          {...register('phone', {
+            required: true,
+            pattern: {
+              value: /^\d{3}-\d{3,4}-\d{4}$/,
+              message: ERRORMESSAGE.invalidPhone,
+            },
+            onChange: handlePhoneChange,
+          })}
         />
       </label>
       <div className={styles['form__error-message']}>
-        {phone === '' && isError && <ErrorMessage message={ERRORMESSAGE.phone} />}
-        {(!isValidPhoneNumber && phone !== '' && isError) && <ErrorMessage message={ERRORMESSAGE.invalidPhone} />}
+        {errors.phone && <ErrorMessage message={ERRORMESSAGE.phone} />}
       </div>
       <label
         htmlFor="deliveryPrice"
@@ -96,10 +103,12 @@ export default function Sub() {
         배달금액
         <input
           type="number"
+          inputMode="numeric"
           id="deliveryPrice"
-          onChange={(e) => setDeliveryPrice(Number(e.target.value))}
-          value={deliveryPrice === 0 ? undefined : deliveryPrice}
+          value={deliveryPrice}
           className={styles.form__input}
+          {...register('delivery_price')}
+          onWheel={(e) => (e.target as HTMLElement).blur()} // 마우스 스크롤로 숫자 변경 방지
         />
       </label>
       <div className={styles.form__label}>
@@ -152,8 +161,8 @@ export default function Sub() {
           type="text"
           id="extra-info"
           className={styles.form__input}
-          onChange={(e) => setDescription(e.target.value)}
           value={description}
+          {...register('description')}
         />
       </label>
       <div className={styles.form__checkbox}>
@@ -161,9 +170,9 @@ export default function Sub() {
           <input
             type="checkbox"
             id="delivery"
-            onChange={(e) => setDelivery(e.target.checked)}
             className={styles['form__checkbox-input']}
             checked={delivery}
+            {...register('delivery')}
           />
           <span>배달 가능</span>
         </label>
@@ -171,9 +180,9 @@ export default function Sub() {
           <input
             type="checkbox"
             id="card"
-            onChange={(e) => setPayCard(e.target.checked)}
             className={styles['form__checkbox-input']}
             checked={payCard}
+            {...register('pay_card')}
           />
           <span>카드 가능</span>
         </label>
@@ -181,9 +190,9 @@ export default function Sub() {
           <input
             type="checkbox"
             id="bank"
-            onChange={(e) => setPayBank(e.target.checked)}
             className={styles['form__checkbox-input']}
             checked={payBank}
+            {...register('pay_bank')}
           />
           <span>계좌이체 가능</span>
         </label>
diff --git a/src/page/ShopRegistration/view/Mobile/index.tsx b/src/page/ShopRegistration/view/Mobile/index.tsx
index aed91226..00be4503 100644
--- a/src/page/ShopRegistration/view/Mobile/index.tsx
+++ b/src/page/ShopRegistration/view/Mobile/index.tsx
@@ -1,58 +1,149 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
-import PreviousStep from 'component/common/Auth/PreviousStep';
-import ProgressBar from 'component/common/Auth/ProgressBar';
-import Complete from 'component/common/Auth/Complete';
-import SubTitle from 'component/common/Auth/SubTitle';
-import useStepStore from 'store/useStepStore';
+import PreviousStep from 'component/Auth/PreviousStep';
+import ProgressBar from 'component/Auth/ProgressBar';
+import Complete from 'component/Auth/Complete';
+import SubTitle from 'component/Auth/SubTitle';
 import PROGRESS_TITLE from 'utils/constant/progress';
 import ShopEntry from 'page/ShopRegistration/view/Mobile/ShopEntry';
 import ShopCategory from 'page/ShopRegistration/view/Mobile/ShopCategory';
 import Main from 'page/ShopRegistration/view/Mobile/Main';
 import Sub from 'page/ShopRegistration/view/Mobile/Sub';
 import ShopConfirmation from 'page/ShopRegistration/view/Mobile/ShopConfirmation';
+import { useFunnel } from 'utils/hooks/useFunnel';
+import { FormProvider, useForm } from 'react-hook-form';
 import styles from './ShopRegistrationMobile.module.scss';
 
+const OPEN_DEFAULT_VALUES = [
+  {
+    day_of_week: 'MONDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'TUESDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'WEDNESDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'THURSDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'FRIDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'SATURDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'SUNDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+];
+
 export default function ShopRegistrationMobile() {
-  const { TOTAL_STEP, step, decreaseStep } = useStepStore();
-  // 임시로 step 0 일때 뒤로가기 버튼 삭제
+  const {
+    Funnel, Step, setStep, currentStep,
+  } = useFunnel('가게 등록');
+
+  const currentIndex = PROGRESS_TITLE.findIndex((step) => step.title === currentStep);
+
+  const decreaseStep = () => {
+    if (currentIndex > 0) {
+      setStep(PROGRESS_TITLE[currentIndex - 1].title);
+    }
+  };
+
+  const methods = useForm({
+    defaultValues: {
+      category_ids: [],
+      delivery_price: 0,
+      description: '',
+      image_urls: [],
+      name: '',
+      phone: '',
+      address: '',
+      delivery: false,
+      pay_bank: false,
+      pay_card: false,
+      open: OPEN_DEFAULT_VALUES,
+    },
+  });
+
   return (
-    <div>
-      {step !== 0 && <PreviousStep step={step} clickEvent={decreaseStep} />}
+    <FormProvider {...methods}>
+      {currentStep !== '가게 등록' && <PreviousStep step={currentIndex} clickEvent={decreaseStep} />}
       <div className={styles.content}>
-        {step === 0 && <ShopEntry />}
-        {step === 1 && (
-        <>
-          <SubTitle topTitle="가게 등록" bottomTitle="" topText="등록 하시려는 업체의" bottomText="메인 정보를 입력해 주세요." />
-          <ProgressBar step={step - 1} total={TOTAL_STEP} progressTitle={PROGRESS_TITLE} />
-          <ShopCategory />
-        </>
-        )}
-        {step === 2 && (
-        <>
-          <SubTitle topTitle="가게 등록" bottomTitle="" topText="등록 하시려는 업체의" bottomText="메인 정보를 입력해 주세요." />
-          <ProgressBar step={step - 1} total={TOTAL_STEP} progressTitle={PROGRESS_TITLE} />
-          <Main />
-        </>
-        )}
-        {step === 3 && (
-        <>
-          <SubTitle topTitle="가게 등록" bottomTitle="" topText="등록 하시려는 업체의" bottomText="세부 정보를 입력해 주세요." />
-          <ProgressBar step={step - 1} total={TOTAL_STEP} progressTitle={PROGRESS_TITLE} />
-          <Sub />
-        </>
-        )}
-        {step === 4 && (
-        <>
-          <SubTitle topTitle="가게 등록" bottomTitle="" topText="입력하신 정보가 맞습니까?" bottomText="" />
-          <div className={styles.margin} />
-          <ProgressBar step={step - 1} total={TOTAL_STEP} progressTitle={PROGRESS_TITLE} />
-          <ShopConfirmation />
-        </>
-        )}
-        {step === 5 && (
-        <Complete title="가게 등록 완료" topText="가게 등록이 완료되었습니다." bottomText="업체 정보 수정은 내 상점에서 가능합니다." link="/" linkText="메인 화면 바로가기" />
-        )}
+        <Funnel>
+          <Step name="가게 등록">
+            <ShopEntry onNext={() => setStep('가게 카테고리 설정')} />
+          </Step>
+          <Step name="가게 카테고리 설정">
+            <>
+              <SubTitle
+                topTitle="가게 등록"
+                bottomTitle=""
+                topText="등록 하시려는 업체의"
+                bottomText="메인 정보를 입력해 주세요."
+              />
+              <ProgressBar
+                step={PROGRESS_TITLE[1].step}
+                total={PROGRESS_TITLE.length}
+                progressTitle={PROGRESS_TITLE[1].title}
+              />
+              <ShopCategory onNext={() => setStep('메인 정보 입력')} />
+            </>
+          </Step>
+          <Step name="메인 정보 입력">
+            <>
+              <SubTitle
+                topTitle="가게 등록"
+                bottomTitle=""
+                topText="등록 하시려는 업체의"
+                bottomText="메인 정보를 입력해 주세요."
+              />
+              <ProgressBar
+                step={PROGRESS_TITLE[2].step}
+                total={PROGRESS_TITLE.length}
+                progressTitle={PROGRESS_TITLE[2].title}
+              />
+              <Main onNext={() => setStep('세부 정보 입력')} />
+            </>
+          </Step>
+          <Step name="세부 정보 입력">
+            <>
+              <SubTitle
+                topTitle="가게 등록"
+                bottomTitle=""
+                topText="등록 하시려는 업체의"
+                bottomText="세부 정보를 입력해 주세요."
+              />
+              <ProgressBar
+                step={PROGRESS_TITLE[3].step}
+                total={PROGRESS_TITLE.length}
+                progressTitle={PROGRESS_TITLE[3].title}
+              />
+              <Sub onNext={() => setStep('가게 정보 확인')} />
+            </>
+          </Step>
+          <Step name="가게 정보 확인">
+            <>
+              <SubTitle topTitle="가게 등록" bottomTitle="" topText="입력하신 정보가 맞습니까?" bottomText="" />
+              <div className={styles.margin} />
+              <ProgressBar
+                step={PROGRESS_TITLE[4].step}
+                total={PROGRESS_TITLE.length}
+                progressTitle={PROGRESS_TITLE[4].title}
+              />
+              <ShopConfirmation onNext={() => setStep('가게 등록 완료')} />
+            </>
+          </Step>
+          <Step name="가게 등록 완료">
+            <Complete
+              title="가게 등록 완료"
+              topText="가게 등록이 완료되었습니다."
+              bottomText="업체 정보 수정은 내 상점에서 가능합니다."
+              link="/"
+              linkText="메인 화면 바로가기"
+            />
+          </Step>
+        </Funnel>
       </div>
-    </div>
+    </FormProvider>
   );
 }
diff --git a/src/page/ShopRegistration/view/PC/ShopConfirmation/ShopConfirmation.module.scss b/src/page/ShopRegistration/view/PC/ShopConfirmation/ShopConfirmation.module.scss
new file mode 100644
index 00000000..9a4972c4
--- /dev/null
+++ b/src/page/ShopRegistration/view/PC/ShopConfirmation/ShopConfirmation.module.scss
@@ -0,0 +1,177 @@
+.wrapper {
+  position: relative;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80px 0 94px;
+
+  &__koin-logo {
+    width: 368px;
+    position: relative;
+    margin-bottom: 56px;
+    background-color: #ffffff;
+  }
+}
+
+.form {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+
+  &__title {
+    display: block;
+    font-size: 18px;
+    margin-bottom: 8px;
+  }
+
+  &__image-upload {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 210px;
+    height: 93px;
+    border: 1px solid #d2dae2;
+    padding: 53px 80px 54px;
+    cursor: pointer;
+
+    &--active {
+      display: flex;
+      flex-direction: column;
+      padding: 10px 20px;
+      width: 340px;
+      height: 180px;
+    }
+  }
+
+  &__upload-file {
+    display: none;
+  }
+
+  &__main-menu {
+    max-width: 370px;
+    max-height: 200px;
+  }
+
+  &__main-item {
+    max-width: 370px;
+    display: flex;
+  }
+
+  &__main-text {
+    width: 90%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    color: #858585;
+  }
+
+  &__cutlery-cross {
+    width: 64px;
+    height: 64px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+
+  &__text {
+    text-align: center;
+    font-size: 14px;
+    display: block;
+    color: #858585;
+    margin-top: 8px;
+  }
+
+  &__section {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: 8px;
+  }
+
+  &__input {
+    width: 240px;
+    border: 1px solid #d2dae2;
+    height: 22px;
+    padding: 13px 16px;
+
+    &:focus {
+      border-bottom: 1px solid black;
+    }
+  }
+
+  &__input-large {
+    width: 336px;
+    border: 1px solid #d2dae2;
+    height: 22px;
+    padding: 13px 16px;
+
+    &:focus {
+      border-bottom: 1px solid black;
+    }
+  }
+
+  &__operate-time {
+    display: flex;
+    align-items: center;
+    width: 272px;
+    height: auto;
+    font-size: 16px;
+    color: #858585;
+  }
+
+  &__checkbox {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 24px;
+    width: 368px;
+  }
+
+  &__checkbox-label {
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 14px;
+    color: #858585;
+    box-sizing: content-box;
+    cursor: pointer;
+
+    input[type="checkbox"]:checked + span {
+      color: #f7941e;
+    }
+  }
+
+  &__checkbox-input {
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 100%;
+    box-sizing: border-box;
+    border: 1px solid #858585;
+    margin-right: 8px;
+    background-size: cover;
+    cursor: pointer;
+
+    &:checked {
+      border: 2px solid #f7941e;
+      padding: 1px;
+      background-clip: content-box;
+      background-color: #f7941e;
+    }
+  }
+
+  &__next-button {
+    width: 368px;
+    margin-top: 56px;
+  }
+}
diff --git a/src/page/ShopRegistration/view/PC/ShopConfirmation/index.tsx b/src/page/ShopRegistration/view/PC/ShopConfirmation/index.tsx
new file mode 100644
index 00000000..2efe31d6
--- /dev/null
+++ b/src/page/ShopRegistration/view/PC/ShopConfirmation/index.tsx
@@ -0,0 +1,370 @@
+import { ReactComponent as Logo } from 'assets/svg/auth/koin-logo.svg';
+import { ReactComponent as Cutlery } from 'assets/svg/shopRegistration/cutlery.svg';
+import Copyright from 'component/common/Copyright';
+import CustomButton from 'page/Auth/Signup/component/CustomButton';
+import Category from 'page/ShopRegistration/component/Modal/Category';
+import SearchShop from 'page/ShopRegistration/component/Modal/SearchShop';
+import OperateTimePC from 'page/ShopRegistration/component/Modal/OperateTimePC';
+import ConfirmPopup from 'page/ShopRegistration/component/ConfirmPopup';
+import CustomModal from 'component/common/CustomModal';
+import cn from 'utils/ts/className';
+import useModalStore from 'store/modalStore';
+import { WEEK } from 'utils/constant/week';
+import { SubmitHandler, useFormContext, useWatch } from 'react-hook-form';
+import { OwnerShop } from 'model/shopInfo/ownerShop';
+import useImagesUpload from 'utils/hooks/useImagesUpload';
+import CheckSameTime from 'page/ShopRegistration/hooks/CheckSameTime';
+import useOperateTimeState from 'page/ShopRegistration/hooks/useOperateTimeState';
+import ErrorMessage from 'component/common/ErrorMessage';
+import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
+import { usePostData } from 'page/ShopRegistration/view/Mobile/ShopConfirmation/index';
+import { ReactComponent as FileImage } from 'assets/svg/auth/default-file.svg';
+import useMyShop from 'query/shop';
+import { useEffect, useState } from 'react';
+import useBooleanState from 'utils/hooks/useBooleanState';
+import useStoreTimeSetUp from 'page/ShopRegistration/hooks/useStoreTimeSetUp';
+import styles from './ShopConfirmation.module.scss';
+
+export default function ShopConfirmation({ onNext }:{ onNext: () => void }) {
+  const {
+    value: showCategory,
+    setTrue: openCategory,
+    setFalse: closeCategory,
+  } = useBooleanState(false);
+  const {
+    value: showOperateTime,
+    setTrue: openOperateTime,
+    setFalse: closeOperateTime,
+  } = useBooleanState(false);
+  const {
+    value: showSearchShop,
+    setTrue: openSearchShop,
+    setFalse: closeSearchShop,
+  } = useBooleanState(false);
+  const {
+    value: showConfirmPopup,
+    setTrue: openConfirmPopup,
+    setFalse: closeConfirmPopup,
+  } = useBooleanState(false);
+
+  const { shopClosedState } = useModalStore();
+
+  const {
+    isAllSameTime,
+    hasClosedDay,
+    isSpecificDayClosedAndAllSameTime,
+    isAllClosed,
+  } = CheckSameTime();
+
+  const { categoryList } = useMyShop();
+
+  const {
+    register, control, setValue, handleSubmit, formState: { errors },
+  } = useFormContext<OwnerShop>();
+
+  const {
+    imageFile, imgRef, saveImgFile, uploadError, setImageFile,
+  } = useImagesUpload();
+
+  const [isError, setIsError] = useState(false);
+
+  const operateTimeState = useOperateTimeState();
+
+  const imageUrls = useWatch({ control, name: 'image_urls' });
+  const name = useWatch({ control, name: 'name' });
+  const categoryId = useWatch({ control, name: 'category_ids' });
+  const phone = useWatch({ control, name: 'phone' });
+  const address = useWatch({ control, name: 'address' });
+  const deliveryPrice = useWatch({ control, name: 'delivery_price' });
+  const description = useWatch({ control, name: 'description' });
+  const delivery = useWatch({ control, name: 'delivery' });
+  const payCard = useWatch({ control, name: 'pay_card' });
+  const payBank = useWatch({ control, name: 'pay_bank' });
+  const selectedId = categoryList?.shop_categories[categoryId[0] - 1]?.name;
+
+  useStoreTimeSetUp({ setValue });
+
+  const formatPhoneNumber = (inputNumber: string) => {
+    const phoneNumber = inputNumber.replace(/\D/g, '');
+    const formattedPhoneNumber = phoneNumber.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1-$2-$3');
+    return formattedPhoneNumber;
+  };
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formattedValue = formatPhoneNumber(e.target.value);
+    setValue('phone', formattedValue);
+  };
+
+  const handleNextClick = () => {
+    if (imageUrls.length === 0 || name === '' || categoryId.length === 0
+      || address === '' || phone === '') {
+      setIsError(true);
+    } else {
+      setIsError(false);
+      openConfirmPopup();
+    }
+  };
+
+  const handleDeleteImage = (e: React.MouseEvent<HTMLDivElement>, imageUrl: string) => {
+    e.preventDefault();
+    setImageFile(imageFile.filter((img) => img !== imageUrl));
+  };
+
+  useEffect(() => {
+    if (imageFile.length > 0) {
+      setValue('image_urls', imageFile);
+    }
+  }, [imageFile, setValue]);
+
+  const mutation = usePostData({ onNext });
+
+  const onSubmit: SubmitHandler<OwnerShop> = (data) => {
+    mutation.mutate(data);
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.container}>
+        <Logo className={styles['container__koin-logo']} />
+        <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+          <div>
+            <span className={styles.form__title}>대표 이미지</span>
+            <label
+              className={cn({
+                [styles['form__image-upload']]: true,
+                [styles['form__image-upload--active']]: imageUrls.length !== 0,
+              })}
+              htmlFor="mainMenuImage"
+            >
+              <input
+                type="file"
+                accept="image/*"
+                id="mainMenuImage"
+                className={styles['form__upload-file']}
+                {...register('image_urls', { required: true })}
+                onChange={saveImgFile}
+                ref={imgRef}
+              />
+              {imageUrls.length !== 0
+                ? (
+                  imageUrls.map((imageUrl: string) => (
+                    <div
+                      key={imageUrl}
+                      className={styles['form__main-item']}
+                      onClick={(e) => handleDeleteImage(e, imageUrl)}
+                      aria-hidden
+                    >
+                      <FileImage />
+                      <div className={styles['form__main-text']}>{imageUrl}</div>
+                    </div>
+                  ))
+                ) : (
+                  <>
+                    <Cutlery className={styles['form__cutlery-cross']} />
+                    <span className={styles.form__text}>클릭하여 이미지를 등록해주세요.</span>
+                  </>
+                )}
+            </label>
+            {uploadError === '' && isError && imageUrls.length === 0
+                  && <ErrorMessage message={ERRORMESSAGE.image} />}
+            {uploadError !== '' && <ErrorMessage message={ERRORMESSAGE[uploadError]} />}
+          </div>
+          <div>
+            <span className={styles.form__title}>카테고리</span>
+            <div className={styles.form__section}>
+              <input
+                type="text"
+                className={styles.form__input}
+                value={selectedId}
+                readOnly
+              />
+              <input
+                type="hidden"
+                className={styles.form__input}
+                {...register('category_ids', { required: true })}
+              />
+
+              <CustomButton content="카테고리 검색" buttonSize="small" onClick={openCategory} />
+            </div>
+            {isError && categoryId.length === 0 && <ErrorMessage message={ERRORMESSAGE.category} />}
+          </div>
+          <CustomModal
+            buttonText="다음"
+            title="카테고리 검색"
+            modalSize="small"
+            hasFooter
+            isOverflowVisible={false}
+            isOpen={showCategory}
+            onCancel={closeCategory}
+          >
+            <Category />
+          </CustomModal>
+          <div>
+            <span className={styles.form__title}>가게명</span>
+            <div className={styles.form__section}>
+              <input
+                type="text"
+                className={styles.form__input}
+                value={name}
+                {...register('name', { required: true })}
+              />
+              <CustomButton content="가게검색" buttonSize="small" onClick={openSearchShop} />
+            </div>
+            {isError && name === '' && <ErrorMessage message={ERRORMESSAGE.name} />}
+          </div>
+          <CustomModal
+            title="가게검색"
+            modalSize="large"
+            hasFooter={false}
+            isOverflowVisible={false}
+            isOpen={showSearchShop}
+            onCancel={closeSearchShop}
+          >
+            <SearchShop open={showSearchShop} onCancel={closeSearchShop} />
+          </CustomModal>
+          <div>
+            <span className={styles.form__title}>주소정보</span>
+            <div className={styles.form__section}>
+              <input
+                type="text"
+                className={styles['form__input-large']}
+                value={address}
+                {...register('address', { required: true })}
+              />
+            </div>
+            {isError && address === '' && <ErrorMessage message={ERRORMESSAGE.address} />}
+          </div>
+          <div>
+            <span className={styles.form__title}>전화번호</span>
+            <div className={styles.form__section}>
+              <input
+                type="text"
+                inputMode="numeric"
+                className={styles['form__input-large']}
+                value={phone}
+                {...register('phone', {
+                  required: true,
+                  onChange: handlePhoneChange,
+                })}
+              />
+            </div>
+            {isError && phone === '' && <ErrorMessage message={ERRORMESSAGE.phone} />}
+          </div>
+          <div>
+            <span className={styles.form__title}>배달금액</span>
+            <div className={styles.form__section}>
+              <input
+                type="number"
+                inputMode="numeric"
+                className={styles['form__input-large']}
+                value={deliveryPrice === 0 ? undefined : deliveryPrice}
+                {...register('delivery_price')}
+                onWheel={(e) => (e.target as HTMLElement).blur()}
+              />
+            </div>
+          </div>
+          <div>
+            <span className={styles.form__title}>운영시간</span>
+            <div className={styles.form__section}>
+              <div className={styles['form__operate-time']}>
+                <div>
+                  {isAllSameTime && !hasClosedDay && (
+                    <div>
+                      {operateTimeState.time}
+                    </div>
+                  )}
+                  {isSpecificDayClosedAndAllSameTime && (
+                    <div>
+                      <div>{operateTimeState.time}</div>
+                      <div>{operateTimeState.holiday}</div>
+                    </div>
+                  )}
+                  {!isAllSameTime && !isSpecificDayClosedAndAllSameTime && !isAllClosed && (
+                    <>
+                      {WEEK.map((day) => (
+                        <div key={day}>
+                          {shopClosedState[day] ? `${operateTimeState[day]}` : `${day} : ${operateTimeState[day]}`}
+                        </div>
+                      ))}
+                    </>
+                  )}
+                  {isAllClosed && (
+                    <span>매일 휴무</span>
+                  )}
+                </div>
+              </div>
+              <CustomButton content="시간수정" buttonSize="small" onClick={openOperateTime} />
+            </div>
+          </div>
+          <CustomModal
+            buttonText="다음"
+            title="운영시간"
+            modalSize="medium"
+            hasFooter
+            isOpen={showOperateTime}
+            isOverflowVisible
+            onCancel={closeOperateTime}
+          >
+            <OperateTimePC />
+          </CustomModal>
+          <div>
+            <span className={styles.form__title}>기타사항</span>
+            <div className={styles.form__section}>
+              <input
+                type="text"
+                className={styles['form__input-large']}
+                value={description}
+                {...register('description')}
+              />
+            </div>
+          </div>
+          <div className={styles.form__checkbox}>
+            <label htmlFor="delivery" className={styles['form__checkbox-label']}>
+              <input
+                type="checkbox"
+                id="delivery"
+                className={styles['form__checkbox-input']}
+                {...register('delivery')}
+                checked={delivery}
+              />
+              <span>배달 가능</span>
+            </label>
+            <label htmlFor="card" className={styles['form__checkbox-label']}>
+              <input
+                type="checkbox"
+                id="card"
+                className={styles['form__checkbox-input']}
+                {...register('pay_card')}
+                checked={payCard}
+              />
+              <span>카드 가능</span>
+            </label>
+            <label htmlFor="bank" className={styles['form__checkbox-label']}>
+              <input
+                type="checkbox"
+                id="bank"
+                className={styles['form__checkbox-input']}
+                {...register('pay_bank')}
+                checked={payBank}
+              />
+              <span>계좌이체 가능</span>
+            </label>
+          </div>
+          <div className={styles['form__next-button']}>
+            <CustomButton
+              content="다음"
+              buttonSize="large"
+              onClick={handleNextClick}
+            />
+          </div>
+          <ConfirmPopup
+            isOpen={showConfirmPopup}
+            onCancel={closeConfirmPopup}
+            errors={errors}
+          />
+        </form>
+      </div>
+      <Copyright />
+    </div>
+  );
+}
diff --git a/src/page/ShopRegistration/view/PC/ShopEntry/ShopEntry.module.scss b/src/page/ShopRegistration/view/PC/ShopEntry/ShopEntry.module.scss
new file mode 100644
index 00000000..a2f11362
--- /dev/null
+++ b/src/page/ShopRegistration/view/PC/ShopEntry/ShopEntry.module.scss
@@ -0,0 +1,56 @@
+.wrapper {
+  position: relative;
+}
+
+.block {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &__writing-icon {
+    margin-bottom: 72px;
+  }
+
+  &__title {
+    display: block;
+    text-align: center;
+    font-size: 36px;
+    font-weight: 700;
+    color: #175c8e;
+    margin-bottom: 24px;
+    height: 53px;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    margin-bottom: 80px;
+    color: #858585;
+
+    span {
+      line-height: 180%;
+    }
+  }
+
+  &__next-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 368px;
+    height: 48px;
+    font-weight: 500;
+    color: #ffffff;
+    background-color: #175c8e;
+    text-decoration: none;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
diff --git a/src/page/ShopRegistration/view/PC/ShopEntry/index.tsx b/src/page/ShopRegistration/view/PC/ShopEntry/index.tsx
new file mode 100644
index 00000000..fe3a9dd3
--- /dev/null
+++ b/src/page/ShopRegistration/view/PC/ShopEntry/index.tsx
@@ -0,0 +1,29 @@
+import { ReactComponent as Memo } from 'assets/svg/shopRegistration/memo.svg';
+import Copyright from 'component/common/Copyright';
+import styles from './ShopEntry.module.scss';
+
+export default function ShopEntry({ onNext }:{ onNext: () => void }) {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.block}>
+        <Memo className={styles['block__writing-icon']} />
+        <span className={styles.block__title}>가게 정보 기입</span>
+        <div className={styles.block__text}>
+          <span>
+            가게의 다양한 정보를 입력 및 수정하여
+            <br />
+            학생들에게 최신 가게 정보를 알려주세요
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={onNext}
+          className={styles['block__next-button']}
+        >
+          가게 정보 기입
+        </button>
+      </div>
+      <Copyright />
+    </div>
+  );
+}
diff --git a/src/page/ShopRegistration/view/PC/ShopRegistrationPC.module.scss b/src/page/ShopRegistration/view/PC/ShopRegistrationPC.module.scss
index a5f3393c..d5b080d2 100644
--- a/src/page/ShopRegistration/view/PC/ShopRegistrationPC.module.scss
+++ b/src/page/ShopRegistration/view/PC/ShopRegistrationPC.module.scss
@@ -1,238 +1,3 @@
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
-}
-
 .wrapper {
   position: relative;
 }
-
-.block {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  &__writing-icon {
-    margin-bottom: 72px;
-  }
-
-  &__title {
-    display: block;
-    text-align: center;
-    font-size: 36px;
-    font-weight: 700;
-    color: #175c8e;
-    margin-bottom: 24px;
-    height: 53px;
-  }
-
-  &__text {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    text-align: center;
-    font-size: 16px;
-    font-weight: 400;
-    margin-bottom: 80px;
-    color: #858585;
-
-    span {
-      line-height: 180%;
-    }
-  }
-
-  &__next-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 368px;
-    height: 48px;
-    font-weight: 500;
-    color: #ffffff;
-    background-color: #175c8e;
-    text-decoration: none;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-
-.container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 80px 0 94px;
-
-  &__koin-logo {
-    width: 368px;
-    position: relative;
-    margin-bottom: 56px;
-    background-color: #ffffff;
-  }
-}
-
-.form {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-
-  &__title {
-    display: block;
-    font-size: 18px;
-    margin-bottom: 8px;
-  }
-
-  &__image-upload {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 210px;
-    height: 93px;
-    border: 1px solid #d2dae2;
-    padding: 53px 80px 54px;
-    cursor: pointer;
-
-    &--active {
-      display: flex;
-      flex-direction: column;
-      padding: 10px 20px;
-      width: 340px;
-      height: 180px;
-      justify-content: flex-start;
-    }
-  }
-
-  &__upload-file {
-    display: none;
-  }
-
-  &__main-menu {
-    max-width: 370px;
-    max-height: 200px;
-  }
-
-  &__main-item {
-    max-width: 370px;
-    display: flex;
-    z-index: 99;
-  }
-
-  &__main-text {
-    width: 90%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-break: break-all;
-    color: #858585;
-  }
-
-  &__cutlery-cross {
-    width: 64px;
-    height: 64px;
-    margin: 0 auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-  }
-
-  &__text {
-    text-align: center;
-    font-size: 14px;
-    display: block;
-    color: #858585;
-    margin-top: 8px;
-  }
-
-  &__section {
-    display: flex;
-    justify-content: space-between;
-    gap: 16px;
-    margin-top: 8px;
-  }
-
-  &__input {
-    width: 240px;
-    border: 1px solid #d2dae2;
-    height: 22px;
-    padding: 13px 16px;
-
-    &:focus {
-      border-bottom: 1px solid black;
-    }
-  }
-
-  &__input-large {
-    width: 336px;
-    border: 1px solid #d2dae2;
-    height: 22px;
-    padding: 13px 16px;
-
-    &:focus {
-      border-bottom: 1px solid black;
-    }
-  }
-
-  &__operate-time {
-    display: flex;
-    align-items: center;
-    width: 272px;
-    height: auto;
-    font-size: 16px;
-    color: #858585;
-  }
-
-  &__checkbox {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    gap: 24px;
-    width: 368px;
-  }
-
-  &__checkbox-label {
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    font-size: 14px;
-    color: #858585;
-    box-sizing: content-box;
-    cursor: pointer;
-
-    input[type="checkbox"]:checked + span {
-      color: #f7941e;
-    }
-  }
-
-  &__checkbox-input {
-    appearance: none;
-    width: 14px;
-    height: 14px;
-    border-radius: 100%;
-    box-sizing: border-box;
-    border: 1px solid #858585;
-    margin-right: 8px;
-    background-size: cover;
-    cursor: pointer;
-
-    &:checked {
-      border: 2px solid #f7941e;
-      padding: 1px;
-      background-clip: content-box;
-      background-color: #f7941e;
-    }
-  }
-
-  &__next-button {
-    width: 368px;
-    margin-top: 56px;
-  }
-}
diff --git a/src/page/ShopRegistration/view/PC/index.tsx b/src/page/ShopRegistration/view/PC/index.tsx
index 55c57315..243c92c7 100644
--- a/src/page/ShopRegistration/view/PC/index.tsx
+++ b/src/page/ShopRegistration/view/PC/index.tsx
@@ -1,458 +1,71 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-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, useState } from 'react';
-import useStepStore from 'store/useStepStore';
 import Copyright from 'component/common/Copyright';
-import CustomButton from 'page/Auth/Signup/CustomButton';
-import Complete from 'component/common/Auth/Complete';
-import Category from 'page/ShopRegistration/component/Modal/Category';
-import SearchShop from 'page/ShopRegistration/component/Modal/SearchShop';
-import OperateTimePC from 'page/ShopRegistration/component/Modal/OperateTimePC';
-import ConfirmPopup from 'page/ShopRegistration/component/ConfirmPopup';
-import useMediaQuery from 'utils/hooks/useMediaQuery';
-import useBooleanState from 'utils/hooks/useBooleanState';
-import CustomModal from 'component/common/CustomModal';
-import cn from 'utils/ts/className';
-import useModalStore from 'store/modalStore';
-import { WEEK, DAY_OF_WEEK } from 'utils/constant/week';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
+import Complete from 'component/Auth/Complete';
+import { FormProvider, useForm } from 'react-hook-form';
 import { OwnerShop } from 'model/shopInfo/ownerShop';
-import useImagesUpload from 'utils/hooks/useImagesUpload';
-import CheckSameTime from 'page/ShopRegistration/hooks/CheckSameTime';
-import useOperateTimeState from 'page/ShopRegistration/hooks/useOperateTimeState';
-import useShopRegistrationStore from 'store/shopRegistration';
-import ErrorMessage from 'page/Auth/Signup/ErrorMessage';
-import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
-import { usePostData } from 'page/ShopRegistration/view/Mobile/ShopConfirmation/index';
-import { ReactComponent as FileImage } from 'assets/svg/auth/default-file.svg';
+import { useFunnel } from 'utils/hooks/useFunnel';
 import styles from './ShopRegistrationPC.module.scss';
+import ShopEntry from './ShopEntry';
+import ShopConfirmation from './ShopConfirmation';
 
-export default function ShopRegistrationPC() {
-  const { isMobile } = useMediaQuery();
-  const { step, setStep } = useStepStore();
-  const {
-    value: showCategory,
-    setTrue: openCategory,
-    setFalse: closeCategory,
-    changeValue: toggleCategory,
-  } = useBooleanState(false);
-  const {
-    value: showOperateTime,
-    setTrue: openOperateTime,
-    setFalse: closeOperateTime,
-  } = useBooleanState(false);
-  const {
-    value: showSearchShop,
-    setTrue: openSearchShop,
-    setFalse: closeSearchShop,
-  } = useBooleanState(false);
-  const {
-    value: showConfirmPopup,
-    setTrue: openConfirmPopup,
-    setFalse: closeConfirmPopup,
-  } = useBooleanState(false);
-  const {
-    imageFile, imgRef, saveImgFile, uploadError, setImageFile,
-  } = useImagesUpload();
-  const [isError, setIsError] = useState(false);
-
-  const {
-    openTimeState,
-    closeTimeState,
-    shopClosedState,
-  } = useModalStore();
-
-  const {
-    setImageUrls,
-    setName,
-    setDelivery,
-    setPayCard,
-    setPayBank,
-    setAddress,
-    setPhone,
-    setDeliveryPrice,
-    setDescription,
-    removeImageUrl,
-  } = useShopRegistrationStore();
-
-  const {
-    imageUrls,
-    categoryId,
-    category,
-    name,
-    delivery,
-    payCard,
-    payBank,
-    address,
-    phone,
-    deliveryPrice,
-    description,
-  } = useShopRegistrationStore();
-  const operateTimeState = useOperateTimeState();
-
-  const {
-    isAllSameTime,
-    hasClosedDay,
-    isSpecificDayClosedAndAllSameTime,
-    isAllClosed,
-  } = CheckSameTime();
+const OPEN_DEFAULT_VALUES = [
+  {
+    day_of_week: 'MONDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'TUESDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'WEDNESDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'THURSDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'FRIDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'SATURDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+  {
+    day_of_week: 'SUNDAY', closed: false, open_time: '00:00', close_time: '00:00',
+  },
+];
 
-  const mutation = usePostData(setStep);
-
-  const {
-    register, handleSubmit, setValue, formState: { errors },
-  } = useForm<OwnerShop>({
-    resolver: zodResolver(OwnerShop),
+export default function ShopRegistrationPC() {
+  const methods = useForm<OwnerShop>({
+    defaultValues: {
+      category_ids: [],
+      delivery_price: 0,
+      description: '',
+      image_urls: [],
+      name: '',
+      phone: '',
+      address: '',
+      delivery: false,
+      pay_bank: false,
+      pay_card: false,
+      open: OPEN_DEFAULT_VALUES,
+    },
   });
 
-  const formatPhoneNumber = (inputNumber: string) => {
-    const phoneNumber = inputNumber.replace(/\D/g, '');
-    const formattedPhoneNumber = phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
-    if (formattedPhoneNumber.length > 13) return formattedPhoneNumber.slice(0, 13);
-    return formattedPhoneNumber;
-  };
-  const phoneNumberPattern = /^\d{3}-\d{4}-\d{4}$/;
-  const isValidPhoneNumber = phoneNumberPattern.test(phone);
-  const handleNextClick = () => {
-    if (imageUrls.length === 0 || name === '' || category.length === 0
-      || address === '' || phone === '' || !isValidPhoneNumber) {
-      setIsError(true);
-    } else {
-      setIsError(false);
-      openConfirmPopup();
-    }
-  };
-  const openTimeArray = Object.values(openTimeState);
-  const closeTimeArray = Object.values(closeTimeState);
-  const shopClosedArray = Object.values(shopClosedState);
-
-  const onClickRemoveImageUrl = (e: React.MouseEvent<HTMLDivElement>, imageUrl: string) => {
-    e.preventDefault();
-    setImageFile(imageFile.filter((img) => img !== imageUrl));
-    removeImageUrl(imageUrl);
-  };
+  const { Funnel, Step, setStep } = useFunnel('가게 등록');
 
-  useEffect(() => {
-    if (imageFile.length > 0 || uploadError !== '') setImageUrls(imageFile);
-    const openValue = DAY_OF_WEEK.map((day, index) => ({
-      close_time: closeTimeArray[index],
-      closed: shopClosedArray[index],
-      day_of_week: day,
-      open_time: openTimeArray[index],
-    }));
-    setValue('open', openValue);
-    setValue('category_ids', [categoryId]);
-    setValue('delivery_price', Number(deliveryPrice));
-    setValue('name', name);
-    setValue('image_urls', imageUrls);
-  }, [openTimeState, closeTimeState, shopClosedState, imageUrls,
-    imageFile, categoryId, deliveryPrice, uploadError, name]);
-  const onSubmit: SubmitHandler<OwnerShop> = (data) => {
-    mutation.mutate(data);
-  };
-
-  // step 1일 때 그리고 모바일에서 PC로 변경 될 때 카테고리 모달을 자동으로 켜줌
-  useEffect(() => {
-    if (!isMobile && step === 1) {
-      toggleCategory();
-    }
-  }, [isMobile]);
   return (
-    <>
-      {step === 0 && (
-        <div className={styles.wrapper}>
-          <div className={styles.block}>
-            <Memo className={styles['block__writing-icon']} />
-            <span className={styles.block__title}>가게 정보 기입</span>
-            <div className={styles.block__text}>
-              <span>
-                가게의 다양한 정보를 입력 및 수정하여
-                <br />
-                학생들에게 최신 가게 정보를 알려주세요
-              </span>
-            </div>
-            <button
-              type="button"
-              onClick={() => setStep(step + 1)}
-              className={styles['block__next-button']}
-            >
-              가게 정보 기입
-            </button>
-          </div>
-          <Copyright />
-        </div>
-      )}
-      {step >= 1 && step <= 4 && (
-        <div className={styles.wrapper}>
-          <div className={styles.container}>
-            <Logo className={styles['container__koin-logo']} />
-            <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-              <div>
-                <span className={styles.form__title}>대표 이미지</span>
-                <label
-                  className={cn({
-                    [styles['form__image-upload']]: true,
-                    [styles['form__image-upload--active']]: imageUrls.length !== 0,
-                  })}
-                  htmlFor="mainMenuImage"
-                >
-                  <input
-                    type="file"
-                    accept="image/*"
-                    id="mainMenuImage"
-                    className={styles['form__upload-file']}
-                    {...register('image_urls', { value: imageUrls })}
-                    onChange={saveImgFile}
-                    ref={imgRef}
-                  />
-                  {imageUrls.length !== 0
-                    ? (
-                      imageUrls.map((imageUrl: string) => (
-                        <div
-                          key={imageUrl}
-                          className={styles['form__main-item']}
-                          onClick={(e) => onClickRemoveImageUrl(e, imageUrl)}
-                          aria-hidden
-                        >
-                          <FileImage />
-                          <div className={styles['form__main-text']}>{imageUrl}</div>
-                        </div>
-                      ))
-                    ) : (
-                      <>
-                        <Cutlery className={styles['form__cutlery-cross']} />
-                        <span className={styles.form__text}>클릭하여 이미지를 등록해주세요.</span>
-                      </>
-                    )}
-                </label>
-                {uploadError === '' && imageUrls.length === 0 && isError
-                  && <ErrorMessage message={ERRORMESSAGE.image} />}
-                {uploadError !== '' && <ErrorMessage message={ERRORMESSAGE[uploadError]} />}
-              </div>
-              <div>
-                <span className={styles.form__title}>카테고리</span>
-                <div className={styles.form__section}>
-                  <input
-                    type="text"
-                    className={styles.form__input}
-                    value={category}
-                    readOnly
-                  />
-                  <CustomButton content="카테고리 검색" buttonSize="small" onClick={openCategory} />
-                </div>
-                {category.length === 0
-                  && isError
-                  && <ErrorMessage message={ERRORMESSAGE.category} />}
-              </div>
-              <CustomModal
-                buttonText="다음"
-                title="카테고리 검색"
-                modalSize="small"
-                hasFooter
-                isOverflowVisible={false}
-                isOpen={showCategory}
-                onCancel={closeCategory}
-              >
-                <Category />
-              </CustomModal>
-              <div>
-                <span className={styles.form__title}>가게명</span>
-                <div className={styles.form__section}>
-                  <input
-                    type="text"
-                    className={styles.form__input}
-                    value={name}
-                    {...register('name')}
-                    onChange={(e) => {
-                      setName(e.target.value);
-                    }}
-                  />
-                  <CustomButton content="가게검색" buttonSize="small" onClick={openSearchShop} />
-                </div>
-                {name === '' && isError && <ErrorMessage message={ERRORMESSAGE.name} />}
-              </div>
-              <CustomModal
-                title="가게검색"
-                modalSize="large"
-                hasFooter={false}
-                isOverflowVisible={false}
-                isOpen={showSearchShop}
-                onCancel={closeSearchShop}
-              >
-                <SearchShop open={showSearchShop} onCancel={closeSearchShop} />
-              </CustomModal>
-              <div>
-                <span className={styles.form__title}>주소정보</span>
-                <div className={styles.form__section}>
-                  <input
-                    type="text"
-                    className={styles['form__input-large']}
-                    value={address}
-                    {...register('address')}
-                    onChange={(e) => {
-                      setAddress(e.target.value);
-                    }}
-                  />
-                </div>
-                {address === '' && isError && <ErrorMessage message={ERRORMESSAGE.address} />}
-              </div>
-              <div>
-                <span className={styles.form__title}>전화번호</span>
-                <div className={styles.form__section}>
-                  <input
-                    type="text"
-                    className={styles['form__input-large']}
-                    value={phone}
-                    {...register('phone')}
-                    onChange={(e) => {
-                      setPhone(formatPhoneNumber(e.target.value));
-                    }}
-                  />
-                </div>
-                {phone === '' && isError && <ErrorMessage message={ERRORMESSAGE.phone} />}
-                {phone !== '' && !isValidPhoneNumber && isError && <ErrorMessage message={ERRORMESSAGE.invalidPhone} />}
-              </div>
-              <div>
-                <span className={styles.form__title}>배달금액</span>
-                <div className={styles.form__section}>
-                  <input
-                    type="number"
-                    className={styles['form__input-large']}
-                    value={deliveryPrice === 0 ? undefined : deliveryPrice}
-                    onChange={(e) => {
-                      setDeliveryPrice(Number(e.target.value));
-                    }}
-                  />
-                </div>
-              </div>
-              <div>
-                <span className={styles.form__title}>운영시간</span>
-                <div className={styles.form__section}>
-                  <div className={styles['form__operate-time']}>
-                    <div>
-                      {
-                        isAllSameTime && !hasClosedDay ? (
-                          <div>
-                            {operateTimeState.time}
-                          </div>
-                        )
-                          : null
-                      }
-                      {
-                        isSpecificDayClosedAndAllSameTime ? (
-                          <div>
-                            <div>{operateTimeState.time}</div>
-                            <div>{operateTimeState.holiday}</div>
-                          </div>
-                        ) : null
-                      }
-                      {
-                        !isAllSameTime && !isSpecificDayClosedAndAllSameTime && !isAllClosed ? (
-                          <>
-                            {WEEK.map((day) => (
-                              <div key={day}>
-                                {shopClosedState[day] ? `${operateTimeState[day]}` : `${day} : ${operateTimeState[day]}`}
-                              </div>
-                            ))}
-                          </>
-                        ) : null
-                      }
-                      {
-                        isAllClosed ? (
-                          <span>매일 휴무</span>
-                        ) : null
-                      }
-                    </div>
-                  </div>
-                  <CustomButton content="시간수정" buttonSize="small" onClick={openOperateTime} />
-                </div>
-              </div>
-              <CustomModal
-                buttonText="다음"
-                title="운영시간"
-                modalSize="medium"
-                hasFooter
-                isOpen={showOperateTime}
-                isOverflowVisible
-                onCancel={closeOperateTime}
-              >
-                <OperateTimePC />
-              </CustomModal>
-              <div>
-                <span className={styles.form__title}>기타사항</span>
-                <div className={styles.form__section}>
-                  <input
-                    type="text"
-                    className={styles['form__input-large']}
-                    value={description}
-                    {...register('description')}
-                    onChange={(e) => {
-                      setDescription(e.target.value);
-                    }}
-                  />
-                </div>
-              </div>
-              <div className={styles.form__checkbox}>
-                <label htmlFor="delivery" className={styles['form__checkbox-label']}>
-                  <input
-                    type="checkbox"
-                    id="delivery"
-                    className={styles['form__checkbox-input']}
-                    {...register('delivery')}
-                    onChange={(e) => setDelivery(e.target.checked)}
-                    checked={delivery}
-                  />
-                  <span>배달 가능</span>
-                </label>
-                <label htmlFor="card" className={styles['form__checkbox-label']}>
-                  <input
-                    type="checkbox"
-                    id="card"
-                    className={styles['form__checkbox-input']}
-                    {...register('pay_card')}
-                    onChange={(e) => setPayCard(e.target.checked)}
-                    checked={payCard}
-                  />
-                  <span>카드 가능</span>
-                </label>
-                <label htmlFor="bank" className={styles['form__checkbox-label']}>
-                  <input
-                    type="checkbox"
-                    id="bank"
-                    className={styles['form__checkbox-input']}
-                    {...register('pay_bank')}
-                    onChange={(e) => setPayBank(e.target.checked)}
-                    checked={payBank}
-                  />
-                  <span>계좌이체 가능</span>
-                </label>
-              </div>
-              <div className={styles['form__next-button']}>
-                <CustomButton
-                  content="다음"
-                  buttonSize="large"
-                  onClick={handleNextClick}
-                />
-              </div>
-              <ConfirmPopup
-                isOpen={showConfirmPopup}
-                onCancel={closeConfirmPopup}
-                errors={errors}
-              />
-            </form>
+    <FormProvider {...methods}>
+      <Funnel>
+        <Step name="가게 등록">
+          <ShopEntry onNext={() => setStep('가게 정보 입력')} />
+        </Step>
+        <Step name="가게 정보 입력">
+          <ShopConfirmation onNext={() => setStep('가게 등록 완료')} />
+        </Step>
+        <Step name="가게 등록 완료">
+          <div className={styles.wrapper}>
+            <Complete title="가게 정보 등록 완료" topText="가게 등록이 완료되었습니다." bottomText="업체 정보 수정은 내 상점에서 가능합니다." link="/login" linkText="메인화면으로 바로가기" />
+            <Copyright />
           </div>
-          <Copyright />
-        </div>
-      )}
-      {step === 5 && (
-        <div className={styles.wrapper}>
-          <Complete title="가게 정보 등록 완료" topText="가게 등록이 완료되었습니다." bottomText="업체 정보 수정은 내 상점에서 가능합니다." link="/login" linkText="메인화면으로 바로가기" />
-          <Copyright />
-        </div>
-      )}
-    </>
+        </Step>
+      </Funnel>
+    </FormProvider>
   );
 }
diff --git a/src/query/shop.ts b/src/query/shop.ts
index 9ffa59e9..1a3c3c56 100644
--- a/src/query/shop.ts
+++ b/src/query/shop.ts
@@ -4,14 +4,18 @@ import {
 import {
   getMyShopList, getShopInfo, getMenuInfoList, addMenu, getShopEventList,
 } from 'api/shop';
+import { isKoinError } from '@bcsdlab/koin';
+import showToast from 'utils/ts/showToast';
 import useAddMenuStore from 'store/addMenu';
 import { NewMenu } from 'model/shopInfo/newMenu';
+import { useNavigate } from 'react-router-dom';
 import getShopCategory from 'api/category';
 import useSuspenseUser from 'utils/hooks/useSuspenseUser';
 import { shopKeys } from './KeyFactory/shopKeys';
 
 const useMyShop = () => {
   let myShopQueryKey = '';
+  const navigate = useNavigate();
   const { data: user } = useSuspenseUser();
   if (user && 'company_number' in user) {
     myShopQueryKey = user.company_number;
@@ -57,6 +61,12 @@ const useMyShop = () => {
     onSuccess: () => {
       resetAddMenuStore();
       queryClient.invalidateQueries({ queryKey: shopKeys.myMenuInfo(shopId) });
+      navigate('/owner');
+    },
+    onError: (e) => {
+      if (isKoinError(e)) {
+        showToast('error', e.message);
+      }
     },
   });
 
diff --git a/src/store/addMenu.ts b/src/store/addMenu.ts
index f166b53e..ac8d3fc4 100644
--- a/src/store/addMenu.ts
+++ b/src/store/addMenu.ts
@@ -1,11 +1,11 @@
 import { create } from 'zustand';
 import { MonoMenu } from 'model/shopInfo/menuCategory';
 
-interface OptionPrices {
+export type OptionPrices = {
   id: number;
   option: string;
   price: number;
-}
+};
 
 interface AddMenuStore {
   menuId: number;
diff --git a/src/store/modalStore.ts b/src/store/modalStore.ts
index b2bcc5f5..54520f83 100644
--- a/src/store/modalStore.ts
+++ b/src/store/modalStore.ts
@@ -12,8 +12,9 @@ interface ModalStore {
   setOpenTimeState: (state: OperatingTime) => void;
   setCloseTimeState: (state: OperatingTime) => void;
   setShopClosedState: (state: { [key: string]: boolean }) => void;
-  setSearchShopState: (state: string) => void; // 수정 요망
-  setSelectedShopId:(state:string) => void; // 수정 요망
+  setSearchShopState: (state: string) => void;
+  setSelectedShopId:(state:string) => void;
+  resetOperatingTime: ()=> void;
 }
 
 const initialOperatingTime: OperatingTime = {
@@ -40,13 +41,20 @@ const useModalStore = create<ModalStore>((set) => ({
   openTimeState: initialOperatingTime,
   closeTimeState: initialOperatingTime,
   shopClosedState: initialShopClosed,
-  searchShopState: '', // 수정 요망
-  selectedShopId: '', // 수정 요망
+  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 }), // 수정 요망
+  setSearchShopState: (state) => set({ searchShopState: state }),
+  setSelectedShopId: (state) => set({ selectedShopId: state }),
+  resetOperatingTime: () => {
+    set(() => ({
+      openTimeState: initialOperatingTime,
+      closeTimeState: initialOperatingTime,
+      shopClosedState: initialShopClosed,
+    }));
+  },
 }));
 
 export default useModalStore;
diff --git a/src/store/shopRegistration.ts b/src/store/shopRegistration.ts
index 0b478eaf..ebb9dda4 100644
--- a/src/store/shopRegistration.ts
+++ b/src/store/shopRegistration.ts
@@ -39,7 +39,7 @@ const useShopRegistrationStore = create<ShopRegistrationStore>((set) => ({
   deliveryPrice: 0,
   description: '',
   imageUrl: '',
-  imageUrls: ['aa'],
+  imageUrls: [],
   owner: '',
   name: '',
   phone: '',
diff --git a/src/utils/constant/progress.ts b/src/utils/constant/progress.ts
index 78a43bc4..29bc9dd9 100644
--- a/src/utils/constant/progress.ts
+++ b/src/utils/constant/progress.ts
@@ -1,4 +1,8 @@
 const PROGRESS_TITLE = [
+  {
+    step: 0,
+    title: '가게 등록',
+  },
   {
     step: 1,
     title: '가게 카테고리 설정',
diff --git a/src/utils/hooks/useFunnel.ts b/src/utils/hooks/useFunnel.ts
new file mode 100644
index 00000000..cf3675c8
--- /dev/null
+++ b/src/utils/hooks/useFunnel.ts
@@ -0,0 +1,31 @@
+import { ReactElement, useState } from 'react';
+
+export interface StepProps {
+  name: string;
+  children: ReactElement;
+}
+
+export interface FunnelProps {
+  children: ReactElement<StepProps>[];
+}
+
+/**
+* 단계별 입력 폼을 진행할 시 사용 권장
+* @param { string } defaultStep 시작할 초기 단계
+* @returns { Funnel, Step, setStep, currentStep } 단계별 입력 폼을 관리하는데 사용하는 유틸리티
+*/
+export const useFunnel = (defaultStep: string) => {
+  const [step, setStep] = useState(defaultStep);
+
+  const Step = (props: StepProps) => props.children;
+
+  function Funnel({ children }: FunnelProps): ReactElement | null {
+    const targetStep = children.find((childStep) => childStep.props.name === step);
+
+    return targetStep ?? null;
+  }
+
+  return {
+    Funnel, Step, setStep, currentStep: step,
+  } as const;
+};
diff --git a/src/utils/hooks/useImagesUpload.ts b/src/utils/hooks/useImagesUpload.ts
index 9eed66ac..bcd076c2 100644
--- a/src/utils/hooks/useImagesUpload.ts
+++ b/src/utils/hooks/useImagesUpload.ts
@@ -15,7 +15,6 @@ export default function useImagesUpload() {
 
   const saveImgFile = async () => {
     const files = imgRef.current?.files;
-    console.log(files?.length)
     // imageFile.length + files.length을 통해 저장된 이미지 + 새로 추가할 이미지의 개수를 파악함
     if (files && (files.length > 3 || imageFile.length >= 3 || imageFile.length + files.length > 3)) {
       showToast('error', '파일은 3개까지 등록할 수 있습니다.')