-
-
+
+
+
+
+ )
+}
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/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..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,12 +3,15 @@ import { useEffect } from 'react'
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 {
+ DeliveryCompany,
+ DeliveryTerms,
+} from '@/entity/products/create/create-delivery'
import { cn } from '@/shared/libs/utils'
import { useProductDeliveryForm } from './use-product-delivery-form.hook'
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
+import { InfoTooltip } from '../create-form/info-tooltip.ui'
+import { useCreateHeaderSteps } from '../create-store'
export const ProductDeliveryArea = () => {
const {
@@ -25,10 +28,10 @@ export const ProductDeliveryArea = () => {
formState: { errors },
} = form
- const { setProductFields } = useCreateFormSteps()
+ const { setProductFields } = useCreateHeaderSteps()
useEffect(() => {
- setProductFields((prev) => ({ ...prev, productDelivery: isFormField }))
+ setProductFields({ productDelivery: isFormField })
}, [isFormField, setProductFields])
return (
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..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 { useNumberInput } from '../create-calculation/create-form-number-input.hook'
-import { CreateProductForm } from '../create-form/product-create.types'
+import { CreateFormType } from '@/entity/products/create/create-form'
+
+import { useNumberInput } from '../create-calculation'
export function useProductDeliveryForm() {
- const form = useFormContext
+ {/* Header */}
+
+ )
+}
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..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
@@ -1,20 +1,20 @@
-import { useEffect } from 'react'
-
+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 { useProductCreationStore } from '../create-form/product-creation.store'
-import { useCreateFormSteps } from '../create-form/use-create-form-steps.hook'
+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'
export const ProductDetailArea = () => {
- const navigate = useNavigate()
+ const [isEditorOpen, setIsEditorOpen] = useState(false)
const { productDetail } = useProductCreationStore()
- const { setProductFields } = useCreateFormSteps()
+ const { setProductFields } = useCreateHeaderSteps()
+ const { handleSubmit, isPending, editorImageFiles } = useSubmitCreateForm()
// Quill 에디터의 빈 콘텐츠 체크 로직 (Zustand 상태 기반)
const hasContent =
@@ -22,16 +22,9 @@ export const ProductDetailArea = () => {
// 내용 유무에 따라 상품 등록 폼의 완료 상태 업데이트
useEffect(() => {
- setProductFields((prev) => ({
- ...prev,
- productDetail: hasContent,
- }))
+ setProductFields({ productDetail: hasContent })
}, [hasContent, setProductFields])
- const handleEditClick = () => {
- navigate(ROUTES.PRODUCTS.CREATE_DETAIL)
- }
-
return (
<>
e.stopPropagation()}>
+
+
+ {/* Content Body */}
+ e.stopPropagation()}
+ >
+ {/* Editor wrapper */}
+
+
+ {/* Footer Nav */}
+
+
+
+
@@ -62,7 +55,7 @@ export const ProductDetailArea = () => {
size="lg"
leftIcon={
) : (
@@ -74,9 +67,19 @@ export const ProductDetailArea = () => {
size="lg"
leftIcon={
-
+ 최종 상품 금액
- -
- {price !== null && (
-
- - {price.toLocaleString('ko-KR')} -
- )} -- - {finalPrice.toLocaleString('ko-KR')} - - 원 -
-
- (
-
-
- {/* 옵션명 + 성분 카테고리 */}
-
-
-
-
-
-
- {errors.ingredientCategories && (
-
- - {errors.ingredientCategories.message} -
- )} -
- toggleIngredient('glutenFree')}
- />
- toggleIngredient('vegan')}
- />
-
-
-
-
-
- {/* 재고 수량 + 발송 요일 */}
-
-
- {totalPrice !== null && (
-
-
- 원
-
-
-
- 원
-
-
-
- )}
- - 최종 가격: - - {totalPrice.toLocaleString('ko-KR')}원 - -
-
-
-
- {/* 영양 정보 */}
-
-
-
- - 주문 제작 상품인 경우 재고를 1000개 이상으로 설정해주세요. -
- -
-
-
- - 정해진 발송 요일이 있다면 선택하세요. -
-
- (
- {
- field.onChange(checked)
- NUTRITION_FIELDS.forEach(({ key }) => {
- const inputProps =
- nutritionInputs[key as keyof typeof nutritionInputs]
- inputProps.handleNull()
- })
- }}
- />
- )}
+ {fields.map((field, index) => (
+ 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)}
/>
-
-
-
-
-
- 아래 기준에 해당하면 상단 성분 카테고리가 자동으로 등록돼요.
-
-
- -
-
- 저당: 100g당 5g 미만 / 100ml당 2.5g 미만 -
- 고단백: 100g당 11g 이상 -
- 저지방: 100g당 3g 미만 / 100ml당 1.5g 미만 -
- {NUTRITION_FIELDS.map(({ key, label }) => {
- const inputProps =
- nutritionInputs[key as keyof typeof nutritionInputs]
- return (
-
-
-
- )
- })}
- {label}
- -- 영양 성분은 1회 제공량 기준으로 작성하세요. -
- - {/* 삭제 / 복사 */} -
-
-
-
-
-
+ ))}
)
}
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..e2bb483c
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form-options/create-form-options-form.ui.tsx
@@ -0,0 +1,317 @@
+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 { ProductFinalPrice } from '../create-form'
+import { InfoTooltip } from '../create-form/info-tooltip.ui'
+import { useCreateHeaderSteps } from '../create-store'
+
+interface ProductOptionFormProps {
+ index: number
+ isLast: boolean
+ onDelete: () => void
+ onCopy: () => void
+ onAdd: () => void
+}
+
+export const ProductOptionForm = ({
+ index,
+ isLast,
+ onDelete,
+ onCopy,
+ onAdd,
+}: ProductOptionFormProps) => {
+ const { productPrice, setProductFields, setNutritionData } =
+ useCreateHeaderSteps()
+ const {
+ form,
+ mainCategory,
+ subCategoryOptions,
+ additionalPrice,
+ shippingDays,
+ hasNutrition,
+ ingredientCategories,
+ totalPrice,
+ isFormField,
+ errors,
+ handleMainCategoryChange,
+ toggleIngredient,
+ additionalPriceInput,
+ stockInput,
+ nutritionInputs,
+ toggleShippingDay,
+ } = useProductOptionForm(index, productPrice)
+
+ const { control, register } = form
+
+ 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
+
+ setNutritionData(index, {
+ sugar,
+ protein,
+ fat,
+ ingredientCategories,
+ })
+ }, [
+ index,
+ nutritionInputs.sugar?.displayValue,
+ nutritionInputs.protein?.displayValue,
+ nutritionInputs.fat?.displayValue,
+ ingredientCategories, // Zustand 내부 비교 최적화 가능
+ setNutritionData,
+ ])
+
+ return (
+ <>
+ {index > 0 && }
+
+ {/* 카테고리 */}
+
+ (
+
+
+ {/* 옵션명 + 성분 카테고리 */}
+
+
+
+
+ {/* 가격 */}
+
+
+ {errors?.ingredientCategories && (
+
+ + {errors.ingredientCategories.message} +
+ )} +
+ toggleIngredient('glutenFree')}
+ />
+ toggleIngredient('vegan')}
+ />
+
+
+
+
+
+ {/* 재고 수량 + 발송 요일 */}
+
+
+ {totalPrice !== null && (
+
+
+ 원
+
+
+
+ 원
+
+
+
+
+ {/* 영양 정보 */}
+
+
+
+ + 주문 제작 상품인 경우 재고를 1000개 이상으로 설정해주세요. +
+ +
+
+
+ + 정해진 발송 요일이 있다면 선택하세요. +
+
+ (
+ {
+ field.onChange(checked)
+ NUTRITION_FIELDS.forEach(({ key }) => {
+ const inputProps =
+ nutritionInputs[key as keyof typeof nutritionInputs]
+ inputProps.handleNull()
+ })
+ }}
+ />
+ )}
+ />
+
+
+
+
+
+ 아래 기준에 해당하면 상단 성분 카테고리가 자동으로 등록돼요.
+
+
+ -
+
- 저당: 100g당 5g 미만 / 100ml당 2.5g 미만 +
- 고단백: 100g당 11g 이상 +
- 저지방: 100g당 3g 미만 / 100ml당 1.5g 미만 +
+ {NUTRITION_FIELDS.map(({ key, label }) => {
+ const inputProps =
+ nutritionInputs[key as keyof typeof nutritionInputs]
+ return (
+
+
+
+ )
+ })}
+ {label}
+ ++ 영양 성분은 1회 제공량 기준으로 작성하세요. +
+ + {/* 삭제 / 복사 */} +
+
+
+
+
+ {isLast && (
+
+ )}
+
+ )
+}
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
+
+
+
+ {/* 대표 이미지 영역 */}
+
+
+
+
+ {/* 추가 이미지 영역 */}
+
+ {mainImage ? (
+ setDeleteTarget('main')}
+ />
+ ) : (
+ handleFileChange(e, 'main')}
+ />
+ )}
+
+ + 권장 크기 1000×1000, 최소 160×160 이상 (1:1 비율) · jpg, jpeg, png + 형식 · 10MB 이하 파일만 업로드 가능해요 +
+
+
+
+
+ {/* 삭제 확인 모달 */}
+
+ {extraImages.length < 9 && (
+ handleFileChange(e, 'extra')}
+ />
+ )}
+ {extraImages.map((file: File, idx: number) => (
+ setDeleteTarget(idx)}
+ />
+ ))}
+
+
+ 
+
+
+ )
+}
+
+interface DeleteConfirmDialogProps {
+ isOpen: boolean
+ onClose: () => void
+ onConfirm: () => void
+}
+
+function DeleteConfirmDialog({
+ isOpen,
+ onClose,
+ onConfirm,
+}: DeleteConfirmDialogProps) {
+ return (
+
+ )
+}
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
+
)
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..fe7eeb52
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form/create-form-mapper.ts
@@ -0,0 +1,159 @@
+import {
+ CreateFormType,
+ ProductOptionFormInput,
+} from '@/entity/products/create/create-form'
+
+const CATEGORY_MAP: Record = {
+ 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 = {
+ 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,
+ }
+ : {}),
+})
+
+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,
+ imageFiles: Map,
+): { processedContent: string; files: File[] } => {
+ const files: File[] = []
+ const processedContent = content.replace(
+ /]+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, // 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))
+ // 필드명도 productionStartTime으로 변경
+ multipartData.append(
+ 'productionStartTime',
+ toProductionTimeFormat(form.productionTime),
+ )
+ multipartData.append('price', String(form.price ?? 0))
+ multipartData.append(
+ 'discountType',
+ form.discountType === 'AMOUNT' ? 'AMOUNT' : 'RATE',
+ )
+ 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-provider.ui.tsx b/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
deleted file mode 100644
index a0633785..00000000
--- a/apps/seller/src/features/products/create/create-form/create-form-provider.ui.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useState } from 'react'
-
-import { FormStepStatus, FormStepsContext } from './create-form-steps.context'
-
-export const FormStepsProvider = ({
- children,
-}: {
- children: React.ReactNode
-}) => {
- const [productFields, setProductFields] = useState({
- productInfo: false,
- productDelivery: false,
- productOptions: false,
- })
-
- return (
-
- {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
deleted file mode 100644
index 197b78a1..00000000
--- a/apps/seller/src/features/products/create/create-form/create-form-steps.context.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import React, { createContext } from 'react'
-
-export type FormStepStatus = Record
-
-interface FormStepsContextType {
- productFields: FormStepStatus
- setProductFields: React.Dispatch>
-}
-
-export const FormStepsContext = createContext(null)
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..3982ce84
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form/create-form-submit.mutation.ts
@@ -0,0 +1,65 @@
+import { useRef } from 'react'
+
+import { toast } from '@dessert/ui'
+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 { useCreateDraftStore } from '../create-draft'
+import { useProductCreationStore } from '../create-store/product-creation.store'
+
+export const useSubmitCreateForm = () => {
+ const form = useFormContext()
+ const { productDetail } = useProductCreationStore()
+ const { clearDraft } = useCreateDraftStore()
+ const editorImageFiles = useRef>(new Map())
+
+ // const { data: store } = useQuery(productQueries.myStore())
+
+ const { data: store } = useQuery({
+ ...productQueries.myStore(),
+ enabled: false, // ← 쿼리 비활성화
+ })
+
+ const { mutate, isPending } = useMutation({
+ mutationFn: createProduct,
+ onSuccess: () => {
+ clearDraft() //상품 등록 성공 시 임시 저장 내용 삭제
+ toast.success('상품 등록을 완료했어요')
+ },
+ onError: () => {
+ toast.error('저장이 완료되지 않았어요', '다시 한 번 시도해주세요')
+ },
+ })
+
+ const handleSubmit = form.handleSubmit(
+ (data) => {
+ const storeId = store?.storeId ?? 1
+ // if (!store?.storeId) {
+ // toast.error(
+ // '스토어 정보를 불러오지 못했어요',
+ // '다시 한 번 시도해주세요',
+ // )
+ // return
+ // }
+ const formData = buildProductFormData(
+ data,
+ productDetail,
+ editorImageFiles.current,
+ storeId,
+ )
+ mutate(formData)
+ },
+ () => {
+ toast.error('필수 입력사항을 확인해 주세요')
+ },
+ )
+
+ return { handleSubmit, isPending, editorImageFiles }
+}
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 739d5120..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 { 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 { useCreateProductForm } from './use-create-product-form.hook'
-export * from './product-create.types'
+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/create-form/product-create.types.ts b/apps/seller/src/features/products/create/create-form/product-create.types.ts
deleted file mode 100644
index 8ba751c6..00000000
--- a/apps/seller/src/features/products/create/create-form/product-create.types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {
- DeliveryFormInput,
- ProductDisclosureFormInput,
- ProductFormInput,
- ProductOptionFormInput,
-} 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'
-
-export type CreateProductForm = ProductFormInput &
- DeliveryFormInput &
- ProductOptionFormInput &
- ProductDisclosureFormInput
-
-export const createProductSchema = productSchema
- .and(deliverySchema)
- .and(productOptionSchema)
- .and(disclosureSchema)
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 (
+ ({
+ resolver: zodResolver(CreateFormSchema) as Resolver,
+ defaultValues: {
+ productName: '',
+ isFresh: true,
+ productionTime: '',
+ price: null,
+ discountAmount: null,
+ discountType: 'AMOUNT',
+
+ deliveryTerms: '',
+ deliveryCompany: '',
+ deliveryFee: null,
+ deliveryMinFee: null,
+
+ mainImage: null,
+ extraImages: [],
+
+ options: [DEFAULT_PRODUCT_OPTION] as unknown as CreateFormType['options'],
+
+ productInfoNotice: DISCLOSURE_FIELDS.reduce(
+ (acc, field) => ({
+ ...acc,
+ [field.key]: '',
+ }),
+ {} as CreateFormType['productInfoNotice'],
+ ),
+ productInfoNoticeMode: DISCLOSURE_FIELDS.reduce(
+ (acc, field) => ({
+ ...acc,
+ [field.key]: 'default',
+ }),
+ {} as CreateFormType['productInfoNoticeMode'],
+ ),
+ },
+ mode: 'onChange',
+ })
+}
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
deleted file mode 100644
index c2637e15..00000000
--- a/apps/seller/src/features/products/create/create-form/use-create-product-form.hook.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-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 = () => {
- return useForm({
- resolver: zodResolver(createProductSchema) as Resolver,
- defaultValues: {
- productName: '',
- isFresh: true,
- productionTime: '',
- price: null,
- discountAmount: null,
- discountType: 'won',
-
- deliveryTerms: '',
- deliveryCompany: '',
- deliveryFee: null,
- deliveryMinFee: null,
-
- 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,
-
- productInfoNotice: DISCLOSURE_FIELDS.reduce(
- (acc, field) => ({
- ...acc,
- [field.key]: '',
- }),
- {} as CreateProductForm['productInfoNotice'],
- ),
- productInfoNoticeMode: DISCLOSURE_FIELDS.reduce(
- (acc, field) => ({
- ...acc,
- [field.key]: 'default',
- }),
- {} as CreateProductForm['productInfoNoticeMode'],
- ),
- },
- mode: 'onChange',
- })
-}
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..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,8 @@
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'
interface TagsProps {
title: string
@@ -15,6 +17,8 @@ export const ProductHeaderTags = ({
titleTooltipProps,
tagData,
}: TagsProps) => {
+ const { activeTags } = useCreateHeaderSteps()
+
return (
)
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..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
@@ -1,3 +1,5 @@
+import { useEffect, useRef } from 'react'
+
import {
Accordion,
AccordionContent,
@@ -5,13 +7,15 @@ import {
AccordionTrigger,
StageTab,
} from '@dessert/ui'
-import { ChevronDown } from 'lucide-react'
-import { CategoryOptions, EssentialOptions } from '@/entity/products'
+import {
+ CategoryOptions,
+ EssentialOptions,
+} from '@/entity/products/create/create-header'
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 { InfoTooltip } from '../create-form'
+import { useCreateHeaderSteps } from '../create-store'
const stagestep = [
'상품 정보',
@@ -23,19 +27,39 @@ const stagestep = [
]
export const ProductHeader = () => {
- const { productFields } = useCreateFormSteps()
+ const { productFields, currentStep, scrollToStep, setHeaderHeight } =
+ useCreateHeaderSteps()
+ const headerRef = useRef(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) {
+ const height = Math.round(entry.target.clientHeight)
+ setHeaderHeight(height)
+ }
+ })
+ observer.observe(headerRef.current)
+ return () => observer.disconnect()
+ }, [setHeaderHeight])
return (
-
{children}
+
+ )
+}
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.hook.ts b/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts
new file mode 100644
index 00000000..9ca86d4c
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-form/use-create-form.hook.ts
@@ -0,0 +1,68 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Resolver, useForm } from 'react-hook-form'
+
+import { DISCLOSURE_FIELDS } from '@/entity/products/create/create-disclosure'
+import {
+ CreateFormType,
+ ProductOptionFormInput,
+} from '@/entity/products/create/create-form'
+
+import { CreateFormSchema } from './create-form.schema'
+
+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 useCreateForm = () => {
+ return useForm{title}
+ +
+ {price !== null && (
+
+ + {price?.toLocaleString('ko-KR')} +
+ )} ++ + {finalPrice.toLocaleString('ko-KR')} + + 원 +
+
@@ -26,16 +30,21 @@ export const ProductHeaderTags = ({
{titleTooltipProps}
- {tagData.map((items) => (
-
-
- #{items.title}
-
-
-
-
- ))}
+ {tagData.map((items) => {
+ const isActive = activeTags[items.title] ?? false
+ return (
+
+
+
+ #{items.title}
+
+
+
+
+
+ )
+ })}
{items.tooltip}
-{items.tooltip}
+
+
-
+ ()
+ 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 === 'AMOUNT'
+ ? price > 0
+ ? Math.round((discountAmount / price) * 100)
+ : 0
+ : discountAmount
+
+ const totalPrice =
+ discountType === 'AMOUNT'
+ ? 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'
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
new file mode 100644
index 00000000..c696c7c9
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-store/create-header-store.store.ts
@@ -0,0 +1,130 @@
+import { create } from 'zustand'
+
+import {
+ CategoryOptions,
+ EssentialOptions,
+} from '@/entity/products/create/create-header'
+import {
+ ActiveTags,
+ NutritionData,
+ ProductFileType,
+} from '@/entity/products/create/create-store'
+
+interface CreateFormStoreProps {
+ // --- State ---
+ productFields: ProductFileType
+ currentStep: number
+ headerHeight: number
+ nutritionDataList: NutritionData[]
+ productPrice: number | null
+ isScrolling: boolean // Ref 대신 State로 관리 (Zustand는 선택적 구독이 가능하므로)
+
+ // --- Actions ---
+ setProductFields: (fields: Partial) => 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(
+ (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) =>
+ set(
+ (state): Partial => ({
+ // 1. 리턴 타입을 Partial로 명시
+ productFields: {
+ ...state.productFields,
+ ...fields,
+ } as ProductFileType, // 결과물을 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/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/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/features/products/create/create-store/use-create-header-steps.hook.tsx b/apps/seller/src/features/products/create/create-store/use-create-header-steps.hook.tsx
new file mode 100644
index 00000000..2c08b414
--- /dev/null
+++ b/apps/seller/src/features/products/create/create-store/use-create-header-steps.hook.tsx
@@ -0,0 +1,26 @@
+import { useCreateHeaderStore } from './create-header-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/index.ts b/apps/seller/src/features/products/create/index.ts
index 202e6b01..b9845c52 100644
--- a/apps/seller/src/features/products/create/index.ts
+++ b/apps/seller/src/features/products/create/index.ts
@@ -5,3 +5,9 @@ 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'
+export * from './create-footer'
+export * from './create-calculation'
+export * from './create-draft'
+export * from './create-preview'
+export * from './create-store'
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:
-
-
+
)
}
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()
+
+ const stepIds = [
+ 'productInfo',
+ 'productDelivery',
+ 'productThumbnail',
+ 'productOptions',
+ 'productDetail',
+ 'productDisclosure',
+ ]
+ useEffect(() => {
+ if (isInitialMount.current) {
+ isInitialMount.current = false
+ if (draft) {
+ setIsDraftModalOpen(true)
+ }
+ } //최초 컴포넌트 마운트 시 modal이 생성되도록 합니다
+ }, [draft])
+
+ useEffect(() => {
+ const elements = stepIds.map((id) => document.getElementById(id))
+
+ // 헤더가 가리는 만큼 상단 여백을 줌
+ const topMargin = headerHeight > 0 ? headerHeight : 100
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ // 클릭해서 스크롤 중일 때는 단계 변경 무시
+ if (isScrollingToStep.current) return
+
+ const visibleEntries = entries.filter((entry) => entry.isIntersecting)
+ if (visibleEntries.length === 0) return
+
+ // 화면 상단 기준선에 가장 가까운 섹션 찾기
+ const topEntry = visibleEntries.reduce((prev, curr) => {
+ return curr.boundingClientRect.top < prev.boundingClientRect.top
+ ? curr
+ : prev
+ })
+
+ const index = stepIds.indexOf(topEntry.target.id)
+ if (index !== -1) {
+ setCurrentStep(index + 1)
+ }
+ },
+ {
+ // 상단은 헤더 높이만큼 빼고, 하단은 화면 절반 위로 오면 인식
+ rootMargin: `-${topMargin}px 0px -50% 0px`,
+ threshold: 0,
+ },
+ )
+
+ elements.forEach((el) => el && observer.observe(el))
+ return () => observer.disconnect()
+ }, [headerHeight, setCurrentStep]) // isScrollingToStep은 내부에서 ref로 참조되므로 생략 가능
return (
<>
+
-
+
-
+
+
+
+
-
+
-
+
-
-
+ {/*
+ */}
+
+
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: {
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 {
+ customIcon?: React.ReactNode
+}
+
function AccordionTrigger({
className,
children,
+ customIcon = false,
...props
-}: React.ComponentProps) {
+}: CustomTriggerProps) {
return (
{children}
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 = {
diff --git a/packages/ui/src/editor/editor.css b/packages/ui/src/editor/editor.css
index 85d7cf01..07aa195a 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 {
@@ -57,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;
+}
diff --git a/packages/ui/src/editor/editor.tsx b/packages/ui/src/editor/editor.tsx
index 37df1f93..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
@@ -101,11 +123,12 @@ const Editor = ({
image = false,
onImageUpload,
className = '',
- height = 300,
+ height,
}: EditorProps) => {
const isReadOnly = disabled || !onChange
const quillRef = useRef(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),
@@ -166,6 +197,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 +211,7 @@ const Editor = ({
formats={formats}
placeholder={placeholder}
readOnly={isReadOnly}
- style={{ height }}
+ style={height ? { height } : { height: 'calc(100% - 66px)' }}
/>
)
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 (
- {/* TODO : 추후 기능 추가 예정 */}
-
-
+ scrollToStep(idx)}
+ />
+
+
필수 입력 사항이{' '} {totalSteps - steps}개{' '} @@ -64,11 +88,10 @@ export const ProductHeader = () => { />
-
-
+
+ )
+}
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 (
+ e.stopPropagation()}>
+
+
+ e.stopPropagation()}
+ >
+ {/* 1. 헤더 */}
+
+
+ {/* 푸터 */}
+
+
+
+ {/* 2. 탭 */}
+ + {formData.productName || '{{상품명}}'} +
+
+
+
+ {/* 3. 이미지 */}
+
+ 상품정보
+
+
+ 리뷰
+
+
+
+
+ {/* 4. 상품 기본 정보 */}
+
+ {allImageUrls[0] ? (
+ 
+ ) : (
+
+
+ 
+
+ )}
+ {options.length > 1 && (
+ 등록된 이미지가 없습니다.
+
+ 묶음상품
+
+ )}
+
+ 1 / {allImageUrls.length || 1}
+
+
+
+
+
+
+
+ Brand Name
+
+
+
+ {/* 5. 배송비 */}
+ + {formData.productName || '{{상품명}}'} +
+
+
+
+
+ {isPriceEntered && discountPercent > 0
+ ? `${discountPercent}%`
+ : '{{할인율}}'}
+
+
+ {isPriceEntered
+ ? `${totalPrice.toLocaleString()}원~`
+ : '{{상품가격}}'}
+
+ {options.length > 1 && (
+
+ 맛별 가격 상이
+
+ )}
+
+
+
+
+
+
+ {/* 리뷰 배지 */}
+
+ 배송비
+
+ {formData.deliveryFee
+ ? `${formData.deliveryFee.toLocaleString()}원`
+ : '{{배송비}}'}
+
+ {formData.deliveryMinFee && (
+
+ ({formData.deliveryMinFee.toLocaleString()}원 이상 구매 시 무료)
+
+ )}
+
+
+
+
+ {/* 6. 상품 옵션 */}
+
+ + 리뷰 대표 배지 +
+
+ {BADGES.map(({ label, icon }) => (
+
+
+ 
+ {label}
+
+ ))}
+
+
+
+ {/* 7. 상세 설명 */}
+ 상품 옵션
+ {options.length === 0 ? ( +
+ 옵션을 입력해주세요
+
+ ) : (
+ options.map((option, idx) => (
+
+
+
+ 간단히 보기
+
+
+ {productDetail ? (
+
+ ) : (
+
+
+ {/* 하단 고정 바 */}
+ + 상세 설명을 등록해주세요 +
+ )} +
+
+
+
+
+
+
+
+
+ {days.map((day) => (
+
+ {day.label}
+
+ ))}
+
+ )
+}
+
+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 (
+
+
+ )
+}
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..52f0da42
--- /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
+
+
+ {/* 태그 영역 */}
+ + {option.optionName || `{{옵션명 ${idx + 1}}}`} +
+
+ {discountAmount > 0 && (
+
+ {originalPrice.toLocaleString()}원
+
+ )}
+
+ {displayDiscountRate}
+
+
+ {displayFinalPrice}
+
+
+
+ {getOptionTags(option).length > 0 ? (
+ getOptionTags(option).map((tag) => (
+
+ {tag}
+
+ ))
+ ) : (
+
+ 성분 카테고리 미입력
+
+ )}
+
+
+
+
+
+ {option.hasNutrition && (
+ 주문 가능날짜
+
+
+
+ 빵켓팅 알림 신청
+
+
+
+ )}
+
+ 영양정보
+
+ 총 내용량 {option.totalWeight ?? 0}g / {option.calories ?? 0}kcal
+
+
+
+ {[
+ { label: '단백질', key: 'protein' as const },
+ { label: '당류', key: 'sugar' as const },
+ { label: '탄수화물', key: 'carbohydrate' as const },
+ { label: '지방', key: 'fat' as const },
+ ].map((nutri) => (
+
+
+
+ ))}
+
+ {nutri.label}
+
+
+ {option[nutri.key] ?? 0}g
+
+
-
-
+ )}
)
}
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 639f2a9c..00000000
--- a/apps/seller/src/pages/products/create/detail-edit-page.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-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'
-
-export function DetailEditPage() {
- const navigate = useNavigate()
- const { productDetail, setProductDetail } = useProductCreationStore()
-
- // 편집 시 로컬 상태를 사용하고 등록 시에만 스토어에 반영합니다 (CodeRabbit 피드백 반영)
- const [localDetail, setLocalDetail] = useState(productDetail)
-
- return (
-
- {/* Header */}
-
-
-
- {/* Content Body */}
-
- {/* Editor wrapper */}
-
-
- {/* Footer Nav */}
-
-
- )
-}
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..472e60b0 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 = () => {
-
-
+
{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 (
-
+
-
+
)
})}