93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { X } from "lucide-react";
|
|
import { Equipment, Process } from "./types";
|
|
|
|
interface PopProcessModalProps {
|
|
isOpen: boolean;
|
|
selectedEquipment: Equipment | null;
|
|
selectedProcess: Process | null;
|
|
processes: Process[];
|
|
onSelect: (process: Process) => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function PopProcessModal({
|
|
isOpen,
|
|
selectedEquipment,
|
|
selectedProcess,
|
|
processes,
|
|
onSelect,
|
|
onClose,
|
|
}: PopProcessModalProps) {
|
|
const [tempSelected, setTempSelected] = React.useState<Process | null>(selectedProcess);
|
|
|
|
React.useEffect(() => {
|
|
setTempSelected(selectedProcess);
|
|
}, [selectedProcess, isOpen]);
|
|
|
|
const handleConfirm = () => {
|
|
if (tempSelected) {
|
|
onSelect(tempSelected);
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
if (!isOpen || !selectedEquipment) return null;
|
|
|
|
// 선택된 설비의 공정만 필터링
|
|
const availableProcesses = selectedEquipment.processIds.map((processId, index) => {
|
|
const process = processes.find((p) => p.id === processId);
|
|
return {
|
|
id: processId,
|
|
name: selectedEquipment.processNames[index],
|
|
code: process?.code || "",
|
|
};
|
|
});
|
|
|
|
return (
|
|
<div className="pop-modal-overlay active" onClick={(e) => e.target === e.currentTarget && onClose()}>
|
|
<div className="pop-modal">
|
|
<div className="pop-modal-header">
|
|
<h2 className="pop-modal-title">공정 선택</h2>
|
|
<button className="pop-modal-close" onClick={onClose}>
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="pop-modal-body">
|
|
<div className="pop-selection-grid">
|
|
{availableProcesses.map((process) => (
|
|
<div
|
|
key={process.id}
|
|
className={`pop-selection-card ${tempSelected?.id === process.id ? "selected" : ""}`}
|
|
onClick={() => setTempSelected(process as Process)}
|
|
>
|
|
<div className="pop-selection-card-check">✓</div>
|
|
<div className="pop-selection-card-name">{process.name}</div>
|
|
<div className="pop-selection-card-info">{process.code}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pop-modal-footer">
|
|
<button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
|
|
취소
|
|
</button>
|
|
<button
|
|
className="pop-btn pop-btn-primary"
|
|
style={{ flex: 1 }}
|
|
onClick={handleConfirm}
|
|
disabled={!tempSelected}
|
|
>
|
|
확인
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|