From a9f1052671d37bbef511c28b1fb4b8e19d87b8de Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Mon, 20 Apr 2026 15:20:41 +0900
Subject: [PATCH 01/56] =?UTF-8?q?[seller]=20fix(173):sticky=20header=20?=
 =?UTF-8?q?=EC=95=84=EC=BD=94=EB=94=94=EC=96=B8=20arrow=20=EC=BB=A4?=
 =?UTF-8?q?=EC=8A=A4=ED=85=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/create-header/create-header.ui.tsx      | 13 ++++++-------
 packages/ui/src/accordion/accordion.tsx            | 14 ++++++++++++--
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
index 62b35c51..7f2da6cb 100644
--- a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
@@ -5,13 +5,13 @@ import {
   AccordionTrigger,
   StageTab,
 } from '@dessert/ui'
-import { ChevronDown } from 'lucide-react'
+import { ChevronDownIcon } from 'lucide-react'
 
 import { CategoryOptions, EssentialOptions } from '@/entity/products'
 
 import { ProductHeaderTags } from './create-header-tags.ui'
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
+import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 const stagestep = [
   '상품 정보',
@@ -64,11 +64,10 @@ export const ProductHeader = () => {
               />
             </div>
           </AccordionContent>
-          <AccordionTrigger className="absolute right-[90px] -bottom-[66px] justify-center border p-0">
-            <div className="rounded-b-16 bg-white px-[26px] py-6">
-              <ChevronDown size={36} />
-            </div>
-          </AccordionTrigger>
+          <AccordionTrigger
+            customIcon
+            className="absolute top-[unset] right-0 -bottom-64 h-48 w-22 items-center justify-center rounded-b-16 border border-gray-300 bg-white"
+          ></AccordionTrigger>
         </AccordionItem>
       </Accordion>
     </div>
diff --git a/packages/ui/src/accordion/accordion.tsx b/packages/ui/src/accordion/accordion.tsx
index d86c0c10..156435d6 100644
--- a/packages/ui/src/accordion/accordion.tsx
+++ b/packages/ui/src/accordion/accordion.tsx
@@ -33,11 +33,17 @@ function AccordionItem({
   )
 }
 
+interface CustomTriggerProps
+  extends React.ComponentProps<typeof AccordionPrimitive.Trigger> {
+  customIcon?: React.ReactNode
+}
+
 function AccordionTrigger({
   className,
   children,
+  customIcon = false,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+}: CustomTriggerProps) {
   return (
     <AccordionPrimitive.Header className="flex items-center">
       <AccordionPrimitive.Trigger
@@ -50,8 +56,12 @@ function AccordionTrigger({
       >
         {children}
         <ChevronDownIcon
+          fontSize={36}
           data-slot="accordion-trigger-icon"
-          className="pointer-events-none shrink-0 transition-transform group-data-[state=open]:rotate-180"
+          className={cn(
+            'pointer-events-none shrink-0 transition-transform group-data-[state=open]:rotate-180',
+            customIcon && 'm-0! size-9!',
+          )}
         />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>

From 1c3160f1c492fb6247ca117d215593b678ef909c Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Mon, 20 Apr 2026 17:08:04 +0900
Subject: [PATCH 02/56] =?UTF-8?q?[seller]=20feat(173):=20=EC=8D=B8?=
 =?UTF-8?q?=EB=84=A4=EC=9D=BC=20=ED=8F=BC=20=EA=B5=AC=ED=98=84=20=EB=B0=8F?=
 =?UTF-8?q?=20context=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/create-form/product-form.type.ts   |   5 +
 .../create-form-thumbnail-upload-area.ui.tsx  | 172 ++++++++++++++++++
 .../create-thumbnail-upload.schema.ts         |  13 ++
 .../create-form-thumbnail-upload/index.ts     |   3 +
 .../use-product-thumnail-form.hook.ts         |  30 +++
 .../create-form/create-form-provider.ui.tsx   |   1 +
 .../create-form/product-create.types.ts       |   6 +-
 .../use-create-product-form.hook.ts           |   4 +
 .../create/create-header/create-header.ui.tsx |   1 -
 .../src/features/products/create/index.ts     |   1 +
 .../src/pages/products/create/create-page.tsx |   5 +-
 11 files changed, 238 insertions(+), 3 deletions(-)
 create mode 100644 apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
 create mode 100644 apps/seller/src/features/products/create/create-form-thumbnail-upload/create-thumbnail-upload.schema.ts
 create mode 100644 apps/seller/src/features/products/create/create-form-thumbnail-upload/index.ts
 create mode 100644 apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts

diff --git a/apps/seller/src/entity/products/create/create-form/product-form.type.ts b/apps/seller/src/entity/products/create/create-form/product-form.type.ts
index a7e102bb..ace66d6c 100644
--- a/apps/seller/src/entity/products/create/create-form/product-form.type.ts
+++ b/apps/seller/src/entity/products/create/create-form/product-form.type.ts
@@ -16,6 +16,11 @@ export type DeliveryFormInput = {
   deliveryMinFee: number | null
 }
 
+export type ThumbnailFormInput = {
+  mainImage: File | null
+  extraImages: File[]
+}
+
 export type ProductOptionFormInput = {
   mainCategory: string
   subCategory: string
diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
new file mode 100644
index 00000000..f7dad5e1
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
@@ -0,0 +1,172 @@
+import React, { useEffect, useRef } from 'react'
+
+import { CameraIcon, XIcon } from 'lucide-react' // 아이콘 라이브러리 적절히 사용
+import { useFieldArray, useFormContext } from 'react-hook-form'
+
+import { cn } from '@/shared/libs/utils'
+
+import { useProductThumbnailForm } from './use-product-thumnail-form.hook'
+import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
+
+export function ThumbnailUploadArea() {
+  const {
+    form,
+    mainImage,
+    extraImages,
+    isFormField,
+    handleMainImageChange,
+    handleExtraImagesChange,
+  } = useProductThumbnailForm()
+
+  const { setProductFields } = useCreateFormSteps()
+
+  useEffect(() => {
+    setProductFields((prev) => ({ ...prev, productDelivery: isFormField }))
+  }, [isFormField, setProductFields])
+
+  // 이미지 삭제 모달 상태 관리 (커스텀 필요)
+  const handleDelete = (index: number | 'main') => {
+    // 프로젝트 공통 모달이 있다면 window.confirm 대신 교체 가능
+    if (!window.confirm('이미지를 제거하시겠습니까?')) return
+
+    if (index === 'main') {
+      handleMainImageChange(null)
+    } else {
+      const newImages = extraImages.filter((_, i) => i !== index)
+      handleExtraImagesChange(newImages)
+    }
+  }
+
+  const handleFileChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    type: 'main' | 'extra',
+  ) => {
+    const files = e.target.files
+    if (!files) return
+
+    if (type === 'main') {
+      handleMainImageChange(files[0])
+    } else {
+      const remainingSlots = 9 - extraImages.length
+      const newFiles = Array.from(files).slice(0, remainingSlots)
+      handleExtraImagesChange([...extraImages, ...newFiles])
+    }
+    // 동일 파일 다시 선택 가능하도록 초기화
+    e.target.value = ''
+  }
+
+  return (
+    <div className="flex flex-col gap-8 rounded-xl border border-gray-100 bg-white p-6 shadow-sm">
+      <h3 className="text-gray-900">썸네일 등록</h3>
+
+      {/* 대표 이미지 영역 */}
+      <div className="flex flex-col gap-4">
+        <label className="typo-body-14-m text-gray-700">
+          대표 이미지 등록<span className="text-red-500">*</span>
+        </label>
+        <div className="flex flex-col gap-2">
+          {mainImage ? (
+            <ImagePreviewItem
+              src={URL.createObjectURL(mainImage)}
+              onDelete={() => handleDelete('main')}
+            />
+          ) : (
+            <UploadButton
+              id="main-image"
+              count={0}
+              max={1}
+              onChange={(e) => handleFileChange(e, 'main')}
+            />
+          )}
+          <p className="mt-2 typo-body-12-r text-gray-400">
+            권장 크기 1000×1000, 최소 160×160 이상 (1:1 비율) · jpg, jpeg, png
+            형식 · 10MB 이하 파일만 업로드 가능해요
+          </p>
+        </div>
+      </div>
+
+      {/* 추가 이미지 영역 */}
+      <div className="flex flex-col gap-4">
+        <label className="typo-body-14-m text-gray-700">추가 이미지</label>
+        <div className="flex flex-wrap gap-3">
+          {/* 추가 이미지들은 업로드 버튼이 항상 앞에 오거나 뒤에 오도록 배치 */}
+          {extraImages.length < 9 && (
+            <UploadButton
+              id="extra-images"
+              count={extraImages.length}
+              max={9}
+              multiple
+              onChange={(e) => handleFileChange(e, 'extra')}
+            />
+          )}
+          {extraImages.map((file: File, idx: number) => (
+            <ImagePreviewItem
+              key={idx}
+              src={URL.createObjectURL(file)}
+              onDelete={() => handleDelete(idx)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface UploadButtonProps {
+  id: string
+  count: number
+  max: number
+  multiple?: boolean
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+function UploadButton({
+  id,
+  count,
+  max,
+  multiple = false,
+  onChange,
+}: UploadButtonProps) {
+  return (
+    <label
+      htmlFor={id}
+      className="flex h-[120px] w-[120px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 transition-colors hover:bg-gray-100"
+    >
+      <CameraIcon className="size-6 text-gray-300" />
+      <span className="mt-2 typo-body-12-m text-gray-400">
+        사진 <span className={count > 0 ? 'text-primary' : ''}>{count}</span>/
+        {max}
+      </span>
+      <input
+        id={id}
+        type="file"
+        className="hidden"
+        accept="image/*"
+        multiple={multiple}
+        onChange={onChange}
+      />
+    </label>
+  )
+}
+
+// 프리뷰 아이템 컴포넌트
+function ImagePreviewItem({
+  src,
+  onDelete,
+}: {
+  src: string
+  onDelete: () => void
+}) {
+  return (
+    <div className="relative h-[120px] w-[120px] overflow-hidden rounded-lg border border-gray-100 bg-gray-50">
+      <img src={src} alt="preview" className="size-full object-cover" />
+      <button
+        type="button"
+        onClick={onDelete}
+        className="absolute top-1 right-1 rounded-full bg-gray-900/50 p-1 text-white transition-colors hover:bg-gray-900"
+      >
+        <XIcon className="size-3" />
+      </button>
+    </div>
+  )
+}
diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-thumbnail-upload.schema.ts b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-thumbnail-upload.schema.ts
new file mode 100644
index 00000000..0305fbe8
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-thumbnail-upload.schema.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod'
+
+export const thumbnailSchema = z.object({
+  mainImage: z
+    .custom<File | null>()
+    .refine((file) => file !== null, {
+      message: '대표 이미지는 필수 입력사항입니다.',
+    }),
+  extraImages: z
+    .array(z.custom<File>())
+    .max(9, { message: '추가 이미지는 최대 9개까지 등록 가능합니다.' })
+    .default([]),
+})
diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/index.ts b/apps/seller/src/features/products/create/create-form-thumbnail-upload/index.ts
new file mode 100644
index 00000000..e0dd1a33
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/index.ts
@@ -0,0 +1,3 @@
+export { thumbnailSchema } from './create-thumbnail-upload.schema'
+export { ThumbnailUploadArea } from './create-form-thumbnail-upload-area.ui'
+export { useProductThumbnailForm } from './use-product-thumnail-form.hook'
diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
new file mode 100644
index 00000000..74f82638
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
@@ -0,0 +1,30 @@
+import { useFormContext } from 'react-hook-form'
+
+import { CreateProductForm } from '../create-form/product-create.types'
+
+export function useProductThumbnailForm() {
+  const form = useFormContext<CreateProductForm>()
+
+  const mainImage = form.watch('mainImage')
+  const extraImages = form.watch('extraImages') || []
+
+  // 필수 입력 사항 판별: 대표 이미지가 있으면 true
+  const isFormField = mainImage !== null
+
+  const handleMainImageChange = (file: File | null) => {
+    form.setValue('mainImage', file, { shouldValidate: true })
+  }
+
+  const handleExtraImagesChange = (files: File[]) => {
+    form.setValue('extraImages', files, { shouldValidate: true })
+  }
+
+  return {
+    form,
+    mainImage,
+    extraImages,
+    isFormField,
+    handleMainImageChange,
+    handleExtraImagesChange,
+  }
+}
diff --git a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
index a0633785..54bf88ee 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
@@ -10,6 +10,7 @@ export const FormStepsProvider = ({
   const [productFields, setProductFields] = useState<FormStepStatus>({
     productInfo: false,
     productDelivery: false,
+    productThumbnail: false,
     productOptions: false,
   })
 
diff --git a/apps/seller/src/features/products/create/create-form/product-create.types.ts b/apps/seller/src/features/products/create/create-form/product-create.types.ts
index 8ba751c6..280efd48 100644
--- a/apps/seller/src/features/products/create/create-form/product-create.types.ts
+++ b/apps/seller/src/features/products/create/create-form/product-create.types.ts
@@ -3,19 +3,23 @@ import {
   ProductDisclosureFormInput,
   ProductFormInput,
   ProductOptionFormInput,
+  ThumbnailFormInput,
 } from '@/entity/products'
 
 import { deliverySchema } from '../create-form-delivery/create-delivery.schema'
 import { disclosureSchema } from '../create-form-disclosure/create-disclosure.schema'
 import { productSchema } from '../create-form-info/create-info.schema'
 import { productOptionSchema } from '../create-form-options/create-options.schema'
+import { thumbnailSchema } from '../create-form-thumbnail-upload'
 
 export type CreateProductForm = ProductFormInput &
   DeliveryFormInput &
   ProductOptionFormInput &
-  ProductDisclosureFormInput
+  ProductDisclosureFormInput &
+  ThumbnailFormInput
 
 export const createProductSchema = productSchema
   .and(deliverySchema)
   .and(productOptionSchema)
   .and(disclosureSchema)
+  .and(thumbnailSchema)
diff --git a/apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts b/apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts
index c2637e15..3ef9f179 100644
--- a/apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts
@@ -2,6 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Resolver, useForm } from 'react-hook-form'
 
 import { DISCLOSURE_FIELDS } from '@/entity/products'
+
 import { CreateProductForm, createProductSchema } from './product-create.types'
 
 export const useCreateProductForm = () => {
@@ -20,6 +21,9 @@ export const useCreateProductForm = () => {
       deliveryFee: null,
       deliveryMinFee: null,
 
+      mainImage: null,
+      extraImages: [],
+
       mainCategory: '',
       subCategory: '',
       optionName: '',
diff --git a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
index 7f2da6cb..698a554a 100644
--- a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
@@ -5,7 +5,6 @@ import {
   AccordionTrigger,
   StageTab,
 } from '@dessert/ui'
-import { ChevronDownIcon } from 'lucide-react'
 
 import { CategoryOptions, EssentialOptions } from '@/entity/products'
 
diff --git a/apps/seller/src/features/products/create/index.ts b/apps/seller/src/features/products/create/index.ts
index 202e6b01..263cd594 100644
--- a/apps/seller/src/features/products/create/index.ts
+++ b/apps/seller/src/features/products/create/index.ts
@@ -5,3 +5,4 @@ export * from './create-form-disclosure'
 export * from './create-form-info'
 export * from './create-form-options'
 export * from './create-header'
+export * from './create-form-thumbnail-upload'
diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index e2e08057..59b09483 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -10,6 +10,7 @@ import {
   ProductHeader,
   ProductInfoArea,
   ProductOptionsArea,
+  ThumbnailUploadArea,
   useCreateProductForm,
 } from '@/features/products/create'
 
@@ -35,7 +36,9 @@ function CreatePageInner() {
       <CreateFormContainer>
         <ProductDeliveryArea />
       </CreateFormContainer>
-
+      <CreateFormContainer>
+        <ThumbnailUploadArea />
+      </CreateFormContainer>
       <CreateFormContainer>
         <ProductOptionsArea />
       </CreateFormContainer>

From f60d1a3b977bd262d5d6b5fff98bb9ee6019529c Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Tue, 21 Apr 2026 16:36:23 +0900
Subject: [PATCH 03/56] =?UTF-8?q?[seller]=20feat(173):=20=EC=8D=B8?=
 =?UTF-8?q?=EB=84=A4=EC=9D=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20css?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-thumbnail-upload-area.ui.tsx  | 50 +++++++++++--------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
index f7dad5e1..319b0772 100644
--- a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
@@ -1,16 +1,14 @@
 import React, { useEffect, useRef } from 'react'
 
-import { CameraIcon, XIcon } from 'lucide-react' // 아이콘 라이브러리 적절히 사용
-import { useFieldArray, useFormContext } from 'react-hook-form'
-
-import { cn } from '@/shared/libs/utils'
+import { Label } from '@dessert/ui'
+import { Camera, XIcon } from 'lucide-react'
 
 import { useProductThumbnailForm } from './use-product-thumnail-form.hook'
+import { InfoTooltip } from '../create-form/info-tooltip.ui'
 import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export function ThumbnailUploadArea() {
   const {
-    form,
     mainImage,
     extraImages,
     isFormField,
@@ -56,15 +54,21 @@ export function ThumbnailUploadArea() {
   }
 
   return (
-    <div className="flex flex-col gap-8 rounded-xl border border-gray-100 bg-white p-6 shadow-sm">
-      <h3 className="text-gray-900">썸네일 등록</h3>
-
+    <>
+      <div className="mb-24 flex items-center gap-2">
+        <Label
+          label="썸네일 등록"
+          className="typo-heading-20-sb text-gray-900"
+        />
+      </div>
       {/* 대표 이미지 영역 */}
-      <div className="flex flex-col gap-4">
-        <label className="typo-body-14-m text-gray-700">
-          대표 이미지 등록<span className="text-red-500">*</span>
-        </label>
-        <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-8">
+        <Label
+          label="대표 이미지 등록"
+          required
+          className="typo-heading-18-r text-gray-800"
+        />
+        <div className="flex flex-col gap-8">
           {mainImage ? (
             <ImagePreviewItem
               src={URL.createObjectURL(mainImage)}
@@ -78,7 +82,7 @@ export function ThumbnailUploadArea() {
               onChange={(e) => handleFileChange(e, 'main')}
             />
           )}
-          <p className="mt-2 typo-body-12-r text-gray-400">
+          <p className="mt-8 typo-title-16-r text-gray-600">
             권장 크기 1000×1000, 최소 160×160 이상 (1:1 비율) · jpg, jpeg, png
             형식 · 10MB 이하 파일만 업로드 가능해요
           </p>
@@ -86,8 +90,11 @@ export function ThumbnailUploadArea() {
       </div>
 
       {/* 추가 이미지 영역 */}
-      <div className="flex flex-col gap-4">
-        <label className="typo-body-14-m text-gray-700">추가 이미지</label>
+      <div className="mt-32 flex flex-col gap-8">
+        <Label
+          label="추가 이미지"
+          className="typo-heading-18-r text-gray-800"
+        />
         <div className="flex flex-wrap gap-3">
           {/* 추가 이미지들은 업로드 버튼이 항상 앞에 오거나 뒤에 오도록 배치 */}
           {extraImages.length < 9 && (
@@ -108,7 +115,7 @@ export function ThumbnailUploadArea() {
           ))}
         </div>
       </div>
-    </div>
+    </>
   )
 }
 
@@ -130,12 +137,11 @@ function UploadButton({
   return (
     <label
       htmlFor={id}
-      className="flex h-[120px] w-[120px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 transition-colors hover:bg-gray-100"
+      className="flex h-[120px] w-[120px] cursor-pointer flex-col items-center justify-center rounded-16 border border-dashed border-gray-200 bg-white transition-colors hover:bg-gray-100"
     >
-      <CameraIcon className="size-6 text-gray-300" />
-      <span className="mt-2 typo-body-12-m text-gray-400">
-        사진 <span className={count > 0 ? 'text-primary' : ''}>{count}</span>/
-        {max}
+      <Camera className="w-4.25 text-gray-300" />
+      <span className="typo-body-12-r text-gray-800">
+        사진 <span className="text-primary-500">{count}</span>/{max}
       </span>
       <input
         id={id}

From d075e8614aebf6f06ba7459daaa9c03a12df6f80 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Tue, 21 Apr 2026 17:04:26 +0900
Subject: [PATCH 04/56] =?UTF-8?q?[seller]=20feat(173):=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=82=AD=EC=A0=9C=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80,=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-thumbnail-upload-area.ui.tsx  | 109 +++++++++++++-----
 1 file changed, 81 insertions(+), 28 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
index 319b0772..0790455f 100644
--- a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
@@ -1,10 +1,18 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useState } from 'react'
 
-import { Label } from '@dessert/ui'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Label,
+} from '@dessert/ui'
 import { Camera, XIcon } from 'lucide-react'
 
 import { useProductThumbnailForm } from './use-product-thumnail-form.hook'
-import { InfoTooltip } from '../create-form/info-tooltip.ui'
 import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export function ThumbnailUploadArea() {
@@ -18,23 +26,13 @@ export function ThumbnailUploadArea() {
 
   const { setProductFields } = useCreateFormSteps()
 
+  // 삭제 대상 관리를 위한 상태 (index 번호 또는 'main')
+  const [deleteTarget, setDeleteTarget] = useState<number | 'main' | null>(null)
+
   useEffect(() => {
-    setProductFields((prev) => ({ ...prev, productDelivery: isFormField }))
+    setProductFields((prev) => ({ ...prev, productThumbnail: isFormField }))
   }, [isFormField, setProductFields])
 
-  // 이미지 삭제 모달 상태 관리 (커스텀 필요)
-  const handleDelete = (index: number | 'main') => {
-    // 프로젝트 공통 모달이 있다면 window.confirm 대신 교체 가능
-    if (!window.confirm('이미지를 제거하시겠습니까?')) return
-
-    if (index === 'main') {
-      handleMainImageChange(null)
-    } else {
-      const newImages = extraImages.filter((_, i) => i !== index)
-      handleExtraImagesChange(newImages)
-    }
-  }
-
   const handleFileChange = (
     e: React.ChangeEvent<HTMLInputElement>,
     type: 'main' | 'extra',
@@ -49,10 +47,19 @@ export function ThumbnailUploadArea() {
       const newFiles = Array.from(files).slice(0, remainingSlots)
       handleExtraImagesChange([...extraImages, ...newFiles])
     }
-    // 동일 파일 다시 선택 가능하도록 초기화
     e.target.value = ''
   }
 
+  const executeDelete = () => {
+    if (deleteTarget === 'main') {
+      handleMainImageChange(null)
+    } else if (typeof deleteTarget === 'number') {
+      const newImages = extraImages.filter((_, i) => i !== deleteTarget)
+      handleExtraImagesChange(newImages)
+    }
+    setDeleteTarget(null)
+  }
+
   return (
     <>
       <div className="mb-24 flex items-center gap-2">
@@ -61,6 +68,7 @@ export function ThumbnailUploadArea() {
           className="typo-heading-20-sb text-gray-900"
         />
       </div>
+
       {/* 대표 이미지 영역 */}
       <div className="flex flex-col gap-8">
         <Label
@@ -72,7 +80,7 @@ export function ThumbnailUploadArea() {
           {mainImage ? (
             <ImagePreviewItem
               src={URL.createObjectURL(mainImage)}
-              onDelete={() => handleDelete('main')}
+              onDelete={() => setDeleteTarget('main')}
             />
           ) : (
             <UploadButton
@@ -95,8 +103,7 @@ export function ThumbnailUploadArea() {
           label="추가 이미지"
           className="typo-heading-18-r text-gray-800"
         />
-        <div className="flex flex-wrap gap-3">
-          {/* 추가 이미지들은 업로드 버튼이 항상 앞에 오거나 뒤에 오도록 배치 */}
+        <div className="flex flex-wrap gap-12">
           {extraImages.length < 9 && (
             <UploadButton
               id="extra-images"
@@ -108,13 +115,20 @@ export function ThumbnailUploadArea() {
           )}
           {extraImages.map((file: File, idx: number) => (
             <ImagePreviewItem
-              key={idx}
+              key={`${file.name}-${idx}`}
               src={URL.createObjectURL(file)}
-              onDelete={() => handleDelete(idx)}
+              onDelete={() => setDeleteTarget(idx)}
             />
           ))}
         </div>
       </div>
+
+      {/* 삭제 확인 모달 */}
+      <DeleteConfirmDialog
+        isOpen={deleteTarget !== null}
+        onClose={() => setDeleteTarget(null)}
+        onConfirm={executeDelete}
+      />
     </>
   )
 }
@@ -139,7 +153,7 @@ function UploadButton({
       htmlFor={id}
       className="flex h-[120px] w-[120px] cursor-pointer flex-col items-center justify-center rounded-16 border border-dashed border-gray-200 bg-white transition-colors hover:bg-gray-100"
     >
-      <Camera className="w-4.25 text-gray-300" />
+      <Camera className="w-16 text-gray-300" />
       <span className="typo-body-12-r text-gray-800">
         사진 <span className="text-primary-500">{count}</span>/{max}
       </span>
@@ -155,7 +169,6 @@ function UploadButton({
   )
 }
 
-// 프리뷰 아이템 컴포넌트
 function ImagePreviewItem({
   src,
   onDelete,
@@ -164,15 +177,55 @@ function ImagePreviewItem({
   onDelete: () => void
 }) {
   return (
-    <div className="relative h-[120px] w-[120px] overflow-hidden rounded-lg border border-gray-100 bg-gray-50">
+    <div className="relative h-[120px] w-[120px] overflow-hidden rounded-16 border border-gray-100 bg-gray-50">
       <img src={src} alt="preview" className="size-full object-cover" />
       <button
         type="button"
         onClick={onDelete}
-        className="absolute top-1 right-1 rounded-full bg-gray-900/50 p-1 text-white transition-colors hover:bg-gray-900"
+        className="absolute top-6 right-6 rounded-full bg-black/10 p-2 text-white transition-colors hover:bg-gray-900/50"
       >
-        <XIcon className="size-3" />
+        <XIcon className="size-12" />
       </button>
     </div>
   )
 }
+
+interface DeleteConfirmDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+}
+
+function DeleteConfirmDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+}: DeleteConfirmDialogProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>이미지를 삭제 하시겠어요?</DialogTitle>
+          <DialogDescription>
+            현재 등록된 대표 이미지를 삭제하면 기존에
+            <br /> 등록된 이미지를 복구할 수 없어요.{' '}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            title="취소"
+            variant="secondary-outlined"
+            onClick={onClose}
+            className="flex-1"
+          />
+          <Button
+            title="확인"
+            variant="secondary-filled"
+            onClick={onConfirm}
+            className="flex-1"
+          />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

From 901f2968e4d682db1d88f2ab72e16cb3f4bd7036 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Tue, 21 Apr 2026 17:13:19 +0900
Subject: [PATCH 05/56] =?UTF-8?q?[seller]=20refactor(173):=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=EA=B4=80=EB=A0=A8=20hook=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-thumbnail-upload-area.ui.tsx  | 40 +++----------------
 .../use-product-thumnail-form.hook.ts         | 37 ++++++++++++++++-
 2 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
index 0790455f..3e81719f 100644
--- a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
@@ -15,51 +15,23 @@ import { Camera, XIcon } from 'lucide-react'
 import { useProductThumbnailForm } from './use-product-thumnail-form.hook'
 import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
-export function ThumbnailUploadArea() {
+export const ThumbnailUploadArea = () => {
   const {
     mainImage,
     extraImages,
     isFormField,
-    handleMainImageChange,
-    handleExtraImagesChange,
+    deleteTarget,
+    setDeleteTarget,
+    handleFileChange,
+    handleImageDelete,
   } = useProductThumbnailForm()
 
   const { setProductFields } = useCreateFormSteps()
 
-  // 삭제 대상 관리를 위한 상태 (index 번호 또는 'main')
-  const [deleteTarget, setDeleteTarget] = useState<number | 'main' | null>(null)
-
   useEffect(() => {
     setProductFields((prev) => ({ ...prev, productThumbnail: isFormField }))
   }, [isFormField, setProductFields])
 
-  const handleFileChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
-    type: 'main' | 'extra',
-  ) => {
-    const files = e.target.files
-    if (!files) return
-
-    if (type === 'main') {
-      handleMainImageChange(files[0])
-    } else {
-      const remainingSlots = 9 - extraImages.length
-      const newFiles = Array.from(files).slice(0, remainingSlots)
-      handleExtraImagesChange([...extraImages, ...newFiles])
-    }
-    e.target.value = ''
-  }
-
-  const executeDelete = () => {
-    if (deleteTarget === 'main') {
-      handleMainImageChange(null)
-    } else if (typeof deleteTarget === 'number') {
-      const newImages = extraImages.filter((_, i) => i !== deleteTarget)
-      handleExtraImagesChange(newImages)
-    }
-    setDeleteTarget(null)
-  }
-
   return (
     <>
       <div className="mb-24 flex items-center gap-2">
@@ -127,7 +99,7 @@ export function ThumbnailUploadArea() {
       <DeleteConfirmDialog
         isOpen={deleteTarget !== null}
         onClose={() => setDeleteTarget(null)}
-        onConfirm={executeDelete}
+        onConfirm={handleImageDelete}
       />
     </>
   )
diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
index 74f82638..a17ae9ee 100644
--- a/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 import { useFormContext } from 'react-hook-form'
 
 import { CreateProductForm } from '../create-form/product-create.types'
@@ -8,6 +10,8 @@ export function useProductThumbnailForm() {
   const mainImage = form.watch('mainImage')
   const extraImages = form.watch('extraImages') || []
 
+  const [deleteTarget, setDeleteTarget] = useState<number | 'main' | null>(null)
+
   // 필수 입력 사항 판별: 대표 이미지가 있으면 true
   const isFormField = mainImage !== null
 
@@ -19,12 +23,41 @@ export function useProductThumbnailForm() {
     form.setValue('extraImages', files, { shouldValidate: true })
   }
 
+  const handleFileChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    type: 'main' | 'extra',
+  ) => {
+    const files = e.target.files
+    if (!files) return
+
+    if (type === 'main') {
+      handleMainImageChange(files[0])
+    } else {
+      const remainingSlots = 9 - extraImages.length
+      const newFiles = Array.from(files).slice(0, remainingSlots)
+      handleExtraImagesChange([...extraImages, ...newFiles])
+    }
+    e.target.value = ''
+  }
+
+  const handleImageDelete = () => {
+    if (deleteTarget === 'main') {
+      handleMainImageChange(null)
+    } else if (typeof deleteTarget === 'number') {
+      const newImages = extraImages.filter((_, i) => i !== deleteTarget)
+      handleExtraImagesChange(newImages)
+    }
+    setDeleteTarget(null)
+  }
+
   return {
     form,
     mainImage,
     extraImages,
     isFormField,
-    handleMainImageChange,
-    handleExtraImagesChange,
+    deleteTarget,
+    setDeleteTarget,
+    handleFileChange,
+    handleImageDelete,
   }
 }

From c0ee6cfcf6902966d0300c60601e19fdac4e9e66 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Tue, 21 Apr 2026 17:24:37 +0900
Subject: [PATCH 06/56] =?UTF-8?q?[seller]=20fix(173):=EC=8D=B8=EB=84=A4?=
 =?UTF-8?q?=EC=9D=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=9C?=
 =?UTF-8?q?=ED=99=98=EC=B0=B8=EC=A1=B0=20=EA=B2=BD=EA=B3=A0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-delivery/create-form-delivery-area.ui.tsx       | 2 +-
 .../create-form-thumbnail-upload-area.ui.tsx                    | 2 +-
 .../use-product-thumnail-form.hook.ts                           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx b/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
index 6d2f3c16..0592e453 100644
--- a/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
@@ -4,10 +4,10 @@ import { Dropdown, Input, Label } from '@dessert/ui'
 import { Controller } from 'react-hook-form'
 
 import { DeliveryCompany, DeliveryTerms } from '@/entity/products'
-import { InfoTooltip } from '../create-form/info-tooltip.ui'
 import { cn } from '@/shared/libs/utils'
 
 import { useProductDeliveryForm } from './use-product-delivery-form.hook'
+import { InfoTooltip } from '../create-form/info-tooltip.ui'
 import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductDeliveryArea = () => {
diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
index 3e81719f..922be65f 100644
--- a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 
 import {
   Button,
diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
index a17ae9ee..318b7a8e 100644
--- a/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
@@ -2,7 +2,7 @@ import { useState } from 'react'
 
 import { useFormContext } from 'react-hook-form'
 
-import { CreateProductForm } from '../create-form/product-create.types'
+import type { CreateProductForm } from '../create-form/product-create.types'
 
 export function useProductThumbnailForm() {
   const form = useFormContext<CreateProductForm>()

From 082447754a3a0544c67dab6222bd32a9151effe2 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Tue, 21 Apr 2026 17:30:41 +0900
Subject: [PATCH 07/56] =?UTF-8?q?[seller]=20fix(173):(=EC=9E=84=EC=8B=9C)f?=
 =?UTF-8?q?ixedLayout=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20css=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx b/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx
index e508a95b..0712c5b4 100644
--- a/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx
+++ b/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx
@@ -10,10 +10,15 @@ const FixedLayout = () => {
       <LogoHeader />
       <div className="flex h-[calc(100vh-80px)] w-full flex-row overflow-y-auto">
         <Lnb />
-        <main className="size-full max-w-[1240px] bg-gray-50">
+        {/* <main className="size-full max-w-[1240px] bg-gray-50">
           <ScrollArea className="size-full px-[90px] py-40">
             <Outlet />
           </ScrollArea>
+        </main> */}
+        <main className="h-full max-w-[calc(100vw-240px)] overflow-y-auto bg-gray-50">
+          <div className="relative px-[90px] py-40">
+            <Outlet />
+          </div>
         </main>
       </div>
     </>

From 2d3522f08f0432d4aef4dbe8c46ac9de8cc61f2f Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Tue, 21 Apr 2026 17:41:45 +0900
Subject: [PATCH 08/56] =?UTF-8?q?[seller]=20fix(173):=20Chip=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EB=90=9C=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=8B=9C?=
 =?UTF-8?q?=EC=95=88=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/src/chip/chip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/chip/chip.tsx b/packages/ui/src/chip/chip.tsx
index 3f3b1c61..43295359 100644
--- a/packages/ui/src/chip/chip.tsx
+++ b/packages/ui/src/chip/chip.tsx
@@ -31,7 +31,7 @@ const Chip = ({
 
   const sizeClasses = {
     sm: 'px-2 py-1 typo-body-10-r rounded-full',
-    md: 'px-3 py-1.5 typo-body-12-r rounded-full',
+    md: 'px-3 py-1.5 typo-body-14-r rounded-full',
   }
 
   const closeClasses = {

From c5f3778a0a330a1478d29fa1f39fbb51024fc354 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Tue, 21 Apr 2026 18:44:10 +0900
Subject: [PATCH 09/56] =?UTF-8?q?[seller]=20feat(173):=20=EC=8A=A4?=
 =?UTF-8?q?=ED=8B=B0=ED=82=A4=20=ED=97=A4=EB=8D=94=20=EB=8B=A8=EA=B3=84?=
 =?UTF-8?q?=EB=B3=84=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-info-area.ui.tsx              |  2 +-
 .../create-form/create-form-container.ui.tsx  |  4 +-
 .../create-form/create-form-provider.ui.tsx   | 35 +++++++++++++
 .../create-form/create-form-steps.context.ts  |  3 ++
 .../create/create-header/create-header.ui.tsx | 27 +++++++---
 .../src/pages/products/create/create-page.tsx | 52 ++++++++++++++++---
 6 files changed, 107 insertions(+), 16 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx b/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
index c859f349..90635722 100644
--- a/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
@@ -7,8 +7,8 @@ import { ProductDiscountType } from '@/entity/products/create/create-info/produc
 import { productionTimes } from '@/entity/products/create/create-info/production-time.constants'
 
 import { useProductInfoForm } from './use-product-info-form.hook'
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
+import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductInfoArea = () => {
   const {
diff --git a/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
index 4c717b17..bbd297a3 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
@@ -5,14 +5,16 @@ import { cn } from '@/shared/libs/utils'
 interface CreateFormContainerProps {
   className?: string
   children: React.ReactNode
+  id: string
 }
 
 export const CreateFormContainer = ({
   className,
   children,
+  id,
 }: CreateFormContainerProps) => {
   return (
-    <div className={cn('mt-20 bg-white', className)}>
+    <div id={id} className={cn('mt-20 bg-white', className)}>
       <div className="px-24 pt-16 pb-24">{children}</div>
     </div>
   )
diff --git a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
index 54bf88ee..aee6ac78 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
@@ -12,13 +12,48 @@ export const FormStepsProvider = ({
     productDelivery: false,
     productThumbnail: false,
     productOptions: false,
+    productDetail: false,
+    productDisClosure: false,
   })
 
+  const [currentStep, setCurrentStep] = useState(1)
+
+  // 특정 영역으로 스크롤 이동하는 함수
+  const scrollToStep = (index: number) => {
+    const stepIds = [
+      'productInfo',
+      'productDelivery',
+      'productThumbnail',
+      'productOptions',
+      'productDetail',
+      'productDisclosure',
+    ]
+    const targetId = stepIds[index]
+    const element = document.getElementById(targetId)
+
+    console.log(element)
+
+    const container = document.querySelector('main')
+
+    if (element && container) {
+      const headerOffset = 250
+      const elementPosition = element.offsetTop // 부모 컨테이너 기준 위치
+
+      container.scrollTo({
+        top: elementPosition - headerOffset,
+        behavior: 'smooth',
+      })
+    }
+  }
+
   return (
     <FormStepsContext.Provider
       value={{
         productFields,
         setProductFields,
+        currentStep,
+        setCurrentStep,
+        scrollToStep,
       }}
     >
       {children}
diff --git a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
index 197b78a1..fe7ef4de 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
@@ -5,6 +5,9 @@ export type FormStepStatus = Record<string, boolean>
 interface FormStepsContextType {
   productFields: FormStepStatus
   setProductFields: React.Dispatch<React.SetStateAction<FormStepStatus>>
+  currentStep: number
+  setCurrentStep: React.Dispatch<React.SetStateAction<number>>
+  scrollToStep: (index: number) => void
 }
 
 export const FormStepsContext = createContext<FormStepsContextType | null>(null)
diff --git a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
index 698a554a..ce441fac 100644
--- a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
@@ -22,19 +22,32 @@ const stagestep = [
 ]
 
 export const ProductHeader = () => {
-  const { productFields } = useCreateFormSteps()
+  const { productFields, currentStep, scrollToStep } = useCreateFormSteps()
   const steps = Object.values(productFields).filter((e) => e === true).length
   const totalSteps = Object.keys(productFields).length
 
   return (
     <div className="sticky top-0 left-0 z-20 -mt-40 -ml-[90px] w-[calc(100%+180px)] border-b border-b-gray-200 bg-white px-[90px] py-16">
       <div className="flex w-full items-center justify-between">
-        {/* TODO : 추후 기능 추가 예정 */}
-        <StageTab
-          currentStep={1}
-          steps={stagestep}
-          className="w-fit justify-start border-none"
-        />
+        <div className="relative">
+          <StageTab
+            currentStep={currentStep}
+            steps={stagestep}
+            className="w-fit justify-start border-none"
+          />
+          {/* 클릭 기능을 위한 투명 레이어 (선택 사항) */}
+          <div className="absolute inset-0 flex">
+            {stagestep.map((_, idx) => (
+              <button
+                key={idx}
+                className="h-full flex-1 cursor-pointer border"
+                onClick={() => scrollToStep(idx)}
+                title={`${stagestep[idx]} 이동`}
+              />
+            ))}
+          </div>
+        </div>
+
         <p className="typo-title-16-sb">
           필수 입력 사항이{' '}
           <span className="text-primary-500">{totalSteps - steps}개</span>{' '}
diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index 59b09483..76eac404 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -1,3 +1,5 @@
+import { useEffect } from 'react'
+
 import { Button } from '@dessert/ui'
 import { FormProvider } from 'react-hook-form'
 
@@ -11,6 +13,7 @@ import {
   ProductInfoArea,
   ProductOptionsArea,
   ThumbnailUploadArea,
+  useCreateFormSteps,
   useCreateProductForm,
 } from '@/features/products/create'
 
@@ -26,28 +29,63 @@ function CreatePage() {
 }
 
 function CreatePageInner() {
+  const { setCurrentStep } = useCreateFormSteps()
+  const stepIds = [
+    'productInfo',
+    'productDelivery',
+    'productThumbnail',
+    'productOptions',
+    'productDetail',
+    'productDisclosure',
+  ]
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          // 화면 중앙(또는 상단)에 위치할 때 해당 스텝을 활성화
+          if (entry.isIntersecting) {
+            const index = stepIds.indexOf(entry.target.id)
+            setCurrentStep(index + 1)
+          }
+        })
+      },
+      {
+        root: null, // 브라우저 뷰포트 기준
+        rootMargin: '-30% 0px -60% 0px', // 감지 영역 조정
+        threshold: 0,
+      },
+    )
+
+    stepIds.forEach((id) => {
+      const el = document.getElementById(id)
+      if (el) observer.observe(el)
+    })
+
+    return () => observer.disconnect()
+  }, [setCurrentStep])
+
   return (
     <>
       <ProductHeader />
-      <CreateFormContainer className="mt-22">
+      <CreateFormContainer id="productInfo" className="mt-22">
         <ProductInfoArea />
       </CreateFormContainer>
-
-      <CreateFormContainer>
+      <CreateFormContainer id="productDelivery">
         <ProductDeliveryArea />
       </CreateFormContainer>
-      <CreateFormContainer>
+      <CreateFormContainer id="productThumbnail">
         <ThumbnailUploadArea />
       </CreateFormContainer>
-      <CreateFormContainer>
+      <CreateFormContainer id="productOptions">
         <ProductOptionsArea />
       </CreateFormContainer>
 
-      <CreateFormContainer>
+      <CreateFormContainer id="productDetail">
         <ProductDetailArea />
       </CreateFormContainer>
 
-      <CreateFormContainer>
+      <CreateFormContainer id="productDisclosure">
         <ProductDisclosureArea />
       </CreateFormContainer>
 

From 6bfd150b44c37954c148155d69660bd9b7ce0057 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Tue, 21 Apr 2026 23:50:55 +0900
Subject: [PATCH 10/56] =?UTF-8?q?[seller]=20feat(173):=20=EC=8A=A4?=
 =?UTF-8?q?=ED=8B=B0=ED=82=A4=20=ED=97=A4=EB=8D=94=20=EB=8B=A8=EA=B3=84?=
 =?UTF-8?q?=EB=B3=84=20=EC=A7=84=ED=96=89=EB=8F=84=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form/create-form-container.ui.tsx  | 12 ++++-
 .../create-form/create-form-provider.ui.tsx   | 50 +++++++++++++------
 .../create-form/create-form-steps.context.ts  |  7 ++-
 .../create/create-header/create-header.ui.tsx | 36 ++++++++-----
 .../src/pages/products/create/create-page.tsx | 42 +++++++++++-----
 packages/ui/src/tab/stage-tab.tsx             | 21 ++++++--
 6 files changed, 123 insertions(+), 45 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
index bbd297a3..9e19e7e0 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 
 import { cn } from '@/shared/libs/utils'
 
+import { useCreateFormSteps } from './use-create-form-steps.hook'
+
 interface CreateFormContainerProps {
   className?: string
   children: React.ReactNode
@@ -13,8 +15,16 @@ export const CreateFormContainer = ({
   children,
   id,
 }: CreateFormContainerProps) => {
+  const { headerHeight } = useCreateFormSteps()
+
   return (
-    <div id={id} className={cn('mt-20 bg-white', className)}>
+    <div
+      id={id}
+      className={cn('mt-20 bg-white', className)}
+      style={{
+        scrollMarginTop: `${headerHeight + 2}px`,
+      }}
+    >
       <div className="px-24 pt-16 pb-24">{children}</div>
     </div>
   )
diff --git a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
index aee6ac78..28a7e53e 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 
 import { FormStepStatus, FormStepsContext } from './create-form-steps.context'
 
+// FormStepsProvider - scrollToStep 수정
 export const FormStepsProvider = ({
   children,
 }: {
@@ -13,13 +14,17 @@ export const FormStepsProvider = ({
     productThumbnail: false,
     productOptions: false,
     productDetail: false,
-    productDisClosure: false,
+    productDisclosure: false,
   })
 
   const [currentStep, setCurrentStep] = useState(1)
+  const [headerHeight, setHeaderHeight] = useState(0)
 
-  // 특정 영역으로 스크롤 이동하는 함수
-  const scrollToStep = (index: number) => {
+  // 🔑 클릭으로 스크롤 중인지 여부를 ref로 관리 (리렌더 불필요)
+  const isScrollingToStep = useRef(false)
+  const scrollEndTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const scrollToStep = useCallback((index: number) => {
     const stepIds = [
       'productInfo',
       'productDelivery',
@@ -31,20 +36,34 @@ export const FormStepsProvider = ({
     const targetId = stepIds[index]
     const element = document.getElementById(targetId)
 
-    console.log(element)
+    if (!element) return
+
+    // 1. Observer 일시 비활성화 + step 즉시 확정
+    isScrollingToStep.current = true
+    setCurrentStep(index + 1)
 
-    const container = document.querySelector('main')
+    // 2. 이전 타이머 초기화
+    if (scrollEndTimer.current) clearTimeout(scrollEndTimer.current)
 
-    if (element && container) {
-      const headerOffset = 250
-      const elementPosition = element.offsetTop // 부모 컨테이너 기준 위치
+    // 3. 스크롤
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+
+    // 4. scrollend 이벤트 지원 시 사용, 미지원 시 timeout fallback
+    const unlock = () => {
+      isScrollingToStep.current = false
+      window.removeEventListener('scrollend', unlock)
+      if (scrollEndTimer.current) clearTimeout(scrollEndTimer.current)
+    }
 
-      container.scrollTo({
-        top: elementPosition - headerOffset,
-        behavior: 'smooth',
-      })
+    if ('onscrollend' in window) {
+      window.addEventListener('scrollend', unlock, { once: true })
+      // scrollend가 발화 안 될 경우 대비 안전망
+      scrollEndTimer.current = setTimeout(unlock, 1000)
+    } else {
+      // fallback: smooth scroll 최대 소요 시간 대기
+      scrollEndTimer.current = setTimeout(unlock, 800)
     }
-  }
+  }, [])
 
   return (
     <FormStepsContext.Provider
@@ -54,6 +73,9 @@ export const FormStepsProvider = ({
         currentStep,
         setCurrentStep,
         scrollToStep,
+        headerHeight,
+        setHeaderHeight,
+        isScrollingToStep, // ref 전달
       }}
     >
       {children}
diff --git a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
index fe7ef4de..37dcc694 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
@@ -4,10 +4,15 @@ export type FormStepStatus = Record<string, boolean>
 
 interface FormStepsContextType {
   productFields: FormStepStatus
-  setProductFields: React.Dispatch<React.SetStateAction<FormStepStatus>>
   currentStep: number
+  headerHeight: number
+
+  setProductFields: React.Dispatch<React.SetStateAction<FormStepStatus>>
   setCurrentStep: React.Dispatch<React.SetStateAction<number>>
+  setHeaderHeight: React.Dispatch<React.SetStateAction<number>>
   scrollToStep: (index: number) => void
+
+  isScrollingToStep: React.MutableRefObject<boolean>
 }
 
 export const FormStepsContext = createContext<FormStepsContextType | null>(null)
diff --git a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
index ce441fac..ec8b2264 100644
--- a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
@@ -1,3 +1,5 @@
+import { useEffect, useRef } from 'react'
+
 import {
   Accordion,
   AccordionContent,
@@ -22,30 +24,38 @@ const stagestep = [
 ]
 
 export const ProductHeader = () => {
-  const { productFields, currentStep, scrollToStep } = useCreateFormSteps()
+  const { productFields, currentStep, scrollToStep, setHeaderHeight } =
+    useCreateFormSteps()
+  const headerRef = useRef<HTMLDivElement>(null)
   const steps = Object.values(productFields).filter((e) => e === true).length
   const totalSteps = Object.keys(productFields).length
+  useEffect(() => {
+    if (!headerRef.current) return
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        // 💡 소수점 때문에 발생하는 불필요한 리렌더링 방지 (Math.round)
+        const height = Math.round(entry.target.clientHeight)
+        setHeaderHeight(height)
+      }
+    })
 
+    observer.observe(headerRef.current)
+    return () => observer.disconnect()
+  }, [setHeaderHeight])
   return (
-    <div className="sticky top-0 left-0 z-20 -mt-40 -ml-[90px] w-[calc(100%+180px)] border-b border-b-gray-200 bg-white px-[90px] py-16">
+    <div
+      ref={headerRef}
+      className="sticky top-0 left-0 z-20 -mt-40 -ml-[90px] w-[calc(100%+180px)] border-b border-b-gray-200 bg-white px-[90px] py-16"
+    >
       <div className="flex w-full items-center justify-between">
         <div className="relative">
           <StageTab
             currentStep={currentStep}
             steps={stagestep}
             className="w-fit justify-start border-none"
+            onStepClick={(idx) => scrollToStep(idx)}
           />
-          {/* 클릭 기능을 위한 투명 레이어 (선택 사항) */}
-          <div className="absolute inset-0 flex">
-            {stagestep.map((_, idx) => (
-              <button
-                key={idx}
-                className="h-full flex-1 cursor-pointer border"
-                onClick={() => scrollToStep(idx)}
-                title={`${stagestep[idx]} 이동`}
-              />
-            ))}
-          </div>
         </div>
 
         <p className="typo-title-16-sb">
diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index 76eac404..4a701c61 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -29,7 +29,9 @@ function CreatePage() {
 }
 
 function CreatePageInner() {
-  const { setCurrentStep } = useCreateFormSteps()
+  const { setCurrentStep, headerHeight, isScrollingToStep } =
+    useCreateFormSteps()
+
   const stepIds = [
     'productInfo',
     'productDelivery',
@@ -40,30 +42,41 @@ function CreatePageInner() {
   ]
 
   useEffect(() => {
+    const elements = stepIds.map((id) => document.getElementById(id))
+    const topMargin = Math.max(0, headerHeight - 30)
+
     const observer = new IntersectionObserver(
       (entries) => {
-        entries.forEach((entry) => {
-          // 화면 중앙(또는 상단)에 위치할 때 해당 스텝을 활성화
-          if (entry.isIntersecting) {
-            const index = stepIds.indexOf(entry.target.id)
-            setCurrentStep(index + 1)
-          }
+        if (isScrollingToStep.current) return
+
+        // 현재 화면에 보이는 섹션들 중 가장 위에 있는 것을 active로
+        const visibleEntries = entries.filter((entry) => entry.isIntersecting)
+
+        if (visibleEntries.length === 0) return
+
+        // rootMargin 기준선을 통과한 entry 중 index가 가장 큰 것 선택
+        // (스크롤 방향 무관하게 "현재 보이는 가장 상단 섹션" 기준)
+        const topEntry = visibleEntries.reduce((prev, curr) => {
+          // boundingClientRect.top이 작을수록 화면 상단에 가까움
+          return curr.boundingClientRect.top < prev.boundingClientRect.top
+            ? curr
+            : prev
         })
+
+        const index = stepIds.indexOf(topEntry.target.id)
+        if (index !== -1) setCurrentStep(index + 1)
       },
       {
-        root: null, // 브라우저 뷰포트 기준
-        rootMargin: '-30% 0px -60% 0px', // 감지 영역 조정
+        rootMargin: `-${topMargin}px 0px -60% 0px`,
         threshold: 0,
       },
     )
 
-    stepIds.forEach((id) => {
-      const el = document.getElementById(id)
+    elements.forEach((el) => {
       if (el) observer.observe(el)
     })
-
     return () => observer.disconnect()
-  }, [setCurrentStep])
+  }, [headerHeight, setCurrentStep, isScrollingToStep])
 
   return (
     <>
@@ -71,12 +84,15 @@ function CreatePageInner() {
       <CreateFormContainer id="productInfo" className="mt-22">
         <ProductInfoArea />
       </CreateFormContainer>
+
       <CreateFormContainer id="productDelivery">
         <ProductDeliveryArea />
       </CreateFormContainer>
+
       <CreateFormContainer id="productThumbnail">
         <ThumbnailUploadArea />
       </CreateFormContainer>
+
       <CreateFormContainer id="productOptions">
         <ProductOptionsArea />
       </CreateFormContainer>
diff --git a/packages/ui/src/tab/stage-tab.tsx b/packages/ui/src/tab/stage-tab.tsx
index 46dc50f8..fe516e89 100644
--- a/packages/ui/src/tab/stage-tab.tsx
+++ b/packages/ui/src/tab/stage-tab.tsx
@@ -11,9 +11,16 @@ interface StageTabProps {
   steps: string[]
   /** 추가적인 클래스명 */
   className?: string
+  /** 단계 클릭 시 실행될 콜백*/
+  onStepClick?: (index: number) => void
 }
 
-export function StageTab({ currentStep, steps, className }: StageTabProps) {
+export function StageTab({
+  currentStep,
+  steps,
+  className,
+  onStepClick,
+}: StageTabProps) {
   return (
     <div
       className={cn(
@@ -24,9 +31,17 @@ export function StageTab({ currentStep, steps, className }: StageTabProps) {
       <div className="flex shrink-0 items-center justify-center gap-10">
         {steps.map((step, index) => {
           const isActive = index + 1 === currentStep
+          const Component = onStepClick ? 'button' : 'div'
+          const componentProps = onStepClick
+            ? { type: 'button' as const, onClick: () => onStepClick(index) }
+            : {}
 
           return (
-            <div key={step} className="flex shrink-0 items-center gap-2">
+            <Component
+              key={step}
+              {...componentProps}
+              className="flex shrink-0 items-center gap-2"
+            >
               <span
                 className={cn(
                   'text-[16px] leading-[1.6] font-medium tracking-[-0.32px] whitespace-nowrap transition-colors',
@@ -41,7 +56,7 @@ export function StageTab({ currentStep, steps, className }: StageTabProps) {
                   isActive ? 'text-primary-500' : 'text-gray-600',
                 )}
               />
-            </div>
+            </Component>
           )
         })}
       </div>

From 146ecb209b10b3c6d3c6f9ca4edeba26b7902ce1 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Wed, 22 Apr 2026 11:37:48 +0900
Subject: [PATCH 11/56] =?UTF-8?q?[seller]=20feat(173):=20=EC=8A=A4?=
 =?UTF-8?q?=ED=8B=B0=ED=82=A4=20=ED=97=A4=EB=8D=94=20=EC=84=B1=EB=B6=84=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=ED=83=9C=EA=B7=B8=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-options-area.ui.tsx           | 27 +++++++++-
 .../create-form/create-form-provider.ui.tsx   | 54 ++++++++++++++++++-
 .../create-form/create-form-steps.context.ts  | 26 +++++++++
 .../create-header/create-header-tags.ui.tsx   | 41 ++++++++++----
 .../create/create-header/create-header.ui.tsx |  1 -
 5 files changed, 134 insertions(+), 15 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
index 60def96d..3fe429f3 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
@@ -9,8 +9,8 @@ import { MAIN_CATEGORY_OPTIONS } from '@/entity/products/create/create-options/p
 import DaySelector from '@/shared/block/day-selector/day-selector'
 
 import { useProductOptionForm } from './use-product-options.form.hook'
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
+import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductOptionsArea = () => {
   const {
@@ -37,12 +37,35 @@ export const ProductOptionsArea = () => {
     formState: { errors },
   } = form
 
-  const { setProductFields } = useCreateFormSteps()
+  const { setProductFields, setNutritionData } = useCreateFormSteps()
 
   useEffect(() => {
     setProductFields((prev) => ({ ...prev, productOptions: isFormField }))
   }, [isFormField, setProductFields])
 
+  useEffect(() => {
+    // 💡 값이 실제로 바뀔 때만 실행되도록 안에서 변환
+    const sugar = Number(nutritionInputs.sugar?.displayValue || 0)
+    const protein = Number(nutritionInputs.protein?.displayValue || 0)
+    const fat = Number(nutritionInputs.fat?.displayValue || 0)
+
+    setNutritionData({
+      sugar,
+      protein,
+      fat,
+      ingredientCategories,
+    })
+
+    // 💡 의존성 배열에 객체(nutritionInputs) 대신
+    // 실제 변화를 감지할 '원시 값'들을 넣습니다.
+  }, [
+    nutritionInputs.sugar?.displayValue,
+    nutritionInputs.protein?.displayValue,
+    nutritionInputs.fat?.displayValue,
+    JSON.stringify(ingredientCategories), // 배열은 문자열화해서 비교
+    setNutritionData,
+  ])
+
   const handleDelete = () => {
     //삭제 기능
   }
diff --git a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
index 28a7e53e..a562e07a 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
@@ -1,6 +1,11 @@
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 
-import { FormStepStatus, FormStepsContext } from './create-form-steps.context'
+import {
+  ActiveTags,
+  FormStepStatus,
+  FormStepsContext,
+  NutritionData,
+} from './create-form-steps.context'
 
 // FormStepsProvider - scrollToStep 수정
 export const FormStepsProvider = ({
@@ -65,6 +70,48 @@ export const FormStepsProvider = ({
     }
   }, [])
 
+  //필수성분, 적용된 카테고리 부분
+
+  const [nutritionData, setNutritionData] = useState<NutritionData>({
+    sugar: 0,
+    protein: 0,
+    fat: 0,
+    ingredientCategories: [],
+  })
+
+  const activeTags: ActiveTags = useMemo(() => {
+    const { sugar, protein, fat, ingredientCategories } = nutritionData
+
+    // 값이 실제로 입력되었는지 확인 (비어있거나 0이면 false 처리)
+    const hasProtein = protein > 0
+    const hasSugar = sugar > 0
+    const hasFat = fat > 0
+
+    const isGlutenFree = ingredientCategories.includes('glutenFree')
+    const isVegan = ingredientCategories.includes('vegan')
+
+    // "값이 존재함 && 기준치 미만/이상" 두 조건을 모두 만족해야 함
+    const isHighProtein = hasProtein && protein >= 11
+    const isLowFat = hasFat && fat < 3
+    const isLowSugar = hasSugar && sugar < 5
+
+    return {
+      essential: {
+        isGlutenFree,
+        isVegan,
+        isHighProtein,
+        isLowFat,
+        isLowSugar,
+      },
+      category: {
+        // 칼로리 다운도 저당/저지방 둘 다 '실제 입력'이 있어야 함
+        isCalorieDown: isLowSugar && isLowFat,
+        isProteinRich: isHighProtein,
+        isEasyDigestion: isVegan && isGlutenFree,
+      },
+    }
+  }, [nutritionData])
+
   return (
     <FormStepsContext.Provider
       value={{
@@ -76,6 +123,9 @@ export const FormStepsProvider = ({
         headerHeight,
         setHeaderHeight,
         isScrollingToStep, // ref 전달
+        nutritionData,
+        setNutritionData,
+        activeTags,
       }}
     >
       {children}
diff --git a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
index 37dcc694..07364cf9 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
@@ -2,6 +2,28 @@ import React, { createContext } from 'react'
 
 export type FormStepStatus = Record<string, boolean>
 
+export interface NutritionData {
+  sugar: number
+  protein: number
+  fat: number
+  ingredientCategories: string[]
+}
+
+export interface ActiveTags {
+  essential: {
+    isGlutenFree: boolean
+    isVegan: boolean
+    isHighProtein: boolean
+    isLowFat: boolean
+    isLowSugar: boolean
+  }
+  category: {
+    isCalorieDown: boolean
+    isProteinRich: boolean
+    isEasyDigestion: boolean
+  }
+}
+
 interface FormStepsContextType {
   productFields: FormStepStatus
   currentStep: number
@@ -13,6 +35,10 @@ interface FormStepsContextType {
   scrollToStep: (index: number) => void
 
   isScrollingToStep: React.MutableRefObject<boolean>
+
+  nutritionData: NutritionData
+  setNutritionData: React.Dispatch<React.SetStateAction<NutritionData>>
+  activeTags: ActiveTags
 }
 
 export const FormStepsContext = createContext<FormStepsContextType | null>(null)
diff --git a/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
index 7fafce35..0009c461 100644
--- a/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
@@ -2,6 +2,8 @@ import { Chip, Label, Tooltip } from '@dessert/ui'
 
 import { OptionTags } from '@/entity/products'
 
+import { useCreateFormSteps } from '../create-form'
+
 interface TagsProps {
   title: string
   titleRequire?: boolean
@@ -15,6 +17,20 @@ export const ProductHeaderTags = ({
   titleTooltipProps,
   tagData,
 }: TagsProps) => {
+  const { activeTags } = useCreateFormSteps()
+  const { essential, category } = activeTags
+  const statusMap: Record<string, boolean> = {
+    // 필수성분
+    글루텐프리: essential.isGlutenFree,
+    비건: essential.isVegan,
+    고단백: essential.isHighProtein,
+    저지방: essential.isLowFat,
+    저당: essential.isLowSugar,
+    // 적용된 카테고리
+    '칼로리 다운': category.isCalorieDown,
+    '단백질 듬뿍': category.isProteinRich,
+    '속 편한 즐거움': category.isEasyDigestion,
+  }
   return (
     <div>
       <div className="flex items-center gap-2">
@@ -26,16 +42,21 @@ export const ProductHeaderTags = ({
         {titleTooltipProps}
       </div>
       <div className="mt-10 flex gap-4">
-        {tagData.map((items) => (
-          <Tooltip position="bottom" key={items.title}>
-            <Tooltip.Trigger>
-              <Chip size="md">#{items.title}</Chip>
-            </Tooltip.Trigger>
-            <Tooltip.Content className="px-8 py-6">
-              <p>{items.tooltip}</p>
-            </Tooltip.Content>
-          </Tooltip>
-        ))}
+        {tagData.map((items) => {
+          const isActive = statusMap[items.title] ?? false
+          return (
+            <Tooltip position="bottom" key={items.title}>
+              <Tooltip.Trigger>
+                <Chip size="md" selected={isActive}>
+                  #{items.title}
+                </Chip>
+              </Tooltip.Trigger>
+              <Tooltip.Content className="px-8 py-6">
+                <p>{items.tooltip}</p>
+              </Tooltip.Content>
+            </Tooltip>
+          )
+        })}
       </div>
     </div>
   )
diff --git a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
index ec8b2264..8803691a 100644
--- a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
@@ -34,7 +34,6 @@ export const ProductHeader = () => {
 
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        // 💡 소수점 때문에 발생하는 불필요한 리렌더링 방지 (Math.round)
         const height = Math.round(entry.target.clientHeight)
         setHeaderHeight(height)
       }

From 76e80179be26526757672ab5760d3c31e720e4a8 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Wed, 22 Apr 2026 11:54:56 +0900
Subject: [PATCH 12/56] =?UTF-8?q?[seller]=20refactor(173):=20=EC=98=81?=
 =?UTF-8?q?=EC=96=91=EC=84=B1=EB=B6=84,=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20entity=EB=A5=BC=20=ED=99=9C=EC=9A=A9=ED=95=B4=20pro?=
 =?UTF-8?q?vider=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form/create-form-provider.ui.tsx   | 30 +++++++++----------
 .../create-form/create-form-steps.context.ts  | 13 +-------
 .../create-header/create-header-tags.ui.tsx   | 16 ++--------
 3 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
index a562e07a..15814266 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
@@ -1,5 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react'
 
+import { CategoryOptions, EssentialOptions } from '@/entity/products'
+
 import {
   ActiveTags,
   FormStepStatus,
@@ -7,7 +9,7 @@ import {
   NutritionData,
 } from './create-form-steps.context'
 
-// FormStepsProvider - scrollToStep 수정
+// FormStepsProvider - scrollToStep
 export const FormStepsProvider = ({
   children,
 }: {
@@ -25,7 +27,7 @@ export const FormStepsProvider = ({
   const [currentStep, setCurrentStep] = useState(1)
   const [headerHeight, setHeaderHeight] = useState(0)
 
-  // 🔑 클릭으로 스크롤 중인지 여부를 ref로 관리 (리렌더 불필요)
+  // 클릭으로 스크롤 중인지 여부를 ref로 관리 (리렌더 불필요)
   const isScrollingToStep = useRef(false)
   const scrollEndTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -96,19 +98,17 @@ export const FormStepsProvider = ({
     const isLowSugar = hasSugar && sugar < 5
 
     return {
-      essential: {
-        isGlutenFree,
-        isVegan,
-        isHighProtein,
-        isLowFat,
-        isLowSugar,
-      },
-      category: {
-        // 칼로리 다운도 저당/저지방 둘 다 '실제 입력'이 있어야 함
-        isCalorieDown: isLowSugar && isLowFat,
-        isProteinRich: isHighProtein,
-        isEasyDigestion: isVegan && isGlutenFree,
-      },
+      // 필수 성분 매칭 (순서 기준)
+      [EssentialOptions[0].title]: isGlutenFree,
+      [EssentialOptions[1].title]: isVegan,
+      [EssentialOptions[2].title]: isHighProtein,
+      [EssentialOptions[3].title]: isLowFat,
+      [EssentialOptions[4].title]: isLowSugar,
+
+      // 적용 카테고리 매칭 (순서 기준)
+      [CategoryOptions[0].title]: isLowSugar && isLowFat,
+      [CategoryOptions[1].title]: isHighProtein,
+      [CategoryOptions[2].title]: isVegan && isGlutenFree,
     }
   }, [nutritionData])
 
diff --git a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
index 07364cf9..69eb7f47 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
@@ -10,18 +10,7 @@ export interface NutritionData {
 }
 
 export interface ActiveTags {
-  essential: {
-    isGlutenFree: boolean
-    isVegan: boolean
-    isHighProtein: boolean
-    isLowFat: boolean
-    isLowSugar: boolean
-  }
-  category: {
-    isCalorieDown: boolean
-    isProteinRich: boolean
-    isEasyDigestion: boolean
-  }
+  [key: string]: boolean
 }
 
 interface FormStepsContextType {
diff --git a/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
index 0009c461..835a0241 100644
--- a/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
@@ -18,19 +18,7 @@ export const ProductHeaderTags = ({
   tagData,
 }: TagsProps) => {
   const { activeTags } = useCreateFormSteps()
-  const { essential, category } = activeTags
-  const statusMap: Record<string, boolean> = {
-    // 필수성분
-    글루텐프리: essential.isGlutenFree,
-    비건: essential.isVegan,
-    고단백: essential.isHighProtein,
-    저지방: essential.isLowFat,
-    저당: essential.isLowSugar,
-    // 적용된 카테고리
-    '칼로리 다운': category.isCalorieDown,
-    '단백질 듬뿍': category.isProteinRich,
-    '속 편한 즐거움': category.isEasyDigestion,
-  }
+
   return (
     <div>
       <div className="flex items-center gap-2">
@@ -43,7 +31,7 @@ export const ProductHeaderTags = ({
       </div>
       <div className="mt-10 flex gap-4">
         {tagData.map((items) => {
-          const isActive = statusMap[items.title] ?? false
+          const isActive = activeTags[items.title] ?? false
           return (
             <Tooltip position="bottom" key={items.title}>
               <Tooltip.Trigger>

From a3fc380d6bf6d5f198b709ab1ae1a1bd325938d6 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Wed, 22 Apr 2026 12:05:07 +0900
Subject: [PATCH 13/56] =?UTF-8?q?[seller]=20refactor(173):=20calculation?=
 =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20hook=EC=9D=84=20Public=20API=20?=
 =?UTF-8?q?=EA=B7=9C=EC=B9=99=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/products/create/create-calculation/index.ts | 2 ++
 .../create-form-delivery/use-product-delivery-form.hook.ts   | 2 +-
 .../create/create-form-info/use-product-info-form.hook.ts    | 2 +-
 .../create-form-options/use-product-options.form.hook.ts     | 5 ++---
 4 files changed, 6 insertions(+), 5 deletions(-)
 create mode 100644 apps/seller/src/features/products/create/create-calculation/index.ts

diff --git a/apps/seller/src/features/products/create/create-calculation/index.ts b/apps/seller/src/features/products/create/create-calculation/index.ts
new file mode 100644
index 00000000..46ae923c
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-calculation/index.ts
@@ -0,0 +1,2 @@
+export { useFloatInput } from './create-form-float-input.hook'
+export { useNumberInput } from './create-form-number-input.hook'
diff --git a/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts b/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
index ac2f5071..fca57940 100644
--- a/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
@@ -1,6 +1,6 @@
 import { useFormContext } from 'react-hook-form'
 
-import { useNumberInput } from '../create-calculation/create-form-number-input.hook'
+import { useNumberInput } from '../create-calculation'
 import { CreateProductForm } from '../create-form/product-create.types'
 
 export function useProductDeliveryForm() {
diff --git a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
index 0a498a46..b0eaec4e 100644
--- a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
@@ -1,6 +1,6 @@
 import { useFormContext } from 'react-hook-form'
 
-import { useNumberInput } from '../create-calculation/create-form-number-input.hook'
+import { useNumberInput } from '../create-calculation'
 import { CreateProductForm } from '../create-form/product-create.types'
 
 export function useProductInfoForm() {
diff --git a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
index ccc64a75..50f33f52 100644
--- a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
@@ -4,9 +4,8 @@ import { ProductOptionFormInput } from '@/entity/products/create/create-form/pro
 import { SUB_CATEGORY_MAP } from '@/entity/products/create/create-options/product-options.constant'
 
 import { productOptionSchema } from './create-options.schema'
-import { useFloatInput } from '../create-calculation/create-form-float-input.hook'
-import { useNumberInput } from '../create-calculation/create-form-number-input.hook'
-import { CreateProductForm } from '../create-form/product-create.types'
+import { useFloatInput, useNumberInput } from '../create-calculation'
+import { CreateProductForm } from '../create-form'
 
 export function useProductOptionForm(basePrice: number | null = null) {
   const form = useFormContext<CreateProductForm>()

From 729821a0532c2a3dede06e2ed292f91da142fecf Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Wed, 22 Apr 2026 14:51:28 +0900
Subject: [PATCH 14/56] =?UTF-8?q?[seller]=20feat(173):=20=EC=83=81?=
 =?UTF-8?q?=ED=92=88=20=EA=B0=80=EA=B2=A9=20=EC=9E=90=EB=8F=99=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-info/use-product-info-form.hook.ts   |  4 ++++
 .../create-form-options-area.ui.tsx                  | 12 +++++-------
 .../create/create-form/create-form-provider.ui.tsx   |  5 +++++
 .../create/create-form/create-form-steps.context.ts  |  3 +++
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
index b0eaec4e..427ceed7 100644
--- a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
@@ -1,10 +1,12 @@
 import { useFormContext } from 'react-hook-form'
 
 import { useNumberInput } from '../create-calculation'
+import { useCreateFormSteps } from '../create-form'
 import { CreateProductForm } from '../create-form/product-create.types'
 
 export function useProductInfoForm() {
   const form = useFormContext<CreateProductForm>()
+  const { setProductPrice } = useCreateFormSteps()
 
   // 실시간으로 가격/할인 최종 금액 계산
   const productName = form.watch('productName')
@@ -30,6 +32,8 @@ export function useProductInfoForm() {
   const priceInput = useNumberInput(price, (val) => {
     form.setValue('price', val, { shouldValidate: true })
     if (discountAmount !== null) form.trigger('discountAmount')
+    //상품 옵션 정보의 가격에 사용될 값을 전역 상태에 업데이트
+    setProductPrice(val || 0)
   })
   const discountInput = useNumberInput(discountAmount, (val) => {
     form.setValue('discountAmount', val, { shouldValidate: true })
diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
index 3fe429f3..035545bd 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
@@ -9,8 +9,8 @@ import { MAIN_CATEGORY_OPTIONS } from '@/entity/products/create/create-options/p
 import DaySelector from '@/shared/block/day-selector/day-selector'
 
 import { useProductOptionForm } from './use-product-options.form.hook'
+import { useCreateFormSteps } from '../create-form'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductOptionsArea = () => {
   const {
@@ -37,14 +37,15 @@ export const ProductOptionsArea = () => {
     formState: { errors },
   } = form
 
-  const { setProductFields, setNutritionData } = useCreateFormSteps()
+  const { setProductFields, setNutritionData, productPrice } =
+    useCreateFormSteps()
 
   useEffect(() => {
     setProductFields((prev) => ({ ...prev, productOptions: isFormField }))
   }, [isFormField, setProductFields])
 
   useEffect(() => {
-    // 💡 값이 실제로 바뀔 때만 실행되도록 안에서 변환
+    // 값이 실제로 바뀔 때만 실행되도록 안에서 변환
     const sugar = Number(nutritionInputs.sugar?.displayValue || 0)
     const protein = Number(nutritionInputs.protein?.displayValue || 0)
     const fat = Number(nutritionInputs.fat?.displayValue || 0)
@@ -55,9 +56,6 @@ export const ProductOptionsArea = () => {
       fat,
       ingredientCategories,
     })
-
-    // 💡 의존성 배열에 객체(nutritionInputs) 대신
-    // 실제 변화를 감지할 '원시 값'들을 넣습니다.
   }, [
     nutritionInputs.sugar?.displayValue,
     nutritionInputs.protein?.displayValue,
@@ -171,7 +169,7 @@ export const ProductOptionsArea = () => {
               labelClassName="typo-title-16-r"
               placeholder="0~100,000"
               className="flex-1"
-              // value={toLocaleString('ko-KR') ?? ''}
+              value={productPrice ? productPrice.toLocaleString('ko-KR') : ''}
               disabled
             />
             <span className="relative top-11">원</span>
diff --git a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
index 15814266..16da7fa2 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
@@ -112,6 +112,9 @@ export const FormStepsProvider = ({
     }
   }, [nutritionData])
 
+  //상품 정보, 상품 옵션 정보에서 공유하는 가격
+  const [productPrice, setProductPrice] = useState<number | null>(null)
+
   return (
     <FormStepsContext.Provider
       value={{
@@ -126,6 +129,8 @@ export const FormStepsProvider = ({
         nutritionData,
         setNutritionData,
         activeTags,
+        productPrice,
+        setProductPrice,
       }}
     >
       {children}
diff --git a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
index 69eb7f47..a2d59d18 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
@@ -28,6 +28,9 @@ interface FormStepsContextType {
   nutritionData: NutritionData
   setNutritionData: React.Dispatch<React.SetStateAction<NutritionData>>
   activeTags: ActiveTags
+
+  productPrice: number | null
+  setProductPrice: React.Dispatch<React.SetStateAction<number | null>>
 }
 
 export const FormStepsContext = createContext<FormStepsContextType | null>(null)

From 61d93db682a9e29b8d78fa8711eb24abc8079243 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Wed, 22 Apr 2026 15:48:33 +0900
Subject: [PATCH 15/56] =?UTF-8?q?[seller]=20feat(173):=20=EC=B5=9C?=
 =?UTF-8?q?=EC=A2=85=20=EC=83=81=ED=92=88=20=EA=B0=80=EA=B2=A9=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-info-area.ui.tsx              | 24 ++++----------
 .../create-form-options-area.ui.tsx           | 15 ++++-----
 .../use-product-options.form.hook.ts          |  8 +++--
 .../products/create/create-form/index.ts      |  1 +
 .../create-form/product-final-price.ui.tsx    | 31 +++++++++++++++++++
 5 files changed, 49 insertions(+), 30 deletions(-)
 create mode 100644 apps/seller/src/features/products/create/create-form/product-final-price.ui.tsx

diff --git a/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx b/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
index 90635722..bdee3d8f 100644
--- a/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
@@ -7,7 +7,7 @@ import { ProductDiscountType } from '@/entity/products/create/create-info/produc
 import { productionTimes } from '@/entity/products/create/create-info/production-time.constants'
 
 import { useProductInfoForm } from './use-product-info-form.hook'
-import { InfoTooltip } from '../create-form/info-tooltip.ui'
+import { InfoTooltip, ProductFinalPrice } from '../create-form'
 import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductInfoArea = () => {
@@ -161,23 +161,11 @@ export const ProductInfoArea = () => {
         </div>
       </div>
       {finalPrice !== null && (
-        <div className="mt-32 flex w-full items-center justify-between rounded-10 bg-primary-50 px-24 py-10">
-          <p className="typo-heading-18-b">최종 상품 금액</p>
-
-          <div className="flex items-center gap-8">
-            {price !== null && (
-              <p className="typo-heading-18-r text-gray-600 line-through">
-                {price.toLocaleString('ko-KR')}
-              </p>
-            )}
-            <p className="flex items-center gap-4 typo-heading-18-r text-primary-500">
-              <span className="typo-heading-24-sb">
-                {finalPrice.toLocaleString('ko-KR')}
-              </span>
-              원
-            </p>
-          </div>
-        </div>
+        <ProductFinalPrice
+          title="최종 상품 금액"
+          price={price}
+          finalPrice={finalPrice}
+        />
       )}
     </>
   )
diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
index 035545bd..6e859679 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
@@ -9,7 +9,7 @@ import { MAIN_CATEGORY_OPTIONS } from '@/entity/products/create/create-options/p
 import DaySelector from '@/shared/block/day-selector/day-selector'
 
 import { useProductOptionForm } from './use-product-options.form.hook'
-import { useCreateFormSteps } from '../create-form'
+import { ProductFinalPrice, useCreateFormSteps } from '../create-form'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
 
 export const ProductOptionsArea = () => {
@@ -189,14 +189,11 @@ export const ProductOptionsArea = () => {
           </div>
         </div>
         {totalPrice !== null && (
-          <div className="mt-8 flex justify-end">
-            <p className="typo-title-16-r text-gray-600">
-              최종 가격:
-              <span className="typo-heading-18-b text-gray-900">
-                {totalPrice.toLocaleString('ko-KR')}원
-              </span>
-            </p>
-          </div>
+          <ProductFinalPrice
+            title="최종 상품 옵션 금액"
+            price={productPrice}
+            finalPrice={totalPrice}
+          />
         )}
       </div>
 
diff --git a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
index 50f33f52..3fd67cdc 100644
--- a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
@@ -5,9 +5,11 @@ import { SUB_CATEGORY_MAP } from '@/entity/products/create/create-options/produc
 
 import { productOptionSchema } from './create-options.schema'
 import { useFloatInput, useNumberInput } from '../create-calculation'
-import { CreateProductForm } from '../create-form'
+import { CreateProductForm, useCreateFormSteps } from '../create-form'
 
 export function useProductOptionForm(basePrice: number | null = null) {
+  const { productPrice } = useCreateFormSteps()
+
   const form = useFormContext<CreateProductForm>()
 
   const mainCategory = form.watch('mainCategory')
@@ -37,8 +39,8 @@ export function useProductOptionForm(basePrice: number | null = null) {
       : []
 
   const totalPrice =
-    basePrice !== null && additionalPrice !== null
-      ? basePrice + additionalPrice
+    productPrice !== null && additionalPrice !== null
+      ? productPrice + additionalPrice
       : null
 
   const handleMainCategoryChange = (val: string) => {
diff --git a/apps/seller/src/features/products/create/create-form/index.ts b/apps/seller/src/features/products/create/create-form/index.ts
index 739d5120..78942b38 100644
--- a/apps/seller/src/features/products/create/create-form/index.ts
+++ b/apps/seller/src/features/products/create/create-form/index.ts
@@ -3,4 +3,5 @@ export { CreateFormContainer } from './create-form-container.ui'
 export { InfoTooltip } from './info-tooltip.ui'
 export { useCreateFormSteps } from './use-create-form-steps.hook'
 export { useCreateProductForm } from './use-create-product-form.hook'
+export { ProductFinalPrice } from './product-final-price.ui'
 export * from './product-create.types'
diff --git a/apps/seller/src/features/products/create/create-form/product-final-price.ui.tsx b/apps/seller/src/features/products/create/create-form/product-final-price.ui.tsx
new file mode 100644
index 00000000..9f674e72
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form/product-final-price.ui.tsx
@@ -0,0 +1,31 @@
+interface ProductFinalPriceProps {
+  title: string
+  price: number | null
+  finalPrice: number
+}
+
+export const ProductFinalPrice = ({
+  title,
+  price,
+  finalPrice,
+}: ProductFinalPriceProps) => {
+  return (
+    <div className="mt-32 flex w-full items-center justify-between rounded-10 bg-primary-50 px-24 py-10">
+      <p className="typo-heading-18-b">{title}</p>
+
+      <div className="flex items-center gap-8">
+        {price !== null && (
+          <p className="typo-heading-18-r text-gray-600 line-through">
+            {price?.toLocaleString('ko-KR')}
+          </p>
+        )}
+        <p className="flex items-center gap-4 typo-heading-18-r text-primary-500">
+          <span className="typo-heading-24-sb">
+            {finalPrice.toLocaleString('ko-KR')}
+          </span>
+          원
+        </p>
+      </div>
+    </div>
+  )
+}

From ab9ffb00112dd82d897ac739c5308aef6d861e2c Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Wed, 22 Apr 2026 16:27:09 +0900
Subject: [PATCH 16/56] =?UTF-8?q?[seller]=20feat(173):=20footer=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/create-footer/create-footer.ui.tsx | 11 ++++++++++
 .../products/create/create-footer/index.ts    |  1 +
 .../src/features/products/create/index.ts     |  1 +
 .../src/pages/products/create/create-page.tsx | 20 +++----------------
 .../block/fixed-layout/fixed-layout.tsx       |  2 +-
 5 files changed, 17 insertions(+), 18 deletions(-)
 create mode 100644 apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
 create mode 100644 apps/seller/src/features/products/create/create-footer/index.ts

diff --git a/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx b/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
new file mode 100644
index 00000000..6749e637
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
@@ -0,0 +1,11 @@
+import { Button } from '@dessert/ui'
+
+export const ProductFooter = () => {
+  return (
+    <div className="sticky bottom-0 left-0 z-20 -mb-36 -ml-[90px] flex w-[calc(100%+180px)] justify-end gap-12 border-t border-t-gray-200 bg-white px-[90px] py-24">
+      <Button title="미리보기" variant="primary-outlined" size="lg" />
+      <Button title="임시저장" variant="primary-outlined" size="lg" />
+      <Button title="저장하기" variant="primary-filled" size="lg" />
+    </div>
+  )
+}
diff --git a/apps/seller/src/features/products/create/create-footer/index.ts b/apps/seller/src/features/products/create/create-footer/index.ts
new file mode 100644
index 00000000..3fb03d6f
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-footer/index.ts
@@ -0,0 +1 @@
+export { ProductFooter } from './create-footer.ui'
diff --git a/apps/seller/src/features/products/create/index.ts b/apps/seller/src/features/products/create/index.ts
index 263cd594..99fd2667 100644
--- a/apps/seller/src/features/products/create/index.ts
+++ b/apps/seller/src/features/products/create/index.ts
@@ -6,3 +6,4 @@ export * from './create-form-info'
 export * from './create-form-options'
 export * from './create-header'
 export * from './create-form-thumbnail-upload'
+export * from './create-footer'
diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index 4a701c61..e2cff94b 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -9,6 +9,7 @@ import {
   ProductDeliveryArea,
   ProductDetailArea,
   ProductDisclosureArea,
+  ProductFooter,
   ProductHeader,
   ProductInfoArea,
   ProductOptionsArea,
@@ -101,25 +102,10 @@ function CreatePageInner() {
         <ProductDetailArea />
       </CreateFormContainer>
 
-      <CreateFormContainer id="productDisclosure">
+      <CreateFormContainer id="productDisclosure" className="mb-40">
         <ProductDisclosureArea />
       </CreateFormContainer>
-
-      <div className="mt-40 flex gap-12">
-        <Button
-          title="미리보기"
-          variant="primary-outlined"
-          size="lg"
-          disabled
-        />
-        <Button
-          title="임시저장"
-          variant="primary-outlined"
-          size="lg"
-          disabled
-        />
-        <Button title="저장하기" variant="primary-filled" size="lg" disabled />
-      </div>
+      <ProductFooter />
     </>
   )
 }
diff --git a/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx b/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx
index 0712c5b4..58bb51f3 100644
--- a/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx
+++ b/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx
@@ -16,7 +16,7 @@ const FixedLayout = () => {
           </ScrollArea>
         </main> */}
         <main className="h-full max-w-[calc(100vw-240px)] overflow-y-auto bg-gray-50">
-          <div className="relative px-[90px] py-40">
+          <div className="relative px-[90px] pt-40 pb-36">
             <Outlet />
           </div>
         </main>

From 5d4d9248ed501a032ce8c87e424723aacd637f4d Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Fri, 24 Apr 2026 16:22:28 +0900
Subject: [PATCH 17/56] =?UTF-8?q?[seller]=20feat(173):=20=EC=83=81?=
 =?UTF-8?q?=ED=92=88=20=EC=98=B5=EC=85=98=20=EC=A0=95=EB=B3=B4=20=ED=8F=BC?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=B3=B5=EC=82=AC/=EC=B6=94=EA=B0=80/?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/create-form/product-form.type.ts   |   2 +-
 .../create-form-number-input.hook.ts          |  13 +-
 .../create-form-options-area.ui.tsx           | 310 ++----------------
 .../create-form-options-form.ui.tsx           | 304 +++++++++++++++++
 .../create-options.schema.ts                  |  11 +-
 .../create/create-form-options/index.ts       |   2 +-
 .../use-product-options.form.hook.ts          |  93 +++---
 .../create-form/product-create.types.ts       |  12 +-
 .../use-create-product-form.hook.ts           |  38 ++-
 .../create/utils/create-form-api-request.ts   |  74 +++++
 .../src/pages/products/create/create-page.tsx |   1 -
 .../block/fixed-layout/fixed-layout.tsx       |   2 +-
 12 files changed, 506 insertions(+), 356 deletions(-)
 create mode 100644 apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
 create mode 100644 apps/seller/src/features/products/create/utils/create-form-api-request.ts

diff --git a/apps/seller/src/entity/products/create/create-form/product-form.type.ts b/apps/seller/src/entity/products/create/create-form/product-form.type.ts
index ace66d6c..a680cc08 100644
--- a/apps/seller/src/entity/products/create/create-form/product-form.type.ts
+++ b/apps/seller/src/entity/products/create/create-form/product-form.type.ts
@@ -22,7 +22,7 @@ export type ThumbnailFormInput = {
 }
 
 export type ProductOptionFormInput = {
-  mainCategory: string
+  mainCategory: 'bread' | 'snack' | ''
   subCategory: string
   optionName: string
   ingredientCategories: ('glutenFree' | 'vegan')[]
diff --git a/apps/seller/src/features/products/create/create-calculation/create-form-number-input.hook.ts b/apps/seller/src/features/products/create/create-calculation/create-form-number-input.hook.ts
index f7bf576f..5e3558f6 100644
--- a/apps/seller/src/features/products/create/create-calculation/create-form-number-input.hook.ts
+++ b/apps/seller/src/features/products/create/create-calculation/create-form-number-input.hook.ts
@@ -1,18 +1,24 @@
 import { useEffect, useState } from 'react'
 
 export function useNumberInput(
-  value: number | null,
+  value: number | null | undefined, // undefined 추가
   onChange: (value: number | null) => void,
   options?: { allowNegative?: boolean },
 ) {
   const { allowNegative = false } = options ?? {}
 
+  // 💡 undefined 체크 추가하여 에러 방지
   const [displayValue, setDisplayValue] = useState(
-    value !== null ? value.toLocaleString('ko-KR') : '',
+    value !== null && value !== undefined ? value.toLocaleString('ko-KR') : '',
   )
 
   useEffect(() => {
-    setDisplayValue(value !== null ? value.toLocaleString('ko-KR') : '')
+    // 💡 undefined 체크 추가하여 에러 방지
+    setDisplayValue(
+      value !== null && value !== undefined
+        ? value.toLocaleString('ko-KR')
+        : '',
+    )
   }, [value])
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -22,7 +28,6 @@ export function useNumberInput(
       ? raw.replace(/[^0-9-]/g, '').replace(/(?!^)-/g, '')
       : raw.replace(/[^0-9]/g, '')
 
-    // '-' 만 입력된 중간 상태는 표시만 유지, onChange는 호출 안 함
     if (cleaned === '-') {
       setDisplayValue('-')
       return
diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
index 6e859679..941ebc79 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
@@ -2,75 +2,25 @@ import { useEffect } from 'react'
 
 import { Button, Checkbox, Input, Label, Select, Switch } from '@dessert/ui'
 import { Copy, Trash2 } from 'lucide-react'
-import { Controller } from 'react-hook-form'
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form'
 
+import { ProductOptionFormInput } from '@/entity/products'
 import { NUTRITION_FIELDS } from '@/entity/products/create/create-options/product-nutritions.constant'
 import { MAIN_CATEGORY_OPTIONS } from '@/entity/products/create/create-options/product-options.constant'
 import DaySelector from '@/shared/block/day-selector/day-selector'
 
 import { useProductOptionForm } from './use-product-options.form.hook'
-import { ProductFinalPrice, useCreateFormSteps } from '../create-form'
+import { CreateProductForm, useCreateFormSteps } from '../create-form'
+import { ProductOptionForm } from './create-form-options-form.ui'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
+import { DEFAULT_PRODUCT_OPTION } from '../create-form/use-create-product-form.hook'
 
 export const ProductOptionsArea = () => {
-  const {
-    form,
-    mainCategory,
-    subCategoryOptions,
-    additionalPrice,
-    shippingDays,
-    hasNutrition,
-    ingredientCategories,
-    totalPrice,
-    isFormField,
-    handleMainCategoryChange,
-    toggleIngredient,
-    additionalPriceInput,
-    stockInput,
-    nutritionInputs,
-    toggleShippingDay,
-  } = useProductOptionForm()
-
-  const {
-    control,
-    register,
-    formState: { errors },
-  } = form
-
-  const { setProductFields, setNutritionData, productPrice } =
-    useCreateFormSteps()
-
-  useEffect(() => {
-    setProductFields((prev) => ({ ...prev, productOptions: isFormField }))
-  }, [isFormField, setProductFields])
-
-  useEffect(() => {
-    // 값이 실제로 바뀔 때만 실행되도록 안에서 변환
-    const sugar = Number(nutritionInputs.sugar?.displayValue || 0)
-    const protein = Number(nutritionInputs.protein?.displayValue || 0)
-    const fat = Number(nutritionInputs.fat?.displayValue || 0)
-
-    setNutritionData({
-      sugar,
-      protein,
-      fat,
-      ingredientCategories,
-    })
-  }, [
-    nutritionInputs.sugar?.displayValue,
-    nutritionInputs.protein?.displayValue,
-    nutritionInputs.fat?.displayValue,
-    JSON.stringify(ingredientCategories), // 배열은 문자열화해서 비교
-    setNutritionData,
-  ])
-
-  const handleDelete = () => {
-    //삭제 기능
-  }
-
-  const handleCopy = () => {
-    //복사 기능
-  }
+  const form = useFormContext<CreateProductForm>()
+  const { fields, append, remove, insert } = useFieldArray({
+    control: form.control,
+    name: 'options',
+  })
 
   return (
     <>
@@ -80,230 +30,24 @@ export const ProductOptionsArea = () => {
           className="typo-heading-20-sb text-gray-900"
         />
       </div>
-
-      {/* 카테고리 */}
-      <div className="grid grid-cols-2 items-end gap-32">
-        <Controller
-          control={control}
-          name="mainCategory"
-          render={({ field }) => (
-            <Select
-              options={MAIN_CATEGORY_OPTIONS}
-              label="상품 카테고리"
-              required
-              placeholder="대분류"
-              labelClassName="typo-heading-18-r mb-8"
-              value={field.value}
-              onValueChange={(val) => handleMainCategoryChange(val)}
-              error={!!errors.mainCategory}
-              errorMessage={errors.mainCategory?.message}
-            />
-          )}
-        />
-        <Controller
-          control={control}
-          name="subCategory"
-          render={({ field }) => (
-            <Select
-              options={subCategoryOptions}
-              placeholder="중분류"
-              labelClassName="typo-heading-18-r mb-8"
-              className="self-auto"
-              value={field.value}
-              onValueChange={field.onChange}
-              disabled={!mainCategory}
-              error={!!errors.subCategory}
-              errorMessage={errors.subCategory?.message}
-            />
-          )}
-        />
-      </div>
-
-      {/* 옵션명 + 성분 카테고리 */}
-      <div className="grid grid-cols-2 gap-32 pt-32">
-        <Input
-          label="상품 옵션명"
-          required
-          placeholder="상품 옵션명을 3~50자 미만으로 입력해주세요"
-          className="gap-8"
-          labelClassName="typo-heading-18-r"
-          error={!!errors.optionName}
-          errorMessage={errors.optionName?.message}
-          style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}
-          {...register('optionName')}
-        />
-        <div>
-          <Label
-            label="성분 카테고리"
-            required
-            className="mb-3.5 block typo-heading-18-r"
-          />
-          {errors.ingredientCategories && (
-            <p className="mb-4 text-sm text-red-500">
-              {errors.ingredientCategories.message}
-            </p>
-          )}
-          <div className="flex gap-10">
-            <Checkbox
-              label="글루텐 프리"
-              type="single"
-              checked={ingredientCategories.includes('glutenFree')}
-              onCheckedChange={() => toggleIngredient('glutenFree')}
-            />
-            <Checkbox
-              label="비건"
-              type="single"
-              checked={ingredientCategories.includes('vegan')}
-              onCheckedChange={() => toggleIngredient('vegan')}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="pt-32">
-        <Label label="상품 옵션 가격" required className="typo-heading-18-r" />
-        <div className="mt-8 flex gap-16 rounded-10 border border-gray-300 p-16">
-          <div className="flex w-full gap-8">
-            <Input
-              label="상품 가격"
-              labelClassName="typo-title-16-r"
-              placeholder="0~100,000"
-              className="flex-1"
-              value={productPrice ? productPrice.toLocaleString('ko-KR') : ''}
-              disabled
-            />
-            <span className="relative top-11">원</span>
-          </div>
-          <div className="flex w-full gap-8">
-            <Input
-              label="추가 가격"
-              labelClassName="typo-title-16-r"
-              placeholder="-100,000~100,000"
-              className="flex-1"
-              value={additionalPriceInput.displayValue}
-              onChange={additionalPriceInput.handleChange}
-              error={!!errors.additionalPrice && additionalPrice !== null}
-              errorMessage={errors.additionalPrice?.message}
-            />
-            <span className="relative top-11">원</span>
-          </div>
-        </div>
-        {totalPrice !== null && (
-          <ProductFinalPrice
-            title="최종 상품 옵션 금액"
-            price={productPrice}
-            finalPrice={totalPrice}
+      {fields.map((field, index) => (
+        <>
+          <ProductOptionForm
+            key={field.id}
+            index={index}
+            isLast={index === fields.length - 1}
+            onDelete={() => fields.length > 1 && remove(index)}
+            onCopy={() => {
+              const current = form.getValues(`options.${index}`)
+              insert(index + 1, {
+                ...current,
+                optionName: `${current.optionName} (복사본)`,
+              })
+            }}
+            onAdd={() => insert(index + 1, DEFAULT_PRODUCT_OPTION)}
           />
-        )}
-      </div>
-
-      {/* 재고 수량 + 발송 요일 */}
-      <div className="grid grid-cols-2 gap-32 pt-32">
-        <div>
-          <Label label="재고 수량" required className="typo-heading-18-r" />
-          <p className="mt-2 mb-8 typo-title-16-r text-gray-600">
-            주문 제작 상품인 경우 재고를 1000개 이상으로 설정해주세요.
-          </p>
-          <Input
-            placeholder="재고 수량을 입력하세요"
-            className="flex-1"
-            value={stockInput.displayValue}
-            onChange={stockInput.handleChange}
-          />
-        </div>
-        <div>
-          <Label
-            label="상품 발송 요일"
-            required
-            className="typo-heading-18-r"
-          />
-          <p className="mt-2 mb-8 typo-title-16-r text-gray-600">
-            정해진 발송 요일이 있다면 선택하세요.
-          </p>
-          <DaySelector
-            selectedDays={shippingDays}
-            onDayChange={toggleShippingDay}
-          />
-        </div>
-      </div>
-
-      {/* 영양 정보 */}
-      <div className="flex items-center gap-12 pt-32">
-        <div className="flex items-center gap-2">
-          <Label
-            label="영양 정보"
-            required
-            className="typo-heading-18-r text-gray-900"
-          />
-          <InfoTooltip iconSize={20}>
-            아래 기준에 해당하면 상단 성분 카테고리가 자동으로 등록돼요.
-            <ul className="list-disc pl-16">
-              <li>저당: 100g당 5g 미만 / 100ml당 2.5g 미만</li>
-              <li>고단백: 100g당 11g 이상</li>
-              <li>저지방: 100g당 3g 미만 / 100ml당 1.5g 미만</li>
-            </ul>
-          </InfoTooltip>
-        </div>
-        <Controller
-          control={control}
-          name="hasNutrition"
-          render={({ field }) => (
-            <Switch
-              checked={field.value}
-              onCheckedChange={(checked: boolean) => {
-                field.onChange(checked)
-                NUTRITION_FIELDS.forEach(({ key }) => {
-                  const inputProps =
-                    nutritionInputs[key as keyof typeof nutritionInputs]
-                  inputProps.handleNull()
-                })
-              }}
-            />
-          )}
-        />
-      </div>
-
-      <div className="mt-8 grid grid-cols-7 gap-8">
-        {NUTRITION_FIELDS.map(({ key, label }) => {
-          const inputProps =
-            nutritionInputs[key as keyof typeof nutritionInputs]
-          return (
-            <div
-              key={key}
-              className="flex flex-col items-center gap-8 rounded-10 border border-gray-300 bg-gray-50 p-20"
-            >
-              <p>{label}</p>
-              <Input
-                placeholder="0"
-                className="text-center"
-                disabled={!hasNutrition}
-                value={inputProps.displayValue}
-                onChange={inputProps.handleChange}
-              />
-            </div>
-          )
-        })}
-      </div>
-      <p className="mt-4 typo-title-16-r text-gray-600">
-        영양 성분은 1회 제공량 기준으로 작성하세요.
-      </p>
-
-      {/* 삭제 / 복사 */}
-      <div className="flex items-center justify-end gap-16">
-        <button className="text-gray-700" onClick={handleDelete}>
-          <Trash2 size={20} />
-        </button>
-        <button className="text-gray-700" onClick={handleCopy}>
-          <Copy size={20} />
-        </button>
-      </div>
-
-      <Button
-        title="상품 추가"
-        variant="primary-outlined"
-        size="lg"
-        className="mt-32 w-full"
-      />
+        </>
+      ))}
     </>
   )
 }
diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
new file mode 100644
index 00000000..b016c1f8
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
@@ -0,0 +1,304 @@
+import { useEffect } from 'react'
+
+import { Button, Checkbox, Input, Label, Select, Switch } from '@dessert/ui'
+import { Copy, Trash2 } from 'lucide-react'
+import { Controller } from 'react-hook-form'
+
+import { NUTRITION_FIELDS } from '@/entity/products/create/create-options/product-nutritions.constant'
+import { MAIN_CATEGORY_OPTIONS } from '@/entity/products/create/create-options/product-options.constant'
+import DaySelector from '@/shared/block/day-selector/day-selector'
+
+import { useProductOptionForm } from './use-product-options.form.hook'
+import { useCreateFormSteps } from '../create-form'
+import { InfoTooltip } from '../create-form/info-tooltip.ui'
+
+interface Props {
+  index: number
+  isLast: boolean
+  onDelete: () => void
+  onCopy: () => void
+  onAdd: () => void
+}
+
+export const ProductOptionForm = ({
+  index,
+  isLast,
+  onDelete,
+  onCopy,
+  onAdd,
+}: Props) => {
+  const {
+    form,
+    mainCategory,
+    subCategoryOptions,
+    additionalPrice,
+    shippingDays,
+    hasNutrition,
+    ingredientCategories,
+    totalPrice,
+    isFormField,
+    errors,
+    handleMainCategoryChange,
+    toggleIngredient,
+    additionalPriceInput,
+    stockInput,
+    nutritionInputs,
+    toggleShippingDay,
+  } = useProductOptionForm(index)
+
+  const { control, register } = form
+  const { setProductFields, setNutritionData } = useCreateFormSteps()
+
+  useEffect(() => {
+    setProductFields((prev) => ({ ...prev, productOptions: isFormField }))
+  }, [isFormField, setProductFields])
+
+  useEffect(() => {
+    const sugar = Number(nutritionInputs.sugar?.displayValue || 0)
+    const protein = Number(nutritionInputs.protein?.displayValue || 0)
+    const fat = Number(nutritionInputs.fat?.displayValue || 0)
+    setNutritionData({ sugar, protein, fat, ingredientCategories })
+  }, [
+    nutritionInputs.sugar?.displayValue,
+    nutritionInputs.protein?.displayValue,
+    nutritionInputs.fat?.displayValue,
+    JSON.stringify(ingredientCategories),
+    setNutritionData,
+  ])
+
+  return (
+    <>
+      {index > 0 && <div className="my-32 h-px w-full bg-gray-300" />}
+
+      {/* 카테고리 */}
+      <div className="grid grid-cols-2 items-end gap-32">
+        <Controller
+          control={control}
+          name={`options.${index}.mainCategory`}
+          render={({ field }) => (
+            <Select
+              options={MAIN_CATEGORY_OPTIONS}
+              label="상품 카테고리"
+              required
+              placeholder="대분류"
+              labelClassName="typo-heading-18-r mb-8"
+              value={field.value}
+              onValueChange={(val) => handleMainCategoryChange(val)}
+              error={!!errors?.mainCategory}
+              errorMessage={errors?.mainCategory?.message}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name={`options.${index}.subCategory`}
+          render={({ field }) => (
+            <Select
+              options={subCategoryOptions}
+              placeholder="중분류"
+              labelClassName="typo-heading-18-r mb-8"
+              className="self-auto"
+              value={field.value}
+              onValueChange={field.onChange}
+              disabled={!mainCategory}
+              error={!!errors?.subCategory}
+              errorMessage={errors?.subCategory?.message}
+            />
+          )}
+        />
+      </div>
+
+      {/* 옵션명 + 성분 카테고리 */}
+      <div className="grid grid-cols-2 gap-32 pt-32">
+        <Input
+          label="상품 옵션명"
+          required
+          placeholder="상품 옵션명을 3~50자 미만으로 입력해주세요"
+          className="gap-8"
+          labelClassName="typo-heading-18-r"
+          error={!!errors?.optionName}
+          errorMessage={errors?.optionName?.message}
+          style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}
+          {...register(`options.${index}.optionName`)}
+        />
+        <div>
+          <Label
+            label="성분 카테고리"
+            required
+            className="mb-3.5 block typo-heading-18-r"
+          />
+          {errors?.ingredientCategories && (
+            <p className="mb-4 text-sm text-red-500">
+              {errors.ingredientCategories.message}
+            </p>
+          )}
+          <div className="flex gap-10">
+            <Checkbox
+              label="글루텐 프리"
+              type="single"
+              checked={ingredientCategories.includes('glutenFree')}
+              onCheckedChange={() => toggleIngredient('glutenFree')}
+            />
+            <Checkbox
+              label="비건"
+              type="single"
+              checked={ingredientCategories.includes('vegan')}
+              onCheckedChange={() => toggleIngredient('vegan')}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* 가격 */}
+      <div className="pt-32">
+        <Label label="상품 옵션 가격" required className="typo-heading-18-r" />
+        <div className="mt-8 flex gap-16 rounded-10 border border-gray-300 p-16">
+          <div className="flex w-full gap-8">
+            <Input
+              label="상품 가격"
+              labelClassName="typo-title-16-r"
+              placeholder="0~100,000"
+              className="flex-1"
+              disabled
+            />
+            <span className="relative top-11">원</span>
+          </div>
+          <div className="flex w-full gap-8">
+            <Input
+              label="추가 가격"
+              labelClassName="typo-title-16-r"
+              placeholder="-100,000~100,000"
+              className="flex-1"
+              value={additionalPriceInput.displayValue}
+              onChange={additionalPriceInput.handleChange}
+              error={!!errors?.additionalPrice && additionalPrice !== null}
+              errorMessage={errors?.additionalPrice?.message}
+            />
+            <span className="relative top-11">원</span>
+          </div>
+        </div>
+        {totalPrice !== null && (
+          <div className="mt-8 flex justify-end">
+            <p className="typo-title-16-r text-gray-600">
+              최종 가격:
+              <span className="typo-heading-18-b text-gray-900">
+                {totalPrice.toLocaleString('ko-KR')}원
+              </span>
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* 재고 수량 + 발송 요일 */}
+      <div className="grid grid-cols-2 gap-32 pt-32">
+        <div>
+          <Label label="재고 수량" required className="typo-heading-18-r" />
+          <p className="mt-2 mb-8 typo-title-16-r text-gray-600">
+            주문 제작 상품인 경우 재고를 1000개 이상으로 설정해주세요.
+          </p>
+          <Input
+            placeholder="재고 수량을 입력하세요"
+            className="flex-1"
+            value={stockInput.displayValue}
+            onChange={stockInput.handleChange}
+          />
+        </div>
+        <div>
+          <Label
+            label="상품 발송 요일"
+            required
+            className="typo-heading-18-r"
+          />
+          <p className="mt-2 mb-8 typo-title-16-r text-gray-600">
+            정해진 발송 요일이 있다면 선택하세요.
+          </p>
+          <DaySelector
+            selectedDays={shippingDays}
+            onDayChange={toggleShippingDay}
+          />
+        </div>
+      </div>
+
+      {/* 영양 정보 */}
+      <div className="flex items-center gap-12 pt-32">
+        <div className="flex items-center gap-2">
+          <Label
+            label="영양 정보"
+            required
+            className="typo-heading-18-r text-gray-900"
+          />
+          <InfoTooltip iconSize={20}>
+            아래 기준에 해당하면 상단 성분 카테고리가 자동으로 등록돼요.
+            <ul className="list-disc pl-16">
+              <li>저당: 100g당 5g 미만 / 100ml당 2.5g 미만</li>
+              <li>고단백: 100g당 11g 이상</li>
+              <li>저지방: 100g당 3g 미만 / 100ml당 1.5g 미만</li>
+            </ul>
+          </InfoTooltip>
+        </div>
+        <Controller
+          control={control}
+          name={`options.${index}.hasNutrition`}
+          render={({ field }) => (
+            <Switch
+              checked={field.value}
+              onCheckedChange={(checked: boolean) => {
+                field.onChange(checked)
+                NUTRITION_FIELDS.forEach(({ key }) => {
+                  const inputProps =
+                    nutritionInputs[key as keyof typeof nutritionInputs]
+                  inputProps.handleNull()
+                })
+              }}
+            />
+          )}
+        />
+      </div>
+
+      <div className="mt-8 grid grid-cols-7 gap-8">
+        {NUTRITION_FIELDS.map(({ key, label }) => {
+          const inputProps =
+            nutritionInputs[key as keyof typeof nutritionInputs]
+          return (
+            <div
+              key={key}
+              className="flex flex-col items-center gap-8 rounded-10 border border-gray-300 bg-gray-50 p-20"
+            >
+              <p>{label}</p>
+              <Input
+                placeholder="0"
+                className="text-center"
+                disabled={!hasNutrition}
+                value={inputProps.displayValue}
+                onChange={inputProps.handleChange}
+              />
+            </div>
+          )
+        })}
+      </div>
+      <p className="mt-4 typo-title-16-r text-gray-600">
+        영양 성분은 1회 제공량 기준으로 작성하세요.
+      </p>
+
+      {/* 삭제 / 복사 */}
+      <div className="flex items-center justify-end gap-16">
+        <button className="text-gray-700" onClick={onDelete}>
+          <Trash2 size={20} />
+        </button>
+        <button className="text-gray-700" onClick={onCopy}>
+          <Copy size={20} />
+        </button>
+      </div>
+
+      {isLast && (
+        <Button
+          title="상품 추가"
+          variant="primary-outlined"
+          size="lg"
+          className="mt-32 w-full"
+          onClick={onAdd}
+        />
+      )}
+    </>
+  )
+}
diff --git a/apps/seller/src/features/products/create/create-form-options/create-options.schema.ts b/apps/seller/src/features/products/create/create-form-options/create-options.schema.ts
index 653b23dd..f5625a20 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-options.schema.ts
+++ b/apps/seller/src/features/products/create/create-form-options/create-options.schema.ts
@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 export const productOptionSchema = z
   .object({
-    mainCategory: z.enum(['bread', 'snack']),
+    mainCategory: z.enum(['bread', 'snack', '']),
     subCategory: z.string(),
     optionName: z.string(),
     ingredientCategories: z.array(z.enum(['glutenFree', 'vegan'])),
@@ -26,6 +26,10 @@ export const productOptionSchema = z
     fat: z.union([z.number().min(0), z.null()]),
     sodium: z.union([z.number().min(0), z.null()]),
   })
+  .refine((data) => data.mainCategory !== '', {
+    message: '카테고리를 선택해주세요',
+    path: ['mainCategory'],
+  })
   .refine(
     (data) =>
       data.optionName === '' ||
@@ -36,3 +40,8 @@ export const productOptionSchema = z
     message: '',
     path: ['additionalPrice'],
   })
+
+export const productOptionsWrapperSchema = z.object({
+  options: z.array(productOptionSchema).min(1, '옵션을 하나 이상 추가해주세요'),
+})
+export type ProductOptionsWrapper = z.infer<typeof productOptionsWrapperSchema>
diff --git a/apps/seller/src/features/products/create/create-form-options/index.ts b/apps/seller/src/features/products/create/create-form-options/index.ts
index c9bf83a8..2d15205d 100644
--- a/apps/seller/src/features/products/create/create-form-options/index.ts
+++ b/apps/seller/src/features/products/create/create-form-options/index.ts
@@ -1,3 +1,3 @@
 export { ProductOptionsArea } from './create-form-options-area.ui'
 export { useProductOptionForm } from './use-product-options.form.hook'
-export { productOptionSchema } from './create-options.schema'
+export * from './create-options.schema'
diff --git a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
index 3fd67cdc..9ec752a0 100644
--- a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
@@ -4,48 +4,51 @@ import { ProductOptionFormInput } from '@/entity/products/create/create-form/pro
 import { SUB_CATEGORY_MAP } from '@/entity/products/create/create-options/product-options.constant'
 
 import { productOptionSchema } from './create-options.schema'
-import { useFloatInput, useNumberInput } from '../create-calculation'
-import { CreateProductForm, useCreateFormSteps } from '../create-form'
-
-export function useProductOptionForm(basePrice: number | null = null) {
-  const { productPrice } = useCreateFormSteps()
-
+import { useFloatInput } from '../create-calculation/create-form-float-input.hook'
+import { useNumberInput } from '../create-calculation/create-form-number-input.hook'
+import { CreateProductForm } from '../create-form/product-create.types'
+
+export function useProductOptionForm(
+  index: number,
+  basePrice: number | null = null,
+) {
   const form = useFormContext<CreateProductForm>()
-
-  const mainCategory = form.watch('mainCategory')
-  const subCategory = form.watch('subCategory')
-  const optionName = form.watch('optionName')
-  const additionalPrice = form.watch('additionalPrice')
-  const stockQuantity = form.watch('stockQuantity')
-  const shippingDays = form.watch('shippingDays')
-  const hasNutrition = form.watch('hasNutrition')
-  const ingredientCategories = form.watch('ingredientCategories')
+  const p = `options.${index}` as const
+  const mainCategory = form.watch(`${p}.mainCategory`)
+  const subCategory = form.watch(`${p}.subCategory`)
+  const optionName = form.watch(`${p}.optionName`)
+  const additionalPrice = form.watch(`${p}.additionalPrice`)
+  const stockQuantity = form.watch(`${p}.stockQuantity`)
+  const shippingDays = form.watch(`${p}.shippingDays`)
+  const hasNutrition = form.watch(`${p}.hasNutrition`)
+  const ingredientCategories = form.watch(`${p}.ingredientCategories`)
   const nutritionValues = form.watch([
-    'totalWeight',
-    'calories',
-    'carbohydrate',
-    'sugar',
-    'protein',
-    'fat',
-    'sodium',
+    `${p}.totalWeight`,
+    `${p}.calories`,
+    `${p}.carbohydrate`,
+    `${p}.sugar`,
+    `${p}.protein`,
+    `${p}.fat`,
+    `${p}.sodium`,
   ])
 
   const [totalWeight, calories, carbohydrate, sugar, protein, fat, sodium] =
     nutritionValues
 
-  const subCategoryOptions =
-    mainCategory !== ''
-      ? (SUB_CATEGORY_MAP[mainCategory as keyof typeof SUB_CATEGORY_MAP] ?? [])
-      : []
+  const subCategoryOptions = mainCategory
+    ? (SUB_CATEGORY_MAP[mainCategory] ?? [])
+    : []
 
   const totalPrice =
-    productPrice !== null && additionalPrice !== null
-      ? productPrice + additionalPrice
+    basePrice !== null && additionalPrice !== null
+      ? basePrice + additionalPrice
       : null
 
   const handleMainCategoryChange = (val: string) => {
-    form.setValue('mainCategory', val, { shouldValidate: true })
-    form.setValue('subCategory', '', { shouldValidate: false })
+    form.setValue(`${p}.mainCategory`, val as 'bread' | 'snack', {
+      shouldValidate: true,
+    })
+    form.setValue(`${p}.subCategory`, '', { shouldValidate: false })
   }
 
   type Day = ProductOptionFormInput['shippingDays'][number]
@@ -55,47 +58,47 @@ export function useProductOptionForm(basePrice: number | null = null) {
       (day): day is Day =>
         productOptionSchema.shape.shippingDays.element.safeParse(day).success,
     )
-    form.setValue('shippingDays', validDays, { shouldValidate: true })
+    form.setValue(`${p}.shippingDays`, validDays, { shouldValidate: true })
   }
 
   const toggleIngredient = (ingredient: 'glutenFree' | 'vegan') => {
     const next = ingredientCategories.includes(ingredient)
       ? ingredientCategories.filter((i) => i !== ingredient)
       : [...ingredientCategories, ingredient]
-    form.setValue('ingredientCategories', next, { shouldValidate: true })
+    form.setValue(`${p}.ingredientCategories`, next, { shouldValidate: true })
   }
 
   const additionalPriceInput = useNumberInput(
     additionalPrice,
     (val) => {
-      form.setValue('additionalPrice', val, { shouldValidate: true })
+      form.setValue(`${p}.additionalPrice`, val, { shouldValidate: true })
     },
     { allowNegative: true },
   )
   const stockInput = useNumberInput(stockQuantity, (val) => {
-    form.setValue('stockQuantity', val, { shouldValidate: true })
+    form.setValue(`${p}.stockQuantity`, val, { shouldValidate: true })
   })
 
   const totalWeightInput = useFloatInput(totalWeight, (val) => {
-    form.setValue('totalWeight', val, { shouldValidate: true })
+    form.setValue(`${p}.totalWeight`, val, { shouldValidate: true })
   })
   const caloriesInput = useFloatInput(calories, (val) => {
-    form.setValue('calories', val, { shouldValidate: true })
+    form.setValue(`${p}.calories`, val, { shouldValidate: true })
   })
   const carbohydrateInput = useFloatInput(carbohydrate, (val) => {
-    form.setValue('carbohydrate', val, { shouldValidate: true })
+    form.setValue(`${p}.carbohydrate`, val, { shouldValidate: true })
   })
   const sugarInput = useFloatInput(sugar, (val) => {
-    form.setValue('sugar', val, { shouldValidate: true })
+    form.setValue(`${p}.sugar`, val, { shouldValidate: true })
   })
   const proteinInput = useFloatInput(protein, (val) => {
-    form.setValue('protein', val, { shouldValidate: true })
+    form.setValue(`${p}.protein`, val, { shouldValidate: true })
   })
   const fatInput = useFloatInput(fat, (val) => {
-    form.setValue('fat', val, { shouldValidate: true })
+    form.setValue(`${p}.fat`, val, { shouldValidate: true })
   })
   const sodiumInput = useFloatInput(sodium, (val) => {
-    form.setValue('sodium', val, { shouldValidate: true })
+    form.setValue(`${p}.sodium`, val, { shouldValidate: true })
   })
 
   const nutritionInputs: Record<
@@ -145,12 +148,11 @@ export function useProductOptionForm(basePrice: number | null = null) {
     'sodium',
   ] as const
 
-  const hasOptionErrors = optionErrorFields.some(
-    (field) => form.formState.errors[field],
-  )
+  const errors = form.formState.errors.options?.[index]
+  const hasOptionErrors = Object.keys(errors ?? {}).length > 0
 
   const isFormField =
-    mainCategory !== '' &&
+    !!mainCategory &&
     subCategory !== '' &&
     optionName.length >= 3 &&
     optionName.length <= 49 &&
@@ -180,5 +182,6 @@ export function useProductOptionForm(basePrice: number | null = null) {
     nutritionInputs,
     additionalPriceInput,
     stockInput,
+    errors,
   }
 }
diff --git a/apps/seller/src/features/products/create/create-form/product-create.types.ts b/apps/seller/src/features/products/create/create-form/product-create.types.ts
index 280efd48..c7e93505 100644
--- a/apps/seller/src/features/products/create/create-form/product-create.types.ts
+++ b/apps/seller/src/features/products/create/create-form/product-create.types.ts
@@ -1,8 +1,9 @@
+import z from 'zod'
+
 import {
   DeliveryFormInput,
   ProductDisclosureFormInput,
   ProductFormInput,
-  ProductOptionFormInput,
   ThumbnailFormInput,
 } from '@/entity/products'
 
@@ -12,14 +13,19 @@ import { productSchema } from '../create-form-info/create-info.schema'
 import { productOptionSchema } from '../create-form-options/create-options.schema'
 import { thumbnailSchema } from '../create-form-thumbnail-upload'
 
+const productOptionsWrapperSchema = z.object({
+  options: z.array(productOptionSchema).min(1),
+})
+type ProductOptionsWrapper = z.infer<typeof productOptionsWrapperSchema>
+
 export type CreateProductForm = ProductFormInput &
   DeliveryFormInput &
-  ProductOptionFormInput &
+  ProductOptionsWrapper &
   ProductDisclosureFormInput &
   ThumbnailFormInput
 
 export const createProductSchema = productSchema
   .and(deliverySchema)
-  .and(productOptionSchema)
+  .and(productOptionsWrapperSchema)
   .and(disclosureSchema)
   .and(thumbnailSchema)
diff --git a/apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts b/apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts
index 3ef9f179..84447b0e 100644
--- a/apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts
@@ -1,10 +1,28 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Resolver, useForm } from 'react-hook-form'
 
-import { DISCLOSURE_FIELDS } from '@/entity/products'
+import { DISCLOSURE_FIELDS, ProductOptionFormInput } from '@/entity/products'
 
 import { CreateProductForm, createProductSchema } from './product-create.types'
 
+export const DEFAULT_PRODUCT_OPTION: ProductOptionFormInput = {
+  mainCategory: '',
+  subCategory: '',
+  optionName: '',
+  ingredientCategories: ['glutenFree'],
+  additionalPrice: null,
+  stockQuantity: null,
+  shippingDays: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
+  hasNutrition: true,
+  totalWeight: null,
+  calories: null,
+  carbohydrate: null,
+  sugar: null,
+  protein: null,
+  fat: null,
+  sodium: null,
+}
+
 export const useCreateProductForm = () => {
   return useForm<CreateProductForm>({
     resolver: zodResolver(createProductSchema) as Resolver<CreateProductForm>,
@@ -24,21 +42,9 @@ export const useCreateProductForm = () => {
       mainImage: null,
       extraImages: [],
 
-      mainCategory: '',
-      subCategory: '',
-      optionName: '',
-      ingredientCategories: ['glutenFree'],
-      additionalPrice: null,
-      stockQuantity: null,
-      shippingDays: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
-      hasNutrition: true,
-      totalWeight: null,
-      calories: null,
-      carbohydrate: null,
-      sugar: null,
-      protein: null,
-      fat: null,
-      sodium: null,
+      options: [
+        DEFAULT_PRODUCT_OPTION,
+      ] as unknown as CreateProductForm['options'],
 
       productInfoNotice: DISCLOSURE_FIELDS.reduce(
         (acc, field) => ({
diff --git a/apps/seller/src/features/products/create/utils/create-form-api-request.ts b/apps/seller/src/features/products/create/utils/create-form-api-request.ts
new file mode 100644
index 00000000..81249dc7
--- /dev/null
+++ b/apps/seller/src/features/products/create/utils/create-form-api-request.ts
@@ -0,0 +1,74 @@
+export const CreateFormApiRequest = () => {
+  return {
+    storeId: 1,
+    title: '두바인 쫀득 쿠키 5종',
+    isFresh: true,
+    productionStartTime: 'T_18_19',
+    price: 15000,
+    discountType: 'AMOUNT',
+    discountValue: 3000,
+
+    deliveryCondition: '유료',
+    deliveryCompany: 'CJ대한통운',
+    deliveryFee: 3000,
+    freeShippingConditions: 50000,
+
+    thumbnailImgFile: '(파일 업로드)',
+    productImgs: ['(파일1)', '(파일2)', '(파일3)'],
+
+    boardDetailRequest: {
+      content:
+        '<p>내일 오전 2시부터 4시까지 시스템 점검을 진행합니다.</p><img data-id="img-uuid-001.png" src="blob:temp"/>',
+    },
+
+    products: [
+      {
+        title: '두바이 쫀득 쿠키',
+        category: 'COOKIE',
+        plusPriceWithBoardPrice: 3000,
+        stock: 1000,
+        dietaryTags: {
+          glutenFreeTag: false,
+          highProteinTag: false,
+          sugarFreeTag: false,
+          veganTag: false,
+          ketogenicTag: false,
+        },
+        availability: {
+          monday: true,
+          tuesday: false,
+          wednesday: false,
+          thursday: true,
+          friday: false,
+          saturday: false,
+          sunday: false,
+        },
+        nutritionInfo: {
+          totalWeight: 100,
+          servingSize: 100,
+          carbohydrates: 30,
+          sugars: 10,
+          protein: 5,
+          fat: 3,
+          calories: 300,
+        },
+      },
+    ],
+
+    productInfoNoticeRequest: {
+      productName: '두바인 쫀득 쿠키 5종',
+      foodType: '쿠키',
+      manufacturer: '빵그리의 오븐',
+      originLocation: '서울특별시 강남구',
+      manufactureDate: '제조년월일 별도 표기',
+      expirationDate: '소비기한 또는 품질 유지기한',
+      storageGuide: '포장 단위 별 내용물의 용량 수량',
+      packagingQuantityUnit: '포장 단위별 수량',
+      rawMaterialName: '원재료명',
+      nutritionInfo: '영양성분',
+      transgenic: '유전자 변형 식품에 해당하는 경우의 표시',
+      customerWaring: '소비자 안전을 위한 주의사항',
+      importFood: '수입 식품의 경우',
+    },
+  }
+}
diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index e2cff94b..be083fb7 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
 
-import { Button } from '@dessert/ui'
 import { FormProvider } from 'react-hook-form'
 
 import {
diff --git a/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx b/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx
index 58bb51f3..472e60b0 100644
--- a/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx
+++ b/apps/seller/src/shared/block/fixed-layout/fixed-layout.tsx
@@ -15,7 +15,7 @@ const FixedLayout = () => {
             <Outlet />
           </ScrollArea>
         </main> */}
-        <main className="h-full max-w-[calc(100vw-240px)] overflow-y-auto bg-gray-50">
+        <main className="size-full max-w-[calc(100vw-240px)] overflow-y-auto bg-gray-50">
           <div className="relative px-[90px] pt-40 pb-36">
             <Outlet />
           </div>

From ff54771a99cc11d046d9f1f846d36d15e378b057 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Fri, 24 Apr 2026 20:03:07 +0900
Subject: [PATCH 18/56] =?UTF-8?q?[seller]=20feat(173):=20=EB=AF=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=ED=99=94=EB=A9=B4=20=ED=8D=BC?=
 =?UTF-8?q?=EB=B8=94=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/icons/preview/preview-icon1.png    | Bin 0 -> 1807 bytes
 .../assets/icons/preview/preview-icon2.png    | Bin 0 -> 842 bytes
 .../assets/icons/preview/preview-icon3.png    | Bin 0 -> 1424 bytes
 .../create/create-footer/create-footer.ui.tsx |  13 +-
 .../create-preview-modal.ui.tsx               | 332 ++++++++++++++++++
 .../src/pages/products/create/create-page.tsx |  11 +-
 .../products/create/detail-edit-page.tsx      |   3 +-
 7 files changed, 354 insertions(+), 5 deletions(-)
 create mode 100644 apps/seller/src/assets/icons/preview/preview-icon1.png
 create mode 100644 apps/seller/src/assets/icons/preview/preview-icon2.png
 create mode 100644 apps/seller/src/assets/icons/preview/preview-icon3.png
 create mode 100644 apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx

diff --git a/apps/seller/src/assets/icons/preview/preview-icon1.png b/apps/seller/src/assets/icons/preview/preview-icon1.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb6c18ccb904611976d05e2e26b141611ab8b8f5
GIT binary patch
literal 1807
zcmV+q2k`ibP)<h;3K|Lk000e1NJLTq001rk001rs1^@s6SGg-U00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=000JxNkl<ZcmeHMO=w(I6#nkyuZ^`%)f8GPog&&&L?-GYAebrW
z#zmWA7Zn$scA;JAbm2zOOu$`*Rs=VeP9ju61Y;3Pk#;7iMWL8MQLv(Uv1$WtF>TVH
zOfv6!&b{xwc|Z5fOggiO&;vK`%{}kF`<?HepL<_`|EUPHUozCv)RNR@sg<ae(Pn8U
z@D#N|YUA3>(2j?ZytfC|Ki5$@{}*3Nq}xx;LYt&rz|-s2_7vZGWgwY*sXwATdSViX
z4o@)qthCSu=|JnEK%f0!Pm-B7$-v_qcm-CSJ~z!SG=?@vtBj|p6^qCAq%u!!s{7#V
z+yb^df1I!Dpnbn3NuV_;4j&w72%3d`p8TJ0Q)q*<0{lpJ=k`?o-~g5>Nwh)k6nKW%
z%MC9RG-nyKDK&OB&?gaO$a1a)X4+Z$reuQBBKbFiZrQ(C>H!~4_IBr!tGg+L^}<+J
z6k{cJk$pS2V>vQj{GBfoXp_Wcm2~RCHItKX4k5W_HPCyH>a;Fj$Cg)*W9rKTnr-QO
zgABbbr0d^%0_9&XmtfB0*PMP{krJAaIL4Ey`_~}Z+e4YYmg-Y|+BIAku@@y0-6C?Y
zur3kW4xtuHlI}HKm@=**(v}dUmsN@BnK@jWUr<$+jI$i@BdAlX8u>WT)fKB!plnU7
z2$wPf1p);j6#3bZYuOcTsJ%efo|?fFz^VNE-(|<X_$5m}^Ns-#sh?F6q)x;aS7r>v
ztYSAIqDC>ZRfAD*yvX*##}i)7LjF1YadJNf`#0sOs|Z61Z4A7g2<^(soej~Vz%OZ+
zh)AbUtn)Q8j-KDVel3c}UI3-sj0t>ez#VWR5vLQeGpI4bY_QwU<2mip#*Ozlg#a|v
zMb*Ss#@2pr5)MGv@#A!mng+UVCe_a)uMZ-<wQq=Sb7%{2>C1Z3pl1K>G=ozv)a?YY
zX<S!u9D^qrhT}3VZL++;>l7Y4p4eLF25@97Y5^P(Csq0h;f)+M2AypgxHmx}%Bq{k
z-2nElh(FUr#!BC#Oo-2DXK%EtF>oUth6&(!l?<poPZQx4VK;HoXLv;-M)`)NAMNAq
zafWV_^?}=Vtcrn%E?*3E_}H<7xtk5}SY?A%#d4Lw6>%%7Y3zNgx{=zT_w;wnxMIeK
z+s{s<Ac<N4n+lRQRz^2ZyjpGm^WXHgKE6%YFZtD~x!;bdh7LPCK_ZO6br&An9jda#
zFz<DgbcF^AZIlSj*_d$y>#E`zs-g1biZmOQ&}<vm(0Nt83asWNHu&sHGTS(-ELMyY
z#Z^2#kvadXY8bQiQQ1kv>zHEJHxJz8F75`!)Q|YkQ2lZ7PHq%Ct_rWx^46E6+#K)_
zcvTJSR6J9`fplUZ4jkeuu&Ng{=lEIg6gAsi0jew@2wa%=81CV~0Dun@9C(4$=<4cK
zU~gMtWAwA1xM!6AGzXj+ulRhO?u8wSG+#k7R#G@V-f7qZRCVA*t0=ior3$fd3*{d#
z;`47T%LU%}1muDBv3`3&?+R}akW~q_{gtwVSmW?ds4J&8uaNjtnLzM(Dt+mbfGR?6
z(*S#k45BNYkggF?yWcp&Pmj36ng<>NuTm7fTky-N$;uKP#Yo{iA{Ge=AIS)jT%?D)
z9kfKdSkkV;#z^%JUQwxBO%dY8ieuEF_r8ZUGxshWwwnX~*t5VRPXj-H1zb26P`Ump
zM6}|eL+YH)fxK7^7E%VZ2yIM-3lh9+;}HUFz=6YGW9;+=KK<wXuQ&Smld1Lkn6zOl
zeQMncJn#_k%mJFHHwc`~t~ww>XKL49jb~2Z{=}3-n24#r=kdhL;|zL?x^{%0i7+ld
z$)(Sf|17-yDY09*SyRkk3I28gI5V4Sj_PukJ*?~GYUmj6lZo;rjGp?98-MX)pFRqM
z1cu3vb17P~;*H9Z1^#!))r-Kl9|9Y<QOZB%JvUPLp*F_1#9@)n(aiXvKx&srI7V4B
z^C*>PU|pJ<hW2F!9Q(O0%y^MrIJ@hele_8j+mv;69;xZ`^j2!OZqg^Xc{NAAFgb?y
ziv|59Yk40<<%wLD7?;#CPFFs?xsQL#?BI5{$p1@i2rEel;5fCZK;K8X(Qw~Nk(#Rr
z3{oIXxIYQ>5cTbY{%_felNxYI$Nq$J1s$aHMS$9<c=6~cR-n{!fuNv}7*b5@PhKn|
xSfP^e-R&pvvve(hKl9#3Ke27$uG|$R{{f?I!#D=89h?9F002ovPDHLkV1iqCW&;2K

literal 0
HcmV?d00001

diff --git a/apps/seller/src/assets/icons/preview/preview-icon2.png b/apps/seller/src/assets/icons/preview/preview-icon2.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b2fecc629856fe3e9405450dd64d4b2a337fb92
GIT binary patch
literal 842
zcmV-Q1GW5#P)<h;3K|Lk000e1NJLTq001rk001rs1^@s6SGg-U00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=0008TNkl<ZcmeI0OK1~87=Zt{v1wlGW-VCLXg4`&5%H}D(TE4n
zdi4<RUUKm!v^jYZ5<$G$;>Cl~Sg6{ZQt%*%5D&do^4<j7-7GOp&7+C`tWDUari$Ps
z%6#y%JCB8LW@iTG2VgM%Z%i;?Bm^JR7|R&ZR4S$Qv;{C+7!hnsb=n3l?)7?;Q#W|2
zzR`l!ca>DT-M&Ty(K%qYbCHS5f<PqGF;&AhZ)ad;7(CLY+oJyB7&A+Ws5Xz%A*(nt
zd-ARaM#UeB+UHF{Tdn%>HA>3+VDM=5YD<4Pb4!5nW22``Ceu@+G{J1$sXB0R{QYw)
zOXY5P@~jOGo#zFkG@&Bb$Rp7y55tT{R$^sMN!Rs4=3^DbojW=dKa`=SHkXZ?bI&!t
zy{rE^waQlH&4c31MO^DjrVdBNk#5^JwE^iRh5VVI@teNl=p5#GK6rq404<WQ0W6#i
zHc{4sONB^(dXj^BX)A=2oiO(OsW?jeJ)Vi+;;ZMtJDot2#kVoI7rL)+MpJn|h>kIk
zTZMRUzkV|=T{w4|x-{Xs{|daAd<I`D6>uLOhlk<Eupk$t-hRVyj_<<l9{**ZVK`O(
z2qsP&CQchBP8%jp8zxR0CQchBP8%jp8~p~feVg}pDlsAB&&vgPIlln3X*8M`jc!?%
zi{x?DkZ>SbinyLT#7Y5WlP*ydIBqC!b2?f{C4;(&;?Zu>)93RAtyXLJ_|yq7n}<(6
zm&-yvmrW&;NiQjLorY4W^xo-oniOT-&!M>8Ziiu@*=#~KlZJwv*E6{qLh5&=nQ__N
z!DTaTu~;ORO9XC!vtO&#prk5VtJRvrm@($g`{u`S03>S~wApL{mv|6pQmt;Fu$sUb
zegr+q{tkVolcc;*K5nx+0v^v1pvl_W7f=-?fey3%`uyAH_+G5z=t(db490Kq9o=pW
UIWCb`LjV8(07*qoM6N<$g1J+9fB*mh

literal 0
HcmV?d00001

diff --git a/apps/seller/src/assets/icons/preview/preview-icon3.png b/apps/seller/src/assets/icons/preview/preview-icon3.png
new file mode 100644
index 0000000000000000000000000000000000000000..b873e44ebcee1147ca2a654377731c343a9e84e0
GIT binary patch
literal 1424
zcmV;B1#kL^P)<h;3K|Lk000e1NJLTq001rk001rs1^@s6SGg-U00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=000FGNkl<ZcmdU!J4_>26o!v^Kf|yH!Yf*XD4@Y^7KCWL(4+&>
zP}*)0D9|LLVktMxrh$TLsQ^*nG)QbgjDiG`kuX)<AV5iYh=9%e&E))dXDs6QamVX1
z;g?32nYq66&6)q6Id>p>p|Vh#WVKocxv}v!y3L}OAcj_KHk&#zF`>4#wW+*6LN7rK
z>get5Rc~)^)wQ)X9e$Ah@2ab-`#3#4Ex`Bo_SDtYRkgXfIfy4gNh*U(7Q<PKi;JDD
zt*v7J;o*TQD=Ue?0o_eW%2aSbTP&7e2L=YHrly7-A0O%d{$8AGXlM{!C`n~eilse%
zJ8#`3B_+=O{(i;jbc%D=*VmLPeK9yD9({h~Hjb{HZJ{(ZHBn1T3%Oh_;{9;nv$M1C
z-<zA8XtpUyB@NENb_SheKx=1bCjl0AsI9Gy+8@yHH<X!~NsWz-w7k4L!sCQEt$QdP
zLX<f#2j}PKMW#r!9UmX73@5googMY^@>1m+5!ppcjSe!XOfo2K!p+Uh%v9=`B9>HD
zrPI?>IzK-b`}{j9D=VYy>}<-)%A$;n463iMr-g+DhoUHxp-@PA5*W@ZeDQZZJv~-f
zBOWlUvA@4h7Z(@e80=AAUQRhVIpKb}xw&Mw+p$^c^MsaGGU?EUNf%9Q3lU)e0~|Mi
zC>IqK31~$5sdUe??a(;LfRdS<rFy2og#mkWb3<2GR{~TQBAlO}FQ8$GXwq|fGD-$~
zYh`8Sb$fez7!*+jD7=d;FE8&u(T&u}$w@fk2L}geLS#UOt-`Rs%+AgVIG#{cQBgrv
zRaK%bEiDxhjt6~rcSlD@M`7=4W8&t&=Xoz(0vG~EMaLHy;i5^v6%-UCj4Xu6BC`Pa
z@bFMr3&K;v%?=L_)6~?Il>;y*3opHpKn=|=mv>`hV-%TD0EVc+vwDkTh^~I@sgPOl
z#Bk&AKjud;7$m>nPeVgPA?{ztIX|v-q&$w?4d}_qNf9B=w_;N2z|jQX0}7C6b^l|F
zoUE9{7*k7)%KG{`Qlpo?6rAPaGE~?C=}s4*bQm2Jj~{KUOcG1T=_taG8X3GhRp1KV
zaC&qL3kyZ@WE4(DnA|do3$E1=c*QIHS{8#MGVo@qg(nH?ZES2HAg}q_E<WsywXn9t
zf&S2>yc%p&UeR;tl;=?3<e2`tIDgCR-pKP&!Lb<lDknGi>D%w9I6H@)OTNQ>a{u<p
zyS26THu797lZr*`b3zMQL|mf=H>OpvGH07OJF32+=g`^REiLZ;L4RJHx!EcoBhSZu
z0bzpRRov0hVaJLkUE1B<C6C9m%~{MH&EHVmtb#km5{;qleSLkDE{%_mi<&4FG$fOV
zJwBh0(kbnFao3?T;Ql}$@UIoR+0wxM@%khLN3p}uUcjeA8uU_1iY)fqhVQ4J9dDX!
zWVU?2Z{T|VMEzuo4G&%h>5%Vlu^LMFokbShA2<n$+-jyUJ^~ako9L1P7e2qc^#(%6
zWTp@t){;zL>BTbpZfVi_wd2i?Kag2keE%NT@yhfyQc#<oS+w!JGJTDJ`#DvG%*y8&
z7pYLj-;gx8mRJ2|MO_<L%HNQowU_Yu;v$(LjLYLoe{MFqXf(~|GOzikGV}=!{^K$?
z#AT;aU0qG763SQ($hNG%A;aGe8GO|3c7N#V>Y`K#lagz1*kshm?~?kLI6e?@<D%5b
eYb4q)TK@o4BY&esp{+0g0000<MNUMnLSTa4m7H_{

literal 0
HcmV?d00001

diff --git a/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx b/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
index 6749e637..3ea506bf 100644
--- a/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
+++ b/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
@@ -1,9 +1,18 @@
 import { Button } from '@dessert/ui'
 
-export const ProductFooter = () => {
+interface ProductFooterProps {
+  onPreview: () => void
+}
+
+export const ProductFooter = ({ onPreview }: ProductFooterProps) => {
   return (
     <div className="sticky bottom-0 left-0 z-20 -mb-36 -ml-[90px] flex w-[calc(100%+180px)] justify-end gap-12 border-t border-t-gray-200 bg-white px-[90px] py-24">
-      <Button title="미리보기" variant="primary-outlined" size="lg" />
+      <Button
+        title="미리보기"
+        variant="primary-outlined"
+        size="lg"
+        onClick={onPreview}
+      />
       <Button title="임시저장" variant="primary-outlined" size="lg" />
       <Button title="저장하기" variant="primary-filled" size="lg" />
     </div>
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
new file mode 100644
index 00000000..54d0b8fb
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -0,0 +1,332 @@
+import { BbanggreuiOvenLogo } from '@dessert/icons'
+import { Button } from '@dessert/ui'
+import { ChevronDown, ChevronUp, Heart, Star } from 'lucide-react' // 필요한 아이콘 라이브러리
+import { useFormContext } from 'react-hook-form'
+
+import PreviewIcon1 from '@/assets/icons/preview/preview-icon1.png'
+import PreviewIcon2 from '@/assets/icons/preview/preview-icon2.png'
+import PreviewIcon3 from '@/assets/icons/preview/preview-icon3.png'
+
+import { useCreateFormSteps } from '../create-form' // 프로젝트 구조에 맞게 경로 확인 요망
+
+export const ProductPreviewModal = ({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean
+  onClose: () => void
+}) => {
+  const { watch } = useFormContext()
+  // react-hook-form에 담긴 모든 데이터를 실시간 감시
+  const formData = watch()
+  const { activeTags, productPrice } = useCreateFormSteps()
+
+  if (!isOpen) return null
+
+  // formData에서 이미지 배열을 안전하게 가져옵니다.
+  const previewImages =
+    formData.images && formData.images.length > 0 ? formData.images : [null] // 이미지가 없을 때 처리를 위한 배열
+
+  return (
+    <div
+      className="fixed inset-0 z-9999 flex flex-col items-center bg-gray-100"
+      onClick={onClose} // 배경 클릭 시 닫기
+    >
+      <div
+        className="h-header w-screen border-b border-gray-200 bg-white px-24 py-20"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <BbanggreuiOvenLogo />
+      </div>
+      <div
+        className="relative h-full w-[600px] overflow-y-auto bg-white"
+        onClick={(e) => e.stopPropagation()} // 모달 내부 클릭 시 닫힘 방지
+      >
+        {/* 1. 헤더 (앱 바 형태) */}
+        <div className="sticky top-0 z-10 flex items-center gap-12 bg-white p-16">
+          <ChevronDown className="rotate-90 text-gray-900" size={24} />
+          {/*데이터 바인딩: productName */}
+          <h1 className="flex-1 truncate typo-title-16-m text-gray-900">
+            {formData.productName || '[미입력] 상품명'}
+          </h1>
+        </div>
+
+        {/* 2. 탭 영역 */}
+        <div className="flex border-b border-gray-100 bg-white">
+          <div className="flex-1 border-b-2 border-gray-900 py-12 text-center typo-title-14-sb text-gray-900">
+            상품정보
+          </div>
+          <div className="flex-1 py-12 text-center typo-title-14-r text-gray-500">
+            리뷰
+          </div>
+        </div>
+
+        {/* 3. 이미지 스와이퍼 영역 (프리뷰는 첫 페이지만 표시) */}
+        <div className="relative flex aspect-square w-full items-center justify-center overflow-hidden p-16">
+          <div className="relative size-full overflow-hidden rounded-6 bg-gray-100">
+            {previewImages[0] ? (
+              <img
+                src={previewImages[0]}
+                alt="product preview"
+                className="size-full object-cover"
+              />
+            ) : (
+              <div className="flex size-full items-center justify-center typo-body-14-r text-gray-400">
+                이미지를 등록해주세요
+              </div>
+            )}
+            {/* 배지 (묶음상품 등) */}
+            <div className="absolute top-16 left-16 rounded-4 bg-[#F26565] px-8 py-4 typo-body-12-sb text-white">
+              묶음상품
+            </div>
+
+            {/* 인디케이터 (1/2 등) */}
+            <div className="absolute right-10 bottom-10 rounded-full bg-black/50 px-10 py-4 typo-body-12-r text-white">
+              1 / {previewImages.length}
+            </div>
+          </div>
+        </div>
+
+        {/* 4. 상품 기본 정보 섹션 */}
+
+        <div className="flex w-full items-center justify-between bg-white px-16 py-10">
+          <div className="mb-16 flex items-center gap-6">
+            <div className="size-24 rounded-6 bg-gray-500" />
+            <p className="typo-title-14-m text-gray-600">Brand Name</p>
+          </div>
+          <Heart size={18} color="text-gray-300" />
+        </div>
+
+        <div className="border-t border-gray-300 bg-white p-16">
+          {/* 💡 데이터 바인딩: productName */}
+          <h2 className="typo-title-16-r text-gray-800">
+            {formData.productName || '[미입력] 상품명'}
+          </h2>
+
+          <div className="flex w-full items-center justify-between">
+            <div className="flex items-center gap-4">
+              <span className="typo-heading-18-r text-primary-500">10%</span>
+              <span className="typo-heading-18-sb text-gray-900">
+                {productPrice ? productPrice.toLocaleString() : '0'}원~
+              </span>
+              <span className="typo-title-14-m text-gray-500">
+                맛별 가격 상이
+              </span>
+            </div>
+
+            <div className="flex items-center gap-2 typo-body-14-m text-gray-900">
+              <Star className="fill-yellow-400 text-yellow-400" size={18} />
+              4.5 <span className="typo-body-12-r text-gray-500">
+                (1,000)
+              </span>{' '}
+              <ChevronDown className="-rotate-90 text-gray-300" size={12} />
+            </div>
+          </div>
+        </div>
+
+        {/* 5. 배송비 및 리뷰 배지 섹션 */}
+        <div className="bg-gray-50 px-16 py-12">
+          <div className="typo-title-14-m text-gray-600">
+            배송비{' '}
+            <span className="ml-4 typo-title-14-r text-gray-800">2,500원</span>{' '}
+            <span className="ml-2 typo-body-12-r text-gray-500">
+              (20,000원 이상 구매 시 무료)
+            </span>
+          </div>
+        </div>
+        <div className="border-t border-gray-100">
+          <h3 className="p-16 typo-title-14-sb text-gray-800">
+            리뷰 대표 배지
+          </h3>
+          <div className="flex gap-10 border-t border-gray-100 p-16">
+            {['맛있어요', '담백해요', '부드러워요'].map((badge, idx) => (
+              <div
+                key={badge}
+                className="flex flex-1 flex-col items-center gap-4 rounded-10 border border-gray-100 text-center"
+              >
+                <img src={`PreviewIcon${idx}`} alt="" />
+                <span className="typo-body-14-m text-gray-600">{badge}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+        {/* 6. 상품 옵션 섹션 (가장 중요) */}
+        <div className="h-6 w-full bg-gray-100" />
+        <div className="">
+          <h3 className="p-16 typo-title-14-sb text-gray-800">상품 옵션</h3>
+          {/* 데이터 바인딩: formData.products 배열 반복 */}
+          {(formData.products || [null, null]).map(
+            (option: any, index: number) => (
+              <>
+                <div key={index} className="border-t border-gray-300">
+                  <div className="flex items-center justify-between p-16">
+                    <h4 className="mb-6 typo-title-14-r text-gray-800">
+                      {option?.optionName ||
+                        `옵션명 미입력 (옵션 ${index + 1})`}
+                    </h4>
+
+                    <div className="flex items-center gap-6">
+                      <span className="typo-title-14-sb text-primary-500">
+                        10%
+                      </span>
+                      {/* 가격 계산: 기본가 + 추가가격 */}
+                      <span className="typo-title-14-sb text-gray-900">
+                        {(
+                          Number(productPrice || 0) +
+                          Number(option?.additionalPrice || 0)
+                        ).toLocaleString()}
+                        원
+                      </span>
+                      <ChevronUp className="ml-8 text-gray-900" size={20} />
+                    </div>
+                  </div>
+
+                  {/* 태그 영역 */}
+                  <div className="flex gap-6 border-t border-gray-300 p-16">
+                    {/* 💡 데이터 바인딩: ingredientCategories */}
+                    {(
+                      option?.ingredientCategories || ['저당', '글루텐프리']
+                    ).map((tag: string) => (
+                      <span
+                        key={tag}
+                        className="rounded-4 border border-gray-200 px-6 py-2 typo-body-10-r text-gray-600"
+                      >
+                        {tag === 'glutenFree'
+                          ? '글루텐프리'
+                          : tag === 'vegan'
+                            ? '비건'
+                            : tag}
+                      </span>
+                    ))}
+                  </div>
+
+                  {/* 주문 가능날짜 */}
+                  <div className="p-16 pt-0">
+                    <p className="mb-2 typo-body-12-sb text-gray-500">
+                      주문 가능날짜
+                    </p>
+                    {/* 데이터 바인딩: shippingDays */}
+                    <div className="flex w-full items-center justify-between">
+                      <DaySelector
+                        selectedDays={
+                          option?.shippingDays || [
+                            'mon',
+                            'tue',
+                            'wed',
+                            'thu',
+                            'fri',
+                            'sat',
+                            'sun',
+                          ]
+                        }
+                        readOnly // 프리뷰용 readOnly 모드 필요
+                      />
+                      <div className="rounded-8 bg-gray-900 px-10 py-[5.5px] typo-body-12-m text-white">
+                        빵켓팅 알림 신청
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 영양정보 */}
+                  <div className="p-16 pt-0">
+                    <div className="mb-10 flex items-center justify-between">
+                      <span className="mb-2 typo-body-12-sb text-gray-500">
+                        영양정보
+                      </span>
+                      {/* 데이터 바인딩: totalWeight, calories */}
+                      <span className="typo-body-12-sb text-gray-700">
+                        총 내용량 {option?.totalWeight || 0}g /{' '}
+                        {option?.calories || 0}kcal
+                      </span>
+                    </div>
+                    <div className="mt-8 grid grid-cols-4 gap-6">
+                      {[
+                        { label: '단백질', key: 'protein' },
+                        { label: '당류', key: 'sugar' },
+                        { label: '탄수화물', key: 'carbohydrate' },
+                        { label: '지방', key: 'fat' },
+                      ].map((nutri) => (
+                        <div
+                          key={nutri.key}
+                          className="rounded-8 bg-gray-100 p-12 text-center"
+                        >
+                          <div className="mb-4 typo-body-11-r text-gray-500">
+                            {nutri.label}
+                          </div>
+                          {/* 💡 데이터 바인딩: 영양성분 값들 */}
+                          <div className="typo-title-14-sb text-gray-900">
+                            {option?.[nutri.key] || 0}g
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </>
+            ),
+          )}
+
+          <div className="p-16">
+            <div className="mt-16 w-full rounded-10 border border-gray-200 py-8 text-center typo-title-16-m text-gray-800">
+              간단히 보기
+            </div>
+          </div>
+        </div>
+
+        {/* 7. 상세 설명 영역 (이미지 위주) */}
+        <div className="mb-10 bg-white px-20 py-24 text-left">
+          <div className="leading-relaxed text-gray-700">
+            {/* 데이터 바인딩: description */}
+            {formData.description || '상품 상세 설명이 들어가는 자리입니다.'}
+          </div>
+        </div>
+
+        {/* 하단 고정 바 (구매하기) */}
+        <div className="sticky bottom-0 z-10 flex w-full items-center gap-10 border-t border-gray-100 bg-white p-16 px-20 py-16">
+          <div className="flex size-56 items-center justify-center rounded-full border border-gray-200 text-gray-400">
+            <Heart size={32} />
+          </div>
+          <button className="flex-1 rounded-full bg-gray-900 py-[13.5px] text-center typo-title-16-sb text-white hover:bg-black">
+            구매하러가기
+          </button>
+        </div>
+      </div>
+      {/* 푸터 */}
+      <div className="flex w-screen justify-end border-t border-gray-200 bg-white p-24">
+        <Button title="닫기" onClick={onClose} size="lg" />
+      </div>
+    </div>
+  )
+}
+
+// DaySelector 프리뷰용 컴포넌트 (readOnly 모드 추가 가정)
+// 기존 shared/block/day-selector/day-selector.tsx 파일을 활용하시거나 별도로 정의해 주세요.
+const DaySelector = ({
+  selectedDays,
+  readOnly,
+}: {
+  selectedDays: string[]
+  readOnly?: boolean
+}) => {
+  const days = [
+    { key: 'mon', label: '월' },
+    { key: 'tue', label: '화' },
+    { key: 'wed', label: '수' },
+    { key: 'thu', label: '목' },
+    { key: 'fri', label: '금' },
+    { key: 'sat', label: '토' },
+    { key: 'sun', label: '일' },
+  ]
+  return (
+    <div className="flex gap-4">
+      {days.map((day) => (
+        <span
+          key={day.key}
+          className={`flex size-32 items-center justify-center rounded-full border typo-body-12-sb ${selectedDays.includes(day.key) ? 'border-[#F26565] bg-[#F26565] text-white' : 'border-gray-100 bg-white text-gray-400'}`}
+        >
+          {day.label}
+        </span>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index be083fb7..49e8ef94 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 import { FormProvider } from 'react-hook-form'
 
@@ -16,6 +16,7 @@ import {
   useCreateFormSteps,
   useCreateProductForm,
 } from '@/features/products/create'
+import { ProductPreviewModal } from '@/features/products/create/create-preview/create-preview-modal.ui'
 
 function CreatePage() {
   const form = useCreateProductForm()
@@ -29,6 +30,8 @@ function CreatePage() {
 }
 
 function CreatePageInner() {
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false)
+
   const { setCurrentStep, headerHeight, isScrollingToStep } =
     useCreateFormSteps()
 
@@ -104,7 +107,11 @@ function CreatePageInner() {
       <CreateFormContainer id="productDisclosure" className="mb-40">
         <ProductDisclosureArea />
       </CreateFormContainer>
-      <ProductFooter />
+      <ProductFooter onPreview={() => setIsPreviewOpen(true)} />
+      <ProductPreviewModal
+        isOpen={isPreviewOpen}
+        onClose={() => setIsPreviewOpen(false)}
+      />
     </>
   )
 }
diff --git a/apps/seller/src/pages/products/create/detail-edit-page.tsx b/apps/seller/src/pages/products/create/detail-edit-page.tsx
index 639f2a9c..0ddb8a2c 100644
--- a/apps/seller/src/pages/products/create/detail-edit-page.tsx
+++ b/apps/seller/src/pages/products/create/detail-edit-page.tsx
@@ -1,6 +1,7 @@
+import { useState } from 'react'
+
 import { BbanggreuiOvenLogo } from '@dessert/icons'
 import { Button, Editor } from '@dessert/ui'
-import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useProductCreationStore } from '@/features/products/create/create-form/product-creation.store'

From 7524b49b881053c85ed4206fac7d6e5a8e12b578 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Fri, 24 Apr 2026 20:17:30 +0900
Subject: [PATCH 19/56] =?UTF-8?q?[seller]=20fix(173):=20=EB=88=84=EB=9D=BD?=
 =?UTF-8?q?=EB=90=9C=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=B5=EA=B5=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-options-form.ui.tsx           | 21 +++++++++----------
 .../create-preview-modal.ui.tsx               |  2 +-
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
index b016c1f8..ff611410 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
@@ -9,7 +9,7 @@ import { MAIN_CATEGORY_OPTIONS } from '@/entity/products/create/create-options/p
 import DaySelector from '@/shared/block/day-selector/day-selector'
 
 import { useProductOptionForm } from './use-product-options.form.hook'
-import { useCreateFormSteps } from '../create-form'
+import { ProductFinalPrice, useCreateFormSteps } from '../create-form'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
 
 interface Props {
@@ -27,6 +27,8 @@ export const ProductOptionForm = ({
   onCopy,
   onAdd,
 }: Props) => {
+  const { setProductFields, setNutritionData, productPrice } =
+    useCreateFormSteps()
   const {
     form,
     mainCategory,
@@ -44,10 +46,9 @@ export const ProductOptionForm = ({
     stockInput,
     nutritionInputs,
     toggleShippingDay,
-  } = useProductOptionForm(index)
+  } = useProductOptionForm(index, productPrice)
 
   const { control, register } = form
-  const { setProductFields, setNutritionData } = useCreateFormSteps()
 
   useEffect(() => {
     setProductFields((prev) => ({ ...prev, productOptions: isFormField }))
@@ -159,6 +160,7 @@ export const ProductOptionForm = ({
               labelClassName="typo-title-16-r"
               placeholder="0~100,000"
               className="flex-1"
+              value={productPrice ?? ''}
               disabled
             />
             <span className="relative top-11">원</span>
@@ -178,14 +180,11 @@ export const ProductOptionForm = ({
           </div>
         </div>
         {totalPrice !== null && (
-          <div className="mt-8 flex justify-end">
-            <p className="typo-title-16-r text-gray-600">
-              최종 가격:
-              <span className="typo-heading-18-b text-gray-900">
-                {totalPrice.toLocaleString('ko-KR')}원
-              </span>
-            </p>
-          </div>
+          <ProductFinalPrice
+            title={'최종 상품 옵션 금액'}
+            price={productPrice}
+            finalPrice={totalPrice}
+          />
         )}
       </div>
 
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 54d0b8fb..236fafc0 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -98,7 +98,7 @@ export const ProductPreviewModal = ({
         </div>
 
         <div className="border-t border-gray-300 bg-white p-16">
-          {/* 💡 데이터 바인딩: productName */}
+          {/* 데이터 바인딩: productName */}
           <h2 className="typo-title-16-r text-gray-800">
             {formData.productName || '[미입력] 상품명'}
           </h2>

From 80df1f2b74a5eb2a86a22440f3e6fc51634fa679 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Fri, 24 Apr 2026 21:09:15 +0900
Subject: [PATCH 20/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=B2=B4=ED=81=AC?=
 =?UTF-8?q?=20=EB=90=9C=20=ED=95=84=EC=88=98=20=EC=84=B1=EB=B6=84,=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EB=AA=A8=EB=91=90=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-preview-modal.ui.tsx               | 306 +++++++++---------
 1 file changed, 155 insertions(+), 151 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 236fafc0..789ed67b 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -1,13 +1,38 @@
 import { BbanggreuiOvenLogo } from '@dessert/icons'
 import { Button } from '@dessert/ui'
-import { ChevronDown, ChevronUp, Heart, Star } from 'lucide-react' // 필요한 아이콘 라이브러리
+import { ChevronDown, ChevronUp, Heart, Star } from 'lucide-react'
 import { useFormContext } from 'react-hook-form'
 
-import PreviewIcon1 from '@/assets/icons/preview/preview-icon1.png'
-import PreviewIcon2 from '@/assets/icons/preview/preview-icon2.png'
-import PreviewIcon3 from '@/assets/icons/preview/preview-icon3.png'
+import { useCreateFormSteps } from '../create-form'
+import { CreateProductForm } from '../create-form/product-create.types'
 
-import { useCreateFormSteps } from '../create-form' // 프로젝트 구조에 맞게 경로 확인 요망
+const DaySelector = ({ selectedDays }: { selectedDays: string[] }) => {
+  const days = [
+    { key: 'mon', label: '월' },
+    { key: 'tue', label: '화' },
+    { key: 'wed', label: '수' },
+    { key: 'thu', label: '목' },
+    { key: 'fri', label: '금' },
+    { key: 'sat', label: '토' },
+    { key: 'sun', label: '일' },
+  ]
+  return (
+    <div className="flex gap-4">
+      {days.map((day) => (
+        <span
+          key={day.key}
+          className={`flex size-32 items-center justify-center rounded-full border typo-body-12-sb ${
+            selectedDays.includes(day.key)
+              ? 'border-[#F26565] bg-[#F26565] text-white'
+              : 'border-gray-100 bg-white text-gray-400'
+          }`}
+        >
+          {day.label}
+        </span>
+      ))}
+    </div>
+  )
+}
 
 export const ProductPreviewModal = ({
   isOpen,
@@ -16,21 +41,48 @@ export const ProductPreviewModal = ({
   isOpen: boolean
   onClose: () => void
 }) => {
-  const { watch } = useFormContext()
-  // react-hook-form에 담긴 모든 데이터를 실시간 감시
+  const { watch } = useFormContext<CreateProductForm>()
   const formData = watch()
-  const { activeTags, productPrice } = useCreateFormSteps()
+  const { activeTags, productPrice, nutritionData } = useCreateFormSteps()
 
   if (!isOpen) return null
 
-  // formData에서 이미지 배열을 안전하게 가져옵니다.
-  const previewImages =
-    formData.images && formData.images.length > 0 ? formData.images : [null] // 이미지가 없을 때 처리를 위한 배열
+  const price = formData.price ?? 0
+  const discountAmount = formData.discountAmount ?? 0
+  const discountType = formData.discountType
+
+  const discountPercent =
+    discountType === 'won'
+      ? price > 0
+        ? Math.round((discountAmount / price) * 100)
+        : 0
+      : discountAmount // percentage면 그대로
+
+  const totalPrice =
+    discountType === 'won'
+      ? price - discountAmount
+      : Math.round(price * (1 - discountAmount / 100))
+
+  //tags
+  const activeTagList = Object.entries(activeTags)
+    .filter(([, value]) => value)
+    .map(([key]) => key)
+
+  // mainImage를 ObjectURL로 변환해서 미리보기
+  const mainImageUrl = formData.mainImage
+    ? URL.createObjectURL(formData.mainImage)
+    : null
+  const extraImageUrls = (formData.extraImages ?? []).map((f) =>
+    URL.createObjectURL(f),
+  )
+  const allImageUrls = mainImageUrl ? [mainImageUrl, ...extraImageUrls] : []
+
+  const options = formData.options ?? []
 
   return (
     <div
       className="fixed inset-0 z-9999 flex flex-col items-center bg-gray-100"
-      onClick={onClose} // 배경 클릭 시 닫기
+      onClick={onClose}
     >
       <div
         className="h-header w-screen border-b border-gray-200 bg-white px-24 py-20"
@@ -39,19 +91,18 @@ export const ProductPreviewModal = ({
         <BbanggreuiOvenLogo />
       </div>
       <div
-        className="relative h-full w-[600px] overflow-y-auto bg-white"
-        onClick={(e) => e.stopPropagation()} // 모달 내부 클릭 시 닫힘 방지
+        className="relative h-full w-150 overflow-y-auto bg-white"
+        onClick={(e) => e.stopPropagation()}
       >
-        {/* 1. 헤더 (앱 바 형태) */}
+        {/* 1. 헤더 */}
         <div className="sticky top-0 z-10 flex items-center gap-12 bg-white p-16">
           <ChevronDown className="rotate-90 text-gray-900" size={24} />
-          {/*데이터 바인딩: productName */}
           <h1 className="flex-1 truncate typo-title-16-m text-gray-900">
             {formData.productName || '[미입력] 상품명'}
           </h1>
         </div>
 
-        {/* 2. 탭 영역 */}
+        {/* 2. 탭 */}
         <div className="flex border-b border-gray-100 bg-white">
           <div className="flex-1 border-b-2 border-gray-900 py-12 text-center typo-title-14-sb text-gray-900">
             상품정보
@@ -61,12 +112,12 @@ export const ProductPreviewModal = ({
           </div>
         </div>
 
-        {/* 3. 이미지 스와이퍼 영역 (프리뷰는 첫 페이지만 표시) */}
+        {/* 3. 이미지 */}
         <div className="relative flex aspect-square w-full items-center justify-center overflow-hidden p-16">
           <div className="relative size-full overflow-hidden rounded-6 bg-gray-100">
-            {previewImages[0] ? (
+            {allImageUrls[0] ? (
               <img
-                src={previewImages[0]}
+                src={allImageUrls[0]}
                 alt="product preview"
                 className="size-full object-cover"
               />
@@ -75,20 +126,16 @@ export const ProductPreviewModal = ({
                 이미지를 등록해주세요
               </div>
             )}
-            {/* 배지 (묶음상품 등) */}
             <div className="absolute top-16 left-16 rounded-4 bg-[#F26565] px-8 py-4 typo-body-12-sb text-white">
               묶음상품
             </div>
-
-            {/* 인디케이터 (1/2 등) */}
             <div className="absolute right-10 bottom-10 rounded-full bg-black/50 px-10 py-4 typo-body-12-r text-white">
-              1 / {previewImages.length}
+              1 / {allImageUrls.length || 1}
             </div>
           </div>
         </div>
 
-        {/* 4. 상품 기본 정보 섹션 */}
-
+        {/* 4. 상품 기본 정보 */}
         <div className="flex w-full items-center justify-between bg-white px-16 py-10">
           <div className="mb-16 flex items-center gap-6">
             <div className="size-24 rounded-6 bg-gray-500" />
@@ -98,22 +145,21 @@ export const ProductPreviewModal = ({
         </div>
 
         <div className="border-t border-gray-300 bg-white p-16">
-          {/* 데이터 바인딩: productName */}
           <h2 className="typo-title-16-r text-gray-800">
             {formData.productName || '[미입력] 상품명'}
           </h2>
-
           <div className="flex w-full items-center justify-between">
             <div className="flex items-center gap-4">
-              <span className="typo-heading-18-r text-primary-500">10%</span>
+              <span className="typo-heading-18-r text-primary-500">
+                {discountPercent > 0 ? `${discountPercent}%` : ''}
+              </span>
               <span className="typo-heading-18-sb text-gray-900">
-                {productPrice ? productPrice.toLocaleString() : '0'}원~
+                {totalPrice > 0 ? totalPrice.toLocaleString() : '0'}원~
               </span>
               <span className="typo-title-14-m text-gray-500">
                 맛별 가격 상이
               </span>
             </div>
-
             <div className="flex items-center gap-2 typo-body-14-m text-gray-900">
               <Star className="fill-yellow-400 text-yellow-400" size={18} />
               4.5 <span className="typo-body-12-r text-gray-500">
@@ -124,127 +170,118 @@ export const ProductPreviewModal = ({
           </div>
         </div>
 
-        {/* 5. 배송비 및 리뷰 배지 섹션 */}
+        {/* 5. 배송비 */}
         <div className="bg-gray-50 px-16 py-12">
           <div className="typo-title-14-m text-gray-600">
             배송비{' '}
-            <span className="ml-4 typo-title-14-r text-gray-800">2,500원</span>{' '}
-            <span className="ml-2 typo-body-12-r text-gray-500">
-              (20,000원 이상 구매 시 무료)
-            </span>
+            <span className="ml-4 typo-title-14-r text-gray-800">
+              {formData.deliveryFee
+                ? `${formData.deliveryFee.toLocaleString()}원`
+                : '미입력'}
+            </span>{' '}
+            {formData.deliveryMinFee && (
+              <span className="ml-2 typo-body-12-r text-gray-500">
+                ({formData.deliveryMinFee.toLocaleString()}원 이상 구매 시 무료)
+              </span>
+            )}
           </div>
         </div>
+
+        {/* 리뷰 배지 */}
         <div className="border-t border-gray-100">
           <h3 className="p-16 typo-title-14-sb text-gray-800">
             리뷰 대표 배지
           </h3>
           <div className="flex gap-10 border-t border-gray-100 p-16">
-            {['맛있어요', '담백해요', '부드러워요'].map((badge, idx) => (
+            {['맛있어요', '담백해요', '부드러워요'].map((badge) => (
               <div
                 key={badge}
                 className="flex flex-1 flex-col items-center gap-4 rounded-10 border border-gray-100 text-center"
               >
-                <img src={`PreviewIcon${idx}`} alt="" />
                 <span className="typo-body-14-m text-gray-600">{badge}</span>
               </div>
             ))}
           </div>
         </div>
-        {/* 6. 상품 옵션 섹션 (가장 중요) */}
+
+        {/* 6. 상품 옵션 */}
         <div className="h-6 w-full bg-gray-100" />
-        <div className="">
+        <div>
           <h3 className="p-16 typo-title-14-sb text-gray-800">상품 옵션</h3>
-          {/* 데이터 바인딩: formData.products 배열 반복 */}
-          {(formData.products || [null, null]).map(
-            (option: any, index: number) => (
-              <>
-                <div key={index} className="border-t border-gray-300">
-                  <div className="flex items-center justify-between p-16">
-                    <h4 className="mb-6 typo-title-14-r text-gray-800">
-                      {option?.optionName ||
-                        `옵션명 미입력 (옵션 ${index + 1})`}
-                    </h4>
-
-                    <div className="flex items-center gap-6">
-                      <span className="typo-title-14-sb text-primary-500">
-                        10%
-                      </span>
-                      {/* 가격 계산: 기본가 + 추가가격 */}
-                      <span className="typo-title-14-sb text-gray-900">
-                        {(
-                          Number(productPrice || 0) +
-                          Number(option?.additionalPrice || 0)
-                        ).toLocaleString()}
-                        원
-                      </span>
-                      <ChevronUp className="ml-8 text-gray-900" size={20} />
-                    </div>
+          {options.length === 0 ? (
+            <div className="p-16 typo-body-14-r text-gray-400">
+              옵션을 입력해주세요
+            </div>
+          ) : (
+            options.map((option, idx) => (
+              <div key={idx} className="border-t border-gray-300">
+                <div className="flex items-center justify-between p-16">
+                  <h4 className="mb-6 typo-title-14-r text-gray-800">
+                    {option.optionName || `[미입력] 옵션 ${idx + 1}`}
+                  </h4>
+                  <div className="flex items-center gap-6">
+                    <span className="typo-title-14-sb text-primary-500">
+                      10%
+                    </span>
+                    <span className="typo-title-14-sb text-gray-900">
+                      {(
+                        (productPrice ?? 0) + (option.additionalPrice ?? 0)
+                      ).toLocaleString()}
+                      원
+                    </span>
+                    <ChevronUp className="ml-8 text-gray-900" size={20} />
                   </div>
+                </div>
 
-                  {/* 태그 영역 */}
-                  <div className="flex gap-6 border-t border-gray-300 p-16">
-                    {/* 💡 데이터 바인딩: ingredientCategories */}
-                    {(
-                      option?.ingredientCategories || ['저당', '글루텐프리']
-                    ).map((tag: string) => (
+                {/* 태그 */}
+                <div className="flex flex-wrap gap-6 border-t border-gray-300 p-16">
+                  {activeTagList.length > 0 ? (
+                    activeTagList.map((tag) => (
                       <span
                         key={tag}
                         className="rounded-4 border border-gray-200 px-6 py-2 typo-body-10-r text-gray-600"
                       >
-                        {tag === 'glutenFree'
-                          ? '글루텐프리'
-                          : tag === 'vegan'
-                            ? '비건'
-                            : tag}
+                        {tag}
                       </span>
-                    ))}
-                  </div>
+                    ))
+                  ) : (
+                    <span className="typo-body-12-r text-gray-400">
+                      성분 카테고리 미입력
+                    </span>
+                  )}
+                </div>
 
-                  {/* 주문 가능날짜 */}
-                  <div className="p-16 pt-0">
-                    <p className="mb-2 typo-body-12-sb text-gray-500">
-                      주문 가능날짜
-                    </p>
-                    {/* 데이터 바인딩: shippingDays */}
-                    <div className="flex w-full items-center justify-between">
-                      <DaySelector
-                        selectedDays={
-                          option?.shippingDays || [
-                            'mon',
-                            'tue',
-                            'wed',
-                            'thu',
-                            'fri',
-                            'sat',
-                            'sun',
-                          ]
-                        }
-                        readOnly // 프리뷰용 readOnly 모드 필요
-                      />
-                      <div className="rounded-8 bg-gray-900 px-10 py-[5.5px] typo-body-12-m text-white">
-                        빵켓팅 알림 신청
-                      </div>
+                {/* 주문 가능날짜 */}
+                <div className="p-16 pt-0">
+                  <p className="mb-2 typo-body-12-sb text-gray-500">
+                    주문 가능날짜
+                  </p>
+                  <div className="flex w-full items-center justify-between">
+                    <DaySelector selectedDays={option.shippingDays} />
+                    <div className="rounded-8 bg-gray-900 px-10 py-[5.5px] typo-body-12-m text-white">
+                      빵켓팅 알림 신청
                     </div>
                   </div>
+                </div>
 
-                  {/* 영양정보 */}
+                {/* 영양정보 */}
+                {option.hasNutrition && (
                   <div className="p-16 pt-0">
                     <div className="mb-10 flex items-center justify-between">
                       <span className="mb-2 typo-body-12-sb text-gray-500">
                         영양정보
                       </span>
-                      {/* 데이터 바인딩: totalWeight, calories */}
                       <span className="typo-body-12-sb text-gray-700">
-                        총 내용량 {option?.totalWeight || 0}g /{' '}
-                        {option?.calories || 0}kcal
+                        총 내용량 {option.totalWeight ?? 0}g /{' '}
+                        {option.calories ?? 0}kcal
                       </span>
                     </div>
                     <div className="mt-8 grid grid-cols-4 gap-6">
                       {[
-                        { label: '단백질', key: 'protein' },
-                        { label: '당류', key: 'sugar' },
-                        { label: '탄수화물', key: 'carbohydrate' },
-                        { label: '지방', key: 'fat' },
+                        { label: '단백질', key: 'protein' as const },
+                        { label: '당류', key: 'sugar' as const },
+                        { label: '탄수화물', key: 'carbohydrate' as const },
+                        { label: '지방', key: 'fat' as const },
                       ].map((nutri) => (
                         <div
                           key={nutri.key}
@@ -253,17 +290,16 @@ export const ProductPreviewModal = ({
                           <div className="mb-4 typo-body-11-r text-gray-500">
                             {nutri.label}
                           </div>
-                          {/* 💡 데이터 바인딩: 영양성분 값들 */}
                           <div className="typo-title-14-sb text-gray-900">
-                            {option?.[nutri.key] || 0}g
+                            {option[nutri.key] ?? 0}g
                           </div>
                         </div>
                       ))}
                     </div>
                   </div>
-                </div>
-              </>
-            ),
+                )}
+              </div>
+            ))
           )}
 
           <div className="p-16">
@@ -273,15 +309,14 @@ export const ProductPreviewModal = ({
           </div>
         </div>
 
-        {/* 7. 상세 설명 영역 (이미지 위주) */}
+        {/* 7. 상세 설명 */}
         <div className="mb-10 bg-white px-20 py-24 text-left">
           <div className="leading-relaxed text-gray-700">
-            {/* 데이터 바인딩: description */}
-            {formData.description || '상품 상세 설명이 들어가는 자리입니다.'}
+            상품 상세 설명이 들어가는 자리입니다.
           </div>
         </div>
 
-        {/* 하단 고정 바 (구매하기) */}
+        {/* 하단 고정 바 */}
         <div className="sticky bottom-0 z-10 flex w-full items-center gap-10 border-t border-gray-100 bg-white p-16 px-20 py-16">
           <div className="flex size-56 items-center justify-center rounded-full border border-gray-200 text-gray-400">
             <Heart size={32} />
@@ -291,6 +326,7 @@ export const ProductPreviewModal = ({
           </button>
         </div>
       </div>
+
       {/* 푸터 */}
       <div className="flex w-screen justify-end border-t border-gray-200 bg-white p-24">
         <Button title="닫기" onClick={onClose} size="lg" />
@@ -298,35 +334,3 @@ export const ProductPreviewModal = ({
     </div>
   )
 }
-
-// DaySelector 프리뷰용 컴포넌트 (readOnly 모드 추가 가정)
-// 기존 shared/block/day-selector/day-selector.tsx 파일을 활용하시거나 별도로 정의해 주세요.
-const DaySelector = ({
-  selectedDays,
-  readOnly,
-}: {
-  selectedDays: string[]
-  readOnly?: boolean
-}) => {
-  const days = [
-    { key: 'mon', label: '월' },
-    { key: 'tue', label: '화' },
-    { key: 'wed', label: '수' },
-    { key: 'thu', label: '목' },
-    { key: 'fri', label: '금' },
-    { key: 'sat', label: '토' },
-    { key: 'sun', label: '일' },
-  ]
-  return (
-    <div className="flex gap-4">
-      {days.map((day) => (
-        <span
-          key={day.key}
-          className={`flex size-32 items-center justify-center rounded-full border typo-body-12-sb ${selectedDays.includes(day.key) ? 'border-[#F26565] bg-[#F26565] text-white' : 'border-gray-100 bg-white text-gray-400'}`}
-        >
-          {day.label}
-        </span>
-      ))}
-    </div>
-  )
-}

From 5bbd414df49e398045343092ea7022e9185de163 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Fri, 24 Apr 2026 21:51:21 +0900
Subject: [PATCH 21/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=B2=B4=ED=81=AC?=
 =?UTF-8?q?=20=EB=90=9C=20tag=20=EA=B0=9C=EB=B3=84=20=EB=B0=98=EC=98=81?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-options-form.ui.tsx           |  2 +-
 .../create-form/create-form-provider.ui.tsx   | 56 ++++++++++---------
 .../create-form/create-form-steps.context.ts  |  4 +-
 .../create-preview-modal.ui.tsx               | 53 +++++++++++-------
 4 files changed, 67 insertions(+), 48 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
index ff611410..39648dc0 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
@@ -58,7 +58,7 @@ export const ProductOptionForm = ({
     const sugar = Number(nutritionInputs.sugar?.displayValue || 0)
     const protein = Number(nutritionInputs.protein?.displayValue || 0)
     const fat = Number(nutritionInputs.fat?.displayValue || 0)
-    setNutritionData({ sugar, protein, fat, ingredientCategories })
+    setNutritionData(index, { sugar, protein, fat, ingredientCategories })
   }, [
     nutritionInputs.sugar?.displayValue,
     nutritionInputs.protein?.displayValue,
diff --git a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
index 16da7fa2..c74ab689 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
@@ -74,43 +74,49 @@ export const FormStepsProvider = ({
 
   //필수성분, 적용된 카테고리 부분
 
-  const [nutritionData, setNutritionData] = useState<NutritionData>({
-    sugar: 0,
-    protein: 0,
-    fat: 0,
-    ingredientCategories: [],
-  })
+  const [nutritionDataList, setNutritionDataList] = useState<NutritionData[]>([
+    {
+      sugar: 0,
+      protein: 0,
+      fat: 0,
+      ingredientCategories: [],
+    },
+  ])
+
+  const setNutritionData = useCallback((index: number, data: NutritionData) => {
+    setNutritionDataList((prev) => {
+      const next = [...prev]
+      next[index] = data
+      return next
+    })
+  }, [])
 
   const activeTags: ActiveTags = useMemo(() => {
-    const { sugar, protein, fat, ingredientCategories } = nutritionData
-
-    // 값이 실제로 입력되었는지 확인 (비어있거나 0이면 false 처리)
-    const hasProtein = protein > 0
-    const hasSugar = sugar > 0
-    const hasFat = fat > 0
-
-    const isGlutenFree = ingredientCategories.includes('glutenFree')
-    const isVegan = ingredientCategories.includes('vegan')
-
-    // "값이 존재함 && 기준치 미만/이상" 두 조건을 모두 만족해야 함
-    const isHighProtein = hasProtein && protein >= 11
-    const isLowFat = hasFat && fat < 3
-    const isLowSugar = hasSugar && sugar < 5
+    // 모든 옵션의 ingredientCategories 합산
+    const allCategories = nutritionDataList.flatMap(
+      (d) => d.ingredientCategories,
+    )
+
+    // 각 영양소는 하나라도 기준 충족하면 활성화
+    const isGlutenFree = allCategories.includes('glutenFree')
+    const isVegan = allCategories.includes('vegan')
+    const isHighProtein = nutritionDataList.some(
+      (d) => d.protein > 0 && d.protein >= 11,
+    )
+    const isLowFat = nutritionDataList.some((d) => d.fat > 0 && d.fat < 3)
+    const isLowSugar = nutritionDataList.some((d) => d.sugar > 0 && d.sugar < 5)
 
     return {
-      // 필수 성분 매칭 (순서 기준)
       [EssentialOptions[0].title]: isGlutenFree,
       [EssentialOptions[1].title]: isVegan,
       [EssentialOptions[2].title]: isHighProtein,
       [EssentialOptions[3].title]: isLowFat,
       [EssentialOptions[4].title]: isLowSugar,
-
-      // 적용 카테고리 매칭 (순서 기준)
       [CategoryOptions[0].title]: isLowSugar && isLowFat,
       [CategoryOptions[1].title]: isHighProtein,
       [CategoryOptions[2].title]: isVegan && isGlutenFree,
     }
-  }, [nutritionData])
+  }, [nutritionDataList])
 
   //상품 정보, 상품 옵션 정보에서 공유하는 가격
   const [productPrice, setProductPrice] = useState<number | null>(null)
@@ -126,7 +132,7 @@ export const FormStepsProvider = ({
         headerHeight,
         setHeaderHeight,
         isScrollingToStep, // ref 전달
-        nutritionData,
+        nutritionDataList,
         setNutritionData,
         activeTags,
         productPrice,
diff --git a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
index a2d59d18..39bfbf17 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
@@ -25,8 +25,8 @@ interface FormStepsContextType {
 
   isScrollingToStep: React.MutableRefObject<boolean>
 
-  nutritionData: NutritionData
-  setNutritionData: React.Dispatch<React.SetStateAction<NutritionData>>
+  nutritionDataList: NutritionData[]
+  setNutritionData: (index: number, data: NutritionData) => void
   activeTags: ActiveTags
 
   productPrice: number | null
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 789ed67b..0da82f69 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -3,6 +3,8 @@ import { Button } from '@dessert/ui'
 import { ChevronDown, ChevronUp, Heart, Star } from 'lucide-react'
 import { useFormContext } from 'react-hook-form'
 
+import { EssentialOptions, ProductOptionFormInput } from '@/entity/products'
+
 import { useCreateFormSteps } from '../create-form'
 import { CreateProductForm } from '../create-form/product-create.types'
 
@@ -33,7 +35,21 @@ const DaySelector = ({ selectedDays }: { selectedDays: string[] }) => {
     </div>
   )
 }
+const getOptionTags = (option: ProductOptionFormInput) => {
+  const tags: string[] = []
+
+  const { ingredientCategories, protein, fat, sugar } = option
 
+  if (ingredientCategories.includes('glutenFree'))
+    tags.push(EssentialOptions[0].title) // 글루텐프리
+  if (ingredientCategories.includes('vegan'))
+    tags.push(EssentialOptions[1].title) // 비건
+  if (protein && protein >= 11) tags.push(EssentialOptions[2].title) // 고단백
+  if (fat && fat < 3) tags.push(EssentialOptions[3].title) // 저지방
+  if (sugar && sugar < 5) tags.push(EssentialOptions[4].title) // 저당
+
+  return tags
+}
 export const ProductPreviewModal = ({
   isOpen,
   onClose,
@@ -43,7 +59,7 @@ export const ProductPreviewModal = ({
 }) => {
   const { watch } = useFormContext<CreateProductForm>()
   const formData = watch()
-  const { activeTags, productPrice, nutritionData } = useCreateFormSteps()
+  const { activeTags, productPrice } = useCreateFormSteps()
 
   if (!isOpen) return null
 
@@ -63,11 +79,6 @@ export const ProductPreviewModal = ({
       ? price - discountAmount
       : Math.round(price * (1 - discountAmount / 100))
 
-  //tags
-  const activeTagList = Object.entries(activeTags)
-    .filter(([, value]) => value)
-    .map(([key]) => key)
-
   // mainImage를 ObjectURL로 변환해서 미리보기
   const mainImageUrl = formData.mainImage
     ? URL.createObjectURL(formData.mainImage)
@@ -235,22 +246,24 @@ export const ProductPreviewModal = ({
 
                 {/* 태그 */}
                 <div className="flex flex-wrap gap-6 border-t border-gray-300 p-16">
-                  {activeTagList.length > 0 ? (
-                    activeTagList.map((tag) => (
-                      <span
-                        key={tag}
-                        className="rounded-4 border border-gray-200 px-6 py-2 typo-body-10-r text-gray-600"
-                      >
-                        {tag}
+                  {(() => {
+                    const tags = getOptionTags(option)
+                    return tags.length > 0 ? (
+                      tags.map((tag) => (
+                        <span
+                          key={tag}
+                          className="rounded-4 border border-gray-200 px-6 py-2 typo-body-10-r text-gray-600"
+                        >
+                          {tag}
+                        </span>
+                      ))
+                    ) : (
+                      <span className="typo-body-12-r text-gray-400">
+                        성분 카테고리 미입력
                       </span>
-                    ))
-                  ) : (
-                    <span className="typo-body-12-r text-gray-400">
-                      성분 카테고리 미입력
-                    </span>
-                  )}
+                    )
+                  })()}
                 </div>
-
                 {/* 주문 가능날짜 */}
                 <div className="p-16 pt-0">
                   <p className="mb-2 typo-body-12-sb text-gray-500">

From 3e41f2098eeb62888b272f5dd03eb28325cae916 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Fri, 24 Apr 2026 22:02:29 +0900
Subject: [PATCH 22/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=98=81=EC=96=91?=
 =?UTF-8?q?=20=EC=84=B1=EB=B6=84=20=ED=83=80=EC=9E=85=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=B4=88=EA=B8=B0=EA=B0=92=20null=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-options-form.ui.tsx           | 20 ++++++++++++++-----
 .../use-product-options.form.hook.ts          | 18 -----------------
 .../create-form/create-form-provider.ui.tsx   | 15 +++++++-------
 .../create-form/create-form-steps.context.ts  |  6 +++---
 .../create-preview-modal.ui.tsx               | 12 +++++------
 5 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
index 39648dc0..d1e5910b 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
@@ -12,7 +12,7 @@ import { useProductOptionForm } from './use-product-options.form.hook'
 import { ProductFinalPrice, useCreateFormSteps } from '../create-form'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
 
-interface Props {
+interface ProductOptionFormProps {
   index: number
   isLast: boolean
   onDelete: () => void
@@ -26,7 +26,7 @@ export const ProductOptionForm = ({
   onDelete,
   onCopy,
   onAdd,
-}: Props) => {
+}: ProductOptionFormProps) => {
   const { setProductFields, setNutritionData, productPrice } =
     useCreateFormSteps()
   const {
@@ -55,9 +55,19 @@ export const ProductOptionForm = ({
   }, [isFormField, setProductFields])
 
   useEffect(() => {
-    const sugar = Number(nutritionInputs.sugar?.displayValue || 0)
-    const protein = Number(nutritionInputs.protein?.displayValue || 0)
-    const fat = Number(nutritionInputs.fat?.displayValue || 0)
+    const sugar =
+      nutritionInputs.sugar?.displayValue !== ''
+        ? Number(nutritionInputs.sugar?.displayValue)
+        : null
+    const protein =
+      nutritionInputs.protein?.displayValue !== ''
+        ? Number(nutritionInputs.protein?.displayValue)
+        : null
+    const fat =
+      nutritionInputs.fat?.displayValue !== ''
+        ? Number(nutritionInputs.fat?.displayValue)
+        : null
+
     setNutritionData(index, { sugar, protein, fat, ingredientCategories })
   }, [
     nutritionInputs.sugar?.displayValue,
diff --git a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
index 9ec752a0..8591a39f 100644
--- a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
@@ -130,24 +130,6 @@ export function useProductOptionForm(
   const isNutritionValid =
     !hasNutrition || nutritionValues.every((val) => val !== null)
 
-  const optionErrorFields = [
-    'mainCategory',
-    'subCategory',
-    'optionName',
-    'ingredientCategories',
-    'additionalPrice',
-    'stockQuantity',
-    'shippingDays',
-    'hasNutrition',
-    'totalWeight',
-    'calories',
-    'carbohydrate',
-    'sugar',
-    'protein',
-    'fat',
-    'sodium',
-  ] as const
-
   const errors = form.formState.errors.options?.[index]
   const hasOptionErrors = Object.keys(errors ?? {}).length > 0
 
diff --git a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
index c74ab689..542ae046 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
@@ -76,9 +76,9 @@ export const FormStepsProvider = ({
 
   const [nutritionDataList, setNutritionDataList] = useState<NutritionData[]>([
     {
-      sugar: 0,
-      protein: 0,
-      fat: 0,
+      sugar: null,
+      protein: null,
+      fat: null,
       ingredientCategories: [],
     },
   ])
@@ -101,11 +101,12 @@ export const FormStepsProvider = ({
     const isGlutenFree = allCategories.includes('glutenFree')
     const isVegan = allCategories.includes('vegan')
     const isHighProtein = nutritionDataList.some(
-      (d) => d.protein > 0 && d.protein >= 11,
+      (d) => d.protein !== null && d.protein >= 11,
+    )
+    const isLowFat = nutritionDataList.some((d) => d.fat !== null && d.fat < 3)
+    const isLowSugar = nutritionDataList.some(
+      (d) => d.sugar !== null && d.sugar < 5,
     )
-    const isLowFat = nutritionDataList.some((d) => d.fat > 0 && d.fat < 3)
-    const isLowSugar = nutritionDataList.some((d) => d.sugar > 0 && d.sugar < 5)
-
     return {
       [EssentialOptions[0].title]: isGlutenFree,
       [EssentialOptions[1].title]: isVegan,
diff --git a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
index 39bfbf17..ddd302a2 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
@@ -3,9 +3,9 @@ import React, { createContext } from 'react'
 export type FormStepStatus = Record<string, boolean>
 
 export interface NutritionData {
-  sugar: number
-  protein: number
-  fat: number
+  sugar: number | null
+  protein: number | null
+  fat: number | null
   ingredientCategories: string[]
 }
 
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 0da82f69..4917e664 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -41,12 +41,12 @@ const getOptionTags = (option: ProductOptionFormInput) => {
   const { ingredientCategories, protein, fat, sugar } = option
 
   if (ingredientCategories.includes('glutenFree'))
-    tags.push(EssentialOptions[0].title) // 글루텐프리
+    tags.push(EssentialOptions[0].title)
   if (ingredientCategories.includes('vegan'))
-    tags.push(EssentialOptions[1].title) // 비건
-  if (protein && protein >= 11) tags.push(EssentialOptions[2].title) // 고단백
-  if (fat && fat < 3) tags.push(EssentialOptions[3].title) // 저지방
-  if (sugar && sugar < 5) tags.push(EssentialOptions[4].title) // 저당
+    tags.push(EssentialOptions[1].title)
+  if (protein !== null && protein >= 11) tags.push(EssentialOptions[2].title)
+  if (fat !== null && fat < 3) tags.push(EssentialOptions[3].title)
+  if (sugar !== null && sugar < 5) tags.push(EssentialOptions[4].title)
 
   return tags
 }
@@ -59,7 +59,7 @@ export const ProductPreviewModal = ({
 }) => {
   const { watch } = useFormContext<CreateProductForm>()
   const formData = watch()
-  const { activeTags, productPrice } = useCreateFormSteps()
+  const { productPrice } = useCreateFormSteps()
 
   if (!isOpen) return null
 

From dfa7b19888e43978b43d7b2e28a340fe4bf71dc2 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Fri, 24 Apr 2026 22:05:47 +0900
Subject: [PATCH 23/56] =?UTF-8?q?[seller]=20refactor(173):=20=EB=B0=B0?=
 =?UTF-8?q?=EC=86=A1=EC=9D=BC=20entity=20=ED=99=9C=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-preview-modal.ui.tsx               | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 4917e664..423a06c7 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -3,28 +3,24 @@ import { Button } from '@dessert/ui'
 import { ChevronDown, ChevronUp, Heart, Star } from 'lucide-react'
 import { useFormContext } from 'react-hook-form'
 
-import { EssentialOptions, ProductOptionFormInput } from '@/entity/products'
+import {
+  EssentialOptions,
+  ProductOptionFormInput,
+  SHIPPING_DAYS,
+} from '@/entity/products'
 
 import { useCreateFormSteps } from '../create-form'
 import { CreateProductForm } from '../create-form/product-create.types'
 
 const DaySelector = ({ selectedDays }: { selectedDays: string[] }) => {
-  const days = [
-    { key: 'mon', label: '월' },
-    { key: 'tue', label: '화' },
-    { key: 'wed', label: '수' },
-    { key: 'thu', label: '목' },
-    { key: 'fri', label: '금' },
-    { key: 'sat', label: '토' },
-    { key: 'sun', label: '일' },
-  ]
+  const days = SHIPPING_DAYS
   return (
     <div className="flex gap-4">
       {days.map((day) => (
         <span
-          key={day.key}
+          key={day.value}
           className={`flex size-32 items-center justify-center rounded-full border typo-body-12-sb ${
-            selectedDays.includes(day.key)
+            selectedDays.includes(day.value)
               ? 'border-[#F26565] bg-[#F26565] text-white'
               : 'border-gray-100 bg-white text-gray-400'
           }`}

From f2489b8df5c37439e496d052439dbc58726f3727 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 00:10:09 +0900
Subject: [PATCH 24/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=97=90=EB=94=94?=
 =?UTF-8?q?=ED=84=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80->=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-detail-editor-modal.ui.tsx         | 86 +++++++++++++++++++
 .../create-form-detail-area.ui.tsx            | 14 ++-
 .../create-preview-modal.ui.tsx               | 11 ++-
 .../src/pages/products/create/create-page.tsx |  1 +
 packages/ui/src/editor/editor.css             | 18 +++-
 packages/ui/src/editor/editor.tsx             |  5 +-
 6 files changed, 122 insertions(+), 13 deletions(-)
 create mode 100644 apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx

diff --git a/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx b/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
new file mode 100644
index 00000000..64cfa12a
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
@@ -0,0 +1,86 @@
+// import { useState } from 'react'
+
+// import { BbanggreuiOvenLogo } from '@dessert/icons'
+// import { Button, Editor } from '@dessert/ui'
+// import { useNavigate } from 'react-router-dom'
+
+// import { useProductCreationStore } from '@/features/products/create/create-form/product-creation.store'
+
+import { useState } from 'react'
+
+import { BbanggreuiOvenLogo } from '@dessert/icons'
+import { Button, Editor } from '@dessert/ui'
+
+import { useProductCreationStore } from '../create-form/product-creation.store'
+
+interface ProductEditorModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const ProductEditorModal = ({
+  isOpen,
+  onClose,
+}: ProductEditorModalProps) => {
+  const { productDetail, setProductDetail } = useProductCreationStore()
+
+  // 편집 시 로컬 상태를 사용하고 등록 시에만 스토어에 반영합니다 (CodeRabbit 피드백 반영)
+  const [localDetail, setLocalDetail] = useState(productDetail)
+  if (!isOpen) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-9999 flex flex-col items-center bg-gray-100"
+      onClick={onClose}
+    >
+      {/* Header */}
+      <div
+        className="h-header w-screen border-b border-gray-200 bg-white px-24 py-20"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <BbanggreuiOvenLogo />
+      </div>
+
+      {/* Content Body */}
+      <div
+        className="w-full flex-1 overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Editor wrapper */}
+        <div className="flex h-full justify-center">
+          <Editor
+            value={localDetail}
+            onChange={setLocalDetail}
+            image={true}
+            placeholder="자유롭게 상세페이지를 작성해보세요 (권장크기 : 가로 860px)"
+            className="block! size-full rounded-none! border-none!"
+          />
+        </div>
+      </div>
+
+      {/* Footer Nav */}
+      <footer
+        className="flex w-screen justify-end gap-12 border-t border-gray-200 bg-white p-24"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Button
+          type="button"
+          title="취소"
+          variant="primary-outlined"
+          size="lg"
+          onClick={onClose}
+        />
+        <Button
+          type="button"
+          title="등록하기"
+          variant="primary-filled"
+          size="lg"
+          onClick={() => {
+            setProductDetail(localDetail)
+            onClose()
+          }}
+        />
+      </footer>
+    </div>
+  )
+}
diff --git a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
index fdf436b9..b295806d 100644
--- a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
@@ -1,5 +1,4 @@
-import { useEffect } from 'react'
-
+import { useEffect, useState } from 'react'
 
 import { PlusIcon, SquarePenIcon } from '@dessert/icons'
 import { Button, Label } from '@dessert/ui'
@@ -8,10 +7,12 @@ import { useNavigate } from 'react-router-dom'
 import AppLogoImage from '@/assets/images/apple-120x120.png'
 import { ROUTES } from '@/shared/constant/routes'
 
+import { ProductEditorModal } from './create-detail-editor-modal.ui'
 import { useProductCreationStore } from '../create-form/product-creation.store'
 import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductDetailArea = () => {
+  const [isEditorOpen, setIsEditorOpen] = useState(false)
   const navigate = useNavigate()
   const { productDetail } = useProductCreationStore()
   const { setProductFields } = useCreateFormSteps()
@@ -62,7 +63,7 @@ export const ProductDetailArea = () => {
             size="lg"
             leftIcon={<SquarePenIcon width={24} height={24} />}
             className="w-full"
-            onClick={handleEditClick}
+            onClick={() => setIsEditorOpen(true)}
           />
         </div>
       ) : (
@@ -74,9 +75,14 @@ export const ProductDetailArea = () => {
           size="lg"
           leftIcon={<PlusIcon width={24} height={24} />}
           className="w-full"
-          onClick={handleEditClick}
+          onClick={() => setIsEditorOpen(true)}
         />
       )}
+
+      <ProductEditorModal
+        isOpen={isEditorOpen}
+        onClose={() => setIsEditorOpen(false)}
+      />
     </>
   )
 }
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 423a06c7..3e449639 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -46,13 +46,16 @@ const getOptionTags = (option: ProductOptionFormInput) => {
 
   return tags
 }
+
+interface ProductPreviewModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
 export const ProductPreviewModal = ({
   isOpen,
   onClose,
-}: {
-  isOpen: boolean
-  onClose: () => void
-}) => {
+}: ProductPreviewModalProps) => {
   const { watch } = useFormContext<CreateProductForm>()
   const formData = watch()
   const { productPrice } = useCreateFormSteps()
diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index 49e8ef94..d35e741a 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -16,6 +16,7 @@ import {
   useCreateFormSteps,
   useCreateProductForm,
 } from '@/features/products/create'
+import { ProductEditorModal } from '@/features/products/create/create-form-detail/create-detail-editor-modal.ui'
 import { ProductPreviewModal } from '@/features/products/create/create-preview/create-preview-modal.ui'
 
 function CreatePage() {
diff --git a/packages/ui/src/editor/editor.css b/packages/ui/src/editor/editor.css
index 85d7cf01..a1f4d54e 100644
--- a/packages/ui/src/editor/editor.css
+++ b/packages/ui/src/editor/editor.css
@@ -1,11 +1,18 @@
 /* Quill 에디터 스타일 오버라이드 */
 
 /* 툴바 스타일 */
+
 .quill-wrapper .ql-toolbar {
   border: none;
   border-bottom: 1px solid var(--color-gray-200);
-  padding: 8px 12px;
+  padding: 20px 48px;
   font-family: inherit;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: white;
+  width: 100vw;
+  left: 0;
 }
 
 /* 에디터 본문 스타일 */
@@ -14,17 +21,22 @@
   font-family: inherit;
   font-size: 14px;
   max-height: 100%;
-  display: flex;
-  flex-direction: column;
+  background-color: #fafafa;
 }
 
 .quill-wrapper .ql-editor {
+  position: relative;
   padding: 12px;
   line-height: 1.6;
   color: var(--color-gray-900);
   overflow-y: auto;
   flex: 1;
   outline: none;
+  max-width: 1440px;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  background-color: #fff;
 }
 
 .quill-wrapper .ql-editor.ql-blank::before {
diff --git a/packages/ui/src/editor/editor.tsx b/packages/ui/src/editor/editor.tsx
index 37df1f93..913347a0 100644
--- a/packages/ui/src/editor/editor.tsx
+++ b/packages/ui/src/editor/editor.tsx
@@ -101,7 +101,7 @@ const Editor = ({
   image = false,
   onImageUpload,
   className = '',
-  height = 300,
+  height,
 }: EditorProps) => {
   const isReadOnly = disabled || !onChange
   const quillRef = useRef<ReactQuill>(null)
@@ -166,6 +166,7 @@ const Editor = ({
       className={cn(
         // eslint-disable-next-line better-tailwindcss/no-unknown-classes
         'quill-wrapper w-full overflow-hidden rounded-10 border border-gray-300 bg-white transition-all duration-200',
+        !height && 'flex flex-1 flex-col',
         disabled && 'cursor-not-allowed bg-gray-100 opacity-60',
         className,
       )}
@@ -179,7 +180,7 @@ const Editor = ({
         formats={formats}
         placeholder={placeholder}
         readOnly={isReadOnly}
-        style={{ height }}
+        style={height ? { height } : { height: 'calc(100% - 66px)' }}
       />
     </div>
   )

From 30c9f760a53f2b59577d4825e3a32928b1c89252 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 00:10:50 +0900
Subject: [PATCH 25/56] =?UTF-8?q?[seller]=20refactor(173):=20=EC=A3=BC?=
 =?UTF-8?q?=EC=84=9D=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-detail/create-detail-editor-modal.ui.tsx  | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx b/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
index 64cfa12a..4bd32dc8 100644
--- a/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
@@ -1,11 +1,3 @@
-// import { useState } from 'react'
-
-// import { BbanggreuiOvenLogo } from '@dessert/icons'
-// import { Button, Editor } from '@dessert/ui'
-// import { useNavigate } from 'react-router-dom'
-
-// import { useProductCreationStore } from '@/features/products/create/create-form/product-creation.store'
-
 import { useState } from 'react'
 
 import { BbanggreuiOvenLogo } from '@dessert/icons'

From bc31c8133f934a0ca9003448581e1f5dbd52b662 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 00:16:48 +0900
Subject: [PATCH 26/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=95=88=EC=93=B0?=
 =?UTF-8?q?=EB=8A=94=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../products/create/detail-edit-page.tsx      | 61 -------------------
 1 file changed, 61 deletions(-)
 delete mode 100644 apps/seller/src/pages/products/create/detail-edit-page.tsx

diff --git a/apps/seller/src/pages/products/create/detail-edit-page.tsx b/apps/seller/src/pages/products/create/detail-edit-page.tsx
deleted file mode 100644
index 0ddb8a2c..00000000
--- a/apps/seller/src/pages/products/create/detail-edit-page.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useState } from 'react'
-
-import { BbanggreuiOvenLogo } from '@dessert/icons'
-import { Button, Editor } from '@dessert/ui'
-import { useNavigate } from 'react-router-dom'
-
-import { useProductCreationStore } from '@/features/products/create/create-form/product-creation.store'
-
-export function DetailEditPage() {
-  const navigate = useNavigate()
-  const { productDetail, setProductDetail } = useProductCreationStore()
-
-  // 편집 시 로컬 상태를 사용하고 등록 시에만 스토어에 반영합니다 (CodeRabbit 피드백 반영)
-  const [localDetail, setLocalDetail] = useState(productDetail)
-
-  return (
-    <div className="flex h-screen w-full flex-col overflow-hidden bg-gray-50">
-      {/* Header */}
-      <header className="flex h-header shrink-0 items-center border-b border-gray-300 bg-white px-24 py-10">
-        <div className="flex items-center">
-          <BbanggreuiOvenLogo className="h-[42px] w-auto" />
-        </div>
-      </header>
-
-      {/* Content Body */}
-      <main className="flex flex-1 flex-col items-center overflow-auto px-[196px] pb-[100px]">
-        {/* Editor wrapper */}
-        <div className="mt-32 flex min-h-[710px] w-full max-w-[1440px] flex-col bg-white p-32 shadow-sm">
-          <Editor
-            value={localDetail}
-            onChange={setLocalDetail}
-            image={true}
-            height={600}
-            placeholder="자유롭게 상세페이지를 작성해보세요 (권장크기 : 가로 860px)"
-          />
-        </div>
-      </main>
-
-      {/* Footer Nav */}
-      <footer className="fixed bottom-0 z-10 flex w-full shrink-0 items-center justify-end gap-12 border-t border-gray-200 bg-white p-24">
-        <Button
-          type="button"
-          title="취소"
-          variant="primary-outlined"
-          size="lg"
-          onClick={() => navigate(-1)}
-        />
-        <Button
-          type="button"
-          title="등록하기"
-          variant="primary-filled"
-          size="lg"
-          onClick={() => {
-            setProductDetail(localDetail)
-            navigate(-1)
-          }}
-        />
-      </footer>
-    </div>
-  )
-}

From efca2eecb6c7c6513933732e7c49a6c8a8611650 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 00:18:40 +0900
Subject: [PATCH 27/56] =?UTF-8?q?[seller]=20fix(173):=20main.tsx=20import?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/seller/src/main.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/seller/src/main.tsx b/apps/seller/src/main.tsx
index d8bc3abf..2085148b 100644
--- a/apps/seller/src/main.tsx
+++ b/apps/seller/src/main.tsx
@@ -8,7 +8,6 @@ import SocialCallbackPage from '@/pages/auth/social-callback-page'
 import AllOrdersPage from '@/pages/orders/all-orders/all-orders-page'
 import CompletedOrdersPage from '@/pages/orders/completed-orders/completed-orders-page'
 import CreatePage from '@/pages/products/create/create-page'
-import { DetailEditPage } from '@/pages/products/create/detail-edit-page'
 import ProductsPage from '@/pages/products/product/product-page'
 import SettlementPage from '@/pages/settlement/settlement-page'
 import { ROUTES } from '@/shared/constant/routes'
@@ -37,7 +36,6 @@ const router = createBrowserRouter([
       { path: ROUTES.ORDERS.COMPLETED, element: <CompletedOrdersPage /> },
       { path: ROUTES.PRODUCTS.ALL, element: <ProductsPage /> },
       { path: ROUTES.PRODUCTS.CREATE, element: <CreatePage /> },
-      { path: ROUTES.PRODUCTS.CREATE_DETAIL, element: <DetailEditPage /> },
       { path: ROUTES.SETTLEMENTS.ALL, element: <SettlementPage /> },
     ],
   },

From 091e904475d531006932bdb18c6af2627c89c138 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 12:37:58 +0900
Subject: [PATCH 28/56] =?UTF-8?q?[seller]=20feat(173):=20=EB=AF=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EB=B1=83=EC=A7=80=EC=99=80=20ico?=
 =?UTF-8?q?n=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=A7=A4=ED=95=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-preview-modal.ui.tsx               | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 3e449639..f28501fc 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -3,6 +3,9 @@ import { Button } from '@dessert/ui'
 import { ChevronDown, ChevronUp, Heart, Star } from 'lucide-react'
 import { useFormContext } from 'react-hook-form'
 
+import Icon1 from '@/assets/icons/preview/preview-icon1.png'
+import Icon2 from '@/assets/icons/preview/preview-icon2.png'
+import Icon3 from '@/assets/icons/preview/preview-icon3.png'
 import {
   EssentialOptions,
   ProductOptionFormInput,
@@ -89,6 +92,13 @@ export const ProductPreviewModal = ({
 
   const options = formData.options ?? []
 
+  //뱃지 매핑
+  const BADGES = [
+    { label: '맛있어요', icon: Icon1 },
+    { label: '담백해요', icon: Icon2 },
+    { label: '부드러워요', icon: Icon3 },
+  ]
+
   return (
     <div
       className="fixed inset-0 z-9999 flex flex-col items-center bg-gray-100"
@@ -203,12 +213,17 @@ export const ProductPreviewModal = ({
             리뷰 대표 배지
           </h3>
           <div className="flex gap-10 border-t border-gray-100 p-16">
-            {['맛있어요', '담백해요', '부드러워요'].map((badge) => (
+            {BADGES.map(({ label, icon }) => (
               <div
-                key={badge}
-                className="flex flex-1 flex-col items-center gap-4 rounded-10 border border-gray-100 text-center"
+                key={label}
+                className="flex flex-1 flex-col items-center gap-4 rounded-10 border-2 border-gray-300 p-8 text-center"
               >
-                <span className="typo-body-14-m text-gray-600">{badge}</span>
+                <img
+                  src={icon}
+                  alt={label}
+                  className="size-40 object-contain"
+                />
+                <span className="typo-body-14-m text-gray-600">{label}</span>
               </div>
             ))}
           </div>

From 4abdbe69bc68b3d7b1ef1339cda801dd47586154 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 12:51:50 +0900
Subject: [PATCH 29/56] =?UTF-8?q?[seller]=20feat(173):=20=EB=AF=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0=EC=97=90=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EC=9E=85=EB=A0=A5=EA=B0=92=20=EB=85=B8?=
 =?UTF-8?q?=EC=B6=9C=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-detail-area.ui.tsx            |  7 ---
 .../create-preview-modal.ui.tsx               | 17 +++++--
 packages/ui/src/editor/editor.css             | 51 +++++++++++++++++++
 3 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
index b295806d..0ff754a6 100644
--- a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
@@ -2,10 +2,8 @@ import { useEffect, useState } from 'react'
 
 import { PlusIcon, SquarePenIcon } from '@dessert/icons'
 import { Button, Label } from '@dessert/ui'
-import { useNavigate } from 'react-router-dom'
 
 import AppLogoImage from '@/assets/images/apple-120x120.png'
-import { ROUTES } from '@/shared/constant/routes'
 
 import { ProductEditorModal } from './create-detail-editor-modal.ui'
 import { useProductCreationStore } from '../create-form/product-creation.store'
@@ -13,7 +11,6 @@ import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductDetailArea = () => {
   const [isEditorOpen, setIsEditorOpen] = useState(false)
-  const navigate = useNavigate()
   const { productDetail } = useProductCreationStore()
   const { setProductFields } = useCreateFormSteps()
 
@@ -29,10 +26,6 @@ export const ProductDetailArea = () => {
     }))
   }, [hasContent, setProductFields])
 
-  const handleEditClick = () => {
-    navigate(ROUTES.PRODUCTS.CREATE_DETAIL)
-  }
-
   return (
     <>
       <div className="mb-24 flex flex-col gap-4">
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index f28501fc..6a50cd84 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -11,9 +11,11 @@ import {
   ProductOptionFormInput,
   SHIPPING_DAYS,
 } from '@/entity/products'
+import { cn } from '@/shared/libs/utils'
 
 import { useCreateFormSteps } from '../create-form'
 import { CreateProductForm } from '../create-form/product-create.types'
+import { useProductCreationStore } from '../create-form/product-creation.store'
 
 const DaySelector = ({ selectedDays }: { selectedDays: string[] }) => {
   const days = SHIPPING_DAYS
@@ -62,7 +64,7 @@ export const ProductPreviewModal = ({
   const { watch } = useFormContext<CreateProductForm>()
   const formData = watch()
   const { productPrice } = useCreateFormSteps()
-
+  const { productDetail } = useProductCreationStore()
   if (!isOpen) return null
 
   const price = formData.price ?? 0
@@ -338,9 +340,16 @@ export const ProductPreviewModal = ({
 
         {/* 7. 상세 설명 */}
         <div className="mb-10 bg-white px-20 py-24 text-left">
-          <div className="leading-relaxed text-gray-700">
-            상품 상세 설명이 들어가는 자리입니다.
-          </div>
+          {productDetail ? (
+            <div
+              className={cn('ql-editor leading-relaxed text-gray-700')}
+              dangerouslySetInnerHTML={{ __html: productDetail }}
+            />
+          ) : (
+            <p className="typo-body-14-r text-gray-400">
+              상세 설명을 등록해주세요
+            </p>
+          )}
         </div>
 
         {/* 하단 고정 바 */}
diff --git a/packages/ui/src/editor/editor.css b/packages/ui/src/editor/editor.css
index a1f4d54e..07aa195a 100644
--- a/packages/ui/src/editor/editor.css
+++ b/packages/ui/src/editor/editor.css
@@ -69,3 +69,54 @@
 .quill-wrapper .ql-editor img {
   max-width: 100%;
 }
+
+/* 에디터 전용 스타일 */
+/* 프리뷰 렌더링용 - Quill HTML 스타일 복원 */
+.ql-editor h1 {
+  font-size: 2em;
+  font-weight: bold;
+  margin: 0.67em 0;
+}
+
+.ql-editor h2 {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin: 0.75em 0;
+}
+
+.ql-editor h3 {
+  font-size: 1.17em;
+  font-weight: bold;
+  margin: 0.83em 0;
+}
+
+.ql-editor strong {
+  font-weight: bold;
+}
+
+.ql-editor em {
+  font-style: italic;
+}
+
+.ql-editor u {
+  text-decoration: underline;
+}
+
+.ql-editor s {
+  text-decoration: line-through;
+}
+
+.ql-editor ol li {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+}
+
+.ql-editor ul li {
+  list-style-type: disc;
+  padding-left: 1.5em;
+}
+
+.ql-editor a {
+  color: #06c;
+  text-decoration: underline;
+}

From cd5fcc11d47f0e1191ce6d27e555eb0a897c6aab Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 13:45:43 +0900
Subject: [PATCH 30/56] =?UTF-8?q?[seller]=20fix(173):=20=ED=81=B4=EB=9E=98?=
 =?UTF-8?q?=EC=8A=A4=EB=AA=85=20=EB=AF=B8=EC=9D=B8=EC=8B=9D=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/create-preview/create-preview-modal.ui.tsx        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 6a50cd84..5aa752fe 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -342,7 +342,10 @@ export const ProductPreviewModal = ({
         <div className="mb-10 bg-white px-20 py-24 text-left">
           {productDetail ? (
             <div
-              className={cn('ql-editor leading-relaxed text-gray-700')}
+              className={cn(
+                // eslint-disable-next-line better-tailwindcss/no-unknown-classes
+                'ql-editor leading-relaxed text-gray-700',
+              )}
               dangerouslySetInnerHTML={{ __html: productDetail }}
             />
           ) : (

From 2ab8270d68024e5e84a4e4e7189b03134bef3942 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 15:36:26 +0900
Subject: [PATCH 31/56] =?UTF-8?q?[seller]=20refactor(173):=20Context=20API?=
 =?UTF-8?q?=20->=20zustand=20store=20=EA=B5=AC=EC=A1=B0=EB=A1=9C=20?=
 =?UTF-8?q?=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=EC=84=A4=EA=B3=84=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-delivery-area.ui.tsx          |   9 +-
 .../create-form-detail-area.ui.tsx            |  16 +-
 .../use-product-disclosure-form.hook.ts       |  14 +-
 .../create-form-info-area.ui.tsx              |  10 +-
 .../use-product-info-form.hook.ts             |   6 +-
 .../create-form-options-area.ui.tsx           |   2 +-
 .../create-form-options-form.ui.tsx           |  22 +--
 .../create-form-thumbnail-upload-area.ui.tsx  |  10 +-
 .../create-form/create-form-container.ui.tsx  |   4 +-
 .../create-form/create-form-provider.ui.tsx   | 146 ------------------
 .../create-form/create-form-steps.context.ts  |   2 +-
 .../products/create/create-form/index.ts      |   3 +-
 .../create-form/use-create-form-steps.hook.ts |  13 --
 .../use-create-form-steps.hook.tsx            |  26 ++++
 .../create-header/create-header-tags.ui.tsx   |   4 +-
 .../create/create-header/create-header.ui.tsx |   4 +-
 .../create-preview-modal.ui.tsx               |   8 +-
 .../create-store/create-form-store.store.ts   | 128 +++++++++++++++
 .../src/pages/products/create/create-page.tsx |  38 ++---
 19 files changed, 227 insertions(+), 238 deletions(-)
 delete mode 100644 apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
 delete mode 100644 apps/seller/src/features/products/create/create-form/use-create-form-steps.hook.ts
 create mode 100644 apps/seller/src/features/products/create/create-form/use-create-form-steps.hook.tsx
 create mode 100644 apps/seller/src/features/products/create/create-store/create-form-store.store.ts

diff --git a/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx b/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
index 0592e453..8536b822 100644
--- a/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
@@ -8,7 +8,6 @@ import { cn } from '@/shared/libs/utils'
 
 import { useProductDeliveryForm } from './use-product-delivery-form.hook'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductDeliveryArea = () => {
   const {
@@ -25,11 +24,11 @@ export const ProductDeliveryArea = () => {
     formState: { errors },
   } = form
 
-  const { setProductFields } = useCreateFormSteps()
+  // const { setProductFields } = useCreateFormSteps()
 
-  useEffect(() => {
-    setProductFields((prev) => ({ ...prev, productDelivery: isFormField }))
-  }, [isFormField, setProductFields])
+  // useEffect(() => {
+  //   setProductFields((prev) => ({ ...prev, productDelivery: isFormField }))
+  // }, [isFormField, setProductFields])
 
   return (
     <>
diff --git a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
index 0ff754a6..d58e76fb 100644
--- a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
@@ -7,24 +7,24 @@ import AppLogoImage from '@/assets/images/apple-120x120.png'
 
 import { ProductEditorModal } from './create-detail-editor-modal.ui'
 import { useProductCreationStore } from '../create-form/product-creation.store'
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
+// import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductDetailArea = () => {
   const [isEditorOpen, setIsEditorOpen] = useState(false)
   const { productDetail } = useProductCreationStore()
-  const { setProductFields } = useCreateFormSteps()
+  // const { setProductFields } = useCreateFormSteps()
 
   // Quill 에디터의 빈 콘텐츠 체크 로직 (Zustand 상태 기반)
   const hasContent =
     productDetail.trim() !== '' && productDetail !== '<p><br></p>'
 
   // 내용 유무에 따라 상품 등록 폼의 완료 상태 업데이트
-  useEffect(() => {
-    setProductFields((prev) => ({
-      ...prev,
-      productDetail: hasContent,
-    }))
-  }, [hasContent, setProductFields])
+  // useEffect(() => {
+  //   setProductFields((prev) => ({
+  //     ...prev,
+  //     productDetail: hasContent,
+  //   }))
+  // }, [hasContent, setProductFields])
 
   return (
     <>
diff --git a/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts b/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts
index 8ea53220..cc3ed60c 100644
--- a/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts
@@ -4,8 +4,8 @@ import { useFormContext, useWatch } from 'react-hook-form'
 
 import { DISCLOSURE_FIELDS } from '@/entity/products'
 
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 import { CreateProductForm } from '../create-form/product-create.types'
+// import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 type NoticeFieldKey = keyof CreateProductForm['productInfoNotice']
 
@@ -16,7 +16,7 @@ export const useProductDisclosureForm = () => {
     setValue,
     formState: { errors },
   } = useFormContext<CreateProductForm>()
-  const { setProductFields } = useCreateFormSteps()
+  // const { setProductFields } = useCreateFormSteps()
 
   // 1. 필요한 값만 콕 집어서 감시 (불필요한 리렌더링 방지)
   const noticeValues = useWatch({ control, name: 'productInfoNotice' })
@@ -68,11 +68,11 @@ export const useProductDisclosureForm = () => {
       return false
     })
 
-    setProductFields((prev) => {
-      if (prev.productDisclosure === isComplete) return prev
-      return { ...prev, productDisclosure: isComplete }
-    })
-  }, [noticeModes, noticeValues, setProductFields])
+    // setProductFields((prev) => {
+    //   if (prev.productDisclosure === isComplete) return prev
+    //   return { ...prev, productDisclosure: isComplete }
+    // })
+  }, [noticeModes, noticeValues])
 
   return {
     control,
diff --git a/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx b/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
index bdee3d8f..38db21ca 100644
--- a/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
@@ -8,7 +8,7 @@ import { productionTimes } from '@/entity/products/create/create-info/production
 
 import { useProductInfoForm } from './use-product-info-form.hook'
 import { InfoTooltip, ProductFinalPrice } from '../create-form'
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
+// import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductInfoArea = () => {
   const {
@@ -29,11 +29,11 @@ export const ProductInfoArea = () => {
     formState: { errors },
   } = form
 
-  const { setProductFields } = useCreateFormSteps()
+  // const { setProductFields } = useCreateFormSteps()
 
-  useEffect(() => {
-    setProductFields((prev) => ({ ...prev, productInfo: isFormField }))
-  }, [isFormField, setProductFields])
+  // useEffect(() => {
+  //   setProductFields((prev) => ({ ...prev, productInfo: isFormField }))
+  // }, [isFormField, setProductFields])
 
   return (
     <>
diff --git a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
index 427ceed7..a4f14cd0 100644
--- a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
@@ -1,12 +1,12 @@
 import { useFormContext } from 'react-hook-form'
 
 import { useNumberInput } from '../create-calculation'
-import { useCreateFormSteps } from '../create-form'
+// import { useCreateFormSteps } from '../create-form'
 import { CreateProductForm } from '../create-form/product-create.types'
 
 export function useProductInfoForm() {
   const form = useFormContext<CreateProductForm>()
-  const { setProductPrice } = useCreateFormSteps()
+  // const { setProductPrice } = useCreateFormSteps()
 
   // 실시간으로 가격/할인 최종 금액 계산
   const productName = form.watch('productName')
@@ -33,7 +33,7 @@ export function useProductInfoForm() {
     form.setValue('price', val, { shouldValidate: true })
     if (discountAmount !== null) form.trigger('discountAmount')
     //상품 옵션 정보의 가격에 사용될 값을 전역 상태에 업데이트
-    setProductPrice(val || 0)
+    // setProductPrice(val || 0)
   })
   const discountInput = useNumberInput(discountAmount, (val) => {
     form.setValue('discountAmount', val, { shouldValidate: true })
diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
index 941ebc79..f12d22bb 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
@@ -10,7 +10,7 @@ import { MAIN_CATEGORY_OPTIONS } from '@/entity/products/create/create-options/p
 import DaySelector from '@/shared/block/day-selector/day-selector'
 
 import { useProductOptionForm } from './use-product-options.form.hook'
-import { CreateProductForm, useCreateFormSteps } from '../create-form'
+import { CreateProductForm } from '../create-form'
 import { ProductOptionForm } from './create-form-options-form.ui'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
 import { DEFAULT_PRODUCT_OPTION } from '../create-form/use-create-product-form.hook'
diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
index d1e5910b..0d382c3e 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
@@ -9,7 +9,7 @@ import { MAIN_CATEGORY_OPTIONS } from '@/entity/products/create/create-options/p
 import DaySelector from '@/shared/block/day-selector/day-selector'
 
 import { useProductOptionForm } from './use-product-options.form.hook'
-import { ProductFinalPrice, useCreateFormSteps } from '../create-form'
+import { ProductFinalPrice } from '../create-form'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
 
 interface ProductOptionFormProps {
@@ -27,8 +27,8 @@ export const ProductOptionForm = ({
   onCopy,
   onAdd,
 }: ProductOptionFormProps) => {
-  const { setProductFields, setNutritionData, productPrice } =
-    useCreateFormSteps()
+  // const { setProductFields, setNutritionData, productPrice } =
+  //   useCreateFormSteps()
   const {
     form,
     mainCategory,
@@ -46,13 +46,13 @@ export const ProductOptionForm = ({
     stockInput,
     nutritionInputs,
     toggleShippingDay,
-  } = useProductOptionForm(index, productPrice)
+  } = useProductOptionForm(index)
 
   const { control, register } = form
 
-  useEffect(() => {
-    setProductFields((prev) => ({ ...prev, productOptions: isFormField }))
-  }, [isFormField, setProductFields])
+  // useEffect(() => {
+  //   setProductFields((prev) => ({ ...prev, productOptions: isFormField }))
+  // }, [isFormField, setProductFields])
 
   useEffect(() => {
     const sugar =
@@ -68,13 +68,13 @@ export const ProductOptionForm = ({
         ? Number(nutritionInputs.fat?.displayValue)
         : null
 
-    setNutritionData(index, { sugar, protein, fat, ingredientCategories })
+    //setNutritionData(index, { sugar, protein, fat, ingredientCategories })
   }, [
     nutritionInputs.sugar?.displayValue,
     nutritionInputs.protein?.displayValue,
     nutritionInputs.fat?.displayValue,
     JSON.stringify(ingredientCategories),
-    setNutritionData,
+    // setNutritionData,
   ])
 
   return (
@@ -170,7 +170,7 @@ export const ProductOptionForm = ({
               labelClassName="typo-title-16-r"
               placeholder="0~100,000"
               className="flex-1"
-              value={productPrice ?? ''}
+              value={''}
               disabled
             />
             <span className="relative top-11">원</span>
@@ -192,7 +192,7 @@ export const ProductOptionForm = ({
         {totalPrice !== null && (
           <ProductFinalPrice
             title={'최종 상품 옵션 금액'}
-            price={productPrice}
+            price={100}
             finalPrice={totalPrice}
           />
         )}
diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
index 922be65f..9c84aa4c 100644
--- a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
@@ -13,7 +13,7 @@ import {
 import { Camera, XIcon } from 'lucide-react'
 
 import { useProductThumbnailForm } from './use-product-thumnail-form.hook'
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
+// import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ThumbnailUploadArea = () => {
   const {
@@ -26,11 +26,11 @@ export const ThumbnailUploadArea = () => {
     handleImageDelete,
   } = useProductThumbnailForm()
 
-  const { setProductFields } = useCreateFormSteps()
+  // const { setProductFields } = useCreateFormSteps()
 
-  useEffect(() => {
-    setProductFields((prev) => ({ ...prev, productThumbnail: isFormField }))
-  }, [isFormField, setProductFields])
+  // useEffect(() => {
+  //   setProductFields((prev) => ({ ...prev, productThumbnail: isFormField }))
+  // }, [isFormField, setProductFields])
 
   return (
     <>
diff --git a/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
index 9e19e7e0..d472d22d 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import { cn } from '@/shared/libs/utils'
 
-import { useCreateFormSteps } from './use-create-form-steps.hook'
+import { useCreateHeaderSteps } from './use-create-form-steps.hook'
 
 interface CreateFormContainerProps {
   className?: string
@@ -15,7 +15,7 @@ export const CreateFormContainer = ({
   children,
   id,
 }: CreateFormContainerProps) => {
-  const { headerHeight } = useCreateFormSteps()
+  const { headerHeight } = useCreateHeaderSteps()
 
   return (
     <div
diff --git a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
deleted file mode 100644
index 542ae046..00000000
--- a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from 'react'
-
-import { CategoryOptions, EssentialOptions } from '@/entity/products'
-
-import {
-  ActiveTags,
-  FormStepStatus,
-  FormStepsContext,
-  NutritionData,
-} from './create-form-steps.context'
-
-// FormStepsProvider - scrollToStep
-export const FormStepsProvider = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  const [productFields, setProductFields] = useState<FormStepStatus>({
-    productInfo: false,
-    productDelivery: false,
-    productThumbnail: false,
-    productOptions: false,
-    productDetail: false,
-    productDisclosure: false,
-  })
-
-  const [currentStep, setCurrentStep] = useState(1)
-  const [headerHeight, setHeaderHeight] = useState(0)
-
-  // 클릭으로 스크롤 중인지 여부를 ref로 관리 (리렌더 불필요)
-  const isScrollingToStep = useRef(false)
-  const scrollEndTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  const scrollToStep = useCallback((index: number) => {
-    const stepIds = [
-      'productInfo',
-      'productDelivery',
-      'productThumbnail',
-      'productOptions',
-      'productDetail',
-      'productDisclosure',
-    ]
-    const targetId = stepIds[index]
-    const element = document.getElementById(targetId)
-
-    if (!element) return
-
-    // 1. Observer 일시 비활성화 + step 즉시 확정
-    isScrollingToStep.current = true
-    setCurrentStep(index + 1)
-
-    // 2. 이전 타이머 초기화
-    if (scrollEndTimer.current) clearTimeout(scrollEndTimer.current)
-
-    // 3. 스크롤
-    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
-
-    // 4. scrollend 이벤트 지원 시 사용, 미지원 시 timeout fallback
-    const unlock = () => {
-      isScrollingToStep.current = false
-      window.removeEventListener('scrollend', unlock)
-      if (scrollEndTimer.current) clearTimeout(scrollEndTimer.current)
-    }
-
-    if ('onscrollend' in window) {
-      window.addEventListener('scrollend', unlock, { once: true })
-      // scrollend가 발화 안 될 경우 대비 안전망
-      scrollEndTimer.current = setTimeout(unlock, 1000)
-    } else {
-      // fallback: smooth scroll 최대 소요 시간 대기
-      scrollEndTimer.current = setTimeout(unlock, 800)
-    }
-  }, [])
-
-  //필수성분, 적용된 카테고리 부분
-
-  const [nutritionDataList, setNutritionDataList] = useState<NutritionData[]>([
-    {
-      sugar: null,
-      protein: null,
-      fat: null,
-      ingredientCategories: [],
-    },
-  ])
-
-  const setNutritionData = useCallback((index: number, data: NutritionData) => {
-    setNutritionDataList((prev) => {
-      const next = [...prev]
-      next[index] = data
-      return next
-    })
-  }, [])
-
-  const activeTags: ActiveTags = useMemo(() => {
-    // 모든 옵션의 ingredientCategories 합산
-    const allCategories = nutritionDataList.flatMap(
-      (d) => d.ingredientCategories,
-    )
-
-    // 각 영양소는 하나라도 기준 충족하면 활성화
-    const isGlutenFree = allCategories.includes('glutenFree')
-    const isVegan = allCategories.includes('vegan')
-    const isHighProtein = nutritionDataList.some(
-      (d) => d.protein !== null && d.protein >= 11,
-    )
-    const isLowFat = nutritionDataList.some((d) => d.fat !== null && d.fat < 3)
-    const isLowSugar = nutritionDataList.some(
-      (d) => d.sugar !== null && d.sugar < 5,
-    )
-    return {
-      [EssentialOptions[0].title]: isGlutenFree,
-      [EssentialOptions[1].title]: isVegan,
-      [EssentialOptions[2].title]: isHighProtein,
-      [EssentialOptions[3].title]: isLowFat,
-      [EssentialOptions[4].title]: isLowSugar,
-      [CategoryOptions[0].title]: isLowSugar && isLowFat,
-      [CategoryOptions[1].title]: isHighProtein,
-      [CategoryOptions[2].title]: isVegan && isGlutenFree,
-    }
-  }, [nutritionDataList])
-
-  //상품 정보, 상품 옵션 정보에서 공유하는 가격
-  const [productPrice, setProductPrice] = useState<number | null>(null)
-
-  return (
-    <FormStepsContext.Provider
-      value={{
-        productFields,
-        setProductFields,
-        currentStep,
-        setCurrentStep,
-        scrollToStep,
-        headerHeight,
-        setHeaderHeight,
-        isScrollingToStep, // ref 전달
-        nutritionDataList,
-        setNutritionData,
-        activeTags,
-        productPrice,
-        setProductPrice,
-      }}
-    >
-      {children}
-    </FormStepsContext.Provider>
-  )
-}
diff --git a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
index ddd302a2..012a415f 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
@@ -13,7 +13,7 @@ export interface ActiveTags {
   [key: string]: boolean
 }
 
-interface FormStepsContextType {
+export interface FormStepsContextType {
   productFields: FormStepStatus
   currentStep: number
   headerHeight: number
diff --git a/apps/seller/src/features/products/create/create-form/index.ts b/apps/seller/src/features/products/create/create-form/index.ts
index 78942b38..9027589f 100644
--- a/apps/seller/src/features/products/create/create-form/index.ts
+++ b/apps/seller/src/features/products/create/create-form/index.ts
@@ -1,7 +1,6 @@
-export { FormStepsProvider } from './create-form-provider.ui'
 export { CreateFormContainer } from './create-form-container.ui'
 export { InfoTooltip } from './info-tooltip.ui'
-export { useCreateFormSteps } from './use-create-form-steps.hook'
+// export { useCreateFormSteps } from './use-create-form-steps.hook'
 export { useCreateProductForm } from './use-create-product-form.hook'
 export { ProductFinalPrice } from './product-final-price.ui'
 export * from './product-create.types'
diff --git a/apps/seller/src/features/products/create/create-form/use-create-form-steps.hook.ts b/apps/seller/src/features/products/create/create-form/use-create-form-steps.hook.ts
deleted file mode 100644
index af10eec3..00000000
--- a/apps/seller/src/features/products/create/create-form/use-create-form-steps.hook.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useContext } from 'react'
-
-import { FormStepsContext } from './create-form-steps.context'
-
-export const useCreateFormSteps = () => {
-  const context = useContext(FormStepsContext)
-  if (!context) {
-    throw new Error(
-      'useCreateFormSteps는 FormStepsProvider 안에서 사용되어야 합니다.',
-    )
-  }
-  return context
-}
diff --git a/apps/seller/src/features/products/create/create-form/use-create-form-steps.hook.tsx b/apps/seller/src/features/products/create/create-form/use-create-form-steps.hook.tsx
new file mode 100644
index 00000000..1bc3ca2a
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form/use-create-form-steps.hook.tsx
@@ -0,0 +1,26 @@
+import { useCreateHeaderStore } from '../create-store/create-form-store.store'
+
+export const useCreateHeaderSteps = () => {
+  const store = useCreateHeaderStore()
+
+  return {
+    // 상태값 (State)
+    currentStep: store.currentStep,
+    headerHeight: store.headerHeight,
+    productFields: store.productFields,
+    nutritionDataList: store.nutritionDataList,
+    productPrice: store.productPrice,
+    activeTags: store.getActiveTags(),
+
+    // 액션 (Actions)
+    setCurrentStep: store.setCurrentStep,
+    setHeaderHeight: store.setHeaderHeight,
+    setProductFields: store.setProductFields,
+    setNutritionData: store.setNutritionData,
+    setProductPrice: store.setProductPrice,
+    scrollToStep: store.scrollToStep,
+
+    // Observer 로직 대응용 Ref 구조
+    isScrollingToStep: { current: store.isScrolling },
+  }
+}
diff --git a/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
index 835a0241..6732e762 100644
--- a/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
@@ -2,7 +2,7 @@ import { Chip, Label, Tooltip } from '@dessert/ui'
 
 import { OptionTags } from '@/entity/products'
 
-import { useCreateFormSteps } from '../create-form'
+import { useCreateHeaderSteps } from '../create-form/use-create-form-steps.hook'
 
 interface TagsProps {
   title: string
@@ -17,7 +17,7 @@ export const ProductHeaderTags = ({
   titleTooltipProps,
   tagData,
 }: TagsProps) => {
-  const { activeTags } = useCreateFormSteps()
+  const { activeTags } = useCreateHeaderSteps()
 
   return (
     <div>
diff --git a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
index 8803691a..3a8197a4 100644
--- a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
@@ -12,7 +12,7 @@ import { CategoryOptions, EssentialOptions } from '@/entity/products'
 
 import { ProductHeaderTags } from './create-header-tags.ui'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
+import { useCreateHeaderSteps } from '../create-form/use-create-form-steps.hook'
 
 const stagestep = [
   '상품 정보',
@@ -25,7 +25,7 @@ const stagestep = [
 
 export const ProductHeader = () => {
   const { productFields, currentStep, scrollToStep, setHeaderHeight } =
-    useCreateFormSteps()
+    useCreateHeaderSteps()
   const headerRef = useRef<HTMLDivElement>(null)
   const steps = Object.values(productFields).filter((e) => e === true).length
   const totalSteps = Object.keys(productFields).length
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 5aa752fe..0cfb5568 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -13,7 +13,7 @@ import {
 } from '@/entity/products'
 import { cn } from '@/shared/libs/utils'
 
-import { useCreateFormSteps } from '../create-form'
+// import { useCreateFormSteps } from '../create-form'
 import { CreateProductForm } from '../create-form/product-create.types'
 import { useProductCreationStore } from '../create-form/product-creation.store'
 
@@ -63,7 +63,7 @@ export const ProductPreviewModal = ({
 }: ProductPreviewModalProps) => {
   const { watch } = useFormContext<CreateProductForm>()
   const formData = watch()
-  const { productPrice } = useCreateFormSteps()
+  // const { productPrice } = useCreateFormSteps()
   const { productDetail } = useProductCreationStore()
   if (!isOpen) return null
 
@@ -251,9 +251,9 @@ export const ProductPreviewModal = ({
                       10%
                     </span>
                     <span className="typo-title-14-sb text-gray-900">
-                      {(
+                      {/* {(
                         (productPrice ?? 0) + (option.additionalPrice ?? 0)
-                      ).toLocaleString()}
+                      ).toLocaleString()} */}
                       원
                     </span>
                     <ChevronUp className="ml-8 text-gray-900" size={20} />
diff --git a/apps/seller/src/features/products/create/create-store/create-form-store.store.ts b/apps/seller/src/features/products/create/create-store/create-form-store.store.ts
new file mode 100644
index 00000000..768cd860
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-store/create-form-store.store.ts
@@ -0,0 +1,128 @@
+import { create } from 'zustand'
+
+import { CategoryOptions, EssentialOptions } from '@/entity/products'
+
+import {
+  ActiveTags,
+  FormStepStatus,
+  NutritionData,
+} from '../create-form/create-form-steps.context'
+
+interface CreateFormStoreProps {
+  // --- State ---
+  productFields: FormStepStatus
+  currentStep: number
+  headerHeight: number
+  nutritionDataList: NutritionData[]
+  productPrice: number | null
+  isScrolling: boolean // Ref 대신 State로 관리 (Zustand는 선택적 구독이 가능하므로)
+
+  // --- Actions ---
+  setProductFields: (fields: Partial<FormStepStatus>) => void
+  setCurrentStep: (step: number) => void
+  setHeaderHeight: (height: number) => void
+  setProductPrice: (price: number | null) => void
+  setNutritionData: (index: number, data: NutritionData) => void
+
+  // 스크롤 로직
+  scrollToStep: (index: number) => void
+
+  // --- Computed (Derived State) ---
+  getActiveTags: () => ActiveTags
+}
+
+export const useCreateHeaderStore = create<CreateFormStoreProps>(
+  (set, get) => ({
+    productFields: {
+      productInfo: false,
+      productDelivery: false,
+      productThumbnail: false,
+      productOptions: false,
+      productDetail: false,
+      productDisclosure: false,
+    },
+    currentStep: 1,
+    headerHeight: 0,
+    nutritionDataList: [
+      { sugar: null, protein: null, fat: null, ingredientCategories: [] },
+    ],
+    productPrice: null,
+    isScrolling: false,
+
+    setProductFields: (fields: Partial<FormStepStatus>) =>
+      set(
+        (state): Partial<CreateFormStoreProps> => ({
+          // 1. 리턴 타입을 Partial로 명시
+          productFields: {
+            ...state.productFields,
+            ...fields,
+          } as FormStepStatus, // 2. 결과물을 FormStepStatus로 단언(Assertion)
+        }),
+      ),
+    setCurrentStep: (step) => set({ currentStep: step }),
+    setHeaderHeight: (height) => set({ headerHeight: height }),
+    setProductPrice: (price) => set({ productPrice: price }),
+
+    setNutritionData: (index, data) =>
+      set((state) => {
+        const next = [...state.nutritionDataList]
+        next[index] = data
+        return { nutritionDataList: next }
+      }),
+
+    // 스크롤 로직 이식
+    scrollToStep: (index) => {
+      const stepIds = [
+        'productInfo',
+        'productDelivery',
+        'productThumbnail',
+        'productOptions',
+        'productDetail',
+        'productDisclosure',
+      ]
+      const targetId = stepIds[index]
+      const element = document.getElementById(targetId)
+      if (!element) return
+
+      set({ isScrolling: true, currentStep: index + 1 })
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+
+      const unlock = () => set({ isScrolling: false })
+      if ('onscrollend' in window) {
+        window.addEventListener('scrollend', unlock, { once: true })
+        setTimeout(unlock, 1000) // fallback
+      } else {
+        setTimeout(unlock, 800)
+      }
+    },
+    getActiveTags: () => {
+      const { nutritionDataList } = get()
+      const allCategories = nutritionDataList.flatMap(
+        (d) => d.ingredientCategories,
+      )
+
+      const isGlutenFree = allCategories.includes('glutenFree')
+      const isVegan = allCategories.includes('vegan')
+      const isHighProtein = nutritionDataList.some(
+        (d) => d.protein !== null && d.protein >= 11,
+      )
+      const isLowFat = nutritionDataList.some(
+        (d) => d.fat !== null && d.fat < 3,
+      )
+      const isLowSugar = nutritionDataList.some(
+        (d) => d.sugar !== null && d.sugar < 5,
+      )
+
+      return {
+        [EssentialOptions[0].title]: isGlutenFree,
+        [EssentialOptions[1].title]: isVegan,
+        [EssentialOptions[2].title]: isHighProtein,
+        [EssentialOptions[3].title]: isLowFat,
+        [EssentialOptions[4].title]: isLowSugar,
+        [CategoryOptions[0].title]: isLowSugar && isLowFat,
+        [CategoryOptions[1].title]: isHighProtein,
+        [CategoryOptions[2].title]: isVegan && isGlutenFree,
+      }
+    },
+  }),
+)
diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index d35e741a..7bea1ea1 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -4,7 +4,6 @@ import { FormProvider } from 'react-hook-form'
 
 import {
   CreateFormContainer,
-  FormStepsProvider,
   ProductDeliveryArea,
   ProductDetailArea,
   ProductDisclosureArea,
@@ -13,28 +12,26 @@ import {
   ProductInfoArea,
   ProductOptionsArea,
   ThumbnailUploadArea,
-  useCreateFormSteps,
   useCreateProductForm,
 } from '@/features/products/create'
-import { ProductEditorModal } from '@/features/products/create/create-form-detail/create-detail-editor-modal.ui'
+import { useCreateHeaderSteps } from '@/features/products/create/create-form/use-create-form-steps.hook'
 import { ProductPreviewModal } from '@/features/products/create/create-preview/create-preview-modal.ui'
 
 function CreatePage() {
   const form = useCreateProductForm()
   return (
     <FormProvider {...form}>
-      <FormStepsProvider>
-        <CreatePageInner />
-      </FormStepsProvider>
+      <CreatePageInner />
     </FormProvider>
   )
 }
 
 function CreatePageInner() {
   const [isPreviewOpen, setIsPreviewOpen] = useState(false)
-
   const { setCurrentStep, headerHeight, isScrollingToStep } =
-    useCreateFormSteps()
+    useCreateHeaderSteps()
+  // const { setCurrentStep, headerHeight, isScrollingToStep } =
+  //   useCreateFormSteps()
 
   const stepIds = [
     'productInfo',
@@ -47,41 +44,40 @@ function CreatePageInner() {
 
   useEffect(() => {
     const elements = stepIds.map((id) => document.getElementById(id))
-    const topMargin = Math.max(0, headerHeight - 30)
+
+    // 헤더가 가리는 만큼 상단 여백을 줌
+    const topMargin = headerHeight > 0 ? headerHeight : 100
 
     const observer = new IntersectionObserver(
       (entries) => {
+        // 클릭해서 스크롤 중일 때는 단계 변경 무시
         if (isScrollingToStep.current) return
 
-        // 현재 화면에 보이는 섹션들 중 가장 위에 있는 것을 active로
         const visibleEntries = entries.filter((entry) => entry.isIntersecting)
-
         if (visibleEntries.length === 0) return
 
-        // rootMargin 기준선을 통과한 entry 중 index가 가장 큰 것 선택
-        // (스크롤 방향 무관하게 "현재 보이는 가장 상단 섹션" 기준)
+        // 화면 상단 기준선에 가장 가까운 섹션 찾기
         const topEntry = visibleEntries.reduce((prev, curr) => {
-          // boundingClientRect.top이 작을수록 화면 상단에 가까움
           return curr.boundingClientRect.top < prev.boundingClientRect.top
             ? curr
             : prev
         })
 
         const index = stepIds.indexOf(topEntry.target.id)
-        if (index !== -1) setCurrentStep(index + 1)
+        if (index !== -1) {
+          setCurrentStep(index + 1)
+        }
       },
       {
-        rootMargin: `-${topMargin}px 0px -60% 0px`,
+        // 상단은 헤더 높이만큼 빼고, 하단은 화면 절반 위로 오면 인식
+        rootMargin: `-${topMargin}px 0px -50% 0px`,
         threshold: 0,
       },
     )
 
-    elements.forEach((el) => {
-      if (el) observer.observe(el)
-    })
+    elements.forEach((el) => el && observer.observe(el))
     return () => observer.disconnect()
-  }, [headerHeight, setCurrentStep, isScrollingToStep])
-
+  }, [headerHeight, setCurrentStep]) // isScrollingToStep은 내부에서 ref로 참조되므로 생략 가능
   return (
     <>
       <ProductHeader />

From 10e58a2a646251896e213110302e5de2e7f02a8d Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 15:51:07 +0900
Subject: [PATCH 32/56] =?UTF-8?q?[seller]=20refactor(173):=20store?=
 =?UTF-8?q?=EC=99=80=20=EA=B4=80=EA=B3=84=EB=90=9C=20type=EC=9D=84=20entit?=
 =?UTF-8?q?y=EB=A1=9C=20=EC=9D=B4=EB=8F=99,=20=EC=A3=BC=EC=84=9D=20?=
 =?UTF-8?q?=EB=B0=8F=20import=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-store/create-store-header.type.ts}       | 12 ++++--------
 .../entity/products/create/create-store/index.ts    |  1 +
 .../create/create-form/create-form-container.ui.tsx |  2 +-
 .../features/products/create/create-form/index.ts   |  1 -
 .../create/create-header/create-header-tags.ui.tsx  |  2 +-
 .../create/create-header/create-header.ui.tsx       |  4 ++--
 ...-store.store.ts => create-header-store.store.ts} | 13 ++++++-------
 .../features/products/create/create-store/index.ts  |  2 ++
 .../use-create-header-steps.hook.tsx}               |  2 +-
 .../src/pages/products/create/create-page.tsx       |  4 +---
 10 files changed, 19 insertions(+), 24 deletions(-)
 rename apps/seller/src/{features/products/create/create-form/create-form-steps.context.ts => entity/products/create/create-store/create-store-header.type.ts} (68%)
 create mode 100644 apps/seller/src/entity/products/create/create-store/index.ts
 rename apps/seller/src/features/products/create/create-store/{create-form-store.store.ts => create-header-store.store.ts} (92%)
 create mode 100644 apps/seller/src/features/products/create/create-store/index.ts
 rename apps/seller/src/features/products/create/{create-form/use-create-form-steps.hook.tsx => create-store/use-create-header-steps.hook.tsx} (90%)

diff --git a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts b/apps/seller/src/entity/products/create/create-store/create-store-header.type.ts
similarity index 68%
rename from apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
rename to apps/seller/src/entity/products/create/create-store/create-store-header.type.ts
index 012a415f..8be8d920 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
+++ b/apps/seller/src/entity/products/create/create-store/create-store-header.type.ts
@@ -1,6 +1,4 @@
-import React, { createContext } from 'react'
-
-export type FormStepStatus = Record<string, boolean>
+export type ProductFileType = Record<string, boolean>
 
 export interface NutritionData {
   sugar: number | null
@@ -13,12 +11,12 @@ export interface ActiveTags {
   [key: string]: boolean
 }
 
-export interface FormStepsContextType {
-  productFields: FormStepStatus
+export interface CreateFormHeaderType {
+  productFields: ProductFileType
   currentStep: number
   headerHeight: number
 
-  setProductFields: React.Dispatch<React.SetStateAction<FormStepStatus>>
+  setProductFields: React.Dispatch<React.SetStateAction<ProductFileType>>
   setCurrentStep: React.Dispatch<React.SetStateAction<number>>
   setHeaderHeight: React.Dispatch<React.SetStateAction<number>>
   scrollToStep: (index: number) => void
@@ -32,5 +30,3 @@ export interface FormStepsContextType {
   productPrice: number | null
   setProductPrice: React.Dispatch<React.SetStateAction<number | null>>
 }
-
-export const FormStepsContext = createContext<FormStepsContextType | null>(null)
diff --git a/apps/seller/src/entity/products/create/create-store/index.ts b/apps/seller/src/entity/products/create/create-store/index.ts
new file mode 100644
index 00000000..e4f95c2e
--- /dev/null
+++ b/apps/seller/src/entity/products/create/create-store/index.ts
@@ -0,0 +1 @@
+export * from './create-store-header.type'
diff --git a/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
index d472d22d..0b06281d 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form/create-form-container.ui.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import { cn } from '@/shared/libs/utils'
 
-import { useCreateHeaderSteps } from './use-create-form-steps.hook'
+import { useCreateHeaderSteps } from '../create-store'
 
 interface CreateFormContainerProps {
   className?: string
diff --git a/apps/seller/src/features/products/create/create-form/index.ts b/apps/seller/src/features/products/create/create-form/index.ts
index 9027589f..22b3e19e 100644
--- a/apps/seller/src/features/products/create/create-form/index.ts
+++ b/apps/seller/src/features/products/create/create-form/index.ts
@@ -3,4 +3,3 @@ export { InfoTooltip } from './info-tooltip.ui'
 // export { useCreateFormSteps } from './use-create-form-steps.hook'
 export { useCreateProductForm } from './use-create-product-form.hook'
 export { ProductFinalPrice } from './product-final-price.ui'
-export * from './product-create.types'
diff --git a/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
index 6732e762..eff6e742 100644
--- a/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
@@ -2,7 +2,7 @@ import { Chip, Label, Tooltip } from '@dessert/ui'
 
 import { OptionTags } from '@/entity/products'
 
-import { useCreateHeaderSteps } from '../create-form/use-create-form-steps.hook'
+import { useCreateHeaderSteps } from '../create-store'
 
 interface TagsProps {
   title: string
diff --git a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
index 3a8197a4..24b04bba 100644
--- a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
@@ -11,8 +11,8 @@ import {
 import { CategoryOptions, EssentialOptions } from '@/entity/products'
 
 import { ProductHeaderTags } from './create-header-tags.ui'
-import { InfoTooltip } from '../create-form/info-tooltip.ui'
-import { useCreateHeaderSteps } from '../create-form/use-create-form-steps.hook'
+import { InfoTooltip } from '../create-form'
+import { useCreateHeaderSteps } from '../create-store'
 
 const stagestep = [
   '상품 정보',
diff --git a/apps/seller/src/features/products/create/create-store/create-form-store.store.ts b/apps/seller/src/features/products/create/create-store/create-header-store.store.ts
similarity index 92%
rename from apps/seller/src/features/products/create/create-store/create-form-store.store.ts
rename to apps/seller/src/features/products/create/create-store/create-header-store.store.ts
index 768cd860..51f6cfee 100644
--- a/apps/seller/src/features/products/create/create-store/create-form-store.store.ts
+++ b/apps/seller/src/features/products/create/create-store/create-header-store.store.ts
@@ -1,16 +1,15 @@
 import { create } from 'zustand'
 
 import { CategoryOptions, EssentialOptions } from '@/entity/products'
-
 import {
   ActiveTags,
-  FormStepStatus,
   NutritionData,
-} from '../create-form/create-form-steps.context'
+  ProductFileType,
+} from '@/entity/products/create/create-store'
 
 interface CreateFormStoreProps {
   // --- State ---
-  productFields: FormStepStatus
+  productFields: ProductFileType
   currentStep: number
   headerHeight: number
   nutritionDataList: NutritionData[]
@@ -18,7 +17,7 @@ interface CreateFormStoreProps {
   isScrolling: boolean // Ref 대신 State로 관리 (Zustand는 선택적 구독이 가능하므로)
 
   // --- Actions ---
-  setProductFields: (fields: Partial<FormStepStatus>) => void
+  setProductFields: (fields: Partial<ProductFileType>) => void
   setCurrentStep: (step: number) => void
   setHeaderHeight: (height: number) => void
   setProductPrice: (price: number | null) => void
@@ -49,14 +48,14 @@ export const useCreateHeaderStore = create<CreateFormStoreProps>(
     productPrice: null,
     isScrolling: false,
 
-    setProductFields: (fields: Partial<FormStepStatus>) =>
+    setProductFields: (fields: Partial<ProductFileType>) =>
       set(
         (state): Partial<CreateFormStoreProps> => ({
           // 1. 리턴 타입을 Partial로 명시
           productFields: {
             ...state.productFields,
             ...fields,
-          } as FormStepStatus, // 2. 결과물을 FormStepStatus로 단언(Assertion)
+          } as ProductFileType, // 결과물을 FormStepStatus로 단언(Assertion)
         }),
       ),
     setCurrentStep: (step) => set({ currentStep: step }),
diff --git a/apps/seller/src/features/products/create/create-store/index.ts b/apps/seller/src/features/products/create/create-store/index.ts
new file mode 100644
index 00000000..51d1a74b
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-store/index.ts
@@ -0,0 +1,2 @@
+export { useCreateHeaderStore } from './create-header-store.store'
+export { useCreateHeaderSteps } from './use-create-header-steps.hook'
diff --git a/apps/seller/src/features/products/create/create-form/use-create-form-steps.hook.tsx b/apps/seller/src/features/products/create/create-store/use-create-header-steps.hook.tsx
similarity index 90%
rename from apps/seller/src/features/products/create/create-form/use-create-form-steps.hook.tsx
rename to apps/seller/src/features/products/create/create-store/use-create-header-steps.hook.tsx
index 1bc3ca2a..2c08b414 100644
--- a/apps/seller/src/features/products/create/create-form/use-create-form-steps.hook.tsx
+++ b/apps/seller/src/features/products/create/create-store/use-create-header-steps.hook.tsx
@@ -1,4 +1,4 @@
-import { useCreateHeaderStore } from '../create-store/create-form-store.store'
+import { useCreateHeaderStore } from './create-header-store.store'
 
 export const useCreateHeaderSteps = () => {
   const store = useCreateHeaderStore()
diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index 7bea1ea1..212a0d43 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -14,8 +14,8 @@ import {
   ThumbnailUploadArea,
   useCreateProductForm,
 } from '@/features/products/create'
-import { useCreateHeaderSteps } from '@/features/products/create/create-form/use-create-form-steps.hook'
 import { ProductPreviewModal } from '@/features/products/create/create-preview/create-preview-modal.ui'
+import { useCreateHeaderSteps } from '@/features/products/create/create-store'
 
 function CreatePage() {
   const form = useCreateProductForm()
@@ -30,8 +30,6 @@ function CreatePageInner() {
   const [isPreviewOpen, setIsPreviewOpen] = useState(false)
   const { setCurrentStep, headerHeight, isScrollingToStep } =
     useCreateHeaderSteps()
-  // const { setCurrentStep, headerHeight, isScrollingToStep } =
-  //   useCreateFormSteps()
 
   const stepIds = [
     'productInfo',

From 61645f60c08534935c840d7ee372081c7169b3cf Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 16:49:38 +0900
Subject: [PATCH 33/56] =?UTF-8?q?[seller]=20refactor(173):=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=A0=20form=EC=97=90=20store=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../product-disclosure.constant.ts            | 16 +++---
 .../create-form-delivery-area.ui.tsx          |  9 ++--
 .../create-form-detail-area.ui.tsx            | 12 ++---
 .../create-form-disclosure-area.ui.tsx        | 17 +++----
 .../use-product-disclosure-form.hook.ts       | 28 +++++------
 .../create-form-info-area.ui.tsx              | 10 ++--
 .../use-product-info-form.hook.ts             |  5 +-
 .../create-form-options-form.ui.tsx           | 50 ++++++++++---------
 .../create-form-thumbnail-upload-area.ui.tsx  | 10 ++--
 9 files changed, 79 insertions(+), 78 deletions(-)

diff --git a/apps/seller/src/entity/products/create/create-disclosure/product-disclosure.constant.ts b/apps/seller/src/entity/products/create/create-disclosure/product-disclosure.constant.ts
index 70350c8e..91ede12d 100644
--- a/apps/seller/src/entity/products/create/create-disclosure/product-disclosure.constant.ts
+++ b/apps/seller/src/entity/products/create/create-disclosure/product-disclosure.constant.ts
@@ -5,17 +5,17 @@ export const DISCLOSURE_FIELDS = [
   { label: '4. 소재지', key: 'originLocation' },
   { label: '5. 제조년월일', key: 'manufactureDate' },
   { label: '6. 소비기한 또는 품질 유지기한', key: 'expirationDate' },
-  { label: '7. 보관방법', key: 'storageGuide' },
-  { label: '8. 포장 단위 별 내용물 용량(중량) 수량', key: 'packagingContents' },
-  { label: '9. 포장 단위별 수량', key: 'packagingQuantityUnit' },
+  // { label: '7. 보관방법', key: 'storageGuide' },
+  { label: '7. 포장 단위 별 내용물 용량(중량) 수량', key: 'packagingContents' },
+  { label: '8. 포장 단위별 수량', key: 'packagingQuantityUnit' },
   {
-    label: '10. 원재료명 (농수산물의 원산지 표시 등에 관한 법률)',
+    label: '9. 원재료명 (농수산물의 원산지 표시 등에 관한 법률)',
     key: 'rawMaterialName',
   },
-  { label: '11. 영양성분', key: 'nutritionInfo' },
-  { label: '12. 유전자 변형 식품에 해당하는 경우의 표시', key: 'transgenic' },
-  { label: '13. 소비자 안전을 위한 주의사항', key: 'customerWarning' },
-  { label: '14. 수입 식품의 경우', key: 'importFood' },
+  { label: '10. 영양성분', key: 'nutritionInfo' },
+  { label: '11. 유전자 변형 식품에 해당하는 경우의 표시', key: 'transgenic' },
+  { label: '12. 소비자 안전을 위한 주의사항', key: 'customerWarning' },
+  { label: '13. 수입 식품의 경우', key: 'importFood' },
 ] as const
 
 export const RADIO_OPTIONS = [
diff --git a/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx b/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
index 8536b822..a4d018f9 100644
--- a/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
@@ -8,6 +8,7 @@ import { cn } from '@/shared/libs/utils'
 
 import { useProductDeliveryForm } from './use-product-delivery-form.hook'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
+import { useCreateHeaderSteps } from '../create-store'
 
 export const ProductDeliveryArea = () => {
   const {
@@ -24,11 +25,11 @@ export const ProductDeliveryArea = () => {
     formState: { errors },
   } = form
 
-  // const { setProductFields } = useCreateFormSteps()
+  const { setProductFields } = useCreateHeaderSteps()
 
-  // useEffect(() => {
-  //   setProductFields((prev) => ({ ...prev, productDelivery: isFormField }))
-  // }, [isFormField, setProductFields])
+  useEffect(() => {
+    setProductFields({ productDelivery: isFormField })
+  }, [isFormField, setProductFields])
 
   return (
     <>
diff --git a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
index d58e76fb..f2f88e24 100644
--- a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
@@ -8,23 +8,21 @@ import AppLogoImage from '@/assets/images/apple-120x120.png'
 import { ProductEditorModal } from './create-detail-editor-modal.ui'
 import { useProductCreationStore } from '../create-form/product-creation.store'
 // import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
+import { useCreateHeaderSteps } from '../create-store'
 
 export const ProductDetailArea = () => {
   const [isEditorOpen, setIsEditorOpen] = useState(false)
   const { productDetail } = useProductCreationStore()
-  // const { setProductFields } = useCreateFormSteps()
+  const { setProductFields } = useCreateHeaderSteps()
 
   // Quill 에디터의 빈 콘텐츠 체크 로직 (Zustand 상태 기반)
   const hasContent =
     productDetail.trim() !== '' && productDetail !== '<p><br></p>'
 
   // 내용 유무에 따라 상품 등록 폼의 완료 상태 업데이트
-  // useEffect(() => {
-  //   setProductFields((prev) => ({
-  //     ...prev,
-  //     productDetail: hasContent,
-  //   }))
-  // }, [hasContent, setProductFields])
+  useEffect(() => {
+    setProductFields({ productDetail: hasContent })
+  }, [hasContent, setProductFields])
 
   return (
     <>
diff --git a/apps/seller/src/features/products/create/create-form-disclosure/create-form-disclosure-area.ui.tsx b/apps/seller/src/features/products/create/create-form-disclosure/create-form-disclosure-area.ui.tsx
index ac3c2254..27c47189 100644
--- a/apps/seller/src/features/products/create/create-form-disclosure/create-form-disclosure-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-disclosure/create-form-disclosure-area.ui.tsx
@@ -23,7 +23,6 @@ const DisclosureFieldItem = ({
   control: Control<CreateProductForm>
   errors: FieldErrors<CreateProductForm>
 }) => {
-  // 개별 모드 값만 감시하여 리렌더링 범위 최소화
   const modeValue = useWatch({
     control,
     name: `productInfoNoticeMode.${field.key}`,
@@ -43,9 +42,9 @@ const DisclosureFieldItem = ({
       <Controller
         control={control}
         name={`productInfoNoticeMode.${field.key}`}
-        render={({ field: { value, onChange } }) => (
+        render={({ field: { value, onChange, name } }) => (
           <Radio
-            name={`productInfoNoticeMode.${field.key}`}
+            name={name}
             options={RADIO_OPTIONS}
             value={value as string}
             onChange={onChange}
@@ -60,21 +59,19 @@ const DisclosureFieldItem = ({
         name={`productInfoNotice.${field.key}`}
         render={({ field: inputField }) => (
           <Input
+            {...inputField}
             placeholder={
-              modeValue === 'default' && field.key !== 'productName'
-                ? '해당항목 없음'
+              modeValue === 'default'
+                ? '해당항목 없음' // 기획 문구
                 : '3자 이상 50자 미만으로 입력해 주세요'
             }
             disabled={modeValue === 'default'}
             className="w-full"
             error={!!errors.productInfoNotice?.[field.key]}
             errorMessage={errors.productInfoNotice?.[field.key]?.message}
-            style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}
             maxLength={49}
-            value={inputField.value as string}
-            onChange={inputField.onChange}
-            onBlur={inputField.onBlur}
-            name={inputField.name}
+            // value가 null일 경우를 대비해 빈 문자열 처리
+            value={(inputField.value as string) ?? ''}
           />
         )}
       />
diff --git a/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts b/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts
index cc3ed60c..02e872fa 100644
--- a/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts
@@ -5,7 +5,7 @@ import { useFormContext, useWatch } from 'react-hook-form'
 import { DISCLOSURE_FIELDS } from '@/entity/products'
 
 import { CreateProductForm } from '../create-form/product-create.types'
-// import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
+import { useCreateHeaderSteps } from '../create-store'
 
 type NoticeFieldKey = keyof CreateProductForm['productInfoNotice']
 
@@ -16,35 +16,37 @@ export const useProductDisclosureForm = () => {
     setValue,
     formState: { errors },
   } = useFormContext<CreateProductForm>()
-  // const { setProductFields } = useCreateFormSteps()
 
-  // 1. 필요한 값만 콕 집어서 감시 (불필요한 리렌더링 방지)
+  // Zustand 스토어 액션 가져오기
+  const { setProductFields } = useCreateHeaderSteps()
+
   const noticeValues = useWatch({ control, name: 'productInfoNotice' })
   const noticeModes = useWatch({ control, name: 'productInfoNoticeMode' })
 
-  // 2. 모드 전환 시 값 초기화 동기화 로직 및 원본 상품명 실시간 반영
   useEffect(() => {
     const subscription = watch((value, { name }) => {
-      // 2-1. 모드가 'default'로 바뀔 때 값 초기화
       if (name?.startsWith('productInfoNoticeMode.')) {
         const fieldKey = name.split('.')[1] as NoticeFieldKey
         const currentMode = value.productInfoNoticeMode?.[fieldKey]
 
         if (currentMode === 'default') {
+          // 기획: 기본값 정보가 없을 경우 "해당항목 없음" 노출 (상품명 제외)
           const resetValue =
-            fieldKey === 'productName' ? (value.productName ?? '') : ''
+            fieldKey === 'productName'
+              ? value.productName || ''
+              : '해당항목 없음'
+
           setValue(`productInfoNotice.${fieldKey}`, resetValue, {
             shouldValidate: true,
           })
         }
       }
 
-      // 2-2. 원본 상품명이 바뀔 때, 고시상품명 모드가 'default'이면 자동 동기화 (CodeRabbit 피드백 반영: 클로저 안전 보장)
       if (
         name === 'productName' &&
         value.productInfoNoticeMode?.productName === 'default'
       ) {
-        setValue('productInfoNotice.productName', value.productName ?? '', {
+        setValue('productInfoNotice.productName', value.productName || '', {
           shouldValidate: true,
         })
       }
@@ -52,7 +54,7 @@ export const useProductDisclosureForm = () => {
     return () => subscription.unsubscribe()
   }, [watch, setValue])
 
-  // 3. 완료 상태 체크 로직 최적화
+  // 완료 상태 체크 및 Zustand 업데이트
   useEffect(() => {
     if (!noticeModes || !noticeValues) return
 
@@ -68,11 +70,9 @@ export const useProductDisclosureForm = () => {
       return false
     })
 
-    // setProductFields((prev) => {
-    //   if (prev.productDisclosure === isComplete) return prev
-    //   return { ...prev, productDisclosure: isComplete }
-    // })
-  }, [noticeModes, noticeValues])
+    // Zustand 액션 호출: 함수형 업데이트가 아닌 객체 전달 방식
+    setProductFields({ productDisclosure: isComplete })
+  }, [noticeModes, noticeValues, setProductFields])
 
   return {
     control,
diff --git a/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx b/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
index 38db21ca..c7dc5540 100644
--- a/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
@@ -8,7 +8,7 @@ import { productionTimes } from '@/entity/products/create/create-info/production
 
 import { useProductInfoForm } from './use-product-info-form.hook'
 import { InfoTooltip, ProductFinalPrice } from '../create-form'
-// import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
+import { useCreateHeaderSteps } from '../create-store'
 
 export const ProductInfoArea = () => {
   const {
@@ -29,11 +29,11 @@ export const ProductInfoArea = () => {
     formState: { errors },
   } = form
 
-  // const { setProductFields } = useCreateFormSteps()
+  const { setProductFields } = useCreateHeaderSteps()
 
-  // useEffect(() => {
-  //   setProductFields((prev) => ({ ...prev, productInfo: isFormField }))
-  // }, [isFormField, setProductFields])
+  useEffect(() => {
+    setProductFields({ productInfo: isFormField })
+  }, [isFormField, setProductFields])
 
   return (
     <>
diff --git a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
index a4f14cd0..712a3d90 100644
--- a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
@@ -3,10 +3,11 @@ import { useFormContext } from 'react-hook-form'
 import { useNumberInput } from '../create-calculation'
 // import { useCreateFormSteps } from '../create-form'
 import { CreateProductForm } from '../create-form/product-create.types'
+import { useCreateHeaderSteps } from '../create-store'
 
 export function useProductInfoForm() {
   const form = useFormContext<CreateProductForm>()
-  // const { setProductPrice } = useCreateFormSteps()
+  const { setProductPrice } = useCreateHeaderSteps()
 
   // 실시간으로 가격/할인 최종 금액 계산
   const productName = form.watch('productName')
@@ -33,7 +34,7 @@ export function useProductInfoForm() {
     form.setValue('price', val, { shouldValidate: true })
     if (discountAmount !== null) form.trigger('discountAmount')
     //상품 옵션 정보의 가격에 사용될 값을 전역 상태에 업데이트
-    // setProductPrice(val || 0)
+    setProductPrice(val || 0)
   })
   const discountInput = useNumberInput(discountAmount, (val) => {
     form.setValue('discountAmount', val, { shouldValidate: true })
diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
index 0d382c3e..e2bb483c 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
@@ -11,6 +11,7 @@ import DaySelector from '@/shared/block/day-selector/day-selector'
 import { useProductOptionForm } from './use-product-options.form.hook'
 import { ProductFinalPrice } from '../create-form'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
+import { useCreateHeaderSteps } from '../create-store'
 
 interface ProductOptionFormProps {
   index: number
@@ -27,8 +28,8 @@ export const ProductOptionForm = ({
   onCopy,
   onAdd,
 }: ProductOptionFormProps) => {
-  // const { setProductFields, setNutritionData, productPrice } =
-  //   useCreateFormSteps()
+  const { productPrice, setProductFields, setNutritionData } =
+    useCreateHeaderSteps()
   const {
     form,
     mainCategory,
@@ -46,35 +47,38 @@ export const ProductOptionForm = ({
     stockInput,
     nutritionInputs,
     toggleShippingDay,
-  } = useProductOptionForm(index)
+  } = useProductOptionForm(index, productPrice)
 
   const { control, register } = form
 
-  // useEffect(() => {
-  //   setProductFields((prev) => ({ ...prev, productOptions: isFormField }))
-  // }, [isFormField, setProductFields])
+  useEffect(() => {
+    setProductFields({ productOptions: isFormField })
+  }, [isFormField, setProductFields])
 
   useEffect(() => {
-    const sugar =
-      nutritionInputs.sugar?.displayValue !== ''
-        ? Number(nutritionInputs.sugar?.displayValue)
-        : null
-    const protein =
-      nutritionInputs.protein?.displayValue !== ''
-        ? Number(nutritionInputs.protein?.displayValue)
-        : null
-    const fat =
-      nutritionInputs.fat?.displayValue !== ''
-        ? Number(nutritionInputs.fat?.displayValue)
-        : null
+    const sugar = nutritionInputs.sugar?.displayValue
+      ? Number(nutritionInputs.sugar.displayValue)
+      : null
+    const protein = nutritionInputs.protein?.displayValue
+      ? Number(nutritionInputs.protein.displayValue)
+      : null
+    const fat = nutritionInputs.fat?.displayValue
+      ? Number(nutritionInputs.fat.displayValue)
+      : null
 
-    //setNutritionData(index, { sugar, protein, fat, ingredientCategories })
+    setNutritionData(index, {
+      sugar,
+      protein,
+      fat,
+      ingredientCategories,
+    })
   }, [
+    index,
     nutritionInputs.sugar?.displayValue,
     nutritionInputs.protein?.displayValue,
     nutritionInputs.fat?.displayValue,
-    JSON.stringify(ingredientCategories),
-    // setNutritionData,
+    ingredientCategories, // Zustand 내부 비교 최적화 가능
+    setNutritionData,
   ])
 
   return (
@@ -170,7 +174,7 @@ export const ProductOptionForm = ({
               labelClassName="typo-title-16-r"
               placeholder="0~100,000"
               className="flex-1"
-              value={''}
+              value={productPrice ?? ''}
               disabled
             />
             <span className="relative top-11">원</span>
@@ -192,7 +196,7 @@ export const ProductOptionForm = ({
         {totalPrice !== null && (
           <ProductFinalPrice
             title={'최종 상품 옵션 금액'}
-            price={100}
+            price={productPrice}
             finalPrice={totalPrice}
           />
         )}
diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
index 9c84aa4c..78641107 100644
--- a/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/create-form-thumbnail-upload-area.ui.tsx
@@ -13,7 +13,7 @@ import {
 import { Camera, XIcon } from 'lucide-react'
 
 import { useProductThumbnailForm } from './use-product-thumnail-form.hook'
-// import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
+import { useCreateHeaderSteps } from '../create-store'
 
 export const ThumbnailUploadArea = () => {
   const {
@@ -26,11 +26,11 @@ export const ThumbnailUploadArea = () => {
     handleImageDelete,
   } = useProductThumbnailForm()
 
-  // const { setProductFields } = useCreateFormSteps()
+  const { setProductFields } = useCreateHeaderSteps()
 
-  // useEffect(() => {
-  //   setProductFields((prev) => ({ ...prev, productThumbnail: isFormField }))
-  // }, [isFormField, setProductFields])
+  useEffect(() => {
+    setProductFields({ productThumbnail: isFormField })
+  }, [isFormField, setProductFields])
 
   return (
     <>

From 0911886c80bf5f45b084509e8d3427ddbcd40d96 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 17:25:45 +0900
Subject: [PATCH 34/56] =?UTF-8?q?[seller]=20refactor(173):=20entity?=
 =?UTF-8?q?=ED=8F=B4=EB=8D=94=EC=9D=98=20Public=20API=20=EA=B5=AC=EC=A1=B0?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../products/create/create-delivery/index.ts  |  2 ++
 .../create/create-disclosure/index.ts         |  2 ++
 .../products/create/create-form/index.ts      |  2 ++
 .../create-form/product-create.types.ts       | 13 ++++++++
 .../products/create/create-header/index.ts    |  2 ++
 .../products/create/create-info/index.ts      |  2 ++
 .../products/create/create-options/index.ts   |  7 +++++
 apps/seller/src/entity/products/index.ts      | 23 --------------
 .../use-product-delivery-form.hook.ts         |  2 +-
 .../create-detail-editor-modal.ui.tsx         |  2 +-
 .../create-form-detail-area.ui.tsx            |  4 +--
 .../create-disclosure.schema.ts               |  2 +-
 .../create-form-disclosure-area.ui.tsx        | 11 ++++---
 .../use-product-disclosure-form.hook.ts       |  8 ++---
 .../use-product-info-form.hook.ts             |  2 +-
 .../create-form-options-area.ui.tsx           |  2 +-
 .../use-product-options.form.hook.ts          |  2 +-
 .../use-product-thumnail-form.hook.ts         |  2 +-
 .../create/create-form/create-form.schema.ts  | 13 ++++++++
 .../products/create/create-form/index.ts      |  3 +-
 .../create-form/product-create.types.ts       | 31 -------------------
 ...t-form.hook.ts => use-create-form.hook.ts} | 22 +++++++------
 .../create-preview-modal.ui.tsx               |  4 +--
 .../create-store/create-header-store.store.ts |  5 ++-
 .../product-creation.store.ts                 |  0
 .../src/pages/products/create/create-page.tsx |  4 +--
 26 files changed, 85 insertions(+), 87 deletions(-)
 create mode 100644 apps/seller/src/entity/products/create/create-delivery/index.ts
 create mode 100644 apps/seller/src/entity/products/create/create-disclosure/index.ts
 create mode 100644 apps/seller/src/entity/products/create/create-form/index.ts
 create mode 100644 apps/seller/src/entity/products/create/create-form/product-create.types.ts
 create mode 100644 apps/seller/src/entity/products/create/create-header/index.ts
 create mode 100644 apps/seller/src/entity/products/create/create-info/index.ts
 create mode 100644 apps/seller/src/entity/products/create/create-options/index.ts
 delete mode 100644 apps/seller/src/entity/products/index.ts
 create mode 100644 apps/seller/src/features/products/create/create-form/create-form.schema.ts
 delete mode 100644 apps/seller/src/features/products/create/create-form/product-create.types.ts
 rename apps/seller/src/features/products/create/create-form/{use-create-product-form.hook.ts => use-create-form.hook.ts} (67%)
 rename apps/seller/src/features/products/create/{create-form => create-store}/product-creation.store.ts (100%)

diff --git a/apps/seller/src/entity/products/create/create-delivery/index.ts b/apps/seller/src/entity/products/create/create-delivery/index.ts
new file mode 100644
index 00000000..15986c05
--- /dev/null
+++ b/apps/seller/src/entity/products/create/create-delivery/index.ts
@@ -0,0 +1,2 @@
+export { DeliveryCompany } from './product-delivery-company'
+export { DeliveryTerms } from './product-delivery-terms'
diff --git a/apps/seller/src/entity/products/create/create-disclosure/index.ts b/apps/seller/src/entity/products/create/create-disclosure/index.ts
new file mode 100644
index 00000000..d3731691
--- /dev/null
+++ b/apps/seller/src/entity/products/create/create-disclosure/index.ts
@@ -0,0 +1,2 @@
+export { DISCLOSURE_FIELDS, RADIO_OPTIONS } from './product-disclosure.constant'
+export type { ProductInfoNoticeKey } from './product-disclosure.constant'
diff --git a/apps/seller/src/entity/products/create/create-form/index.ts b/apps/seller/src/entity/products/create/create-form/index.ts
new file mode 100644
index 00000000..2485f8d0
--- /dev/null
+++ b/apps/seller/src/entity/products/create/create-form/index.ts
@@ -0,0 +1,2 @@
+export * from './product-create.types'
+export * from './product-form.type'
diff --git a/apps/seller/src/entity/products/create/create-form/product-create.types.ts b/apps/seller/src/entity/products/create/create-form/product-create.types.ts
new file mode 100644
index 00000000..63af0654
--- /dev/null
+++ b/apps/seller/src/entity/products/create/create-form/product-create.types.ts
@@ -0,0 +1,13 @@
+import {
+  DeliveryFormInput,
+  ProductDisclosureFormInput,
+  ProductFormInput,
+  ProductOptionFormInput,
+  ThumbnailFormInput,
+} from './product-form.type'
+
+export type CreateFormType = ProductFormInput &
+  DeliveryFormInput & {
+    options: ProductOptionFormInput[] // Feature의 스키마 대신 Entity의 순수 타입을 사용
+  } & ProductDisclosureFormInput &
+  ThumbnailFormInput
diff --git a/apps/seller/src/entity/products/create/create-header/index.ts b/apps/seller/src/entity/products/create/create-header/index.ts
new file mode 100644
index 00000000..a9687b39
--- /dev/null
+++ b/apps/seller/src/entity/products/create/create-header/index.ts
@@ -0,0 +1,2 @@
+export { CategoryOptions } from './category-options.constants'
+export { EssentialOptions } from './essential-options.constants'
diff --git a/apps/seller/src/entity/products/create/create-info/index.ts b/apps/seller/src/entity/products/create/create-info/index.ts
new file mode 100644
index 00000000..49ba22de
--- /dev/null
+++ b/apps/seller/src/entity/products/create/create-info/index.ts
@@ -0,0 +1,2 @@
+export { ProductDiscountType } from './product-discount-type.constants'
+export { productionTimes } from './production-time.constants'
diff --git a/apps/seller/src/entity/products/create/create-options/index.ts b/apps/seller/src/entity/products/create/create-options/index.ts
new file mode 100644
index 00000000..ce4e42e0
--- /dev/null
+++ b/apps/seller/src/entity/products/create/create-options/index.ts
@@ -0,0 +1,7 @@
+export { NUTRITION_FIELDS } from './product-nutritions.constant'
+export type { NutritionFieldKey } from './product-nutritions.constant'
+export {
+  MAIN_CATEGORY_OPTIONS,
+  SUB_CATEGORY_MAP,
+} from './product-options.constant'
+export { SHIPPING_DAYS } from './product-shipping-days.constant'
diff --git a/apps/seller/src/entity/products/index.ts b/apps/seller/src/entity/products/index.ts
deleted file mode 100644
index 6644c541..00000000
--- a/apps/seller/src/entity/products/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// Create - Delivery
-export * from './create/create-delivery/product-delivery-company'
-export * from './create/create-delivery/product-delivery-terms'
-
-// Create - Disclosure
-export * from './create/create-disclosure/product-disclosure.constant'
-
-// Create - Form Types
-export * from './create/create-form/product-form.type'
-
-// Create - Header
-export * from './create/create-header/category-options.constants'
-export * from './create/create-header/essential-options.constants'
-export * from './create/create-header/options-tag.type'
-
-// Create - Info (Product Info)
-export * from './create/create-info/product-discount-type.constants'
-export * from './create/create-info/production-time.constants'
-
-// Create - Options
-export * from './create/create-options/product-nutritions.constant'
-export * from './create/create-options/product-options.constant'
-export * from './create/create-options/product-shipping-days.constant'
diff --git a/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts b/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
index fca57940..d844499b 100644
--- a/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
@@ -1,7 +1,7 @@
 import { useFormContext } from 'react-hook-form'
 
 import { useNumberInput } from '../create-calculation'
-import { CreateProductForm } from '../create-form/product-create.types'
+import { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
 
 export function useProductDeliveryForm() {
   const form = useFormContext<CreateProductForm>()
diff --git a/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx b/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
index 4bd32dc8..2731e741 100644
--- a/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react'
 import { BbanggreuiOvenLogo } from '@dessert/icons'
 import { Button, Editor } from '@dessert/ui'
 
-import { useProductCreationStore } from '../create-form/product-creation.store'
+import { useProductCreationStore } from '../create-store/product-creation.store'
 
 interface ProductEditorModalProps {
   isOpen: boolean
diff --git a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
index f2f88e24..52248047 100644
--- a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
@@ -6,9 +6,9 @@ import { Button, Label } from '@dessert/ui'
 import AppLogoImage from '@/assets/images/apple-120x120.png'
 
 import { ProductEditorModal } from './create-detail-editor-modal.ui'
-import { useProductCreationStore } from '../create-form/product-creation.store'
-// import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 import { useCreateHeaderSteps } from '../create-store'
+import { useProductCreationStore } from '../create-store/product-creation.store'
+// import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductDetailArea = () => {
   const [isEditorOpen, setIsEditorOpen] = useState(false)
diff --git a/apps/seller/src/features/products/create/create-form-disclosure/create-disclosure.schema.ts b/apps/seller/src/features/products/create/create-form-disclosure/create-disclosure.schema.ts
index 1ce851fe..b6b2c53c 100644
--- a/apps/seller/src/features/products/create/create-form-disclosure/create-disclosure.schema.ts
+++ b/apps/seller/src/features/products/create/create-form-disclosure/create-disclosure.schema.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod'
 
-import { DISCLOSURE_FIELDS } from '@/entity/products'
+import { DISCLOSURE_FIELDS } from '@/entity/products/create/create-disclosure'
 
 // DISCLOSURE_FIELDS 상수를 기반으로 스키마 객체를 동적 생성합니다.
 // 타입 추론을 위해 ZodTypeAny를 사용합니다.
diff --git a/apps/seller/src/features/products/create/create-form-disclosure/create-form-disclosure-area.ui.tsx b/apps/seller/src/features/products/create/create-form-disclosure/create-form-disclosure-area.ui.tsx
index 27c47189..64666e47 100644
--- a/apps/seller/src/features/products/create/create-form-disclosure/create-form-disclosure-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-disclosure/create-form-disclosure-area.ui.tsx
@@ -1,11 +1,14 @@
 import { Input, Label, Radio } from '@dessert/ui'
 import { Control, Controller, FieldErrors, useWatch } from 'react-hook-form'
 
-import { DISCLOSURE_FIELDS, RADIO_OPTIONS } from '@/entity/products'
+import {
+  DISCLOSURE_FIELDS,
+  RADIO_OPTIONS,
+} from '@/entity/products/create/create-disclosure'
+import { CreateFormType } from '@/entity/products/create/create-form'
 import { cn } from '@/shared/libs/utils'
 
 import { useProductDisclosureForm } from './use-product-disclosure-form.hook'
-import { CreateProductForm } from '../create-form/product-create.types'
 
 /**
  * [Refactoring] DisclosureFieldItem
@@ -20,8 +23,8 @@ const DisclosureFieldItem = ({
 }: {
   field: (typeof DISCLOSURE_FIELDS)[number]
   index: number
-  control: Control<CreateProductForm>
-  errors: FieldErrors<CreateProductForm>
+  control: Control<CreateFormType>
+  errors: FieldErrors<CreateFormType>
 }) => {
   const modeValue = useWatch({
     control,
diff --git a/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts b/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts
index 02e872fa..1d4437f0 100644
--- a/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-disclosure/use-product-disclosure-form.hook.ts
@@ -2,12 +2,12 @@ import { useEffect } from 'react'
 
 import { useFormContext, useWatch } from 'react-hook-form'
 
-import { DISCLOSURE_FIELDS } from '@/entity/products'
+import { DISCLOSURE_FIELDS } from '@/entity/products/create/create-disclosure'
+import { CreateFormType } from '@/entity/products/create/create-form'
 
-import { CreateProductForm } from '../create-form/product-create.types'
 import { useCreateHeaderSteps } from '../create-store'
 
-type NoticeFieldKey = keyof CreateProductForm['productInfoNotice']
+type NoticeFieldKey = keyof CreateFormType['productInfoNotice']
 
 export const useProductDisclosureForm = () => {
   const {
@@ -15,7 +15,7 @@ export const useProductDisclosureForm = () => {
     watch,
     setValue,
     formState: { errors },
-  } = useFormContext<CreateProductForm>()
+  } = useFormContext<CreateFormType>()
 
   // Zustand 스토어 액션 가져오기
   const { setProductFields } = useCreateHeaderSteps()
diff --git a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
index 712a3d90..2907ba68 100644
--- a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
@@ -2,7 +2,7 @@ import { useFormContext } from 'react-hook-form'
 
 import { useNumberInput } from '../create-calculation'
 // import { useCreateFormSteps } from '../create-form'
-import { CreateProductForm } from '../create-form/product-create.types'
+import { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
 import { useCreateHeaderSteps } from '../create-store'
 
 export function useProductInfoForm() {
diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
index f12d22bb..4f39aa50 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
@@ -13,7 +13,7 @@ import { useProductOptionForm } from './use-product-options.form.hook'
 import { CreateProductForm } from '../create-form'
 import { ProductOptionForm } from './create-form-options-form.ui'
 import { InfoTooltip } from '../create-form/info-tooltip.ui'
-import { DEFAULT_PRODUCT_OPTION } from '../create-form/use-create-product-form.hook'
+import { DEFAULT_PRODUCT_OPTION } from '../create-form/use-create-form.hook'
 
 export const ProductOptionsArea = () => {
   const form = useFormContext<CreateProductForm>()
diff --git a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
index 8591a39f..a66499ee 100644
--- a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
@@ -6,7 +6,7 @@ import { SUB_CATEGORY_MAP } from '@/entity/products/create/create-options/produc
 import { productOptionSchema } from './create-options.schema'
 import { useFloatInput } from '../create-calculation/create-form-float-input.hook'
 import { useNumberInput } from '../create-calculation/create-form-number-input.hook'
-import { CreateProductForm } from '../create-form/product-create.types'
+import { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
 
 export function useProductOptionForm(
   index: number,
diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
index 318b7a8e..5d7bd4f1 100644
--- a/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
@@ -2,7 +2,7 @@ import { useState } from 'react'
 
 import { useFormContext } from 'react-hook-form'
 
-import type { CreateProductForm } from '../create-form/product-create.types'
+import type { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
 
 export function useProductThumbnailForm() {
   const form = useFormContext<CreateProductForm>()
diff --git a/apps/seller/src/features/products/create/create-form/create-form.schema.ts b/apps/seller/src/features/products/create/create-form/create-form.schema.ts
new file mode 100644
index 00000000..475c876c
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form/create-form.schema.ts
@@ -0,0 +1,13 @@
+import z from 'zod'
+
+import { deliverySchema } from '../create-form-delivery'
+import { disclosureSchema } from '../create-form-disclosure'
+import { productSchema } from '../create-form-info'
+import { productOptionSchema } from '../create-form-options'
+import { thumbnailSchema } from '../create-form-thumbnail-upload'
+
+export const CreateFormSchema = productSchema
+  .and(deliverySchema)
+  .and(z.object({ options: z.array(productOptionSchema).min(1) }))
+  .and(disclosureSchema)
+  .and(thumbnailSchema)
diff --git a/apps/seller/src/features/products/create/create-form/index.ts b/apps/seller/src/features/products/create/create-form/index.ts
index 22b3e19e..0b961bce 100644
--- a/apps/seller/src/features/products/create/create-form/index.ts
+++ b/apps/seller/src/features/products/create/create-form/index.ts
@@ -1,5 +1,6 @@
 export { CreateFormContainer } from './create-form-container.ui'
 export { InfoTooltip } from './info-tooltip.ui'
 // export { useCreateFormSteps } from './use-create-form-steps.hook'
-export { useCreateProductForm } from './use-create-product-form.hook'
+export { useCreateForm } from './use-create-form.hook'
 export { ProductFinalPrice } from './product-final-price.ui'
+export { CreateFormSchema } from './create-form.schema'
diff --git a/apps/seller/src/features/products/create/create-form/product-create.types.ts b/apps/seller/src/features/products/create/create-form/product-create.types.ts
deleted file mode 100644
index c7e93505..00000000
--- a/apps/seller/src/features/products/create/create-form/product-create.types.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import z from 'zod'
-
-import {
-  DeliveryFormInput,
-  ProductDisclosureFormInput,
-  ProductFormInput,
-  ThumbnailFormInput,
-} from '@/entity/products'
-
-import { deliverySchema } from '../create-form-delivery/create-delivery.schema'
-import { disclosureSchema } from '../create-form-disclosure/create-disclosure.schema'
-import { productSchema } from '../create-form-info/create-info.schema'
-import { productOptionSchema } from '../create-form-options/create-options.schema'
-import { thumbnailSchema } from '../create-form-thumbnail-upload'
-
-const productOptionsWrapperSchema = z.object({
-  options: z.array(productOptionSchema).min(1),
-})
-type ProductOptionsWrapper = z.infer<typeof productOptionsWrapperSchema>
-
-export type CreateProductForm = ProductFormInput &
-  DeliveryFormInput &
-  ProductOptionsWrapper &
-  ProductDisclosureFormInput &
-  ThumbnailFormInput
-
-export const createProductSchema = productSchema
-  .and(deliverySchema)
-  .and(productOptionsWrapperSchema)
-  .and(disclosureSchema)
-  .and(thumbnailSchema)
diff --git a/apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts b/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts
similarity index 67%
rename from apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts
rename to apps/seller/src/features/products/create/create-form/use-create-form.hook.ts
index 84447b0e..958bc299 100644
--- a/apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts
@@ -1,9 +1,13 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Resolver, useForm } from 'react-hook-form'
 
-import { DISCLOSURE_FIELDS, ProductOptionFormInput } from '@/entity/products'
+import {
+  DISCLOSURE_FIELDS,
+  ProductOptionFormInput,
+} from '@/entity/products/create/create-disclosure'
+import { CreateFormType } from '@/entity/products/create/create-form'
 
-import { CreateProductForm, createProductSchema } from './product-create.types'
+import { CreateFormSchema } from './create-form.schema'
 
 export const DEFAULT_PRODUCT_OPTION: ProductOptionFormInput = {
   mainCategory: '',
@@ -23,9 +27,9 @@ export const DEFAULT_PRODUCT_OPTION: ProductOptionFormInput = {
   sodium: null,
 }
 
-export const useCreateProductForm = () => {
-  return useForm<CreateProductForm>({
-    resolver: zodResolver(createProductSchema) as Resolver<CreateProductForm>,
+export const useCreateForm = () => {
+  return useForm<CreateFormType>({
+    resolver: zodResolver(CreateFormSchema) as Resolver<CreateFormType>,
     defaultValues: {
       productName: '',
       isFresh: true,
@@ -42,23 +46,21 @@ export const useCreateProductForm = () => {
       mainImage: null,
       extraImages: [],
 
-      options: [
-        DEFAULT_PRODUCT_OPTION,
-      ] as unknown as CreateProductForm['options'],
+      options: [DEFAULT_PRODUCT_OPTION] as unknown as CreateFormType['options'],
 
       productInfoNotice: DISCLOSURE_FIELDS.reduce(
         (acc, field) => ({
           ...acc,
           [field.key]: '',
         }),
-        {} as CreateProductForm['productInfoNotice'],
+        {} as CreateFormType['productInfoNotice'],
       ),
       productInfoNoticeMode: DISCLOSURE_FIELDS.reduce(
         (acc, field) => ({
           ...acc,
           [field.key]: 'default',
         }),
-        {} as CreateProductForm['productInfoNoticeMode'],
+        {} as CreateFormType['productInfoNoticeMode'],
       ),
     },
     mode: 'onChange',
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 0cfb5568..911a6dac 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -14,8 +14,8 @@ import {
 import { cn } from '@/shared/libs/utils'
 
 // import { useCreateFormSteps } from '../create-form'
-import { CreateProductForm } from '../create-form/product-create.types'
-import { useProductCreationStore } from '../create-form/product-creation.store'
+import { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
+import { useProductCreationStore } from '../create-store/product-creation.store'
 
 const DaySelector = ({ selectedDays }: { selectedDays: string[] }) => {
   const days = SHIPPING_DAYS
diff --git a/apps/seller/src/features/products/create/create-store/create-header-store.store.ts b/apps/seller/src/features/products/create/create-store/create-header-store.store.ts
index 51f6cfee..c696c7c9 100644
--- a/apps/seller/src/features/products/create/create-store/create-header-store.store.ts
+++ b/apps/seller/src/features/products/create/create-store/create-header-store.store.ts
@@ -1,6 +1,9 @@
 import { create } from 'zustand'
 
-import { CategoryOptions, EssentialOptions } from '@/entity/products'
+import {
+  CategoryOptions,
+  EssentialOptions,
+} from '@/entity/products/create/create-header'
 import {
   ActiveTags,
   NutritionData,
diff --git a/apps/seller/src/features/products/create/create-form/product-creation.store.ts b/apps/seller/src/features/products/create/create-store/product-creation.store.ts
similarity index 100%
rename from apps/seller/src/features/products/create/create-form/product-creation.store.ts
rename to apps/seller/src/features/products/create/create-store/product-creation.store.ts
diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index 212a0d43..b6bf02de 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -12,13 +12,13 @@ import {
   ProductInfoArea,
   ProductOptionsArea,
   ThumbnailUploadArea,
-  useCreateProductForm,
+  useCreateForm,
 } from '@/features/products/create'
 import { ProductPreviewModal } from '@/features/products/create/create-preview/create-preview-modal.ui'
 import { useCreateHeaderSteps } from '@/features/products/create/create-store'
 
 function CreatePage() {
-  const form = useCreateProductForm()
+  const form = useCreateForm()
   return (
     <FormProvider {...form}>
       <CreatePageInner />

From c8c06f8489938e625a9b2b760ccf0283f1580507 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 17:32:27 +0900
Subject: [PATCH 35/56] =?UTF-8?q?[seller]=20fix(173):=20Public=20API=20?=
 =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=A5=B8=20=EB=88=84=EB=9D=BD=20=EC=97=90=EB=9F=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-delivery-area.ui.tsx           |  5 ++++-
 .../create/create-header/create-header.ui.tsx  |  5 ++++-
 .../create-preview/create-preview-modal.ui.tsx | 18 +++++++++---------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx b/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
index a4d018f9..e29460b0 100644
--- a/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-delivery/create-form-delivery-area.ui.tsx
@@ -3,7 +3,10 @@ import { useEffect } from 'react'
 import { Dropdown, Input, Label } from '@dessert/ui'
 import { Controller } from 'react-hook-form'
 
-import { DeliveryCompany, DeliveryTerms } from '@/entity/products'
+import {
+  DeliveryCompany,
+  DeliveryTerms,
+} from '@/entity/products/create/create-delivery'
 import { cn } from '@/shared/libs/utils'
 
 import { useProductDeliveryForm } from './use-product-delivery-form.hook'
diff --git a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
index 24b04bba..8f77bc3d 100644
--- a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
@@ -8,7 +8,10 @@ import {
   StageTab,
 } from '@dessert/ui'
 
-import { CategoryOptions, EssentialOptions } from '@/entity/products'
+import {
+  CategoryOptions,
+  EssentialOptions,
+} from '@/entity/products/create/create-header'
 
 import { ProductHeaderTags } from './create-header-tags.ui'
 import { InfoTooltip } from '../create-form'
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 911a6dac..4e6a95eb 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -7,14 +7,14 @@ import Icon1 from '@/assets/icons/preview/preview-icon1.png'
 import Icon2 from '@/assets/icons/preview/preview-icon2.png'
 import Icon3 from '@/assets/icons/preview/preview-icon3.png'
 import {
-  EssentialOptions,
+  CreateFormType,
   ProductOptionFormInput,
-  SHIPPING_DAYS,
-} from '@/entity/products'
+} from '@/entity/products/create/create-form'
+import { EssentialOptions } from '@/entity/products/create/create-header'
+import { SHIPPING_DAYS } from '@/entity/products/create/create-options'
 import { cn } from '@/shared/libs/utils'
 
-// import { useCreateFormSteps } from '../create-form'
-import { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
+import { useCreateHeaderSteps } from '../create-store'
 import { useProductCreationStore } from '../create-store/product-creation.store'
 
 const DaySelector = ({ selectedDays }: { selectedDays: string[] }) => {
@@ -61,9 +61,9 @@ export const ProductPreviewModal = ({
   isOpen,
   onClose,
 }: ProductPreviewModalProps) => {
-  const { watch } = useFormContext<CreateProductForm>()
+  const { watch } = useFormContext<CreateFormType>()
   const formData = watch()
-  // const { productPrice } = useCreateFormSteps()
+  const { productPrice } = useCreateHeaderSteps()
   const { productDetail } = useProductCreationStore()
   if (!isOpen) return null
 
@@ -251,9 +251,9 @@ export const ProductPreviewModal = ({
                       10%
                     </span>
                     <span className="typo-title-14-sb text-gray-900">
-                      {/* {(
+                      {(
                         (productPrice ?? 0) + (option.additionalPrice ?? 0)
-                      ).toLocaleString()} */}
+                      ).toLocaleString()}
                       원
                     </span>
                     <ChevronUp className="ml-8 text-gray-900" size={20} />

From ddc10fd2d05f3370b974e04b3d19cf3e3ae3e3c1 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 18:06:27 +0900
Subject: [PATCH 36/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=9E=85=EB=A0=A5?=
 =?UTF-8?q?=EA=B0=92=20=EC=97=86=EC=9D=84=20=EC=8B=9C=20=EB=85=B8=EC=B6=9C?=
 =?UTF-8?q?=20=EB=AC=B8=EA=B5=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/icons/preview/noimage.svg      |   8 +
 .../create-preview-modal.ui.tsx               | 204 ++++++++++--------
 2 files changed, 127 insertions(+), 85 deletions(-)
 create mode 100644 apps/seller/src/assets/icons/preview/noimage.svg

diff --git a/apps/seller/src/assets/icons/preview/noimage.svg b/apps/seller/src/assets/icons/preview/noimage.svg
new file mode 100644
index 00000000..8f2af0b7
--- /dev/null
+++ b/apps/seller/src/assets/icons/preview/noimage.svg
@@ -0,0 +1,8 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M71.8078 49.1567C70.731 45.9907 68.4495 43.1195 66.0865 40.4433C66.7656 39.4313 67.2098 38.2778 67.3866 37.0569C67.7029 34.8843 67.1517 32.7211 65.8353 30.9617C64.5189 29.2023 62.5956 28.0627 60.421 27.7493C58.5255 27.4754 56.6626 27.8607 55.095 28.7753C55.095 28.6128 55.0625 28.4503 54.9973 28.3018C55.0601 28.2762 55.1229 28.2507 55.1834 28.2228C56.4323 27.6565 57.4091 26.5725 57.9324 25.1729C58.5115 23.6248 58.458 21.8375 57.7929 20.3938C57.144 18.9849 55.9207 17.9172 54.4647 17.4321C54.3043 13.8553 51.2575 10.759 47.041 10.123C43.2244 9.54508 39.2893 11.0538 37.5008 13.5907C36.0844 13.036 34.4959 13.0685 33.1121 13.7253C31.1305 14.6654 29.9095 16.26 29.5816 18.342C29.3444 19.8484 29.6072 21.5753 30.3003 23.084C30.6189 23.7756 31.0352 24.3582 31.5422 24.8317L31.5096 25.3447C30.2677 24.0356 28.5978 23.1466 26.7163 22.8751C24.5394 22.5594 22.3718 23.1095 20.6089 24.4232C18.846 25.737 17.704 27.6565 17.39 29.8267C17.211 31.0499 17.311 32.2824 17.6761 33.4476C14.862 35.2348 13.1642 36.6414 11.2966 39.2596C9.42203 41.8894 7.94054 45.6077 7.33584 49.2077C6.52183 54.0495 7.19397 58.7892 9.28249 62.9137C9.60112 63.5428 10.3709 63.7958 11.0012 63.4778C11.6315 63.1598 11.885 62.3915 11.5664 61.7625C7.24049 53.2163 10.8617 44.2731 13.3805 40.7404C15.1945 38.1965 16.7946 36.9826 19.9228 35.0561C20.4786 34.7149 20.6856 34.0116 20.4065 33.4221C19.9274 32.4124 19.76 31.2959 19.9204 30.1911C20.1367 28.694 20.9252 27.371 22.1392 26.4658C23.3533 25.5606 24.8487 25.1822 26.3488 25.3981C28.6629 25.7323 30.5096 27.4151 31.0538 29.6851C31.2073 30.3234 31.8236 30.7435 32.4748 30.6507C35.8402 30.1818 39.3148 30.1865 42.7825 30.6646C46.2572 31.1915 49.59 32.1687 52.6879 33.5729C53.2879 33.8445 53.9973 33.617 54.3252 33.0484C55.4927 31.0244 57.744 29.9358 60.0558 30.27C61.5559 30.4859 62.8816 31.2727 63.7887 32.4843C64.6957 33.6959 65.0748 35.1884 64.8585 36.6855C64.698 37.7903 64.2212 38.8139 63.477 39.6426C63.0421 40.1277 63.0421 40.8611 63.477 41.3462C65.9028 44.0503 68.3587 46.9447 69.389 49.9714C73.2405 61.282 66.0888 66.3257 63.8049 67.6023C63.1886 67.9482 62.9677 68.7257 63.3142 69.3408C63.5491 69.7586 63.984 69.993 64.4306 69.993C64.6422 69.993 64.8562 69.9397 65.0539 69.8306C73.5987 65.0538 74.1475 56.0155 71.8102 49.1497L71.8078 49.1567ZM32.105 18.7389C32.3004 17.4948 32.9888 16.6081 34.2052 16.0325C35.1773 15.5706 36.3495 15.6936 37.2635 16.3528C37.5868 16.5872 38.0031 16.6569 38.3869 16.5408C38.7706 16.4248 39.0753 16.137 39.2148 15.7609C40.0033 13.6232 43.4803 12.1679 46.6549 12.6484C49.9365 13.1451 52.2274 15.617 51.8739 18.277C51.8274 18.6182 51.9227 18.964 52.1367 19.2333C52.3506 19.5025 52.6623 19.6766 53.0065 19.7137C54.095 19.8298 55.0159 20.4843 55.4671 21.4638C55.8532 22.3041 55.8788 23.3578 55.5323 24.284C55.2485 25.043 54.7485 25.6163 54.1229 25.8994C53.7298 26.0782 53.1786 26.2174 52.7693 26.243C52.5716 26.106 52.3576 25.9667 52.1274 25.8275C52.7437 25.0685 53.0646 24.0426 53.1367 23.7872C53.26 23.3555 53.0112 22.9076 52.5786 22.7845C52.146 22.6615 51.6971 22.9099 51.5715 23.3393C51.4087 23.9033 51.0064 24.7667 50.6505 25.0174C50.404 24.8967 50.1435 24.7783 49.8737 24.66C50.3203 24.0774 50.5435 23.4344 50.5807 23.3277C50.7226 22.9006 50.49 22.4433 50.0644 22.3018C49.6365 22.1602 49.1783 22.3923 49.0365 22.8194C48.9225 23.1652 48.5597 23.8731 48.2015 24.0194C48.2015 24.0194 48.1992 24.0194 48.1969 24.0194C45.8269 23.2279 42.7453 22.6453 38.8264 22.6754C38.5915 22.3876 38.4031 21.884 38.3357 21.5544C38.2473 21.1157 37.8194 20.8325 37.3798 20.9184C36.9379 21.0066 36.6519 21.4337 36.7402 21.8724C36.7565 21.9513 36.8333 22.3087 37.0077 22.7335C36.7565 22.7474 36.503 22.7613 36.2449 22.7799C36.0355 22.3737 35.8658 21.7865 35.8006 21.371C35.7309 20.9277 35.3146 20.6259 34.8703 20.6932C34.4261 20.7629 34.1215 21.1783 34.1912 21.6217C34.2191 21.8004 34.3168 22.3435 34.5378 22.9354C34.1656 22.9772 33.7889 23.0213 33.4028 23.0724C33.0818 22.8101 32.8307 22.4665 32.6237 22.0163C32.1422 20.9694 31.9492 19.7439 32.1074 18.7366L32.105 18.7389ZM33.6679 27.9489L33.8354 25.3586C45.7967 23.7942 51.2366 27.8166 52.6414 29.1072L52.2483 30.6182C49.3667 29.4553 46.3177 28.6221 43.1477 28.1416C39.9591 27.7029 36.7798 27.6402 33.6679 27.9466V27.9489Z" fill="#E0E0E0"/>
+<path d="M42.5105 47.0236C42.664 47.0886 42.8268 47.1281 42.9896 47.1443C43.785 47.2186 44.6409 46.7288 44.7432 45.7911C44.8269 45.0298 44.3502 44.4008 43.6176 44.3033C43.0082 44.2221 42.2058 44.5401 41.8732 45.1273C41.6942 45.443 41.6476 45.8399 41.75 46.1857C41.8639 46.578 42.1616 46.8751 42.5105 47.0236Z" fill="#E0E0E0"/>
+<path d="M34.8797 44.5447C34.9658 43.7114 34.5076 43.1404 33.7099 43.0801C32.8633 43.0174 32.0726 43.6696 32.0005 44.4936C31.9284 45.3107 32.5633 46.1602 33.4238 46.1323C34.2355 46.1068 34.803 45.2921 34.8797 44.5447Z" fill="#E0E0E0"/>
+<path d="M42.6245 55.109C42.2779 54.7678 41.8756 54.1736 41.6918 53.4355C40.7964 53.1245 36.2705 51.8038 31.9726 55.1067C31.7725 55.2599 31.4841 55.2228 31.3306 55.0231C31.1772 54.8235 31.2144 54.5357 31.4144 54.3825C33.9285 52.4514 36.4845 51.9616 38.48 51.9825C39.8545 51.9965 40.9569 52.2518 41.5988 52.4421C41.636 51.827 41.8523 51.1585 42.3617 50.4831C42.4384 50.381 42.55 50.3206 42.6663 50.3044C42.7803 50.2881 42.9012 50.3183 43.0036 50.3926C43.2059 50.5435 43.2454 50.8313 43.0943 51.0332C41.7151 52.8599 43.2059 54.3941 43.271 54.4591C43.4501 54.6378 43.4501 54.9257 43.2734 55.1044C43.0943 55.2831 42.8059 55.2854 42.6245 55.109Z" fill="#E0E0E0"/>
+<path d="M39.5684 48.7087C39.6312 48.096 38.8684 47.7316 37.8893 47.6294C36.9101 47.5273 36.0868 47.7269 36.0217 48.3374C35.9566 48.9478 36.6729 49.7811 37.652 49.8832C38.6312 49.9876 39.5057 49.3215 39.5684 48.7087Z" fill="#E0E0E0"/>
+<path d="M50.4687 58.1159C53.4292 57.6363 55.4396 54.8524 54.9591 51.8978C54.4785 48.9432 51.689 46.9369 48.7285 47.4165C45.768 47.8961 43.7576 50.68 44.2382 53.6346C44.7187 56.5891 47.5082 58.5955 50.4687 58.1159Z" fill="#E0E0E0"/>
+</svg>
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 4e6a95eb..1ba13008 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -3,6 +3,7 @@ import { Button } from '@dessert/ui'
 import { ChevronDown, ChevronUp, Heart, Star } from 'lucide-react'
 import { useFormContext } from 'react-hook-form'
 
+import NoThumb from '@/assets/icons/preview/noimage.svg'
 import Icon1 from '@/assets/icons/preview/preview-icon1.png'
 import Icon2 from '@/assets/icons/preview/preview-icon2.png'
 import Icon3 from '@/assets/icons/preview/preview-icon3.png'
@@ -120,7 +121,7 @@ export const ProductPreviewModal = ({
         <div className="sticky top-0 z-10 flex items-center gap-12 bg-white p-16">
           <ChevronDown className="rotate-90 text-gray-900" size={24} />
           <h1 className="flex-1 truncate typo-title-16-m text-gray-900">
-            {formData.productName || '[미입력] 상품명'}
+            {formData.productName || '{{상품명}}'}
           </h1>
         </div>
 
@@ -144,8 +145,9 @@ export const ProductPreviewModal = ({
                 className="size-full object-cover"
               />
             ) : (
-              <div className="flex size-full items-center justify-center typo-body-14-r text-gray-400">
-                이미지를 등록해주세요
+              <div className="flex size-full flex-col items-center justify-center gap-2 typo-body-14-r text-gray-400">
+                <img src={NoThumb} alt="썸네일이 등록되지 않았습니다" />
+                <p className="typo-title-16-m">등록된 이미지가 없습니다.</p>
               </div>
             )}
             <div className="absolute top-16 left-16 rounded-4 bg-[#F26565] px-8 py-4 typo-body-12-sb text-white">
@@ -168,7 +170,7 @@ export const ProductPreviewModal = ({
 
         <div className="border-t border-gray-300 bg-white p-16">
           <h2 className="typo-title-16-r text-gray-800">
-            {formData.productName || '[미입력] 상품명'}
+            {formData.productName || '{{상품명}}'}
           </h2>
           <div className="flex w-full items-center justify-between">
             <div className="flex items-center gap-4">
@@ -176,7 +178,9 @@ export const ProductPreviewModal = ({
                 {discountPercent > 0 ? `${discountPercent}%` : ''}
               </span>
               <span className="typo-heading-18-sb text-gray-900">
-                {totalPrice > 0 ? totalPrice.toLocaleString() : '0'}원~
+                {totalPrice > 0
+                  ? `${totalPrice.toLocaleString()}원~`
+                  : '{{상품가격}}'}
               </span>
               <span className="typo-title-14-m text-gray-500">
                 맛별 가격 상이
@@ -199,7 +203,7 @@ export const ProductPreviewModal = ({
             <span className="ml-4 typo-title-14-r text-gray-800">
               {formData.deliveryFee
                 ? `${formData.deliveryFee.toLocaleString()}원`
-                : '미입력'}
+                : '{{배송비}}'}
             </span>{' '}
             {formData.deliveryMinFee && (
               <span className="ml-2 typo-body-12-r text-gray-500">
@@ -240,95 +244,125 @@ export const ProductPreviewModal = ({
               옵션을 입력해주세요
             </div>
           ) : (
-            options.map((option, idx) => (
-              <div key={idx} className="border-t border-gray-300">
-                <div className="flex items-center justify-between p-16">
-                  <h4 className="mb-6 typo-title-14-r text-gray-800">
-                    {option.optionName || `[미입력] 옵션 ${idx + 1}`}
-                  </h4>
-                  <div className="flex items-center gap-6">
-                    <span className="typo-title-14-sb text-primary-500">
-                      10%
-                    </span>
-                    <span className="typo-title-14-sb text-gray-900">
-                      {(
-                        (productPrice ?? 0) + (option.additionalPrice ?? 0)
-                      ).toLocaleString()}
-                      원
-                    </span>
-                    <ChevronUp className="ml-8 text-gray-900" size={20} />
-                  </div>
-                </div>
+            options.map((option, idx) => {
+              // 1. 기초 데이터 계산
+              const basePrice = productPrice ?? 0
+              const additionalPrice = option.additionalPrice ?? 0
+              const originalPrice = basePrice + additionalPrice // 옵션이 포함된 정가
+              const discount = discountAmount ?? 0
+
+              // 2. 최종 가격 및 할인율 계산
+              const finalPrice = originalPrice - discount
+              const discountRate =
+                originalPrice > 0
+                  ? Math.round((discount / originalPrice) * 100)
+                  : 0
 
-                {/* 태그 */}
-                <div className="flex flex-wrap gap-6 border-t border-gray-300 p-16">
-                  {(() => {
-                    const tags = getOptionTags(option)
-                    return tags.length > 0 ? (
-                      tags.map((tag) => (
-                        <span
-                          key={tag}
-                          className="rounded-4 border border-gray-200 px-6 py-2 typo-body-10-r text-gray-600"
-                        >
-                          {tag}
+              // 3. 값이 없을 때 표시할 텍스트 분기
+              const hasPrice = productPrice !== null
+              const displayDiscountRate = hasPrice
+                ? `${discountRate}%`
+                : '{{할인율}}'
+              const displayFinalPrice = hasPrice
+                ? `${finalPrice.toLocaleString()}원`
+                : '{{할인가격}}'
+
+              return (
+                <div key={idx} className="border-t border-gray-300">
+                  <div className="flex items-center justify-between p-16">
+                    <h4 className="mb-6 typo-title-14-r text-gray-800">
+                      {option.optionName || `{{옵션명 ${idx + 1}}}`}
+                    </h4>
+                    <div className="flex items-center gap-6">
+                      {discount > 0 && (
+                        <span className="typo-body-12-r text-gray-400 line-through">
+                          {originalPrice.toLocaleString()}원
                         </span>
-                      ))
-                    ) : (
-                      <span className="typo-body-12-r text-gray-400">
-                        성분 카테고리 미입력
+                      )}
+
+                      {/* 할인율 */}
+                      <span className="typo-title-14-sb text-primary-500">
+                        {displayDiscountRate}
                       </span>
-                    )
-                  })()}
-                </div>
-                {/* 주문 가능날짜 */}
-                <div className="p-16 pt-0">
-                  <p className="mb-2 typo-body-12-sb text-gray-500">
-                    주문 가능날짜
-                  </p>
-                  <div className="flex w-full items-center justify-between">
-                    <DaySelector selectedDays={option.shippingDays} />
-                    <div className="rounded-8 bg-gray-900 px-10 py-[5.5px] typo-body-12-m text-white">
-                      빵켓팅 알림 신청
+
+                      {/* 최종 할인가 */}
+                      <span className="typo-title-14-sb text-gray-900">
+                        {displayFinalPrice}
+                      </span>
+                      <ChevronUp className="ml-8 text-gray-900" size={20} />
                     </div>
                   </div>
-                </div>
 
-                {/* 영양정보 */}
-                {option.hasNutrition && (
+                  {/* 태그 */}
+                  <div className="flex flex-wrap gap-6 border-t border-gray-300 p-16">
+                    {(() => {
+                      const tags = getOptionTags(option)
+                      return tags.length > 0 ? (
+                        tags.map((tag) => (
+                          <span
+                            key={tag}
+                            className="rounded-4 border border-gray-200 px-6 py-2 typo-body-10-r text-gray-600"
+                          >
+                            {tag}
+                          </span>
+                        ))
+                      ) : (
+                        <span className="typo-body-12-r text-gray-400">
+                          성분 카테고리 미입력
+                        </span>
+                      )
+                    })()}
+                  </div>
+                  {/* 주문 가능날짜 */}
                   <div className="p-16 pt-0">
-                    <div className="mb-10 flex items-center justify-between">
-                      <span className="mb-2 typo-body-12-sb text-gray-500">
-                        영양정보
-                      </span>
-                      <span className="typo-body-12-sb text-gray-700">
-                        총 내용량 {option.totalWeight ?? 0}g /{' '}
-                        {option.calories ?? 0}kcal
-                      </span>
+                    <p className="mb-2 typo-body-12-sb text-gray-500">
+                      주문 가능날짜
+                    </p>
+                    <div className="flex w-full items-center justify-between">
+                      <DaySelector selectedDays={option.shippingDays} />
+                      <div className="rounded-8 bg-gray-900 px-10 py-[5.5px] typo-body-12-m text-white">
+                        빵켓팅 알림 신청
+                      </div>
                     </div>
-                    <div className="mt-8 grid grid-cols-4 gap-6">
-                      {[
-                        { label: '단백질', key: 'protein' as const },
-                        { label: '당류', key: 'sugar' as const },
-                        { label: '탄수화물', key: 'carbohydrate' as const },
-                        { label: '지방', key: 'fat' as const },
-                      ].map((nutri) => (
-                        <div
-                          key={nutri.key}
-                          className="rounded-8 bg-gray-100 p-12 text-center"
-                        >
-                          <div className="mb-4 typo-body-11-r text-gray-500">
-                            {nutri.label}
-                          </div>
-                          <div className="typo-title-14-sb text-gray-900">
-                            {option[nutri.key] ?? 0}g
+                  </div>
+
+                  {/* 영양정보 */}
+                  {option.hasNutrition && (
+                    <div className="p-16 pt-0">
+                      <div className="mb-10 flex items-center justify-between">
+                        <span className="mb-2 typo-body-12-sb text-gray-500">
+                          영양정보
+                        </span>
+                        <span className="typo-body-12-sb text-gray-700">
+                          총 내용량 {option.totalWeight ?? 0}g /{' '}
+                          {option.calories ?? 0}kcal
+                        </span>
+                      </div>
+                      <div className="mt-8 grid grid-cols-4 gap-6">
+                        {[
+                          { label: '단백질', key: 'protein' as const },
+                          { label: '당류', key: 'sugar' as const },
+                          { label: '탄수화물', key: 'carbohydrate' as const },
+                          { label: '지방', key: 'fat' as const },
+                        ].map((nutri) => (
+                          <div
+                            key={nutri.key}
+                            className="rounded-8 bg-gray-100 p-12 text-center"
+                          >
+                            <div className="mb-4 typo-body-11-r text-gray-500">
+                              {nutri.label}
+                            </div>
+                            <div className="typo-title-14-sb text-gray-900">
+                              {option[nutri.key] ?? 0}g
+                            </div>
                           </div>
-                        </div>
-                      ))}
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                )}
-              </div>
-            ))
+                  )}
+                </div>
+              )
+            })
           )}
 
           <div className="p-16">

From b1453dc5dd0352c7e9f312df442c89907567c5b3 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 18:15:21 +0900
Subject: [PATCH 37/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=83=81=ED=92=88?=
 =?UTF-8?q?=20=EC=98=B5=EC=85=98=EC=9D=B4=202=EA=B0=9C=EC=9D=B4=EC=83=81?=
 =?UTF-8?q?=EB=B6=80=ED=84=B0=20=EB=AC=B6=EC=9D=8C=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EB=B1=83=EC=A7=80,=20=EB=A7=9B=EB=B3=84=20=EA=B0=80=EA=B2=A9?=
 =?UTF-8?q?=20=EC=83=81=EC=9D=B4=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=85=B8?=
 =?UTF-8?q?=EC=B6=9C=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-preview-modal.ui.tsx               | 43 ++++++++++++++-----
 1 file changed, 32 insertions(+), 11 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 1ba13008..60656e41 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -68,22 +68,33 @@ export const ProductPreviewModal = ({
   const { productDetail } = useProductCreationStore()
   if (!isOpen) return null
 
-  const price = formData.price ?? 0
-  const discountAmount = formData.discountAmount ?? 0
+  // 1. 원본 데이터 추출 (null/undefined일 수 있음)
+  const rawPrice = formData.price
+  const rawDiscount = formData.discountAmount
   const discountType = formData.discountType
 
+  // 2. 계산을 위한 기본값 처리
+  const price = rawPrice ?? 0
+  const discountAmount = rawDiscount ?? 0
+
+  // 3. 할인율 계산
   const discountPercent =
     discountType === 'won'
       ? price > 0
         ? Math.round((discountAmount / price) * 100)
         : 0
-      : discountAmount // percentage면 그대로
+      : discountAmount
 
+  // 4. 최종 가격 계산
   const totalPrice =
     discountType === 'won'
       ? price - discountAmount
       : Math.round(price * (1 - discountAmount / 100))
 
+  // 5. [핵심] UI 노출 여부 판단
+  // 가격이 null이거나 0이면 아직 입력 전인 것으로 간주합니다.
+  const isPriceEntered = rawPrice !== null && rawPrice > 0
+
   // mainImage를 ObjectURL로 변환해서 미리보기
   const mainImageUrl = formData.mainImage
     ? URL.createObjectURL(formData.mainImage)
@@ -150,9 +161,11 @@ export const ProductPreviewModal = ({
                 <p className="typo-title-16-m">등록된 이미지가 없습니다.</p>
               </div>
             )}
-            <div className="absolute top-16 left-16 rounded-4 bg-[#F26565] px-8 py-4 typo-body-12-sb text-white">
-              묶음상품
-            </div>
+            {options.length > 1 && (
+              <div className="absolute top-16 left-16 rounded-4 bg-[#F26565] px-8 py-4 typo-body-12-sb text-white">
+                묶음상품
+              </div>
+            )}
             <div className="absolute right-10 bottom-10 rounded-full bg-black/50 px-10 py-4 typo-body-12-r text-white">
               1 / {allImageUrls.length || 1}
             </div>
@@ -174,17 +187,25 @@ export const ProductPreviewModal = ({
           </h2>
           <div className="flex w-full items-center justify-between">
             <div className="flex items-center gap-4">
+              {' '}
+              {/* gap-4 유지! */}
               <span className="typo-heading-18-r text-primary-500">
-                {discountPercent > 0 ? `${discountPercent}%` : ''}
+                {/* 0%일 때는 가이드 문구 노출 */}
+                {isPriceEntered && discountPercent > 0
+                  ? `${discountPercent}%`
+                  : '{{할인율}}'}
               </span>
               <span className="typo-heading-18-sb text-gray-900">
-                {totalPrice > 0
+                {/* 입력 전에는 가이드 문구 노출 */}
+                {isPriceEntered
                   ? `${totalPrice.toLocaleString()}원~`
                   : '{{상품가격}}'}
               </span>
-              <span className="typo-title-14-m text-gray-500">
-                맛별 가격 상이
-              </span>
+              {options.length > 1 && (
+                <span className="typo-title-14-m text-gray-500">
+                  맛별 가격 상이
+                </span>
+              )}
             </div>
             <div className="flex items-center gap-2 typo-body-14-m text-gray-900">
               <Star className="fill-yellow-400 text-yellow-400" size={18} />

From 59ca13a71d7fff9564492b07cfbddaff35e5df3f Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 18:41:44 +0900
Subject: [PATCH 38/56] =?UTF-8?q?[seller]=20refactor(173):=20preview=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-preview-modal.ui.tsx               | 243 ++----------------
 .../create-preview-option-item.ui.tsx         | 148 +++++++++++
 .../create-preview/create-preview.hook.ts     |  53 ++++
 .../products/create/create-preview/index.ts   |   3 +
 4 files changed, 231 insertions(+), 216 deletions(-)
 create mode 100644 apps/seller/src/features/products/create/create-preview/create-preview-option-item.ui.tsx
 create mode 100644 apps/seller/src/features/products/create/create-preview/create-preview.hook.ts
 create mode 100644 apps/seller/src/features/products/create/create-preview/index.ts

diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index 60656e41..c33fe907 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -1,57 +1,15 @@
 import { BbanggreuiOvenLogo } from '@dessert/icons'
 import { Button } from '@dessert/ui'
-import { ChevronDown, ChevronUp, Heart, Star } from 'lucide-react'
-import { useFormContext } from 'react-hook-form'
+import { ChevronDown, Heart, Star } from 'lucide-react'
 
 import NoThumb from '@/assets/icons/preview/noimage.svg'
 import Icon1 from '@/assets/icons/preview/preview-icon1.png'
 import Icon2 from '@/assets/icons/preview/preview-icon2.png'
 import Icon3 from '@/assets/icons/preview/preview-icon3.png'
-import {
-  CreateFormType,
-  ProductOptionFormInput,
-} from '@/entity/products/create/create-form'
-import { EssentialOptions } from '@/entity/products/create/create-header'
-import { SHIPPING_DAYS } from '@/entity/products/create/create-options'
 import { cn } from '@/shared/libs/utils'
 
-import { useCreateHeaderSteps } from '../create-store'
-import { useProductCreationStore } from '../create-store/product-creation.store'
-
-const DaySelector = ({ selectedDays }: { selectedDays: string[] }) => {
-  const days = SHIPPING_DAYS
-  return (
-    <div className="flex gap-4">
-      {days.map((day) => (
-        <span
-          key={day.value}
-          className={`flex size-32 items-center justify-center rounded-full border typo-body-12-sb ${
-            selectedDays.includes(day.value)
-              ? 'border-[#F26565] bg-[#F26565] text-white'
-              : 'border-gray-100 bg-white text-gray-400'
-          }`}
-        >
-          {day.label}
-        </span>
-      ))}
-    </div>
-  )
-}
-const getOptionTags = (option: ProductOptionFormInput) => {
-  const tags: string[] = []
-
-  const { ingredientCategories, protein, fat, sugar } = option
-
-  if (ingredientCategories.includes('glutenFree'))
-    tags.push(EssentialOptions[0].title)
-  if (ingredientCategories.includes('vegan'))
-    tags.push(EssentialOptions[1].title)
-  if (protein !== null && protein >= 11) tags.push(EssentialOptions[2].title)
-  if (fat !== null && fat < 3) tags.push(EssentialOptions[3].title)
-  if (sugar !== null && sugar < 5) tags.push(EssentialOptions[4].title)
-
-  return tags
-}
+import { CreatePreviewOptionItemUi } from './create-preview-option-item.ui'
+import { useCreatePreviewPreviewHook } from './create-preview.hook'
 
 interface ProductPreviewModalProps {
   isOpen: boolean
@@ -62,51 +20,20 @@ export const ProductPreviewModal = ({
   isOpen,
   onClose,
 }: ProductPreviewModalProps) => {
-  const { watch } = useFormContext<CreateFormType>()
-  const formData = watch()
-  const { productPrice } = useCreateHeaderSteps()
-  const { productDetail } = useProductCreationStore()
-  if (!isOpen) return null
-
-  // 1. 원본 데이터 추출 (null/undefined일 수 있음)
-  const rawPrice = formData.price
-  const rawDiscount = formData.discountAmount
-  const discountType = formData.discountType
-
-  // 2. 계산을 위한 기본값 처리
-  const price = rawPrice ?? 0
-  const discountAmount = rawDiscount ?? 0
-
-  // 3. 할인율 계산
-  const discountPercent =
-    discountType === 'won'
-      ? price > 0
-        ? Math.round((discountAmount / price) * 100)
-        : 0
-      : discountAmount
-
-  // 4. 최종 가격 계산
-  const totalPrice =
-    discountType === 'won'
-      ? price - discountAmount
-      : Math.round(price * (1 - discountAmount / 100))
+  const {
+    formData,
+    productPrice,
+    productDetail,
+    discountPercent,
+    totalPrice,
+    isPriceEntered,
+    allImageUrls,
+    discountAmount,
+  } = useCreatePreviewPreviewHook()
 
-  // 5. [핵심] UI 노출 여부 판단
-  // 가격이 null이거나 0이면 아직 입력 전인 것으로 간주합니다.
-  const isPriceEntered = rawPrice !== null && rawPrice > 0
-
-  // mainImage를 ObjectURL로 변환해서 미리보기
-  const mainImageUrl = formData.mainImage
-    ? URL.createObjectURL(formData.mainImage)
-    : null
-  const extraImageUrls = (formData.extraImages ?? []).map((f) =>
-    URL.createObjectURL(f),
-  )
-  const allImageUrls = mainImageUrl ? [mainImageUrl, ...extraImageUrls] : []
+  if (!isOpen) return null
 
   const options = formData.options ?? []
-
-  //뱃지 매핑
   const BADGES = [
     { label: '맛있어요', icon: Icon1 },
     { label: '담백해요', icon: Icon2 },
@@ -124,6 +51,7 @@ export const ProductPreviewModal = ({
       >
         <BbanggreuiOvenLogo />
       </div>
+
       <div
         className="relative h-full w-150 overflow-y-auto bg-white"
         onClick={(e) => e.stopPropagation()}
@@ -187,16 +115,12 @@ export const ProductPreviewModal = ({
           </h2>
           <div className="flex w-full items-center justify-between">
             <div className="flex items-center gap-4">
-              {' '}
-              {/* gap-4 유지! */}
               <span className="typo-heading-18-r text-primary-500">
-                {/* 0%일 때는 가이드 문구 노출 */}
                 {isPriceEntered && discountPercent > 0
                   ? `${discountPercent}%`
                   : '{{할인율}}'}
               </span>
               <span className="typo-heading-18-sb text-gray-900">
-                {/* 입력 전에는 가이드 문구 노출 */}
                 {isPriceEntered
                   ? `${totalPrice.toLocaleString()}원~`
                   : '{{상품가격}}'}
@@ -209,9 +133,7 @@ export const ProductPreviewModal = ({
             </div>
             <div className="flex items-center gap-2 typo-body-14-m text-gray-900">
               <Star className="fill-yellow-400 text-yellow-400" size={18} />
-              4.5 <span className="typo-body-12-r text-gray-500">
-                (1,000)
-              </span>{' '}
+              4.5 <span className="typo-body-12-r text-gray-500">(1,000)</span>
               <ChevronDown className="-rotate-90 text-gray-300" size={12} />
             </div>
           </div>
@@ -220,12 +142,12 @@ export const ProductPreviewModal = ({
         {/* 5. 배송비 */}
         <div className="bg-gray-50 px-16 py-12">
           <div className="typo-title-14-m text-gray-600">
-            배송비{' '}
+            배송비
             <span className="ml-4 typo-title-14-r text-gray-800">
               {formData.deliveryFee
                 ? `${formData.deliveryFee.toLocaleString()}원`
                 : '{{배송비}}'}
-            </span>{' '}
+            </span>
             {formData.deliveryMinFee && (
               <span className="ml-2 typo-body-12-r text-gray-500">
                 ({formData.deliveryMinFee.toLocaleString()}원 이상 구매 시 무료)
@@ -265,127 +187,16 @@ export const ProductPreviewModal = ({
               옵션을 입력해주세요
             </div>
           ) : (
-            options.map((option, idx) => {
-              // 1. 기초 데이터 계산
-              const basePrice = productPrice ?? 0
-              const additionalPrice = option.additionalPrice ?? 0
-              const originalPrice = basePrice + additionalPrice // 옵션이 포함된 정가
-              const discount = discountAmount ?? 0
-
-              // 2. 최종 가격 및 할인율 계산
-              const finalPrice = originalPrice - discount
-              const discountRate =
-                originalPrice > 0
-                  ? Math.round((discount / originalPrice) * 100)
-                  : 0
-
-              // 3. 값이 없을 때 표시할 텍스트 분기
-              const hasPrice = productPrice !== null
-              const displayDiscountRate = hasPrice
-                ? `${discountRate}%`
-                : '{{할인율}}'
-              const displayFinalPrice = hasPrice
-                ? `${finalPrice.toLocaleString()}원`
-                : '{{할인가격}}'
-
-              return (
-                <div key={idx} className="border-t border-gray-300">
-                  <div className="flex items-center justify-between p-16">
-                    <h4 className="mb-6 typo-title-14-r text-gray-800">
-                      {option.optionName || `{{옵션명 ${idx + 1}}}`}
-                    </h4>
-                    <div className="flex items-center gap-6">
-                      {discount > 0 && (
-                        <span className="typo-body-12-r text-gray-400 line-through">
-                          {originalPrice.toLocaleString()}원
-                        </span>
-                      )}
-
-                      {/* 할인율 */}
-                      <span className="typo-title-14-sb text-primary-500">
-                        {displayDiscountRate}
-                      </span>
-
-                      {/* 최종 할인가 */}
-                      <span className="typo-title-14-sb text-gray-900">
-                        {displayFinalPrice}
-                      </span>
-                      <ChevronUp className="ml-8 text-gray-900" size={20} />
-                    </div>
-                  </div>
-
-                  {/* 태그 */}
-                  <div className="flex flex-wrap gap-6 border-t border-gray-300 p-16">
-                    {(() => {
-                      const tags = getOptionTags(option)
-                      return tags.length > 0 ? (
-                        tags.map((tag) => (
-                          <span
-                            key={tag}
-                            className="rounded-4 border border-gray-200 px-6 py-2 typo-body-10-r text-gray-600"
-                          >
-                            {tag}
-                          </span>
-                        ))
-                      ) : (
-                        <span className="typo-body-12-r text-gray-400">
-                          성분 카테고리 미입력
-                        </span>
-                      )
-                    })()}
-                  </div>
-                  {/* 주문 가능날짜 */}
-                  <div className="p-16 pt-0">
-                    <p className="mb-2 typo-body-12-sb text-gray-500">
-                      주문 가능날짜
-                    </p>
-                    <div className="flex w-full items-center justify-between">
-                      <DaySelector selectedDays={option.shippingDays} />
-                      <div className="rounded-8 bg-gray-900 px-10 py-[5.5px] typo-body-12-m text-white">
-                        빵켓팅 알림 신청
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* 영양정보 */}
-                  {option.hasNutrition && (
-                    <div className="p-16 pt-0">
-                      <div className="mb-10 flex items-center justify-between">
-                        <span className="mb-2 typo-body-12-sb text-gray-500">
-                          영양정보
-                        </span>
-                        <span className="typo-body-12-sb text-gray-700">
-                          총 내용량 {option.totalWeight ?? 0}g /{' '}
-                          {option.calories ?? 0}kcal
-                        </span>
-                      </div>
-                      <div className="mt-8 grid grid-cols-4 gap-6">
-                        {[
-                          { label: '단백질', key: 'protein' as const },
-                          { label: '당류', key: 'sugar' as const },
-                          { label: '탄수화물', key: 'carbohydrate' as const },
-                          { label: '지방', key: 'fat' as const },
-                        ].map((nutri) => (
-                          <div
-                            key={nutri.key}
-                            className="rounded-8 bg-gray-100 p-12 text-center"
-                          >
-                            <div className="mb-4 typo-body-11-r text-gray-500">
-                              {nutri.label}
-                            </div>
-                            <div className="typo-title-14-sb text-gray-900">
-                              {option[nutri.key] ?? 0}g
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )
-            })
+            options.map((option, idx) => (
+              <CreatePreviewOptionItemUi
+                key={idx}
+                option={option}
+                idx={idx}
+                productPrice={productPrice}
+                discountAmount={discountAmount}
+              />
+            ))
           )}
-
           <div className="p-16">
             <div className="mt-16 w-full rounded-10 border border-gray-200 py-8 text-center typo-title-16-m text-gray-800">
               간단히 보기
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-option-item.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-option-item.ui.tsx
new file mode 100644
index 00000000..2acae173
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-option-item.ui.tsx
@@ -0,0 +1,148 @@
+import { ChevronUp } from 'lucide-react'
+
+import { ProductOptionFormInput } from '@/entity/products/create/create-form'
+import { EssentialOptions } from '@/entity/products/create/create-header'
+import { SHIPPING_DAYS } from '@/entity/products/create/create-options'
+
+const DaySelector = ({ selectedDays }: { selectedDays: string[] }) => {
+  const days = SHIPPING_DAYS
+  return (
+    <div className="flex gap-4">
+      {days.map((day) => (
+        <span
+          key={day.value}
+          className={`flex size-32 items-center justify-center rounded-full border typo-body-12-sb ${
+            selectedDays.includes(day.value)
+              ? 'border-[#F26565] bg-[#F26565] text-white'
+              : 'border-gray-100 bg-white text-gray-400'
+          }`}
+        >
+          {day.label}
+        </span>
+      ))}
+    </div>
+  )
+}
+
+const getOptionTags = (option: ProductOptionFormInput) => {
+  const tags: string[] = []
+  const { ingredientCategories, protein, fat, sugar } = option
+  if (ingredientCategories.includes('glutenFree'))
+    tags.push(EssentialOptions[0].title)
+  if (ingredientCategories.includes('vegan'))
+    tags.push(EssentialOptions[1].title)
+  if (protein !== null && protein >= 11) tags.push(EssentialOptions[2].title)
+  if (fat !== null && fat < 3) tags.push(EssentialOptions[3].title)
+  if (sugar !== null && sugar < 5) tags.push(EssentialOptions[4].title)
+  return tags
+}
+
+interface OptionItemProps {
+  option: ProductOptionFormInput
+  idx: number
+  productPrice: number | null
+  discountAmount: number
+}
+
+export const CreatePreviewOptionItemUi = ({
+  option,
+  idx,
+  productPrice,
+  discountAmount,
+}: OptionItemProps) => {
+  const basePrice = productPrice ?? 0
+  const additionalPrice = option.additionalPrice ?? 0
+  const originalPrice = basePrice + additionalPrice
+  const finalPrice = originalPrice - discountAmount
+  const discountRate =
+    originalPrice > 0 ? Math.round((discountAmount / originalPrice) * 100) : 0
+
+  const hasPrice = productPrice !== null
+  const displayDiscountRate = hasPrice ? `${discountRate}%` : '{{할인율}}'
+  const displayFinalPrice = hasPrice
+    ? `${finalPrice.toLocaleString()}원`
+    : '{{할인가격}}'
+
+  return (
+    <div className="border-t border-gray-300">
+      <div className="flex items-center justify-between p-16">
+        <h4 className="mb-6 typo-title-14-r text-gray-800">
+          {option.optionName || `{{옵션명 ${idx + 1}}}`}
+        </h4>
+        <div className="flex items-center gap-6">
+          {discountAmount > 0 && (
+            <span className="typo-body-12-r text-gray-400 line-through">
+              {originalPrice.toLocaleString()}원
+            </span>
+          )}
+          <span className="typo-title-14-sb text-primary-500">
+            {displayDiscountRate}
+          </span>
+          <span className="typo-title-14-sb text-gray-900">
+            {displayFinalPrice}
+          </span>
+          <ChevronUp className="ml-8 text-gray-900" size={20} />
+        </div>
+      </div>
+
+      {/* 태그 영역 */}
+      <div className="flex flex-wrap gap-6 border-t border-gray-300 p-16">
+        {getOptionTags(option).length > 0 ? (
+          getOptionTags(option).map((tag) => (
+            <span
+              key={tag}
+              className="rounded-4 border border-gray-200 px-6 py-2 typo-body-10-r text-gray-600"
+            >
+              {tag}
+            </span>
+          ))
+        ) : (
+          <span className="typo-body-12-r text-gray-400">
+            성분 카테고리 미입력
+          </span>
+        )}
+      </div>
+
+      <div className="p-16 pt-0">
+        <p className="mb-2 typo-body-12-sb text-gray-500">주문 가능날짜</p>
+        <div className="flex w-full items-center justify-between">
+          <DaySelector selectedDays={option.shippingDays} />
+          <div className="rounded-8 bg-gray-900 px-10 py-[5.5px] typo-body-12-m text-white">
+            빵켓팅 알림 신청
+          </div>
+        </div>
+      </div>
+
+      {option.hasNutrition && (
+        <div className="p-16 pt-0">
+          <div className="mb-10 flex items-center justify-between">
+            <span className="mb-2 typo-body-12-sb text-gray-500">영양정보</span>
+            <span className="typo-body-12-sb text-gray-700">
+              총 내용량 {option.totalWeight ?? 0}g / {option.calories ?? 0}kcal
+            </span>
+          </div>
+          <div className="mt-8 grid grid-cols-4 gap-6">
+            {[
+              { label: '단백질', key: 'protein' as const },
+              { label: '당류', key: 'sugar' as const },
+              { label: '탄수화물', key: 'carbohydrate' as const },
+              { label: '지방', key: 'fat' as const },
+            ].map((nutri) => (
+              <div
+                key={nutri.key}
+                className="rounded-8 bg-gray-100 p-12 text-center"
+              >
+                <div className="mb-4 typo-body-11-r text-gray-500">
+                  {nutri.label}
+                </div>
+                <div className="typo-title-14-sb text-gray-900">
+                  {option[nutri.key] ?? 0}g
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview.hook.ts b/apps/seller/src/features/products/create/create-preview/create-preview.hook.ts
new file mode 100644
index 00000000..606bed72
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-preview/create-preview.hook.ts
@@ -0,0 +1,53 @@
+import { useFormContext } from 'react-hook-form'
+
+import { CreateFormType } from '@/entity/products/create/create-form'
+
+import { useCreateHeaderSteps } from '../create-store'
+import { useProductCreationStore } from '../create-store/product-creation.store'
+
+export const useCreatePreviewPreviewHook = () => {
+  const { watch } = useFormContext<CreateFormType>()
+  const formData = watch()
+  const { productPrice } = useCreateHeaderSteps()
+  const { productDetail } = useProductCreationStore()
+
+  const rawPrice = formData.price
+  const rawDiscount = formData.discountAmount
+  const discountType = formData.discountType
+
+  const price = rawPrice ?? 0
+  const discountAmount = rawDiscount ?? 0
+
+  const discountPercent =
+    discountType === 'won'
+      ? price > 0
+        ? Math.round((discountAmount / price) * 100)
+        : 0
+      : discountAmount
+
+  const totalPrice =
+    discountType === 'won'
+      ? price - discountAmount
+      : Math.round(price * (1 - discountAmount / 100))
+
+  const isPriceEntered = rawPrice !== null && rawPrice > 0
+
+  const mainImageUrl = formData.mainImage
+    ? URL.createObjectURL(formData.mainImage)
+    : null
+  const extraImageUrls = (formData.extraImages ?? []).map((f) =>
+    URL.createObjectURL(f),
+  )
+  const allImageUrls = mainImageUrl ? [mainImageUrl, ...extraImageUrls] : []
+
+  return {
+    formData,
+    productPrice,
+    productDetail,
+    discountPercent,
+    totalPrice,
+    isPriceEntered,
+    allImageUrls,
+    discountAmount,
+  }
+}
diff --git a/apps/seller/src/features/products/create/create-preview/index.ts b/apps/seller/src/features/products/create/create-preview/index.ts
new file mode 100644
index 00000000..b4166b42
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-preview/index.ts
@@ -0,0 +1,3 @@
+export { useCreatePreviewPreviewHook } from './create-preview.hook'
+export { CreatePreviewOptionItemUi } from './create-preview-option-item.ui'
+export { ProductPreviewModal } from './create-preview-modal.ui'

From 6629f999ef91bdb23d24fb7b7e182bc2e11f294f Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 18:42:49 +0900
Subject: [PATCH 39/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=9E=98=EB=AA=BB?=
 =?UTF-8?q?=EB=90=9C=20import=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../products/create/create-form/use-create-form.hook.ts     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts b/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts
index 958bc299..42df8861 100644
--- a/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts
@@ -1,11 +1,11 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Resolver, useForm } from 'react-hook-form'
 
+import { DISCLOSURE_FIELDS } from '@/entity/products/create/create-disclosure'
 import {
-  DISCLOSURE_FIELDS,
+  CreateFormType,
   ProductOptionFormInput,
-} from '@/entity/products/create/create-disclosure'
-import { CreateFormType } from '@/entity/products/create/create-form'
+} from '@/entity/products/create/create-form'
 
 import { CreateFormSchema } from './create-form.schema'
 

From a8f5ed6b8e265df06b6afc946e581e84646657e1 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 18:45:46 +0900
Subject: [PATCH 40/56] =?UTF-8?q?[seller]=20fix(173):=20API=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=EC=97=90=20=EB=A7=9E=EA=B2=8C=20enum=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../products/create/create-form/product-form.type.ts |  2 +-
 .../create-info/product-discount-type.constants.ts   |  4 ++--
 .../create-form-info/create-form-info-area.ui.tsx    |  2 +-
 .../create/create-form-info/create-info.schema.ts    | 12 ++++++------
 .../create-form-info/use-product-info-form.hook.ts   |  4 ++--
 .../create/create-form/use-create-form.hook.ts       |  2 +-
 .../create/create-preview/create-preview.hook.ts     |  4 ++--
 7 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/seller/src/entity/products/create/create-form/product-form.type.ts b/apps/seller/src/entity/products/create/create-form/product-form.type.ts
index a680cc08..69e4a40b 100644
--- a/apps/seller/src/entity/products/create/create-form/product-form.type.ts
+++ b/apps/seller/src/entity/products/create/create-form/product-form.type.ts
@@ -6,7 +6,7 @@ export type ProductFormInput = {
   productionTime: string
   price: number | null
   discountAmount: number | null
-  discountType: 'won' | 'percentage'
+  discountType: 'AMOUNT' | 'PERCENT'
 }
 
 export type DeliveryFormInput = {
diff --git a/apps/seller/src/entity/products/create/create-info/product-discount-type.constants.ts b/apps/seller/src/entity/products/create/create-info/product-discount-type.constants.ts
index 641e95ea..6bf3852e 100644
--- a/apps/seller/src/entity/products/create/create-info/product-discount-type.constants.ts
+++ b/apps/seller/src/entity/products/create/create-info/product-discount-type.constants.ts
@@ -1,10 +1,10 @@
 export const ProductDiscountType = [
   {
     label: '원',
-    value: 'won',
+    value: 'AMOUNT',
   },
   {
     label: '%',
-    value: 'percentage',
+    value: 'PERCENT',
   },
 ]
diff --git a/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx b/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
index c7dc5540..bb90996d 100644
--- a/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-info/create-form-info-area.ui.tsx
@@ -133,7 +133,7 @@ export const ProductInfoArea = () => {
             <Input
               required
               label="할인 금액"
-              placeholder={discountType === 'won' ? '0~100,000' : '0~100'}
+              placeholder={discountType === 'AMOUNT' ? '0~100,000' : '0~100'}
               className="flex-1"
               labelClassName="typo-heading-18-r"
               value={discountInput.displayValue}
diff --git a/apps/seller/src/features/products/create/create-form-info/create-info.schema.ts b/apps/seller/src/features/products/create/create-form-info/create-info.schema.ts
index 17cc1080..d702cae9 100644
--- a/apps/seller/src/features/products/create/create-form-info/create-info.schema.ts
+++ b/apps/seller/src/features/products/create/create-form-info/create-info.schema.ts
@@ -18,7 +18,7 @@ export const productSchema = z
         .min(0, '올바른 가격을 입력해주세요'),
       z.null(),
     ]),
-    discountType: z.enum(['won', 'percentage']),
+    discountType: z.enum(['AMOUNT', 'PERCENT']),
   })
 
   .refine(
@@ -36,16 +36,16 @@ export const productSchema = z
   .refine(
     (data) => {
       if (data.discountAmount === null) return true
-      return data.discountType === 'won' ? data.discountAmount <= 100000 : true
+      return data.discountType === 'AMOUNT'
+        ? data.discountAmount <= 100000
+        : true
     },
     { message: '올바른 금액을 입력해주세요', path: ['discountAmount'] },
   )
   .refine(
     (data) => {
       if (data.discountAmount === null) return true
-      return data.discountType === 'percentage'
-        ? data.discountAmount <= 100
-        : true
+      return data.discountType === 'PERCENT' ? data.discountAmount <= 100 : true
     },
     { message: '올바른 할인율을 입력해주세요', path: ['discountAmount'] },
   )
@@ -53,7 +53,7 @@ export const productSchema = z
     (data) => {
       if (data.price === null || data.discountAmount === null) return true
       const finalPrice =
-        data.discountType === 'won'
+        data.discountType === 'AMOUNT'
           ? data.price - data.discountAmount
           : data.price * (1 - data.discountAmount / 100)
       return finalPrice >= 0
diff --git a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
index 2907ba68..389be4fe 100644
--- a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
@@ -1,8 +1,8 @@
 import { useFormContext } from 'react-hook-form'
 
+import { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
 import { useNumberInput } from '../create-calculation'
 // import { useCreateFormSteps } from '../create-form'
-import { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
 import { useCreateHeaderSteps } from '../create-store'
 
 export function useProductInfoForm() {
@@ -25,7 +25,7 @@ export function useProductInfoForm() {
 
   const finalPrice =
     price !== null && discountAmount !== null
-      ? discountType === 'won'
+      ? discountType === 'AMOUNT'
         ? Math.max(price - discountAmount, 0)
         : Math.max(price * (1 - discountAmount / 100), 0)
       : null
diff --git a/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts b/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts
index 42df8861..9ca86d4c 100644
--- a/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts
@@ -36,7 +36,7 @@ export const useCreateForm = () => {
       productionTime: '',
       price: null,
       discountAmount: null,
-      discountType: 'won',
+      discountType: 'AMOUNT',
 
       deliveryTerms: '',
       deliveryCompany: '',
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview.hook.ts b/apps/seller/src/features/products/create/create-preview/create-preview.hook.ts
index 606bed72..52f0da42 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview.hook.ts
+++ b/apps/seller/src/features/products/create/create-preview/create-preview.hook.ts
@@ -19,14 +19,14 @@ export const useCreatePreviewPreviewHook = () => {
   const discountAmount = rawDiscount ?? 0
 
   const discountPercent =
-    discountType === 'won'
+    discountType === 'AMOUNT'
       ? price > 0
         ? Math.round((discountAmount / price) * 100)
         : 0
       : discountAmount
 
   const totalPrice =
-    discountType === 'won'
+    discountType === 'AMOUNT'
       ? price - discountAmount
       : Math.round(price * (1 - discountAmount / 100))
 

From 9fbcf385f65191ad684ba0304ab521ee6f5f53b6 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sat, 25 Apr 2026 18:47:02 +0900
Subject: [PATCH 41/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=9E=98=EB=AA=BB?=
 =?UTF-8?q?=EB=90=9C=20import=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/create-form-info/use-product-info-form.hook.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
index 389be4fe..91da9df8 100644
--- a/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-info/use-product-info-form.hook.ts
@@ -1,12 +1,12 @@
 import { useFormContext } from 'react-hook-form'
 
-import { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
+import { CreateFormType } from '@/entity/products/create/create-form'
+
 import { useNumberInput } from '../create-calculation'
-// import { useCreateFormSteps } from '../create-form'
 import { useCreateHeaderSteps } from '../create-store'
 
 export function useProductInfoForm() {
-  const form = useFormContext<CreateProductForm>()
+  const form = useFormContext<CreateFormType>()
   const { setProductPrice } = useCreateHeaderSteps()
 
   // 실시간으로 가격/할인 최종 금액 계산

From 9321bd1d0ded17ed723e22634aee22ace1529dd7 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 12:15:15 +0900
Subject: [PATCH 42/56] =?UTF-8?q?[seller]=20feat(173):=20API=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0=20=EC=BD=94=EB=93=9C=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...t-create.types.ts => create-form.types.ts} |   2 +-
 ...type.ts => create-indivisual-form.type.ts} |   0
 .../products/create/create-form/create.api.ts |  28 ++++
 .../create/create-form/create.query.ts        |  16 ++
 .../create/create-form/create.type.ts         |  66 ++++++++
 .../products/create/create-form/index.ts      |  12 +-
 .../create/create-footer/create-footer.ui.tsx |  10 +-
 .../use-product-delivery-form.hook.ts         |   2 +-
 .../create-detail-editor-modal.ui.tsx         |   3 +
 .../create-form-detail-area.ui.tsx            |   8 +-
 .../create-form-options-area.ui.tsx           |  19 +--
 .../use-product-options.form.hook.ts          |   4 +-
 .../use-product-thumnail-form.hook.ts         |   4 +-
 .../create/create-form/create-form-mapper.ts  | 147 ++++++++++++++++++
 .../create-form-submit.mutation.ts            |  51 ++++++
 .../products/create/create-form/index.ts      |   3 +-
 .../create/utils/create-form-api-request.ts   |  74 ---------
 17 files changed, 350 insertions(+), 99 deletions(-)
 rename apps/seller/src/entity/products/create/create-form/{product-create.types.ts => create-form.types.ts} (90%)
 rename apps/seller/src/entity/products/create/create-form/{product-form.type.ts => create-indivisual-form.type.ts} (100%)
 create mode 100644 apps/seller/src/entity/products/create/create-form/create.api.ts
 create mode 100644 apps/seller/src/entity/products/create/create-form/create.query.ts
 create mode 100644 apps/seller/src/entity/products/create/create-form/create.type.ts
 create mode 100644 apps/seller/src/features/products/create/create-form/create-form-mapper.ts
 create mode 100644 apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
 delete mode 100644 apps/seller/src/features/products/create/utils/create-form-api-request.ts

diff --git a/apps/seller/src/entity/products/create/create-form/product-create.types.ts b/apps/seller/src/entity/products/create/create-form/create-form.types.ts
similarity index 90%
rename from apps/seller/src/entity/products/create/create-form/product-create.types.ts
rename to apps/seller/src/entity/products/create/create-form/create-form.types.ts
index 63af0654..2231a3c1 100644
--- a/apps/seller/src/entity/products/create/create-form/product-create.types.ts
+++ b/apps/seller/src/entity/products/create/create-form/create-form.types.ts
@@ -4,7 +4,7 @@ import {
   ProductFormInput,
   ProductOptionFormInput,
   ThumbnailFormInput,
-} from './product-form.type'
+} from './create-indivisual-form.type'
 
 export type CreateFormType = ProductFormInput &
   DeliveryFormInput & {
diff --git a/apps/seller/src/entity/products/create/create-form/product-form.type.ts b/apps/seller/src/entity/products/create/create-form/create-indivisual-form.type.ts
similarity index 100%
rename from apps/seller/src/entity/products/create/create-form/product-form.type.ts
rename to apps/seller/src/entity/products/create/create-form/create-indivisual-form.type.ts
diff --git a/apps/seller/src/entity/products/create/create-form/create.api.ts b/apps/seller/src/entity/products/create/create-form/create.api.ts
new file mode 100644
index 00000000..d7f44a0c
--- /dev/null
+++ b/apps/seller/src/entity/products/create/create-form/create.api.ts
@@ -0,0 +1,28 @@
+import { client } from '@/shared/utils/axios'
+
+import { ApiResponse, StoreInfo } from './create.type'
+
+// storeId 조회
+export const getMyStore = async () => {
+  const response = await client.get<ApiResponse<{ store: StoreInfo }>>(
+    '/api/v1/seller/stores',
+  )
+  return response.data.result.store
+}
+
+// 상품 등록
+export const createProduct = async (formData: FormData) => {
+  const response = await client.post('/api/v1/seller/boards', formData)
+  return response.data
+}
+
+// ✅ 확인 필요: 이미지 업로드 API
+export const uploadImage = async (file: File): Promise<string> => {
+  const formData = new FormData()
+  formData.append('image', file) // ✅ 확인 필요: key 이름
+  const response = await client.post<{ result: { url: string } }>(
+    '/api/v1/images', // ✅ 확인 필요: 엔드포인트
+    formData,
+  )
+  return response.data.result.url
+}
diff --git a/apps/seller/src/entity/products/create/create-form/create.query.ts b/apps/seller/src/entity/products/create/create-form/create.query.ts
new file mode 100644
index 00000000..4e86afcf
--- /dev/null
+++ b/apps/seller/src/entity/products/create/create-form/create.query.ts
@@ -0,0 +1,16 @@
+import { queryOptions } from '@tanstack/react-query'
+
+import { getMyStore } from './create.api'
+
+export const productKeys = {
+  all: ['products'] as const,
+  myStore: () => [...productKeys.all, 'myStore'] as const,
+}
+
+export const productQueries = {
+  myStore: () =>
+    queryOptions({
+      queryKey: productKeys.myStore(),
+      queryFn: getMyStore,
+    }),
+}
diff --git a/apps/seller/src/entity/products/create/create-form/create.type.ts b/apps/seller/src/entity/products/create/create-form/create.type.ts
new file mode 100644
index 00000000..2db13b0a
--- /dev/null
+++ b/apps/seller/src/entity/products/create/create-form/create.type.ts
@@ -0,0 +1,66 @@
+// API 요청 타입
+export interface CreateProductRequest {
+  storeId: number
+  title: string
+  isFresh: boolean
+  productionStartAt: string
+  price: number
+  discountType: 'amount' | 'percent'
+  discountValue: number
+  deliveryCondition: string
+  deliveryCompany: string
+  deliveryFee: number
+  freeShippingConditions: number
+  content: string
+  products: ProductOptionRequest[]
+  productInfoNoticeRequest: Record<string, string>
+}
+
+export interface ProductOptionRequest {
+  title: string
+  category: string
+  plusPriceWithBoardPrice: number
+  stock: number
+  dietaryTags: {
+    glutenFreeTag: boolean
+    highProteinTag: boolean
+    sugarFreeTag: boolean
+    veganTag: boolean
+    ketogenicTag: boolean
+  }
+  availability: {
+    monday: boolean
+    tuesday: boolean
+    wednesday: boolean
+    thursday: boolean
+    friday: boolean
+    saturday: boolean
+    sunday: boolean
+  }
+  nutritionInfo: {
+    totalWeight: number
+    servingSize: number
+    carbohydrates: number
+    sugars: number
+    protein: number
+    fat: number
+    calories: number
+  } | null
+}
+
+// API 응답 타입
+export interface StoreInfo {
+  storeId: number
+  name: string
+  introduce: string
+  profile: string
+  phoneNumber: string
+  email: string
+}
+
+export interface ApiResponse<T> {
+  success: boolean
+  code: number
+  message: string
+  result: T
+}
diff --git a/apps/seller/src/entity/products/create/create-form/index.ts b/apps/seller/src/entity/products/create/create-form/index.ts
index 2485f8d0..e13bd3b6 100644
--- a/apps/seller/src/entity/products/create/create-form/index.ts
+++ b/apps/seller/src/entity/products/create/create-form/index.ts
@@ -1,2 +1,10 @@
-export * from './product-create.types'
-export * from './product-form.type'
+export * from './create-form.types'
+export * from './create-indivisual-form.type'
+export { getMyStore, createProduct, uploadImage } from './create.api'
+export { productQueries, productKeys } from './create.query'
+export type {
+  CreateProductRequest,
+  ProductOptionRequest,
+  StoreInfo,
+  ApiResponse,
+} from './create.type'
diff --git a/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx b/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
index 3ea506bf..5d1e7ec3 100644
--- a/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
+++ b/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
@@ -1,10 +1,13 @@
 import { Button } from '@dessert/ui'
 
+import { useSubmitCreateForm } from '@/features/products/create/create-form'
 interface ProductFooterProps {
   onPreview: () => void
 }
 
 export const ProductFooter = ({ onPreview }: ProductFooterProps) => {
+  const { handleSubmit, isPending } = useSubmitCreateForm()
+
   return (
     <div className="sticky bottom-0 left-0 z-20 -mb-36 -ml-[90px] flex w-[calc(100%+180px)] justify-end gap-12 border-t border-t-gray-200 bg-white px-[90px] py-24">
       <Button
@@ -14,7 +17,12 @@ export const ProductFooter = ({ onPreview }: ProductFooterProps) => {
         onClick={onPreview}
       />
       <Button title="임시저장" variant="primary-outlined" size="lg" />
-      <Button title="저장하기" variant="primary-filled" size="lg" />
+      <Button
+        title="저장하기"
+        variant="primary-filled"
+        size="lg"
+        onClick={handleSubmit}
+      />
     </div>
   )
 }
diff --git a/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts b/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
index d844499b..2b9f42b4 100644
--- a/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
@@ -1,7 +1,7 @@
 import { useFormContext } from 'react-hook-form'
 
 import { useNumberInput } from '../create-calculation'
-import { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
+import { CreateProductForm } from '../../../../entity/products/create/create-form/create-form.types'
 
 export function useProductDeliveryForm() {
   const form = useFormContext<CreateProductForm>()
diff --git a/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx b/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
index 2731e741..7e4f6396 100644
--- a/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
@@ -8,11 +8,13 @@ import { useProductCreationStore } from '../create-store/product-creation.store'
 interface ProductEditorModalProps {
   isOpen: boolean
   onClose: () => void
+  onImageUpload: (file: File) => Promise<string>
 }
 
 export const ProductEditorModal = ({
   isOpen,
   onClose,
+  onImageUpload,
 }: ProductEditorModalProps) => {
   const { productDetail, setProductDetail } = useProductCreationStore()
 
@@ -44,6 +46,7 @@ export const ProductEditorModal = ({
             value={localDetail}
             onChange={setLocalDetail}
             image={true}
+            onImageUpload={onImageUpload}
             placeholder="자유롭게 상세페이지를 작성해보세요 (권장크기 : 가로 860px)"
             className="block! size-full rounded-none! border-none!"
           />
diff --git a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
index 52248047..ca9d82e8 100644
--- a/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-detail/create-form-detail-area.ui.tsx
@@ -6,14 +6,15 @@ import { Button, Label } from '@dessert/ui'
 import AppLogoImage from '@/assets/images/apple-120x120.png'
 
 import { ProductEditorModal } from './create-detail-editor-modal.ui'
+import { useSubmitCreateForm } from '../create-form'
 import { useCreateHeaderSteps } from '../create-store'
 import { useProductCreationStore } from '../create-store/product-creation.store'
-// import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
 
 export const ProductDetailArea = () => {
   const [isEditorOpen, setIsEditorOpen] = useState(false)
   const { productDetail } = useProductCreationStore()
   const { setProductFields } = useCreateHeaderSteps()
+  const { handleSubmit, isPending, editorImageFiles } = useSubmitCreateForm()
 
   // Quill 에디터의 빈 콘텐츠 체크 로직 (Zustand 상태 기반)
   const hasContent =
@@ -73,6 +74,11 @@ export const ProductDetailArea = () => {
       <ProductEditorModal
         isOpen={isEditorOpen}
         onClose={() => setIsEditorOpen(false)}
+        onImageUpload={async (file) => {
+          const blobUrl = URL.createObjectURL(file)
+          editorImageFiles.current.set(blobUrl, file)
+          return blobUrl // 에디터엔 blob URL로 표시
+        }}
       />
     </>
   )
diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
index 4f39aa50..8483e62b 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
@@ -1,22 +1,13 @@
-import { useEffect } from 'react'
+import { Label } from '@dessert/ui'
+import { useFieldArray, useFormContext } from 'react-hook-form'
 
-import { Button, Checkbox, Input, Label, Select, Switch } from '@dessert/ui'
-import { Copy, Trash2 } from 'lucide-react'
-import { Controller, useFieldArray, useFormContext } from 'react-hook-form'
+import { CreateFormType } from '@/entity/products/create/create-form'
 
-import { ProductOptionFormInput } from '@/entity/products'
-import { NUTRITION_FIELDS } from '@/entity/products/create/create-options/product-nutritions.constant'
-import { MAIN_CATEGORY_OPTIONS } from '@/entity/products/create/create-options/product-options.constant'
-import DaySelector from '@/shared/block/day-selector/day-selector'
-
-import { useProductOptionForm } from './use-product-options.form.hook'
-import { CreateProductForm } from '../create-form'
 import { ProductOptionForm } from './create-form-options-form.ui'
-import { InfoTooltip } from '../create-form/info-tooltip.ui'
-import { DEFAULT_PRODUCT_OPTION } from '../create-form/use-create-form.hook'
+import { DEFAULT_PRODUCT_OPTION } from '../create-form'
 
 export const ProductOptionsArea = () => {
-  const form = useFormContext<CreateProductForm>()
+  const form = useFormContext<CreateFormType>()
   const { fields, append, remove, insert } = useFieldArray({
     control: form.control,
     name: 'options',
diff --git a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
index a66499ee..7076afd8 100644
--- a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
@@ -1,12 +1,12 @@
 import { useFormContext } from 'react-hook-form'
 
-import { ProductOptionFormInput } from '@/entity/products/create/create-form/product-form.type'
+import { ProductOptionFormInput } from '@/entity/products/create/create-form/create-indivisual-form.type'
 import { SUB_CATEGORY_MAP } from '@/entity/products/create/create-options/product-options.constant'
 
 import { productOptionSchema } from './create-options.schema'
 import { useFloatInput } from '../create-calculation/create-form-float-input.hook'
 import { useNumberInput } from '../create-calculation/create-form-number-input.hook'
-import { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
+import { CreateProductForm } from '../../../../entity/products/create/create-form/create-form.types'
 
 export function useProductOptionForm(
   index: number,
diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
index 5d7bd4f1..3b090b32 100644
--- a/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
@@ -2,10 +2,10 @@ import { useState } from 'react'
 
 import { useFormContext } from 'react-hook-form'
 
-import type { CreateProductForm } from '../../../../entity/products/create/create-form/product-create.types'
+import { CreateFormType } from '@/entity/products/create/create-form'
 
 export function useProductThumbnailForm() {
-  const form = useFormContext<CreateProductForm>()
+  const form = useFormContext<CreateFormType>()
 
   const mainImage = form.watch('mainImage')
   const extraImages = form.watch('extraImages') || []
diff --git a/apps/seller/src/features/products/create/create-form/create-form-mapper.ts b/apps/seller/src/features/products/create/create-form/create-form-mapper.ts
new file mode 100644
index 00000000..21380ab4
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form/create-form-mapper.ts
@@ -0,0 +1,147 @@
+import {
+  CreateFormType,
+  ProductOptionFormInput,
+} from '@/entity/products/create/create-form'
+
+const CATEGORY_MAP: Record<string, string> = {
+  bread_white: 'BREAD',
+  bread_bagel: 'BAGEL',
+  bread_cake: 'CAKE',
+  bread_etc: 'ETC',
+  snack_jam: 'JAM',
+  snack_cookie: 'COOKIE',
+  snack_granola: 'GRANOLA',
+  snack_etc: 'ETC',
+}
+
+const DAY_MAP: Record<string, string> = {
+  mon: 'monday',
+  tue: 'tuesday',
+  wed: 'wednesday',
+  thu: 'thursday',
+  fri: 'friday',
+  sat: 'saturday',
+  sun: 'sunday',
+}
+
+const mapOption = (option: ProductOptionFormInput, index: number) => ({
+  [`products[${index}].title`]: option.optionName,
+  [`products[${index}].category`]: CATEGORY_MAP[option.subCategory] ?? 'ETC',
+  [`products[${index}].plusPriceWithBoardPrice`]: option.additionalPrice ?? 0,
+  [`products[${index}].stock`]: option.stockQuantity ?? 0,
+  [`products[${index}].dietaryTags.glutenFreeTag`]:
+    option.ingredientCategories.includes('glutenFree'),
+  [`products[${index}].dietaryTags.highProteinTag`]:
+    option.protein !== null && option.protein >= 11,
+  [`products[${index}].dietaryTags.sugarFreeTag`]:
+    option.sugar !== null && option.sugar < 5,
+  [`products[${index}].dietaryTags.veganTag`]:
+    option.ingredientCategories.includes('vegan'),
+  [`products[${index}].dietaryTags.ketogenicTag`]: false,
+  ...Object.entries(DAY_MAP).reduce(
+    (acc, [short, full]) => ({
+      ...acc,
+      [`products[${index}].availability.${full}`]: option.shippingDays.includes(
+        short as ProductOptionFormInput['shippingDays'][number],
+      ),
+    }),
+    {},
+  ),
+  ...(option.hasNutrition
+    ? {
+        [`products[${index}].nutritionInfo.totalWeight`]:
+          option.totalWeight ?? 0,
+        [`products[${index}].nutritionInfo.servingSize`]:
+          option.totalWeight ?? 0,
+        [`products[${index}].nutritionInfo.carbohydrates`]:
+          option.carbohydrate ?? 0,
+        [`products[${index}].nutritionInfo.sugars`]: option.sugar ?? 0,
+        [`products[${index}].nutritionInfo.protein`]: option.protein ?? 0,
+        [`products[${index}].nutritionInfo.fat`]: option.fat ?? 0,
+        [`products[${index}].nutritionInfo.calories`]: option.calories ?? 0,
+      }
+    : {}),
+})
+
+// 에디터 이미지 추출 — src에서 파일명만 추출
+const extractEditorImages = (
+  content: string,
+  imageFiles: Map<string, File>,
+): { processedContent: string; files: File[] } => {
+  const files: File[] = []
+  const processedContent = content.replace(
+    /<img[^>]+src=["']([^"']+)["'][^>]*>/g,
+    (match, src) => {
+      const file = imageFiles.get(src)
+      if (file) {
+        files.push(file)
+        return match.replace(src, file.name)
+      }
+      return match
+    },
+  )
+  return { processedContent, files }
+}
+
+export const buildProductFormData = (
+  form: CreateFormType,
+  productDetail: string,
+  editorImageFiles: Map<string, File>, // blob URL → File 매핑
+  storeId: number,
+): FormData => {
+  const multipartData = new FormData()
+
+  // 썸네일 이미지
+  if (form.mainImage) {
+    multipartData.append('thumbnailImgFile', form.mainImage)
+  }
+
+  // 서브 이미지
+  form.extraImages.forEach((file) => {
+    multipartData.append('productImgs', file)
+  })
+
+  // 에디터 이미지 처리
+  const { processedContent, files: editorFiles } = extractEditorImages(
+    productDetail,
+    editorImageFiles,
+  )
+  editorFiles.forEach((file) => {
+    multipartData.append('boardDetailImages', file)
+  })
+
+  // @ModelAttribute 필드들 직접 append
+  multipartData.append('storeId', String(storeId))
+  multipartData.append('title', form.productName)
+  multipartData.append('isFresh', String(form.isFresh))
+  multipartData.append('productionStartAt', form.productionTime)
+  multipartData.append('price', String(form.price ?? 0))
+  multipartData.append(
+    'discountType',
+    form.discountType === 'AMOUNT' ? 'amount' : 'percent',
+  )
+  multipartData.append('discountValue', String(form.discountAmount ?? 0))
+  multipartData.append('deliveryCondition', form.deliveryTerms)
+  multipartData.append('deliveryCompany', form.deliveryCompany)
+  multipartData.append('deliveryFee', String(form.deliveryFee ?? 0))
+  multipartData.append(
+    'freeShippingConditions',
+    String(form.deliveryMinFee ?? 0),
+  )
+  multipartData.append('boardDetailRequest.content', processedContent)
+
+  // 옵션들
+  form.options.forEach((option, index) => {
+    const optionFields = mapOption(option, index)
+    Object.entries(optionFields).forEach(([key, value]) => {
+      multipartData.append(key, String(value))
+    })
+  })
+
+  // 상품 정보 고시
+  Object.entries(form.productInfoNotice).forEach(([key, value]) => {
+    multipartData.append(`productInfoNoticeRequest.${key}`, value)
+  })
+
+  return multipartData
+}
diff --git a/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts b/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
new file mode 100644
index 00000000..c9ebc184
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
@@ -0,0 +1,51 @@
+import { useRef } from 'react'
+
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { useFormContext } from 'react-hook-form'
+
+import {
+  CreateFormType,
+  createProduct,
+  productQueries,
+} from '@/entity/products/create/create-form'
+
+import { buildProductFormData } from './create-form-mapper'
+import { useProductCreationStore } from '../create-store/product-creation.store'
+
+export const useSubmitCreateForm = () => {
+  const form = useFormContext<CreateFormType>()
+  const { productDetail } = useProductCreationStore()
+
+  // blob URL → File 매핑 (에디터 이미지)
+  // ProductEditorModal에서 이미지 삽입 시 여기에 저장
+  const editorImageFiles = useRef<Map<string, File>>(new Map())
+
+  const { data: store } = useQuery(productQueries.myStore())
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: createProduct,
+    onSuccess: () => {
+      alert('상품이 등록되었습니다.') // 토스트로 교체 예정
+    },
+    onError: (error) => {
+      console.error(error)
+      alert('상품 등록에 실패했습니다.')
+    },
+  })
+
+  const handleSubmit = form.handleSubmit((data) => {
+    if (!store?.storeId) {
+      alert('스토어 정보를 불러오지 못했습니다.')
+      return
+    }
+    const formData = buildProductFormData(
+      data,
+      productDetail,
+      editorImageFiles.current,
+      store.storeId,
+    )
+    mutate(formData)
+  })
+
+  return { handleSubmit, isPending, editorImageFiles }
+}
diff --git a/apps/seller/src/features/products/create/create-form/index.ts b/apps/seller/src/features/products/create/create-form/index.ts
index 0b961bce..eb592e17 100644
--- a/apps/seller/src/features/products/create/create-form/index.ts
+++ b/apps/seller/src/features/products/create/create-form/index.ts
@@ -1,6 +1,7 @@
 export { CreateFormContainer } from './create-form-container.ui'
 export { InfoTooltip } from './info-tooltip.ui'
-// export { useCreateFormSteps } from './use-create-form-steps.hook'
 export { useCreateForm } from './use-create-form.hook'
 export { ProductFinalPrice } from './product-final-price.ui'
 export { CreateFormSchema } from './create-form.schema'
+export { DEFAULT_PRODUCT_OPTION } from './use-create-form.hook'
+export { useSubmitCreateForm } from './create-form-submit.mutation'
diff --git a/apps/seller/src/features/products/create/utils/create-form-api-request.ts b/apps/seller/src/features/products/create/utils/create-form-api-request.ts
deleted file mode 100644
index 81249dc7..00000000
--- a/apps/seller/src/features/products/create/utils/create-form-api-request.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-export const CreateFormApiRequest = () => {
-  return {
-    storeId: 1,
-    title: '두바인 쫀득 쿠키 5종',
-    isFresh: true,
-    productionStartTime: 'T_18_19',
-    price: 15000,
-    discountType: 'AMOUNT',
-    discountValue: 3000,
-
-    deliveryCondition: '유료',
-    deliveryCompany: 'CJ대한통운',
-    deliveryFee: 3000,
-    freeShippingConditions: 50000,
-
-    thumbnailImgFile: '(파일 업로드)',
-    productImgs: ['(파일1)', '(파일2)', '(파일3)'],
-
-    boardDetailRequest: {
-      content:
-        '<p>내일 오전 2시부터 4시까지 시스템 점검을 진행합니다.</p><img data-id="img-uuid-001.png" src="blob:temp"/>',
-    },
-
-    products: [
-      {
-        title: '두바이 쫀득 쿠키',
-        category: 'COOKIE',
-        plusPriceWithBoardPrice: 3000,
-        stock: 1000,
-        dietaryTags: {
-          glutenFreeTag: false,
-          highProteinTag: false,
-          sugarFreeTag: false,
-          veganTag: false,
-          ketogenicTag: false,
-        },
-        availability: {
-          monday: true,
-          tuesday: false,
-          wednesday: false,
-          thursday: true,
-          friday: false,
-          saturday: false,
-          sunday: false,
-        },
-        nutritionInfo: {
-          totalWeight: 100,
-          servingSize: 100,
-          carbohydrates: 30,
-          sugars: 10,
-          protein: 5,
-          fat: 3,
-          calories: 300,
-        },
-      },
-    ],
-
-    productInfoNoticeRequest: {
-      productName: '두바인 쫀득 쿠키 5종',
-      foodType: '쿠키',
-      manufacturer: '빵그리의 오븐',
-      originLocation: '서울특별시 강남구',
-      manufactureDate: '제조년월일 별도 표기',
-      expirationDate: '소비기한 또는 품질 유지기한',
-      storageGuide: '포장 단위 별 내용물의 용량 수량',
-      packagingQuantityUnit: '포장 단위별 수량',
-      rawMaterialName: '원재료명',
-      nutritionInfo: '영양성분',
-      transgenic: '유전자 변형 식품에 해당하는 경우의 표시',
-      customerWaring: '소비자 안전을 위한 주의사항',
-      importFood: '수입 식품의 경우',
-    },
-  }
-}

From 8cf0346313ac684006e8ed2f5340338bd100ec55 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 12:24:01 +0900
Subject: [PATCH 43/56] =?UTF-8?q?[seller]=20feat(173):=20=EB=AF=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0,=20=EC=A0=80=EC=9E=A5=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20form=20=EC=9E=85=EB=A0=A5?=
 =?UTF-8?q?=EC=8B=9C=EC=97=90=EB=A7=8C=20=ED=99=9C=EC=84=B1=ED=99=94?=
 =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/create-footer/create-footer.ui.tsx     | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx b/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
index 5d1e7ec3..324f6c61 100644
--- a/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
+++ b/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
@@ -1,12 +1,19 @@
 import { Button } from '@dessert/ui'
+import { useFormContext } from 'react-hook-form'
 
+import { CreateFormType } from '@/entity/products/create/create-form'
 import { useSubmitCreateForm } from '@/features/products/create/create-form'
+
 interface ProductFooterProps {
   onPreview: () => void
 }
 
 export const ProductFooter = ({ onPreview }: ProductFooterProps) => {
   const { handleSubmit, isPending } = useSubmitCreateForm()
+  const {
+    formState: { isDirty },
+  } = useFormContext<CreateFormType>()
+  const hasAnyInput = isDirty
 
   return (
     <div className="sticky bottom-0 left-0 z-20 -mb-36 -ml-[90px] flex w-[calc(100%+180px)] justify-end gap-12 border-t border-t-gray-200 bg-white px-[90px] py-24">
@@ -16,11 +23,17 @@ export const ProductFooter = ({ onPreview }: ProductFooterProps) => {
         size="lg"
         onClick={onPreview}
       />
-      <Button title="임시저장" variant="primary-outlined" size="lg" />
+      <Button
+        title="임시저장"
+        variant="primary-outlined"
+        size="lg"
+        disabled={!hasAnyInput}
+      />
       <Button
         title="저장하기"
         variant="primary-filled"
         size="lg"
+        disabled={!hasAnyInput}
         onClick={handleSubmit}
       />
     </div>

From 4a3de1cb3441b8599f734bd601ca29566244be1e Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 12:36:34 +0900
Subject: [PATCH 44/56] =?UTF-8?q?[seller]=20fix(173):=20submit=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=EC=97=90=20toast=EC=B6=94=EA=B0=80=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=8F=BC=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC?=
 =?UTF-8?q?=EC=99=80=20=EA=B4=80=EB=A0=A8=ED=95=9C=20=EA=B2=BD=EA=B3=A0=20?=
 =?UTF-8?q?=ED=8F=AC=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-form-options-area.ui.tsx           | 30 ++++++-------
 .../create-form-submit.mutation.ts            | 44 +++++++++++--------
 2 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
index 8483e62b..db09d9c1 100644
--- a/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-area.ui.tsx
@@ -22,22 +22,20 @@ export const ProductOptionsArea = () => {
         />
       </div>
       {fields.map((field, index) => (
-        <>
-          <ProductOptionForm
-            key={field.id}
-            index={index}
-            isLast={index === fields.length - 1}
-            onDelete={() => fields.length > 1 && remove(index)}
-            onCopy={() => {
-              const current = form.getValues(`options.${index}`)
-              insert(index + 1, {
-                ...current,
-                optionName: `${current.optionName} (복사본)`,
-              })
-            }}
-            onAdd={() => insert(index + 1, DEFAULT_PRODUCT_OPTION)}
-          />
-        </>
+        <ProductOptionForm
+          key={field.id}
+          index={index}
+          isLast={index === fields.length - 1}
+          onDelete={() => fields.length > 1 && remove(index)}
+          onCopy={() => {
+            const current = form.getValues(`options.${index}`)
+            insert(index + 1, {
+              ...current,
+              optionName: `${current.optionName} (복사본)`,
+            })
+          }}
+          onAdd={() => insert(index + 1, DEFAULT_PRODUCT_OPTION)}
+        />
       ))}
     </>
   )
diff --git a/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts b/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
index c9ebc184..a7933b67 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
@@ -1,5 +1,6 @@
 import { useRef } from 'react'
 
+import { toast } from '@dessert/ui'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { useFormContext } from 'react-hook-form'
 
@@ -16,8 +17,6 @@ export const useSubmitCreateForm = () => {
   const form = useFormContext<CreateFormType>()
   const { productDetail } = useProductCreationStore()
 
-  // blob URL → File 매핑 (에디터 이미지)
-  // ProductEditorModal에서 이미지 삽입 시 여기에 저장
   const editorImageFiles = useRef<Map<string, File>>(new Map())
 
   const { data: store } = useQuery(productQueries.myStore())
@@ -25,27 +24,34 @@ export const useSubmitCreateForm = () => {
   const { mutate, isPending } = useMutation({
     mutationFn: createProduct,
     onSuccess: () => {
-      alert('상품이 등록되었습니다.') // 토스트로 교체 예정
+      toast.success('상품 등록을 완료했어요')
     },
-    onError: (error) => {
-      console.error(error)
-      alert('상품 등록에 실패했습니다.')
+    onError: () => {
+      toast.error('저장이 완료되지 않았어요', '다시 한 번 시도해주세요')
     },
   })
 
-  const handleSubmit = form.handleSubmit((data) => {
-    if (!store?.storeId) {
-      alert('스토어 정보를 불러오지 못했습니다.')
-      return
-    }
-    const formData = buildProductFormData(
-      data,
-      productDetail,
-      editorImageFiles.current,
-      store.storeId,
-    )
-    mutate(formData)
-  })
+  const handleSubmit = form.handleSubmit(
+    (data) => {
+      if (!store?.storeId) {
+        toast.error(
+          '스토어 정보를 불러오지 못했어요',
+          '다시 한 번 시도해주세요',
+        )
+        return
+      }
+      const formData = buildProductFormData(
+        data,
+        productDetail,
+        editorImageFiles.current,
+        store.storeId,
+      )
+      mutate(formData)
+    },
+    () => {
+      toast.error('필수 입력사항을 확인해 주세요')
+    },
+  )
 
   return { handleSubmit, isPending, editorImageFiles }
 }

From 4968568c7b99b354bb1ffc8aa6869e5af473df80 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 12:39:55 +0900
Subject: [PATCH 45/56] =?UTF-8?q?[seller]=20refactor(173):=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../entity/products/create/create-form/create.api.ts  | 11 -----------
 .../src/entity/products/create/create-form/index.ts   |  2 +-
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/apps/seller/src/entity/products/create/create-form/create.api.ts b/apps/seller/src/entity/products/create/create-form/create.api.ts
index d7f44a0c..0cb42f22 100644
--- a/apps/seller/src/entity/products/create/create-form/create.api.ts
+++ b/apps/seller/src/entity/products/create/create-form/create.api.ts
@@ -15,14 +15,3 @@ export const createProduct = async (formData: FormData) => {
   const response = await client.post('/api/v1/seller/boards', formData)
   return response.data
 }
-
-// ✅ 확인 필요: 이미지 업로드 API
-export const uploadImage = async (file: File): Promise<string> => {
-  const formData = new FormData()
-  formData.append('image', file) // ✅ 확인 필요: key 이름
-  const response = await client.post<{ result: { url: string } }>(
-    '/api/v1/images', // ✅ 확인 필요: 엔드포인트
-    formData,
-  )
-  return response.data.result.url
-}
diff --git a/apps/seller/src/entity/products/create/create-form/index.ts b/apps/seller/src/entity/products/create/create-form/index.ts
index e13bd3b6..a9220c34 100644
--- a/apps/seller/src/entity/products/create/create-form/index.ts
+++ b/apps/seller/src/entity/products/create/create-form/index.ts
@@ -1,6 +1,6 @@
 export * from './create-form.types'
 export * from './create-indivisual-form.type'
-export { getMyStore, createProduct, uploadImage } from './create.api'
+export { getMyStore, createProduct } from './create.api'
 export { productQueries, productKeys } from './create.query'
 export type {
   CreateProductRequest,

From c279306ffb15f8e14e1b7156f1015e040a8efac2 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 13:41:16 +0900
Subject: [PATCH 46/56] =?UTF-8?q?[seller]=20fix(173):=20productionTime=20?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=ED=98=95=EC=8B=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../products/create/create-form/create.api.ts |  6 ++-
 .../create/create-form/create.type.ts         |  2 +-
 .../create-info/production-time.constants.ts  | 47 +++++++++++--------
 .../create/create-form/create-form-mapper.ts  | 16 ++++++-
 .../create-form-submit.mutation.ts            | 25 ++++++----
 apps/seller/vite.config.ts                    |  2 +-
 6 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/apps/seller/src/entity/products/create/create-form/create.api.ts b/apps/seller/src/entity/products/create/create-form/create.api.ts
index 0cb42f22..04077400 100644
--- a/apps/seller/src/entity/products/create/create-form/create.api.ts
+++ b/apps/seller/src/entity/products/create/create-form/create.api.ts
@@ -12,6 +12,10 @@ export const getMyStore = async () => {
 
 // 상품 등록
 export const createProduct = async (formData: FormData) => {
-  const response = await client.post('/api/v1/seller/boards', formData)
+  const response = await client.post('/api/v1/seller/boards', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  })
   return response.data
 }
diff --git a/apps/seller/src/entity/products/create/create-form/create.type.ts b/apps/seller/src/entity/products/create/create-form/create.type.ts
index 2db13b0a..72af3da7 100644
--- a/apps/seller/src/entity/products/create/create-form/create.type.ts
+++ b/apps/seller/src/entity/products/create/create-form/create.type.ts
@@ -5,7 +5,7 @@ export interface CreateProductRequest {
   isFresh: boolean
   productionStartAt: string
   price: number
-  discountType: 'amount' | 'percent'
+  discountType: 'AMOUNT' | 'PERCENT'
   discountValue: number
   deliveryCondition: string
   deliveryCompany: string
diff --git a/apps/seller/src/entity/products/create/create-info/production-time.constants.ts b/apps/seller/src/entity/products/create/create-info/production-time.constants.ts
index 578e37c8..64b0fed5 100644
--- a/apps/seller/src/entity/products/create/create-info/production-time.constants.ts
+++ b/apps/seller/src/entity/products/create/create-info/production-time.constants.ts
@@ -1,22 +1,29 @@
+// export const productionTimes = [
+//   {
+//     label: '03:00~04:00',
+//     value: '03:00~04:00',
+//   },
+//   {
+//     label: '04:00~05:00',
+//     value: '04:00~05:00',
+//   },
+//   {
+//     label: '05:00~06:00',
+//     value: '05:00~06:00',
+//   },
+//   {
+//     label: '06:00~07:00',
+//     value: '06:00~07:00',
+//   },
+//   {
+//     label: '07:00~08:00',
+//     value: '07:00~08:00',
+//   },
+// ]
 export const productionTimes = [
-  {
-    label: '03:00~04:00',
-    value: '03:00~04:00',
-  },
-  {
-    label: '04:00~05:00',
-    value: '04:00~05:00',
-  },
-  {
-    label: '05:00~06:00',
-    value: '05:00~06:00',
-  },
-  {
-    label: '06:00~07:00',
-    value: '06:00~07:00',
-  },
-  {
-    label: '07:00~08:00',
-    value: '07:00~08:00',
-  },
+  { label: '03:00~04:00', value: '03:00' },
+  { label: '04:00~05:00', value: '04:00' },
+  { label: '05:00~06:00', value: '05:00' },
+  { label: '06:00~07:00', value: '06:00' },
+  { label: '07:00~08:00', value: '07:00' },
 ]
diff --git a/apps/seller/src/features/products/create/create-form/create-form-mapper.ts b/apps/seller/src/features/products/create/create-form/create-form-mapper.ts
index 21380ab4..6e9a4fea 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-mapper.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-mapper.ts
@@ -63,6 +63,14 @@ const mapOption = (option: ProductOptionFormInput, index: number) => ({
     : {}),
 })
 
+const toProductionTimeFormat = (time: string): string => {
+  // "06:00~07:00" or "06:00" 둘 다 처리
+  const start = time.split('~')[0].trim() // "06:00"
+  const [hour] = start.split(':') // "06"
+  const nextHour = String(Number(hour) + 1).padStart(2, '0') // "07"
+  return `T_${hour}_${nextHour}` // "T_06_07"
+}
+
 // 에디터 이미지 추출 — src에서 파일명만 추출
 const extractEditorImages = (
   content: string,
@@ -114,11 +122,15 @@ export const buildProductFormData = (
   multipartData.append('storeId', String(storeId))
   multipartData.append('title', form.productName)
   multipartData.append('isFresh', String(form.isFresh))
-  multipartData.append('productionStartAt', form.productionTime)
+  // 필드명도 productionStartTime으로 변경
+  multipartData.append(
+    'productionStartTime',
+    toProductionTimeFormat(form.productionTime),
+  )
   multipartData.append('price', String(form.price ?? 0))
   multipartData.append(
     'discountType',
-    form.discountType === 'AMOUNT' ? 'amount' : 'percent',
+    form.discountType === 'AMOUNT' ? 'AMOUNT' : 'PERCENT',
   )
   multipartData.append('discountValue', String(form.discountAmount ?? 0))
   multipartData.append('deliveryCondition', form.deliveryTerms)
diff --git a/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts b/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
index a7933b67..193a302c 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
@@ -19,7 +19,12 @@ export const useSubmitCreateForm = () => {
 
   const editorImageFiles = useRef<Map<string, File>>(new Map())
 
-  const { data: store } = useQuery(productQueries.myStore())
+  //   const { data: store } = useQuery(productQueries.myStore())
+
+  const { data: store } = useQuery({
+    ...productQueries.myStore(),
+    enabled: false, // ← 쿼리 비활성화
+  })
 
   const { mutate, isPending } = useMutation({
     mutationFn: createProduct,
@@ -33,18 +38,20 @@ export const useSubmitCreateForm = () => {
 
   const handleSubmit = form.handleSubmit(
     (data) => {
-      if (!store?.storeId) {
-        toast.error(
-          '스토어 정보를 불러오지 못했어요',
-          '다시 한 번 시도해주세요',
-        )
-        return
-      }
+      const storeId = store?.storeId ?? 1
+      console.log('mainImage:', data.mainImage)
+      //   if (!store?.storeId) {
+      //     toast.error(
+      //       '스토어 정보를 불러오지 못했어요',
+      //       '다시 한 번 시도해주세요',
+      //     )
+      //     return
+      //   }
       const formData = buildProductFormData(
         data,
         productDetail,
         editorImageFiles.current,
-        store.storeId,
+        storeId,
       )
       mutate(formData)
     },
diff --git a/apps/seller/vite.config.ts b/apps/seller/vite.config.ts
index 973568e2..c75175c5 100644
--- a/apps/seller/vite.config.ts
+++ b/apps/seller/vite.config.ts
@@ -10,7 +10,7 @@ export default mergeConfig(baseViteConfig, {
 
   // 포트지정
   server: {
-    port: 6075,
+    port: 3000,
   },
 
   resolve: {

From a4b293a8e3388606d35037c82e29731b7058a2e2 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 13:52:38 +0900
Subject: [PATCH 47/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=8D=B8=EB=84=A4?=
 =?UTF-8?q?=EC=9D=BC=20=EB=93=B1=EB=A1=9D=20=EC=8B=9C=20=EA=B6=8C=EC=9E=A5?=
 =?UTF-8?q?=20=EC=82=AC=EC=9D=B4=EC=A6=88,=ED=98=95=EC=8B=9D,=EC=9A=A9?=
 =?UTF-8?q?=EB=9F=89=EC=B4=88=EA=B3=BC=20=EC=8B=9C=20=EA=B2=BD=EA=B3=A0=20?=
 =?UTF-8?q?=ED=98=B9=EC=9D=80=20=EC=97=90=EB=9F=AC=20=EB=AC=B8=EA=B5=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../use-product-thumnail-form.hook.ts         | 71 +++++++++++++++++--
 1 file changed, 66 insertions(+), 5 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
index 3b090b32..06753287 100644
--- a/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-thumbnail-upload/use-product-thumnail-form.hook.ts
@@ -1,9 +1,49 @@
 import { useState } from 'react'
 
+import { toast } from '@dessert/ui'
 import { useFormContext } from 'react-hook-form'
 
 import { CreateFormType } from '@/entity/products/create/create-form'
 
+const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB
+const ALLOWED_TYPES = ['image/jpeg', 'image/jpg', 'image/png']
+const MIN_SIZE = 160
+
+const validateImage = (
+  file: File,
+): Promise<{ error: string | null; warning: string | null }> => {
+  return new Promise((resolve) => {
+    if (!ALLOWED_TYPES.includes(file.type)) {
+      resolve({
+        error: 'jpg, jpeg, png 형식의 이미지만 업로드 가능해요',
+        warning: null,
+      })
+      return
+    }
+
+    if (file.size > MAX_FILE_SIZE) {
+      resolve({ error: '10MB 이하의 이미지만 업로드 가능해요', warning: null })
+      return
+    }
+
+    const img = new Image()
+    const url = URL.createObjectURL(file)
+    img.onload = () => {
+      URL.revokeObjectURL(url)
+      let warning = null
+      if (
+        img.width < MIN_SIZE ||
+        img.height < MIN_SIZE ||
+        img.width !== img.height
+      ) {
+        warning = '권장 크기는 1000×1000 (1:1 비율)이에요'
+      }
+      resolve({ error: null, warning })
+    }
+    img.src = url
+  })
+}
+
 export function useProductThumbnailForm() {
   const form = useFormContext<CreateFormType>()
 
@@ -12,7 +52,6 @@ export function useProductThumbnailForm() {
 
   const [deleteTarget, setDeleteTarget] = useState<number | 'main' | null>(null)
 
-  // 필수 입력 사항 판별: 대표 이미지가 있으면 true
   const isFormField = mainImage !== null
 
   const handleMainImageChange = (file: File | null) => {
@@ -23,7 +62,7 @@ export function useProductThumbnailForm() {
     form.setValue('extraImages', files, { shouldValidate: true })
   }
 
-  const handleFileChange = (
+  const handleFileChange = async (
     e: React.ChangeEvent<HTMLInputElement>,
     type: 'main' | 'extra',
   ) => {
@@ -31,11 +70,33 @@ export function useProductThumbnailForm() {
     if (!files) return
 
     if (type === 'main') {
-      handleMainImageChange(files[0])
+      const file = files[0]
+      const { error, warning } = await validateImage(file)
+      if (error) {
+        toast.error(error)
+        e.target.value = ''
+        return
+      }
+      if (warning) toast.info(warning)
+      handleMainImageChange(file)
     } else {
       const remainingSlots = 9 - extraImages.length
-      const newFiles = Array.from(files).slice(0, remainingSlots)
-      handleExtraImagesChange([...extraImages, ...newFiles])
+      const selectedFiles = Array.from(files).slice(0, remainingSlots)
+      const validFiles: File[] = []
+
+      for (const file of selectedFiles) {
+        const { error, warning } = await validateImage(file)
+        if (error) {
+          toast.error(`${file.name}: ${error}`)
+        } else {
+          if (warning) toast.info(`${file.name}: ${warning}`)
+          validFiles.push(file)
+        }
+      }
+
+      if (validFiles.length > 0) {
+        handleExtraImagesChange([...extraImages, ...validFiles])
+      }
     }
     e.target.value = ''
   }

From 6bd7989e45bc20b874ae8a9f0cd709cda0e6db97 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 14:39:01 +0900
Subject: [PATCH 48/56] =?UTF-8?q?[seller]=20feat(173):=20=EC=9E=84?=
 =?UTF-8?q?=EC=8B=9C=EC=A0=80=EC=9E=A5=20=EA=B8=B0=EB=8A=A5=20persist?=
 =?UTF-8?q?=EB=A1=9C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-draft/create-draft-dialog.ui.tsx   | 50 +++++++++++++++++++
 .../create-draft/create-draft.store.tsx       | 26 ++++++++++
 .../products/create/create-draft/index.ts     |  3 ++
 .../create-draft/use-create-draft.hook.ts     | 37 ++++++++++++++
 .../create/create-footer/create-footer.ui.tsx |  4 ++
 .../create-form-submit.mutation.ts            |  4 +-
 .../src/pages/products/create/create-page.tsx | 29 ++++++++++-
 7 files changed, 151 insertions(+), 2 deletions(-)
 create mode 100644 apps/seller/src/features/products/create/create-draft/create-draft-dialog.ui.tsx
 create mode 100644 apps/seller/src/features/products/create/create-draft/create-draft.store.tsx
 create mode 100644 apps/seller/src/features/products/create/create-draft/index.ts
 create mode 100644 apps/seller/src/features/products/create/create-draft/use-create-draft.hook.ts

diff --git a/apps/seller/src/features/products/create/create-draft/create-draft-dialog.ui.tsx b/apps/seller/src/features/products/create/create-draft/create-draft-dialog.ui.tsx
new file mode 100644
index 00000000..388832a8
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-draft/create-draft-dialog.ui.tsx
@@ -0,0 +1,50 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@dessert/ui'
+
+interface CreateDraftDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+}
+
+export function CreateDraftDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+}: CreateDraftDialogProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>임시저장된 내용이 있어요</DialogTitle>
+          <DialogDescription>
+            작성 중이던 상품 등록 페이지가 있어요. <br />
+            불러올까요? 취소하면 기존에 등록된 페이지는
+            <br /> 삭제됩니다.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            title="취소"
+            variant="secondary-outlined"
+            onClick={onClose}
+            className="flex-1"
+          />
+          <Button
+            title="확인"
+            variant="secondary-filled"
+            onClick={onConfirm}
+            className="flex-1"
+          />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/seller/src/features/products/create/create-draft/create-draft.store.tsx b/apps/seller/src/features/products/create/create-draft/create-draft.store.tsx
new file mode 100644
index 00000000..ac2191e7
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-draft/create-draft.store.tsx
@@ -0,0 +1,26 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+import { CreateFormType } from '@/entity/products/create/create-form'
+
+// 이미지는 localStorage 저장 불가 사유로 제외합니다
+type DraftData = Omit<CreateFormType, 'mainImage' | 'extraImages'> & {
+  productDetail: string
+}
+
+interface CreateDraftStore {
+  draft: DraftData | null
+  saveDraft: (data: DraftData) => void
+  clearDraft: () => void
+}
+
+export const useCreateDraftStore = create<CreateDraftStore>()(
+  persist(
+    (set) => ({
+      draft: null,
+      saveDraft: (data) => set({ draft: data }),
+      clearDraft: () => set({ draft: null }),
+    }),
+    { name: 'product-create-draft' },
+  ),
+)
diff --git a/apps/seller/src/features/products/create/create-draft/index.ts b/apps/seller/src/features/products/create/create-draft/index.ts
new file mode 100644
index 00000000..5f445600
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-draft/index.ts
@@ -0,0 +1,3 @@
+export { useCreateDraft } from './use-create-draft.hook'
+export { useCreateDraftStore } from './create-draft.store'
+export { CreateDraftDialog } from './create-draft-dialog.ui'
diff --git a/apps/seller/src/features/products/create/create-draft/use-create-draft.hook.ts b/apps/seller/src/features/products/create/create-draft/use-create-draft.hook.ts
new file mode 100644
index 00000000..c3213897
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-draft/use-create-draft.hook.ts
@@ -0,0 +1,37 @@
+import { toast } from '@dessert/ui'
+import { useFormContext } from 'react-hook-form'
+
+import { CreateFormType } from '@/entity/products/create/create-form'
+
+import { useCreateDraftStore } from './create-draft.store'
+import { useProductCreationStore } from '../create-store/product-creation.store'
+export const useCreateDraft = () => {
+  const form = useFormContext<CreateFormType>()
+  const { productDetail } = useProductCreationStore()
+  const { draft, saveDraft, clearDraft } = useCreateDraftStore()
+
+  const handleSaveDraft = () => {
+    const formData = form.getValues()
+    saveDraft({
+      ...formData,
+      productDetail,
+    })
+    toast.success('임시저장을 완료했어요 ')
+  }
+
+  // 폼에 임시저장 데이터 복원
+  const handleRestoreDraft = () => {
+    if (!draft) return
+    const { productDetail: savedDetail, ...formValues } = draft
+    form.reset(formValues as CreateFormType)
+    useProductCreationStore.getState().setProductDetail(savedDetail)
+    clearDraft()
+  }
+
+  return {
+    draft,
+    handleSaveDraft,
+    handleRestoreDraft,
+    clearDraft,
+  }
+}
diff --git a/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx b/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
index 324f6c61..a3184f2d 100644
--- a/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
+++ b/apps/seller/src/features/products/create/create-footer/create-footer.ui.tsx
@@ -4,11 +4,14 @@ import { useFormContext } from 'react-hook-form'
 import { CreateFormType } from '@/entity/products/create/create-form'
 import { useSubmitCreateForm } from '@/features/products/create/create-form'
 
+import { useCreateDraft } from '../create-draft'
+
 interface ProductFooterProps {
   onPreview: () => void
 }
 
 export const ProductFooter = ({ onPreview }: ProductFooterProps) => {
+  const { handleSaveDraft } = useCreateDraft()
   const { handleSubmit, isPending } = useSubmitCreateForm()
   const {
     formState: { isDirty },
@@ -28,6 +31,7 @@ export const ProductFooter = ({ onPreview }: ProductFooterProps) => {
         variant="primary-outlined"
         size="lg"
         disabled={!hasAnyInput}
+        onClick={handleSaveDraft}
       />
       <Button
         title="저장하기"
diff --git a/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts b/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
index 193a302c..5152d6a0 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
@@ -11,12 +11,13 @@ import {
 } from '@/entity/products/create/create-form'
 
 import { buildProductFormData } from './create-form-mapper'
+import { useCreateDraftStore } from '../create-draft'
 import { useProductCreationStore } from '../create-store/product-creation.store'
 
 export const useSubmitCreateForm = () => {
   const form = useFormContext<CreateFormType>()
   const { productDetail } = useProductCreationStore()
-
+  const { clearDraft } = useCreateDraftStore()
   const editorImageFiles = useRef<Map<string, File>>(new Map())
 
   //   const { data: store } = useQuery(productQueries.myStore())
@@ -29,6 +30,7 @@ export const useSubmitCreateForm = () => {
   const { mutate, isPending } = useMutation({
     mutationFn: createProduct,
     onSuccess: () => {
+      clearDraft() //상품 등록 성공 시 임시 저장 내용 삭제
       toast.success('상품 등록을 완료했어요')
     },
     onError: () => {
diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index b6bf02de..5d718017 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -14,6 +14,11 @@ import {
   ThumbnailUploadArea,
   useCreateForm,
 } from '@/features/products/create'
+import {
+  CreateDraftDialog,
+  useCreateDraft,
+  useCreateDraftStore,
+} from '@/features/products/create/create-draft'
 import { ProductPreviewModal } from '@/features/products/create/create-preview/create-preview-modal.ui'
 import { useCreateHeaderSteps } from '@/features/products/create/create-store'
 
@@ -27,9 +32,12 @@ function CreatePage() {
 }
 
 function CreatePageInner() {
-  const [isPreviewOpen, setIsPreviewOpen] = useState(false)
+  const { draft } = useCreateDraftStore()
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false) //미리보기
+  const [isDraftModalOpen, setIsDraftModalOpen] = useState(false) //임시저장
   const { setCurrentStep, headerHeight, isScrollingToStep } =
     useCreateHeaderSteps()
+  const { handleRestoreDraft, clearDraft } = useCreateDraft()
 
   const stepIds = [
     'productInfo',
@@ -39,6 +47,12 @@ function CreatePageInner() {
     'productDetail',
     'productDisclosure',
   ]
+  useEffect(() => {
+    if (draft) {
+      setIsDraftModalOpen(true)
+    }
+    console.log('draft:', draft)
+  }, [draft])
 
   useEffect(() => {
     const elements = stepIds.map((id) => document.getElementById(id))
@@ -107,6 +121,19 @@ function CreatePageInner() {
         isOpen={isPreviewOpen}
         onClose={() => setIsPreviewOpen(false)}
       />
+      {isDraftModalOpen && (
+        <CreateDraftDialog
+          isOpen={isDraftModalOpen}
+          onConfirm={() => {
+            handleRestoreDraft()
+            setIsDraftModalOpen(false)
+          }}
+          onClose={() => {
+            clearDraft()
+            setIsDraftModalOpen(false)
+          }}
+        />
+      )}
     </>
   )
 }

From c82faa7efe3c69fe62310f324d95883a6f6a94c5 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 14:48:45 +0900
Subject: [PATCH 49/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=9E=84=EC=8B=9C?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=20=EB=AA=A8=EB=8B=AC=EC=9D=B4=20=EC=B5=9C?=
 =?UTF-8?q?=EC=B4=88=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A7=88?=
 =?UTF-8?q?=EC=9A=B4=ED=8A=B8=EC=8B=9C=EC=97=90=EB=A7=8C=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=EB=90=98=EB=8F=84=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/products/create/create-page.tsx       | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/seller/src/pages/products/create/create-page.tsx b/apps/seller/src/pages/products/create/create-page.tsx
index 5d718017..fd67a3aa 100644
--- a/apps/seller/src/pages/products/create/create-page.tsx
+++ b/apps/seller/src/pages/products/create/create-page.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { FormProvider } from 'react-hook-form'
 
@@ -35,6 +35,7 @@ function CreatePageInner() {
   const { draft } = useCreateDraftStore()
   const [isPreviewOpen, setIsPreviewOpen] = useState(false) //미리보기
   const [isDraftModalOpen, setIsDraftModalOpen] = useState(false) //임시저장
+  const isInitialMount = useRef(true)
   const { setCurrentStep, headerHeight, isScrollingToStep } =
     useCreateHeaderSteps()
   const { handleRestoreDraft, clearDraft } = useCreateDraft()
@@ -48,10 +49,12 @@ function CreatePageInner() {
     'productDisclosure',
   ]
   useEffect(() => {
-    if (draft) {
-      setIsDraftModalOpen(true)
-    }
-    console.log('draft:', draft)
+    if (isInitialMount.current) {
+      isInitialMount.current = false
+      if (draft) {
+        setIsDraftModalOpen(true)
+      }
+    } //최초 컴포넌트 마운트 시 modal이 생성되도록 합니다
   }, [draft])
 
   useEffect(() => {

From 1774202fccdd1bbf7318d935343a8d9317d853e2 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 14:50:44 +0900
Subject: [PATCH 50/56] =?UTF-8?q?[seller]=20fix(173):=20sticky=20header?=
 =?UTF-8?q?=EC=9D=98=20z-index=EA=B0=92=20=EC=88=98=EC=A0=95=20-=20select?=
 =?UTF-8?q?=EB=B3=B4=EB=8B=A4=20=ED=95=AD=EC=83=81=20=EC=95=9E=EC=97=90=20?=
 =?UTF-8?q?=EC=98=A4=EB=8F=84=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/products/create/create-header/create-header.ui.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
index 8f77bc3d..fd26bb75 100644
--- a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
@@ -48,7 +48,7 @@ export const ProductHeader = () => {
   return (
     <div
       ref={headerRef}
-      className="sticky top-0 left-0 z-20 -mt-40 -ml-[90px] w-[calc(100%+180px)] border-b border-b-gray-200 bg-white px-[90px] py-16"
+      className="sticky top-0 left-0 z-9999 -mt-40 -ml-[90px] w-[calc(100%+180px)] border-b border-b-gray-200 bg-white px-[90px] py-16"
     >
       <div className="flex w-full items-center justify-between">
         <div className="relative">

From a5668aedb78143ad640c7f53d0ce8874d1ebd602 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 15:09:47 +0900
Subject: [PATCH 51/56] =?UTF-8?q?[seller]=20fix(173):=20=ED=80=BC=20?=
 =?UTF-8?q?=EC=97=90=EB=94=94=ED=84=B0=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B2=A8=EB=B6=80=20=EC=97=91=EB=B0=95=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/src/editor/editor.tsx | 47 +++++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/editor/editor.tsx b/packages/ui/src/editor/editor.tsx
index 913347a0..6149ed16 100644
--- a/packages/ui/src/editor/editor.tsx
+++ b/packages/ui/src/editor/editor.tsx
@@ -44,6 +44,28 @@ import 'react-quill-new/dist/quill.snow.css'
 import { cn } from '../lib/utils'
 import './editor.css'
 
+//추가 부분
+const Quill = ReactQuill.Quill
+
+// 2. Quill 내부 포맷 객체의 타입을 정의합니다.
+interface QuillFormat {
+  sanitize: (url: string) => string
+}
+
+// 'as QuillFormat'을 사용하여 unknown 타입을 강제로 지정
+const Link = Quill.import('formats/link') as QuillFormat
+const Image = Quill.import('formats/image') as QuillFormat
+
+// 커스텀 함수를 할당
+const customSanitize = (url: string) => {
+  const allowedProtocols = ['http', 'https', 'data', 'blob']
+  const protocol = url.split(':')[0]
+  return allowedProtocols.includes(protocol) ? url : '//:0'
+}
+
+Link.sanitize = customSanitize
+Image.sanitize = customSanitize
+
 export interface EditorProps {
   value?: string
   onChange?: (value: string) => void
@@ -106,6 +128,7 @@ const Editor = ({
   const isReadOnly = disabled || !onChange
   const quillRef = useRef<ReactQuill>(null)
 
+  // 1. imageHandler를 useCallback으로 감싸고 의존성에 quillRef 포함
   const imageHandler = useCallback(() => {
     if (!onImageUpload) {
       alert('이미지 업로드 기능이 설정되지 않았습니다.')
@@ -118,30 +141,37 @@ const Editor = ({
     input.click()
 
     input.onchange = async () => {
-      const file = input.files ? input.files[0] : null
+      const file = input.files?.[0]
       if (!file) return
 
       try {
         const url = await onImageUpload(file)
+        console.log('Upload success, URL:', url) // URL이 제대로 오는지 확인용
+
         const quill = quillRef.current?.getEditor()
         if (quill) {
-          const range = quill.getSelection(true) || { index: quill.getLength() }
-          quill.insertEmbed(range.index, 'image', url)
-          quill.setSelection(range.index + 1, 0)
+          const range = quill.getSelection(true)
+          // 0번 인덱스일 경우를 위해 length 체크
+          const index = range ? range.index : quill.getLength()
+
+          // 이미지 삽입
+          quill.insertEmbed(index, 'image', url)
+          // 커서를 이미지 뒤로 이동
+          quill.setSelection(index + 1, 0)
         }
       } catch (error) {
         console.error('Image upload failed:', error)
       }
     }
-  }, [onImageUpload])
+  }, [onImageUpload]) // quillRef는 ref객체이므로 의존성에 넣지 않아도 됨
 
+  // 2. modules 설정 최적화
   const modules = useMemo(() => {
     if (!toolbar) return { toolbar: MINIMAL_TOOLBAR }
 
     const toolbarConfig = image
       ? BASE_TOOLBAR.map((group) => {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          if ((group as any[]).includes('link')) {
+          if ((group as string[]).includes('link')) {
             return [...group, 'image']
           }
           return group
@@ -151,10 +181,11 @@ const Editor = ({
     return {
       toolbar: {
         container: toolbarConfig,
+        // 익명함수 호출 대신 imageHandler 직접 연결
         handlers: image ? { image: imageHandler } : undefined,
       },
     }
-  }, [toolbar, image, imageHandler])
+  }, [toolbar, image, imageHandler]) // imageHandler를 의존성에 반드시 추가
 
   const formats = useMemo(
     () => (image ? [...BASE_FORMATS, 'image'] : BASE_FORMATS),

From eba34730c29561d1a3ff60ccc4edb65212fe3e27 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 15:20:32 +0900
Subject: [PATCH 52/56] =?UTF-8?q?[seller]=20refactor(173):=20=EB=94=94?=
 =?UTF-8?q?=ED=85=8C=EC=9D=BC,=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=EB=A5=BC=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-detail-editor-modal.ui.tsx                  |  9 +++------
 .../products/create/create-header/create-header.ui.tsx |  2 +-
 .../create/create-preview/create-preview-modal.ui.tsx  | 10 +++-------
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx b/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
index 7e4f6396..ee0b88f8 100644
--- a/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-form-detail/create-detail-editor-modal.ui.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 
 import { BbanggreuiOvenLogo } from '@dessert/icons'
-import { Button, Editor } from '@dessert/ui'
+import { Button, Editor, LogoHeader } from '@dessert/ui'
 
 import { useProductCreationStore } from '../create-store/product-creation.store'
 
@@ -28,11 +28,8 @@ export const ProductEditorModal = ({
       onClick={onClose}
     >
       {/* Header */}
-      <div
-        className="h-header w-screen border-b border-gray-200 bg-white px-24 py-20"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <BbanggreuiOvenLogo />
+      <div className="h-header w-screen" onClick={(e) => e.stopPropagation()}>
+        <LogoHeader />
       </div>
 
       {/* Content Body */}
diff --git a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
index fd26bb75..63a5ebad 100644
--- a/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header.ui.tsx
@@ -48,7 +48,7 @@ export const ProductHeader = () => {
   return (
     <div
       ref={headerRef}
-      className="sticky top-0 left-0 z-9999 -mt-40 -ml-[90px] w-[calc(100%+180px)] border-b border-b-gray-200 bg-white px-[90px] py-16"
+      className="sticky top-0 left-0 z-50 -mt-40 -ml-[90px] w-[calc(100%+180px)] border-b border-b-gray-200 bg-white px-[90px] py-16"
     >
       <div className="flex w-full items-center justify-between">
         <div className="relative">
diff --git a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
index c33fe907..1ada7a20 100644
--- a/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
+++ b/apps/seller/src/features/products/create/create-preview/create-preview-modal.ui.tsx
@@ -1,5 +1,4 @@
-import { BbanggreuiOvenLogo } from '@dessert/icons'
-import { Button } from '@dessert/ui'
+import { Button, LogoHeader } from '@dessert/ui'
 import { ChevronDown, Heart, Star } from 'lucide-react'
 
 import NoThumb from '@/assets/icons/preview/noimage.svg'
@@ -45,11 +44,8 @@ export const ProductPreviewModal = ({
       className="fixed inset-0 z-9999 flex flex-col items-center bg-gray-100"
       onClick={onClose}
     >
-      <div
-        className="h-header w-screen border-b border-gray-200 bg-white px-24 py-20"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <BbanggreuiOvenLogo />
+      <div className="h-header w-screen" onClick={(e) => e.stopPropagation()}>
+        <LogoHeader />
       </div>
 
       <div

From 8dc16a923ce5101fe9aec1ac5ca40f2f7bbf02c5 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 15:58:26 +0900
Subject: [PATCH 53/56] =?UTF-8?q?[seller]=20refactor(173):=20Public=20API?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/seller/src/features/products/create/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/seller/src/features/products/create/index.ts b/apps/seller/src/features/products/create/index.ts
index 99fd2667..b9845c52 100644
--- a/apps/seller/src/features/products/create/index.ts
+++ b/apps/seller/src/features/products/create/index.ts
@@ -7,3 +7,7 @@ export * from './create-form-options'
 export * from './create-header'
 export * from './create-form-thumbnail-upload'
 export * from './create-footer'
+export * from './create-calculation'
+export * from './create-draft'
+export * from './create-preview'
+export * from './create-store'

From 5fadb8e6e12f73631af7466c8cc34cc302bc68a2 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 16:40:28 +0900
Subject: [PATCH 54/56] =?UTF-8?q?[seller]=20refactor(173):=20console=20?=
 =?UTF-8?q?=EB=94=94=EB=B2=84=EA=B9=85=20=EC=BD=94=EB=93=9C=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../products/create/create-form/create-form-submit.mutation.ts   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts b/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
index 5152d6a0..3982ce84 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
@@ -41,7 +41,6 @@ export const useSubmitCreateForm = () => {
   const handleSubmit = form.handleSubmit(
     (data) => {
       const storeId = store?.storeId ?? 1
-      console.log('mainImage:', data.mainImage)
       //   if (!store?.storeId) {
       //     toast.error(
       //       '스토어 정보를 불러오지 못했어요',

From 3dc87531b4aa4a351b1cd48d947ec89fef26e0e3 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 17:00:41 +0900
Subject: [PATCH 55/56] =?UTF-8?q?[seller]=20fix(173):=20=EC=9E=98=EB=AA=BB?=
 =?UTF-8?q?=EB=90=9C=20import=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20lint=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../seller/src/entity/products/create/create-header/index.ts | 1 +
 .../create-form-delivery/use-product-delivery-form.hook.ts   | 5 +++--
 .../create-form-options/use-product-options.form.hook.ts     | 5 ++---
 .../products/create/create-header/create-header-tags.ui.tsx  | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/seller/src/entity/products/create/create-header/index.ts b/apps/seller/src/entity/products/create/create-header/index.ts
index a9687b39..af7a350e 100644
--- a/apps/seller/src/entity/products/create/create-header/index.ts
+++ b/apps/seller/src/entity/products/create/create-header/index.ts
@@ -1,2 +1,3 @@
 export { CategoryOptions } from './category-options.constants'
 export { EssentialOptions } from './essential-options.constants'
+export type { OptionTags } from './options-tag.type'
diff --git a/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts b/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
index 2b9f42b4..3b40ebc0 100644
--- a/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-delivery/use-product-delivery-form.hook.ts
@@ -1,10 +1,11 @@
 import { useFormContext } from 'react-hook-form'
 
+import { CreateFormType } from '@/entity/products/create/create-form'
+
 import { useNumberInput } from '../create-calculation'
-import { CreateProductForm } from '../../../../entity/products/create/create-form/create-form.types'
 
 export function useProductDeliveryForm() {
-  const form = useFormContext<CreateProductForm>()
+  const form = useFormContext<CreateFormType>()
 
   const deliveryTerms = form.watch('deliveryTerms')
   const deliveryCompany = form.watch('deliveryCompany')
diff --git a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
index 7076afd8..4bbe552a 100644
--- a/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
+++ b/apps/seller/src/features/products/create/create-form-options/use-product-options.form.hook.ts
@@ -1,18 +1,17 @@
 import { useFormContext } from 'react-hook-form'
 
+import { CreateFormType } from '@/entity/products/create/create-form'
 import { ProductOptionFormInput } from '@/entity/products/create/create-form/create-indivisual-form.type'
 import { SUB_CATEGORY_MAP } from '@/entity/products/create/create-options/product-options.constant'
 
 import { productOptionSchema } from './create-options.schema'
 import { useFloatInput } from '../create-calculation/create-form-float-input.hook'
 import { useNumberInput } from '../create-calculation/create-form-number-input.hook'
-import { CreateProductForm } from '../../../../entity/products/create/create-form/create-form.types'
-
 export function useProductOptionForm(
   index: number,
   basePrice: number | null = null,
 ) {
-  const form = useFormContext<CreateProductForm>()
+  const form = useFormContext<CreateFormType>()
   const p = `options.${index}` as const
   const mainCategory = form.watch(`${p}.mainCategory`)
   const subCategory = form.watch(`${p}.subCategory`)
diff --git a/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx b/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
index eff6e742..05997f93 100644
--- a/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
+++ b/apps/seller/src/features/products/create/create-header/create-header-tags.ui.tsx
@@ -1,6 +1,6 @@
 import { Chip, Label, Tooltip } from '@dessert/ui'
 
-import { OptionTags } from '@/entity/products'
+import { OptionTags } from '@/entity/products/create/create-header'
 
 import { useCreateHeaderSteps } from '../create-store'
 

From 18a3684e95f42107f1ef0dd47185723c6f868be6 Mon Sep 17 00:00:00 2001
From: yeaseula <kminea@naver.com>
Date: Sun, 26 Apr 2026 23:35:10 +0900
Subject: [PATCH 56/56] =?UTF-8?q?[seller]=20fix(173):=20=ED=95=A0=EC=9D=B8?=
 =?UTF-8?q?=EC=9C=A8=20enum=EA=B0=92=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/create-form/create-indivisual-form.type.ts         | 2 +-
 .../src/entity/products/create/create-form/create.type.ts     | 2 +-
 .../create/create-info/product-discount-type.constants.ts     | 2 +-
 .../products/create/create-form-info/create-info.schema.ts    | 4 ++--
 .../products/create/create-form/create-form-mapper.ts         | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/seller/src/entity/products/create/create-form/create-indivisual-form.type.ts b/apps/seller/src/entity/products/create/create-form/create-indivisual-form.type.ts
index 69e4a40b..cd93376d 100644
--- a/apps/seller/src/entity/products/create/create-form/create-indivisual-form.type.ts
+++ b/apps/seller/src/entity/products/create/create-form/create-indivisual-form.type.ts
@@ -6,7 +6,7 @@ export type ProductFormInput = {
   productionTime: string
   price: number | null
   discountAmount: number | null
-  discountType: 'AMOUNT' | 'PERCENT'
+  discountType: 'AMOUNT' | 'RATE'
 }
 
 export type DeliveryFormInput = {
diff --git a/apps/seller/src/entity/products/create/create-form/create.type.ts b/apps/seller/src/entity/products/create/create-form/create.type.ts
index 72af3da7..882f0f84 100644
--- a/apps/seller/src/entity/products/create/create-form/create.type.ts
+++ b/apps/seller/src/entity/products/create/create-form/create.type.ts
@@ -5,7 +5,7 @@ export interface CreateProductRequest {
   isFresh: boolean
   productionStartAt: string
   price: number
-  discountType: 'AMOUNT' | 'PERCENT'
+  discountType: 'AMOUNT' | 'RATE'
   discountValue: number
   deliveryCondition: string
   deliveryCompany: string
diff --git a/apps/seller/src/entity/products/create/create-info/product-discount-type.constants.ts b/apps/seller/src/entity/products/create/create-info/product-discount-type.constants.ts
index 6bf3852e..114de0a0 100644
--- a/apps/seller/src/entity/products/create/create-info/product-discount-type.constants.ts
+++ b/apps/seller/src/entity/products/create/create-info/product-discount-type.constants.ts
@@ -5,6 +5,6 @@ export const ProductDiscountType = [
   },
   {
     label: '%',
-    value: 'PERCENT',
+    value: 'RATE',
   },
 ]
diff --git a/apps/seller/src/features/products/create/create-form-info/create-info.schema.ts b/apps/seller/src/features/products/create/create-form-info/create-info.schema.ts
index d702cae9..489a6aba 100644
--- a/apps/seller/src/features/products/create/create-form-info/create-info.schema.ts
+++ b/apps/seller/src/features/products/create/create-form-info/create-info.schema.ts
@@ -18,7 +18,7 @@ export const productSchema = z
         .min(0, '올바른 가격을 입력해주세요'),
       z.null(),
     ]),
-    discountType: z.enum(['AMOUNT', 'PERCENT']),
+    discountType: z.enum(['AMOUNT', 'RATE']),
   })
 
   .refine(
@@ -45,7 +45,7 @@ export const productSchema = z
   .refine(
     (data) => {
       if (data.discountAmount === null) return true
-      return data.discountType === 'PERCENT' ? data.discountAmount <= 100 : true
+      return data.discountType === 'RATE' ? data.discountAmount <= 100 : true
     },
     { message: '올바른 할인율을 입력해주세요', path: ['discountAmount'] },
   )
diff --git a/apps/seller/src/features/products/create/create-form/create-form-mapper.ts b/apps/seller/src/features/products/create/create-form/create-form-mapper.ts
index 6e9a4fea..fe7eeb52 100644
--- a/apps/seller/src/features/products/create/create-form/create-form-mapper.ts
+++ b/apps/seller/src/features/products/create/create-form/create-form-mapper.ts
@@ -130,7 +130,7 @@ export const buildProductFormData = (
   multipartData.append('price', String(form.price ?? 0))
   multipartData.append(
     'discountType',
-    form.discountType === 'AMOUNT' ? 'AMOUNT' : 'PERCENT',
+    form.discountType === 'AMOUNT' ? 'AMOUNT' : 'RATE',
   )
   multipartData.append('discountValue', String(form.discountAmount ?? 0))
   multipartData.append('deliveryCondition', form.deliveryTerms)