81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { X } from "lucide-react";
|
|
import { Equipment } from "./types";
|
|
|
|
interface PopEquipmentModalProps {
|
|
isOpen: boolean;
|
|
equipments: Equipment[];
|
|
selectedEquipment: Equipment | null;
|
|
onSelect: (equipment: Equipment) => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function PopEquipmentModal({
|
|
isOpen,
|
|
equipments,
|
|
selectedEquipment,
|
|
onSelect,
|
|
onClose,
|
|
}: PopEquipmentModalProps) {
|
|
const [tempSelected, setTempSelected] = React.useState<Equipment | null>(selectedEquipment);
|
|
|
|
React.useEffect(() => {
|
|
setTempSelected(selectedEquipment);
|
|
}, [selectedEquipment, isOpen]);
|
|
|
|
const handleConfirm = () => {
|
|
if (tempSelected) {
|
|
onSelect(tempSelected);
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
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">
|
|
{equipments.map((equip) => (
|
|
<div
|
|
key={equip.id}
|
|
className={`pop-selection-card ${tempSelected?.id === equip.id ? "selected" : ""}`}
|
|
onClick={() => setTempSelected(equip)}
|
|
>
|
|
<div className="pop-selection-card-check">✓</div>
|
|
<div className="pop-selection-card-name">{equip.name}</div>
|
|
<div className="pop-selection-card-info">{equip.processNames.join(", ")}</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>
|
|
);
|
|
}
|
|
|