diff --git a/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx b/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx index 506e5fa40..81222a53a 100644 --- a/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx +++ b/apps/sn/src/features/fldngPredcPrst/ui/FldngPredcPrstPopupContent.tsx @@ -192,14 +192,21 @@ const validateFilters = (filters: Filters) => { const buildRowId = (row: ApiRow) => `${row.ctpvCd}:${row.sggCd}:${row.rainBeginningDateTime}:${row.analysisDateTime}:${row.predictionHour}`; -const isDangerGrade = (value: string) => { +/** 침수위험도 등급을 목록 배지의 고정 의미색으로 변환한다. */ +const getFloodRiskGradeClassName = (value: string) => { const grade = String(value ?? "") .trim() .toUpperCase(); - if (!grade || grade === "-" || grade.includes("정상") || grade === "NORMAL") { - return false; + if (grade.includes("위험") || grade === "DANGER") { + return "bg-[#dc2626] text-white"; } - return true; + if (grade.includes("경계") || grade === "WARNING") { + return "bg-[#f97316] text-white"; + } + if (grade.includes("주의") || grade === "CAUTION") { + return "bg-[#facc15] text-[#713f12]"; + } + return "sn-popup-badge-normal"; }; export default function FldngPredcPrstPopupContent() { @@ -570,11 +577,7 @@ export default function FldngPredcPrstPopupContent() { renderCell={(row, headId) => headId === "floodRiskGrade" ? ( {row.floodRiskGrade || "-"} @@ -596,8 +599,16 @@ export default function FldngPredcPrstPopupContent() { } /> -
+ 30년빈도 이상인 경우{" "} + 위험, 10년빈도 + 이상인 경우{" "} + 경계, 2년빈도 + 이상인 경우{" "} + 주의 +
+행을 선택하면 해당 시군구·빈도의 도시침수지도로 이동합니다.