ecf79c9e50
- 홈 화면: KPI 캐러셀, 메뉴 아이콘, 최근 활동, 공지 배너 - 입고유형선택: 외부 7개 + 내부 3개 아이콘, 금일 입고 KPI - 구매입고: 거래처 선택, 발주 품목 카드, 담기/취소 - 장바구니: 체크박스, 포장 정보, 검사 상태, 확정 - 숫자 키패드: 터치 입력, MAX, 포장등록 - 포장 선택: 6종 단위 (박스/포대/팩/묶음/롤/통) - 검사 모달: 마스터 기반 체크리스트, 측정값, 양품/불량 - 공통 PopShell: 헤더(시계+프로필), 배너, 푸터 - 반응형 4모드 (태블릿/핸드폰 가로세로)
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>
|
|
);
|
|
}
|