sn: 침수예측현황 침수위험도 수정

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") {
+  if (grade.includes("위험") || grade === "DANGER") {
-    return false;
+    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" ? (
               <span
-                className={`sn-popup-badge min-w-[5.6rem] ${
+                className={`sn-popup-badge min-w-[5.6rem] ${getFloodRiskGradeClassName(row.floodRiskGrade)}`}
-                  isDangerGrade(row.floodRiskGrade)
-                    ? "sn-popup-badge-danger"
-                    : "sn-popup-badge-normal"
-                }`}
               >
                 {row.floodRiskGrade || "-"}
               </span>
@@ -596,8 +599,16 @@ export default function FldngPredcPrstPopupContent() {
           }
         />
 
-        <div className="px-1 text-xl text-muted-foreground">
+        <div className="space-y-1 px-1 text-xl text-muted-foreground">
-          행을 선택하면 해당 시군구·빈도의 도시침수지도로 이동합니다.
+          <p>
+            30년빈도 이상인 경우{" "}
+            <span className="font-semibold text-[#dc2626]">위험</span>, 10년빈도
+            이상인 경우{" "}
+            <span className="font-semibold text-[#f97316]">경계</span>, 2년빈도
+            이상인 경우{" "}
+            <span className="font-semibold text-[#ca8a04]">주의</span>
+          </p>
+          <p>행을 선택하면 해당 시군구·빈도의 도시침수지도로 이동합니다.</p>
         </div>
       </section>
     </StandardPopupLayout>