gc/wing-ops
8
0
포크 0
코드 이슈 풀 리퀘스트 Actions 위키 활동

feat(prediction): 범례 UI 개선 — HTML 참고 디자인 반영

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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nan Kyung Lee 2026-03-16 08:58:06 +09:00
부모 97e9d58cc1
커밋 48b5e876ac
1개의 변경된 파일과 51개의 추가작업 그리고 40개의 파일을 삭제
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
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">
<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-xs text-text-2">
<div className="w-3.5 h-3.5 rounded-full" style={{ background: MODEL_COLORS[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>
))}
{selectedModels.size === 3 && (
<div className="flex items-center gap-2 text-[9px] text-text-3">
<span className="font-korean">(앙상블 모드)</span>
{/* 앙상블 */}
<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-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="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>
{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>
<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 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-xs text-text-2">
<div className="w-[14px] h-[3px] bg-[#eab308] rounded-[1px]" />
<span className="font-korean">보통 오일펜스</span>
<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>
)}