636 lines
22 KiB
TypeScript
636 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import {
|
|
StandardPopupLayout,
|
|
UITab,
|
|
type UiHeadProps,
|
|
} from "@common/business_components";
|
|
|
|
import { Button } from "@common/components";
|
|
import LoadingOverlay from "@/components/ui/LoadingBar";
|
|
import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
|
|
import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
|
|
import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
|
|
|
|
import {
|
|
WINDOW_POPUP_MESSAGE_TYPE,
|
|
type WindowPopupContentProps,
|
|
} from "@/features/windowPopup/model/types";
|
|
import {
|
|
fetchWaterRiskAreas,
|
|
fetchWaterRiskMapView,
|
|
fetchWaterRiskResults,
|
|
} from "./waterRiskClient";
|
|
import {
|
|
buildWaterRiskStatusLabel,
|
|
EMPTY_WATER_RISK_SESSION_SNAPSHOT,
|
|
type WaterRiskAreaOption,
|
|
type WaterRiskResultPage,
|
|
type WaterRiskResultRow,
|
|
type WaterRiskSessionSnapshot,
|
|
} from "./waterRiskTypes";
|
|
|
|
type WaterRiskResultMode = "current" | "history";
|
|
|
|
type ResultFilters = {
|
|
startDate: string;
|
|
endDate: string;
|
|
ctpvCd: string;
|
|
sggCd: string;
|
|
areaId: string;
|
|
riskStatus: "ALL" | "DANGER" | "NORMAL";
|
|
};
|
|
|
|
const WATER_RISK_PAGE_SIZE = 10;
|
|
const EMPTY_RESULT_PAGE: WaterRiskResultPage = {
|
|
items: [],
|
|
total: 0,
|
|
page: 0,
|
|
size: WATER_RISK_PAGE_SIZE,
|
|
totalPages: 0,
|
|
};
|
|
|
|
type WaterRiskTableRow = Record<string, unknown> & {
|
|
sourceRow: WaterRiskResultRow;
|
|
rowNo: number;
|
|
sidoName: string;
|
|
sggName: string;
|
|
areaName: string;
|
|
currentAccumRainQty: string;
|
|
forecastRainQty: string;
|
|
maxRainIntensity: string;
|
|
runoffFlowQty: string;
|
|
conveyQty: string;
|
|
analysisDisplay: string;
|
|
riskStatus: WaterRiskResultRow["riskStatus"];
|
|
};
|
|
|
|
const CURRENT_RESULT_HEADLIST: UiHeadProps[] = [
|
|
{ id: "rowNo", title: "순번", widthPercent: 6 },
|
|
{ id: "sidoName", title: "시도", widthPercent: 9 },
|
|
{ id: "sggName", title: "시군구", widthPercent: 9 },
|
|
{ id: "areaName", title: "중점관리지역", widthPercent: 14 },
|
|
{
|
|
id: "currentAccumRainQty",
|
|
title: "현재누적강우량(mm)",
|
|
widthPercent: 13,
|
|
align: "right",
|
|
},
|
|
{
|
|
id: "forecastRainQty",
|
|
title: "예측강우량(mm)",
|
|
widthPercent: 12,
|
|
align: "right",
|
|
},
|
|
{
|
|
id: "runoffFlowQty",
|
|
title: "유출유량(㎥/s)",
|
|
widthPercent: 11,
|
|
align: "right",
|
|
},
|
|
{
|
|
id: "conveyQty",
|
|
title: "통수량(㎥/s)",
|
|
widthPercent: 10,
|
|
align: "right",
|
|
},
|
|
{ id: "analysisDisplay", title: "분석일", widthPercent: 10 },
|
|
{ id: "riskStatus", title: "통수위험", widthPercent: 7 },
|
|
];
|
|
|
|
const HISTORY_RESULT_HEADLIST: UiHeadProps[] = [
|
|
{ id: "rowNo", title: "순번", widthPercent: 6 },
|
|
{ id: "sidoName", title: "시도", widthPercent: 9 },
|
|
{ id: "sggName", title: "시군구", widthPercent: 9 },
|
|
{ id: "areaName", title: "중점관리지역", widthPercent: 15 },
|
|
{
|
|
id: "maxRainIntensity",
|
|
title: "최대강우강도(mm/hr)",
|
|
widthPercent: 15,
|
|
align: "right",
|
|
},
|
|
{
|
|
id: "runoffFlowQty",
|
|
title: "유출유량(㎥/s)",
|
|
widthPercent: 12,
|
|
align: "right",
|
|
},
|
|
{
|
|
id: "conveyQty",
|
|
title: "통수량(㎥/s)",
|
|
widthPercent: 11,
|
|
align: "right",
|
|
},
|
|
{ id: "analysisDisplay", title: "분석일", widthPercent: 12 },
|
|
{ id: "riskStatus", title: "통수위험", widthPercent: 11 },
|
|
];
|
|
|
|
const formatOptionalNumber = (
|
|
value: number | null | undefined,
|
|
digits: number,
|
|
) => (value == null ? "-" : value.toFixed(digits));
|
|
|
|
/** 브라우저 로컬 날짜를 API의 yyyy-MM-dd 형식으로 변환한다. */
|
|
const formatLocalDate = (date: Date) => {
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
const day = String(date.getDate()).padStart(2, "0");
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
|
|
/** 화면을 연 날짜를 현재 위험 기본 조회일로 사용한다. */
|
|
const buildDefaultResultFilters = (): ResultFilters => {
|
|
const today = formatLocalDate(new Date());
|
|
return {
|
|
startDate: today,
|
|
endDate: today,
|
|
ctpvCd: "ALL",
|
|
sggCd: "ALL",
|
|
areaId: "ALL",
|
|
riskStatus: "ALL",
|
|
};
|
|
};
|
|
|
|
/** 부모 지도 창으로 통수위험 선택 메시지를 전달한다. */
|
|
const postMessageToOpener = (
|
|
type: string,
|
|
payload?: Record<string, unknown>,
|
|
) => {
|
|
if (typeof window === "undefined" || !window.opener) return;
|
|
window.opener.postMessage({ type, payload }, window.location.origin);
|
|
};
|
|
|
|
/** 위험 여부에 맞는 기존 팝업 badge 스타일을 반환한다. */
|
|
const getRiskBadgeClassName = (riskStatus: "DANGER" | "NORMAL") =>
|
|
riskStatus === "DANGER" ? "sn-popup-badge-danger" : "sn-popup-badge-normal";
|
|
|
|
/** 날짜까지 포함해 과거 이력에서도 결과 행 선택을 유일하게 식별한다. */
|
|
const buildResultRowKey = (row: WaterRiskResultRow) =>
|
|
`${row.analysisDate ?? ""}:${row.ctpvCd ?? ""}:${row.sggCd ?? ""}:${row.areaId}`;
|
|
|
|
/** 실제 통수위험 API를 조회하고 선택 결과를 부모 지도에 전달하는 팝업이다. */
|
|
export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
|
|
const initialFilters = useMemo(() => buildDefaultResultFilters(), []);
|
|
const [resultMode, setResultMode] = useState<WaterRiskResultMode>("current");
|
|
const [draftResultFilters, setDraftResultFilters] =
|
|
useState<ResultFilters>(initialFilters);
|
|
const [appliedResultFilters, setAppliedResultFilters] =
|
|
useState<ResultFilters>(initialFilters);
|
|
const [areaOptions, setAreaOptions] = useState<WaterRiskAreaOption[]>([]);
|
|
const [resultPage, setResultPage] =
|
|
useState<WaterRiskResultPage>(EMPTY_RESULT_PAGE);
|
|
const [selectedResultKey, setSelectedResultKey] = useState("");
|
|
const [resultCurrentPage, setResultCurrentPage] = useState(1);
|
|
const [reloadVersion, setReloadVersion] = useState(0);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [isMapLoading, setIsMapLoading] = useState(false);
|
|
const [noticeMessage, setNoticeMessage] = useState("");
|
|
const [errorMessage, setErrorMessage] = useState("");
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
fetchWaterRiskAreas()
|
|
.then((options) => {
|
|
if (active) setAreaOptions(options);
|
|
})
|
|
.catch((error) => {
|
|
if (!active) return;
|
|
const message =
|
|
error instanceof Error
|
|
? error.message
|
|
: "중점관리지역 목록을 조회하지 못했습니다.";
|
|
setErrorMessage(message);
|
|
});
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
setIsLoading(true);
|
|
setErrorMessage("");
|
|
fetchWaterRiskResults({
|
|
startDate: appliedResultFilters.startDate,
|
|
endDate: appliedResultFilters.endDate,
|
|
ctpvCd:
|
|
appliedResultFilters.ctpvCd === "ALL"
|
|
? undefined
|
|
: appliedResultFilters.ctpvCd,
|
|
sggCd:
|
|
appliedResultFilters.sggCd === "ALL"
|
|
? undefined
|
|
: appliedResultFilters.sggCd,
|
|
areaId:
|
|
appliedResultFilters.areaId === "ALL"
|
|
? undefined
|
|
: appliedResultFilters.areaId,
|
|
riskStatus:
|
|
appliedResultFilters.riskStatus === "ALL"
|
|
? undefined
|
|
: appliedResultFilters.riskStatus,
|
|
page: resultCurrentPage - 1,
|
|
size: WATER_RISK_PAGE_SIZE,
|
|
})
|
|
.then((page) => {
|
|
if (!active) return;
|
|
setResultPage(page);
|
|
if (page.items.length > 0) {
|
|
setSelectedResultKey(
|
|
(current) => current || buildResultRowKey(page.items[0]!),
|
|
);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
if (!active) return;
|
|
setResultPage(EMPTY_RESULT_PAGE);
|
|
setErrorMessage(
|
|
error instanceof Error
|
|
? error.message
|
|
: "통수위험 분석 결과를 조회하지 못했습니다.",
|
|
);
|
|
})
|
|
.finally(() => {
|
|
if (active) setIsLoading(false);
|
|
});
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [appliedResultFilters, reloadVersion, resultCurrentPage]);
|
|
|
|
useEffect(() => {
|
|
const handleMessage = (event: MessageEvent) => {
|
|
if (event.origin !== window.location.origin) return;
|
|
if (event.data?.type !== WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SYNC)
|
|
return;
|
|
|
|
const nextSnapshot = (event.data.payload ??
|
|
EMPTY_WATER_RISK_SESSION_SNAPSHOT) as WaterRiskSessionSnapshot;
|
|
if (nextSnapshot.selectedAreaId) {
|
|
const matchingRow = resultPage.items.find(
|
|
(row) => row.areaId === nextSnapshot.selectedAreaId,
|
|
);
|
|
if (matchingRow) setSelectedResultKey(buildResultRowKey(matchingRow));
|
|
}
|
|
};
|
|
|
|
window.addEventListener("message", handleMessage);
|
|
postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_READY);
|
|
return () => {
|
|
window.removeEventListener("message", handleMessage);
|
|
};
|
|
}, [resultPage.items]);
|
|
|
|
useEffect(() => {
|
|
if (typeof window === "undefined" || !window.resizeTo) return;
|
|
window.resizeTo(1180, 720);
|
|
}, []);
|
|
|
|
const ctpvOptions = useMemo(() => {
|
|
const unique = new Map<string, string>();
|
|
areaOptions.forEach((option) => {
|
|
if (option.ctpvCd)
|
|
unique.set(option.ctpvCd, option.ctpvName || option.ctpvCd);
|
|
});
|
|
return Array.from(unique, ([code, name]) => ({ code, name })).sort((a, b) =>
|
|
a.name.localeCompare(b.name, "ko"),
|
|
);
|
|
}, [areaOptions]);
|
|
|
|
const sggOptions = useMemo(() => {
|
|
const unique = new Map<string, string>();
|
|
areaOptions
|
|
.filter(
|
|
(option) =>
|
|
draftResultFilters.ctpvCd === "ALL" ||
|
|
option.ctpvCd === draftResultFilters.ctpvCd,
|
|
)
|
|
.forEach((option) => {
|
|
if (option.sggCd)
|
|
unique.set(option.sggCd, option.sggName || option.sggCd);
|
|
});
|
|
return Array.from(unique, ([code, name]) => ({ code, name })).sort((a, b) =>
|
|
a.name.localeCompare(b.name, "ko"),
|
|
);
|
|
}, [areaOptions, draftResultFilters.ctpvCd]);
|
|
|
|
const filteredAreaOptions = useMemo(
|
|
() =>
|
|
areaOptions.filter(
|
|
(option) =>
|
|
(draftResultFilters.ctpvCd === "ALL" ||
|
|
option.ctpvCd === draftResultFilters.ctpvCd) &&
|
|
(draftResultFilters.sggCd === "ALL" ||
|
|
option.sggCd === draftResultFilters.sggCd),
|
|
),
|
|
[areaOptions, draftResultFilters.ctpvCd, draftResultFilters.sggCd],
|
|
);
|
|
|
|
const resultListTitle =
|
|
resultMode === "current"
|
|
? "통수위험 분석 결과 목록"
|
|
: "통수위험 과거 이력 목록";
|
|
const tableRows = useMemo<WaterRiskTableRow[]>(
|
|
() =>
|
|
resultPage.items.map((row) => {
|
|
const representativePipe =
|
|
row.pipeSummaries.find((pipe) => pipe.riskStatus === "DANGER") ??
|
|
row.pipeSummaries[0];
|
|
|
|
return {
|
|
sourceRow: row,
|
|
rowNo: 0,
|
|
sidoName: row.sidoName || "-",
|
|
sggName: row.sggName || "-",
|
|
areaName: row.areaName,
|
|
currentAccumRainQty: formatOptionalNumber(row.currentAccumRainQty, 1),
|
|
forecastRainQty: formatOptionalNumber(row.forecastRainQty, 1),
|
|
maxRainIntensity: formatOptionalNumber(row.maxRainIntensity, 1),
|
|
runoffFlowQty: formatOptionalNumber(
|
|
representativePipe?.runoffFlowQty,
|
|
2,
|
|
),
|
|
conveyQty: formatOptionalNumber(representativePipe?.conveyQty, 3),
|
|
analysisDisplay: row.maxFloodingAt || row.analysisDate || "-",
|
|
riskStatus: row.riskStatus,
|
|
};
|
|
}),
|
|
[resultPage.items],
|
|
);
|
|
|
|
/** 검증된 검색조건을 적용하고 첫 페이지를 새로 조회한다. */
|
|
const handleApplyResultFilters = () => {
|
|
if (!draftResultFilters.startDate || !draftResultFilters.endDate) {
|
|
setNoticeMessage("조회 시작일과 종료일을 입력해야 합니다.");
|
|
return;
|
|
}
|
|
if (draftResultFilters.startDate > draftResultFilters.endDate) {
|
|
setNoticeMessage("조회 시작일은 종료일보다 늦을 수 없습니다.");
|
|
return;
|
|
}
|
|
|
|
setResultCurrentPage(1);
|
|
setAppliedResultFilters({ ...draftResultFilters });
|
|
setReloadVersion((version) => version + 1);
|
|
setNoticeMessage("통수위험 분석 결과를 조회했습니다.");
|
|
};
|
|
|
|
/** 현재 위험과 과거 이력 표시열만 전환하고 같은 API 검색조건은 유지한다. */
|
|
const handleChangeResultMode = (mode: WaterRiskResultMode) => {
|
|
setResultMode(mode);
|
|
setResultCurrentPage(1);
|
|
setNoticeMessage("");
|
|
};
|
|
|
|
/** 선택 행의 실제 GeoJSON을 조회한 뒤 부모 지도 창에 전달한다. */
|
|
const handleSelectResultRow = async (row: WaterRiskResultRow) => {
|
|
setSelectedResultKey(buildResultRowKey(row));
|
|
setIsMapLoading(true);
|
|
setErrorMessage("");
|
|
try {
|
|
const mapView = await fetchWaterRiskMapView(row);
|
|
postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SELECT_RESULT, {
|
|
areaId: row.areaId,
|
|
resultRow: row,
|
|
mapView,
|
|
});
|
|
setNoticeMessage(`${row.areaName}을 지도에서 강조했습니다.`);
|
|
} catch (error) {
|
|
setErrorMessage(
|
|
error instanceof Error
|
|
? error.message
|
|
: "통수위험 지도 결과를 조회하지 못했습니다.",
|
|
);
|
|
} finally {
|
|
setIsMapLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<StandardPopupLayout title={windowPopupDefinitions.flowRiskPopup.title}>
|
|
<section
|
|
className={`relative flex min-h-0 flex-1 flex-col gap-[1.2rem] ${
|
|
tableRows.length === 0
|
|
? "[&_.standard-data-table>.card]:!flex [&_.standard-data-table>.card]:!min-h-0 [&_.standard-data-table>.card]:!flex-1 [&_.standard-data-table>.card]:!flex-col [&_.standard-data-table]:!flex [&_.standard-data-table]:!min-h-0 [&_.standard-data-table]:!flex-1 [&_.standard-data-table]:!flex-col [&_.standard-data-table__scroll>div]:!h-full [&_.standard-data-table__scroll]:!min-h-96 [&_.standard-data-table__scroll]:!flex-1"
|
|
: ""
|
|
}`}
|
|
>
|
|
<LoadingOverlay isLoading={isLoading || isMapLoading} />
|
|
<UITab
|
|
variant="underline"
|
|
defaultValue="current"
|
|
tabList={[
|
|
{ value: "current", label: "현재 위험" },
|
|
{ value: "history", label: "과거 이력" },
|
|
]}
|
|
onValueChange={(value) =>
|
|
handleChangeResultMode(value as WaterRiskResultMode)
|
|
}
|
|
/>
|
|
|
|
<PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
|
|
<label className="flex shrink-0 items-center gap-2">
|
|
<div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
|
|
{resultMode === "current" ? "조회기간" : "강우발생일"}
|
|
</div>
|
|
<span className="flex shrink-0 items-center gap-2">
|
|
<input
|
|
type="date"
|
|
value={draftResultFilters.startDate}
|
|
onChange={(event) =>
|
|
setDraftResultFilters((current) => ({
|
|
...current,
|
|
startDate: event.target.value,
|
|
}))
|
|
}
|
|
aria-label="조회 시작일"
|
|
className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
<span className="text-xl font-medium text-label">~</span>
|
|
<input
|
|
type="date"
|
|
value={draftResultFilters.endDate}
|
|
onChange={(event) =>
|
|
setDraftResultFilters((current) => ({
|
|
...current,
|
|
endDate: event.target.value,
|
|
}))
|
|
}
|
|
aria-label="조회 종료일"
|
|
className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
</span>
|
|
</label>
|
|
|
|
<label className="flex shrink-0 items-center gap-2">
|
|
<div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
|
|
시도
|
|
</div>
|
|
<select
|
|
value={draftResultFilters.ctpvCd}
|
|
onChange={(event) =>
|
|
setDraftResultFilters((current) => ({
|
|
...current,
|
|
ctpvCd: event.target.value,
|
|
sggCd: "ALL",
|
|
areaId: "ALL",
|
|
}))
|
|
}
|
|
aria-label="시도"
|
|
className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
|
|
>
|
|
<option value="ALL">전체</option>
|
|
{ctpvOptions.map((option) => (
|
|
<option key={option.code} value={option.code}>
|
|
{option.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label className="flex shrink-0 items-center gap-2">
|
|
<div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
|
|
시군구
|
|
</div>
|
|
<select
|
|
value={draftResultFilters.sggCd}
|
|
onChange={(event) =>
|
|
setDraftResultFilters((current) => ({
|
|
...current,
|
|
sggCd: event.target.value,
|
|
areaId: "ALL",
|
|
}))
|
|
}
|
|
aria-label="시군구"
|
|
className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
|
|
>
|
|
<option value="ALL">전체</option>
|
|
{sggOptions.map((option) => (
|
|
<option key={option.code} value={option.code}>
|
|
{option.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label className="flex shrink-0 items-center gap-2">
|
|
<div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
|
|
중점관리지역
|
|
</div>
|
|
<select
|
|
value={draftResultFilters.areaId}
|
|
onChange={(event) =>
|
|
setDraftResultFilters((current) => ({
|
|
...current,
|
|
areaId: event.target.value,
|
|
}))
|
|
}
|
|
aria-label="중점관리지역"
|
|
className="h-[3.2rem] w-[18rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
|
|
>
|
|
<option value="ALL">전체</option>
|
|
{filteredAreaOptions.map((option) => (
|
|
<option
|
|
key={`${option.ctpvCd}:${option.sggCd}:${option.areaId}`}
|
|
value={option.areaId}
|
|
>
|
|
{option.areaName}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label className="flex shrink-0 items-center gap-2">
|
|
<div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
|
|
위험상태
|
|
</div>
|
|
<select
|
|
value={draftResultFilters.riskStatus}
|
|
onChange={(event) =>
|
|
setDraftResultFilters((current) => ({
|
|
...current,
|
|
riskStatus: event.target.value as ResultFilters["riskStatus"],
|
|
}))
|
|
}
|
|
aria-label="위험상태"
|
|
className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
|
|
>
|
|
<option value="ALL">전체</option>
|
|
<option value="DANGER">위험</option>
|
|
<option value="NORMAL">정상</option>
|
|
</select>
|
|
</label>
|
|
|
|
<div className="flex min-w-fit flex-1 items-center justify-end gap-2">
|
|
<Button
|
|
type="button"
|
|
color="primary"
|
|
onClick={handleApplyResultFilters}
|
|
disabled={isLoading}
|
|
>
|
|
조회
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
color="white"
|
|
onClick={() => {
|
|
setDraftResultFilters(initialFilters);
|
|
setAppliedResultFilters(initialFilters);
|
|
setResultCurrentPage(1);
|
|
setSelectedResultKey("");
|
|
}}
|
|
>
|
|
초기화
|
|
</Button>
|
|
</div>
|
|
</PopupSearchPanel>
|
|
|
|
<MapPopupDataTable
|
|
rows={tableRows}
|
|
headlist={
|
|
resultMode === "current"
|
|
? CURRENT_RESULT_HEADLIST
|
|
: HISTORY_RESULT_HEADLIST
|
|
}
|
|
title={resultListTitle}
|
|
total={resultPage.total}
|
|
page={resultCurrentPage}
|
|
pageSize={WATER_RISK_PAGE_SIZE}
|
|
onPageChange={setResultCurrentPage}
|
|
rowId={(row) => buildResultRowKey(row.sourceRow)}
|
|
selectedRowId={selectedResultKey}
|
|
onRowClick={(row) => void handleSelectResultRow(row.sourceRow)}
|
|
renderCell={(row, headId) =>
|
|
headId === "riskStatus" ? (
|
|
<span
|
|
className={`sn-popup-badge min-w-[5.6rem] ${getRiskBadgeClassName(row.riskStatus)}`}
|
|
>
|
|
{buildWaterRiskStatusLabel(row.riskStatus)}
|
|
</span>
|
|
) : undefined
|
|
}
|
|
scrollMode="horizontal"
|
|
minTableWidth={resultMode === "current" ? "114rem" : "106rem"}
|
|
emptyMessage="조회 조건에 해당하는 통수위험 결과가 없습니다."
|
|
actions={
|
|
<span className="text-xl font-normal text-muted-foreground">
|
|
합리식 유출유량과 Manning 통수량 비교 결과
|
|
</span>
|
|
}
|
|
/>
|
|
<div
|
|
aria-live="polite"
|
|
className="min-h-[20px] px-1 text-xl text-label"
|
|
>
|
|
{errorMessage ? (
|
|
<span className="text-destructive">{errorMessage}</span>
|
|
) : (
|
|
noticeMessage
|
|
)}
|
|
</div>
|
|
</section>
|
|
</StandardPopupLayout>
|
|
);
|
|
}
|