SeongHyun Kim
7a97603106
- 입력 필드/포장등록/담기 버튼 독립 ON/OFF 분리 - NumberInputModal을 4단계 상태 머신으로 재작성 (수량 -> 포장 수 -> 개당 수량 -> summary) - 포장 단위 커스텀 지원 (기본 6종 + 디자이너 추가) - 본문 필드에 계산식 통합 (3-드롭다운 수식 빌더) - 입력 필드: limitColumn(동적 상한), saveTable/saveColumn(저장 대상) - 저장 대상 테이블 선택을 TableCombobox로 교체 (검색 가능) - 다중 정렬 지원 + 하위 호환 (sorts.map 에러 수정) - GroupedColumnSelect 항상 테이블명 헤더 표시 - 반응형 표시 우선순위 (required/shrink/hidden) 설정 - PackageEntry/CartItem 타입 확장, CardPackageConfig 신규 Co-authored-by: Cursor <cursoragent@cursor.com>
96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
import { X } from "lucide-react";
|
|
import {
|
|
Dialog,
|
|
DialogPortal,
|
|
DialogOverlay,
|
|
DialogClose,
|
|
} from "@/components/ui/dialog";
|
|
import type { CustomPackageUnit } from "../types";
|
|
|
|
export const PACKAGE_UNITS = [
|
|
{ value: "box", label: "박스", emoji: "📦" },
|
|
{ value: "bag", label: "포대", emoji: "🛍️" },
|
|
{ value: "pack", label: "팩", emoji: "📋" },
|
|
{ value: "bundle", label: "묶음", emoji: "🔗" },
|
|
{ value: "roll", label: "롤", emoji: "🧻" },
|
|
{ value: "barrel", label: "통", emoji: "🪣" },
|
|
] as const;
|
|
|
|
export type PackageUnit = (typeof PACKAGE_UNITS)[number]["value"];
|
|
|
|
interface PackageUnitModalProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
onSelect: (unit: string) => void;
|
|
enabledUnits?: string[];
|
|
customUnits?: CustomPackageUnit[];
|
|
}
|
|
|
|
export function PackageUnitModal({
|
|
open,
|
|
onOpenChange,
|
|
onSelect,
|
|
enabledUnits,
|
|
customUnits,
|
|
}: PackageUnitModalProps) {
|
|
const handleSelect = (unitValue: string) => {
|
|
onSelect(unitValue);
|
|
onOpenChange(false);
|
|
};
|
|
|
|
// enabledUnits가 undefined면 전체 표시, 배열이면 필터링
|
|
const filteredDefaults = enabledUnits
|
|
? PACKAGE_UNITS.filter((u) => enabledUnits.includes(u.value))
|
|
: [...PACKAGE_UNITS];
|
|
|
|
const allUnits = [
|
|
...filteredDefaults.map((u) => ({ value: u.value, label: u.label, emoji: u.emoji })),
|
|
...(customUnits || []).map((cu) => ({ value: cu.id, label: cu.label, emoji: "📦" })),
|
|
];
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogPortal>
|
|
<DialogOverlay className="z-1050" />
|
|
|
|
<DialogPrimitive.Content
|
|
className="bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-1100 w-full max-w-[90vw] translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-lg border shadow-lg duration-200 sm:max-w-[380px]"
|
|
>
|
|
<div className="border-b px-4 py-3 pr-12">
|
|
<h2 className="text-base font-semibold">📦 포장 단위 선택</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-3 p-4">
|
|
{allUnits.map((unit) => (
|
|
<button
|
|
key={unit.value}
|
|
type="button"
|
|
onClick={() => handleSelect(unit.value)}
|
|
className="hover:bg-muted active:bg-muted/70 flex flex-col items-center justify-center gap-2 rounded-xl border bg-background px-3 py-5 text-sm font-medium transition-colors"
|
|
>
|
|
<span className="text-2xl">{unit.emoji}</span>
|
|
<span>{unit.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{allUnits.length === 0 && (
|
|
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
|
|
사용 가능한 포장 단위가 없습니다
|
|
</div>
|
|
)}
|
|
|
|
<DialogClose className="ring-offset-background focus:ring-ring absolute top-3 right-3 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none">
|
|
<X className="h-4 w-4" />
|
|
<span className="sr-only">Close</span>
|
|
</DialogClose>
|
|
</DialogPrimitive.Content>
|
|
</DialogPortal>
|
|
</Dialog>
|
|
);
|
|
}
|