sn: 침수예측오버레이 수정

apps/sn/app/(map-layout)/map/page.tsx

@@ -131,6 +131,7 @@ import FldngHstryLayerSettingPanel from "./components/fldngHstry/FldngHstryLayer
 import ExmnLayerSettingPanel from "./components/exmn/ExmnLayerSettingPanel";
 import LayerSettingCard from "./components/layerSetting/LayerSettingCard";
 import { getExmnMapLayer } from "./components/exmn/exmnMapApi";
+import { getFloodRiskGradeClassName } from "@/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent";
 import {
   EMPTY_EXMN_MAP_FILTERS,
   EXMN_RESULT_MNHL_LAYER_ID,
@@ -1826,9 +1827,17 @@ const Map = () => {
           key.style.cssText =
             "font-weight:400; padding:2px 8px 2px 2px; white-space:nowrap; border-bottom:1px solid #e5e7eb;";
           const val = tr.insertCell();
-          val.textContent = value;
           val.style.cssText =
             "font-weight:400; text-align:right; padding:2px 2px; white-space:nowrap; border-bottom:1px solid #e5e7eb;";
+          if (label === "침수위험도") {
+            // 침수예측현황 목록과 같은 배지 스타일로 등급을 표시한다.
+            const badge = document.createElement("span");
+            badge.textContent = value;
+            badge.className = `sn-popup-badge min-w-[44px] ${getFloodRiskGradeClassName(String(value ?? ""))}`;
+            val.append(badge);
+          } else {
+            val.textContent = value;
+          }
         });
         container.append(close, table);
         const overlay = new Overlay({

apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx

@@ -59,7 +59,9 @@ type Filters = {
 const PAGE_SIZE = 10;
 const EXCEL_DOWNLOAD_PAGE_SIZE = 500;
 const MAP_FREQUENCIES = new Set([30, 50, 80, 100]);
-const FREQUENCY_OPTIONS = [30, 50, 80, 100] as const;
+const FREQUENCY_OPTIONS = [
+  5, 10, 20, 30, 50, 80, 100
+] as const;
 
 /** 도시침수지도 DB의 3자리 빈도 코드로 변환한다. 30년 이하는 030, 100년 초과는 100으로 제한한다. */
 const toFloodMapFrequencyCode = (value: number) => {
@@ -181,10 +183,10 @@ const validateFilters = (filters: Filters) => {
   if (
     filters.frequencyYear != "0" &&
     !FREQUENCY_OPTIONS.includes(
-      Number(filters.frequencyYear) as 30 | 50 | 80 | 100,
+      Number(filters.frequencyYear) as (typeof FREQUENCY_OPTIONS)[number],
     )
   ) {
-    return "초과 빈도는 30년, 50년, 80년, 100년 중에서 선택해야 합니다.";
+    return `초과 빈도는 ${FREQUENCY_OPTIONS.join("·")}년 중에서 선택해야 합니다.`;
   }
   return null;
 };
@@ -193,7 +195,7 @@ const buildRowId = (row: ApiRow) =>
   `${row.ctpvCd}:${row.sggCd}:${row.rainBeginningDateTime}:${row.analysisDateTime}:${row.predictionHour}`;
 
 /** 침수위험도 등급을 목록 배지의 고정 의미색으로 변환한다. */
-const getFloodRiskGradeClassName = (value: string) => {
+export const getFloodRiskGradeClassName = (value: string) => {
   const grade = String(value ?? "")
     .trim()
     .toUpperCase();