543 lines
26 KiB
TypeScript
543 lines
26 KiB
TypeScript
import { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import { Badge } from '@shared/components/ui/badge';
|
|
import { PageContainer } from '@shared/components/layout';
|
|
import {
|
|
Search,
|
|
Ship, AlertTriangle, Radar, MapPin, Printer,
|
|
Camera, Crosshair, Ruler, CircleDot, Clock, LayoutGrid, Brain,
|
|
Loader2, ShieldAlert, Shield, EyeOff, FileText,
|
|
} from 'lucide-react';
|
|
import { BaseMap, createStaticLayers, createZoneLayer, createPolylineLayer, JURISDICTION_AREAS, DEPTH_CONTOURS, useMapLayers, type MapHandle } from '@lib/map';
|
|
import { formatDateTime } from '@shared/utils/dateFormat';
|
|
import { getEvents, type PredictionEvent } from '@/services/event';
|
|
import { getAnalysisLatest, getAnalysisHistory, type VesselAnalysis } from '@/services/analysisApi';
|
|
import { getEnforcementRecords, type EnforcementRecord } from '@/services/enforcement';
|
|
import { ALERT_LEVELS, type AlertLevel, getAlertLevelLabel, getAlertLevelIntent } from '@shared/constants/alertLevels';
|
|
import { getRiskIntent } from '@shared/constants/statusIntent';
|
|
import { useSettingsStore } from '@stores/settingsStore';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
// ─── 허가 정보 타입 ──────────────────────
|
|
interface VesselPermitData {
|
|
mmsi: string;
|
|
vesselName: string | null;
|
|
vesselNameCn: string | null;
|
|
flagCountry: string | null;
|
|
vesselType: string | null;
|
|
tonnage: number | null;
|
|
lengthM: number | null;
|
|
buildYear: number | null;
|
|
permitStatus: string | null;
|
|
permitNo: string | null;
|
|
permittedGearCodes: string[] | null;
|
|
permittedZones: string[] | null;
|
|
permitValidFrom: string | null;
|
|
permitValidTo: string | null;
|
|
}
|
|
|
|
const API_BASE = import.meta.env.VITE_API_URL ?? '/api';
|
|
|
|
async function fetchVesselPermit(mmsi: string): Promise<VesselPermitData | null> {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/vessel-permits/${encodeURIComponent(mmsi)}`, {
|
|
credentials: 'include',
|
|
});
|
|
if (!res.ok) return null;
|
|
return res.json();
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
const RIGHT_TOOLS = [
|
|
{ icon: Crosshair, label: '구역설정' }, { icon: Ruler, label: '거리' },
|
|
{ icon: CircleDot, label: '면적' }, { icon: Clock, label: '거리환' },
|
|
{ icon: Printer, label: '인쇄' }, { icon: Camera, label: '스냅샷' },
|
|
];
|
|
|
|
// ─── 24h AIS 수신 막대 ───────────────
|
|
function AisTimeline({ history }: { history: VesselAnalysis[] }) {
|
|
// 최근 24시간을 1시간 단위 슬롯으로 분할
|
|
const now = Date.now();
|
|
const slots = Array.from({ length: 24 }, (_, i) => {
|
|
const slotStart = now - (24 - i) * 3600_000;
|
|
const slotEnd = slotStart + 3600_000;
|
|
const hasData = history.some((h) => {
|
|
const t = new Date(h.analyzedAt).getTime();
|
|
return t >= slotStart && t < slotEnd;
|
|
});
|
|
return { hour: new Date(slotStart).getHours(), hasData };
|
|
});
|
|
const received = slots.filter((s) => s.hasData).length;
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-[10px] text-hint">24h AIS 수신 이력</span>
|
|
<span className="text-[10px] text-label font-mono">{received}/24h ({Math.round(received / 24 * 100)}%)</span>
|
|
</div>
|
|
<div className="flex gap-px h-3">
|
|
{slots.map((s, i) => (
|
|
<div
|
|
key={i}
|
|
className={`flex-1 rounded-sm ${s.hasData ? 'bg-green-500' : 'bg-red-500/40'}`}
|
|
title={`${String(s.hour).padStart(2, '0')}시 — ${s.hasData ? '수신' : '소실'}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="flex justify-between mt-0.5">
|
|
<span className="text-[7px] text-hint">-24h</span>
|
|
<span className="text-[7px] text-hint">현재</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── 메인 컴포넌트 ────────────────────
|
|
|
|
export function VesselDetail() {
|
|
const { id: mmsiParam } = useParams<{ id: string }>();
|
|
|
|
// 데이터 상태
|
|
const [analysis, setAnalysis] = useState<VesselAnalysis | null>(null);
|
|
const [history, setHistory] = useState<VesselAnalysis[]>([]);
|
|
const [permit, setPermit] = useState<VesselPermitData | null>(null);
|
|
const [events, setEvents] = useState<PredictionEvent[]>([]);
|
|
const [enforcements, setEnforcements] = useState<EnforcementRecord[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// 검색 상태
|
|
const [searchMmsi, setSearchMmsi] = useState(mmsiParam ?? '');
|
|
const [startDate, setStartDate] = useState('');
|
|
const [endDate, setEndDate] = useState('');
|
|
|
|
const mapRef = useRef<MapHandle>(null);
|
|
|
|
// 데이터 로드 — prediction 직접 API
|
|
useEffect(() => {
|
|
if (!mmsiParam) {
|
|
setLoading(false);
|
|
setError('MMSI 파라미터가 필요합니다.');
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
|
|
const loadData = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const [analysisRes, historyRes, permitRes, eventsRes, enfRes] = await Promise.all([
|
|
getAnalysisLatest(mmsiParam).catch(() => null),
|
|
getAnalysisHistory(mmsiParam, 24).catch(() => []),
|
|
fetchVesselPermit(mmsiParam),
|
|
getEvents({ vesselMmsi: mmsiParam, size: 10 }).catch(() => null),
|
|
getEnforcementRecords({ vesselMmsi: mmsiParam, size: 10 }).catch(() => null),
|
|
]);
|
|
|
|
if (cancelled) return;
|
|
|
|
setAnalysis(analysisRes);
|
|
setHistory(historyRes);
|
|
setPermit(permitRes);
|
|
setEvents(eventsRes?.content ?? []);
|
|
setEnforcements(enfRes?.content ?? []);
|
|
} catch (err) {
|
|
if (!cancelled) {
|
|
setError(err instanceof Error ? err.message : '데이터 로드 실패');
|
|
}
|
|
} finally {
|
|
if (!cancelled) setLoading(false);
|
|
}
|
|
};
|
|
|
|
loadData();
|
|
return () => { cancelled = true; };
|
|
}, [mmsiParam]);
|
|
|
|
// 지도 레이어
|
|
const buildLayers = useCallback(() => [
|
|
...createStaticLayers(),
|
|
createZoneLayer('jurisdiction', JURISDICTION_AREAS.map((a) => ({
|
|
name: a.name, lat: a.lat, lng: a.lng, color: a.color, radiusM: 80000,
|
|
})), 80000, 0.05),
|
|
...DEPTH_CONTOURS.map((contour, i) =>
|
|
createPolylineLayer(`depth-${i}`, contour.points as [number, number][], {
|
|
color: '#06b6d4', width: 1, opacity: 0.3, dashArray: [2, 4],
|
|
})
|
|
),
|
|
], []);
|
|
|
|
useMapLayers(mapRef, buildLayers, []);
|
|
|
|
// i18n + 카탈로그
|
|
const { t: tc } = useTranslation('common');
|
|
const lang = useSettingsStore((s) => s.language);
|
|
|
|
// 위험도
|
|
const riskScore = analysis?.riskScore ?? 0;
|
|
const riskLevel = (analysis?.riskLevel ?? 'LOW') as AlertLevel;
|
|
const riskMeta = ALERT_LEVELS[riskLevel] ?? ALERT_LEVELS.LOW;
|
|
|
|
// features 추출
|
|
const features = analysis?.features ?? {};
|
|
const darkTier = features.dark_tier as string | undefined;
|
|
const darkScore = features.dark_suspicion_score as number | undefined;
|
|
const darkPatterns = features.dark_patterns as string[] | undefined;
|
|
const darkHistory7d = features.dark_history_7d as number | undefined;
|
|
const transshipTier = features.transship_tier as string | undefined;
|
|
const transshipScore = features.transship_score as number | undefined;
|
|
|
|
return (
|
|
<PageContainer fullBleed className="flex h-[calc(100vh-7.5rem)] gap-0">
|
|
|
|
{/* ── 좌측: 선박 정보 패널 ── */}
|
|
<div className="w-[370px] shrink-0 bg-card border-r border-border flex flex-col overflow-hidden">
|
|
{/* 헤더: 검색 조건 */}
|
|
<div className="p-3 border-b border-border space-y-2">
|
|
<h2 className="text-sm font-bold text-heading">선박 상세 조회</h2>
|
|
<div className="flex items-center gap-1">
|
|
<span className="text-[9px] text-hint w-14 shrink-0">시작/종료</span>
|
|
<input aria-label="조회 시작 시각" value={startDate} onChange={(e) => setStartDate(e.target.value)}
|
|
className="flex-1 bg-surface-overlay border border-slate-700/50 rounded px-2 py-1 text-[10px] text-label focus:outline-none focus:border-blue-500/50"
|
|
placeholder="YYYY-MM-DD HH:mm" />
|
|
<span className="text-hint text-[10px]">~</span>
|
|
<input aria-label="조회 종료 시각" value={endDate} onChange={(e) => setEndDate(e.target.value)}
|
|
className="flex-1 bg-surface-overlay border border-slate-700/50 rounded px-2 py-1 text-[10px] text-label focus:outline-none focus:border-blue-500/50"
|
|
placeholder="YYYY-MM-DD HH:mm" />
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<span className="text-[9px] text-hint w-14 shrink-0">MMSI</span>
|
|
<input aria-label="MMSI" value={searchMmsi} onChange={(e) => setSearchMmsi(e.target.value)}
|
|
placeholder="MMSI 입력"
|
|
className="flex-1 bg-surface-overlay border border-slate-700/50 rounded px-2 py-1 text-[10px] text-label focus:outline-none" />
|
|
<button type="button" className="flex items-center gap-1.5 bg-secondary border border-slate-700/50 rounded px-3 py-1 text-[10px] text-label hover:bg-switch-background transition-colors">
|
|
검색 <Search className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 로딩/에러 상태 */}
|
|
{loading && (
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<Loader2 className="w-6 h-6 text-blue-400 animate-spin" />
|
|
<span className="ml-2 text-sm text-hint">데이터 로드 중...</span>
|
|
</div>
|
|
)}
|
|
|
|
{error && !loading && (
|
|
<div className="flex-1 flex flex-col items-center justify-center gap-2 px-4">
|
|
<AlertTriangle className="w-8 h-8 text-red-400" />
|
|
<span className="text-sm text-red-400 text-center">{error}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* 선박 정보 */}
|
|
{!loading && !error && (
|
|
<div className="flex-1 overflow-y-auto">
|
|
{/* 기본 정보 카드 */}
|
|
<div className="p-3 border-b border-border">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Ship className="w-4 h-4 text-blue-400" />
|
|
<span className="text-[11px] font-bold text-heading">기본 정보</span>
|
|
</div>
|
|
<div className="bg-surface-overlay rounded border border-slate-700/20 text-[9px]">
|
|
{[
|
|
['MMSI', mmsiParam ?? '-'],
|
|
['선박 유형', analysis?.vesselType ?? permit?.vesselType ?? '-'],
|
|
['국적', permit?.flagCountry ?? '-'],
|
|
['선명', permit?.vesselName ?? '-'],
|
|
['선명(중문)', permit?.vesselNameCn ?? '-'],
|
|
['톤수', permit?.tonnage != null ? `${permit.tonnage}톤` : '-'],
|
|
['길이', permit?.lengthM != null ? `${permit.lengthM}m` : '-'],
|
|
['건조년도', permit?.buildYear != null ? String(permit.buildYear) : '-'],
|
|
['구역', analysis?.zoneCode ?? '-'],
|
|
['기선거리', analysis?.distToBaselineNm != null
|
|
? `${Number(analysis.distToBaselineNm).toFixed(1)}nm` : '-'],
|
|
['시즌', analysis?.season ?? '-'],
|
|
].map(([k, v], i) => (
|
|
<div key={k} className={`flex ${i % 2 === 0 ? 'bg-surface-overlay' : ''}`}>
|
|
<span className="w-24 shrink-0 px-2.5 py-1.5 text-hint border-r border-slate-700/20">{k}</span>
|
|
<span className="flex-1 px-2.5 py-1.5 text-label">{v}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 허가 정보 */}
|
|
{permit && (
|
|
<div className="p-3 border-b border-border">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<ShieldAlert className="w-4 h-4 text-green-400" />
|
|
<span className="text-[11px] font-bold text-heading">허가 정보</span>
|
|
</div>
|
|
<div className="bg-surface-overlay rounded border border-slate-700/20 text-[9px]">
|
|
{[
|
|
['허가 상태', permit.permitStatus ?? '-'],
|
|
['허가 번호', permit.permitNo ?? '-'],
|
|
['허가 기간', permit.permitValidFrom && permit.permitValidTo
|
|
? `${permit.permitValidFrom} ~ ${permit.permitValidTo}` : '-'],
|
|
['허용 어구', permit.permittedGearCodes?.join(', ') || '-'],
|
|
['허용 구역', permit.permittedZones?.join(', ') || '-'],
|
|
].map(([k, v], i) => (
|
|
<div key={k} className={`flex ${i % 2 === 0 ? 'bg-surface-overlay' : ''}`}>
|
|
<span className="w-24 shrink-0 px-2.5 py-1.5 text-hint border-r border-slate-700/20">{k}</span>
|
|
<span className="flex-1 px-2.5 py-1.5 text-label">{v}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* AI 분석 결과 — prediction 직접 데이터 */}
|
|
{analysis && (
|
|
<div className="p-3 border-b border-border">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Brain className="w-4 h-4 text-purple-400" />
|
|
<span className="text-[11px] font-bold text-heading">AI 분석 결과</span>
|
|
</div>
|
|
|
|
{/* 위험도 점수 */}
|
|
<div className="mb-3 p-2 bg-surface-overlay rounded border border-slate-700/20">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-[10px] text-hint">위험도</span>
|
|
<Badge intent={riskMeta.intent} size="sm">
|
|
{getAlertLevelLabel(riskLevel, tc, lang)}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex items-baseline gap-1 mb-1">
|
|
<span className={`text-xl font-bold ${riskMeta.classes.text}`}>
|
|
{riskScore}
|
|
</span>
|
|
<span className="text-[10px] text-hint">/100</span>
|
|
</div>
|
|
<div className="h-1.5 bg-switch-background rounded-full overflow-hidden">
|
|
<div
|
|
className="h-1.5 bg-gradient-to-r from-red-600 to-red-400 rounded-full transition-all"
|
|
style={{ width: `${Math.min(riskScore, 100)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 알고리즘 상세 */}
|
|
<div className="bg-surface-overlay rounded border border-slate-700/20 text-[9px]">
|
|
{[
|
|
['활동 상태', analysis.activityState ?? '-'],
|
|
['다크베셀', analysis.isDark ? '예 (의심)' : '아니오'],
|
|
['AIS 공백', analysis.gapDurationMin != null && analysis.gapDurationMin > 0
|
|
? `${analysis.gapDurationMin}분` : '-'],
|
|
['스푸핑 점수', analysis.spoofingScore != null ? Number(analysis.spoofingScore).toFixed(2) : '-'],
|
|
['속도 점프', analysis.speedJumpCount != null ? `${analysis.speedJumpCount}회` : '-'],
|
|
['선단 역할', analysis.fleetRole ?? '-'],
|
|
['환적 의심', analysis.transshipSuspect ? '예' : '아니오'],
|
|
['환적 상대', analysis.transshipPairMmsi || '-'],
|
|
['환적 시간', analysis.transshipDurationMin != null && analysis.transshipDurationMin > 0
|
|
? `${analysis.transshipDurationMin}분` : '-'],
|
|
].map(([k, v], i) => (
|
|
<div key={k} className={`flex ${i % 2 === 0 ? 'bg-surface-overlay' : ''}`}>
|
|
<span className="w-24 shrink-0 px-2.5 py-1.5 text-hint border-r border-slate-700/20">{k}</span>
|
|
<span className={`flex-1 px-2.5 py-1.5 ${
|
|
(k === '다크베셀' && v === '예 (의심)') || (k === '환적 의심' && v === '예')
|
|
? 'text-red-400 font-bold' : 'text-label'
|
|
}`}>{v}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Dark 패턴 시각화 — features 기반 */}
|
|
{analysis?.isDark && darkTier && (
|
|
<div className="p-3 border-b border-border">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<EyeOff className="w-4 h-4 text-red-400" />
|
|
<span className="text-[11px] font-bold text-heading">Dark Vessel 분석</span>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{/* Dark tier + score */}
|
|
<div className="flex items-center gap-2">
|
|
<Badge intent={getRiskIntent(darkScore ?? 0)} size="sm">{darkTier}</Badge>
|
|
<span className="text-[10px] text-label font-mono">{darkScore ?? 0}점</span>
|
|
{darkHistory7d != null && darkHistory7d > 0 && (
|
|
<span className="text-[9px] text-red-400">7일간 {darkHistory7d}회 반복</span>
|
|
)}
|
|
</div>
|
|
{/* 의심 점수 바 */}
|
|
<div className="h-1.5 bg-switch-background rounded-full overflow-hidden">
|
|
<div
|
|
className="h-1.5 rounded-full transition-all"
|
|
style={{
|
|
width: `${Math.min(darkScore ?? 0, 100)}%`,
|
|
backgroundColor: (darkScore ?? 0) >= 70 ? '#ef4444' : (darkScore ?? 0) >= 50 ? '#f97316' : '#eab308',
|
|
}}
|
|
/>
|
|
</div>
|
|
{/* Dark 패턴 태그 */}
|
|
{darkPatterns && darkPatterns.length > 0 && (
|
|
<div className="flex flex-wrap gap-1">
|
|
{darkPatterns.map((p) => (
|
|
<Badge key={p} intent="muted" size="xs">{p}</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 환적 분석 — features 기반 */}
|
|
{analysis?.transshipSuspect && transshipTier && (
|
|
<div className="p-3 border-b border-border">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Shield className="w-4 h-4 text-orange-400" />
|
|
<span className="text-[11px] font-bold text-heading">환적 의심 분석</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge intent={getRiskIntent(transshipScore ?? 0)} size="sm">{transshipTier}</Badge>
|
|
<span className="text-[10px] text-label font-mono">{transshipScore ?? 0}점</span>
|
|
<span className="text-[9px] text-hint">상대: {analysis.transshipPairMmsi ?? '-'}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 24h AIS 수신 이력 */}
|
|
{history.length > 0 && (
|
|
<div className="p-3 border-b border-border">
|
|
<AisTimeline history={history} />
|
|
</div>
|
|
)}
|
|
|
|
{/* 관련 이벤트 이력 */}
|
|
<div className="p-3 border-b border-border">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<AlertTriangle className="w-4 h-4 text-red-400" />
|
|
<span className="text-[11px] font-bold text-heading">관련 이벤트 이력</span>
|
|
<span className="text-[9px] text-hint ml-auto">{events.length}건</span>
|
|
</div>
|
|
{events.length === 0 ? (
|
|
<div className="text-[10px] text-hint text-center py-4">관련 이벤트가 없습니다.</div>
|
|
) : (
|
|
<div className="space-y-1.5">
|
|
{events.map((evt) => (
|
|
<div key={evt.id} className="bg-surface-overlay rounded border border-slate-700/20 px-2.5 py-2">
|
|
<div className="flex items-center gap-2 mb-0.5">
|
|
<Badge intent={getAlertLevelIntent(evt.level)} size="xs">
|
|
{getAlertLevelLabel(evt.level, tc, lang)}
|
|
</Badge>
|
|
<span className="text-[10px] text-heading font-medium flex-1 truncate">{evt.title}</span>
|
|
<Badge intent="muted" size="xs" className="px-1.5 py-0">
|
|
{evt.status}
|
|
</Badge>
|
|
</div>
|
|
<div className="text-[9px] text-hint">
|
|
{formatDateTime(evt.occurredAt)} {evt.areaName ? `| ${evt.areaName}` : ''}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 단속 이력 */}
|
|
<div className="p-3">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<FileText className="w-4 h-4 text-green-400" />
|
|
<span className="text-[11px] font-bold text-heading">단속 이력</span>
|
|
<span className="text-[9px] text-hint ml-auto">{enforcements.length}건</span>
|
|
</div>
|
|
{enforcements.length === 0 ? (
|
|
<div className="text-[10px] text-hint text-center py-4">단속 이력이 없습니다.</div>
|
|
) : (
|
|
<div className="space-y-1.5">
|
|
{enforcements.map((enf) => (
|
|
<div key={enf.id} className="bg-surface-overlay rounded border border-slate-700/20 px-2.5 py-2">
|
|
<div className="flex items-center gap-2 mb-0.5">
|
|
<Badge intent="info" size="xs">{enf.enfUid}</Badge>
|
|
<span className="text-[10px] text-heading font-medium flex-1 truncate">
|
|
{enf.violationType ?? '단속'}
|
|
</span>
|
|
<Badge intent={enf.result === 'PUNISHED' ? 'critical' : 'muted'} size="xs">
|
|
{enf.result ?? '-'}
|
|
</Badge>
|
|
</div>
|
|
<div className="text-[9px] text-hint">
|
|
{formatDateTime(enf.enforcedAt)} {enf.areaName ? `| ${enf.areaName}` : ''}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── 중앙: 지도 ── */}
|
|
<div className="flex-1 relative bg-card/40 overflow-hidden">
|
|
{/* MMSI 표시 */}
|
|
{mmsiParam && (
|
|
<div className="absolute top-3 left-3 z-10 bg-card/95 backdrop-blur-sm rounded-lg border border-border px-3 py-2">
|
|
<div className="flex items-center gap-2">
|
|
<Ship className="w-4 h-4 text-blue-400" />
|
|
<span className="text-[11px] font-bold text-heading">MMSI: {mmsiParam}</span>
|
|
{analysis && (
|
|
<Badge intent={riskMeta.intent} size="sm">
|
|
위험도: {getAlertLevelLabel(riskLevel, tc, lang)}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<BaseMap
|
|
ref={mapRef}
|
|
center={[
|
|
analysis?.lat ?? 34.5,
|
|
analysis?.lon ?? 126.5,
|
|
]}
|
|
zoom={analysis?.lat ? 9 : 7}
|
|
height="100%"
|
|
/>
|
|
|
|
{/* 하단 좌표 바 */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-6 bg-background/90 backdrop-blur-sm border-t border-border flex items-center justify-center gap-4 px-4 z-[1000]">
|
|
<span className="flex items-center gap-1 text-[8px]">
|
|
<MapPin className="w-2.5 h-2.5 text-green-400" />
|
|
<span className="text-hint">위도</span>
|
|
<span className="text-green-400 font-mono font-bold">{analysis?.lat?.toFixed(4) ?? '-'}</span>
|
|
</span>
|
|
<span className="flex items-center gap-1 text-[8px]">
|
|
<MapPin className="w-2.5 h-2.5 text-green-400" />
|
|
<span className="text-hint">경도</span>
|
|
<span className="text-green-400 font-mono font-bold">{analysis?.lon?.toFixed(4) ?? '-'}</span>
|
|
</span>
|
|
<span className="text-[8px]">
|
|
<span className="text-blue-400 font-bold">KST</span>
|
|
<span className="text-label font-mono ml-1">{formatDateTime(new Date())}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── 우측 도구바 ── */}
|
|
<div className="w-10 bg-background border-l border-border flex flex-col items-center py-2 gap-0.5 shrink-0">
|
|
{RIGHT_TOOLS.map((t) => (
|
|
<button type="button" key={t.label} className="flex flex-col items-center gap-0.5 py-1.5 px-1 rounded hover:bg-surface-overlay text-hint hover:text-label transition-colors" title={t.label}>
|
|
<t.icon className="w-3.5 h-3.5" /><span className="text-[6px]">{t.label}</span>
|
|
</button>
|
|
))}
|
|
<div className="flex-1" />
|
|
<div className="flex flex-col border border-border rounded-lg overflow-hidden">
|
|
<button type="button" className="p-1 hover:bg-secondary text-hint hover:text-heading text-sm font-bold">+</button>
|
|
<div className="h-px bg-white/[0.06]" />
|
|
<button type="button" className="p-1 hover:bg-secondary text-hint hover:text-heading text-sm font-bold">-</button>
|
|
</div>
|
|
<button type="button" className="mt-1 flex flex-col items-center py-1 text-hint hover:text-label"><LayoutGrid className="w-3.5 h-3.5" /><span className="text-[6px]">범례</span></button>
|
|
<button type="button" className="flex flex-col items-center py-1 text-hint hover:text-label"><div className="w-3.5 h-3.5 border border-slate-500 rounded-sm" /><span className="text-[6px]">미니맵</span></button>
|
|
<button type="button" className="flex flex-col items-center py-1 bg-blue-600/20 text-blue-400 rounded"><Radar className="w-3.5 h-3.5" /><span className="text-[6px]">AI모드</span></button>
|
|
</div>
|
|
</PageContainer>
|
|
);
|
|
}
|