From 19e5ff23aad9190c50d507e13e0bed0d07840a4c Mon Sep 17 00:00:00 2001
From: htlee <htlee@gcsc.co.kr>
Date: Mon, 23 Mar 2026 10:06:58 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20Phase=201=20=EC=99=84=EB=A3=8C=20?=
 =?UTF-8?q?=E2=80=94=20App.tsx=20=EB=B6=84=ED=95=B4=20(771=EC=A4=84?=
 =?UTF-8?q?=E2=86=92163=EC=A4=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- App.tsx: 탭 전환 + 공통 헤더(MON/LANG/THEME) + SharedFilterProvider만 유지
- IranDashboard: 이란 전용 상태/JSX + 헤더 Portal (모드토글/맵모드/카운트)
- KoreaDashboard: 한국 전용 상태/JSX + 헤더 Portal (필터버튼/카운트)
- SharedFilterContext: hiddenAcCategories/hiddenShipCategories 공유 상태
- useSharedFilters: Context 소비 훅 (react-refresh 호환)
- showFieldAnalysis를 KoreaDashboard 내부로 이동
- 헤더 슬롯(dashboard-header-slot/dashboard-counts-slot)으로 탭별 UI Portal
---
 frontend/src/App.tsx                          | 780 ++----------------
 .../src/components/iran/IranDashboard.tsx     |  57 +-
 .../src/components/korea/KoreaDashboard.tsx   |  58 +-
 3 files changed, 192 insertions(+), 703 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d94524a..d97bd9e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,43 +1,15 @@
 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 type { 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 { SharedFilterProvider } from './contexts/SharedFilterContext';
+import { IranDashboard } from './components/iran/IranDashboard';
+import { KoreaDashboard } from './components/korea/KoreaDashboard';
 import './App.css';
 
 function App() {
@@ -68,133 +40,18 @@ interface AuthenticatedAppProps {
 
 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);
+  const [showCollectorMonitor, setShowCollectorMonitor] = useState(false);
+  const [timeZone, setTimeZone] = useState<'KST' | 'UTC'>('KST');
 
   // 1시간마다 전체 데이터 강제 리프레시
   const [refreshKey, setRefreshKey] = useState(0);
   useEffect(() => {
     const HOUR_MS = 3600_000;
-    const interval = setInterval(() => {
-      setRefreshKey(k => k + 1);
-    }, HOUR_MS);
+    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();
@@ -204,567 +61,102 @@ function AuthenticatedApp({ user, onLogout }: AuthenticatedAppProps) {
   }, [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 });
-  }, []);
+  const currentTime = isLive ? monitor.state.currentTime : replay.state.currentTime;
 
   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>
+    <SharedFilterProvider>
+      <div className={`app ${isLive ? 'app-live' : ''}`}>
+        <header className="app-header">
+          {/* Dashboard Tabs */}
+          <div className="dash-tabs">
             <button
               type="button"
-              className={`mode-btn ${appMode === 'live' ? 'active live' : ''}`}
-              onClick={() => setAppMode('live')}
+              className={`dash-tab ${dashboardTab === 'iran' ? 'active' : ''}`}
+              onClick={() => setDashboardTab('iran')}
             >
-              <span className="mode-dot-icon" />
-              {t('mode.live')}
+              <span className="dash-tab-flag">🇮🇷</span>
+              {t('tabs.iran')}
             </button>
             <button
               type="button"
-              className={`mode-btn ${appMode === 'replay' ? 'active' : ''}`}
-              onClick={() => setAppMode('replay')}
+              className={`dash-tab ${dashboardTab === 'korea' ? 'active' : ''}`}
+              onClick={() => setDashboardTab('korea')}
             >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21" /></svg>
-              {t('mode.replay')}
+              <span className="dash-tab-flag">🇰🇷</span>
+              {t('tabs.korea')}
             </button>
           </div>
+
+          {/* 탭별 모드/필터 영역 — 각 대시보드가 headerSlot으로 렌더링 */}
+          <div id="dashboard-header-slot" />
+
+          <div className="header-info">
+            <div id="dashboard-counts-slot" />
+            <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>
+
+        {dashboardTab === 'iran' && (
+          <IranDashboard
+            currentTime={currentTime}
+            isLive={isLive}
+            refreshKey={refreshKey}
+            replay={replay}
+            monitor={monitor}
+            timeZone={timeZone}
+            onTimeZoneChange={setTimeZone}
+            appMode={appMode}
+            onAppModeChange={setAppMode}
+          />
         )}
 
         {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>
+          <KoreaDashboard
+            currentTime={currentTime}
+            isLive={isLive}
+            refreshKey={refreshKey}
+            replay={replay}
+            monitor={monitor}
+            timeZone={timeZone}
+            onTimeZoneChange={setTimeZone}
+          />
         )}
 
-        {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>
+        {showCollectorMonitor && (
+          <CollectorMonitor onClose={() => setShowCollectorMonitor(false)} />
         )}
-
-        <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>
+      </div>
+    </SharedFilterProvider>
   );
 }
 
