9b7b88ff7c
Some checks failed
Build and Push Images / build-and-push (push) Failing after 1m30s
- POP 전용 39개 파일 추가 (홈/입고/출고/생산) - 백엔드 INSERT에 id gen_random_uuid 추가 (5개 파일) - POP 전용 API 7개 추가 (창고/위치/입고/동기화) - PC 코드 구조/순서/로직 변경 없음 (AppLayout, UserDropdown 미수정)
82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Types */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
export interface PackageUnit {
|
|
label: string;
|
|
icon: string;
|
|
value: string;
|
|
}
|
|
|
|
const PACKAGE_UNITS: PackageUnit[] = [
|
|
{ label: "박스", icon: "\uD83D\uDCE6", value: "박스" },
|
|
{ label: "포대", icon: "\uD83D\uDECD\uFE0F", value: "포대" },
|
|
{ label: "팩", icon: "\uD83D\uDCCB", value: "팩" },
|
|
{ label: "묶음", icon: "\uD83D\uDD17", value: "묶음" },
|
|
{ label: "롤", icon: "\uD83E\uDDFB", value: "롤" },
|
|
{ label: "통", icon: "\uD83E\uDEB3", value: "통" },
|
|
];
|
|
|
|
interface PackagingModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSelect: (unit: PackageUnit) => void;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Component */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
export function PackagingModal({ open, onClose, onSelect }: PackagingModalProps) {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[60] flex items-center justify-center">
|
|
{/* Overlay */}
|
|
<div className="absolute inset-0 bg-black/50" onClick={onClose} />
|
|
|
|
{/* Panel */}
|
|
<div className="relative bg-white w-[90%] max-w-[360px] rounded-2xl shadow-2xl z-10 overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
|
|
<h3 className="text-lg font-bold text-gray-900">
|
|
<span className="mr-1.5">{"\uD83D\uDCE6"}</span>
|
|
포장 단위 선택
|
|
</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body: 3x2 grid */}
|
|
<div className="p-5">
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{PACKAGE_UNITS.map((unit) => (
|
|
<button
|
|
key={unit.value}
|
|
onClick={() => {
|
|
onSelect(unit);
|
|
onClose();
|
|
}}
|
|
className="flex flex-col items-center gap-2 py-4 px-3 border-2 border-gray-200 rounded-xl bg-white text-sm font-medium text-gray-700 hover:border-blue-400 hover:bg-blue-50 active:scale-95 transition-all min-h-[80px]"
|
|
>
|
|
<span className="text-2xl">{unit.icon}</span>
|
|
<span>{unit.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|