From 42f83bcd2471755ad7245d50bf9e036f205c1d0b Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Wed, 26 Aug 2026 10:06:55 +0900
Subject: [PATCH] =?UTF-8?q?sn:=20=EC=B9=A8=EC=88=98=EC=98=88=EC=B8=A1?=
 =?UTF-8?q?=ED=98=84=ED=99=A9=20=EB=AA=A9=EB=A1=9D=20=ED=95=AD=EB=AA=A9=20?=
 =?UTF-8?q?=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/FldngPredcPrstPopupContent.tsx         | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx b/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx
index a1c782952..2635ab52c 100644
--- a/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx
+++ b/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx
@@ -57,18 +57,26 @@ const PAGE_SIZE = 10;
 const MAP_FREQUENCIES = new Set([30, 50, 80, 100]);
 const FREQUENCY_OPTIONS = [30, 50, 80, 100] as const;
 
+/** 도시침수지도 DB의 3자리 빈도 코드로 변환한다. 지도는 100년까지만 제공하므로 그 이상은 100년으로 제한한다. */
+const toFloodMapFrequencyCode = (value: number) => {
+  if (!Number.isFinite(value) || value <= 0) return null;
+  const normalized = value > 100 ? 100 : value;
+  if (!MAP_FREQUENCIES.has(normalized)) return null;
+  return String(normalized).padStart(3, "0");
+};
+
 const HEADS: UiHeadProps[] = [
   { id: "rowNo", title: "순번", widthPercent: 6 },
   { id: "ctpvNm", title: "시도", widthPercent: 8 },
   { id: "sggNm", title: "시군구", widthPercent: 9 },
   {
-    id: "rainBeginningDateTimeDisplay",
-    title: "강우시각",
+    id: "analysisDateTimeDisplay",
+    title: "분석시각",
     widthPercent: 13,
   },
   {
-    id: "analysisDateTimeDisplay",
-    title: "분석시각",
+    id: "rainBeginningDateTimeDisplay",
+    title: "강우시각",
     widthPercent: 13,
   },
   {
@@ -297,7 +305,8 @@ export default function FldngPredcPrstPopupContent() {
   /** 선택 행과 동일한 시군구·빈도의 도시침수지도 범위를 부모 지도에 전달한다. */
   const handleRowClick = async (row: TableRow) => {
     const frequencyYear = Number(row.exceededFrequencyYear ?? 0);
-    if (!MAP_FREQUENCIES.has(frequencyYear)) {
+    const sbmrgFrqExpln = toFloodMapFrequencyCode(frequencyYear);
+    if (!sbmrgFrqExpln) {
       alert(
         `${frequencyYear || "해당"}년 빈도 도시침수지도는 제공되지 않습니다. (30·50·80·100년 빈도만 제공)`,
       );
@@ -315,7 +324,6 @@ export default function FldngPredcPrstPopupContent() {
     setSelectedRowId(buildRowId(row));
     setLoading(true);
     try {
-      const sbmrgFrqExpln = `${frequencyYear}년`;
       const params = new URLSearchParams({
         sggCd: row.sggCd,
         sbmrgFrqExpln,
@@ -471,8 +479,8 @@ export default function FldngPredcPrstPopupContent() {
             </select>
           </label>
 
-          {renderDateTimeRange("강우시각", "rainBgngFrom", "rainBgngTo")}
           {renderDateTimeRange("분석시각", "analysisFrom", "analysisTo")}
+          {renderDateTimeRange("강우시각", "rainBgngFrom", "rainBgngTo")}
 
           <label className="flex shrink-0 items-center gap-2">
             <span className="shrink-0 whitespace-nowrap text-xl font-medium text-label">