diff --git a/frontend/src/components/iran/IranDashboard.tsx b/frontend/src/components/iran/IranDashboard.tsx
index f40a4cf..ae63a59 100644
--- a/frontend/src/components/iran/IranDashboard.tsx
+++ b/frontend/src/components/iran/IranDashboard.tsx
@@ -1,4 +1,5 @@
 import { useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { ReplayMap } from './ReplayMap';
 import type { FlyToTarget } from './ReplayMap';
 import { GlobeMap } from './GlobeMap';
@@ -39,6 +40,8 @@ interface IranDashboardProps {
   };
   timeZone: 'KST' | 'UTC';
   onTimeZoneChange: (tz: 'KST' | 'UTC') => void;
+  appMode: AppMode;
+  onAppModeChange: (mode: AppMode) => void;
 }
 
 const INITIAL_LAYERS: LayerVisibility = {
@@ -64,8 +67,6 @@ const INITIAL_LAYERS: LayerVisibility = {
   overseasBahrain: false,
 };
 
-const appModeFromIsLive = (isLive: boolean): AppMode => (isLive ? 'live' : 'replay');
-
 const IranDashboard = ({
   currentTime,
   isLive,
@@ -74,10 +75,12 @@ const IranDashboard = ({
   monitor,
   timeZone,
   onTimeZoneChange,
+  appMode,
+  onAppModeChange,
 }: IranDashboardProps) => {
   const { t } = useTranslation();
 
-  const [mapMode, _setMapMode] = useState<'flat' | 'globe' | 'satellite'>('satellite');
+  const [mapMode, setMapMode] = useState<'flat' | 'globe' | 'satellite'>('satellite');
   const [layers, setLayers] = useState<LayerVisibility>(INITIAL_LAYERS);
   const [seismicMarker, setSeismicMarker] = useState<{
     lat: number;
@@ -93,7 +96,7 @@ const IranDashboard = ({
     useSharedFilters();
 
   const iranData = useIranData({
-    appMode: appModeFromIsLive(isLive),
+    appMode,
     currentTime,
     isLive,
     hiddenAcCategories,
@@ -110,8 +113,54 @@ const IranDashboard = ({
     setFlyToTarget({ lat: event.lat, lng: event.lng, zoom: 8 });
   }, []);
 
+  // 헤더 슬롯 Portal — 이란 모드 토글 + 맵 모드 + 카운트
+  const headerSlot = document.getElementById('dashboard-header-slot');
+  const countsSlot = document.getElementById('dashboard-counts-slot');
+
   return (
     <>
+      {headerSlot && createPortal(
+        <>
+          <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={() => onAppModeChange('live')}>
+              <span className="mode-dot-icon" />
+              {t('mode.live')}
+            </button>
+            <button type="button" className={`mode-btn ${appMode === 'replay' ? 'active' : ''}`} onClick={() => onAppModeChange('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>
+          <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>
+        </>,
+        headerSlot,
+      )}
+      {countsSlot && createPortal(
+        <div className="header-counts">
+          <span className="count-item ac-count">{iranData.aircraft.length} AC</span>
+          <span className="count-item mil-count">{iranData.militaryCount} MIL</span>
+          <span className="count-item ship-count">{iranData.ships.length} SHIP</span>
+          <span className="count-item sat-count">{iranData.satPositions.length} SAT</span>
+        </div>,
+        countsSlot,
+      )}
       <main className="app-main">
         <div className="map-panel">
           {mapMode === 'flat' ? (
diff --git a/frontend/src/components/korea/KoreaDashboard.tsx b/frontend/src/components/korea/KoreaDashboard.tsx
index 190a45c..3482521 100644
--- a/frontend/src/components/korea/KoreaDashboard.tsx
+++ b/frontend/src/components/korea/KoreaDashboard.tsx
@@ -1,4 +1,5 @@
 import { useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { KoreaMap } from './KoreaMap';
 import { FieldAnalysisModal } from './FieldAnalysisModal';
@@ -64,8 +65,6 @@ export interface KoreaDashboardProps {
   monitor: MonitorControls;
   timeZone: 'KST' | 'UTC';
   onTimeZoneChange: (tz: 'KST' | 'UTC') => void;
-  showFieldAnalysis: boolean;
-  onFieldAnalysisClose: () => void;
 }
 
 const KoreaDashboard = ({
@@ -76,9 +75,8 @@ const KoreaDashboard = ({
   monitor,
   timeZone,
   onTimeZoneChange,
-  showFieldAnalysis,
-  onFieldAnalysisClose,
 }: KoreaDashboardProps) => {
+  const [showFieldAnalysis, setShowFieldAnalysis] = useState(false);
   const { t } = useTranslation();
 
   const { hiddenAcCategories, hiddenShipCategories, toggleAcCategory, toggleShipCategory } =
@@ -166,15 +164,65 @@ const KoreaDashboard = ({
     // Tab switching is managed by parent (App.tsx); no-op here
   }, []);
 
+  // 헤더 슬롯 Portal — 한국 필터 버튼 + 카운트
+  const headerSlot = document.getElementById('dashboard-header-slot');
+  const countsSlot = document.getElementById('dashboard-counts-slot');
+
   return (
     <>
+      {headerSlot && createPortal(
+        <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>,
+        headerSlot,
+      )}
+      {countsSlot && createPortal(
+        <div className="header-counts">
+          <span className="count-item ac-count">{koreaData.aircraft.length} AC</span>
+          <span className="count-item mil-count">{koreaData.militaryCount} MIL</span>
+          <span className="count-item ship-count">{koreaData.ships.length} SHIP</span>
+          <span className="count-item sat-count">{koreaData.satPositions.length} SAT</span>
+        </div>,
+        countsSlot,
+      )}
       <main className="app-main">
         <div className="map-panel">
           {showFieldAnalysis && (
             <FieldAnalysisModal
               ships={koreaData.ships}
               vesselAnalysis={vesselAnalysis}
-              onClose={onFieldAnalysisClose}
+              onClose={() => setShowFieldAnalysis(false)}
             />
           )}
           <KoreaMap