From 8cc9f0d2912bdcd8d413a2ce6066d5b928e77579 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Thu, 17 Sep 2026 14:04:51 +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=EC=B9=A8=EC=88=98=EC=9C=84=ED=97=98?=
 =?UTF-8?q?=EB=8F=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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" ? (
               <span
-                className={`sn-popup-badge min-w-[5.6rem] ${
-                  isDangerGrade(row.floodRiskGrade)
-                    ? "sn-popup-badge-danger"
-                    : "sn-popup-badge-normal"
-                }`}
+                className={`sn-popup-badge min-w-[5.6rem] ${getFloodRiskGradeClassName(row.floodRiskGrade)}`}
               >
                 {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>