물 재이용 대민서비스 수요신청 > 수요정보등록 > 유사사례조회 모달팝업 수정
This commit is contained in:
LGS
@@ -1,6 +1,7 @@
|
||||
// apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx (유사사례 모달)
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useEffect, useMemo, useState, useId } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
type Criterion = "" | "supplyAmt" | "treatment" | "usePurpose";
|
||||
@@ -59,8 +60,7 @@ export type SimilarCaseDetail = {
|
||||
};
|
||||
|
||||
function formatNumber(v: any) {
|
||||
if (v === null || v === undefined || v === "" || Number.isNaN(Number(v)))
|
||||
return "-";
|
||||
if (v === null || v === undefined || v === "" || Number.isNaN(Number(v))) return "-";
|
||||
const n = typeof v === "number" ? v : Number(String(v).replaceAll(",", ""));
|
||||
if (!Number.isFinite(n)) return "-";
|
||||
return n.toLocaleString("ko-KR");
|
||||
@@ -77,6 +77,8 @@ export default function SimilarCaseModal({
|
||||
rows: SimilarCaseRow[];
|
||||
detailsByCaseId: Record<string, SimilarCaseDetail | undefined>;
|
||||
}) {
|
||||
const titleId = useId();
|
||||
|
||||
// open 타입 방어
|
||||
if (typeof open !== "boolean") {
|
||||
console.error("SimilarCaseModal: open prop is not boolean:", open);
|
||||
@@ -133,7 +135,8 @@ export default function SimilarCaseModal({
|
||||
const tdBase =
|
||||
"border border-[#C9C9C9] px-2 py-2 text-sm text-neutral-800 align-middle";
|
||||
const thBase =
|
||||
"border border-[#C9C9C9] bg-[#E7F4E2] px-2 py-3 text-sm font-semibold text-neutral-800 text-center align-middle";
|
||||
"border border-[#C9C9C9] bg-[#E7F4E2] px-2 py-2 text-sm font-semibold text-neutral-800 text-center align-middle";
|
||||
|
||||
const highlightTd = "bg-neutral-200";
|
||||
|
||||
const showList = criterion !== "";
|
||||
@@ -150,456 +153,385 @@ export default function SimilarCaseModal({
|
||||
/>
|
||||
|
||||
{/* panel */}
|
||||
<div className="relative w-[94vw] max-w-[1700px] rounded-xl bg-white shadow-xl">
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={titleId}
|
||||
className="relative w-[94vw] max-w-[1700px] rounded-xl bg-white shadow-xl"
|
||||
>
|
||||
{/* header */}
|
||||
<div className="flex items-center justify-between px-8 py-6">
|
||||
<h2 className="text-2xl font-extrabold text-neutral-900">유사사례 조회</h2>
|
||||
<h2 id={titleId} className="text-2xl font-extrabold text-neutral-900">
|
||||
유사사례 조회
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="닫기"
|
||||
onClick={onClose}
|
||||
className="grid h-10 w-10 place-items-center rounded-sm hover:bg-neutral-100"
|
||||
className="grid h-10 w-10 place-items-center rounded-sm hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-300"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="h-px w-full bg-neutral-200" />
|
||||
|
||||
{/* body */}
|
||||
<div className="px-8 py-6">
|
||||
{/* 상단 타이틀 + 유사기준 */}
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="text-lg font-semibold text-neutral-900">
|
||||
물 재이용 사업 유사 사례
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-semibold text-neutral-800">
|
||||
유사기준
|
||||
</span>
|
||||
<select
|
||||
value={criterion}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value as Criterion;
|
||||
setCriterion(v);
|
||||
setSelectedCaseId("");
|
||||
}}
|
||||
className="h-10 w-[180px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
|
||||
>
|
||||
<option value="">유사기준선택</option>
|
||||
<option value="supplyAmt">공급량</option>
|
||||
<option value="treatment">처리공법</option>
|
||||
<option value="usePurpose">이용용도</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* body */}
|
||||
<div className="px-8 py-6">
|
||||
{/* 상단 타이틀 + 유사기준 */}
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="text-lg font-semibold text-neutral-900">
|
||||
물 재이용 사업 유사 사례
|
||||
</div>
|
||||
|
||||
{/* 리스트 영역 */}
|
||||
<div className="border border-[#C9C9C9] bg-white">
|
||||
{!showList ? (
|
||||
<div className="grid min-h-[260px] place-items-center bg-emerald-50/30">
|
||||
<div className="text-neutral-500">
|
||||
유사기준을 선택해주세요.
|
||||
</div>
|
||||
</div>
|
||||
) : !hasRows ? (
|
||||
<div className="grid min-h-[260px] place-items-center bg-emerald-50/30">
|
||||
<div className="text-neutral-500">조회 결과가 없습니다.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-[300px] overflow-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead className="sticky top-0 z-10">
|
||||
<tr>
|
||||
<th rowSpan={2} className={thBase}>
|
||||
선택
|
||||
</th>
|
||||
<th rowSpan={2} className={thBase}>
|
||||
사업명
|
||||
</th>
|
||||
<th rowSpan={2} className={thBase}>
|
||||
사업기간
|
||||
</th>
|
||||
|
||||
<th colSpan={3} className={thBase}>
|
||||
공급처
|
||||
</th>
|
||||
<th colSpan={2} className={thBase}>
|
||||
수요처
|
||||
</th>
|
||||
<th colSpan={6} className={thBase}>
|
||||
재이용시설
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className={thBase}>시설종류</th>
|
||||
<th className={thBase}>공급처명</th>
|
||||
<th className={thBase}>
|
||||
시설용량
|
||||
<br />
|
||||
(m³/일)
|
||||
</th>
|
||||
|
||||
<th className={thBase}>수요처명</th>
|
||||
<th className={thBase}>주소</th>
|
||||
|
||||
<th className={thBase}>
|
||||
시설용량
|
||||
<br />
|
||||
(m³/일)
|
||||
</th>
|
||||
<th className={thBase}>
|
||||
관로
|
||||
<br />
|
||||
(km)
|
||||
</th>
|
||||
<th className={thBase}>용도</th>
|
||||
|
||||
<th className={thBase}>
|
||||
공급량
|
||||
<br />
|
||||
(m³/일)
|
||||
</th>
|
||||
<th className={thBase}>처리공법</th>
|
||||
<th className={thBase}>이용용도</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{rows.map((r, idx) => {
|
||||
const isFirst = groupInfo.firstIndex.get(r.caseId) === idx;
|
||||
const rowSpan = groupInfo.counts.get(r.caseId) ?? 1;
|
||||
const selected = selectedCaseId === r.caseId;
|
||||
|
||||
const supplyAmtCls = criterion === "supplyAmt" ? highlightTd : "";
|
||||
const treatmentCls = criterion === "treatment" ? highlightTd : "";
|
||||
const usePurposeCls = criterion === "usePurpose" ? highlightTd : "";
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={`${r.caseId}-${idx}`}
|
||||
className={[
|
||||
"cursor-pointer hover:bg-neutral-50",
|
||||
selected ? "bg-sky-50" : "",
|
||||
].join(" ")}
|
||||
onClick={() => setSelectedCaseId(r.caseId)}
|
||||
>
|
||||
{isFirst ? (
|
||||
<>
|
||||
<td className={`${tdBase} text-center`} rowSpan={rowSpan}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected}
|
||||
readOnly
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`} rowSpan={rowSpan}>
|
||||
{r.projectName ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`} rowSpan={rowSpan}>
|
||||
{r.period ?? "-"}
|
||||
</td>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{r.supplyFacilityType ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>{r.supplyName ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{formatNumber(r.supplyCapacity)}
|
||||
</td>
|
||||
|
||||
<td className={`${tdBase} text-center`}>{r.demandName ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{r.demandAddress ?? "-"}</td>
|
||||
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{formatNumber(r.facilityCapacity)}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{formatNumber(r.pipeKm)}
|
||||
</td>
|
||||
<td className={tdBase}>{r.purpose ?? "-"}</td>
|
||||
|
||||
<td className={`${tdBase} text-center ${supplyAmtCls}`}>
|
||||
{formatNumber(r.supplyAmt)}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center ${treatmentCls}`}>
|
||||
{r.treatment ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center ${usePurposeCls}`}>
|
||||
{r.usePurpose ?? "-"}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-semibold text-neutral-800">유사기준</span>
|
||||
<select
|
||||
value={criterion}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value as Criterion;
|
||||
setCriterion(v);
|
||||
setSelectedCaseId("");
|
||||
}}
|
||||
className="h-10 w-[180px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
|
||||
>
|
||||
<option value="">유사기준선택</option>
|
||||
<option value="supplyAmt">공급량</option>
|
||||
<option value="treatment">처리공법</option>
|
||||
<option value="usePurpose">이용용도</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 상세정보 */}
|
||||
<div className="mt-6">
|
||||
<div className="mb-2 text-lg font-semibold text-neutral-900">
|
||||
상세정보
|
||||
{/* 리스트 영역 */}
|
||||
<div className="border border-[#C9C9C9] bg-white">
|
||||
{!showList ? (
|
||||
<div className="grid min-h-[260px] place-items-center bg-emerald-50/30">
|
||||
<div className="text-neutral-500">유사기준을 선택해주세요.</div>
|
||||
</div>
|
||||
|
||||
{/* 1) 보증수질 */}
|
||||
<div className="overflow-hidden border border-[#C9C9C9]">
|
||||
) : !hasRows ? (
|
||||
<div className="grid min-h-[260px] place-items-center bg-emerald-50/30">
|
||||
<div className="text-neutral-500">조회 결과가 없습니다.</div>
|
||||
</div>
|
||||
) : (
|
||||
// 여기만 스크롤: rows가 4개/더 많아져서 높이를 넘으면 자동 스크롤 생성
|
||||
<div className="max-h-[300px] overflow-y-auto overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
{/* thead sticky: bg + shadow + z-index로 겹침/투명 방지 */}
|
||||
<thead className="sticky top-0 z-20 bg-[#EAF5F5] shadow-sm">
|
||||
<tr>
|
||||
<th colSpan={13} className={thBase}>
|
||||
보증수질
|
||||
<th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
|
||||
선택
|
||||
</th>
|
||||
<th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
|
||||
사업명
|
||||
</th>
|
||||
<th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
|
||||
사업기간
|
||||
</th>
|
||||
|
||||
<th colSpan={3} className={`${thBase} bg-[#EAF5F5]`}>
|
||||
공급처
|
||||
</th>
|
||||
<th colSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
|
||||
수요처
|
||||
</th>
|
||||
<th colSpan={6} className={`${thBase} bg-[#EAF5F5]`}>
|
||||
재이용시설
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowSpan={2} className={thBase}>
|
||||
총대장균군수<br />(개/100ml)
|
||||
<th className={`${thBase} bg-[#EAF5F5]`}>시설<br/>종류</th>
|
||||
<th className={`${thBase} bg-[#EAF5F5]`}>공급처명</th>
|
||||
<th className={`${thBase} bg-[#EAF5F5]`}>
|
||||
시설용량
|
||||
<br />
|
||||
(m³/일)
|
||||
</th>
|
||||
<th rowSpan={2} className={thBase}>
|
||||
용도별 결합 잔류염소<br />(mg/L)
|
||||
|
||||
<th className={`${thBase} bg-[#EAF5F5]`}>수요처명</th>
|
||||
<th className={`${thBase} bg-[#EAF5F5]`}>주소</th>
|
||||
|
||||
<th className={`${thBase} bg-[#EAF5F5]`}>
|
||||
시설용량
|
||||
<br />
|
||||
(m³/일)
|
||||
</th>
|
||||
<th rowSpan={2} className={thBase}>
|
||||
탁도<br />(NTU)
|
||||
<th className={`${thBase} bg-[#EAF5F5]`}>
|
||||
관로
|
||||
<br />
|
||||
(km)
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className={thBase}>
|
||||
생물학적<br />산소요구량(BOD)(mg/L)
|
||||
</th>
|
||||
<th className={thBase}>냄새</th>
|
||||
<th className={thBase}>색도(도)</th>
|
||||
<th className={thBase}>
|
||||
총질소<br />(T-N)(mg/L)
|
||||
</th>
|
||||
<th className={thBase}>
|
||||
총인<br />(T-P)(mg/L)
|
||||
</th>
|
||||
<th className={thBase}>
|
||||
수소이온<br />농도(pH)
|
||||
</th>
|
||||
<th className={thBase}>
|
||||
염화물<br />(mgCL/L)
|
||||
</th>
|
||||
<th className={thBase}>
|
||||
전기전도도<br />(μs/cm)
|
||||
</th>
|
||||
<th className={thBase}>
|
||||
비고
|
||||
<th className={`${thBase} bg-[#EAF5F5]`}>용도</th>
|
||||
|
||||
<th className={`${thBase} bg-[#EAF5F5]`}>
|
||||
공급량
|
||||
<br />
|
||||
(m³/일)
|
||||
</th>
|
||||
<th className={`${thBase} bg-[#EAF5F5]`}>처리공법</th>
|
||||
<th className={`${thBase} bg-[#EAF5F5]`}>이용용도</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.coliform ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.residualCl ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.turbidity ?? "-"}
|
||||
</td>
|
||||
{rows.map((r, idx) => {
|
||||
const isFirst = groupInfo.firstIndex.get(r.caseId) === idx;
|
||||
const rowSpan = groupInfo.counts.get(r.caseId) ?? 1;
|
||||
const selected = selectedCaseId === r.caseId;
|
||||
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.bod ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.odor ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.color ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.tn ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.tp ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.ph ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.chloride ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.ec ?? "-"}
|
||||
</td>
|
||||
const supplyAmtCls = criterion === "supplyAmt" ? highlightTd : "";
|
||||
const treatmentCls = criterion === "treatment" ? highlightTd : "";
|
||||
const usePurposeCls = criterion === "usePurpose" ? highlightTd : "";
|
||||
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{selectedDetail?.note ?? "-"}
|
||||
</td>
|
||||
</tr>
|
||||
return (
|
||||
<tr
|
||||
key={`${r.caseId}-${idx}`}
|
||||
className={[
|
||||
"cursor-pointer hover:bg-neutral-50",
|
||||
selected ? "bg-sky-50" : "",
|
||||
].join(" ")}
|
||||
onClick={() => setSelectedCaseId(r.caseId)}
|
||||
>
|
||||
{isFirst ? (
|
||||
<>
|
||||
<td className={`${tdBase} text-center`} rowSpan={rowSpan}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected}
|
||||
readOnly
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`} rowSpan={rowSpan}>
|
||||
{r.projectName ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`} rowSpan={rowSpan}>
|
||||
{r.period ?? "-"}
|
||||
</td>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<td className={`${tdBase} text-center`}>{r.supplyFacilityType ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{r.supplyName ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{formatNumber(r.supplyCapacity)}</td>
|
||||
|
||||
<td className={`${tdBase} text-center`}>{r.demandName ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{r.demandAddress ?? "-"}</td>
|
||||
|
||||
<td className={`${tdBase} text-center`}>{formatNumber(r.facilityCapacity)}</td>
|
||||
<td className={`${tdBase} text-center`}>{formatNumber(r.pipeKm)}</td>
|
||||
<td className={tdBase}>{r.purpose ?? "-"}</td>
|
||||
|
||||
<td className={`${tdBase} text-center ${supplyAmtCls}`}>
|
||||
{formatNumber(r.supplyAmt)}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center ${treatmentCls}`}>
|
||||
{r.treatment ?? "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center ${usePurposeCls}`}>
|
||||
{r.usePurpose ?? "-"}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 2) 사업비 */}
|
||||
<div className="mt-4 overflow-hidden border border-[#C9C9C9]">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={14} className={thBase}>
|
||||
소요사업비(백만원)
|
||||
</th>
|
||||
<th colSpan={5} className={thBase}>
|
||||
재원조달계획(백만원)
|
||||
</th>
|
||||
<th colSpan={5} className={thBase}>
|
||||
사업비 정산(백만원)
|
||||
</th>
|
||||
</tr>
|
||||
<hr className="my-6 border-y-[1px] border-[#C9C9C9]" />
|
||||
|
||||
<tr>
|
||||
{/* 소요사업비 */}
|
||||
<th rowSpan={2} className={thBase}>총</th>
|
||||
<th colSpan={2} className={thBase}>토목</th>
|
||||
<th rowSpan={2} className={thBase}>건축</th>
|
||||
<th rowSpan={2} className={thBase}>기계</th>
|
||||
<th rowSpan={2} className={thBase}>전기<br />·계측</th>
|
||||
<th rowSpan={2} className={thBase}>GIS<br />DB</th>
|
||||
<th rowSpan={2} className={thBase}>CCTV</th>
|
||||
<th rowSpan={2} className={thBase}>시공 및 준공</th>
|
||||
<th rowSpan={2} className={thBase}>폐기물</th>
|
||||
<th rowSpan={2} className={thBase}>설계비</th>
|
||||
<th rowSpan={2} className={thBase}>감리비</th>
|
||||
<th rowSpan={2} className={thBase}>시설부대</th>
|
||||
<th rowSpan={2} className={thBase}>기타</th>
|
||||
{/* 상세정보 */}
|
||||
<div className="mt-0">
|
||||
<div className="mb-2 text-lg font-semibold text-neutral-900">상세정보</div>
|
||||
|
||||
{/* 재원조달 */}
|
||||
<th rowSpan={2} className={thBase}>총</th>
|
||||
<th rowSpan={2} className={thBase}>국비</th>
|
||||
<th rowSpan={2} className={thBase}>지방비</th>
|
||||
<th rowSpan={2} className={thBase}>원인자부담</th>
|
||||
<th rowSpan={2} className={thBase}>국고비율</th>
|
||||
{/* 1) 보증수질 */}
|
||||
<div className="overflow-hidden border border-[#C9C9C9]">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={13} className={thBase}>
|
||||
보증수질
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowSpan={2} className={thBase}>
|
||||
총대장균군수<br />(개/100ml)
|
||||
</th>
|
||||
<th rowSpan={2} className={thBase}>
|
||||
용도별 결합 잔류염소<br />(mg/L)
|
||||
</th>
|
||||
<th rowSpan={2} className={thBase}>
|
||||
탁도<br />(NTU)
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className={thBase}>
|
||||
생물학적<br />산소요구량(BOD)(mg/L)
|
||||
</th>
|
||||
<th className={thBase}>냄새</th>
|
||||
<th className={thBase}>색도(도)</th>
|
||||
<th className={thBase}>총질소<br />(T-N)(mg/L)</th>
|
||||
<th className={thBase}>총인<br />(T-P)(mg/L)</th>
|
||||
<th className={thBase}>수소이온<br />농도(pH)</th>
|
||||
<th className={thBase}>염화물<br />(mgCL/L)</th>
|
||||
<th className={thBase}>전기전도도<br />(μs/cm)</th>
|
||||
<th className={thBase}>비고</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{/* 정산 */}
|
||||
<th rowSpan={2} className={thBase}>총</th>
|
||||
<th rowSpan={2} className={thBase}>국비</th>
|
||||
<th rowSpan={2} className={thBase}>지방비</th>
|
||||
<th rowSpan={2} className={thBase}>원인자부담</th>
|
||||
<th rowSpan={2} className={thBase}>국고비율</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.coliform ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.residualCl ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.turbidity ?? "-"}</td>
|
||||
|
||||
<tr>
|
||||
<th className={thBase}>재이용<br />시설</th>
|
||||
<th className={thBase}>관로</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.bod ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.odor ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.color ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.tn ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.tp ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.ph ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.chloride ?? "-"}</td>
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.ec ?? "-"}</td>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
{/* 소요사업비 */}
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costTotal != null
|
||||
? formatNumber(selectedDetail.costTotal)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costFacility != null
|
||||
? formatNumber(selectedDetail.costFacility)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costPipe != null
|
||||
? formatNumber(selectedDetail.costPipe)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costDesign != null
|
||||
? formatNumber(selectedDetail.costDesign)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costSupervision != null
|
||||
? formatNumber(selectedDetail.costSupervision)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costOther != null
|
||||
? formatNumber(selectedDetail.costOther)
|
||||
: "-"}
|
||||
</td>
|
||||
|
||||
{/* 재원조달 */}
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingTotal != null
|
||||
? formatNumber(selectedDetail.fundingTotal)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingNational != null
|
||||
? formatNumber(selectedDetail.fundingNational)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingLocal != null
|
||||
? formatNumber(selectedDetail.fundingLocal)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingSelf != null
|
||||
? formatNumber(selectedDetail.fundingSelf)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{typeof selectedDetail?.fundingRate === "number"
|
||||
? `${selectedDetail.fundingRate}%`
|
||||
: "-"}
|
||||
</td>
|
||||
|
||||
{/* 정산(필드 없으면 동일 값 표시) */}
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingTotal != null
|
||||
? formatNumber(selectedDetail.fundingTotal)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingNational != null
|
||||
? formatNumber(selectedDetail.fundingNational)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingLocal != null
|
||||
? formatNumber(selectedDetail.fundingLocal)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingSelf != null
|
||||
? formatNumber(selectedDetail.fundingSelf)
|
||||
: "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{typeof selectedDetail?.fundingRate === "number"
|
||||
? `${selectedDetail.fundingRate}%`
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{!selectedCaseId && showList ? (
|
||||
<div className="mt-3 text-sm text-neutral-500">
|
||||
리스트에서 사업을 선택하면 상세정보가 표시됩니다.
|
||||
</div>
|
||||
) : null}
|
||||
<td className={`${tdBase} text-center`}>{selectedDetail?.note ?? "-"}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 2) 사업비 */}
|
||||
<div className="mt-4 overflow-hidden border border-[#C9C9C9]">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={14} className={thBase}>
|
||||
소요사업비(백만원)
|
||||
</th>
|
||||
<th colSpan={5} className={thBase}>
|
||||
재원조달계획(백만원)
|
||||
</th>
|
||||
<th colSpan={5} className={thBase}>
|
||||
사업비 정산(백만원)
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
{/* 소요사업비 */}
|
||||
<th rowSpan={2} className={thBase}>총</th>
|
||||
<th colSpan={2} className={thBase}>토목</th>
|
||||
<th rowSpan={2} className={thBase}>건축</th>
|
||||
<th rowSpan={2} className={thBase}>기계</th>
|
||||
<th rowSpan={2} className={thBase}>전기<br />·계측</th>
|
||||
<th rowSpan={2} className={thBase}>GIS<br />DB</th>
|
||||
<th rowSpan={2} className={thBase}>CCTV</th>
|
||||
<th rowSpan={2} className={thBase}>시공 및 준공</th>
|
||||
<th rowSpan={2} className={thBase}>폐기물</th>
|
||||
<th rowSpan={2} className={thBase}>설계비</th>
|
||||
<th rowSpan={2} className={thBase}>감리비</th>
|
||||
<th rowSpan={2} className={thBase}>시설부대</th>
|
||||
<th rowSpan={2} className={thBase}>기타</th>
|
||||
|
||||
{/* 재원조달 */}
|
||||
<th rowSpan={2} className={thBase}>총</th>
|
||||
<th rowSpan={2} className={thBase}>국비</th>
|
||||
<th rowSpan={2} className={thBase}>지방비</th>
|
||||
<th rowSpan={2} className={thBase}>원인자부담</th>
|
||||
<th rowSpan={2} className={thBase}>국고비율</th>
|
||||
|
||||
{/* 정산 */}
|
||||
<th rowSpan={2} className={thBase}>총</th>
|
||||
<th rowSpan={2} className={thBase}>국비</th>
|
||||
<th rowSpan={2} className={thBase}>지방비</th>
|
||||
<th rowSpan={2} className={thBase}>원인자부담</th>
|
||||
<th rowSpan={2} className={thBase}>국고비율</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className={thBase}>재이용<br />시설</th>
|
||||
<th className={thBase}>관로</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
{/* 소요사업비 */}
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costTotal != null ? formatNumber(selectedDetail.costTotal) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costFacility != null ? formatNumber(selectedDetail.costFacility) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costPipe != null ? formatNumber(selectedDetail.costPipe) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costDesign != null ? formatNumber(selectedDetail.costDesign) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costSupervision != null ? formatNumber(selectedDetail.costSupervision) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>-</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.costOther != null ? formatNumber(selectedDetail.costOther) : "-"}
|
||||
</td>
|
||||
|
||||
{/* 재원조달 */}
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingTotal != null ? formatNumber(selectedDetail.fundingTotal) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingNational != null ? formatNumber(selectedDetail.fundingNational) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingLocal != null ? formatNumber(selectedDetail.fundingLocal) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingSelf != null ? formatNumber(selectedDetail.fundingSelf) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{typeof selectedDetail?.fundingRate === "number" ? `${selectedDetail.fundingRate}%` : "-"}
|
||||
</td>
|
||||
|
||||
{/* 정산(필드 없으면 동일 값 표시) */}
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingTotal != null ? formatNumber(selectedDetail.fundingTotal) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingNational != null ? formatNumber(selectedDetail.fundingNational) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingLocal != null ? formatNumber(selectedDetail.fundingLocal) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-right`}>
|
||||
{selectedDetail?.fundingSelf != null ? formatNumber(selectedDetail.fundingSelf) : "-"}
|
||||
</td>
|
||||
<td className={`${tdBase} text-center`}>
|
||||
{typeof selectedDetail?.fundingRate === "number" ? `${selectedDetail.fundingRate}%` : "-"}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{!selectedCaseId && showList ? (
|
||||
<div className="mt-3 text-sm text-neutral-500">
|
||||
리스트에서 사업을 선택하면 상세정보가 표시됩니다.
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return createPortal(ui, document.body);
|
||||
|
||||
@@ -187,71 +187,124 @@ export default function DemandRegisterPage() {
|
||||
|
||||
// 샘플 데이터
|
||||
const similarRows: SimilarCaseRow[] = [
|
||||
{
|
||||
caseId: "A",
|
||||
projectName: "OO시 물 재이용(빗물, 중수도)\n시설 설치사업",
|
||||
period: "2020.01.\n~2025.05.",
|
||||
supplyFacilityType: "중수도",
|
||||
supplyName: "OO에코복지타운",
|
||||
supplyCapacity: 50,
|
||||
demandName: "OO에코복지타운",
|
||||
demandAddress: "OO시 수성로 192",
|
||||
facilityCapacity: 50,
|
||||
pipeKm: 0,
|
||||
purpose: "청소, 화장실,\n조경",
|
||||
supplyAmt: 50,
|
||||
treatment: "MBLM",
|
||||
usePurpose: "청소,화장실",
|
||||
},
|
||||
{
|
||||
caseId: "A",
|
||||
projectName: "OO시 물 재이용(빗물, 중수도)\n시설 설치사업",
|
||||
period: "2020.01.\n~2025.05.",
|
||||
supplyFacilityType: "중수도",
|
||||
supplyName: "OO스포츠센터",
|
||||
supplyCapacity: 50,
|
||||
demandName: "OO스포츠센터",
|
||||
demandAddress: "OO시 경기둥로 33",
|
||||
facilityCapacity: 50,
|
||||
pipeKm: 0,
|
||||
purpose: "청소, 화장실,\n조경",
|
||||
supplyAmt: 50,
|
||||
treatment: "MBLM",
|
||||
usePurpose: "청소,화장실",
|
||||
},
|
||||
{
|
||||
caseId: "B",
|
||||
projectName: "OO 염성저수지 하수처리수\n재이용사업",
|
||||
period: "2019.12\n~2026.1",
|
||||
supplyFacilityType: "하수",
|
||||
supplyName: "OO 3.4단계 공공하수처리시설",
|
||||
supplyCapacity: 70000,
|
||||
demandName: "OO천",
|
||||
demandAddress: "-",
|
||||
facilityCapacity: 0,
|
||||
pipeKm: 3,
|
||||
purpose: "하천 등\n유지용수",
|
||||
supplyAmt: 2300,
|
||||
treatment: "탈황,총인,\n생물여과,소독",
|
||||
usePurpose: "하천 등\n유지용수",
|
||||
},
|
||||
{
|
||||
caseId: "B",
|
||||
projectName: "OO 염성저수지 하수처리수\n재이용사업",
|
||||
period: "2019.12\n~2026.1",
|
||||
supplyFacilityType: "하수",
|
||||
supplyName: "OO 3.4단계 공공하수처리시설",
|
||||
supplyCapacity: 70000,
|
||||
demandName: "OO저수지",
|
||||
demandAddress: "-",
|
||||
facilityCapacity: 0,
|
||||
pipeKm: 5,
|
||||
purpose: "하천 등\n유지용수",
|
||||
supplyAmt: 7700,
|
||||
treatment: "탈황,총인,\n생물여과,소독",
|
||||
usePurpose: "하천 등\n유지용수",
|
||||
},
|
||||
];
|
||||
// ---------------- A (2행) ----------------
|
||||
{
|
||||
caseId: "A",
|
||||
projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
|
||||
period: "2020.01.~2025.05.",
|
||||
supplyFacilityType: "중수도",
|
||||
supplyName: "OO폐수재이용",
|
||||
supplyCapacity: 50,
|
||||
|
||||
demandName: "OO시체육센터",
|
||||
demandAddress: "OO시 수성로 192",
|
||||
|
||||
facilityCapacity: 50,
|
||||
pipeKm: 3,
|
||||
purpose: "조경",
|
||||
supplyAmt: 50,
|
||||
treatment: "MBLM",
|
||||
usePurpose: "청소, 화장실",
|
||||
},
|
||||
// A의 공급처 row 추가(=표 1행 추가) → 나머지 컬럼도 같이 채움
|
||||
{
|
||||
caseId: "A",
|
||||
projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
|
||||
period: "2020.01.~2025.05.",
|
||||
supplyFacilityType: "중수도",
|
||||
supplyName: "OO스포츠센터",
|
||||
supplyCapacity: 30,
|
||||
|
||||
demandName: "OO시체육센터",
|
||||
demandAddress: "OO시 수성로 192",
|
||||
|
||||
facilityCapacity: 50,
|
||||
pipeKm: 3,
|
||||
purpose: "조경",
|
||||
supplyAmt: 50,
|
||||
treatment: "MBLM",
|
||||
usePurpose: "청소, 화장실",
|
||||
},
|
||||
|
||||
// ---------------- B (2행) ----------------
|
||||
{
|
||||
caseId: "B",
|
||||
projectName: "OO 염성저수지 하수처리수 재이용사업",
|
||||
period: "2019.12~2026.1",
|
||||
supplyFacilityType: "하수",
|
||||
supplyName: "OO3.4단계 공공하수처리시설",
|
||||
supplyCapacity: 70000,
|
||||
|
||||
demandName: "OO천",
|
||||
demandAddress: "-",
|
||||
|
||||
facilityCapacity: 0,
|
||||
pipeKm: 3,
|
||||
purpose: "하천 등 유지용수",
|
||||
supplyAmt: 2300,
|
||||
treatment: "탈황, 총인, 생물산화, 소독",
|
||||
usePurpose: "하천 등 유지용수",
|
||||
},
|
||||
// B의 공급처 row 추가(=표 1행 추가)
|
||||
{
|
||||
caseId: "B",
|
||||
projectName: "OO 염성저수지 하수처리수 재이용사업",
|
||||
period: "2019.12~2026.1",
|
||||
supplyFacilityType: "하수",
|
||||
supplyName: "OO3.4단계 공공하수처리시설(2라인)",
|
||||
supplyCapacity: 70000,
|
||||
|
||||
demandName: "OO저수지",
|
||||
demandAddress: "-",
|
||||
|
||||
facilityCapacity: 0,
|
||||
pipeKm: 5,
|
||||
purpose: "하천 등 유지용수",
|
||||
supplyAmt: 7700,
|
||||
treatment: "탈황, 총인, 생물산화, 소독",
|
||||
usePurpose: "하천 등 유지용수",
|
||||
},
|
||||
|
||||
// ---------------- C (1행) ----------------
|
||||
{
|
||||
caseId: "C",
|
||||
projectName: "OO 산업단지 공업용수 재이용사업",
|
||||
period: "2021.03~2024.12",
|
||||
supplyFacilityType: "하수",
|
||||
supplyName: "OO공공하수처리장",
|
||||
supplyCapacity: 15000,
|
||||
|
||||
demandName: "OO산업단지",
|
||||
demandAddress: "OO시 산업로 25",
|
||||
|
||||
facilityCapacity: 5000,
|
||||
pipeKm: 4,
|
||||
purpose: "공업용수",
|
||||
supplyAmt: 5000,
|
||||
treatment: "UF + RO",
|
||||
usePurpose: "공업용수",
|
||||
},
|
||||
|
||||
// ---------------- D (1행) ----------------
|
||||
{
|
||||
caseId: "D",
|
||||
projectName: "OO 공원 조경용수 재이용사업",
|
||||
period: "2018.05~2022.11",
|
||||
supplyFacilityType: "중수도",
|
||||
supplyName: "OO정수장",
|
||||
supplyCapacity: 8000,
|
||||
|
||||
demandName: "OO중앙공원",
|
||||
demandAddress: "OO시 공원로 88",
|
||||
|
||||
facilityCapacity: 1200,
|
||||
pipeKm: 2,
|
||||
purpose: "조경용수",
|
||||
supplyAmt: 1200,
|
||||
treatment: "모래여과",
|
||||
usePurpose: "조경",
|
||||
},
|
||||
];
|
||||
|
||||
const similarDetailsByCaseId: Record<string, SimilarCaseDetail> = {
|
||||
A: {
|
||||
@@ -304,6 +357,56 @@ export default function DemandRegisterPage() {
|
||||
fundingSelf: 0,
|
||||
fundingRate: 0,
|
||||
},
|
||||
C: {
|
||||
coliform: "불검출",
|
||||
residualCl: "0.2이상",
|
||||
turbidity: "1.5이하",
|
||||
bod: "4.0이하",
|
||||
odor: "불쾌하지않을것",
|
||||
color: "10이하",
|
||||
tn: "-",
|
||||
tp: "-",
|
||||
ph: "5.8~8.5",
|
||||
chloride: "-",
|
||||
ec: "-",
|
||||
note: "-",
|
||||
costTotal: 4305,
|
||||
costFacility: 3518,
|
||||
costPipe: 0,
|
||||
costDesign: 350,
|
||||
costSupervision: 417,
|
||||
costOther: 12,
|
||||
fundingTotal: 4305,
|
||||
fundingNational: 3104,
|
||||
fundingLocal: 1291,
|
||||
fundingSelf: 0,
|
||||
fundingRate: 70.0,
|
||||
},
|
||||
D: {
|
||||
coliform: "-",
|
||||
residualCl: "-",
|
||||
turbidity: "-",
|
||||
bod: "-",
|
||||
odor: "-",
|
||||
color: "-",
|
||||
tn: "-",
|
||||
tp: "-",
|
||||
ph: "-",
|
||||
chloride: "-",
|
||||
ec: "-",
|
||||
note: "-",
|
||||
costTotal: 0,
|
||||
costFacility: 0,
|
||||
costPipe: 0,
|
||||
costDesign: 0,
|
||||
costSupervision: 0,
|
||||
costOther: 0,
|
||||
fundingTotal: 0,
|
||||
fundingNational: 0,
|
||||
fundingLocal: 0,
|
||||
fundingSelf: 0,
|
||||
fundingRate: 0,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -528,8 +631,8 @@ export default function DemandRegisterPage() {
|
||||
<SimilarCaseModal
|
||||
open={openSimilar}
|
||||
onClose={() => setOpenSimilar(false)}
|
||||
rows={rows}
|
||||
detailsByCaseId={detailsByCaseId}
|
||||
rows={similarRows}
|
||||
detailsByCaseId={similarDetailsByCaseId}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user