772 lines
35 KiB
TypeScript
772 lines
35 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
||
import { ReplayMap } from './components/iran/ReplayMap';
|
||
import type { FlyToTarget } from './components/iran/ReplayMap';
|
||
import { GlobeMap } from './components/iran/GlobeMap';
|
||
import { SatelliteMap } from './components/iran/SatelliteMap';
|
||
import { KoreaMap } from './components/korea/KoreaMap';
|
||
import { TimelineSlider } from './components/common/TimelineSlider';
|
||
import { ReplayControls } from './components/common/ReplayControls';
|
||
import { LiveControls } from './components/common/LiveControls';
|
||
import { SensorChart } from './components/common/SensorChart';
|
||
import { EventLog } from './components/common/EventLog';
|
||
import { LayerPanel } from './components/common/LayerPanel';
|
||
import { useReplay } from './hooks/useReplay';
|
||
import { useMonitor } from './hooks/useMonitor';
|
||
import { useIranData } from './hooks/useIranData';
|
||
import { useKoreaData } from './hooks/useKoreaData';
|
||
import { useKoreaFilters } from './hooks/useKoreaFilters';
|
||
import { useVesselAnalysis } from './hooks/useVesselAnalysis';
|
||
import type { GeoEvent, LayerVisibility, AppMode } from './types';
|
||
import { useTheme } from './hooks/useTheme';
|
||
import { useAuth } from './hooks/useAuth';
|
||
import { useTranslation } from 'react-i18next';
|
||
import LoginPage from './components/auth/LoginPage';
|
||
import CollectorMonitor from './components/common/CollectorMonitor';
|
||
import { FieldAnalysisModal } from './components/korea/FieldAnalysisModal';
|
||
// 정적 데이터 카운트용 import (이미 useStaticDeckLayers에서 번들 포함됨)
|
||
import { EAST_ASIA_PORTS } from './data/ports';
|
||
import { KOREAN_AIRPORTS } from './services/airports';
|
||
import { MILITARY_BASES } from './data/militaryBases';
|
||
import { GOV_BUILDINGS } from './data/govBuildings';
|
||
import { KOREA_WIND_FARMS } from './data/windFarms';
|
||
import { NK_LAUNCH_SITES } from './data/nkLaunchSites';
|
||
import { NK_MISSILE_EVENTS } from './data/nkMissileEvents';
|
||
import { COAST_GUARD_FACILITIES } from './services/coastGuard';
|
||
import { NAV_WARNINGS } from './services/navWarning';
|
||
import { PIRACY_ZONES } from './services/piracy';
|
||
import { KOREA_SUBMARINE_CABLES } from './services/submarineCable';
|
||
import { HAZARD_FACILITIES } from './data/hazardFacilities';
|
||
import { CN_POWER_PLANTS, CN_MILITARY_FACILITIES } from './data/cnFacilities';
|
||
import { JP_POWER_PLANTS, JP_MILITARY_FACILITIES } from './data/jpFacilities';
|
||
import './App.css';
|
||
|
||
function App() {
|
||
const { user, isLoading: authLoading, isAuthenticated, login, devLogin, logout } = useAuth();
|
||
|
||
if (authLoading) {
|
||
return (
|
||
<div
|
||
className="flex min-h-screen items-center justify-center"
|
||
style={{ backgroundColor: 'var(--kcg-bg)', color: 'var(--kcg-muted)' }}
|
||
>
|
||
Loading...
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!isAuthenticated) {
|
||
return <LoginPage onGoogleLogin={login} onDevLogin={devLogin} />;
|
||
}
|
||
|
||
return <AuthenticatedApp user={user} onLogout={logout} />;
|
||
}
|
||
|
||
interface AuthenticatedAppProps {
|
||
user: { email: string; name: string; picture?: string } | null;
|
||
onLogout: () => Promise<void>;
|
||
}
|
||
|
||
function AuthenticatedApp({ user, onLogout }: AuthenticatedAppProps) {
|
||
const [appMode, setAppMode] = useState<AppMode>('live');
|
||
const [mapMode, setMapMode] = useState<'flat' | 'globe' | 'satellite'>('satellite');
|
||
const [dashboardTab, setDashboardTab] = useState<'iran' | 'korea'>('iran');
|
||
const [layers, setLayers] = useState<LayerVisibility>({
|
||
events: true,
|
||
aircraft: true,
|
||
satellites: true,
|
||
ships: true,
|
||
koreanShips: true,
|
||
airports: true,
|
||
sensorCharts: false,
|
||
oilFacilities: true,
|
||
meFacilities: true,
|
||
militaryOnly: false,
|
||
overseasUS: false,
|
||
overseasUK: false,
|
||
overseasIran: false,
|
||
overseasUAE: false,
|
||
overseasSaudi: false,
|
||
overseasOman: false,
|
||
overseasQatar: false,
|
||
overseasKuwait: false,
|
||
overseasIraq: false,
|
||
overseasBahrain: false,
|
||
});
|
||
|
||
// Korea tab layer visibility (lifted from KoreaMap)
|
||
const [koreaLayers, setKoreaLayers] = useState<Record<string, boolean>>({
|
||
ships: true,
|
||
aircraft: true,
|
||
satellites: true,
|
||
infra: true,
|
||
cables: true,
|
||
cctv: true,
|
||
airports: true,
|
||
coastGuard: true,
|
||
navWarning: true,
|
||
osint: true,
|
||
eez: true,
|
||
piracy: true,
|
||
windFarm: true,
|
||
ports: true,
|
||
militaryBases: true,
|
||
govBuildings: true,
|
||
nkLaunch: true,
|
||
nkMissile: true,
|
||
cnFishing: false,
|
||
militaryOnly: false,
|
||
overseasChina: false,
|
||
overseasJapan: false,
|
||
cnPower: false,
|
||
cnMilitary: false,
|
||
jpPower: false,
|
||
jpMilitary: false,
|
||
hazardPetrochemical: false,
|
||
hazardLng: false,
|
||
hazardOilTank: false,
|
||
hazardPort: false,
|
||
energyNuclear: false,
|
||
energyThermal: false,
|
||
industryShipyard: false,
|
||
industryWastewater: false,
|
||
industryHeavy: false,
|
||
});
|
||
|
||
const toggleKoreaLayer = useCallback((key: string) => {
|
||
setKoreaLayers(prev => ({ ...prev, [key]: !prev[key] }));
|
||
}, []);
|
||
|
||
// Category filter state (shared across tabs)
|
||
const [hiddenAcCategories, setHiddenAcCategories] = useState<Set<string>>(new Set());
|
||
const [hiddenShipCategories, setHiddenShipCategories] = useState<Set<string>>(new Set());
|
||
|
||
const toggleAcCategory = useCallback((cat: string) => {
|
||
setHiddenAcCategories(prev => {
|
||
const next = new Set(prev);
|
||
if (next.has(cat)) { next.delete(cat); } else { next.add(cat); }
|
||
return next;
|
||
});
|
||
}, []);
|
||
|
||
const toggleShipCategory = useCallback((cat: string) => {
|
||
setHiddenShipCategories(prev => {
|
||
const next = new Set(prev);
|
||
if (next.has(cat)) { next.delete(cat); } else { next.add(cat); }
|
||
return next;
|
||
});
|
||
}, []);
|
||
|
||
// Nationality filter state (Korea tab)
|
||
const [hiddenNationalities, setHiddenNationalities] = useState<Set<string>>(new Set());
|
||
const toggleNationality = useCallback((nat: string) => {
|
||
setHiddenNationalities(prev => {
|
||
const next = new Set(prev);
|
||
if (next.has(nat)) { next.delete(nat); } else { next.add(nat); }
|
||
return next;
|
||
});
|
||
}, []);
|
||
|
||
// Fishing vessel nationality filter state
|
||
const [hiddenFishingNats, setHiddenFishingNats] = useState<Set<string>>(new Set());
|
||
const toggleFishingNat = useCallback((nat: string) => {
|
||
setHiddenFishingNats(prev => {
|
||
const next = new Set(prev);
|
||
if (next.has(nat)) { next.delete(nat); } else { next.add(nat); }
|
||
return next;
|
||
});
|
||
}, []);
|
||
|
||
const [flyToTarget, setFlyToTarget] = useState<FlyToTarget | null>(null);
|
||
|
||
// 1시간마다 전체 데이터 강제 리프레시
|
||
const [refreshKey, setRefreshKey] = useState(0);
|
||
useEffect(() => {
|
||
const HOUR_MS = 3600_000;
|
||
const interval = setInterval(() => {
|
||
setRefreshKey(k => k + 1);
|
||
}, HOUR_MS);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
const [showCollectorMonitor, setShowCollectorMonitor] = useState(false);
|
||
const [showFieldAnalysis, setShowFieldAnalysis] = useState(false);
|
||
const [timeZone, setTimeZone] = useState<'KST' | 'UTC'>('KST');
|
||
const [hoveredShipMmsi, setHoveredShipMmsi] = useState<string | null>(null);
|
||
const [focusShipMmsi, setFocusShipMmsi] = useState<string | null>(null);
|
||
const [seismicMarker, setSeismicMarker] = useState<{ lat: number; lng: number; magnitude: number; place: string } | null>(null);
|
||
|
||
const replay = useReplay();
|
||
const monitor = useMonitor();
|
||
const { theme, toggleTheme } = useTheme();
|
||
const { t, i18n } = useTranslation();
|
||
const toggleLang = useCallback(() => {
|
||
i18n.changeLanguage(i18n.language === 'ko' ? 'en' : 'ko');
|
||
}, [i18n]);
|
||
|
||
const isLive = appMode === 'live';
|
||
|
||
// Unified time values based on current mode
|
||
const currentTime = appMode === 'live' ? monitor.state.currentTime : replay.state.currentTime;
|
||
|
||
// Iran data hook
|
||
const iranData = useIranData({
|
||
appMode,
|
||
currentTime,
|
||
isLive,
|
||
hiddenAcCategories,
|
||
hiddenShipCategories,
|
||
refreshKey,
|
||
dashboardTab,
|
||
});
|
||
|
||
// Korea data hook
|
||
const koreaData = useKoreaData({
|
||
currentTime,
|
||
isLive,
|
||
hiddenAcCategories,
|
||
hiddenShipCategories,
|
||
hiddenNationalities,
|
||
refreshKey,
|
||
});
|
||
|
||
// Vessel analysis (Python prediction 결과)
|
||
const vesselAnalysis = useVesselAnalysis(dashboardTab === 'korea');
|
||
|
||
// Korea filters hook
|
||
const koreaFiltersResult = useKoreaFilters(
|
||
koreaData.ships,
|
||
koreaData.visibleShips,
|
||
currentTime,
|
||
vesselAnalysis.analysisMap,
|
||
);
|
||
|
||
const toggleLayer = useCallback((key: keyof LayerVisibility) => {
|
||
setLayers(prev => ({ ...prev, [key]: !prev[key] }));
|
||
}, []);
|
||
|
||
// Handle event card click from timeline: fly to location on map
|
||
const handleEventFlyTo = useCallback((event: GeoEvent) => {
|
||
setFlyToTarget({ lat: event.lat, lng: event.lng, zoom: 8 });
|
||
}, []);
|
||
|
||
return (
|
||
<div className={`app ${isLive ? 'app-live' : ''}`}>
|
||
<header className="app-header">
|
||
{/* Dashboard Tabs (replaces title) */}
|
||
<div className="dash-tabs">
|
||
<button
|
||
type="button"
|
||
className={`dash-tab ${dashboardTab === 'iran' ? 'active' : ''}`}
|
||
onClick={() => setDashboardTab('iran')}
|
||
>
|
||
<span className="dash-tab-flag">🇮🇷</span>
|
||
{t('tabs.iran')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`dash-tab ${dashboardTab === 'korea' ? 'active' : ''}`}
|
||
onClick={() => setDashboardTab('korea')}
|
||
>
|
||
<span className="dash-tab-flag">🇰🇷</span>
|
||
{t('tabs.korea')}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Mode Toggle */}
|
||
{dashboardTab === 'iran' && (
|
||
<div className="mode-toggle">
|
||
<div className="flex items-center gap-1.5 font-mono text-[11px] text-kcg-danger bg-kcg-danger-bg border border-kcg-danger/30 rounded-[6px] px-2.5 py-1 font-bold animate-pulse">
|
||
<span className="text-[13px]">⚔️</span>
|
||
D+{Math.floor((currentTime - new Date('2026-03-01T00:00:00Z').getTime()) / (1000 * 60 * 60 * 24))}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className={`mode-btn ${appMode === 'live' ? 'active live' : ''}`}
|
||
onClick={() => setAppMode('live')}
|
||
>
|
||
<span className="mode-dot-icon" />
|
||
{t('mode.live')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`mode-btn ${appMode === 'replay' ? 'active' : ''}`}
|
||
onClick={() => setAppMode('replay')}
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21" /></svg>
|
||
{t('mode.replay')}
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{dashboardTab === 'korea' && (
|
||
<div className="mode-toggle">
|
||
<button
|
||
type="button"
|
||
className={`mode-btn ${koreaFiltersResult.filters.illegalFishing ? 'active live' : ''}`}
|
||
onClick={() => koreaFiltersResult.setFilter('illegalFishing', !koreaFiltersResult.filters.illegalFishing)}
|
||
title={t('filters.illegalFishing')}
|
||
>
|
||
<span className="text-[11px]">🚫🐟</span>
|
||
{t('filters.illegalFishing')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`mode-btn ${koreaFiltersResult.filters.illegalTransship ? 'active live' : ''}`}
|
||
onClick={() => koreaFiltersResult.setFilter('illegalTransship', !koreaFiltersResult.filters.illegalTransship)}
|
||
title={t('filters.illegalTransship')}
|
||
>
|
||
<span className="text-[11px]">⚓</span>
|
||
{t('filters.illegalTransship')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`mode-btn ${koreaFiltersResult.filters.darkVessel ? 'active live' : ''}`}
|
||
onClick={() => koreaFiltersResult.setFilter('darkVessel', !koreaFiltersResult.filters.darkVessel)}
|
||
title={t('filters.darkVessel')}
|
||
>
|
||
<span className="text-[11px]">👻</span>
|
||
{t('filters.darkVessel')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`mode-btn ${koreaFiltersResult.filters.cableWatch ? 'active live' : ''}`}
|
||
onClick={() => koreaFiltersResult.setFilter('cableWatch', !koreaFiltersResult.filters.cableWatch)}
|
||
title={t('filters.cableWatch')}
|
||
>
|
||
<span className="text-[11px]">🔌</span>
|
||
{t('filters.cableWatch')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`mode-btn ${koreaFiltersResult.filters.dokdoWatch ? 'active live' : ''}`}
|
||
onClick={() => koreaFiltersResult.setFilter('dokdoWatch', !koreaFiltersResult.filters.dokdoWatch)}
|
||
title={t('filters.dokdoWatch')}
|
||
>
|
||
<span className="text-[11px]">🏝️</span>
|
||
{t('filters.dokdoWatch')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`mode-btn ${koreaFiltersResult.filters.ferryWatch ? 'active live' : ''}`}
|
||
onClick={() => koreaFiltersResult.setFilter('ferryWatch', !koreaFiltersResult.filters.ferryWatch)}
|
||
title={t('filters.ferryWatch')}
|
||
>
|
||
<span className="text-[11px]">🚢</span>
|
||
{t('filters.ferryWatch')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`mode-btn ${koreaLayers.cnFishing ? 'active live' : ''}`}
|
||
onClick={() => toggleKoreaLayer('cnFishing')}
|
||
title="중국어선감시"
|
||
>
|
||
<span className="text-[11px]">🎣</span>
|
||
중국어선감시
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`mode-btn ${showFieldAnalysis ? 'active' : ''}`}
|
||
onClick={() => setShowFieldAnalysis(v => !v)}
|
||
title="현장분석"
|
||
>
|
||
<span className="text-[11px]">📊</span>
|
||
현장분석
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{dashboardTab === 'iran' && (
|
||
<div className="map-mode-toggle">
|
||
<button
|
||
type="button"
|
||
className={`map-mode-btn ${mapMode === 'flat' ? 'active' : ''}`}
|
||
onClick={() => setMapMode('flat')}
|
||
>
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="12" rx="1" stroke="currentColor" strokeWidth="1.5"/><line x1="1" y1="5" x2="13" y2="5" stroke="currentColor" strokeWidth="1"/><line x1="1" y1="9" x2="13" y2="9" stroke="currentColor" strokeWidth="1"/><line x1="5" y1="1" x2="5" y2="13" stroke="currentColor" strokeWidth="1"/><line x1="9" y1="1" x2="9" y2="13" stroke="currentColor" strokeWidth="1"/></svg>
|
||
{t('mapMode.flat')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`map-mode-btn ${mapMode === 'globe' ? 'active' : ''}`}
|
||
onClick={() => setMapMode('globe')}
|
||
>
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6" stroke="currentColor" strokeWidth="1.5"/><ellipse cx="7" cy="7" rx="3" ry="6" stroke="currentColor" strokeWidth="1"/><line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" strokeWidth="1"/></svg>
|
||
{t('mapMode.globe')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`map-mode-btn ${mapMode === 'satellite' ? 'active' : ''}`}
|
||
onClick={() => setMapMode('satellite')}
|
||
>
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6" stroke="currentColor" strokeWidth="1.5"/><path d="M3 4.5C4.5 3 6 2.5 7 2.5s3 1 4.5 2.5" stroke="currentColor" strokeWidth="0.8"/><path d="M2.5 7.5C4 6 6 5 7 5s3.5 1 5 2.5" stroke="currentColor" strokeWidth="0.8"/><path d="M3 10C4.5 8.5 6 8 7 8s3 .5 4 1.5" stroke="currentColor" strokeWidth="0.8"/><circle cx="7" cy="6" r="1.5" fill="currentColor" opacity="0.3"/></svg>
|
||
{t('mapMode.satellite')}
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<div className="header-info">
|
||
<div className="header-counts">
|
||
<span className="count-item ac-count">{dashboardTab === 'iran' ? iranData.aircraft.length : koreaData.aircraft.length} AC</span>
|
||
<span className="count-item mil-count">{dashboardTab === 'iran' ? iranData.militaryCount : koreaData.militaryCount} MIL</span>
|
||
<span className="count-item ship-count">{dashboardTab === 'iran' ? iranData.ships.length : koreaData.ships.length} SHIP</span>
|
||
<span className="count-item sat-count">{dashboardTab === 'iran' ? iranData.satPositions.length : koreaData.satPositions.length} SAT</span>
|
||
</div>
|
||
<div className="header-toggles">
|
||
<button
|
||
type="button"
|
||
className="header-toggle-btn"
|
||
onClick={() => setShowCollectorMonitor(v => !v)}
|
||
title="수집기 모니터링"
|
||
>
|
||
MON
|
||
</button>
|
||
<button type="button" className="header-toggle-btn" onClick={toggleLang} title="Language">
|
||
{i18n.language === 'ko' ? 'KO' : 'EN'}
|
||
</button>
|
||
<button type="button" className="header-toggle-btn" onClick={toggleTheme} title="Theme">
|
||
{theme === 'dark' ? '🌙' : '☀️'}
|
||
</button>
|
||
</div>
|
||
<div className="header-status">
|
||
<span className={`status-dot ${isLive ? 'live' : replay.state.isPlaying ? 'live' : ''}`} />
|
||
{isLive ? t('header.live') : replay.state.isPlaying ? t('header.replaying') : t('header.paused')}
|
||
</div>
|
||
{user && (
|
||
<div className="header-user">
|
||
{user.picture && (
|
||
<img src={user.picture} alt="" className="header-user-avatar" referrerPolicy="no-referrer" />
|
||
)}
|
||
<span className="header-user-name">{user.name}</span>
|
||
<button type="button" className="header-toggle-btn" onClick={onLogout} title="Logout">
|
||
⏻
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</header>
|
||
|
||
{/* ═══════════════════════════════════════
|
||
IRAN DASHBOARD
|
||
═══════════════════════════════════════ */}
|
||
{dashboardTab === 'iran' && (
|
||
<>
|
||
<main className="app-main">
|
||
<div className="map-panel">
|
||
{mapMode === 'flat' ? (
|
||
<ReplayMap
|
||
key="map-iran"
|
||
events={isLive ? [] : iranData.mergedEvents}
|
||
currentTime={currentTime}
|
||
aircraft={iranData.visibleAircraft}
|
||
satellites={iranData.satPositions}
|
||
ships={iranData.visibleShips}
|
||
layers={layers}
|
||
flyToTarget={flyToTarget}
|
||
onFlyToDone={() => setFlyToTarget(null)}
|
||
hoveredShipMmsi={hoveredShipMmsi}
|
||
focusShipMmsi={focusShipMmsi}
|
||
onFocusShipClear={() => setFocusShipMmsi(null)}
|
||
seismicMarker={seismicMarker}
|
||
/>
|
||
) : mapMode === 'globe' ? (
|
||
<GlobeMap
|
||
events={isLive ? [] : iranData.mergedEvents}
|
||
currentTime={currentTime}
|
||
aircraft={iranData.visibleAircraft}
|
||
satellites={iranData.satPositions}
|
||
ships={iranData.visibleShips}
|
||
layers={layers}
|
||
/>
|
||
) : (
|
||
<SatelliteMap
|
||
events={isLive ? [] : iranData.mergedEvents}
|
||
currentTime={currentTime}
|
||
aircraft={iranData.visibleAircraft}
|
||
satellites={iranData.satPositions}
|
||
ships={iranData.visibleShips}
|
||
layers={layers}
|
||
hoveredShipMmsi={hoveredShipMmsi}
|
||
focusShipMmsi={focusShipMmsi}
|
||
onFocusShipClear={() => setFocusShipMmsi(null)}
|
||
flyToTarget={flyToTarget}
|
||
onFlyToDone={() => setFlyToTarget(null)}
|
||
seismicMarker={seismicMarker}
|
||
/>
|
||
)}
|
||
<div className="map-overlay-left">
|
||
<LayerPanel
|
||
layers={layers as unknown as Record<string, boolean>}
|
||
onToggle={toggleLayer as (key: string) => void}
|
||
aircraftByCategory={iranData.aircraftByCategory}
|
||
aircraftTotal={iranData.aircraft.length}
|
||
shipsByMtCategory={iranData.shipsByCategory}
|
||
shipTotal={iranData.ships.length}
|
||
satelliteCount={iranData.satPositions.length}
|
||
extraLayers={[
|
||
{ key: 'events', label: t('layers.events'), color: '#a855f7' },
|
||
{ key: 'koreanShips', label: `\u{1F1F0}\u{1F1F7} ${t('layers.koreanShips')}`, color: '#00e5ff', count: iranData.koreanShips.length },
|
||
{ key: 'airports', label: t('layers.airports'), color: '#f59e0b' },
|
||
{ key: 'oilFacilities', label: t('layers.oilFacilities'), color: '#d97706' },
|
||
{ key: 'meFacilities', label: '주요시설/군사', color: '#ef4444', count: 35 },
|
||
{ key: 'sensorCharts', label: t('layers.sensorCharts'), color: '#22c55e' },
|
||
]}
|
||
overseasItems={[
|
||
{ key: 'overseasUS', label: '🇺🇸 미국', color: '#3b82f6' },
|
||
{ key: 'overseasUK', label: '🇬🇧 영국', color: '#dc2626' },
|
||
{ key: 'overseasIran', label: '🇮🇷 이란', color: '#22c55e' },
|
||
{ key: 'overseasUAE', label: '🇦🇪 UAE', color: '#f59e0b' },
|
||
{ key: 'overseasSaudi', label: '🇸🇦 사우디아라비아', color: '#84cc16' },
|
||
{ key: 'overseasOman', label: '🇴🇲 오만', color: '#e11d48' },
|
||
{ key: 'overseasQatar', label: '🇶🇦 카타르', color: '#8b5cf6' },
|
||
{ key: 'overseasKuwait', label: '🇰🇼 쿠웨이트', color: '#f97316' },
|
||
{ key: 'overseasIraq', label: '🇮🇶 이라크', color: '#65a30d' },
|
||
{ key: 'overseasBahrain', label: '🇧🇭 바레인', color: '#e11d48' },
|
||
]}
|
||
hiddenAcCategories={hiddenAcCategories}
|
||
hiddenShipCategories={hiddenShipCategories}
|
||
onAcCategoryToggle={toggleAcCategory}
|
||
onShipCategoryToggle={toggleShipCategory}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<aside className="side-panel">
|
||
<EventLog
|
||
events={isLive ? [] : iranData.mergedEvents}
|
||
currentTime={currentTime}
|
||
totalShipCount={iranData.ships.length}
|
||
koreanShips={iranData.koreanShips}
|
||
koreanShipsByCategory={iranData.koreanShipsByCategory}
|
||
osintFeed={iranData.osintFeed}
|
||
isLive={isLive}
|
||
dashboardTab={dashboardTab}
|
||
onTabChange={setDashboardTab}
|
||
ships={iranData.ships}
|
||
highlightKoreanShips={layers.koreanShips}
|
||
onToggleHighlightKorean={() => setLayers(prev => ({ ...prev, koreanShips: !prev.koreanShips }))}
|
||
onShipHover={setHoveredShipMmsi}
|
||
onShipClick={(mmsi) => {
|
||
setFocusShipMmsi(mmsi);
|
||
const ship = iranData.ships.find(s => s.mmsi === mmsi);
|
||
if (ship) setFlyToTarget({ lat: ship.lat, lng: ship.lng, zoom: 10 });
|
||
}}
|
||
/>
|
||
</aside>
|
||
</main>
|
||
|
||
{layers.sensorCharts && (
|
||
<section className="charts-panel">
|
||
<SensorChart
|
||
seismicData={iranData.seismicData}
|
||
pressureData={iranData.pressureData}
|
||
currentTime={currentTime}
|
||
historyMinutes={monitor.state.historyMinutes}
|
||
onSeismicClick={(lat, lng, magnitude, place) => {
|
||
setFlyToTarget({ lat, lng, zoom: 8 });
|
||
setSeismicMarker({ lat, lng, magnitude, place });
|
||
}}
|
||
/>
|
||
</section>
|
||
)}
|
||
|
||
<footer className="app-footer">
|
||
{isLive ? (
|
||
<LiveControls
|
||
currentTime={monitor.state.currentTime}
|
||
historyMinutes={monitor.state.historyMinutes}
|
||
onHistoryChange={monitor.setHistoryMinutes}
|
||
aircraftCount={iranData.aircraft.length}
|
||
shipCount={iranData.ships.length}
|
||
satelliteCount={iranData.satPositions.length}
|
||
timeZone={timeZone}
|
||
onTimeZoneChange={setTimeZone}
|
||
/>
|
||
) : (
|
||
<>
|
||
<ReplayControls
|
||
isPlaying={replay.state.isPlaying}
|
||
speed={replay.state.speed}
|
||
startTime={replay.state.startTime}
|
||
endTime={replay.state.endTime}
|
||
onPlay={replay.play}
|
||
onPause={replay.pause}
|
||
onReset={replay.reset}
|
||
onSpeedChange={replay.setSpeed}
|
||
onRangeChange={replay.setRange}
|
||
/>
|
||
<TimelineSlider
|
||
currentTime={replay.state.currentTime}
|
||
startTime={replay.state.startTime}
|
||
endTime={replay.state.endTime}
|
||
events={iranData.mergedEvents}
|
||
onSeek={replay.seek}
|
||
onEventFlyTo={handleEventFlyTo}
|
||
/>
|
||
</>
|
||
)}
|
||
|
||
</footer>
|
||
</>
|
||
)}
|
||
|
||
{/* ═══════════════════════════════════════
|
||
KOREA DASHBOARD
|
||
═══════════════════════════════════════ */}
|
||
{dashboardTab === 'korea' && (
|
||
<>
|
||
<main className="app-main">
|
||
<div className="map-panel">
|
||
{showFieldAnalysis && (
|
||
<FieldAnalysisModal ships={koreaData.ships} vesselAnalysis={vesselAnalysis} onClose={() => setShowFieldAnalysis(false)} />
|
||
)}
|
||
<KoreaMap
|
||
ships={koreaFiltersResult.filteredShips}
|
||
allShips={koreaData.visibleShips}
|
||
aircraft={koreaData.visibleAircraft}
|
||
satellites={koreaData.satPositions}
|
||
layers={koreaLayers}
|
||
osintFeed={koreaData.osintFeed}
|
||
currentTime={currentTime}
|
||
koreaFilters={koreaFiltersResult.filters}
|
||
transshipSuspects={koreaFiltersResult.transshipSuspects}
|
||
cableWatchSuspects={koreaFiltersResult.cableWatchSuspects}
|
||
dokdoWatchSuspects={koreaFiltersResult.dokdoWatchSuspects}
|
||
dokdoAlerts={koreaFiltersResult.dokdoAlerts}
|
||
vesselAnalysis={vesselAnalysis}
|
||
/>
|
||
<div className="map-overlay-left">
|
||
<LayerPanel
|
||
layers={koreaLayers}
|
||
onToggle={toggleKoreaLayer}
|
||
aircraftByCategory={koreaData.aircraftByCategory}
|
||
aircraftTotal={koreaData.aircraft.length}
|
||
shipsByMtCategory={koreaData.shipsByCategory}
|
||
shipTotal={koreaData.ships.length}
|
||
satelliteCount={koreaData.satPositions.length}
|
||
extraLayers={[
|
||
// 해양안전
|
||
{ key: 'cables', label: t('layers.cables'), color: '#00e5ff', count: KOREA_SUBMARINE_CABLES.length, group: '해양안전' },
|
||
{ key: 'coastGuard', label: t('layers.coastGuard'), color: '#4dabf7', count: COAST_GUARD_FACILITIES.length, group: '해양안전' },
|
||
{ key: 'navWarning', label: t('layers.navWarning'), color: '#eab308', count: NAV_WARNINGS.length, group: '해양안전' },
|
||
{ key: 'osint', label: t('layers.osint'), color: '#ef4444', count: koreaData.osintFeed.length, group: '해양안전' },
|
||
{ key: 'eez', label: t('layers.eez'), color: '#3b82f6', count: 1, group: '해양안전' },
|
||
{ key: 'piracy', label: t('layers.piracy'), color: '#ef4444', count: PIRACY_ZONES.length, group: '해양안전' },
|
||
{ key: 'nkMissile', label: '🚀 미사일 낙하', color: '#ef4444', count: NK_MISSILE_EVENTS.length, group: '해양안전' },
|
||
{ key: 'nkLaunch', label: '🇰🇵 발사/포병진지', color: '#dc2626', count: NK_LAUNCH_SITES.length, group: '해양안전' },
|
||
// 국가기관망
|
||
{ key: 'ports', label: '항구', color: '#3b82f6', count: EAST_ASIA_PORTS.length, group: '국가기관망' },
|
||
{ key: 'airports', label: t('layers.airports'), color: '#a78bfa', count: KOREAN_AIRPORTS.length, group: '국가기관망' },
|
||
{ key: 'militaryBases', label: '군사시설', color: '#ef4444', count: MILITARY_BASES.length, group: '국가기관망' },
|
||
{ key: 'govBuildings', label: '정부기관', color: '#f59e0b', count: GOV_BUILDINGS.length, group: '국가기관망' },
|
||
// 에너지/발전시설
|
||
{ key: 'infra', label: t('layers.infra'), color: '#ffc107', group: '에너지/발전시설' },
|
||
{ key: 'windFarm', label: '풍력단지', color: '#00bcd4', count: KOREA_WIND_FARMS.length, group: '에너지/발전시설' },
|
||
{ key: 'energyNuclear', label: '원자력발전', color: '#a855f7', count: HAZARD_FACILITIES.filter(f => f.type === 'nuclear').length, group: '에너지/발전시설' },
|
||
{ key: 'energyThermal', label: '화력발전소', color: '#64748b', count: HAZARD_FACILITIES.filter(f => f.type === 'thermal').length, group: '에너지/발전시설' },
|
||
// 위험시설
|
||
{ key: 'hazardPetrochemical', label: '해안인접석유화학단지', color: '#f97316', count: HAZARD_FACILITIES.filter(f => f.type === 'petrochemical').length, group: '위험시설' },
|
||
{ key: 'hazardLng', label: 'LNG저장기지', color: '#06b6d4', count: HAZARD_FACILITIES.filter(f => f.type === 'lng').length, group: '위험시설' },
|
||
{ key: 'hazardOilTank', label: '유류저장탱크', color: '#eab308', count: HAZARD_FACILITIES.filter(f => f.type === 'oilTank').length, group: '위험시설' },
|
||
{ key: 'hazardPort', label: '위험물항만하역시설', color: '#ef4444', count: HAZARD_FACILITIES.filter(f => f.type === 'hazardPort').length, group: '위험시설' },
|
||
// 산업공정/제조시설
|
||
{ key: 'industryShipyard', label: '조선소 도장시설', color: '#0ea5e9', count: HAZARD_FACILITIES.filter(f => f.type === 'shipyard').length, group: '산업공정/제조시설' },
|
||
{ key: 'industryWastewater', label: '폐수/하수처리장', color: '#10b981', count: HAZARD_FACILITIES.filter(f => f.type === 'wastewater').length, group: '산업공정/제조시설' },
|
||
{ key: 'industryHeavy', label: '시멘트/제철소', color: '#94a3b8', count: HAZARD_FACILITIES.filter(f => f.type === 'heavyIndustry').length, group: '산업공정/제조시설' },
|
||
]}
|
||
overseasItems={[
|
||
{
|
||
key: 'overseasChina', label: '🇨🇳 중국', color: '#ef4444',
|
||
count: CN_POWER_PLANTS.length + CN_MILITARY_FACILITIES.length,
|
||
children: [
|
||
{ key: 'cnPower', label: '발전소', color: '#a855f7', count: CN_POWER_PLANTS.length },
|
||
{ key: 'cnMilitary', label: '주요군사시설', color: '#ef4444', count: CN_MILITARY_FACILITIES.length },
|
||
],
|
||
},
|
||
{
|
||
key: 'overseasJapan', label: '🇯🇵 일본', color: '#f472b6',
|
||
count: JP_POWER_PLANTS.length + JP_MILITARY_FACILITIES.length,
|
||
children: [
|
||
{ key: 'jpPower', label: '발전소', color: '#a855f7', count: JP_POWER_PLANTS.length },
|
||
{ key: 'jpMilitary', label: '주요군사시설', color: '#ef4444', count: JP_MILITARY_FACILITIES.length },
|
||
],
|
||
},
|
||
]}
|
||
hiddenAcCategories={hiddenAcCategories}
|
||
hiddenShipCategories={hiddenShipCategories}
|
||
onAcCategoryToggle={toggleAcCategory}
|
||
onShipCategoryToggle={toggleShipCategory}
|
||
shipsByNationality={koreaData.shipsByNationality}
|
||
hiddenNationalities={hiddenNationalities}
|
||
onNationalityToggle={toggleNationality}
|
||
fishingByNationality={koreaData.fishingByNationality}
|
||
hiddenFishingNats={hiddenFishingNats}
|
||
onFishingNatToggle={toggleFishingNat}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<aside className="side-panel">
|
||
<EventLog
|
||
events={isLive ? [] : iranData.events}
|
||
currentTime={currentTime}
|
||
totalShipCount={koreaData.ships.length}
|
||
koreanShips={koreaData.koreaKoreanShips}
|
||
koreanShipsByCategory={koreaData.shipsByCategory}
|
||
chineseShips={koreaData.koreaChineseShips}
|
||
osintFeed={koreaData.osintFeed}
|
||
isLive={isLive}
|
||
dashboardTab={dashboardTab}
|
||
onTabChange={setDashboardTab}
|
||
ships={koreaData.ships}
|
||
/>
|
||
</aside>
|
||
</main>
|
||
|
||
<footer className="app-footer">
|
||
{isLive ? (
|
||
<LiveControls
|
||
currentTime={monitor.state.currentTime}
|
||
historyMinutes={monitor.state.historyMinutes}
|
||
onHistoryChange={monitor.setHistoryMinutes}
|
||
aircraftCount={koreaData.aircraft.length}
|
||
shipCount={koreaData.ships.length}
|
||
satelliteCount={koreaData.satPositions.length}
|
||
timeZone={timeZone}
|
||
onTimeZoneChange={setTimeZone}
|
||
/>
|
||
) : (
|
||
<>
|
||
<ReplayControls
|
||
isPlaying={replay.state.isPlaying}
|
||
speed={replay.state.speed}
|
||
startTime={replay.state.startTime}
|
||
endTime={replay.state.endTime}
|
||
onPlay={replay.play}
|
||
onPause={replay.pause}
|
||
onReset={replay.reset}
|
||
onSpeedChange={replay.setSpeed}
|
||
onRangeChange={replay.setRange}
|
||
/>
|
||
<TimelineSlider
|
||
currentTime={replay.state.currentTime}
|
||
startTime={replay.state.startTime}
|
||
endTime={replay.state.endTime}
|
||
events={iranData.mergedEvents}
|
||
onSeek={replay.seek}
|
||
onEventFlyTo={handleEventFlyTo}
|
||
/>
|
||
</>
|
||
)}
|
||
</footer>
|
||
</>
|
||
)}
|
||
|
||
{showCollectorMonitor && (
|
||
<CollectorMonitor onClose={() => setShowCollectorMonitor(false)} />
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default App;
|