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
부모
97e9d58cc1
커밋
48b5e876ac
@ -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">위험 (<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>
|
||||
)}
|
||||
|
||||
불러오는 중...
Reference in New Issue
Block a user