78 lines
2.8 KiB
TypeScript
78 lines
2.8 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";
|
|
|
|
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: PackageUnit) => void;
|
|
}
|
|
|
|
export function PackageUnitModal({
|
|
open,
|
|
onOpenChange,
|
|
onSelect,
|
|
}: PackageUnitModalProps) {
|
|
const handleSelect = (unit: PackageUnit) => {
|
|
onSelect(unit);
|
|
onOpenChange(false);
|
|
};
|
|
|
|
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>
|
|
|
|
{/* 3x2 그리드 */}
|
|
<div className="grid grid-cols-3 gap-3 p-4">
|
|
{PACKAGE_UNITS.map((unit) => (
|
|
<button
|
|
key={unit.value}
|
|
type="button"
|
|
onClick={() => handleSelect(unit.value as PackageUnit)}
|
|
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>
|
|
|
|
{/* X 닫기 버튼 */}
|
|
<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>
|
|
);
|
|
}
|