From 48b5e876acf06972785b3056a572f00ac4ba503c Mon Sep 17 00:00:00 2001
From: Nan Kyung Lee <nankyunglee@Nanui-Macmini.local>
Date: Mon, 16 Mar 2026 08:58:06 +0900
Subject: [PATCH] =?UTF-8?q?feat(prediction):=20=EB=B2=94=EB=A1=80=20UI=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20=E2=80=94=20HTML=20=EC=B0=B8=EA=B3=A0=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모델별 색상 라인 (KOSPS/POSEIDON/OpenDrift/앙상블)
- 오일펜스 라인 아이콘 (점 3개)
- 도달시간별 선종 표시: 위험(<6h), 경고(6~12h), 주의(12~24h), 안전
- 범례 사이즈 축소 (폰트 10px, 패딩 축소)
- 접기/펼치기 토글 (▶/▼)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/common/components/map/MapView.tsx     | 91 +++++++++++--------
 1 file changed, 51 insertions(+), 40 deletions(-)

diff --git a/frontend/src/common/components/map/MapView.tsx b/frontend/src/common/components/map/MapView.tsx
index 6877a38..46b0d98 100755
--- a/frontend/src/common/components/map/MapView.tsx
+++ b/frontend/src/common/components/map/MapView.tsx
@@ -1059,7 +1059,7 @@ interface MapLegendProps {
   selectedModels?: Set<PredictionModel>
 }
 
-function MapLegend({ dispersionResult, incidentCoord, oilTrajectory = [], boomLines = [], selectedModels = new Set(['OpenDrift'] as PredictionModel[]) }: MapLegendProps) {
+function MapLegend({ dispersionResult, incidentCoord, oilTrajectory = [], selectedModels = new Set(['OpenDrift'] as PredictionModel[]) }: MapLegendProps) {
   const [minimized, setMinimized] = useState(false)
 
   if (dispersionResult && incidentCoord) {
@@ -1124,48 +1124,59 @@ function MapLegend({ dispersionResult, incidentCoord, oilTrajectory = [], boomLi
 
   if (oilTrajectory.length > 0) {
     return (
-      <div className="absolute top-4 right-4 bg-[rgba(18,25,41,0.9)] backdrop-blur-xl border border-border rounded-md min-w-[180px] z-[20]">
-        {/* 헤더 + 최소화 버튼 */}
-        <div className="flex items-center justify-between px-3.5 pt-3 pb-1 cursor-pointer" onClick={() => setMinimized(!minimized)}>
-          <h4 className="text-[11px] font-bold uppercase tracking-wider text-text-3">범례</h4>
-          <span className="text-[10px] text-text-3 hover:text-text-1 transition-colors">{minimized ? '▶' : '▼'}</span>
+      <div className="absolute top-4 right-4 bg-[rgba(18,25,41,0.92)] backdrop-blur-xl border border-border rounded-md z-[20]" style={{ minWidth: 155 }}>
+        {/* 헤더 + 접기/펼치기 */}
+        <div
+          className="flex items-center justify-between px-3 py-2 cursor-pointer select-none"
+          onClick={() => setMinimized(!minimized)}
+        >
+          <span className="text-[10px] font-bold text-text-2 font-korean">범례</span>
+          <span className="text-[9px] text-text-3 hover:text-text-1 transition-colors ml-3">{minimized ? '▶' : '▼'}</span>
         </div>
+
         {!minimized && (
-          <div className="px-3.5 pb-3.5">
-            <div className="flex flex-col gap-1.5">
-              {Array.from(selectedModels).map(model => (
-                <div key={model} className="flex items-center gap-2 text-xs text-text-2">
-                  <div className="w-3.5 h-3.5 rounded-full" style={{ background: MODEL_COLORS[model] }} />
-                  <span className="font-korean">{model}</span>
-                </div>
-              ))}
-              {selectedModels.size === 3 && (
-                <div className="flex items-center gap-2 text-[9px] text-text-3">
-                  <span className="font-korean">(앙상블 모드)</span>
-                </div>
-              )}
-              <div className="h-px bg-border my-1" />
-              <div className="flex items-center gap-2 text-xs text-text-2">
-                <div className="w-3.5 h-3.5 rounded-full bg-primary-cyan" />
-                <span className="font-korean">사고 지점</span>
+          <div className="px-3 pb-2.5 flex flex-col gap-[5px]">
+            {/* 모델별 색상 */}
+            {Array.from(selectedModels).map(model => (
+              <div key={model} className="flex items-center gap-2 text-[10px] text-text-2">
+                <div className="w-[14px] h-[3px] rounded-sm" style={{ background: MODEL_COLORS[model] }} />
+                <span className="font-korean">{model}</span>
               </div>
-              {boomLines.length > 0 && (
-                <>
-                  <div className="h-px bg-border my-1" />
-                  <div className="flex items-center gap-2 text-xs text-text-2">
-                    <div className="w-[14px] h-[3px] bg-[#ef4444] rounded-[1px]" />
-                    <span className="font-korean">긴급 오일펜스</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-xs text-text-2">
-                    <div className="w-[14px] h-[3px] bg-[#f97316] rounded-[1px]" />
-                    <span className="font-korean">중요 오일펜스</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-xs text-text-2">
-                    <div className="w-[14px] h-[3px] bg-[#eab308] rounded-[1px]" />
-                    <span className="font-korean">보통 오일펜스</span>
-                  </div>
-                </>
-              )}
+            ))}
+            {/* 앙상블 */}
+            <div className="flex items-center gap-2 text-[10px] text-text-2">
+              <div className="w-[14px] h-[3px] rounded-sm" style={{ background: '#a855f7' }} />
+              <span className="font-korean">앙상블</span>
+            </div>
+
+            {/* 오일펜스 라인 */}
+            <div className="h-px bg-border my-0.5" />
+            <div className="flex items-center gap-2 text-[10px] text-text-2">
+              <div className="flex gap-px">
+                <div className="w-[4px] h-[4px] rounded-full bg-[#f97316]" />
+                <div className="w-[4px] h-[4px] rounded-full bg-[#f97316]" />
+                <div className="w-[4px] h-[4px] rounded-full bg-[#f97316]" />
+              </div>
+              <span className="font-korean">오일펜스 라인</span>
+            </div>
+
+            {/* 도달시간별 선종 */}
+            <div className="h-px bg-border my-0.5" />
+            <div className="flex items-center gap-2 text-[10px] text-text-2">
+              <div className="w-[14px] h-[3px] rounded-sm bg-[#ef4444]" />
+              <span className="font-korean">위험 (&lt;6h)</span>
+            </div>
+            <div className="flex items-center gap-2 text-[10px] text-text-2">
+              <div className="w-[14px] h-[3px] rounded-sm bg-[#f97316]" />
+              <span className="font-korean">경고 (6~12h)</span>
+            </div>
+            <div className="flex items-center gap-2 text-[10px] text-text-2">
+              <div className="w-[14px] h-[3px] rounded-sm bg-[#eab308]" />
+              <span className="font-korean">주의 (12~24h)</span>
+            </div>
+            <div className="flex items-center gap-2 text-[10px] text-text-2">
+              <div className="w-[14px] h-[3px] rounded-sm bg-[#22c55e]" />
+              <span className="font-korean">안전</span>
             </div>
           </div>
         )}