sn: 침수예측현황 목록 항목 순서 변경

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">