82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import React from "react";
|
|
|
|
type FcltItem = {
|
|
pbnstRuseFcltId: string;
|
|
ruseUtztnFcltNm: string;
|
|
splyExtraCpct?: number;
|
|
ruseCpct?: number;
|
|
[key: string]: any;
|
|
};
|
|
|
|
export default function SelectedFcltList({
|
|
data = [],
|
|
onRemove,
|
|
}: {
|
|
data: FcltItem[];
|
|
onRemove: (updatedList: FcltItem[]) => void;
|
|
}) {
|
|
const handleDelete = (code: string) => {
|
|
const updatedList = data.filter((item) => item.pbnstRuseFcltId !== code);
|
|
onRemove(updatedList);
|
|
};
|
|
|
|
const TableContent = (
|
|
<>
|
|
<thead className="bg-gray-100 text-gray-700 text-[13px]">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left border-b">시설명</th>
|
|
<th className="px-3 py-2 text-right border-b">
|
|
하수처리량
|
|
<br />
|
|
(㎥/일)
|
|
</th>
|
|
<th className="px-3 py-2 text-right border-b">
|
|
재이용량
|
|
<br />
|
|
(㎥/일)
|
|
</th>
|
|
<th className="px-3 py-2 border-b">삭제</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((item) => (
|
|
<tr key={item.pbnstRuseFcltId} className="border-b last:border-none">
|
|
<td className="px-3 py-2 text-[12px]">{item.ruseUtztnFcltNm}</td>
|
|
<td className="px-3 py-2 text-right text-[12px]">
|
|
{Number(item.splyExtraCpct || 0).toLocaleString()}
|
|
</td>
|
|
<td className="px-3 py-2 text-right text-[12px]">
|
|
{Number(item.ruseCpct || 0).toLocaleString()}
|
|
</td>
|
|
<td className="px-3 py-2 text-center">
|
|
<button
|
|
onClick={() => handleDelete(item.pbnstRuseFcltId)}
|
|
className="text-red-500 hover:text-red-700 text-sm font-bold"
|
|
aria-label="삭제"
|
|
title="삭제"
|
|
>
|
|
✕
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</>
|
|
);
|
|
|
|
if (data.length === 0) return null;
|
|
|
|
return (
|
|
<div className="fixed right-40 top-[8rem] w-[40rem] max-h-[130rem] overflow-auto bg-white shadow-lg rounded p-4 border border-gray-300 z-50">
|
|
<h3 className="bg-cyan-700 text-white text-xl font-bold mb-2 p-2">
|
|
선택된 시설
|
|
</h3>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm text-gray-800 border border-gray-200">
|
|
{TableContent}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|