Merge pull request 'fix(map): Globe 렌더링 안정화 및 툴팁 유지 개선' (#29) from feature/globe-rendering-optimization into develop

Reviewed-on: #29

apps/web/src/app/styles/components/panels.css

@@ -1,24 +1,3 @@
-.sb {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-}
-
-.sb-t {
-  font-size: 9px;
-  font-weight: 700;
-  color: var(--muted);
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
-  margin-bottom: 6px;
-}
-
-.sb-t-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
 .relation-sort {
   display: flex;
   align-items: center;

apps/web/src/features/legacyDashboard/dev/mockOverlayData.ts

@@ -0,0 +1,216 @@
+/**
+ * 오버레이/경고 시각 검증용 더미 데이터 — 김개발(DEV) 모드 전용.
+ *
+ * 서해 해역에 12척의 가상 선박을 배치하여 다음 시나리오를 재현:
+ *   - 정상 쌍끌이 (pair link, ~1 NM)
+ *   - 이격 쌍끌이 (pair_separation alarm, ~8 NM)
+ *   - 선단 원 (fleet circle, 5척 동일 선주)
+ *   - 환적 의심 (transshipment alarm, FC ↔ PS < 0.5 NM)
+ *   - AIS 지연 (ais_stale alarm, 2시간 전 타임스탬프)
+ *   - 수역 이탈 (zone_violation alarm, PT가 zone 4에 위치)
+ *   - closed_season은 계절(월)에 따라 자동 판정 (2월에는 미발생)
+ *
+ * 사용법:
+ *   DashboardPage에서 isDevMode일 때 targetsInScope + legacyHits에 병합.
+ *   기존 computePairLinks / computeFcLinks / computeFleetCircles /
+ *   computeLegacyAlarms 파이프라인이 자동으로 오버레이/경고를 생성.
+ */
+
+import type { AisTarget } from '../../../entities/aisTarget/model/types';
+import type { LegacyVesselInfo } from '../../../entities/legacyVessel/model/types';
+
+// ── 타임스탬프 ──────────────────────────────────────────────
+
+const FRESH_TS = new Date().toISOString();
+const STALE_TS = new Date(Date.now() - 120 * 60_000).toISOString(); // 2시간 전 → ais_stale
+
+// ── 팩토리 ──────────────────────────────────────────────────
+
+function makeAis(o: Partial<AisTarget> & Pick<AisTarget, 'mmsi' | 'lat' | 'lon'>): AisTarget {
+  return {
+    imo: 0,
+    name: '',
+    callsign: '',
+    vesselType: '',
+    heading: o.cog ?? 0,
+    sog: 0,
+    cog: 0,
+    rot: 0,
+    length: 30,
+    width: 8,
+    draught: 4,
+    destination: '',
+    eta: '',
+    status: 'underway',
+    messageTimestamp: FRESH_TS,
+    receivedDate: FRESH_TS,
+    source: 'mock',
+    classType: 'A',
+    ...o,
+  };
+}
+
+function makeLegacy(
+  o: Partial<LegacyVesselInfo> & Pick<LegacyVesselInfo, 'permitNo' | 'shipCode' | 'mmsiList'>,
+): LegacyVesselInfo {
+  return {
+    shipNameRoman: '',
+    shipNameCn: null,
+    ton: 100,
+    callSign: '',
+    workSeaArea: '서해',
+    workTerm1: '2025-01-01',
+    workTerm2: '2025-12-31',
+    quota: '',
+    ownerCn: null,
+    ownerRoman: null,
+    pairPermitNo: null,
+    pairShipNameCn: null,
+    checklistSheet: null,
+    sources: { permittedList: true, checklist: false, fleet906: false },
+    ...o,
+  };
+}
+
+// ── 선박 정의 (12척) ────────────────────────────────────────
+
+/*
+ *  Group 1 — 정상 쌍끌이 (간격 ~1 NM, 경고 없음)
+ *  위치: 서해남부(zone 3) 125.3°E 34.0°N 부근
+ */
+const PT_01_AIS = makeAis({ mmsi: 990001, lat: 34.00, lon: 125.30, sog: 3.3, cog: 45, name: 'MOCK VESSEL 1' });
+const PT_02_AIS = makeAis({ mmsi: 990002, lat: 34.01, lon: 125.32, sog: 3.3, cog: 45, name: 'MOCK VESSEL 2' });
+
+const PT_01_LEG = makeLegacy({
+  permitNo: 'MOCK-P001', shipCode: 'PT', mmsiList: [990001],
+  shipNameRoman: 'MOCK VESSEL 1', shipNameCn: '模拟渔船一号',
+  pairPermitNo: 'MOCK-P002', pairShipNameCn: '模拟渔船二号',
+  ownerRoman: 'MOCK Owner A', ownerCn: '模拟A渔业',
+});
+const PT_02_LEG = makeLegacy({
+  permitNo: 'MOCK-P002', shipCode: 'PT-S', mmsiList: [990002],
+  shipNameRoman: 'MOCK VESSEL 2', shipNameCn: '模拟渔船二号',
+  pairPermitNo: 'MOCK-P001', pairShipNameCn: '模拟渔船一号',
+  ownerRoman: 'MOCK Owner A', ownerCn: '模拟A渔业',
+});
+
+/*
+ *  Group 2 — 이격 쌍끌이 (간격 ~8 NM → pair_separation alarm)
+ *  위치: 서해남부(zone 3) 125.0°E 34.5°N 부근
+ */
+const PT_03_AIS = makeAis({ mmsi: 990003, lat: 34.50, lon: 125.00, sog: 3.5, cog: 90, name: 'MOCK VESSEL 3' });
+const PT_04_AIS = makeAis({ mmsi: 990004, lat: 34.60, lon: 125.12, sog: 3.5, cog: 90, name: 'MOCK VESSEL 4' });
+
+const PT_03_LEG = makeLegacy({
+  permitNo: 'MOCK-P003', shipCode: 'PT', mmsiList: [990003],
+  shipNameRoman: 'MOCK VESSEL 3', shipNameCn: '模拟渔船三号',
+  pairPermitNo: 'MOCK-P004', pairShipNameCn: '模拟渔船四号',
+  ownerRoman: 'MOCK Owner B', ownerCn: '模拟B渔业',
+});
+const PT_04_LEG = makeLegacy({
+  permitNo: 'MOCK-P004', shipCode: 'PT-S', mmsiList: [990004],
+  shipNameRoman: 'MOCK VESSEL 4', shipNameCn: '模拟渔船四号',
+  pairPermitNo: 'MOCK-P003', pairShipNameCn: '模拟渔船三号',
+  ownerRoman: 'MOCK Owner B', ownerCn: '模拟B渔业',
+});
+
+/*
+ *  Group 3 — 선단 (동일 선주 5척 → fleet circle)
+ *  위치: 서해중간(zone 4) 124.8°E 35.2°N 부근
+ *  #11(GN)은 AIS 지연 2시간 → ais_stale alarm 동시 발생
+ */
+const GN_01_AIS = makeAis({ mmsi: 990005, lat: 35.20, lon: 124.80, sog: 1.0, cog: 180, name: 'MOCK VESSEL 5' });
+const GN_02_AIS = makeAis({ mmsi: 990006, lat: 35.22, lon: 124.85, sog: 1.2, cog: 170, name: 'MOCK VESSEL 6' });
+const GN_03_AIS = makeAis({ mmsi: 990007, lat: 35.18, lon: 124.82, sog: 0.8, cog: 200, name: 'MOCK VESSEL 7' });
+const OT_01_AIS = makeAis({ mmsi: 990008, lat: 35.25, lon: 124.78, sog: 3.5, cog: 160, name: 'MOCK VESSEL 8' });
+const GN_04_AIS = makeAis({
+  mmsi: 990011, lat: 35.00, lon: 125.20, sog: 1.5, cog: 190, name: 'MOCK VESSEL 10',
+  messageTimestamp: STALE_TS, receivedDate: STALE_TS,
+});
+
+const GN_01_LEG = makeLegacy({
+  permitNo: 'MOCK-P005', shipCode: 'GN', mmsiList: [990005],
+  shipNameRoman: 'MOCK VESSEL 5', shipNameCn: '模拟渔船五号',
+  ownerRoman: 'MOCK Owner C', ownerCn: '模拟C渔业',
+});
+const GN_02_LEG = makeLegacy({
+  permitNo: 'MOCK-P006', shipCode: 'GN', mmsiList: [990006],
+  shipNameRoman: 'MOCK VESSEL 6', shipNameCn: '模拟渔船六号',
+  ownerRoman: 'MOCK Owner C', ownerCn: '模拟C渔业',
+});
+const GN_03_LEG = makeLegacy({
+  permitNo: 'MOCK-P007', shipCode: 'GN', mmsiList: [990007],
+  shipNameRoman: 'MOCK VESSEL 7', shipNameCn: '模拟渔船七号',
+  ownerRoman: 'MOCK Owner C', ownerCn: '模拟C渔业',
+});
+const OT_01_LEG = makeLegacy({
+  permitNo: 'MOCK-P008', shipCode: 'OT', mmsiList: [990008],
+  shipNameRoman: 'MOCK VESSEL 8', shipNameCn: '模拟渔船八号',
+  ownerRoman: 'MOCK Owner C', ownerCn: '模拟C渔业',
+});
+const GN_04_LEG = makeLegacy({
+  permitNo: 'MOCK-P011', shipCode: 'GN', mmsiList: [990011],
+  shipNameRoman: 'MOCK VESSEL 10', shipNameCn: '模拟渔船十号',
+  ownerRoman: 'MOCK Owner C', ownerCn: '模拟C渔业',
+});
+
+/*
+ *  Group 4 — 환적 의심 (FC ↔ PS 거리 ~0.15 NM → transshipment alarm)
+ *  위치: 서해남부(zone 3) 125.5°E 34.3°N 부근
+ */
+const FC_01_AIS = makeAis({ mmsi: 990009, lat: 34.30, lon: 125.50, sog: 1.0, cog: 0, name: 'MOCK CARRIER 1' });
+const PS_01_AIS = makeAis({ mmsi: 990010, lat: 34.302, lon: 125.502, sog: 0.5, cog: 10, name: 'MOCK VESSEL 9' });
+
+const FC_01_LEG = makeLegacy({
+  permitNo: 'MOCK-P009', shipCode: 'FC', mmsiList: [990009],
+  shipNameRoman: 'MOCK CARRIER 1', shipNameCn: '模拟运船一号',
+  ownerRoman: 'MOCK Owner D', ownerCn: '模拟D渔业',
+});
+const PS_01_LEG = makeLegacy({
+  permitNo: 'MOCK-P010', shipCode: 'PS', mmsiList: [990010],
+  shipNameRoman: 'MOCK VESSEL 9', shipNameCn: '模拟渔船九号',
+  ownerRoman: 'MOCK Owner E', ownerCn: '模拟E渔业',
+});
+
+/*
+ *  Group 5 — 수역 이탈 (PT가 zone 4 에 위치 → zone_violation alarm)
+ *  PT는 zone 2,3만 허가. zone 4(서해중간)에 위치하면 이탈 판정.
+ *  위치: 서해중간(zone 4) 125.0°E 36.5°N 부근
+ */
+const PT_05_AIS = makeAis({ mmsi: 990012, lat: 36.50, lon: 125.00, sog: 3.3, cog: 270, name: 'MOCK VESSEL 11' });
+
+const PT_05_LEG = makeLegacy({
+  permitNo: 'MOCK-P012', shipCode: 'PT', mmsiList: [990012],
+  shipNameRoman: 'MOCK VESSEL 11', shipNameCn: '模拟渔船十一号',
+  ownerRoman: 'MOCK Owner F', ownerCn: '模拟F渔业',
+});
+
+// ── 공개 API ────────────────────────────────────────────────
+
+/** 더미 AIS 타겟 (12척) */
+export const MOCK_AIS_TARGETS: AisTarget[] = [
+  PT_01_AIS, PT_02_AIS,     // Group 1: 정상 쌍끌이
+  PT_03_AIS, PT_04_AIS,     // Group 2: 이격 쌍끌이
+  GN_01_AIS, GN_02_AIS, GN_03_AIS, OT_01_AIS, GN_04_AIS, // Group 3: 선단 + AIS 지연
+  FC_01_AIS, PS_01_AIS,     // Group 4: 환적 의심
+  PT_05_AIS,                // Group 5: 수역 이탈
+];
+
+/** 더미 legacy 매칭 엔트리 (MMSI → LegacyVesselInfo) */
+export const MOCK_LEGACY_ENTRIES: [number, LegacyVesselInfo][] = [
+  [990001, PT_01_LEG],
+  [990002, PT_02_LEG],
+  [990003, PT_03_LEG],
+  [990004, PT_04_LEG],
+  [990005, GN_01_LEG],
+  [990006, GN_02_LEG],
+  [990007, GN_03_LEG],
+  [990008, OT_01_LEG],
+  [990009, FC_01_LEG],
+  [990010, PS_01_LEG],
+  [990011, GN_04_LEG],
+  [990012, PT_05_LEG],
+];
+
+/** 더미 MMSI 집합 — 필터링/하이라이팅에 활용 */
+export const MOCK_MMSI_SET = new Set(MOCK_AIS_TARGETS.map((t) => t.mmsi));

apps/web/src/features/legacyDashboard/model/types.ts

@@ -88,3 +88,21 @@ export const LEGACY_ALARM_KIND_LABEL: Record<LegacyAlarmKind, string> = {
   ais_stale: "AIS 지연",
   zone_violation: "수역 이탈",
 };
+
+/** 경고 우선순위 (낮→높). 배열 뒤가 높은 우선순위. */
+export const ALARM_KIND_PRIORITY: LegacyAlarmKind[] = [
+  "ais_stale",
+  "closed_season",
+  "transshipment",
+  "zone_violation",
+  "pair_separation",
+];
+
+/** 경고 배지 — 지도 위 선박 옆에 표시할 약어 + 색상 */
+export const ALARM_BADGE: Record<LegacyAlarmKind, { label: string; color: string; rgba: [number, number, number, number] }> = {
+  pair_separation: { label: "이", color: "#ef4444", rgba: [239, 68, 68, 200] },
+  zone_violation:  { label: "수", color: "#a855f7", rgba: [168, 85, 247, 200] },
+  transshipment:   { label: "환", color: "#f97316", rgba: [249, 115, 22, 200] },
+  closed_season:   { label: "휴", color: "#eab308", rgba: [234, 179, 8, 200] },
+  ais_stale:       { label: "A",  color: "#6b7280", rgba: [107, 114, 128, 200] },
+};

apps/web/src/features/trackReplay/layers/trackLayers.ts

@@ -1,7 +1,6 @@
-import { IconLayer, PathLayer, ScatterplotLayer, TextLayer } from '@deck.gl/layers';
+import { PathLayer, ScatterplotLayer, TextLayer } from '@deck.gl/layers';
 import type { Layer, PickingInfo } from '@deck.gl/core';
-import { DEPTH_DISABLED_PARAMS, SHIP_ICON_MAPPING } from '../../../shared/lib/map/mapConstants';
+import { DEPTH_DISABLED_PARAMS } from '../../../shared/lib/map/mapConstants';
-import { getCachedShipIcon } from '../../../widgets/map3d/lib/shipIconCache';
 import { getShipKindColor } from '../lib/adapters';
 import type { CurrentVesselPosition, ProcessedTrack } from '../model/track.types';
 
@@ -139,20 +138,21 @@ export function createDynamicTrackLayers(options: {
 
   if (showVirtualShip) {
     layers.push(
-      new IconLayer<CurrentVesselPosition>({
+      new ScatterplotLayer<CurrentVesselPosition>({
         id: TRACK_REPLAY_LAYER_IDS.VIRTUAL_SHIP,
         data: currentPositions,
-        iconAtlas: getCachedShipIcon(),
-        iconMapping: SHIP_ICON_MAPPING,
-        getIcon: () => 'ship',
         getPosition: (d) => d.position,
-        getSize: 22,
+        getFillColor: (d) => {
-        sizeUnits: 'pixels',
-        getAngle: (d) => -d.heading,
-        getColor: (d) => {
           const base = getShipKindColor(d.shipKindCode);
-          return [base[0], base[1], base[2], 245] as [number, number, number, number];
+          return [base[0], base[1], base[2], 230] as [number, number, number, number];
         },
+        getLineColor: [255, 255, 255, 200],
+        getRadius: 5,
+        radiusUnits: 'pixels',
+        radiusMinPixels: 4,
+        radiusMaxPixels: 8,
+        stroked: true,
+        lineWidthMinPixels: 1,
         parameters: DEPTH_DISABLED_PARAMS,
         pickable: true,
         onHover: (info: PickingInfo<CurrentVesselPosition>) => {
@@ -183,6 +183,7 @@ export function createDynamicTrackLayers(options: {
           getAlignmentBaseline: 'center',
           getPixelOffset: [14, 0],
           fontFamily: 'Malgun Gothic, Arial, sans-serif',
+          fontSettings: { sdf: true },
           outlineColor: [2, 6, 23, 220],
           outlineWidth: 2,
           parameters: DEPTH_DISABLED_PARAMS,

apps/web/src/pages/dashboard/DashboardPage.tsx

@@ -1,9 +1,9 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useAuth } from "../../shared/auth";
 import { useTheme } from "../../shared/hooks";
 import { useAisTargetPolling } from "../../features/aisPolling/useAisTargetPolling";
-import type { DerivedLegacyVessel } from "../../features/legacyDashboard/model/types";
+import type { DerivedLegacyVessel, LegacyAlarmKind } from "../../features/legacyDashboard/model/types";
-import { LEGACY_ALARM_KINDS } from "../../features/legacyDashboard/model/types";
+import { ALARM_KIND_PRIORITY, LEGACY_ALARM_KINDS } from "../../features/legacyDashboard/model/types";
 import { useLegacyVessels } from "../../entities/legacyVessel/api/useLegacyVessels";
 import { buildLegacyVesselIndex } from "../../entities/legacyVessel/lib";
 import type { LegacyVesselDataset } from "../../entities/legacyVessel/model/types";
@@ -36,6 +36,7 @@ import {
   deriveLegacyVessels,
   filterByShipCodes,
 } from "../../features/legacyDashboard/model/derive";
+import { MOCK_AIS_TARGETS, MOCK_LEGACY_ENTRIES } from "../../features/legacyDashboard/dev/mockOverlayData";
 import { useDashboardState } from "./useDashboardState";
 import type { Bbox } from "./useDashboardState";
 import { DashboardSidebar } from "./DashboardSidebar";
@@ -60,7 +61,9 @@ function useLegacyIndex(data: LegacyVesselDataset | null) {
 export function DashboardPage() {
   const { user, logout } = useAuth();
   const { theme, toggleTheme } = useTheme();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const uid = user?.id ?? null;
+  const isDevMode = user?.name?.includes('(DEV)') ?? false;
 
   // ── Data fetching ──
   const { data: zones, error: zonesError } = useZones();
@@ -141,11 +144,19 @@ export function DashboardPage() {
 
   // ── Derived data ──
   const targetsInScope = useMemo(() => {
-    if (!useViewportFilter || !viewBbox) return targets;
+    const base = (!useViewportFilter || !viewBbox)
-    return targets.filter((t) => typeof t.lon === "number" && typeof t.lat === "number" && inBbox(t.lon, t.lat, viewBbox));
+      ? targets
-  }, [targets, useViewportFilter, viewBbox]);
+      : targets.filter((t) => typeof t.lon === "number" && typeof t.lat === "number" && inBbox(t.lon, t.lat, viewBbox));
+    return isDevMode ? [...base, ...MOCK_AIS_TARGETS] : base;
+  }, [targets, useViewportFilter, viewBbox, isDevMode]);
 
-  const legacyHits = useMemo(() => buildLegacyHitMap(targetsInScope, legacyIndex), [targetsInScope, legacyIndex]);
+  const legacyHits = useMemo(() => {
+    const hits = buildLegacyHitMap(targetsInScope, legacyIndex);
+    if (isDevMode) {
+      for (const [mmsi, info] of MOCK_LEGACY_ENTRIES) hits.set(mmsi, info);
+    }
+    return hits;
+  }, [targetsInScope, legacyIndex, isDevMode]);
   const legacyVesselsAll = useMemo(() => deriveLegacyVessels({ targets: targetsInScope, legacyHits, zones }), [targetsInScope, legacyHits, zones]);
   const legacyCounts = useMemo(() => computeCountsByType(legacyVesselsAll), [legacyVesselsAll]);
 
@@ -194,6 +205,17 @@ export function DashboardPage() {
     return alarms.filter((a) => enabled.has(a.kind));
   }, [alarms, enabledAlarmKinds, allAlarmKindsEnabled]);
 
+  const alarmMmsiMap = useMemo(() => {
+    const m = new Map<number, LegacyAlarmKind>();
+    for (const kind of ALARM_KIND_PRIORITY) {
+      for (const alarm of filteredAlarms) {
+        if (alarm.kind !== kind) continue;
+        for (const mmsi of alarm.relatedMmsi) m.set(mmsi, kind);
+      }
+    }
+    return m;
+  }, [filteredAlarms]);
+
   const pairLinksForMap = useMemo(() => computePairLinks(legacyVesselsFiltered), [legacyVesselsFiltered]);
   const fcLinksForMap = useMemo(() => computeFcLinks(legacyVesselsFiltered), [legacyVesselsFiltered]);
   const fleetCirclesForMap = useMemo(() => computeFleetCircles(legacyVesselsFiltered), [legacyVesselsFiltered]);
@@ -227,8 +249,6 @@ export function DashboardPage() {
 
   const enabledTypes = useMemo(() => VESSEL_TYPE_ORDER.filter((c) => typeEnabled[c]), [typeEnabled]);
   const speedPanelType = (selectedLegacyVessel?.shipCode ?? (enabledTypes.length === 1 ? enabledTypes[0] : "PT")) as VesselTypeCode;
-  const alarmFilterSummary = allAlarmKindsEnabled ? "전체" : `${enabledAlarmKinds.length}/${LEGACY_ALARM_KINDS.length}`;
-
   const handleFleetContextMenu = (ownerKey: string, mmsis: number[]) => {
     if (!mmsis.length) return;
     const members = mmsis
@@ -247,15 +267,13 @@ export function DashboardPage() {
 
   // ── Render ──
   return (
-    <div className="grid h-screen grid-cols-[310px_1fr] grid-rows-[44px_1fr] max-md:grid-cols-[1fr]">
+    <div className="grid h-screen grid-cols-[310px_1fr] grid-rows-[44px_1fr] max-md:grid-cols-[1fr] max-md:grid-rows-[auto_1fr]">
       <Topbar
         total={legacyVesselsAll.length}
         fishing={fishingCount}
         transit={transitCount}
         pairLinks={pairLinksAll.length}
         alarms={alarms.length}
-        pollingStatus={snapshot.status}
-        lastFetchMinutes={snapshot.lastFetchMinutes}
         clock={clock}
         adminMode={adminMode}
         onLogoClick={onLogoClick}
@@ -263,9 +281,13 @@ export function DashboardPage() {
         onLogout={logout}
         theme={theme}
         onToggleTheme={toggleTheme}
+        isSidebarOpen={isSidebarOpen}
+        onMenuToggle={() => setIsSidebarOpen((v) => !v)}
       />
 
       <DashboardSidebar
+        isOpen={isSidebarOpen}
+        onClose={() => setIsSidebarOpen(false)}
         state={state}
         legacyVesselsAll={legacyVesselsAll}
         legacyVesselsFiltered={legacyVesselsFiltered}
@@ -276,8 +298,6 @@ export function DashboardPage() {
         filteredAlarms={filteredAlarms}
         alarms={alarms}
         alarmKindCounts={alarmKindCounts}
-        allAlarmKindsEnabled={allAlarmKindsEnabled}
-        alarmFilterSummary={alarmFilterSummary}
         speedPanelType={speedPanelType}
         onFleetContextMenu={handleFleetContextMenu}
         snapshot={snapshot}
@@ -349,6 +369,7 @@ export function DashboardPage() {
           onCloseTrackMenu={handleCloseTrackMenu}
           onOpenTrackMenu={handleOpenTrackMenu}
           onMapReady={handleMapReady}
+          alarmMmsiMap={alarmMmsiMap}
         />
         <GlobalTrackReplayPanel />
         <WeatherPanel

apps/web/src/pages/dashboard/DashboardSidebar.tsx

@@ -1,4 +1,5 @@
-import { ToggleButton } from '@wing/ui';
+import { useEffect, useState } from 'react';
+import { ToggleButton, Section } from '@wing/ui';
 import type { AisTarget } from '../../entities/aisTarget/model/types';
 import type { LegacyVesselIndex } from '../../entities/legacyVessel/lib';
 import type { LegacyVesselDataset, LegacyVesselInfo } from '../../entities/legacyVessel/model/types';
@@ -28,8 +29,9 @@ function fmtBbox(b: Bbox | null) {
 }
 
 interface DashboardSidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
   state: ReturnType<typeof useDashboardState>;
-  // Derived data
   legacyVesselsAll: DerivedLegacyVessel[];
   legacyVesselsFiltered: DerivedLegacyVessel[];
   legacyCounts: Record<VesselTypeCode, number>;
@@ -39,11 +41,8 @@ interface DashboardSidebarProps {
   filteredAlarms: LegacyAlarm[];
   alarms: LegacyAlarm[];
   alarmKindCounts: Record<LegacyAlarmKind, number>;
-  allAlarmKindsEnabled: boolean;
-  alarmFilterSummary: string;
   speedPanelType: VesselTypeCode;
   onFleetContextMenu: (ownerKey: string, mmsis: number[]) => void;
-  // Data fetching (admin panels)
   snapshot: AisPollingSnapshot;
   legacyError: string | null;
   legacyData: LegacyVesselDataset | null;
@@ -54,6 +53,8 @@ interface DashboardSidebarProps {
 }
 
 export function DashboardSidebar({
+  isOpen,
+  onClose,
   state,
   legacyVesselsAll,
   legacyVesselsFiltered,
@@ -64,8 +65,6 @@ export function DashboardSidebar({
   filteredAlarms,
   alarms,
   alarmKindCounts,
-  allAlarmKindsEnabled,
-  alarmFilterSummary,
   speedPanelType,
   onFleetContextMenu,
   snapshot,
@@ -94,89 +93,112 @@ export function DashboardSidebar({
     setUniqueSorted, setSortedIfChanged, toggleHighlightedMmsi,
   } = state;
 
+  const [isAlarmFilterOpen, setIsAlarmFilterOpen] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [isOpen, onClose]);
+
   return (
-    <div className="flex flex-col overflow-y-auto border-r border-wing-border bg-wing-surface max-md:hidden">
+    <>
-      <div className="sb">
+      {isOpen && (
-        <div className="sb-t">업종 필터</div>
+        <div className="fixed inset-0 z-[1100] bg-black/50 md:hidden" onClick={onClose} aria-hidden />
-        <div className="flex flex-wrap gap-0.75 mb-1.5">
+      )}
-          <ToggleButton
+
-            on={showTargets}
+      <div
-            onClick={() => {
+        className={`
-              setShowTargets((v) => {
+          fixed inset-y-0 left-0 z-[1200] w-[310px] max-w-[100vw] transform overflow-y-auto
-                const next = !v;
+          border-r border-wing-border bg-wing-surface transition-transform duration-200
-                if (!next) setSelectedMmsi((m) => (legacyHits.has(m ?? -1) ? null : m));
+          ${isOpen ? 'translate-x-0' : '-translate-x-full'}
-                return next;
+          md:static md:z-auto md:translate-x-0 md:transition-none md:overflow-hidden md:flex md:flex-col
-              });
+        `}
+      >
+        <div className="h-[44px] md:hidden" />
+
+        <Section title="업종 필터" className="md:shrink-0">
+          <div className="flex flex-wrap gap-0.75 mb-1.5">
+            <ToggleButton
+              on={showTargets}
+              onClick={() => {
+                setShowTargets((v) => {
+                  const next = !v;
+                  if (!next) setSelectedMmsi((m) => (legacyHits.has(m ?? -1) ? null : m));
+                  return next;
+                });
+              }}
+              title="레거시(CN permit) 대상 선박 표시"
+            >
+              대상 선박
+            </ToggleButton>
+            <ToggleButton on={showOthers} onClick={() => setShowOthers((v) => !v)} title="대상 외 AIS 선박 표시">
+              기타 AIS
+            </ToggleButton>
+          </div>
+          <TypeFilterGrid
+            enabled={typeEnabled}
+            totalCount={legacyVesselsAll.length}
+            countsByType={legacyCounts}
+            onToggle={(code) => {
+              if (selectedLegacyVessel && selectedLegacyVessel.shipCode === code && typeEnabled[code]) setSelectedMmsi(null);
+              setTypeEnabled((prev) => ({ ...prev, [code]: !prev[code] }));
             }}
-            title="레거시(CN permit) 대상 선박 표시"
+            onToggleAll={() => {
-          >
+              const allOn = VESSEL_TYPE_ORDER.every((c) => typeEnabled[c]);
-            대상 선박
+              const nextVal = !allOn;
-          </ToggleButton>
+              if (!nextVal && selectedLegacyVessel) setSelectedMmsi(null);
-          <ToggleButton on={showOthers} onClick={() => setShowOthers((v) => !v)} title="대상 외 AIS 선박 표시">
+              setTypeEnabled({ PT: nextVal, 'PT-S': nextVal, GN: nextVal, OT: nextVal, PS: nextVal, FC: nextVal });
-            기타 AIS
+            }}
-          </ToggleButton>
+          />
-        </div>
+        </Section>
-        <TypeFilterGrid
-          enabled={typeEnabled}
-          totalCount={legacyVesselsAll.length}
-          countsByType={legacyCounts}
-          onToggle={(code) => {
-            if (selectedLegacyVessel && selectedLegacyVessel.shipCode === code && typeEnabled[code]) setSelectedMmsi(null);
-            setTypeEnabled((prev) => ({ ...prev, [code]: !prev[code] }));
-          }}
-          onToggleAll={() => {
-            const allOn = VESSEL_TYPE_ORDER.every((c) => typeEnabled[c]);
-            const nextVal = !allOn;
-            if (!nextVal && selectedLegacyVessel) setSelectedMmsi(null);
-            setTypeEnabled({
-              PT: nextVal, 'PT-S': nextVal, GN: nextVal, OT: nextVal, PS: nextVal, FC: nextVal,
-            });
-          }}
-        />
-      </div>
 
-      <div className="sb">
+        <Section
-        <div className="sb-t" style={{ display: 'flex', alignItems: 'center' }}>
+          title="지도 표시 설정"
-          지도 표시 설정
+          className="md:shrink-0"
-          <div style={{ flex: 1 }} />
+          actions={
-          <ToggleButton
+            <ToggleButton
-            on={projection === 'globe'}
+              on={projection === 'globe'}
-            onClick={isProjectionToggleDisabled ? undefined : () => setProjection((p) => (p === 'globe' ? 'mercator' : 'globe'))}
+              onClick={isProjectionToggleDisabled ? undefined : () => setProjection((p) => (p === 'globe' ? 'mercator' : 'globe'))}
-            title={isProjectionToggleDisabled ? '3D 모드 준비 중...' : '3D 지구본 투영: 드래그로 회전, 휠로 확대/축소'}
+              title={isProjectionToggleDisabled ? '3D 모드 준비 중...' : '3D 지구본 투영'}
-            className="px-2 py-0.5 text-[9px]"
+              className={`px-2 py-0.5 text-[9px]${isProjectionToggleDisabled ? " opacity-40 cursor-not-allowed" : ""}`}
-            style={{ opacity: isProjectionToggleDisabled ? 0.4 : 1, cursor: isProjectionToggleDisabled ? 'not-allowed' : 'pointer' }}
+            >
-          >
+              3D
-            3D
+            </ToggleButton>
-          </ToggleButton>
+          }
-        </div>
+        >
-        <MapToggles value={overlays} onToggle={(k) => setOverlays((prev) => ({ ...prev, [k]: !prev[k] }))} />
+          <MapToggles value={overlays} onToggle={(k) => setOverlays((prev) => ({ ...prev, [k]: !prev[k] }))} />
-      </div>
+        </Section>
 
-      <div className="sb">
+        <Section title="속도 프로파일" defaultOpen={false} className="md:shrink-0">
-        <div className="sb-t">속도 프로파일</div>
+          <SpeedProfilePanel selectedType={speedPanelType} />
-        <SpeedProfilePanel selectedType={speedPanelType} />
+        </Section>
-      </div>
 
-      <div className="sb" style={{ maxHeight: 260, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+        <Section
-        <div className="sb-t sb-t-row">
+          title={
-          <div>
+            <>
-            선단 연관관계{' '}
+              선단 연관관계{' '}
-            <span style={{ color: 'var(--accent)', fontSize: 8 }}>
+              <span className="text-[8px] font-normal normal-case tracking-normal text-wing-accent">
-              {selectedLegacyVessel ? `${selectedLegacyVessel.permitNo} 연관` : '(선박 클릭 시 표시)'}
+                {selectedLegacyVessel ? `${selectedLegacyVessel.permitNo} 연관` : '(선박 클릭 시 표시)'}
-            </span>
+              </span>
-          </div>
+            </>
-          <div className="relation-sort">
+          }
-            <label className="relation-sort__option">
+          actions={
-              <input type="radio" name="fleet-relation-sort" checked={fleetRelationSortMode === 'count'} onChange={() => setFleetRelationSortMode('count')} />
+            <div className="relation-sort">
-              척수
+              <label className="relation-sort__option">
-            </label>
+                <input type="radio" name="fleet-relation-sort" checked={fleetRelationSortMode === 'count'} onChange={() => setFleetRelationSortMode('count')} />
-            <label className="relation-sort__option">
+                척수
-              <input type="radio" name="fleet-relation-sort" checked={fleetRelationSortMode === 'range'} onChange={() => setFleetRelationSortMode('range')} />
+              </label>
-              범위
+              <label className="relation-sort__option">
-            </label>
+                <input type="radio" name="fleet-relation-sort" checked={fleetRelationSortMode === 'range'} onChange={() => setFleetRelationSortMode('range')} />
-          </div>
+                범위
-        </div>
+              </label>
-        <div style={{ overflowY: 'auto', minHeight: 0 }}>
+            </div>
+          }
+          className="md:shrink-0 max-h-[260px] flex flex-col overflow-hidden"
+          contentClassName="flex-1 min-h-0 overflow-y-auto"
+        >
           <RelationsPanel
             selectedVessel={selectedLegacyVessel}
             vessels={legacyVesselsAll}
@@ -200,233 +222,185 @@ export function DashboardSidebar({
             hoveredFleetMmsiSet={hoveredFleetMmsiSet}
             onContextMenuFleet={onFleetContextMenu}
           />
-        </div>
+        </Section>
-      </div>
 
-      <div className="sb" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+        <Section
-        <div className="sb-t">
+          title={
-          선박 목록{' '}
+            <>
-          <span style={{ color: 'var(--accent)', fontSize: 8 }}>
+              선박 목록{' '}
-            ({legacyVesselsFiltered.length}척)
+              <span className="text-[8px] font-normal normal-case tracking-normal text-wing-accent">({legacyVesselsFiltered.length}척)</span>
-          </span>
+            </>
-        </div>
+          }
-        <VesselList
+          className="md:flex-1 md:min-h-0 flex flex-col overflow-hidden"
-          vessels={legacyVesselsFiltered}
+          contentClassName="md:flex-1 md:min-h-0 flex flex-col overflow-hidden"
-          selectedMmsi={selectedMmsi}
+        >
-          highlightedMmsiSet={activeHighlightedMmsiSet}
+          <VesselList
-          onSelectMmsi={setSelectedMmsi}
+            vessels={legacyVesselsFiltered}
-          onToggleHighlightMmsi={toggleHighlightedMmsi}
+            selectedMmsi={selectedMmsi}
-          onHoverMmsi={(mmsi) => setHoveredMmsiSet([mmsi])}
+            highlightedMmsiSet={activeHighlightedMmsiSet}
-          onClearHover={() => setHoveredMmsiSet([])}
+            onSelectMmsi={setSelectedMmsi}
-        />
+            onToggleHighlightMmsi={toggleHighlightedMmsi}
-      </div>
+            onHoverMmsi={(mmsi) => setHoveredMmsiSet([mmsi])}
+            onClearHover={() => setHoveredMmsiSet([])}
+          />
+        </Section>
 
-      <div className="sb" style={{ maxHeight: 130, display: 'flex', flexDirection: 'column', overflow: 'visible' }}>
+        <Section
-        <div className="sb-t sb-t-row" style={{ marginBottom: 6 }}>
+          title={
-          <div>
+            <>
-            실시간 경고{' '}
+              실시간 경고{' '}
-            <span style={{ color: 'var(--accent)', fontSize: 8 }}>
+              <span className="text-[8px] font-normal normal-case tracking-normal text-wing-accent">({filteredAlarms.length}/{alarms.length})</span>
-              ({filteredAlarms.length}/{alarms.length})
+            </>
-            </span>
+          }
-          </div>
+          actions={
-
+            <ToggleButton on={isAlarmFilterOpen} onClick={() => setIsAlarmFilterOpen((v) => !v)}>
-          {LEGACY_ALARM_KINDS.length <= 3 ? (
+              필터
-            <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+            </ToggleButton>
+          }
+          className="md:shrink-0 max-h-[180px] flex flex-col overflow-hidden"
+          contentClassName="flex-1 min-h-0 overflow-y-auto"
+        >
+          {isAlarmFilterOpen && (
+            <div className="flex flex-wrap gap-x-2.5 gap-y-1 mb-1.5">
               {LEGACY_ALARM_KINDS.map((k) => (
-                <label key={k} style={{ display: 'inline-flex', gap: 4, alignItems: 'center', cursor: 'pointer', userSelect: 'none' }}>
+                <label key={k} className="inline-flex gap-1 items-center cursor-pointer select-none">
-                  <input
+                  <input type="checkbox" checked={!!alarmKindEnabled[k]} onChange={() => setAlarmKindEnabled((prev) => ({ ...prev, [k]: !prev[k] }))} />
-                    type="checkbox"
+                  <span className="text-[8px] text-wing-muted whitespace-nowrap">
-                    checked={!!alarmKindEnabled[k]}
+                    {LEGACY_ALARM_KIND_LABEL[k]} <span className="text-wing-text">{alarmKindCounts[k] ?? 0}</span>
-                    onChange={() => setAlarmKindEnabled((prev) => ({ ...prev, [k]: !prev[k] }))}
+                  </span>
-                  />
-                  <span style={{ fontSize: 8, color: 'var(--muted)', whiteSpace: 'nowrap' }}>{LEGACY_ALARM_KIND_LABEL[k]}</span>
                 </label>
               ))}
             </div>
-          ) : (
-            <details className="alarm-filter">
-              <summary className="alarm-filter__summary" title="경고 종류 필터">
-                {alarmFilterSummary}
-              </summary>
-              <div className="alarm-filter__menu" role="menu" aria-label="alarm kind filter">
-                <label className="alarm-filter__row">
-                  <input
-                    type="checkbox"
-                    checked={allAlarmKindsEnabled}
-                    onChange={() =>
-                      setAlarmKindEnabled((prev) => {
-                        const allOn = LEGACY_ALARM_KINDS.every((k) => prev[k]);
-                        const nextVal = allOn ? false : true;
-                        return Object.fromEntries(LEGACY_ALARM_KINDS.map((k) => [k, nextVal])) as Record<LegacyAlarmKind, boolean>;
-                      })
-                    }
-                  />
-                  전체
-                  <span className="alarm-filter__cnt">{alarms.length}</span>
-                </label>
-                <div className="alarm-filter__sep" />
-                {LEGACY_ALARM_KINDS.map((k) => (
-                  <label key={k} className="alarm-filter__row">
-                    <input
-                      type="checkbox"
-                      checked={!!alarmKindEnabled[k]}
-                      onChange={() => setAlarmKindEnabled((prev) => ({ ...prev, [k]: !prev[k] }))}
-                    />
-                    {LEGACY_ALARM_KIND_LABEL[k]}
-                    <span className="alarm-filter__cnt">{alarmKindCounts[k] ?? 0}</span>
-                  </label>
-                ))}
-              </div>
-            </details>
           )}
-        </div>
-
-        <div style={{ overflowY: 'auto', minHeight: 0, flex: 1 }}>
           <AlarmsPanel alarms={filteredAlarms} onSelectMmsi={setSelectedMmsi} />
-        </div>
+        </Section>
-      </div>
 
-      {adminMode ? (
+        {adminMode ? (
-        <>
+          <>
-          <div className="sb">
+            <Section title="ADMIN · AIS Target Polling" defaultOpen={false} className="md:shrink-0">
-            <div className="sb-t">ADMIN · AIS Target Polling</div>
-            <div style={{ fontSize: 11, lineHeight: 1.45 }}>
-              <div style={{ color: 'var(--muted)', fontSize: 10 }}>엔드포인트</div>
-              <div style={{ wordBreak: 'break-all' }}>{AIS_API_BASE}/api/ais-target/search</div>
-              <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>상태</div>
-              <div>
-                <b style={{ color: snapshot.status === 'ready' ? '#22C55E' : snapshot.status === 'error' ? '#EF4444' : '#F59E0B' }}>
-                  {snapshot.status.toUpperCase()}
-                </b>
-                {snapshot.error ? <span style={{ marginLeft: 6, color: '#EF4444' }}>{snapshot.error}</span> : null}
-              </div>
-              <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>최근 fetch</div>
-              <div>
-                {fmtIsoFull(snapshot.lastFetchAt)}{' '}
-                <span style={{ color: 'var(--muted)', fontSize: 10 }}>
-                  ({snapshot.lastFetchMinutes ?? '-'}m, inserted {snapshot.lastInserted}, upserted {snapshot.lastUpserted})
-                </span>
-              </div>
-              <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>메시지</div>
-              <div style={{ color: 'var(--text)', fontSize: 10 }}>{snapshot.lastMessage ?? '-'}</div>
-            </div>
-          </div>
-
-          <div className="sb">
-            <div className="sb-t">ADMIN · Legacy (CN Permit)</div>
-            {legacyError ? (
-              <div style={{ fontSize: 11, color: '#EF4444' }}>legacy load error: {legacyError}</div>
-            ) : (
               <div style={{ fontSize: 11, lineHeight: 1.45 }}>
-                <div style={{ color: 'var(--muted)', fontSize: 10 }}>데이터셋</div>
+                <div style={{ color: 'var(--muted)', fontSize: 10 }}>엔드포인트</div>
-                <div style={{ wordBreak: 'break-all', fontSize: 10 }}>/data/legacy/chinese-permitted.v1.json</div>
+                <div style={{ wordBreak: 'break-all' }}>{AIS_API_BASE}/api/ais-target/search</div>
-                <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>매칭(현재 scope)</div>
+                <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>상태</div>
                 <div>
-                  <b style={{ color: '#F59E0B' }}>{legacyVesselsAll.length}</b>{' '}
+                  <b style={{ color: snapshot.status === 'ready' ? 'var(--wing-success)' : snapshot.status === 'error' ? 'var(--wing-danger)' : 'var(--wing-warning)' }}>
-                  <span style={{ color: 'var(--muted)', fontSize: 10 }}>/ {targetsInScope.length}</span>
+                    {snapshot.status.toUpperCase()}
+                  </b>
+                  {snapshot.error ? <span style={{ marginLeft: 6, color: 'var(--wing-danger)' }}>{snapshot.error}</span> : null}
                 </div>
-                <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>생성시각</div>
+                <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>최근 fetch</div>
-                <div style={{ fontSize: 10, color: 'var(--text)' }}>{legacyData?.generatedAt ? fmtIsoFull(legacyData.generatedAt) : 'loading...'}</div>
+                <div>
+                  {fmtIsoFull(snapshot.lastFetchAt)}{' '}
+                  <span style={{ color: 'var(--muted)', fontSize: 10 }}>
+                    ({snapshot.lastFetchMinutes ?? '-'}m, inserted {snapshot.lastInserted}, upserted {snapshot.lastUpserted})
+                  </span>
+                </div>
+                <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>메시지</div>
+                <div style={{ color: 'var(--text)', fontSize: 10 }}>{snapshot.lastMessage ?? '-'}</div>
               </div>
-            )}
+            </Section>
-          </div>
 
-          <div className="sb">
+            <Section title="ADMIN · Legacy (CN Permit)" defaultOpen={false} className="md:shrink-0">
-            <div className="sb-t">ADMIN · Viewport / BBox</div>
+              {legacyError ? (
-            <div style={{ fontSize: 11, lineHeight: 1.45 }}>
+                <div style={{ fontSize: 11, color: 'var(--wing-danger)' }}>legacy load error: {legacyError}</div>
-              <div style={{ color: 'var(--muted)', fontSize: 10 }}>현재 View BBox</div>
+              ) : (
-              <div style={{ wordBreak: 'break-all', fontSize: 10 }}>{fmtBbox(viewBbox)}</div>
+                <div style={{ fontSize: 11, lineHeight: 1.45 }}>
-              <div style={{ marginTop: 8, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                  <div style={{ color: 'var(--muted)', fontSize: 10 }}>데이터셋</div>
-                <button
+                  <div style={{ wordBreak: 'break-all', fontSize: 10 }}>/data/legacy/chinese-permitted.v1.json</div>
-                  onClick={() => setUseViewportFilter((v) => !v)}
+                  <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>매칭(현재 scope)</div>
-                  style={{
+                  <div>
-                    fontSize: 10, padding: '4px 8px', borderRadius: 6,
+                    <b style={{ color: 'var(--wing-warning)' }}>{legacyVesselsAll.length}</b>{' '}
-                    border: '1px solid var(--border)',
+                    <span style={{ color: 'var(--muted)', fontSize: 10 }}>/ {targetsInScope.length}</span>
-                    background: useViewportFilter ? 'rgba(59,130,246,.18)' : 'var(--card)',
+                  </div>
-                    color: 'var(--text)', cursor: 'pointer',
+                  <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>생성시각</div>
-                  }}
+                  <div style={{ fontSize: 10, color: 'var(--text)' }}>{legacyData?.generatedAt ? fmtIsoFull(legacyData.generatedAt) : 'loading...'}</div>
-                  title="지도/리스트에 현재 화면 영역 내 선박만 표시(클라이언트 필터)"
+                </div>
-                >
+              )}
-                  Viewport filter {useViewportFilter ? 'ON' : 'OFF'}
+            </Section>
-                </button>
 
-                <button
+            <Section title="ADMIN · Viewport / BBox" defaultOpen={false} className="md:shrink-0">
-                  onClick={() => {
+              <div style={{ fontSize: 11, lineHeight: 1.45 }}>
-                    if (!viewBbox) return;
+                <div style={{ color: 'var(--muted)', fontSize: 10 }}>현재 View BBox</div>
-                    setUseApiBbox((v) => {
+                <div style={{ wordBreak: 'break-all', fontSize: 10 }}>{fmtBbox(viewBbox)}</div>
-                      const next = !v;
+                <div style={{ marginTop: 8, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-                      if (next && viewBbox) setApiBbox(fmtBbox(viewBbox));
+                  <button
-                      if (!next) setApiBbox(undefined);
+                    onClick={() => setUseViewportFilter((v) => !v)}
-                      return next;
+                    style={{
-                    });
+                      fontSize: 10, padding: '4px 8px', borderRadius: 6,
-                  }}
+                      border: '1px solid var(--border)',
-                  style={{
+                      background: useViewportFilter ? 'rgba(59,130,246,.18)' : 'var(--card)',
-                    fontSize: 10, padding: '4px 8px', borderRadius: 6,
+                      color: 'var(--text)', cursor: 'pointer',
-                    border: '1px solid var(--border)',
+                    }}
-                    background: useApiBbox ? 'rgba(245,158,11,.14)' : 'var(--card)',
+                    title="지도/리스트에 현재 화면 영역 내 선박만 표시(클라이언트 필터)"
-                    color: viewBbox ? 'var(--text)' : 'var(--muted)',
+                  >
-                    cursor: viewBbox ? 'pointer' : 'not-allowed',
+                    Viewport filter {useViewportFilter ? 'ON' : 'OFF'}
-                  }}
+                  </button>
-                  title="서버에서 bbox로 필터링해서 내려받기(페이로드 감소). 켜는 순간 현재 view bbox로 고정됨."
+                  <button
-                  disabled={!viewBbox}
+                    onClick={() => {
-                >
+                      if (!viewBbox) return;
-                  API bbox {useApiBbox ? 'ON' : 'OFF'}
+                      setUseApiBbox((v) => {
-                </button>
+                        const next = !v;
-
+                        if (next && viewBbox) setApiBbox(fmtBbox(viewBbox));
-                <button
+                        if (!next) setApiBbox(undefined);
-                  onClick={() => {
+                        return next;
-                    if (!viewBbox) return;
+                      });
-                    setApiBbox(fmtBbox(viewBbox));
+                    }}
-                    setUseApiBbox(true);
+                    style={{
-                  }}
+                      fontSize: 10, padding: '4px 8px', borderRadius: 6,
-                  style={{
+                      border: '1px solid var(--border)',
-                    fontSize: 10, padding: '4px 8px', borderRadius: 6,
+                      background: useApiBbox ? 'rgba(245,158,11,.14)' : 'var(--card)',
-                    border: '1px solid var(--border)',
+                      color: viewBbox ? 'var(--text)' : 'var(--muted)',
-                    background: 'var(--card)',
+                      cursor: viewBbox ? 'pointer' : 'not-allowed',
-                    color: viewBbox ? 'var(--text)' : 'var(--muted)',
+                    }}
-                    cursor: viewBbox ? 'pointer' : 'not-allowed',
+                    title="서버에서 bbox로 필터링해서 내려받기"
-                  }}
+                    disabled={!viewBbox}
-                  disabled={!viewBbox}
+                  >
-                  title="현재 view bbox로 API bbox를 갱신"
+                    API bbox {useApiBbox ? 'ON' : 'OFF'}
-                >
+                  </button>
-                  bbox=viewport
+                  <button
-                </button>
+                    onClick={() => { if (!viewBbox) return; setApiBbox(fmtBbox(viewBbox)); setUseApiBbox(true); }}
+                    style={{
+                      fontSize: 10, padding: '4px 8px', borderRadius: 6,
+                      border: '1px solid var(--border)', background: 'var(--card)',
+                      color: viewBbox ? 'var(--text)' : 'var(--muted)', cursor: viewBbox ? 'pointer' : 'not-allowed',
+                    }}
+                    disabled={!viewBbox}
+                    title="현재 view bbox로 API bbox를 갱신"
+                  >
+                    bbox=viewport
+                  </button>
+                </div>
+                <div style={{ marginTop: 8, color: 'var(--muted)', fontSize: 10 }}>
+                  표시 선박: <b style={{ color: 'var(--text)' }}>{targetsInScope.length}</b> / 스토어:{' '}
+                  <b style={{ color: 'var(--text)' }}>{snapshot.total}</b>
+                </div>
               </div>
-              <div style={{ marginTop: 8, color: 'var(--muted)', fontSize: 10 }}>
+            </Section>
-                표시 선박: <b style={{ color: 'var(--text)' }}>{targetsInScope.length}</b> / 스토어:{' '}
-                <b style={{ color: 'var(--text)' }}>{snapshot.total}</b>
-              </div>
-            </div>
-          </div>
 
-          <div className="sb">
+            <Section title="ADMIN · Map (Extras)" defaultOpen={false} className="md:shrink-0">
-            <div className="sb-t">ADMIN · Map (Extras)</div>
+              <Map3DSettingsToggles value={settings} onToggle={(k) => setSettings((prev) => ({ ...prev, [k]: !prev[k] }))} />
-            <Map3DSettingsToggles value={settings} onToggle={(k) => setSettings((prev) => ({ ...prev, [k]: !prev[k] }))} />
+              <div style={{ fontSize: 10, color: 'var(--muted)', marginTop: 6 }}>단일 WebGL 컨텍스트: MapboxOverlay(interleaved)</div>
-            <div style={{ fontSize: 10, color: 'var(--muted)', marginTop: 6 }}>단일 WebGL 컨텍스트: MapboxOverlay(interleaved)</div>
+            </Section>
-          </div>
 
-          <div className="sb" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+            <Section
-            <div className="sb-t">ADMIN · AIS Targets (All)</div>
+              title="ADMIN · AIS Targets (All)"
-            <AisTargetList
+              defaultOpen={false}
-              targets={targetsInScope}
+              className="md:shrink-0 md:max-h-[200px] flex flex-col md:overflow-hidden"
-              selectedMmsi={selectedMmsi}
+              contentClassName="md:flex-1 md:min-h-0 md:overflow-y-auto"
-              onSelectMmsi={setSelectedMmsi}
+            >
-              legacyIndex={legacyIndex}
+              <AisTargetList targets={targetsInScope} selectedMmsi={selectedMmsi} onSelectMmsi={setSelectedMmsi} legacyIndex={legacyIndex} />
-            />
+            </Section>
-          </div>
 
-          <div className="sb" style={{ maxHeight: 130, overflowY: 'auto' }}>
+            <Section title="ADMIN · 수역 데이터" defaultOpen={false} className="md:shrink-0">
-            <div className="sb-t">ADMIN · 수역 데이터</div>
+              {zonesError ? (
-            {zonesError ? (
+                <div style={{ fontSize: 11, color: 'var(--wing-danger)' }}>zones load error: {zonesError}</div>
-              <div style={{ fontSize: 11, color: '#EF4444' }}>zones load error: {zonesError}</div>
+              ) : (
-            ) : (
+                <div style={{ fontSize: 11, color: 'var(--muted)' }}>{zones ? `loaded (${zones.features.length} features)` : 'loading...'}</div>
-              <div style={{ fontSize: 11, color: 'var(--muted)' }}>
+              )}
-                {zones ? `loaded (${zones.features.length} features)` : 'loading...'}
+            </Section>
-              </div>
+          </>
-            )}
+        ) : null}
-          </div>
+      </div>
-        </>
+    </>
-      ) : null}
-    </div>
   );
 }

apps/web/src/widgets/legend/MapLegend.tsx

@@ -1,114 +1,121 @@
+import { useState } from 'react';
 import { ZONE_IDS, ZONE_META } from "../../entities/zone/model/meta";
 import { LEGACY_CODE_COLORS_HEX, OTHER_AIS_SPEED_HEX, OVERLAY_RGB, rgbToHex, rgba } from "../../shared/lib/map/palette";
 
 export function MapLegend() {
+  const [isOpen, setIsOpen] = useState(true);
+
   return (
     <div className="map-legend">
-      <div className="lt">수역</div>
+      <button
-      {ZONE_IDS.map((z) => (
+        className="flex w-full cursor-pointer items-center justify-between border-none bg-transparent p-0 text-left"
-        <div key={z} className="li">
+        onClick={() => setIsOpen((v) => !v)}
-          <div className="ls" style={{ background: `${ZONE_META[z].color}33`, border: `1px solid ${ZONE_META[z].color}` }} />
+      >
-          {ZONE_META[z].name}
+        <span className="lt" style={{ marginBottom: 0 }}>범례</span>
-        </div>
+        <span className="text-[9px] text-wing-muted">{isOpen ? '▾' : '▸'}</span>
-      ))}
+      </button>
 
-      <div className="lt" style={{ marginTop: 8 }}>
+      {isOpen && (
-        기타 AIS 선박(속도)
+        <>
-      </div>
+          <div className="lt" style={{ marginTop: 6 }}>수역</div>
-      <div className="li">
+          {ZONE_IDS.map((z) => (
-        <div className="ls" style={{ background: OTHER_AIS_SPEED_HEX.fast, borderRadius: 999 }} />
+            <div key={z} className="li">
-        SOG ≥ 10 kt
+              <div className="ls" style={{ background: `${ZONE_META[z].color}33`, border: `1px solid ${ZONE_META[z].color}` }} />
-      </div>
+              {ZONE_META[z].name}
-      <div className="li">
+            </div>
-        <div className="ls" style={{ background: OTHER_AIS_SPEED_HEX.moving, borderRadius: 999 }} />
+          ))}
-        1 ≤ SOG &lt; 10 kt
-      </div>
-      <div className="li">
-        <div className="ls" style={{ background: OTHER_AIS_SPEED_HEX.stopped, borderRadius: 999 }} />
-        SOG &lt; 1 kt
-      </div>
-      <div className="li">
-        <div className="ls" style={{ background: OTHER_AIS_SPEED_HEX.moving, opacity: 0.55, borderRadius: 999 }} />
-        SOG unknown
-      </div>
 
-      <div className="lt" style={{ marginTop: 8 }}>
+          <div className="lt" style={{ marginTop: 8 }}>기타 AIS 선박(속도)</div>
-        CN Permit(업종)
+          <div className="li">
-      </div>
+            <div className="ls" style={{ background: OTHER_AIS_SPEED_HEX.fast, borderRadius: 999 }} />
-      <div className="li">
+            SOG ≥ 10 kt
-        <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.PT, borderRadius: 999 }} />
+          </div>
-        PT 본선 (ring + 색상)
+          <div className="li">
-      </div>
+            <div className="ls" style={{ background: OTHER_AIS_SPEED_HEX.moving, borderRadius: 999 }} />
-      <div className="li">
+            1 ≤ SOG &lt; 10 kt
-        <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX["PT-S"], borderRadius: 999 }} />
+          </div>
-        PT-S 부속선
+          <div className="li">
-      </div>
+            <div className="ls" style={{ background: OTHER_AIS_SPEED_HEX.stopped, borderRadius: 999 }} />
-      <div className="li">
+            SOG &lt; 1 kt
-        <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.GN, borderRadius: 999 }} />
+          </div>
-        GN 유망
+          <div className="li">
-      </div>
+            <div className="ls" style={{ background: OTHER_AIS_SPEED_HEX.moving, opacity: 0.55, borderRadius: 999 }} />
-      <div className="li">
+            SOG unknown
-        <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.OT, borderRadius: 999 }} />
+          </div>
-        OT 1척식
-      </div>
-      <div className="li">
-        <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.PS, borderRadius: 999 }} />
-        PS 위망
-      </div>
-      <div className="li">
-        <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.FC, borderRadius: 999 }} />
-        FC 운반선
-      </div>
-      <div className="li">
-        <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.C21, borderRadius: 999 }} />
-        C21
-      </div>
 
-      <div className="lt" style={{ marginTop: 8 }}>
+          <div className="lt" style={{ marginTop: 8 }}>CN Permit(업종)</div>
-        밀도(3D)
+          <div className="li">
-      </div>
+            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.PT, borderRadius: 999 }} />
-      <div className="li" style={{ color: "var(--muted)" }}>
+            PT 본선
-        Hexagon: 화면 내 AIS 포인트 집계
+          </div>
-      </div>
+          <div className="li">
+            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX["PT-S"], borderRadius: 999 }} />
+            PT-S 부속선
+          </div>
+          <div className="li">
+            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.GN, borderRadius: 999 }} />
+            GN 유망
+          </div>
+          <div className="li">
+            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.OT, borderRadius: 999 }} />
+            OT 1척식
+          </div>
+          <div className="li">
+            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.PS, borderRadius: 999 }} />
+            PS 위망
+          </div>
+          <div className="li">
+            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.FC, borderRadius: 999 }} />
+            FC 운반선
+          </div>
+          <div className="li">
+            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.C21, borderRadius: 999 }} />
+            C21
+          </div>
 
-      <div className="lt" style={{ marginTop: 8 }}>
+          <div className="lt" style={{ marginTop: 8 }}>밀도(3D)</div>
-        연결선
+          <div className="li" style={{ color: "var(--muted)" }}>
-      </div>
+            Hexagon: 화면 내 AIS 포인트 집계
-      <div className="li">
+          </div>
-        <div style={{ width: 20, height: 2, background: rgba(OVERLAY_RGB.pairNormal, 0.35), borderRadius: 1 }} />
+
-        PT↔PT-S 쌍 (정상)
+          <div className="lt" style={{ marginTop: 8 }}>연결선</div>
-      </div>
+          <div className="li">
-      <div className="li">
+            <div style={{ width: 20, height: 2, background: rgba(OVERLAY_RGB.pairNormal, 0.35), borderRadius: 1 }} />
-        <div style={{ width: 14, height: 14, borderRadius: "50%", border: `1px solid ${rgba(OVERLAY_RGB.pairNormal, 0.6)}` }} />
+            PT↔PT-S 쌍 (정상)
-        쌍 연결범위
+          </div>
-      </div>
+          <div className="li">
-      <div className="li">
+            <div style={{ width: 14, height: 14, borderRadius: "50%", border: `1px solid ${rgba(OVERLAY_RGB.pairNormal, 0.6)}` }} />
-        <div style={{ width: 20, height: 2, background: rgbToHex(OVERLAY_RGB.pairWarn), borderRadius: 1 }} />
+            쌍 연결범위
-        쌍 이격 경고 (&gt;3NM)
+          </div>
-      </div>
+          <div className="li">
-      <div className="li">
+            <div style={{ width: 20, height: 2, background: rgbToHex(OVERLAY_RGB.pairWarn), borderRadius: 1 }} />
-        <div style={{ width: 20, height: 2, background: rgbToHex(OVERLAY_RGB.fcTransfer), borderRadius: 1 }} />
+            쌍 이격 경고 (&gt;3NM)
-        FC 환적 연결 (dashed)
+          </div>
-      </div>
+          <div className="li">
-      <div className="li">
+            <div style={{ width: 20, height: 2, background: rgbToHex(OVERLAY_RGB.fcTransfer), borderRadius: 1 }} />
-        <div style={{ width: 14, height: 14, borderRadius: "50%", border: `1px solid ${rgba(OVERLAY_RGB.fleetRange, 0.75)}`, opacity: 0.8 }} />
+            FC 환적 연결 (dashed)
-        선단 범위
+          </div>
-      </div>
+          <div className="li">
-      <div className="li">
+            <div style={{ width: 14, height: 14, borderRadius: "50%", border: `1px solid ${rgba(OVERLAY_RGB.fleetRange, 0.75)}`, opacity: 0.8 }} />
-        <div style={{ width: 20, height: 2, background: rgbToHex(OVERLAY_RGB.suspicious), borderRadius: 1 }} />
+            선단 범위
-        FC 환적 연결 (의심)
+          </div>
-      </div>
+          <div className="li">
-      <div className="li">
+            <div style={{ width: 20, height: 2, background: rgbToHex(OVERLAY_RGB.suspicious), borderRadius: 1 }} />
-        <div
+            FC 환적 연결 (의심)
-          style={{
+          </div>
-            width: 20,
+          <div className="li">
-            height: 2,
+            <div
-            borderRadius: 1,
+              style={{
-            background: "repeating-linear-gradient(to right, rgba(226,232,240,0.55), rgba(226,232,240,0.55) 4px, rgba(0,0,0,0) 4px, rgba(0,0,0,0) 7px)",
+                width: 20,
-          }}
+                height: 2,
-        />
+                borderRadius: 1,
-        예측 벡터 (15분)
+                background: "repeating-linear-gradient(to right, rgba(226,232,240,0.55), rgba(226,232,240,0.55) 4px, rgba(0,0,0,0) 4px, rgba(0,0,0,0) 7px)",
-      </div>
+              }}
+            />
+            예측 벡터 (15분)
+          </div>
+        </>
+      )}
     </div>
   );
 }

apps/web/src/widgets/map3d/Map3D.tsx

@@ -81,6 +81,7 @@ export function Map3D({
   onCloseTrackMenu,
   onOpenTrackMenu,
   onMapReady,
+  alarmMmsiMap,
 }: Props) {
   // ── Shared refs ──────────────────────────────────────────────────────
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -93,6 +94,7 @@ export function Map3D({
   const projectionBusyRef = useRef(false);
   const deckHoverRafRef = useRef<number | null>(null);
   const deckHoverHasHitRef = useRef(false);
+  const mapInitiatedSelectRef = useRef(false);
 
   useEffect(() => { baseMapRef.current = baseMap; }, [baseMap]);
   useEffect(() => { projectionRef.current = projection; }, [projection]);
@@ -237,12 +239,15 @@ export function Map3D({
     return out;
   }, [highlightedMmsiSetForShips, selectedMmsi]);
 
+  // Globe: 직접 호버/선택된 선박만 hover overlay에 포함
+  // 선단/쌍 멤버는 feature-state(outline 색상)로 하이라이트 → hover overlay 불필요
+  // → alarm badge 레이어 가림 방지
   const shipHoverOverlaySet = useMemo(
     () =>
       projection === 'globe'
-        ? mergeNumberSets(highlightedMmsiSetCombined, shipHighlightSet)
+        ? mergeNumberSets(shipHighlightSet, hoveredDeckMmsiSetRef)
         : shipHighlightSet,
-    [projection, highlightedMmsiSetCombined, shipHighlightSet],
+    [projection, shipHighlightSet, hoveredDeckMmsiSetRef],
   );
 
   const shipOverlayLayerData = useMemo(() => {
@@ -272,6 +277,13 @@ export function Map3D({
     return out;
   }, []);
 
+  // 지도 내부 클릭에서의 선택 — fly-to 비활성화 플래그 설정
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization
+  const onMapSelectMmsi = useCallback((mmsi: number | null) => {
+    mapInitiatedSelectRef.current = true;
+    onSelectMmsi(mmsi);
+  }, [onSelectMmsi]);
+
   const onDeckSelectOrHighlight = useCallback(
     (info: unknown, allowMultiSelect = false) => {
       const obj = info as {
@@ -287,12 +299,12 @@ export function Map3D({
         return;
       }
       if (!allowMultiSelect && selectedMmsi === mmsi) {
-        onSelectMmsi(null);
+        onMapSelectMmsi(null);
         return;
       }
-      onSelectMmsi(mmsi);
+      onMapSelectMmsi(mmsi);
     },
-    [hasAuxiliarySelectModifier, onSelectMmsi, onToggleHighlightMmsi, selectedMmsi],
+    [hasAuxiliarySelectModifier, onMapSelectMmsi, onToggleHighlightMmsi, selectedMmsi],
   );
 
   // eslint-disable-next-line react-hooks/preserve-manual-memoization
@@ -561,9 +573,9 @@ export function Map3D({
     {
       projection, settings, shipData: shipLayerData, shipHighlightSet, shipHoverOverlaySet,
       shipOverlayLayerData, shipLayerData, shipByMmsi, mapSyncEpoch,
-      onSelectMmsi, onToggleHighlightMmsi, targets: shipLayerData, overlays,
+      onSelectMmsi: onMapSelectMmsi, onToggleHighlightMmsi, targets: shipLayerData, overlays,
       legacyHits, selectedMmsi, isBaseHighlightedMmsi, hasAuxiliarySelectModifier,
-      onGlobeShipsReady,
+      onGlobeShipsReady, alarmMmsiMap,
     },
   );
 
@@ -596,8 +608,8 @@ export function Map3D({
       clearDeckHoverPairs, clearDeckHoverMmsi, clearMapFleetHoverState,
       setDeckHoverPairs, setDeckHoverMmsi, setMapFleetHoverState,
       toFleetMmsiList, touchDeckHoverState, hasAuxiliarySelectModifier,
-      onDeckSelectOrHighlight, onSelectMmsi, onToggleHighlightMmsi,
+      onDeckSelectOrHighlight, onSelectMmsi: onMapSelectMmsi, onToggleHighlightMmsi,
-      ensureMercatorOverlay, projectionRef,
+      ensureMercatorOverlay, alarmMmsiMap,
     },
   );
 
@@ -632,22 +644,30 @@ export function Map3D({
       e.preventDefault();
       if (!onOpenTrackMenu) return;
       const map = mapRef.current;
-      if (!map || !map.isStyleLoaded() || projectionBusyRef.current) return;
+      if (!map || projectionBusyRef.current) return;
 
       let mmsi: number | null = null;
 
-      if (projectionRef.current === 'globe') {
+      // Globe/Mercator 공통: MapLibre 레이어에서 bbox 쿼리 (호버 상태 무관)
-        // Globe: MapLibre 네이티브 레이어에서 쿼리
+      let shipLayerIds: string[] = [];
-        const point: [number, number] = [e.offsetX, e.offsetY];
+      try {
-        const shipLayerIds = [
+        shipLayerIds = projectionRef.current === 'globe'
-          'ships-globe', 'ships-globe-lite', 'ships-globe-halo', 'ships-globe-outline',
+          ? [
-        ].filter((id) => map.getLayer(id));
+              'ships-globe', 'ships-globe-lite', 'ships-globe-halo', 'ships-globe-outline',
+              'ships-globe-alarm-pulse', 'ships-globe-alarm-badge',
+            ].filter((id) => map.getLayer(id))
+          : [];
+      } catch { /* ignore */ }
 
+      if (shipLayerIds.length > 0) {
+        const tolerance = 8;
+        const bbox: [maplibregl.PointLike, maplibregl.PointLike] = [
+          [e.offsetX - tolerance, e.offsetY - tolerance],
+          [e.offsetX + tolerance, e.offsetY + tolerance],
+        ];
         let features: maplibregl.MapGeoJSONFeature[] = [];
         try {
-          if (shipLayerIds.length > 0) {
+          features = map.queryRenderedFeatures(bbox, { layers: shipLayerIds });
-            features = map.queryRenderedFeatures(point, { layers: shipLayerIds });
-          }
         } catch { /* ignore */ }
 
         if (features.length > 0) {
@@ -655,8 +675,10 @@ export function Map3D({
           const raw = typeof props.mmsi === 'number' ? props.mmsi : Number(props.mmsi);
           if (Number.isFinite(raw) && raw > 0) mmsi = raw;
         }
-      } else {
+      }
-        // Mercator: Deck.gl hover 상태에서 현재 호버된 MMSI 사용
+
+      // Mercator fallback: Deck.gl 호버 상태에서 MMSI 참조
+      if (mmsi == null && projectionRef.current !== 'globe') {
         const hovered = hoveredDeckMmsiRef.current;
         if (hovered.length > 0) mmsi = hovered[0];
       }
@@ -673,7 +695,7 @@ export function Map3D({
 
   useFlyTo(
     mapRef, projectionRef,
-    { selectedMmsi, shipData, fleetFocusId, fleetFocusLon, fleetFocusLat, fleetFocusZoom },
+    { selectedMmsi, shipData, mapInitiatedSelectRef, fleetFocusId, fleetFocusLon, fleetFocusLat, fleetFocusZoom },
   );
 
   // Map ready 콜백 — mapSyncEpoch 초기 증가 시 1회 호출

apps/web/src/widgets/map3d/hooks/useDeckLayers.ts

@@ -1,8 +1,10 @@
-import { useEffect, useMemo, type MutableRefObject } from 'react';
+import { useEffect, useMemo, useRef, type MutableRefObject } from 'react';
 import { MapboxOverlay } from '@deck.gl/mapbox';
 import { type PickingInfo } from '@deck.gl/core';
 import type { AisTarget } from '../../../entities/aisTarget/model/types';
 import type { LegacyVesselInfo } from '../../../entities/legacyVessel/model/types';
+import { ScatterplotLayer } from '@deck.gl/layers';
+import { ALARM_BADGE, type LegacyAlarmKind } from '../../../features/legacyDashboard/model/types';
 import type { FcLink, FleetCircle, PairLink } from '../../../features/legacyDashboard/model/types';
 import type { MapToggleState } from '../../../features/mapToggles/MapToggles';
 import type { DashSeg, Map3DSettings, MapProjectionId, PairRangeCircle } from '../types';
@@ -66,7 +68,7 @@ export function useDeckLayers(
     onSelectMmsi: (mmsi: number | null) => void;
     onToggleHighlightMmsi?: (mmsi: number) => void;
     ensureMercatorOverlay: () => MapboxOverlay | null;
-    projectionRef: MutableRefObject<MapProjectionId>;
+    alarmMmsiMap?: Map<number, LegacyAlarmKind>;
   },
 ) {
   const {
@@ -79,7 +81,7 @@ export function useDeckLayers(
     setDeckHoverPairs, setDeckHoverMmsi, setMapFleetHoverState,
     toFleetMmsiList, touchDeckHoverState, hasAuxiliarySelectModifier,
     onDeckSelectOrHighlight, onSelectMmsi, onToggleHighlightMmsi,
-    ensureMercatorOverlay, projectionRef,
+    ensureMercatorOverlay, alarmMmsiMap,
   } = opts;
 
   const legacyTargets = useMemo(() => {
@@ -99,6 +101,14 @@ export function useDeckLayers(
     return legacyTargets.filter((target) => shipHighlightSet.has(target.mmsi));
   }, [legacyTargets, shipHighlightSet]);
 
+  const alarmTargets = useMemo(() => {
+    if (!alarmMmsiMap || alarmMmsiMap.size === 0) return [];
+    return shipData.filter((t) => alarmMmsiMap.has(t.mmsi));
+  }, [shipData, alarmMmsiMap]);
+
+  const mercatorLayersRef = useRef<unknown[]>([]);
+  const alarmRafRef = useRef(0);
+
   // Mercator Deck layers
   useEffect(() => {
     const map = mapRef.current;
@@ -147,11 +157,16 @@ export function useDeckLayers(
       onSelectMmsi,
       onToggleHighlightMmsi,
       onDeckSelectOrHighlight,
+      alarmTargets,
+      alarmMmsiMap,
+      alarmPulseRadius: 8,
+      alarmPulseHoverRadius: 12,
     });
 
     const normalizedBaseLayers = sanitizeDeckLayerList(layers);
     const normalizedTrackLayers = sanitizeDeckLayerList(trackReplayDeckLayers);
     const normalizedLayers = sanitizeDeckLayerList([...normalizedBaseLayers, ...normalizedTrackLayers]);
+    mercatorLayersRef.current = normalizedLayers;
     const deckProps = {
       layers: normalizedLayers,
       getTooltip: (info: PickingInfo) => {
@@ -203,12 +218,6 @@ export function useDeckLayers(
             return;
           }
           onSelectMmsi(t.mmsi);
-          const clickOpts = { center: [t.lon, t.lat] as [number, number], zoom: Math.max(map.getZoom(), 10), duration: 600 };
-          if (projectionRef.current === 'globe') {
-            map.flyTo(clickOpts);
-          } else {
-            map.easeTo(clickOpts);
-          }
         }
       },
     };
@@ -239,6 +248,7 @@ export function useDeckLayers(
     overlays.pairLines,
     overlays.fcLines,
     overlays.fleetCircles,
+    overlays.shipLabels,
     settings.showDensity,
     settings.showShips,
     trackReplayDeckLayers,
@@ -252,8 +262,73 @@ export function useDeckLayers(
     toFleetMmsiList,
     touchDeckHoverState,
     hasAuxiliarySelectModifier,
+    alarmTargets,
+    alarmMmsiMap,
   ]);
 
+  // Mercator alarm pulse breathing animation (rAF)
+  useEffect(() => {
+    if (projection !== 'mercator' || !alarmMmsiMap || alarmMmsiMap.size === 0 || alarmTargets.length === 0) {
+      if (alarmRafRef.current) cancelAnimationFrame(alarmRafRef.current);
+      alarmRafRef.current = 0;
+      return;
+    }
+
+    const animate = () => {
+      // 프로젝션 전환 중에는 overlay에 접근하지 않음 — WebGL 자원 무효화 방지
+      if (projectionBusyRef.current) {
+        alarmRafRef.current = requestAnimationFrame(animate);
+        return;
+      }
+      const currentOverlay = overlayRef.current;
+      if (!currentOverlay) {
+        alarmRafRef.current = requestAnimationFrame(animate);
+        return;
+      }
+
+      const t = (Math.sin(Date.now() / 1500 * Math.PI * 2) + 1) / 2;
+      const normalR = 8 + t * 6;
+      const hoverR = 12 + t * 6;
+
+      const pulseLyr = new ScatterplotLayer<AisTarget>({
+        id: 'alarm-pulse',
+        data: alarmTargets,
+        pickable: false,
+        billboard: false,
+        filled: true,
+        stroked: false,
+        radiusUnits: 'pixels',
+        getRadius: (d) => {
+          const isHover = (selectedMmsi != null && d.mmsi === selectedMmsi) || shipHighlightSet.has(d.mmsi);
+          return isHover ? hoverR : normalR;
+        },
+        getFillColor: (d) => {
+          const kind = alarmMmsiMap.get(d.mmsi);
+          return kind ? ALARM_BADGE[kind].rgba : [107, 114, 128, 90] as [number, number, number, number];
+        },
+        getPosition: (d) => [d.lon, d.lat] as [number, number],
+        updateTriggers: { getRadius: [normalR, hoverR] },
+      });
+
+      const updated = mercatorLayersRef.current.map((l) =>
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (l as any)?.id === 'alarm-pulse' ? pulseLyr : l,
+      );
+
+      try {
+        currentOverlay.setProps({ layers: updated } as never);
+      } catch {
+        // ignore
+      }
+      alarmRafRef.current = requestAnimationFrame(animate);
+    };
+    alarmRafRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (alarmRafRef.current) cancelAnimationFrame(alarmRafRef.current);
+      alarmRafRef.current = 0;
+    };
+  }, [projection, alarmMmsiMap, alarmTargets, selectedMmsi, shipHighlightSet]);
+
   // Globe Deck overlay
   useEffect(() => {
     const map = mapRef.current;

apps/web/src/widgets/map3d/hooks/useFlyTo.ts

@@ -1,6 +1,5 @@
-import { useEffect, type MutableRefObject } from 'react';
+import { useEffect, useRef, type MutableRefObject } from 'react';
 import type maplibregl from 'maplibre-gl';
-import { onMapStyleReady } from '../lib/mapCore';
 import type { MapProjectionId } from '../types';
 
 export function useFlyTo(
@@ -9,53 +8,62 @@ export function useFlyTo(
   opts: {
     selectedMmsi: number | null;
     shipData: { mmsi: number; lon: number; lat: number }[];
+    /** true일 때 selectedMmsi fly-to 스킵 (지도 클릭 선택 시) */
+    mapInitiatedSelectRef: MutableRefObject<boolean>;
     fleetFocusId: string | number | undefined;
     fleetFocusLon: number | undefined;
     fleetFocusLat: number | undefined;
     fleetFocusZoom: number | undefined;
   },
 ) {
-  const { selectedMmsi, shipData, fleetFocusId, fleetFocusLon, fleetFocusLat, fleetFocusZoom } = opts;
+  const { selectedMmsi, shipData, mapInitiatedSelectRef, fleetFocusId, fleetFocusLon, fleetFocusLat, fleetFocusZoom } = opts;
 
-  useEffect(() => {
+  // shipData를 ref로 — 의존성에서 제외하여 AIS poll마다 재실행 방지
-    const map = mapRef.current;
+  const shipDataRef = useRef(shipData);
-    if (!map) return;
+  useEffect(() => { shipDataRef.current = shipData; }, [shipData]);
-    if (!selectedMmsi) return;
-    const t = shipData.find((x) => x.mmsi === selectedMmsi);
-    if (!t) return;
-    const flyOpts = { center: [t.lon, t.lat] as [number, number], zoom: Math.max(map.getZoom(), 10), duration: 600 };
-    if (projectionRef.current === 'globe') {
-      map.flyTo(flyOpts);
-    } else {
-      map.easeTo(flyOpts);
-    }
-  }, [selectedMmsi, shipData]);
 
+  // 패널(좌측 목록)에서 선택 시 해당 선박 위치로 즉시 이동
   useEffect(() => {
-    const map = mapRef.current;
+    // 지도 내부 클릭에서 발생한 선택이면 스킵
-    if (!map || fleetFocusLon == null || fleetFocusLat == null || !Number.isFinite(fleetFocusLon) || !Number.isFinite(fleetFocusLat))
+    if (mapInitiatedSelectRef.current) {
+      mapInitiatedSelectRef.current = false;
       return;
-    const lon = fleetFocusLon;
+    }
-    const lat = fleetFocusLat;
-    const zoom = fleetFocusZoom ?? 10;
 
-    const apply = () => {
+    const map = mapRef.current;
-      const flyOpts = { center: [lon, lat] as [number, number], zoom, duration: 700 };
+    if (!map || selectedMmsi == null) return;
+
+    const target = shipDataRef.current.find((t) => t.mmsi === selectedMmsi);
+    if (!target || !Number.isFinite(target.lon) || !Number.isFinite(target.lat)) return;
+
+    try {
+      const flyOpts = { center: [target.lon, target.lat] as [number, number], duration: 400 };
       if (projectionRef.current === 'globe') {
         map.flyTo(flyOpts);
       } else {
         map.easeTo(flyOpts);
       }
-    };
+    } catch {
-
+      // ignore — style not ready 등
-    if (map.isStyleLoaded()) {
-      apply();
-      return;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedMmsi]);
 
-    const stop = onMapStyleReady(map, apply);
+  // 선단 포커스 이동
-    return () => {
+  useEffect(() => {
-      stop();
+    const map = mapRef.current;
-    };
+    if (!map || fleetFocusLon == null || fleetFocusLat == null || !Number.isFinite(fleetFocusLon) || !Number.isFinite(fleetFocusLat))
+      return;
+
+    try {
+      const flyOpts = { center: [fleetFocusLon, fleetFocusLat] as [number, number], zoom: fleetFocusZoom ?? 10, duration: 500 };
+      if (projectionRef.current === 'globe') {
+        map.flyTo(flyOpts);
+      } else {
+        map.easeTo(flyOpts);
+      }
+    } catch {
+      // ignore
+    }
   }, [fleetFocusId, fleetFocusLon, fleetFocusLat, fleetFocusZoom]);
 }

apps/web/src/widgets/map3d/hooks/useGlobeFcFleetOverlay.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, type MutableRefObject } from 'react';
+import { useCallback, useEffect, useRef, type MutableRefObject } from 'react';
 import type maplibregl from 'maplibre-gl';
 import type { GeoJSONSource, GeoJSONSourceSpecification, LayerSpecification } from 'maplibre-gl';
 import type { FcLink, FleetCircle } from '../../../features/legacyDashboard/model/types';
@@ -7,7 +7,6 @@ import type { DashSeg, MapProjectionId } from '../types';
 import {
   FC_LINE_NORMAL_ML, FC_LINE_SUSPICIOUS_ML,
   FC_LINE_NORMAL_ML_HL, FC_LINE_SUSPICIOUS_ML_HL,
-  FLEET_FILL_ML_HL,
   FLEET_LINE_ML, FLEET_LINE_ML_HL,
 } from '../constants';
 import { makeUniqueSorted } from '../lib/setUtils';
@@ -22,13 +21,22 @@ import {
 } from '../lib/mlExpressions';
 import { kickRepaint, onMapStyleReady } from '../lib/mapCore';
 import { circleRingLngLat } from '../lib/geometry';
-import { guardedSetVisibility } from '../lib/layerHelpers';
 import { dashifyLine } from '../lib/dashifyLine';
 
-/** Globe FC lines + fleet circles 오버레이 */
+// ── Overlay line width constants ──
+const FC_LINE_W_NORMAL = 2.2;
+const FC_LINE_W_HL = 3.2;
+const FLEET_LINE_W_NORMAL = 2.0;
+const FLEET_LINE_W_HL = 3.0;
+
+// ── Breathing animation constants ──
+const BREATHE_AMP = 2.0;
+const BREATHE_PERIOD_MS = 1200;
+
+/** Globe FC lines + fleet circles 오버레이 (stroke only — fill 제거) */
 export function useGlobeFcFleetOverlay(
   mapRef: MutableRefObject<maplibregl.Map | null>,
-  projectionBusyRef: MutableRefObject<boolean>,
+  _projectionBusyRef: MutableRefObject<boolean>,
   reorderGlobeFeatureLayers: () => void,
   opts: {
     overlays: MapToggleState;
@@ -45,8 +53,14 @@ export function useGlobeFcFleetOverlay(
     overlays, fcLinks, fleetCircles, projection, mapSyncEpoch,
     hoveredFleetMmsiList, hoveredFleetOwnerKeyList, hoveredPairMmsiList,
   } = opts;
+  const breatheRafRef = useRef<number>(0);
 
-  // FC lines
+  // paint state ref — 데이터 effect에서 레이어 생성 직후 최신 paint state를 즉시 적용하기 위해 사용
+  const paintStateRef = useRef<() => void>(() => {});
+
+  // ── FC lines 데이터 effect ──
+  // projectionBusy/isStyleLoaded 선행 가드 제거 — try/catch로 처리
+  // 실패 시 다음 AIS poll(mapSyncEpoch 변경)에서 자연스럽게 재시도
   useEffect(() => {
     const map = mapRef.current;
     if (!map) return;
@@ -54,17 +68,11 @@ export function useGlobeFcFleetOverlay(
     const srcId = 'fc-lines-ml-src';
     const layerId = 'fc-lines-ml';
 
-    const remove = () => {
-      guardedSetVisibility(map, layerId, 'none');
-    };
-
     const ensure = () => {
-      if (projectionBusyRef.current) return;
+      if (projection !== 'globe') {
-      if (!map.isStyleLoaded()) return;
+        try {
-      const fleetAwarePairMmsiList = makeUniqueSorted([...hoveredPairMmsiList, ...hoveredFleetMmsiList]);
+          if (map.getLayer(layerId)) map.setPaintProperty(layerId, 'line-opacity', 0);
-      const fcHoverActive = fleetAwarePairMmsiList.length > 0;
+        } catch { /* ignore */ }
-      if (projection !== 'globe' || (!overlays.fcLines && !fcHoverActive)) {
-        remove();
         return;
       }
 
@@ -73,7 +81,9 @@ export function useGlobeFcFleetOverlay(
         segs.push(...dashifyLine(l.from, l.to, l.suspicious, l.distanceNm, l.fcMmsi, l.otherMmsi));
       }
       if (segs.length === 0) {
-        remove();
+        try {
+          if (map.getLayer(layerId)) map.setPaintProperty(layerId, 'line-opacity', 0);
+        } catch { /* ignore */ }
         return;
       }
 
@@ -97,12 +107,12 @@ export function useGlobeFcFleetOverlay(
         const existing = map.getSource(srcId) as GeoJSONSource | undefined;
         if (existing) existing.setData(fc);
         else map.addSource(srcId, { type: 'geojson', data: fc } as GeoJSONSourceSpecification);
-      } catch (e) {
+      } catch {
-        console.warn('FC lines source setup failed:', e);
+        return; // 다음 poll에서 재시도
-        return;
       }
 
-      if (!map.getLayer(layerId)) {
+      const needReorder = !map.getLayer(layerId);
+      if (needReorder) {
         try {
           map.addLayer(
             {
@@ -111,74 +121,46 @@ export function useGlobeFcFleetOverlay(
               source: srcId,
               layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
               paint: {
-                'line-color': [
+                'line-color': FC_LINE_NORMAL_ML,
-                  'case',
+                'line-width': FC_LINE_W_NORMAL,
-                  ['==', ['get', 'highlighted'], 1],
+                'line-opacity': 0,
-                  ['case', ['boolean', ['get', 'suspicious'], false], FC_LINE_SUSPICIOUS_ML_HL, FC_LINE_NORMAL_ML_HL],
-                  ['boolean', ['get', 'suspicious'], false],
-                  FC_LINE_SUSPICIOUS_ML,
-                  FC_LINE_NORMAL_ML,
-                ] as never,
-                'line-width': ['case', ['==', ['get', 'highlighted'], 1], 2.0, 1.3] as never,
-                'line-opacity': 0.9,
               },
-        } as unknown as LayerSpecification,
+            } as unknown as LayerSpecification,
             undefined,
           );
-        } catch (e) {
+        } catch {
-          console.warn('FC lines layer add failed:', e);
+          return; // 다음 poll에서 재시도
         }
-      } else {
+        reorderGlobeFeatureLayers();
-        guardedSetVisibility(map, layerId, 'visible');
       }
 
-      reorderGlobeFeatureLayers();
+      paintStateRef.current();
       kickRepaint(map);
     };
 
+    // 초기 style 로드 대기 — 이후에는 AIS poll 사이클이 재시도 보장
     const stop = onMapStyleReady(map, ensure);
     ensure();
-    return () => {
+    return () => { stop(); };
-      stop();
+  }, [projection, fcLinks, mapSyncEpoch, reorderGlobeFeatureLayers]);
-    };
-  }, [
-    projection,
-    overlays.fcLines,
-    fcLinks,
-    hoveredPairMmsiList,
-    hoveredFleetMmsiList,
-    mapSyncEpoch,
-    reorderGlobeFeatureLayers,
-  ]);
 
-  // Fleet circles
+  // ── Fleet circles 데이터 effect (stroke only — fill 제거) ──
   useEffect(() => {
     const map = mapRef.current;
     if (!map) return;
 
     const srcId = 'fleet-circles-ml-src';
-    const fillSrcId = 'fleet-circles-ml-fill-src';
     const layerId = 'fleet-circles-ml';
-    const fillLayerId = 'fleet-circles-ml-fill';
-
-    const remove = () => {
-      guardedSetVisibility(map, layerId, 'none');
-      guardedSetVisibility(map, fillLayerId, 'none');
-    };
 
     const ensure = () => {
-      if (projectionBusyRef.current) return;
+      if (projection !== 'globe' || (fleetCircles?.length ?? 0) === 0) {
-      if (!map.isStyleLoaded()) return;
+        try {
-      const fleetHoverActive = hoveredFleetOwnerKeyList.length > 0 || hoveredFleetMmsiList.length > 0;
+          if (map.getLayer(layerId)) map.setPaintProperty(layerId, 'line-opacity', 0);
-      if (projection !== 'globe' || (!overlays.fleetCircles && !fleetHoverActive) || (fleetCircles?.length ?? 0) === 0) {
+        } catch { /* ignore */ }
-        remove();
         return;
       }
 
       const circles = fleetCircles || [];
-      const isHighlightedFleet = (ownerKey: string, vesselMmsis: number[]) =>
-        hoveredFleetOwnerKeyList.includes(ownerKey) ||
-        (hoveredFleetMmsiList.length > 0 && vesselMmsis.some((mmsi) => hoveredFleetMmsiList.includes(mmsi)));
 
       const fcLine: GeoJSON.FeatureCollection<GeoJSON.LineString> = {
         type: 'FeatureCollection',
@@ -194,47 +176,21 @@ export function useGlobeFcFleetOverlay(
               ownerLabel: c.ownerLabel,
               count: c.count,
               vesselMmsis: c.vesselMmsis,
-              highlighted: 0,
             },
           };
         }),
       };
 
-      const fcFill: GeoJSON.FeatureCollection<GeoJSON.Polygon> = {
-        type: 'FeatureCollection',
-        features: circles
-          .filter((c) => isHighlightedFleet(c.ownerKey, c.vesselMmsis))
-          .map((c) => ({
-            type: 'Feature',
-            id: makeFleetCircleFeatureId(`${c.ownerKey}-fill`),
-            geometry: {
-              type: 'Polygon',
-              coordinates: [circleRingLngLat(c.center, c.radiusNm * 1852, 24)],
-            },
-            properties: {
-              ownerKey: c.ownerKey,
-            },
-          })),
-      };
-
       try {
         const existing = map.getSource(srcId) as GeoJSONSource | undefined;
         if (existing) existing.setData(fcLine);
         else map.addSource(srcId, { type: 'geojson', data: fcLine } as GeoJSONSourceSpecification);
-      } catch (e) {
+      } catch {
-        console.warn('Fleet circles source setup failed:', e);
+        return; // 다음 poll에서 재시도
-        return;
       }
 
-      try {
+      const needReorder = !map.getLayer(layerId);
-        const existingFill = map.getSource(fillSrcId) as GeoJSONSource | undefined;
+      if (needReorder) {
-        if (existingFill) existingFill.setData(fcFill);
-        else map.addSource(fillSrcId, { type: 'geojson', data: fcFill } as GeoJSONSourceSpecification);
-      } catch (e) {
-        console.warn('Fleet circles fill source setup failed:', e);
-      }
-
-      if (!map.getLayer(layerId)) {
         try {
           map.addLayer(
             {
@@ -243,66 +199,34 @@ export function useGlobeFcFleetOverlay(
               source: srcId,
               layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
               paint: {
-                'line-color': ['case', ['==', ['get', 'highlighted'], 1], FLEET_LINE_ML_HL, FLEET_LINE_ML] as never,
+                'line-color': FLEET_LINE_ML,
-                'line-width': ['case', ['==', ['get', 'highlighted'], 1], 2, 1.1] as never,
+                'line-width': FLEET_LINE_W_NORMAL,
-                'line-opacity': 0.85,
+                'line-opacity': 0,
               },
             } as unknown as LayerSpecification,
             undefined,
           );
-        } catch (e) {
+        } catch {
-          console.warn('Fleet circles layer add failed:', e);
+          return; // 다음 poll에서 재시도
         }
-      } else {
+        reorderGlobeFeatureLayers();
-        guardedSetVisibility(map, layerId, 'visible');
       }
 
-      if (!map.getLayer(fillLayerId)) {
+      paintStateRef.current();
-        try {
-          map.addLayer(
-            {
-              id: fillLayerId,
-              type: 'fill',
-              source: fillSrcId,
-              layout: { visibility: fcFill.features.length > 0 ? 'visible' : 'none' },
-              paint: {
-                'fill-color': FLEET_FILL_ML_HL,
-              },
-            } as unknown as LayerSpecification,
-            undefined,
-          );
-        } catch (e) {
-          console.warn('Fleet circles fill layer add failed:', e);
-        }
-      } else {
-        guardedSetVisibility(map, fillLayerId, fcFill.features.length > 0 ? 'visible' : 'none');
-      }
-
-      reorderGlobeFeatureLayers();
       kickRepaint(map);
     };
 
     const stop = onMapStyleReady(map, ensure);
     ensure();
-    return () => {
+    return () => { stop(); };
-      stop();
+  }, [projection, fleetCircles, mapSyncEpoch, reorderGlobeFeatureLayers]);
-    };
-  }, [
-    projection,
-    overlays.fleetCircles,
-    fleetCircles,
-    hoveredFleetOwnerKeyList,
-    hoveredFleetMmsiList,
-    mapSyncEpoch,
-    reorderGlobeFeatureLayers,
-  ]);
 
-  // FC + Fleet paint state updates
+  // ── FC + Fleet paint state update (가시성 + 하이라이트 통합) ──
   // eslint-disable-next-line react-hooks/preserve-manual-memoization
   const updateFcFleetPaintStates = useCallback(() => {
-    if (projection !== 'globe' || projectionBusyRef.current) return;
+    if (projection !== 'globe') return;
     const map = mapRef.current;
-    if (!map || !map.isStyleLoaded()) return;
+    if (!map) return;
 
     const fleetAwarePairMmsiList = makeUniqueSorted([...hoveredPairMmsiList, ...hoveredFleetMmsiList]);
 
@@ -319,16 +243,29 @@ export function useGlobeFcFleetOverlay(
         ? (['any', fleetOwnerMatchExpr, fleetMemberExpr] as never)
         : false;
 
+    // ── FC lines ──
+    const pairActive = hoveredPairMmsiList.length > 0 || hoveredFleetMmsiList.length > 0;
+    const fcVisible = overlays.fcLines || pairActive;
+    // ── Fleet circles ──
+    const fleetActive = hoveredFleetOwnerKeyList.length > 0 || hoveredFleetMmsiList.length > 0;
+    const fleetVisible = overlays.fleetCircles || fleetActive;
     try {
       if (map.getLayer('fc-lines-ml')) {
-        map.setPaintProperty(
+        map.setPaintProperty('fc-lines-ml', 'line-opacity', fcVisible ? 0.9 : 0);
-          'fc-lines-ml', 'line-color',
+        if (fcVisible) {
-          ['case', fcEndpointHighlightExpr, ['case', ['boolean', ['get', 'suspicious'], false], FC_LINE_SUSPICIOUS_ML_HL, FC_LINE_NORMAL_ML_HL], ['boolean', ['get', 'suspicious'], false], FC_LINE_SUSPICIOUS_ML, FC_LINE_NORMAL_ML] as never,
+          map.setPaintProperty(
-        );
+            'fc-lines-ml', 'line-color',
-        map.setPaintProperty(
+            fcEndpointHighlightExpr !== false
-          'fc-lines-ml', 'line-width',
+              ? ['case', fcEndpointHighlightExpr, ['case', ['boolean', ['get', 'suspicious'], false], FC_LINE_SUSPICIOUS_ML_HL, FC_LINE_NORMAL_ML_HL], ['boolean', ['get', 'suspicious'], false], FC_LINE_SUSPICIOUS_ML, FC_LINE_NORMAL_ML] as never
-          ['case', fcEndpointHighlightExpr, 2.0, 1.3] as never,
+              : ['case', ['boolean', ['get', 'suspicious'], false], FC_LINE_SUSPICIOUS_ML, FC_LINE_NORMAL_ML] as never,
-        );
+          );
+          map.setPaintProperty(
+            'fc-lines-ml', 'line-width',
+            fcEndpointHighlightExpr !== false
+              ? ['case', fcEndpointHighlightExpr, FC_LINE_W_HL, FC_LINE_W_NORMAL] as never
+              : FC_LINE_W_NORMAL,
+          );
+        }
       }
     } catch {
       // ignore
@@ -336,21 +273,85 @@ export function useGlobeFcFleetOverlay(
 
     try {
       if (map.getLayer('fleet-circles-ml')) {
-        map.setPaintProperty('fleet-circles-ml', 'line-color', ['case', fleetHighlightExpr, FLEET_LINE_ML_HL, FLEET_LINE_ML] as never);
+        map.setPaintProperty('fleet-circles-ml', 'line-opacity', fleetVisible ? 0.85 : 0);
-        map.setPaintProperty('fleet-circles-ml', 'line-width', ['case', fleetHighlightExpr, 2, 1.1] as never);
+        if (fleetVisible) {
+          map.setPaintProperty('fleet-circles-ml', 'line-color',
+            fleetHighlightExpr !== false
+              ? ['case', fleetHighlightExpr, FLEET_LINE_ML_HL, FLEET_LINE_ML] as never
+              : FLEET_LINE_ML,
+          );
+          map.setPaintProperty('fleet-circles-ml', 'line-width',
+            fleetHighlightExpr !== false
+              ? ['case', fleetHighlightExpr, FLEET_LINE_W_HL, FLEET_LINE_W_NORMAL] as never
+              : FLEET_LINE_W_NORMAL,
+          );
+        }
       }
     } catch {
       // ignore
     }
-  }, [projection, hoveredFleetMmsiList, hoveredFleetOwnerKeyList, hoveredPairMmsiList]);
 
+    kickRepaint(map);
+  }, [projection, hoveredFleetMmsiList, hoveredFleetOwnerKeyList, hoveredPairMmsiList, overlays.fcLines, overlays.fleetCircles]);
+
+  // paintStateRef를 최신 콜백으로 유지
+  useEffect(() => {
+    paintStateRef.current = updateFcFleetPaintStates;
+  }, [updateFcFleetPaintStates]);
+
+  // paint state 동기화
+  useEffect(() => {
+    updateFcFleetPaintStates();
+  }, [mapSyncEpoch, hoveredFleetMmsiList, hoveredFleetOwnerKeyList, hoveredPairMmsiList, projection, overlays.fcLines, overlays.fleetCircles, updateFcFleetPaintStates, fcLinks, fleetCircles]);
+
+  // ── Breathing animation ──
   useEffect(() => {
     const map = mapRef.current;
-    if (!map) return;
+    const hasFleetHover = hoveredFleetOwnerKeyList.length > 0 || hoveredFleetMmsiList.length > 0;
-    const stop = onMapStyleReady(map, updateFcFleetPaintStates);
+    const hasFcHover = hoveredPairMmsiList.length > 0 || hoveredFleetMmsiList.length > 0;
-    updateFcFleetPaintStates();
+    if (!map || (!hasFleetHover && !hasFcHover) || projection !== 'globe') {
-    return () => {
+      if (breatheRafRef.current) cancelAnimationFrame(breatheRafRef.current);
-      stop();
+      breatheRafRef.current = 0;
+      return;
+    }
+
+    const fleetAwarePairMmsiList = makeUniqueSorted([...hoveredPairMmsiList, ...hoveredFleetMmsiList]);
+    const fcEndpointHighlightExpr = fleetAwarePairMmsiList.length > 0
+      ? makeMmsiAnyEndpointExpr('fcMmsi', 'otherMmsi', fleetAwarePairMmsiList)
+      : false;
+    const fleetOwnerMatchExpr = hoveredFleetOwnerKeyList.length > 0 ? makeFleetOwnerMatchExpr(hoveredFleetOwnerKeyList) : false;
+    const fleetMemberExpr = hoveredFleetMmsiList.length > 0 ? makeFleetMemberMatchExpr(hoveredFleetMmsiList) : false;
+    const fleetHighlightExpr =
+      hoveredFleetOwnerKeyList.length > 0 || hoveredFleetMmsiList.length > 0
+        ? (['any', fleetOwnerMatchExpr, fleetMemberExpr] as never)
+        : false;
+
+    const animate = () => {
+      if (!map.isStyleLoaded()) {
+        breatheRafRef.current = requestAnimationFrame(animate);
+        return;
+      }
+      const t = (Math.sin(Date.now() / BREATHE_PERIOD_MS * Math.PI * 2) + 1) / 2;
+      try {
+        if (map.getLayer('fc-lines-ml') && fcEndpointHighlightExpr !== false) {
+          const hlW = FC_LINE_W_HL + t * BREATHE_AMP;
+          map.setPaintProperty('fc-lines-ml', 'line-width',
+            ['case', fcEndpointHighlightExpr, hlW, FC_LINE_W_NORMAL] as never);
+        }
+        if (map.getLayer('fleet-circles-ml') && fleetHighlightExpr !== false) {
+          const hlW = FLEET_LINE_W_HL + t * BREATHE_AMP;
+          map.setPaintProperty('fleet-circles-ml', 'line-width',
+            ['case', fleetHighlightExpr, hlW, FLEET_LINE_W_NORMAL] as never);
+        }
+      } catch {
+        // ignore
+      }
+      breatheRafRef.current = requestAnimationFrame(animate);
     };
-  }, [mapSyncEpoch, hoveredFleetMmsiList, hoveredFleetOwnerKeyList, hoveredPairMmsiList, projection, updateFcFleetPaintStates]);
+    breatheRafRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (breatheRafRef.current) cancelAnimationFrame(breatheRafRef.current);
+      breatheRafRef.current = 0;
+    };
+  }, [hoveredFleetMmsiList, hoveredFleetOwnerKeyList, hoveredPairMmsiList, projection]);
 }

apps/web/src/widgets/map3d/hooks/useGlobeInteraction.ts

@@ -14,6 +14,10 @@ import {
 } from '../lib/tooltips';
 import { getZoneIdFromProps, getZoneDisplayNameFromProps } from '../lib/zoneUtils';
 
+// setData() 후 타일 재빌드 중 queryRenderedFeatures가 일시적으로 빈 배열을 반환.
+// 즉시 clear 대신 딜레이를 두어 깜박임 방지.
+const TOOLTIP_CLEAR_DELAY_MS = 150;
+
 export function useGlobeInteraction(
   mapRef: MutableRefObject<maplibregl.Map | null>,
   projectionBusyRef: MutableRefObject<boolean>,
@@ -57,7 +61,7 @@ export function useGlobeInteraction(
   // eslint-disable-next-line react-hooks/preserve-manual-memoization
   const setGlobeTooltip = useCallback((lngLat: maplibregl.LngLatLike, tooltipHtml: string) => {
     const map = mapRef.current;
-    if (!map || !map.isStyleLoaded()) return;
+    if (!map) return;
     if (!mapTooltipRef.current) {
       mapTooltipRef.current = new maplibregl.Popup({
         closeButton: false,
@@ -74,6 +78,12 @@ export function useGlobeInteraction(
     mapTooltipRef.current.setLngLat(lngLat).setDOMContent(container).addTo(map);
   }, []);
 
+  // buildGlobeFeatureTooltip을 ref로 관리 — legacyHits/shipByMmsi가 매 AIS poll마다 변경되므로
+  // useCallback 의존성으로 넣으면 effect가 재실행되어 cleanup에서 tooltip이 제거됨
+  // ref로 관리하면 effect 재실행 없이 항상 최신 함수 참조
+  type TooltipFeature = { properties?: Record<string, unknown> | null; layer?: { id?: string } } | null | undefined;
+  const buildTooltipRef = useRef<(feature: TooltipFeature) => { html: string } | null>(() => null);
+
   const buildGlobeFeatureTooltip = useCallback(
     (feature: { properties?: Record<string, unknown> | null; layer?: { id?: string } } | null | undefined) => {
       if (!feature) return null;
@@ -136,17 +146,14 @@ export function useGlobeInteraction(
     [legacyHits, shipByMmsi],
   );
 
+  useEffect(() => {
+    buildTooltipRef.current = buildGlobeFeatureTooltip;
+  }, [buildGlobeFeatureTooltip]);
+
   useEffect(() => {
     const map = mapRef.current;
     if (!map) return;
 
-    const clearDeckGlobeHoverState = () => {
-      clearDeckHoverMmsi();
-      clearDeckHoverPairs();
-      setHoveredZoneId((prev) => (prev === null ? prev : null));
-      clearMapFleetHoverState();
-    };
-
     const resetGlobeHoverStates = () => {
       clearDeckHoverMmsi();
       clearDeckHoverPairs();
@@ -155,36 +162,52 @@ export function useGlobeInteraction(
     };
 
     const normalizeMmsiList = (value: unknown): number[] => {
-      if (!Array.isArray(value)) return [];
+      let arr = value;
+      // MapLibre는 GeoJSON 배열 프로퍼티를 JSON 문자열로 반환할 수 있음
+      if (typeof arr === 'string') {
+        try { arr = JSON.parse(arr); } catch { return []; }
+      }
+      if (!Array.isArray(arr)) return [];
       const out: number[] = [];
-      for (const n of value) {
+      for (const n of arr) {
         const m = toIntMmsi(n);
         if (m != null) out.push(m);
       }
       return out;
     };
 
+    // 지연 clear 타이머 — setData() 타일 재빌드 중 일시적 빈 결과를 무시
+    let clearTimer: ReturnType<typeof setTimeout> | null = null;
+
+    const scheduleClear = () => {
+      if (clearTimer) return; // 이미 예약됨
+      clearTimer = setTimeout(() => {
+        clearTimer = null;
+        resetGlobeHoverStates();
+        clearGlobeTooltip();
+      }, TOOLTIP_CLEAR_DELAY_MS);
+    };
+
+    const cancelClear = () => {
+      if (clearTimer) { clearTimeout(clearTimer); clearTimer = null; }
+    };
+
     const onMouseMove = (e: maplibregl.MapMouseEvent) => {
       if (projection !== 'globe') {
+        cancelClear();
         clearGlobeTooltip();
         resetGlobeHoverStates();
         return;
       }
       if (projectionBusyRef.current) {
-        resetGlobeHoverStates();
+        return; // 전환 중에는 기존 상태 유지 (clear하면 깜박임)
-        clearGlobeTooltip();
-        return;
-      }
-      if (!map.isStyleLoaded()) {
-        clearDeckGlobeHoverState();
-        clearGlobeTooltip();
-        return;
       }
 
       let candidateLayerIds: string[] = [];
       try {
         candidateLayerIds = [
           'ships-globe', 'ships-globe-lite', 'ships-globe-halo', 'ships-globe-outline',
+          'ships-globe-alarm-pulse', 'ships-globe-alarm-badge',
           'pair-lines-ml', 'fc-lines-ml',
           'fleet-circles-ml',
           'pair-range-ml',
@@ -195,14 +218,18 @@ export function useGlobeInteraction(
       }
 
       if (candidateLayerIds.length === 0) {
-        resetGlobeHoverStates();
+        scheduleClear();
-        clearGlobeTooltip();
         return;
       }
 
       let rendered: Array<{ properties?: Record<string, unknown> | null; layer?: { id?: string } }> = [];
       try {
-        rendered = map.queryRenderedFeatures(e.point, { layers: candidateLayerIds }) as unknown as Array<{
+        const tolerance = 10;
+        const bbox: [maplibregl.PointLike, maplibregl.PointLike] = [
+          [e.point.x - tolerance, e.point.y - tolerance],
+          [e.point.x + tolerance, e.point.y + tolerance],
+        ];
+        rendered = map.queryRenderedFeatures(bbox, { layers: candidateLayerIds }) as unknown as Array<{
           properties?: Record<string, unknown> | null;
           layer?: { id?: string };
         }>;
@@ -212,6 +239,7 @@ export function useGlobeInteraction(
 
       const priority = [
         'ships-globe', 'ships-globe-lite', 'ships-globe-halo', 'ships-globe-outline',
+        'ships-globe-alarm-pulse', 'ships-globe-alarm-badge',
         'pair-lines-ml', 'fc-lines-ml', 'pair-range-ml',
         'fleet-circles-ml',
         'zones-fill', 'zones-line', 'zones-label',
@@ -222,18 +250,23 @@ export function useGlobeInteraction(
         | undefined;
 
       if (!first) {
-        resetGlobeHoverStates();
+        // 피처 없음 — 타일 재빌드 중 일시적 누락일 수 있으므로 지연 clear
-        clearGlobeTooltip();
+        scheduleClear();
         return;
       }
 
+      // 피처 발견 — 지연 clear 취소
+      cancelClear();
+
       const layerId = first.layer?.id;
       const props = first.properties || {};
       const isShipLayer =
         layerId === 'ships-globe' ||
         layerId === 'ships-globe-lite' ||
         layerId === 'ships-globe-halo' ||
-        layerId === 'ships-globe-outline';
+        layerId === 'ships-globe-outline' ||
+        layerId === 'ships-globe-alarm-pulse' ||
+        layerId === 'ships-globe-alarm-badge';
       const isPairLayer = layerId === 'pair-lines-ml' || layerId === 'pair-range-ml';
       const isFcLayer = layerId === 'fc-lines-ml';
       const isFleetLayer = layerId === 'fleet-circles-ml';
@@ -277,7 +310,7 @@ export function useGlobeInteraction(
         resetGlobeHoverStates();
       }
 
-      const tooltip = buildGlobeFeatureTooltip(first);
+      const tooltip = buildTooltipRef.current(first);
       if (!tooltip) {
         if (!isZoneLayer) {
           resetGlobeHoverStates();
@@ -295,6 +328,7 @@ export function useGlobeInteraction(
     };
 
     const onMouseOut = () => {
+      cancelClear();
       resetGlobeHoverStates();
       clearGlobeTooltip();
     };
@@ -303,13 +337,14 @@ export function useGlobeInteraction(
     map.on('mouseout', onMouseOut);
 
     return () => {
+      cancelClear();
       map.off('mousemove', onMouseMove);
       map.off('mouseout', onMouseOut);
-      clearGlobeTooltip();
+      // cleanup에서 tooltip 제거하지 않음 — 의존성 변경(AIS poll 등)으로 effect가
+      // 재실행될 때 tooltip이 사라지는 문제 방지. tooltip은 mousemove/mouseout 이벤트가 처리.
     };
   }, [
     projection,
-    buildGlobeFeatureTooltip,
     clearGlobeTooltip,
     clearMapFleetHoverState,
     clearDeckHoverPairs,
@@ -319,4 +354,9 @@ export function useGlobeInteraction(
     setMapFleetHoverState,
     setGlobeTooltip,
   ]);
+
+  // 컴포넌트 unmount 시에만 tooltip 제거
+  useEffect(() => {
+    return () => { clearGlobeTooltip(); };
+  }, [clearGlobeTooltip]);
 }

apps/web/src/widgets/map3d/hooks/useGlobePairOverlay.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, type MutableRefObject } from 'react';
+import { useCallback, useEffect, useRef, type MutableRefObject } from 'react';
 import type maplibregl from 'maplibre-gl';
 import type { GeoJSONSource, GeoJSONSourceSpecification, LayerSpecification } from 'maplibre-gl';
 import type { PairLink } from '../../../features/legacyDashboard/model/types';
@@ -14,12 +14,22 @@ import { makePairLinkFeatureId } from '../lib/featureIds';
 import { makeMmsiPairHighlightExpr } from '../lib/mlExpressions';
 import { kickRepaint, onMapStyleReady } from '../lib/mapCore';
 import { circleRingLngLat } from '../lib/geometry';
-import { guardedSetVisibility } from '../lib/layerHelpers';
+
+// ── Overlay line width constants ──
+const PAIR_LINE_W_NORMAL = 2.5;
+const PAIR_LINE_W_WARN = 3.5;
+const PAIR_LINE_W_HL = 4.5;
+const PAIR_RANGE_W_NORMAL = 1.8;
+const PAIR_RANGE_W_HL = 2.8;
+
+// ── Breathing animation constants ──
+const BREATHE_AMP = 2.0;
+const BREATHE_PERIOD_MS = 1200;
 
 /** Globe pair lines + pair range 오버레이 */
 export function useGlobePairOverlay(
   mapRef: MutableRefObject<maplibregl.Map | null>,
-  projectionBusyRef: MutableRefObject<boolean>,
+  _projectionBusyRef: MutableRefObject<boolean>,
   reorderGlobeFeatureLayers: () => void,
   opts: {
     overlays: MapToggleState;
@@ -30,8 +40,14 @@ export function useGlobePairOverlay(
   },
 ) {
   const { overlays, pairLinks, projection, mapSyncEpoch, hoveredPairMmsiList } = opts;
+  const breatheRafRef = useRef<number>(0);
 
-  // Pair lines
+  // paint state ref — 데이터 effect에서 레이어 생성 직후 최신 paint state를 즉시 적용
+  const paintStateRef = useRef<() => void>(() => {});
+
+  // ── Pair lines 데이터 effect ──
+  // projectionBusy/isStyleLoaded 선행 가드 제거 — try/catch로 처리
+  // 실패 시 다음 AIS poll(mapSyncEpoch 변경)에서 자연스럽게 재시도
   useEffect(() => {
     const map = mapRef.current;
     if (!map) return;
@@ -39,16 +55,17 @@ export function useGlobePairOverlay(
     const srcId = 'pair-lines-ml-src';
     const layerId = 'pair-lines-ml';
 
-    const remove = () => {
-      guardedSetVisibility(map, layerId, 'none');
-    };
-
     const ensure = () => {
-      if (projectionBusyRef.current) return;
+      if (projection !== 'globe') {
-      if (!map.isStyleLoaded()) return;
+        try {
-      const pairHoverActive = hoveredPairMmsiList.length >= 2;
+          if (map.getLayer(layerId)) map.setPaintProperty(layerId, 'line-opacity', 0);
-      if (projection !== 'globe' || (!overlays.pairLines && !pairHoverActive) || (pairLinks?.length ?? 0) === 0) {
+        } catch { /* ignore */ }
-        remove();
+        return;
+      }
+      if ((pairLinks?.length ?? 0) === 0) {
+        try {
+          if (map.getLayer(layerId)) map.setPaintProperty(layerId, 'line-opacity', 0);
+        } catch { /* ignore */ }
         return;
       }
 
@@ -72,12 +89,12 @@ export function useGlobePairOverlay(
         const existing = map.getSource(srcId) as GeoJSONSource | undefined;
         if (existing) existing.setData(fc);
         else map.addSource(srcId, { type: 'geojson', data: fc } as GeoJSONSourceSpecification);
-      } catch (e) {
+      } catch {
-        console.warn('Pair lines source setup failed:', e);
+        return; // 다음 poll에서 재시도
-        return;
       }
 
-      if (!map.getLayer(layerId)) {
+      const needReorder = !map.getLayer(layerId);
+      if (needReorder) {
         try {
           map.addLayer(
             {
@@ -86,44 +103,31 @@ export function useGlobePairOverlay(
               source: srcId,
               layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
               paint: {
-                'line-color': [
+                'line-color': PAIR_LINE_NORMAL_ML,
-                  'case',
+                'line-width': PAIR_LINE_W_NORMAL,
-                  ['==', ['get', 'highlighted'], 1],
+                'line-opacity': 0,
-                  ['case', ['boolean', ['get', 'warn'], false], PAIR_LINE_WARN_ML_HL, PAIR_LINE_NORMAL_ML_HL],
-                  ['boolean', ['get', 'warn'], false],
-                  PAIR_LINE_WARN_ML,
-                  PAIR_LINE_NORMAL_ML,
-                ] as never,
-                'line-width': [
-                  'case',
-                  ['==', ['get', 'highlighted'], 1], 2.8,
-                  ['boolean', ['get', 'warn'], false], 2.2,
-                  1.4,
-                ] as never,
-                'line-opacity': 0.9,
               },
-        } as unknown as LayerSpecification,
+            } as unknown as LayerSpecification,
             undefined,
           );
-        } catch (e) {
+        } catch {
-          console.warn('Pair lines layer add failed:', e);
+          return; // 다음 poll에서 재시도
         }
-      } else {
+        reorderGlobeFeatureLayers();
-        guardedSetVisibility(map, layerId, 'visible');
       }
 
-      reorderGlobeFeatureLayers();
+      // 즉시 올바른 paint state 적용 — 타이밍 간극으로 opacity:0 고착 방지
+      paintStateRef.current();
       kickRepaint(map);
     };
 
+    // 초기 style 로드 대기 — 이후에는 AIS poll 사이클이 재시도 보장
     const stop = onMapStyleReady(map, ensure);
     ensure();
-    return () => {
+    return () => { stop(); };
-      stop();
+  }, [projection, pairLinks, mapSyncEpoch, reorderGlobeFeatureLayers]);
-    };
-  }, [projection, overlays.pairLines, pairLinks, hoveredPairMmsiList, mapSyncEpoch, reorderGlobeFeatureLayers]);
 
-  // Pair range
+  // ── Pair range 데이터 effect ──
   useEffect(() => {
     const map = mapRef.current;
     if (!map) return;
@@ -131,16 +135,11 @@ export function useGlobePairOverlay(
     const srcId = 'pair-range-ml-src';
     const layerId = 'pair-range-ml';
 
-    const remove = () => {
-      guardedSetVisibility(map, layerId, 'none');
-    };
-
     const ensure = () => {
-      if (projectionBusyRef.current) return;
+      if (projection !== 'globe') {
-      if (!map.isStyleLoaded()) return;
+        try {
-      const pairHoverActive = hoveredPairMmsiList.length >= 2;
+          if (map.getLayer(layerId)) map.setPaintProperty(layerId, 'line-opacity', 0);
-      if (projection !== 'globe' || (!overlays.pairRange && !pairHoverActive)) {
+        } catch { /* ignore */ }
-        remove();
         return;
       }
 
@@ -157,7 +156,9 @@ export function useGlobePairOverlay(
         });
       }
       if (ranges.length === 0) {
-        remove();
+        try {
+          if (map.getLayer(layerId)) map.setPaintProperty(layerId, 'line-opacity', 0);
+        } catch { /* ignore */ }
         return;
       }
 
@@ -175,7 +176,6 @@ export function useGlobePairOverlay(
               aMmsi: c.aMmsi,
               bMmsi: c.bMmsi,
               distanceNm: c.distanceNm,
-              highlighted: 0,
             },
           };
         }),
@@ -185,100 +185,159 @@ export function useGlobePairOverlay(
         const existing = map.getSource(srcId) as GeoJSONSource | undefined;
         if (existing) existing.setData(fc);
         else map.addSource(srcId, { type: 'geojson', data: fc } as GeoJSONSourceSpecification);
-      } catch (e) {
+      } catch {
-        console.warn('Pair range source setup failed:', e);
+        return; // 다음 poll에서 재시도
-        return;
       }
 
-      if (!map.getLayer(layerId)) {
+      const needReorder = !map.getLayer(layerId);
+      if (needReorder) {
         try {
           map.addLayer(
             {
               id: layerId,
               type: 'line',
               source: srcId,
-              layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
+              layout: {
+                'line-cap': 'round',
+                'line-join': 'round',
+                visibility: 'visible',
+              },
               paint: {
-                'line-color': [
+                'line-color': PAIR_RANGE_NORMAL_ML,
-                  'case',
+                'line-width': PAIR_RANGE_W_NORMAL,
-                  ['==', ['get', 'highlighted'], 1],
+                'line-opacity': 0,
-                  ['case', ['boolean', ['get', 'warn'], false], PAIR_RANGE_WARN_ML_HL, PAIR_RANGE_NORMAL_ML_HL],
-                  ['boolean', ['get', 'warn'], false],
-                  PAIR_RANGE_WARN_ML,
-                  PAIR_RANGE_NORMAL_ML,
-                ] as never,
-                'line-width': ['case', ['==', ['get', 'highlighted'], 1], 1.6, 1.0] as never,
-                'line-opacity': 0.85,
               },
             } as unknown as LayerSpecification,
             undefined,
           );
-        } catch (e) {
+        } catch {
-          console.warn('Pair range layer add failed:', e);
+          return; // 다음 poll에서 재시도
         }
-      } else {
+        reorderGlobeFeatureLayers();
-        guardedSetVisibility(map, layerId, 'visible');
       }
 
+      paintStateRef.current();
       kickRepaint(map);
     };
 
+    // 초기 style 로드 대기 — 이후에는 AIS poll 사이클이 재시도 보장
     const stop = onMapStyleReady(map, ensure);
     ensure();
-    return () => {
+    return () => { stop(); };
-      stop();
+  }, [projection, pairLinks, mapSyncEpoch, reorderGlobeFeatureLayers]);
-    };
-  }, [projection, overlays.pairRange, pairLinks, hoveredPairMmsiList, mapSyncEpoch, reorderGlobeFeatureLayers]);
 
-  // Pair paint state updates
+  // ── Pair paint state update (가시성 + 하이라이트 통합) ──
+  // setLayoutProperty(visibility) 대신 setPaintProperty(line-opacity)로 가시성 제어
+  // → style._changed 미트리거 → alarm badge symbol placement 재계산 방지
   // eslint-disable-next-line react-hooks/preserve-manual-memoization
   const updatePairPaintStates = useCallback(() => {
-    if (projection !== 'globe' || projectionBusyRef.current) return;
+    if (projection !== 'globe') return;
     const map = mapRef.current;
-    if (!map || !map.isStyleLoaded()) return;
+    if (!map) return;
 
-    const pairHighlightExpr = hoveredPairMmsiList.length >= 2
+    const active = hoveredPairMmsiList.length >= 2;
+    const pairHighlightExpr = active
       ? makeMmsiPairHighlightExpr('aMmsi', 'bMmsi', hoveredPairMmsiList)
       : false;
 
+    // ── Pair lines: 가시성 + 하이라이트 ──
+    const pairLinesVisible = overlays.pairLines || active;
     try {
       if (map.getLayer('pair-lines-ml')) {
-        map.setPaintProperty(
+        map.setPaintProperty('pair-lines-ml', 'line-opacity', pairLinesVisible ? 0.9 : 0);
-          'pair-lines-ml', 'line-color',
+        if (pairLinesVisible) {
-          ['case', pairHighlightExpr, ['case', ['boolean', ['get', 'warn'], false], PAIR_LINE_WARN_ML_HL, PAIR_LINE_NORMAL_ML_HL], ['boolean', ['get', 'warn'], false], PAIR_LINE_WARN_ML, PAIR_LINE_NORMAL_ML] as never,
+          map.setPaintProperty(
-        );
+            'pair-lines-ml', 'line-color',
-        map.setPaintProperty(
+            pairHighlightExpr !== false
-          'pair-lines-ml', 'line-width',
+              ? ['case', pairHighlightExpr, ['case', ['boolean', ['get', 'warn'], false], PAIR_LINE_WARN_ML_HL, PAIR_LINE_NORMAL_ML_HL], ['boolean', ['get', 'warn'], false], PAIR_LINE_WARN_ML, PAIR_LINE_NORMAL_ML] as never
-          ['case', pairHighlightExpr, 2.8, ['boolean', ['get', 'warn'], false], 2.2, 1.4] as never,
+              : ['case', ['boolean', ['get', 'warn'], false], PAIR_LINE_WARN_ML, PAIR_LINE_NORMAL_ML] as never,
-        );
+          );
+          map.setPaintProperty(
+            'pair-lines-ml', 'line-width',
+            pairHighlightExpr !== false
+              ? ['case', pairHighlightExpr, PAIR_LINE_W_HL, ['boolean', ['get', 'warn'], false], PAIR_LINE_W_WARN, PAIR_LINE_W_NORMAL] as never
+              : ['case', ['boolean', ['get', 'warn'], false], PAIR_LINE_W_WARN, PAIR_LINE_W_NORMAL] as never,
+          );
+        }
       }
     } catch {
       // ignore
     }
 
+    // ── Pair range: 가시성 + 하이라이트 ──
+    const pairRangeVisible = overlays.pairRange || active;
     try {
       if (map.getLayer('pair-range-ml')) {
-        map.setPaintProperty(
+        map.setPaintProperty('pair-range-ml', 'line-opacity', pairRangeVisible ? 0.85 : 0);
-          'pair-range-ml', 'line-color',
+        if (pairRangeVisible) {
-          ['case', pairHighlightExpr, ['case', ['boolean', ['get', 'warn'], false], PAIR_RANGE_WARN_ML_HL, PAIR_RANGE_NORMAL_ML_HL], ['boolean', ['get', 'warn'], false], PAIR_RANGE_WARN_ML, PAIR_RANGE_NORMAL_ML] as never,
+          map.setPaintProperty(
-        );
+            'pair-range-ml', 'line-color',
-        map.setPaintProperty(
+            pairHighlightExpr !== false
-          'pair-range-ml', 'line-width',
+              ? ['case', pairHighlightExpr, ['case', ['boolean', ['get', 'warn'], false], PAIR_RANGE_WARN_ML_HL, PAIR_RANGE_NORMAL_ML_HL], ['boolean', ['get', 'warn'], false], PAIR_RANGE_WARN_ML, PAIR_RANGE_NORMAL_ML] as never
-          ['case', pairHighlightExpr, 1.6, 1.0] as never,
+              : ['case', ['boolean', ['get', 'warn'], false], PAIR_RANGE_WARN_ML, PAIR_RANGE_NORMAL_ML] as never,
-        );
+          );
+          map.setPaintProperty(
+            'pair-range-ml', 'line-width',
+            pairHighlightExpr !== false
+              ? ['case', pairHighlightExpr, PAIR_RANGE_W_HL, PAIR_RANGE_W_NORMAL] as never
+              : PAIR_RANGE_W_NORMAL,
+          );
+        }
       }
     } catch {
       // ignore
     }
-  }, [projection, hoveredPairMmsiList]);
 
+    kickRepaint(map);
+  }, [projection, hoveredPairMmsiList, overlays.pairLines, overlays.pairRange]);
+
+  // paintStateRef를 최신 콜백으로 유지 — useEffect 내에서만 ref 업데이트 (react-hooks/refs 준수)
+  useEffect(() => {
+    paintStateRef.current = updatePairPaintStates;
+  }, [updatePairPaintStates]);
+
+  // paint state 동기화: 호버/토글/epoch 변경 시 즉시 반영
+  useEffect(() => {
+    updatePairPaintStates();
+  }, [mapSyncEpoch, hoveredPairMmsiList, projection, overlays.pairLines, overlays.pairRange, updatePairPaintStates, pairLinks]);
+
+  // ── Breathing animation for highlighted pair overlays ──
   useEffect(() => {
     const map = mapRef.current;
-    if (!map) return;
+    if (!map || hoveredPairMmsiList.length < 2 || projection !== 'globe') {
-    const stop = onMapStyleReady(map, updatePairPaintStates);
+      if (breatheRafRef.current) cancelAnimationFrame(breatheRafRef.current);
-    updatePairPaintStates();
+      breatheRafRef.current = 0;
-    return () => {
+      return;
-      stop();
+    }
+
+    const pairHighlightExpr = makeMmsiPairHighlightExpr('aMmsi', 'bMmsi', hoveredPairMmsiList);
+
+    const animate = () => {
+      if (!map.isStyleLoaded()) {
+        breatheRafRef.current = requestAnimationFrame(animate);
+        return;
+      }
+      const t = (Math.sin(Date.now() / BREATHE_PERIOD_MS * Math.PI * 2) + 1) / 2;
+      try {
+        if (map.getLayer('pair-lines-ml')) {
+          const hlW = PAIR_LINE_W_HL + t * BREATHE_AMP;
+          map.setPaintProperty('pair-lines-ml', 'line-width',
+            ['case', pairHighlightExpr, hlW, ['boolean', ['get', 'warn'], false], PAIR_LINE_W_WARN, PAIR_LINE_W_NORMAL] as never);
+        }
+        if (map.getLayer('pair-range-ml')) {
+          const hlW = PAIR_RANGE_W_HL + t * BREATHE_AMP;
+          map.setPaintProperty('pair-range-ml', 'line-width',
+            ['case', pairHighlightExpr, hlW, PAIR_RANGE_W_NORMAL] as never);
+        }
+      } catch {
+        // ignore
+      }
+      breatheRafRef.current = requestAnimationFrame(animate);
     };
-  }, [mapSyncEpoch, hoveredPairMmsiList, projection, updatePairPaintStates]);
+    breatheRafRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (breatheRafRef.current) cancelAnimationFrame(breatheRafRef.current);
+      breatheRafRef.current = 0;
+    };
+  }, [hoveredPairMmsiList, projection]);
 }

apps/web/src/widgets/map3d/hooks/useGlobeShipHover.ts

@@ -9,7 +9,7 @@ import {
   DEG2RAD,
 } from '../constants';
 import { isFiniteNumber } from '../lib/setUtils';
-import { GLOBE_SHIP_CIRCLE_RADIUS_EXPR } from '../lib/mlExpressions';
+import { GLOBE_SHIP_CIRCLE_RADIUS_PROP_EXPR } from '../lib/mlExpressions';
 import { kickRepaint, onMapStyleReady } from '../lib/mapCore';
 import { getDisplayHeading, getGlobeBaseShipColor } from '../lib/shipUtils';
 import { ensureFallbackShipImage } from '../lib/globeShipIcon';
@@ -19,7 +19,7 @@ import { guardedSetVisibility } from '../lib/layerHelpers';
 /** Globe 호버 오버레이 + 클릭 선택 */
 export function useGlobeShipHover(
   mapRef: MutableRefObject<maplibregl.Map | null>,
-  projectionBusyRef: MutableRefObject<boolean>,
+  _projectionBusyRef: MutableRefObject<boolean>,
   reorderGlobeFeatureLayers: () => void,
   opts: {
     projection: MapProjectionId;
@@ -62,9 +62,6 @@ export function useGlobeShipHover(
     };
 
     const ensure = () => {
-      if (projectionBusyRef.current) return;
-      if (!map.isStyleLoaded()) return;
-
       if (projection !== 'globe' || !settings.showShips || shipHoverOverlaySet.size === 0) {
         hideHover();
         return;
@@ -74,7 +71,9 @@ export function useGlobeShipHover(
         epochRef.current = mapSyncEpoch;
       }
 
-      ensureFallbackShipImage(map, imgId);
+      try {
+        ensureFallbackShipImage(map, imgId);
+      } catch { /* ignore */ }
       if (!map.hasImage(imgId)) {
         return;
       }
@@ -166,7 +165,7 @@ export function useGlobeShipHover(
                 ] as never,
               },
               paint: {
-                'circle-radius': GLOBE_SHIP_CIRCLE_RADIUS_EXPR,
+                'circle-radius': GLOBE_SHIP_CIRCLE_RADIUS_PROP_EXPR,
                 'circle-color': [
                   'case',
                   ['==', ['get', 'selected'], 1], 'rgba(14,234,255,1)',
@@ -181,7 +180,7 @@ export function useGlobeShipHover(
           console.warn('Ship hover halo layer add failed:', e);
         }
       } else {
-        map.setLayoutProperty(haloId, 'visibility', 'visible');
+        guardedSetVisibility(map, haloId, 'visible');
       }
 
       if (!map.getLayer(outlineId)) {
@@ -192,7 +191,7 @@ export function useGlobeShipHover(
               type: 'circle',
               source: srcId,
               paint: {
-                'circle-radius': GLOBE_SHIP_CIRCLE_RADIUS_EXPR,
+                'circle-radius': GLOBE_SHIP_CIRCLE_RADIUS_PROP_EXPR,
                 'circle-color': 'rgba(0,0,0,0)',
                 'circle-stroke-color': [
                   'case',
@@ -222,7 +221,7 @@ export function useGlobeShipHover(
           console.warn('Ship hover outline layer add failed:', e);
         }
       } else {
-        map.setLayoutProperty(outlineId, 'visibility', 'visible');
+        guardedSetVisibility(map, outlineId, 'visible');
       }
 
       if (!map.getLayer(symbolId)) {
@@ -267,7 +266,7 @@ export function useGlobeShipHover(
           console.warn('Ship hover symbol layer add failed:', e);
         }
       } else {
-        map.setLayoutProperty(symbolId, 'visibility', 'visible');
+        guardedSetVisibility(map, symbolId, 'visible');
       }
 
       if (needReorder) {
@@ -301,15 +300,20 @@ export function useGlobeShipHover(
     const symbolLiteId = 'ships-globe-lite';
     const haloId = 'ships-globe-halo';
     const outlineId = 'ships-globe-outline';
-    const clickedRadiusDeg2 = Math.pow(0.08, 2);
+    const clickedRadiusDeg2 = Math.pow(0.12, 2);
 
     const onClick = (e: maplibregl.MapMouseEvent) => {
       try {
-        const layerIds = [symbolId, symbolLiteId, haloId, outlineId].filter((id) => map.getLayer(id));
+        const layerIds = [symbolId, symbolLiteId, haloId, outlineId, 'ships-globe-alarm-pulse', 'ships-globe-alarm-badge'].filter((id) => map.getLayer(id));
         let feats: unknown[] = [];
         if (layerIds.length > 0) {
           try {
-            feats = map.queryRenderedFeatures(e.point, { layers: layerIds }) as unknown[];
+            const tolerance = 10;
+            const bbox: [maplibregl.PointLike, maplibregl.PointLike] = [
+              [e.point.x - tolerance, e.point.y - tolerance],
+              [e.point.x + tolerance, e.point.y + tolerance],
+            ];
+            feats = map.queryRenderedFeatures(bbox, { layers: layerIds }) as unknown[];
           } catch {
             feats = [];
           }

apps/web/src/widgets/map3d/hooks/useGlobeShipLabels.ts

@@ -1,16 +1,19 @@
 import { useEffect, type MutableRefObject } from 'react';
 import type maplibregl from 'maplibre-gl';
-import type { GeoJSONSource, GeoJSONSourceSpecification, LayerSpecification } from 'maplibre-gl';
 import type { AisTarget } from '../../../entities/aisTarget/model/types';
 import type { LegacyVesselInfo } from '../../../entities/legacyVessel/model/types';
+import type { LegacyAlarmKind } from '../../../features/legacyDashboard/model/types';
 import type { MapToggleState } from '../../../features/mapToggles/MapToggles';
 import type { Map3DSettings, MapProjectionId } from '../types';
-import { kickRepaint, onMapStyleReady } from '../lib/mapCore';
+import { onMapStyleReady } from '../lib/mapCore';
 
-/** Mercator 모드 선명 라벨 (허가 선박 + 선택/하이라이트) */
+/**
+ * Mercator 모드 선명 라벨 — 레거시 MapLibre 레이어 정리 전용.
+ * 실제 라벨 렌더링은 Deck.gl TextLayer (deckLayerFactories.ts)에서 처리.
+ */
 export function useGlobeShipLabels(
   mapRef: MutableRefObject<maplibregl.Map | null>,
-  projectionBusyRef: MutableRefObject<boolean>,
+  _projectionBusyRef: MutableRefObject<boolean>,
   opts: {
     projection: MapProjectionId;
     settings: Map3DSettings;
@@ -20,12 +23,10 @@ export function useGlobeShipLabels(
     legacyHits: Map<number, LegacyVesselInfo> | null | undefined;
     selectedMmsi: number | null;
     mapSyncEpoch: number;
+    alarmMmsiMap?: Map<number, LegacyAlarmKind>;
   },
 ) {
-  const {
+  const { mapSyncEpoch } = opts;
-    projection, settings, shipData, shipHighlightSet,
-    overlays, legacyHits, selectedMmsi, mapSyncEpoch,
-  } = opts;
 
   useEffect(() => {
     const map = mapRef.current;
@@ -48,117 +49,16 @@ export function useGlobeShipLabels(
     };
 
     const ensure = () => {
-      if (projectionBusyRef.current) return;
+      // Mercator ship labels are now rendered via Deck.gl TextLayer
+      // (see buildMercatorDeckLayers in deckLayerFactories.ts).
+      // Always clean up any stale MapLibre label layer.
       if (!map.isStyleLoaded()) return;
-
+      remove();
-      if (projection !== 'mercator' || !settings.showShips) {
-        remove();
-        return;
-      }
-
-      const visibility = overlays.shipLabels ? 'visible' : 'none';
-
-      const features: GeoJSON.Feature<GeoJSON.Point>[] = [];
-      for (const t of shipData) {
-        const legacy = legacyHits?.get(t.mmsi) ?? null;
-        const isTarget = !!legacy;
-        const isSelected = selectedMmsi != null && t.mmsi === selectedMmsi;
-        const isPinnedHighlight = shipHighlightSet.has(t.mmsi);
-        if (!isTarget && !isSelected && !isPinnedHighlight) continue;
-
-        const labelName = (legacy?.shipNameCn || legacy?.shipNameRoman || t.name || '').trim();
-        if (!labelName) continue;
-
-        features.push({
-          type: 'Feature',
-          id: `ship-label-${t.mmsi}`,
-          geometry: { type: 'Point', coordinates: [t.lon, t.lat] },
-          properties: {
-            mmsi: t.mmsi,
-            labelName,
-            selected: isSelected ? 1 : 0,
-            highlighted: isPinnedHighlight ? 1 : 0,
-            permitted: isTarget ? 1 : 0,
-          },
-        });
-      }
-
-      const fc: GeoJSON.FeatureCollection<GeoJSON.Point> = { type: 'FeatureCollection', features };
-
-      try {
-        const existing = map.getSource(srcId) as GeoJSONSource | undefined;
-        if (existing) existing.setData(fc);
-        else map.addSource(srcId, { type: 'geojson', data: fc } as GeoJSONSourceSpecification);
-      } catch (e) {
-        console.warn('Ship label source setup failed:', e);
-        return;
-      }
-
-      const filter = ['!=', ['to-string', ['coalesce', ['get', 'labelName'], '']], ''] as unknown as unknown[];
-
-      if (!map.getLayer(layerId)) {
-        try {
-          map.addLayer(
-            {
-              id: layerId,
-              type: 'symbol',
-              source: srcId,
-              minzoom: 7,
-              filter: filter as never,
-              layout: {
-                visibility,
-                'symbol-placement': 'point',
-                'text-field': ['get', 'labelName'] as never,
-                'text-font': ['Noto Sans Regular', 'Open Sans Regular'],
-                'text-size': ['interpolate', ['linear'], ['zoom'], 7, 10, 10, 11, 12, 12, 14, 13] as never,
-                'text-anchor': 'top',
-                'text-offset': [0, 1.1],
-                'text-padding': 2,
-                'text-allow-overlap': false,
-                'text-ignore-placement': false,
-              },
-              paint: {
-                'text-color': [
-                  'case',
-                  ['==', ['get', 'selected'], 1],
-                  'rgba(14,234,255,0.95)',
-                  ['==', ['get', 'highlighted'], 1],
-                  'rgba(245,158,11,0.95)',
-                  'rgba(226,232,240,0.92)',
-                ] as never,
-                'text-halo-color': 'rgba(2,6,23,0.85)',
-                'text-halo-width': 1.2,
-                'text-halo-blur': 0.8,
-              },
-            } as unknown as LayerSpecification,
-            undefined,
-          );
-        } catch (e) {
-          console.warn('Ship label layer add failed:', e);
-        }
-      } else {
-        try {
-          map.setLayoutProperty(layerId, 'visibility', visibility);
-        } catch {
-          // ignore
-        }
-      }
-
-      kickRepaint(map);
     };
 
     const stop = onMapStyleReady(map, ensure);
     return () => {
       stop();
     };
-  }, [
+  }, [mapSyncEpoch]);
-    projection,
-    settings.showShips,
-    overlays.shipLabels,
-    shipData,
-    legacyHits,
-    selectedMmsi,
-    shipHighlightSet,
-    mapSyncEpoch,
-  ]);
 }

apps/web/src/widgets/map3d/hooks/useGlobeShipLayers.ts

@@ -3,6 +3,7 @@ import type maplibregl from 'maplibre-gl';
 import type { GeoJSONSource, GeoJSONSourceSpecification, LayerSpecification } from 'maplibre-gl';
 import type { AisTarget } from '../../../entities/aisTarget/model/types';
 import type { LegacyVesselInfo } from '../../../entities/legacyVessel/model/types';
+import { ALARM_BADGE, type LegacyAlarmKind } from '../../../features/legacyDashboard/model/types';
 import type { MapToggleState } from '../../../features/mapToggles/MapToggles';
 import type { Map3DSettings, MapProjectionId } from '../types';
 import {
@@ -26,7 +27,14 @@ import {
 import { clampNumber } from '../lib/geometry';
 import { guardedSetVisibility } from '../lib/layerHelpers';
 
-/** Globe 모드 선박 아이콘 레이어 (halo, outline, symbol, label) */
+// ── Alarm pulse animation constants ──
+const ALARM_PULSE_R_MIN = 8;
+const ALARM_PULSE_R_MAX = 14;
+const ALARM_PULSE_R_HOVER_MIN = 12;
+const ALARM_PULSE_R_HOVER_MAX = 18;
+const ALARM_PULSE_PERIOD_MS = 1500;
+
+/** Globe 모드 선박 아이콘 레이어 (halo, outline, symbol, label, alarm pulse, alarm badge) */
 export function useGlobeShipLayers(
   mapRef: MutableRefObject<maplibregl.Map | null>,
   projectionBusyRef: MutableRefObject<boolean>,
@@ -41,14 +49,19 @@ export function useGlobeShipLayers(
     isBaseHighlightedMmsi: (mmsi: number) => boolean;
     mapSyncEpoch: number;
     onGlobeShipsReady?: (ready: boolean) => void;
+    alarmMmsiMap?: Map<number, LegacyAlarmKind>;
   },
 ) {
   const {
     projection, settings, shipData, overlays, legacyHits,
     selectedMmsi, isBaseHighlightedMmsi, mapSyncEpoch, onGlobeShipsReady,
+    alarmMmsiMap,
   } = opts;
 
   const epochRef = useRef(-1);
+  const breatheRafRef = useRef<number>(0);
+  const prevGeoJsonRef = useRef<GeoJSON.FeatureCollection | null>(null);
+  const prevAlarmGeoJsonRef = useRef<GeoJSON.FeatureCollection | null>(null);
 
   // Globe GeoJSON을 projection과 무관하게 항상 사전 계산
   // Globe 전환 시 즉시 사용 가능하도록 useMemo로 캐싱
@@ -57,7 +70,9 @@ export function useGlobeShipLayers(
       type: 'FeatureCollection',
       features: shipData.map((t) => {
         const legacy = legacyHits?.get(t.mmsi) ?? null;
-        const labelName = legacy?.shipNameCn || legacy?.shipNameRoman || t.name || '';
+        const alarmKind = alarmMmsiMap?.get(t.mmsi) ?? null;
+        const baseName = legacy?.shipNameCn || legacy?.shipNameRoman || t.name || '';
+        const labelName = alarmKind ? `[${ALARM_BADGE[alarmKind].label}] ${baseName}` : baseName;
         const heading = getDisplayHeading({
           cog: t.cog,
           heading: t.heading,
@@ -70,16 +85,13 @@ export function useGlobeShipLayers(
           50, 420,
         );
         const sizeScale = clampNumber(0.85 + (hull - 50) / 420, 0.82, 1.85);
-        const selected = t.mmsi === selectedMmsi;
+        // 상호작용 스케일링 제거 — selected/highlighted는 feature-state로 처리
-        const highlighted = isBaseHighlightedMmsi(t.mmsi);
+        // hover overlay 레이어가 확대 + z-priority를 담당
-        const selectedScale = selected ? 1.08 : 1;
+        const iconSize3 = clampNumber(0.35 * sizeScale, 0.25, 1.3);
-        const highlightScale = highlighted ? 1.06 : 1;
+        const iconSize7 = clampNumber(0.45 * sizeScale, 0.3, 1.45);
-        const iconScale = selected ? selectedScale : highlightScale;
+        const iconSize10 = clampNumber(0.58 * sizeScale, 0.35, 1.8);
-        const iconSize3 = clampNumber(0.35 * sizeScale * selectedScale, 0.25, 1.3);
+        const iconSize14 = clampNumber(0.85 * sizeScale, 0.45, 2.6);
-        const iconSize7 = clampNumber(0.45 * sizeScale * selectedScale, 0.3, 1.45);
+        const iconSize18 = clampNumber(2.5 * sizeScale, 1.0, 6.0);
-        const iconSize10 = clampNumber(0.58 * sizeScale * selectedScale, 0.35, 1.8);
-        const iconSize14 = clampNumber(0.85 * sizeScale * selectedScale, 0.45, 2.6);
-        const iconSize18 = clampNumber(2.5 * sizeScale * selectedScale, 1.0, 6.0);
         return {
           type: 'Feature' as const,
           ...(isFiniteNumber(t.mmsi) ? { id: Math.trunc(t.mmsi) } : {}),
@@ -96,21 +108,50 @@ export function useGlobeShipLayers(
               legacy: legacy?.shipCode || null,
               sog: isFiniteNumber(t.sog) ? t.sog : null,
             }),
-            iconSize3: iconSize3 * iconScale,
+            iconSize3,
-            iconSize7: iconSize7 * iconScale,
+            iconSize7,
-            iconSize10: iconSize10 * iconScale,
+            iconSize10,
-            iconSize14: iconSize14 * iconScale,
+            iconSize14,
-            iconSize18: iconSize18 * iconScale,
+            iconSize18,
             sizeScale,
-            selected: selected ? 1 : 0,
-            highlighted: highlighted ? 1 : 0,
             permitted: legacy ? 1 : 0,
             code: legacy?.shipCode || '',
+            alarmed: alarmKind ? 1 : 0,
+            alarmKind: alarmKind ?? '',
+            alarmBadgeLabel: alarmKind ? ALARM_BADGE[alarmKind].label : '',
+            alarmBadgeColor: alarmKind ? ALARM_BADGE[alarmKind].color : '#000',
           },
         };
       }),
     };
-  }, [shipData, legacyHits, selectedMmsi, isBaseHighlightedMmsi]);
+  }, [shipData, legacyHits, alarmMmsiMap]);
+
+  // Alarm-only GeoJSON — separate source to avoid badge symbol re-placement
+  // when the main ship source updates (position polling)
+  const alarmGeoJson = useMemo((): GeoJSON.FeatureCollection<GeoJSON.Point> => {
+    if (!alarmMmsiMap || alarmMmsiMap.size === 0) {
+      return { type: 'FeatureCollection', features: [] };
+    }
+    return {
+      type: 'FeatureCollection',
+      features: shipData
+        .filter((t) => alarmMmsiMap.has(t.mmsi))
+        .map((t) => {
+          const alarmKind = alarmMmsiMap.get(t.mmsi)!;
+          return {
+            type: 'Feature' as const,
+            ...(isFiniteNumber(t.mmsi) ? { id: Math.trunc(t.mmsi) } : {}),
+            geometry: { type: 'Point' as const, coordinates: [t.lon, t.lat] },
+            properties: {
+              mmsi: t.mmsi,
+              alarmed: 1,
+              alarmBadgeLabel: ALARM_BADGE[alarmKind].label,
+              alarmBadgeColor: ALARM_BADGE[alarmKind].color,
+            },
+          };
+        }),
+    };
+  }, [shipData, alarmMmsiMap]);
 
   // Ships in globe mode
   useEffect(() => {
@@ -120,16 +161,19 @@ export function useGlobeShipLayers(
     const imgId = 'ship-globe-icon';
     const anchoredImgId = ANCHORED_SHIP_ICON_ID;
     const srcId = 'ships-globe-src';
+    const alarmSrcId = 'ships-globe-alarm-src';
     const haloId = 'ships-globe-halo';
     const outlineId = 'ships-globe-outline';
     const symbolLiteId = 'ships-globe-lite';
     const symbolId = 'ships-globe';
     const labelId = 'ships-globe-label';
+    const pulseId = 'ships-globe-alarm-pulse';
+    const badgeId = 'ships-globe-alarm-badge';
 
     // 레이어를 제거하지 않고 visibility만 'none'으로 설정
     // guardedSetVisibility로 현재 값과 동일하면 호출 생략 (style._changed 방지)
     const hide = () => {
-      for (const id of [labelId, symbolId, symbolLiteId, outlineId, haloId]) {
+      for (const id of [badgeId, labelId, symbolId, symbolLiteId, pulseId, outlineId, haloId]) {
         guardedSetVisibility(map, id, 'none');
       }
     };
@@ -158,7 +202,7 @@ export function useGlobeShipLayers(
           map.getLayoutProperty(symbolId, 'visibility') !== visibility ||
           map.getLayoutProperty(symbolLiteId, 'visibility') !== visibility;
         if (changed) {
-          for (const id of [haloId, outlineId, symbolLiteId, symbolId]) {
+          for (const id of [haloId, outlineId, pulseId, symbolLiteId, symbolId, badgeId]) {
             guardedSetVisibility(map, id, visibility);
           }
           if (projection === 'globe') kickRepaint(map);
@@ -185,32 +229,52 @@ export function useGlobeShipLayers(
       }
 
       // 사전 계산된 GeoJSON 사용 (useMemo에서 projection과 무관하게 항상 준비됨)
+      // 참조 동일성 기반 setData 스킵 — 위치 변경 없는 epoch/설정 변경 시 재전송 방지
       const geojson = globeShipGeoJson;
+      const geoJsonChanged = geojson !== prevGeoJsonRef.current;
 
       try {
         const existing = map.getSource(srcId) as GeoJSONSource | undefined;
-        if (existing) existing.setData(geojson);
+        if (existing) {
-        else map.addSource(srcId, { type: 'geojson', data: geojson } as GeoJSONSourceSpecification);
+          if (geoJsonChanged) existing.setData(geojson);
+        } else {
+          map.addSource(srcId, { type: 'geojson', data: geojson } as GeoJSONSourceSpecification);
+        }
+        prevGeoJsonRef.current = geojson;
       } catch (e) {
         console.warn('Ship source setup failed:', e);
         return;
       }
 
+      // Alarm source — isolated from main source for stable badge rendering
+      try {
+        const existingAlarm = map.getSource(alarmSrcId) as GeoJSONSource | undefined;
+        const alarmChanged = alarmGeoJson !== prevAlarmGeoJsonRef.current;
+        if (existingAlarm) {
+          if (alarmChanged) existingAlarm.setData(alarmGeoJson);
+        } else {
+          map.addSource(alarmSrcId, { type: 'geojson', data: alarmGeoJson } as GeoJSONSourceSpecification);
+        }
+        prevAlarmGeoJsonRef.current = alarmGeoJson;
+      } catch (e) {
+        console.warn('Alarm source setup failed:', e);
+      }
+
       const before = undefined;
+      let needReorder = false;
       const priorityFilter = [
         'any',
         ['==', ['to-number', ['get', 'permitted'], 0], 1],
-        ['==', ['to-number', ['get', 'selected'], 0], 1],
+        ['==', ['to-number', ['get', 'alarmed'], 0], 1],
-        ['==', ['to-number', ['get', 'highlighted'], 0], 1],
       ] as unknown as unknown[];
       const nonPriorityFilter = [
         'all',
         ['==', ['to-number', ['get', 'permitted'], 0], 0],
-        ['==', ['to-number', ['get', 'selected'], 0], 0],
+        ['==', ['to-number', ['get', 'alarmed'], 0], 0],
-        ['==', ['to-number', ['get', 'highlighted'], 0], 0],
       ] as unknown as unknown[];
 
       if (!map.getLayer(haloId)) {
+        needReorder = true;
         try {
           map.addLayer(
             {
@@ -221,11 +285,9 @@ export function useGlobeShipLayers(
                 visibility,
                 'circle-sort-key': [
                   'case',
-                  ['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'permitted'], 1]], 120,
+                  ['all', ['==', ['get', 'alarmed'], 1], ['==', ['get', 'permitted'], 1]], 112,
-                  ['all', ['==', ['get', 'highlighted'], 1], ['==', ['get', 'permitted'], 1]], 115,
                   ['==', ['get', 'permitted'], 1], 110,
-                  ['==', ['get', 'selected'], 1], 60,
+                  ['==', ['get', 'alarmed'], 1], 22,
-                  ['==', ['get', 'highlighted'], 1], 55,
                   20,
                 ] as never,
               },
@@ -234,8 +296,8 @@ export function useGlobeShipLayers(
                 'circle-color': ['coalesce', ['get', 'shipColor'], '#64748b'] as never,
                 'circle-opacity': [
                   'case',
-                  ['==', ['get', 'selected'], 1], 0.38,
+                  ['==', ['feature-state', 'selected'], 1], 0.38,
-                  ['==', ['get', 'highlighted'], 1], 0.34,
+                  ['==', ['feature-state', 'highlighted'], 1], 0.34,
                   0.16,
                 ] as never,
               },
@@ -248,6 +310,7 @@ export function useGlobeShipLayers(
       }
 
       if (!map.getLayer(outlineId)) {
+        needReorder = true;
         try {
           map.addLayer(
             {
@@ -259,15 +322,15 @@ export function useGlobeShipLayers(
                 'circle-color': 'rgba(0,0,0,0)',
                 'circle-stroke-color': [
                   'case',
-                  ['==', ['get', 'selected'], 1], 'rgba(14,234,255,0.95)',
+                  ['==', ['feature-state', 'selected'], 1], 'rgba(14,234,255,0.95)',
-                  ['==', ['get', 'highlighted'], 1], 'rgba(245,158,11,0.95)',
+                  ['==', ['feature-state', 'highlighted'], 1], 'rgba(245,158,11,0.95)',
                   ['==', ['get', 'permitted'], 1], GLOBE_OUTLINE_PERMITTED,
                   GLOBE_OUTLINE_OTHER,
                 ] as never,
                 'circle-stroke-width': [
                   'case',
-                  ['==', ['get', 'selected'], 1], 3.4,
+                  ['==', ['feature-state', 'selected'], 1], 3.4,
-                  ['==', ['get', 'highlighted'], 1], 2.7,
+                  ['==', ['feature-state', 'highlighted'], 1], 2.7,
                   ['==', ['get', 'permitted'], 1], 1.8,
                   0.7,
                 ] as never,
@@ -277,11 +340,9 @@ export function useGlobeShipLayers(
                 visibility,
                 'circle-sort-key': [
                   'case',
-                  ['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'permitted'], 1]], 130,
+                  ['all', ['==', ['get', 'alarmed'], 1], ['==', ['get', 'permitted'], 1]], 122,
-                  ['all', ['==', ['get', 'highlighted'], 1], ['==', ['get', 'permitted'], 1]], 125,
                   ['==', ['get', 'permitted'], 1], 120,
-                  ['==', ['get', 'selected'], 1], 70,
+                  ['==', ['get', 'alarmed'], 1], 32,
-                  ['==', ['get', 'highlighted'], 1], 65,
                   30,
                 ] as never,
               },
@@ -293,7 +354,34 @@ export function useGlobeShipLayers(
         }
       }
 
+      // Alarm pulse circle (above outline, below ship icons)
+      // Uses separate alarm source for stable rendering
+      if (!map.getLayer(pulseId)) {
+        needReorder = true;
+        try {
+          map.addLayer(
+            {
+              id: pulseId,
+              type: 'circle',
+              source: alarmSrcId,
+              filter: ['==', ['get', 'alarmed'], 1] as never,
+              layout: { visibility },
+              paint: {
+                'circle-radius': ALARM_PULSE_R_MIN,
+                'circle-color': ['coalesce', ['get', 'alarmBadgeColor'], '#6b7280'] as never,
+                'circle-opacity': 0.35,
+                'circle-stroke-width': 0,
+              },
+            } as unknown as LayerSpecification,
+            before,
+          );
+        } catch (e) {
+          console.warn('Ship alarm pulse layer add failed:', e);
+        }
+      }
+
       if (!map.getLayer(symbolLiteId)) {
+        needReorder = true;
         try {
           map.addLayer(
             {
@@ -363,6 +451,7 @@ export function useGlobeShipLayers(
       }
 
       if (!map.getLayer(symbolId)) {
+        needReorder = true;
         try {
           map.addLayer(
             {
@@ -374,11 +463,9 @@ export function useGlobeShipLayers(
                 visibility,
                 'symbol-sort-key': [
                   'case',
-                  ['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'permitted'], 1]], 140,
+                  ['all', ['==', ['get', 'alarmed'], 1], ['==', ['get', 'permitted'], 1]], 132,
-                  ['all', ['==', ['get', 'highlighted'], 1], ['==', ['get', 'permitted'], 1]], 135,
                   ['==', ['get', 'permitted'], 1], 130,
-                  ['==', ['get', 'selected'], 1], 80,
+                  ['==', ['get', 'alarmed'], 1], 47,
-                  ['==', ['get', 'highlighted'], 1], 75,
                   45,
                 ] as never,
                 'icon-image': [
@@ -410,8 +497,8 @@ export function useGlobeShipLayers(
                 'icon-color': ['coalesce', ['get', 'shipColor'], '#64748b'] as never,
                 'icon-opacity': [
                   'case',
-                  ['==', ['get', 'selected'], 1], 1,
+                  ['==', ['feature-state', 'selected'], 1], 1,
-                  ['==', ['get', 'highlighted'], 1], 0.95,
+                  ['==', ['feature-state', 'highlighted'], 1], 0.95,
                   ['==', ['get', 'permitted'], 1], 0.93,
                   0.9,
                 ] as never,
@@ -427,15 +514,11 @@ export function useGlobeShipLayers(
       const labelFilter = [
         'all',
         ['!=', ['to-string', ['coalesce', ['get', 'labelName'], '']], ''],
-        [
+        ['==', ['get', 'permitted'], 1],
-          'any',
-          ['==', ['get', 'permitted'], 1],
-          ['==', ['get', 'selected'], 1],
-          ['==', ['get', 'highlighted'], 1],
-        ],
       ] as unknown as unknown[];
 
       if (!map.getLayer(labelId)) {
+        needReorder = true;
         try {
           map.addLayer(
             {
@@ -459,8 +542,8 @@ export function useGlobeShipLayers(
               paint: {
                 'text-color': [
                   'case',
-                  ['==', ['get', 'selected'], 1], 'rgba(14,234,255,0.95)',
+                  ['==', ['feature-state', 'selected'], 1], 'rgba(14,234,255,0.95)',
-                  ['==', ['get', 'highlighted'], 1], 'rgba(245,158,11,0.95)',
+                  ['==', ['feature-state', 'highlighted'], 1], 'rgba(245,158,11,0.95)',
                   'rgba(226,232,240,0.92)',
                 ] as never,
                 'text-halo-color': 'rgba(2,6,23,0.85)',
@@ -475,9 +558,45 @@ export function useGlobeShipLayers(
         }
       }
 
+      // Alarm badge symbol (above labels)
+      // Uses separate alarm source for stable rendering
+      if (!map.getLayer(badgeId)) {
+        needReorder = true;
+        try {
+          map.addLayer(
+            {
+              id: badgeId,
+              type: 'symbol',
+              source: alarmSrcId,
+              filter: ['==', ['get', 'alarmed'], 1] as never,
+              layout: {
+                visibility,
+                'text-field': ['get', 'alarmBadgeLabel'] as never,
+                'text-font': ['Noto Sans Regular', 'Open Sans Regular'],
+                'text-size': 11,
+                'text-allow-overlap': true,
+                'text-ignore-placement': true,
+                'text-anchor': 'center',
+              },
+              paint: {
+                'text-color': '#ffffff',
+                'text-halo-color': ['coalesce', ['get', 'alarmBadgeColor'], '#6b7280'] as never,
+                'text-halo-width': 6,
+                'text-translate': [12, -12],
+              },
+            } as unknown as LayerSpecification,
+            undefined,
+          );
+        } catch (e) {
+          console.warn('Ship alarm badge layer add failed:', e);
+        }
+      }
+
       // 레이어가 준비되었음을 알림 (projection과 무관 — 토글 버튼 활성화용)
       onGlobeShipsReady?.(true);
-      if (projection === 'globe') {
+      // needReorder: 새 레이어가 생성된 경우에만 reorder 호출
+      // 매 AIS poll마다 28개 moveLayer → style._changed 방지
+      if (projection === 'globe' && needReorder) {
         reorderGlobeFeatureLayers();
       }
       kickRepaint(map);
@@ -492,10 +611,83 @@ export function useGlobeShipLayers(
     settings.showShips,
     overlays.shipLabels,
     globeShipGeoJson,
-    selectedMmsi,
+    alarmGeoJson,
-    isBaseHighlightedMmsi,
     mapSyncEpoch,
     reorderGlobeFeatureLayers,
     onGlobeShipsReady,
   ]);
+
+  // Feature-state로 상호작용 상태(selected/highlighted) 즉시 반영 — setData 없이
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map || projection !== 'globe' || projectionBusyRef.current) return;
+    if (!map.isStyleLoaded() || !map.getSource('ships-globe-src')) return;
+
+    const raf = requestAnimationFrame(() => {
+      if (!map.isStyleLoaded()) return;
+      const src = 'ships-globe-src';
+      const alarmSrc = 'ships-globe-alarm-src';
+      for (const t of shipData) {
+        if (!isFiniteNumber(t.mmsi)) continue;
+        const id = Math.trunc(t.mmsi);
+        const s = t.mmsi === selectedMmsi ? 1 : 0;
+        const h = isBaseHighlightedMmsi(t.mmsi) ? 1 : 0;
+        try {
+          map.setFeatureState({ source: src, id }, { selected: s, highlighted: h });
+        } catch { /* ignore */ }
+      }
+      if (map.getSource(alarmSrc) && alarmMmsiMap) {
+        for (const t of shipData) {
+          if (!alarmMmsiMap.has(t.mmsi)) continue;
+          const id = Math.trunc(t.mmsi);
+          try {
+            map.setFeatureState(
+              { source: alarmSrc, id },
+              { selected: t.mmsi === selectedMmsi ? 1 : 0, highlighted: isBaseHighlightedMmsi(t.mmsi) ? 1 : 0 },
+            );
+          } catch { /* ignore */ }
+        }
+      }
+      kickRepaint(map);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [projection, selectedMmsi, isBaseHighlightedMmsi, shipData, alarmMmsiMap]);
+
+  // Alarm pulse breathing animation (rAF)
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map || projection !== 'globe' || !alarmMmsiMap || alarmMmsiMap.size === 0) {
+      if (breatheRafRef.current) cancelAnimationFrame(breatheRafRef.current);
+      breatheRafRef.current = 0;
+      return;
+    }
+
+    const animate = () => {
+      if (!map.isStyleLoaded()) {
+        breatheRafRef.current = requestAnimationFrame(animate);
+        return;
+      }
+      const t = (Math.sin(Date.now() / ALARM_PULSE_PERIOD_MS * Math.PI * 2) + 1) / 2;
+      const normalR = ALARM_PULSE_R_MIN + t * (ALARM_PULSE_R_MAX - ALARM_PULSE_R_MIN);
+      const hoverR = ALARM_PULSE_R_HOVER_MIN + t * (ALARM_PULSE_R_HOVER_MAX - ALARM_PULSE_R_HOVER_MIN);
+      try {
+        if (map.getLayer('ships-globe-alarm-pulse')) {
+          map.setPaintProperty('ships-globe-alarm-pulse', 'circle-radius', [
+            'case',
+            ['any', ['==', ['feature-state', 'highlighted'], 1], ['==', ['feature-state', 'selected'], 1]],
+            hoverR,
+            normalR,
+          ] as never);
+        }
+      } catch {
+        // ignore
+      }
+      breatheRafRef.current = requestAnimationFrame(animate);
+    };
+    breatheRafRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (breatheRafRef.current) cancelAnimationFrame(breatheRafRef.current);
+      breatheRafRef.current = 0;
+    };
+  }, [projection, alarmMmsiMap]);
 }

apps/web/src/widgets/map3d/hooks/useGlobeShips.ts

@@ -2,6 +2,7 @@ import type { MutableRefObject } from 'react';
 import type maplibregl from 'maplibre-gl';
 import type { AisTarget } from '../../../entities/aisTarget/model/types';
 import type { LegacyVesselInfo } from '../../../entities/legacyVessel/model/types';
+import type { LegacyAlarmKind } from '../../../features/legacyDashboard/model/types';
 import type { MapToggleState } from '../../../features/mapToggles/MapToggles';
 import type { Map3DSettings, MapProjectionId } from '../types';
 import { useGlobeShipLabels } from './useGlobeShipLabels';
@@ -31,6 +32,7 @@ export function useGlobeShips(
     isBaseHighlightedMmsi: (mmsi: number) => boolean;
     hasAuxiliarySelectModifier: (ev?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean } | null) => boolean;
     onGlobeShipsReady?: (ready: boolean) => void;
+    alarmMmsiMap?: Map<number, LegacyAlarmKind>;
   },
 ) {
   // Mercator 모드 선명 라벨
@@ -43,6 +45,7 @@ export function useGlobeShips(
     legacyHits: opts.legacyHits,
     selectedMmsi: opts.selectedMmsi,
     mapSyncEpoch: opts.mapSyncEpoch,
+    alarmMmsiMap: opts.alarmMmsiMap,
   });
 
   // Globe 모드 선박 아이콘 레이어
@@ -56,6 +59,7 @@ export function useGlobeShips(
     isBaseHighlightedMmsi: opts.isBaseHighlightedMmsi,
     mapSyncEpoch: opts.mapSyncEpoch,
     onGlobeShipsReady: opts.onGlobeShipsReady,
+    alarmMmsiMap: opts.alarmMmsiMap,
   });
 
   // Globe 호버 오버레이 + 클릭 선택

apps/web/src/widgets/map3d/hooks/useNativeMapLayers.ts

@@ -108,7 +108,9 @@ export function useNativeMapLayers(
       // 2. 데이터가 있는 source가 하나도 없으면 종료
       const hasData = cfg.sources.some((s) => s.data != null);
       if (!hasData) return;
-      if (!map.isStyleLoaded()) return;
+      // isStyleLoaded() 가드 제거 — AIS poll의 setData()로 인해
+      // 일시적으로 false가 되어 데이터 업데이트가 스킵되는 문제 방지.
+      // 실패 시 try/catch가 처리하고, 다음 deps 변경 시 자연 재시도.
 
       try {
         // 3. Source 생성/업데이트

apps/web/src/widgets/map3d/hooks/useProjectionToggle.ts

@@ -80,60 +80,67 @@ export function useProjectionToggle(
     };
   }, [clearProjectionBusyTimer, endProjectionLoading]);
 
+  const reorderRafRef = useRef(0);
+
   // eslint-disable-next-line react-hooks/preserve-manual-memoization
   const reorderGlobeFeatureLayers = useCallback(() => {
-    const map = mapRef.current;
+    if (!mapRef.current || projectionRef.current !== 'globe') return;
-    if (!map || projectionRef.current !== 'globe') return;
     if (projectionBusyRef.current) return;
-    if (!map.isStyleLoaded()) return;
+    if (reorderRafRef.current) return; // 이미 스케줄됨 — 프레임당 1회 실행
+    reorderRafRef.current = requestAnimationFrame(() => {
+      reorderRafRef.current = 0;
+      const m = mapRef.current;
+      if (!m || !m.isStyleLoaded()) return;
 
-    const ordering = [
+      const ordering = [
-      'subcables-hitarea',
+        'subcables-hitarea',
-      'subcables-casing',
+        'subcables-casing',
-      'subcables-line',
+        'subcables-line',
-      'subcables-glow',
+        'subcables-glow',
-      'subcables-points',
+        'subcables-points',
-      'subcables-label',
+        'subcables-label',
-      'vessel-track-line',
+        'vessel-track-line',
-      'vessel-track-line-hitarea',
+        'vessel-track-line-hitarea',
-      'vessel-track-arrow',
+        'vessel-track-arrow',
-      'vessel-track-pts',
+        'vessel-track-pts',
-      'vessel-track-pts-highlight',
+        'vessel-track-pts-highlight',
-      'track-replay-globe-path',
+        'track-replay-globe-path',
-      'track-replay-globe-points',
+        'track-replay-globe-points',
-      'track-replay-globe-virtual-ship',
+        'track-replay-globe-virtual-ship',
-      'track-replay-globe-virtual-label',
+        'track-replay-globe-virtual-label',
-      'zones-fill',
+        'zones-fill',
-      'zones-line',
+        'zones-line',
-      'zones-label',
+        'zones-label',
-      'predict-vectors-outline',
+        'fleet-circles-ml',
-      'predict-vectors',
+        'fc-lines-ml',
-      'predict-vectors-hl-outline',
+        'pair-range-ml',
-      'predict-vectors-hl',
+        'pair-lines-ml',
-      'ships-globe-halo',
+        'predict-vectors-outline',
-      'ships-globe-outline',
+        'predict-vectors',
-      'ships-globe-lite',
+        'predict-vectors-hl-outline',
-      'ships-globe',
+        'predict-vectors-hl',
-      'ships-globe-label',
+        'ships-globe-halo',
-      'ships-globe-hover-halo',
+        'ships-globe-outline',
-      'ships-globe-hover-outline',
+        'ships-globe-alarm-pulse',
-      'ships-globe-hover',
+        'ships-globe-lite',
-      'pair-lines-ml',
+        'ships-globe',
-      'fc-lines-ml',
+        'ships-globe-label',
-      'pair-range-ml',
+        'ships-globe-alarm-badge',
-      'fleet-circles-ml-fill',
+        'ships-globe-hover-halo',
-      'fleet-circles-ml',
+        'ships-globe-hover-outline',
-    ];
+        'ships-globe-hover',
+      ];
 
-    for (const layerId of ordering) {
+      for (const layerId of ordering) {
-      try {
+        try {
-        if (map.getLayer(layerId)) map.moveLayer(layerId);
+          if (m.getLayer(layerId)) m.moveLayer(layerId);
-      } catch {
+        } catch {
-        // ignore
+          // ignore
+        }
       }
-    }
 
-    kickRepaint(map);
+      kickRepaint(m);
+    });
   }, []);
 
   // Projection toggle (mercator <-> globe)
@@ -215,6 +222,13 @@ export function useProjectionToggle(
         quietMercatorOverlays();
       } else {
         quietGlobeDeckLayer();
+        quietMercatorOverlays();
+        // Globe custom layer를 맵에서 분리 — setProjection() 중 render 콜백에서
+        // stale WebGL 자원(uniform buffer 등) 참조를 방지
+        const gl = globeDeckLayerRef.current;
+        if (gl?.id) {
+          try { if (map.getLayer(gl.id)) map.removeLayer(gl.id); } catch { /* ignore */ }
+        }
       }
 
       try {

apps/web/src/widgets/map3d/hooks/useZonesLayer.ts

@@ -13,10 +13,11 @@ import { kickRepaint, onMapStyleReady } from '../lib/mapCore';
 import { guardedSetVisibility } from '../lib/layerHelpers';
 
 /** Globe tessellation에서 vertex 65535 초과를 방지하기 위해 좌표 수를 줄임.
- *  수역 폴리곤(해안선 디테일 2100+ vertex)이 globe에서 70,000+로 폭증하므로
+ *  수역 폴리곤(해안선 디테일 2100+ vertex)이 globe에서 ~33x로 폭증하므로
- *  ring당 최대 maxPts개로 서브샘플링. 라벨 centroid에는 영향 없음. */
+ *  ring당 최대 maxPts개로 서브샘플링. 라벨 centroid에는 영향 없음.
+ *  4수역 × 300pts × 33x ≈ 39,600 vertices (< 65535 limit). */
 function simplifyZonesForGlobe(zones: ZonesGeoJson): ZonesGeoJson {
-  const MAX_PTS = 60;
+  const MAX_PTS = 300;
   const subsample = (ring: GeoJSON.Position[]): GeoJSON.Position[] => {
     if (ring.length <= MAX_PTS) return ring;
     const step = Math.ceil(ring.length / MAX_PTS);

apps/web/src/widgets/map3d/lib/deckLayerFactories.ts

@@ -1,8 +1,9 @@
 import { HexagonLayer } from '@deck.gl/aggregation-layers';
-import { IconLayer, LineLayer, ScatterplotLayer } from '@deck.gl/layers';
+import { IconLayer, LineLayer, ScatterplotLayer, TextLayer } from '@deck.gl/layers';
 import type { PickingInfo } from '@deck.gl/core';
 import type { AisTarget } from '../../../entities/aisTarget/model/types';
 import type { LegacyVesselInfo } from '../../../entities/legacyVessel/model/types';
+import { ALARM_BADGE, type LegacyAlarmKind } from '../../../features/legacyDashboard/model/types';
 import type { FleetCircle, PairLink } from '../../../features/legacyDashboard/model/types';
 import type { MapToggleState } from '../../../features/mapToggles/MapToggles';
 import type { DashSeg, PairRangeCircle } from '../types';
@@ -80,6 +81,10 @@ export interface MercatorDeckLayerContext extends DeckHoverCallbacks, DeckSelect
   showShips: boolean;
   selectedMmsi: number | null;
   shipHighlightSet: Set<number>;
+  alarmTargets?: AisTarget[];
+  alarmMmsiMap?: Map<number, LegacyAlarmKind>;
+  alarmPulseRadius?: number;
+  alarmPulseHoverRadius?: number;
 }
 
 export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[] {
@@ -118,10 +123,11 @@ export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[
 
   /* ─ pair range ─ */
   if (ctx.overlays.pairRange && ctx.pairRanges.length > 0) {
-    layers.push(
+    const validRanges = ctx.pairRanges.filter((d) => d.center && isFinite(d.center[0]) && isFinite(d.center[1]) && isFinite(d.radiusNm));
+    if (validRanges.length > 0) layers.push(
       new ScatterplotLayer<PairRangeCircle>({
         id: 'pair-range',
-        data: ctx.pairRanges,
+        data: validRanges,
         pickable: true,
         billboard: false,
         parameters: overlayParams,
@@ -131,7 +137,7 @@ export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[
         getRadius: (d) => d.radiusNm * 1852,
         radiusMinPixels: 10,
         lineWidthUnits: 'pixels',
-        getLineWidth: () => 1,
+        getLineWidth: () => 1.8,
         getLineColor: (d) => (d.warn ? PAIR_RANGE_WARN_DECK : PAIR_RANGE_NORMAL_DECK),
         getPosition: (d) => d.center,
         onHover: (info) => {
@@ -168,7 +174,7 @@ export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[
         getSourcePosition: (d) => d.from,
         getTargetPosition: (d) => d.to,
         getColor: (d) => (d.warn ? PAIR_LINE_WARN_DECK : PAIR_LINE_NORMAL_DECK),
-        getWidth: (d) => (d.warn ? 2.2 : 1.4),
+        getWidth: (d) => (d.warn ? 3.5 : 2.5),
         widthUnits: 'pixels',
         onHover: (info) => {
           if (!info.object) { clearDeckHover(); return; }
@@ -204,7 +210,7 @@ export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[
         getSourcePosition: (d) => d.from,
         getTargetPosition: (d) => d.to,
         getColor: (d) => (d.suspicious ? FC_LINE_SUSPICIOUS_DECK : FC_LINE_NORMAL_DECK),
-        getWidth: () => 1.3,
+        getWidth: () => 2.2,
         widthUnits: 'pixels',
         onHover: (info) => {
           if (!info.object) { clearDeckHover(); return; }
@@ -245,7 +251,7 @@ export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[
         radiusUnits: 'meters',
         getRadius: (d) => d.radiusNm * 1852,
         lineWidthUnits: 'pixels',
-        getLineWidth: () => 1.1,
+        getLineWidth: () => 2.0,
         getLineColor: () => FLEET_RANGE_LINE_DECK,
         getPosition: (d) => d.center,
         onHover: (info) => {
@@ -403,17 +409,17 @@ export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[
 
   /* ─ interactive overlays ─ */
   if (ctx.pairRangesInteractive.length > 0) {
-    layers.push(new ScatterplotLayer<PairRangeCircle>({ id: 'pair-range-overlay', data: ctx.pairRangesInteractive, pickable: false, billboard: false, parameters: overlayParams, filled: false, stroked: true, radiusUnits: 'meters', getRadius: (d) => d.radiusNm * 1852, radiusMinPixels: 10, lineWidthUnits: 'pixels', getLineWidth: () => 2.2, getLineColor: (d) => (d.warn ? PAIR_RANGE_WARN_DECK_HL : PAIR_RANGE_NORMAL_DECK_HL), getPosition: (d) => d.center }));
+    layers.push(new ScatterplotLayer<PairRangeCircle>({ id: 'pair-range-overlay', data: ctx.pairRangesInteractive, pickable: false, billboard: false, parameters: overlayParams, filled: false, stroked: true, radiusUnits: 'meters', getRadius: (d) => d.radiusNm * 1852, radiusMinPixels: 10, lineWidthUnits: 'pixels', getLineWidth: () => 2.8, getLineColor: (d) => (d.warn ? PAIR_RANGE_WARN_DECK_HL : PAIR_RANGE_NORMAL_DECK_HL), getPosition: (d) => d.center }));
   }
   if (ctx.pairLinksInteractive.length > 0) {
-    layers.push(new LineLayer<PairLink>({ id: 'pair-lines-overlay', data: ctx.pairLinksInteractive, pickable: false, parameters: overlayParams, getSourcePosition: (d) => d.from, getTargetPosition: (d) => d.to, getColor: (d) => (d.warn ? PAIR_LINE_WARN_DECK_HL : PAIR_LINE_NORMAL_DECK_HL), getWidth: () => 2.6, widthUnits: 'pixels' }));
+    layers.push(new LineLayer<PairLink>({ id: 'pair-lines-overlay', data: ctx.pairLinksInteractive, pickable: false, parameters: overlayParams, getSourcePosition: (d) => d.from, getTargetPosition: (d) => d.to, getColor: (d) => (d.warn ? PAIR_LINE_WARN_DECK_HL : PAIR_LINE_NORMAL_DECK_HL), getWidth: () => 4.5, widthUnits: 'pixels' }));
   }
   if (ctx.fcLinesInteractive.length > 0) {
-    layers.push(new LineLayer<DashSeg>({ id: 'fc-lines-overlay', data: ctx.fcLinesInteractive, pickable: false, parameters: overlayParams, getSourcePosition: (d) => d.from, getTargetPosition: (d) => d.to, getColor: (d) => (d.suspicious ? FC_LINE_SUSPICIOUS_DECK_HL : FC_LINE_NORMAL_DECK_HL), getWidth: () => 1.9, widthUnits: 'pixels' }));
+    layers.push(new LineLayer<DashSeg>({ id: 'fc-lines-overlay', data: ctx.fcLinesInteractive, pickable: false, parameters: overlayParams, getSourcePosition: (d) => d.from, getTargetPosition: (d) => d.to, getColor: (d) => (d.suspicious ? FC_LINE_SUSPICIOUS_DECK_HL : FC_LINE_NORMAL_DECK_HL), getWidth: () => 3.2, widthUnits: 'pixels' }));
   }
   if (ctx.fleetCirclesInteractive.length > 0) {
     layers.push(new ScatterplotLayer<FleetCircle>({ id: 'fleet-circles-overlay-fill', data: ctx.fleetCirclesInteractive, pickable: false, billboard: false, parameters: overlayParams, filled: true, stroked: false, radiusUnits: 'meters', getRadius: (d) => d.radiusNm * 1852, getFillColor: () => FLEET_RANGE_FILL_DECK_HL }));
-    layers.push(new ScatterplotLayer<FleetCircle>({ id: 'fleet-circles-overlay', data: ctx.fleetCirclesInteractive, pickable: false, billboard: false, parameters: overlayParams, filled: false, stroked: true, radiusUnits: 'meters', getRadius: (d) => d.radiusNm * 1852, lineWidthUnits: 'pixels', getLineWidth: () => 1.8, getLineColor: () => FLEET_RANGE_LINE_DECK_HL, getPosition: (d) => d.center }));
+    layers.push(new ScatterplotLayer<FleetCircle>({ id: 'fleet-circles-overlay', data: ctx.fleetCirclesInteractive, pickable: false, billboard: false, parameters: overlayParams, filled: false, stroked: true, radiusUnits: 'meters', getRadius: (d) => d.radiusNm * 1852, lineWidthUnits: 'pixels', getLineWidth: () => 3.0, getLineColor: () => FLEET_RANGE_LINE_DECK_HL, getPosition: (d) => d.center }));
   }
 
   /* ─ legacy overlay (highlight/selected) ─ */
@@ -426,6 +432,103 @@ export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[
     layers.push(new IconLayer<AisTarget>({ id: 'ships-overlay-target', data: shipOverlayTargetData2, pickable: false, billboard: false, parameters: overlayParams, iconAtlas: getCachedShipIcon(), iconMapping: SHIP_ICON_MAPPING, getIcon: () => 'ship', getPosition: (d) => [d.lon, d.lat] as [number, number], getAngle: (d) => -getDisplayHeading({ cog: d.cog, heading: d.heading }), sizeUnits: 'pixels', getSize: (d) => { if (ctx.selectedMmsi != null && d.mmsi === ctx.selectedMmsi) return FLAT_SHIP_ICON_SIZE_SELECTED; if (ctx.shipHighlightSet.has(d.mmsi)) return FLAT_SHIP_ICON_SIZE_HIGHLIGHTED; return 0; }, getColor: (d) => { if (!ctx.shipHighlightSet.has(d.mmsi) && !(ctx.selectedMmsi != null && d.mmsi === ctx.selectedMmsi)) return [0, 0, 0, 0]; return getShipColor(d, ctx.selectedMmsi, ctx.legacyHits?.get(d.mmsi)?.shipCode ?? null, ctx.shipHighlightSet); } }));
   }
 
+  /* ─ ship name labels (Mercator) ─ */
+  if (ctx.showShips && ctx.overlays.shipLabels) {
+    const labelData: AisTarget[] = [];
+    for (const t of ctx.shipLayerData) {
+      const isTarget = ctx.legacyHits?.has(t.mmsi) ?? false;
+      const isSelected = ctx.selectedMmsi != null && t.mmsi === ctx.selectedMmsi;
+      const isHighlighted = ctx.shipHighlightSet.has(t.mmsi);
+      if (isTarget || isSelected || isHighlighted) labelData.push(t);
+    }
+    if (labelData.length > 0) {
+      layers.push(
+        new TextLayer<AisTarget>({
+          id: 'ship-labels',
+          data: labelData,
+          pickable: false,
+          billboard: true,
+          getText: (d) => {
+            const legacy = ctx.legacyHits?.get(d.mmsi);
+            const baseName = (legacy?.shipNameCn || legacy?.shipNameRoman || d.name || '').trim();
+            if (!baseName) return '';
+            const alarmKind = ctx.alarmMmsiMap?.get(d.mmsi) ?? null;
+            return alarmKind ? `[${ALARM_BADGE[alarmKind].label}] ${baseName}` : baseName;
+          },
+          getPosition: (d) => [d.lon, d.lat] as [number, number],
+          getColor: (d) => {
+            if (ctx.selectedMmsi != null && d.mmsi === ctx.selectedMmsi) return [14, 234, 255, 242];
+            if (ctx.shipHighlightSet.has(d.mmsi)) return [245, 158, 11, 242];
+            return [226, 232, 240, 234];
+          },
+          getSize: 11,
+          sizeUnits: 'pixels',
+          fontFamily: 'NanumSquare, Malgun Gothic, 맑은 고딕, Noto Sans KR, sans-serif',
+          characterSet: 'auto',
+          getPixelOffset: [0, 16],
+          getTextAnchor: 'middle',
+          outlineWidth: 2,
+          outlineColor: [2, 6, 23, 217],
+        }),
+      );
+    }
+  }
+
+  /* ─ alarm pulse + badge ─ */
+  const alarmTargets = ctx.alarmTargets ?? [];
+  const alarmMap = ctx.alarmMmsiMap;
+  if (ctx.showShips && alarmMap && alarmMap.size > 0 && alarmTargets.length > 0) {
+    const pulseR = ctx.alarmPulseRadius ?? 8;
+    const pulseHR = ctx.alarmPulseHoverRadius ?? 12;
+    layers.push(
+      new ScatterplotLayer<AisTarget>({
+        id: 'alarm-pulse',
+        data: alarmTargets,
+        pickable: false,
+        billboard: false,
+        parameters: overlayParams,
+        filled: true,
+        stroked: false,
+        radiusUnits: 'pixels',
+        getRadius: (d) => {
+          const isHover = (ctx.selectedMmsi != null && d.mmsi === ctx.selectedMmsi) || ctx.shipHighlightSet.has(d.mmsi);
+          return isHover ? pulseHR : pulseR;
+        },
+        getFillColor: (d) => {
+          const kind = alarmMap.get(d.mmsi);
+          return kind ? ALARM_BADGE[kind].rgba : [107, 114, 128, 90] as [number, number, number, number];
+        },
+        getPosition: (d) => [d.lon, d.lat] as [number, number],
+        updateTriggers: { getRadius: [pulseR, pulseHR, ctx.selectedMmsi, ctx.shipHighlightSet] },
+      }),
+    );
+    layers.push(
+      new TextLayer<AisTarget>({
+        id: 'alarm-badge',
+        data: alarmTargets,
+        pickable: false,
+        parameters: overlayParams,
+        getText: (d) => {
+          const kind = alarmMap.get(d.mmsi);
+          return kind ? ALARM_BADGE[kind].label : '';
+        },
+        getPosition: (d) => [d.lon, d.lat] as [number, number],
+        getColor: [255, 255, 255, 255],
+        getBackgroundColor: (d) => {
+          const kind = alarmMap.get(d.mmsi);
+          return kind ? ALARM_BADGE[kind].rgba : [107, 114, 128, 200] as [number, number, number, number];
+        },
+        background: true,
+        backgroundPadding: [3, 1],
+        getPixelOffset: [14, -14],
+        sizeUnits: 'pixels',
+        getSize: 10,
+        fontFamily: 'NanumSquare, Malgun Gothic, 맑은 고딕, Noto Sans KR, sans-serif',
+        characterSet: 'auto',
+      }),
+    );
+  }
+
   return layers;
 }
 

apps/web/src/widgets/map3d/lib/mapCore.ts

@@ -49,7 +49,6 @@ export function onMapStyleReady(map: maplibregl.Map | null, callback: () => void
     try {
       map.off('style.load', runOnce);
       map.off('styledata', runOnce);
-      map.off('idle', runOnce);
     } catch {
       // ignore
     }
@@ -57,7 +56,6 @@ export function onMapStyleReady(map: maplibregl.Map | null, callback: () => void
 
   map.on('style.load', runOnce);
   map.on('styledata', runOnce);
-  map.on('idle', runOnce);
 
   return () => {
     if (fired) return;
@@ -66,7 +64,6 @@ export function onMapStyleReady(map: maplibregl.Map | null, callback: () => void
       if (!map) return;
       map.off('style.load', runOnce);
       map.off('styledata', runOnce);
-      map.off('idle', runOnce);
     } catch {
       // ignore
     }

apps/web/src/widgets/map3d/lib/mlExpressions.ts

@@ -41,28 +41,46 @@ export function makeFleetMemberMatchExpr(hoveredFleetMmsiList: number[]) {
   return ['any', ...clauses] as unknown[];
 }
 
-export function makeGlobeCircleRadiusExpr() {
+// ── Globe circle radius zoom stops ──
-  const base3 = 4;
+// MapLibre 제약: expression 당 zoom-based interpolate는 1개만 허용
-  const base7 = 6;
+// → 하나의 interpolate 안에서 각 stop 값을 case로 분기
-  const base10 = 8;
+const ZOOM_LEVELS = [3, 7, 10, 14, 18] as const;
-  const base14 = 12;
+const BASE_VALUES = [4, 6, 8, 12, 32] as const;
-  const base18 = 32;
+const SELECTED_VALUES = [4.6, 6.8, 9.0, 13.5, 36] as const;
+const HIGHLIGHTED_VALUES = [4.2, 6.2, 8.2, 12.6, 34] as const;
 
-  return [
+function buildStopsWithCase(getter: (key: string) => unknown[]) {
-    'interpolate',
+  const stops: unknown[] = ['interpolate', ['linear'], ['zoom']];
-    ['linear'],
+  for (let i = 0; i < ZOOM_LEVELS.length; i++) {
-    ['zoom'],
+    stops.push(ZOOM_LEVELS[i]);
-    3,
+    stops.push([
-    ['case', ['==', ['get', 'selected'], 1], 4.6, ['==', ['get', 'highlighted'], 1], 4.2, base3],
+      'case',
-    7,
+      ['==', getter('selected'), 1], SELECTED_VALUES[i],
-    ['case', ['==', ['get', 'selected'], 1], 6.8, ['==', ['get', 'highlighted'], 1], 6.2, base7],
+      ['==', getter('highlighted'), 1], HIGHLIGHTED_VALUES[i],
-    10,
+      BASE_VALUES[i],
-    ['case', ['==', ['get', 'selected'], 1], 9.0, ['==', ['get', 'highlighted'], 1], 8.2, base10],
+    ]);
-    14,
+  }
-    ['case', ['==', ['get', 'selected'], 1], 13.5, ['==', ['get', 'highlighted'], 1], 12.6, base14],
+  return stops;
-    18,
+}
-    ['case', ['==', ['get', 'selected'], 1], 36, ['==', ['get', 'highlighted'], 1], 34, base18],
+
-  ];
+/** feature-state 기반 — 메인 선박 레이어 (halo, outline) */
+export function makeGlobeCircleRadiusExpr() {
+  return buildStopsWithCase((key) => ['feature-state', key]);
+}
+
+/** GeoJSON property 기반 — hover overlay 레이어 */
+export function makeGlobeCircleRadiusPropExpr() {
+  const stops: unknown[] = ['interpolate', ['linear'], ['zoom']];
+  for (let i = 0; i < ZOOM_LEVELS.length; i++) {
+    stops.push(ZOOM_LEVELS[i]);
+    stops.push([
+      'case',
+      ['==', ['get', 'selected'], 1], SELECTED_VALUES[i],
+      HIGHLIGHTED_VALUES[i],
+    ]);
+  }
+  return stops;
 }
 
 export const GLOBE_SHIP_CIRCLE_RADIUS_EXPR = makeGlobeCircleRadiusExpr() as never;
+export const GLOBE_SHIP_CIRCLE_RADIUS_PROP_EXPR = makeGlobeCircleRadiusPropExpr() as never;

apps/web/src/widgets/map3d/types.ts

@@ -4,7 +4,7 @@ import type { SubcableGeoJson } from '../../entities/subcable/model/types';
 import type { ActiveTrack } from '../../entities/vesselTrack/model/types';
 import type { ZonesGeoJson } from '../../entities/zone/api/useZones';
 import type { MapToggleState } from '../../features/mapToggles/MapToggles';
-import type { FcLink, FleetCircle, PairLink } from '../../features/legacyDashboard/model/types';
+import type { FcLink, FleetCircle, LegacyAlarmKind, PairLink } from '../../features/legacyDashboard/model/types';
 import type { MapStyleSettings } from '../../features/mapSettings/types';
 
 export type Map3DSettings = {
@@ -69,6 +69,8 @@ export interface Map3DProps {
   onRequestTrack?: (mmsi: number, minutes: number) => void;
   onCloseTrackMenu?: () => void;
   onOpenTrackMenu?: (info: { x: number; y: number; mmsi: number; vesselName: string }) => void;
+  /** MMSI → 가장 높은 우선순위 경고 종류. filteredAlarms 기반. */
+  alarmMmsiMap?: Map<number, LegacyAlarmKind>;
 }
 
 export type DashSeg = {

apps/web/src/widgets/topbar/Topbar.tsx

@@ -1,11 +1,11 @@
-type Props = {
+import { useState } from "react";
+
+interface Props {
   total: number;
   fishing: number;
   transit: number;
   pairLinks: number;
   alarms: number;
-  pollingStatus: "idle" | "loading" | "ready" | "error";
-  lastFetchMinutes: number | null;
   clock: string;
   adminMode?: boolean;
   onLogoClick?: () => void;
@@ -13,72 +13,121 @@ type Props = {
   onLogout?: () => void;
   theme?: "dark" | "light";
   onToggleTheme?: () => void;
-};
+  isSidebarOpen?: boolean;
+  onMenuToggle?: () => void;
+}
 
-export function Topbar({ total, fishing, transit, pairLinks, alarms, pollingStatus, lastFetchMinutes, clock, adminMode, onLogoClick, userName, onLogout, theme, onToggleTheme }: Props) {
+function StatChips({ total, fishing, transit, pairLinks, alarms }: Pick<Props, "total" | "fishing" | "transit" | "pairLinks" | "alarms">) {
-  const statusColor =
-    pollingStatus === "ready" ? "#22C55E" : pollingStatus === "loading" ? "#F59E0B" : pollingStatus === "error" ? "#EF4444" : "var(--muted)";
   return (
-    <div className="col-span-full flex items-center gap-2.5 border-b border-wing-border bg-wing-surface px-3.5 z-[1000]">
+    <>
-      <div
+      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-        className="flex items-center gap-1.5 whitespace-nowrap text-sm font-extrabold"
+        <b className="text-xs text-wing-text">{total}</b>척
-        onClick={onLogoClick}
-        style={{ cursor: onLogoClick ? "pointer" : undefined }}
-        title={adminMode ? "ADMIN" : undefined}
-      >
-        🛰 <span className="text-wing-accent">WING</span> 조업감시·선단연관{" "}
-        {adminMode ? <span className="text-[10px] text-wing-warning">(ADMIN)</span> : null}
       </div>
-      <div className="ml-auto flex flex-wrap justify-end gap-3.5">
+      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
+        조업 <b className="text-wing-success">{fishing}</b>
-          DATA <b style={{ color: "#22C55E" }}>API</b>
-        </div>
-        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-          POLL{" "}
-          <b style={{ color: statusColor }}>
-            {pollingStatus.toUpperCase()}
-            {lastFetchMinutes ? `(${lastFetchMinutes}m)` : ""}
-          </b>
-        </div>
-        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-          전체 <b className="text-xs text-wing-text">{total}</b>척
-        </div>
-        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-          조업 <b style={{ color: "#22C55E" }}>{fishing}</b>
-        </div>
-        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-          항해 <b style={{ color: "#3B82F6" }}>{transit}</b>
-        </div>
-        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-          쌍연결 <b style={{ color: "#F59E0B" }}>{pairLinks}</b>
-        </div>
-        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-          경고 <b style={{ color: "#EF4444" }}>{alarms}</b>
-        </div>
       </div>
-      <div className="ml-2.5 whitespace-nowrap text-[10px] font-semibold text-wing-accent">{clock}</div>
+      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-      {onToggleTheme && (
+        항해 <b className="text-wing-accent">{transit}</b>
-        <button
+      </div>
-          className="ml-1 cursor-pointer rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
+      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-          onClick={onToggleTheme}
+        쌍연결 <b className="text-wing-warning">{pairLinks}</b>
-          title={theme === "dark" ? "라이트 모드로 전환" : "다크 모드로 전환"}
+      </div>
+      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
+        경고 <b className="text-wing-danger">{alarms}</b>
+      </div>
+    </>
+  );
+}
+
+export function Topbar({ total, fishing, transit, pairLinks, alarms, clock, adminMode, onLogoClick, userName, onLogout, theme, onToggleTheme, isSidebarOpen, onMenuToggle }: Props) {
+  const [isStatsOpen, setIsStatsOpen] = useState(false);
+
+  return (
+    <div className="col-span-full relative z-[1000]">
+      <div className="flex h-[44px] items-center gap-2.5 border-b border-wing-border bg-wing-surface px-3.5">
+        {/* 햄버거 메뉴 (모바일) */}
+        {onMenuToggle && (
+          <button
+            className="flex cursor-pointer items-center justify-center rounded border border-wing-border bg-transparent p-1 text-wing-muted transition-colors hover:border-wing-accent hover:text-wing-text md:hidden"
+            onClick={onMenuToggle}
+            aria-label={isSidebarOpen ? "메뉴 닫기" : "메뉴 열기"}
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              {isSidebarOpen ? (
+                <>
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </>
+              ) : (
+                <>
+                  <line x1="3" y1="6" x2="21" y2="6" />
+                  <line x1="3" y1="12" x2="21" y2="12" />
+                  <line x1="3" y1="18" x2="21" y2="18" />
+                </>
+              )}
+            </svg>
+          </button>
+        )}
+
+        {/* 로고 */}
+        <div
+          className={`flex items-center gap-1.5 whitespace-nowrap text-sm font-extrabold${onLogoClick ? " cursor-pointer" : ""}`}
+          onClick={onLogoClick}
+          title={adminMode ? "ADMIN" : undefined}
         >
-          {theme === "dark" ? "Light" : "Dark"}
+          <span className="text-wing-accent">WING</span>
-        </button>
+          <span className="hidden sm:inline">조업감시·선단연관</span>
-      )}
+          {adminMode ? <span className="text-[10px] text-wing-warning">(ADMIN)</span> : null}
-      {userName && (
+        </div>
-        <div className="ml-2.5 flex shrink-0 items-center gap-2">
+
-          <span className="whitespace-nowrap text-[10px] font-medium text-wing-text">{userName}</span>
+        {/* 데스크톱: 인라인 통계 */}
-          {onLogout && (
+        <div className="ml-auto hidden items-center gap-3.5 md:flex">
+          <StatChips total={total} fishing={fishing} transit={transit} pairLinks={pairLinks} alarms={alarms} />
+        </div>
+
+        {/* 항상 표시: 시계 + 테마 + 사용자 */}
+        <div className="ml-auto flex shrink-0 items-center gap-2.5 md:ml-2.5">
+          <span className="whitespace-nowrap text-[10px] font-semibold text-wing-accent">{clock}</span>
+          {onToggleTheme && (
             <button
-              className="cursor-pointer whitespace-nowrap rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
+              className="cursor-pointer rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
-              onClick={onLogout}
+              onClick={onToggleTheme}
+              title={theme === "dark" ? "라이트 모드로 전환" : "다크 모드로 전환"}
             >
-              로그아웃
+              {theme === "dark" ? "Light" : "Dark"}
             </button>
           )}
+          {userName && (
+            <div className="flex shrink-0 items-center gap-2">
+              <span className="hidden whitespace-nowrap text-[10px] font-medium text-wing-text sm:inline">{userName}</span>
+              {onLogout && (
+                <button
+                  className="cursor-pointer whitespace-nowrap rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
+                  onClick={onLogout}
+                >
+                  로그아웃
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 모바일 통계 바 (펼침 시) — 레이아웃 흐름에 포함, 지도 영역 밀어내기 */}
+      {isStatsOpen && (
+        <div className="flex items-center justify-center gap-4 border-b border-wing-border bg-wing-surface px-3.5 py-2 md:hidden">
+          <StatChips total={total} fishing={fishing} transit={transit} pairLinks={pairLinks} alarms={alarms} />
         </div>
       )}
+
+      {/* 모바일 통계 토글 탭 — topbar 하단 우측에 걸침 */}
+      <button
+        className="absolute bottom-0 right-3.5 z-10 translate-y-full cursor-pointer rounded-b-md border border-t-0 border-wing-border bg-wing-surface px-2 py-0.5 text-[8px] text-wing-muted transition-colors hover:text-wing-text md:hidden"
+        onClick={() => setIsStatsOpen((v) => !v)}
+        aria-label={isStatsOpen ? "통계 닫기" : "통계 열기"}
+      >
+        {isStatsOpen ? "▴" : "▾ 통계"}
+      </button>
     </div>
   );
 }

apps/web/src/widgets/vesselList/VesselList.tsx

@@ -1,3 +1,5 @@
+import { useMemo, useState } from "react";
+import { TextInput } from "@wing/ui";
 import { VESSEL_TYPES } from "../../entities/vessel/model/meta";
 import type { DerivedLegacyVessel } from "../../features/legacyDashboard/model/types";
 import type { MouseEvent } from "react";
@@ -12,6 +14,26 @@ type Props = {
   onClearHover?: () => void;
 };
 
+function isFiniteNumber(x: unknown): x is number {
+  return typeof x === "number" && Number.isFinite(x);
+}
+
+const STRIP_RE = /[\s\-.,_]/g;
+
+function normalize(s: string): string {
+  return s.replace(STRIP_RE, "").toLowerCase();
+}
+
+function matchesQuery(v: DerivedLegacyVessel, nq: string): boolean {
+  if (normalize(v.permitNo).includes(nq)) return true;
+  if (normalize(v.name).includes(nq)) return true;
+  if (v.legacy.shipNameRoman && normalize(v.legacy.shipNameRoman).includes(nq)) return true;
+  if (v.legacy.shipNameCn && normalize(v.legacy.shipNameCn).includes(nq)) return true;
+  if (v.legacy.callSign && normalize(v.legacy.callSign).includes(nq)) return true;
+  if (normalize(String(v.mmsi)).includes(nq)) return true;
+  return false;
+}
+
 export function VesselList({
   vessels,
   selectedMmsi,
@@ -21,6 +43,8 @@ export function VesselList({
   onHoverMmsi,
   onClearHover,
 }: Props) {
+  const [searchQuery, setSearchQuery] = useState("");
+
   const handlePrimaryAction = (e: MouseEvent, mmsi: number) => {
     if (e.shiftKey || e.ctrlKey || e.metaKey) {
       onToggleHighlightMmsi(mmsi);
@@ -29,17 +53,23 @@ export function VesselList({
     onSelectMmsi(mmsi);
   };
 
-  function isFiniteNumber(x: unknown): x is number {
+  const sorted = useMemo(() => {
-  return typeof x === "number" && Number.isFinite(x);
+    const nq = searchQuery.length >= 2 ? normalize(searchQuery) : "";
-}
+    const filtered = nq ? vessels.filter((v) => matchesQuery(v, nq)) : vessels;
-
+    return filtered.slice().sort((a, b) => (isFiniteNumber(b.sog) ? b.sog : -1) - (isFiniteNumber(a.sog) ? a.sog : -1));
-  const sorted = vessels
+  }, [vessels, searchQuery]);
-    .slice()
-    .sort((a, b) => (isFiniteNumber(b.sog) ? b.sog : -1) - (isFiniteNumber(a.sog) ? a.sog : -1))
-    .slice(0, 80);
 
   return (
-    <div className="vlist">
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="mb-1.5 shrink-0 px-1">
+        <TextInput
+          placeholder="검색: 등록번호 / 선박명 / MMSI"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="h-5 w-full py-0 text-[9px]"
+        />
+      </div>
+      <div className="vlist">
       {sorted.map((v) => {
         const meta = VESSEL_TYPES[v.shipCode];
         const primarySegs = meta.speedProfile.filter((s) => s.primary);
@@ -76,6 +106,7 @@ export function VesselList({
         );
       })}
       {sorted.length === 0 ? <div style={{ fontSize: 11, color: "var(--muted)" }}>(표시할 대상 선박 없음)</div> : null}
+      </div>
     </div>
   );
 }

packages/ui/src/components/ListItem.tsx

@@ -13,9 +13,9 @@ export function ListItem({ selected, highlighted, className, children, ...props
       className={cn(
         'flex cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 text-[10px] transition-colors duration-100 select-none',
         'hover:bg-wing-card',
-        selected && 'bg-[rgba(14,234,255,0.16)] border-[rgba(14,234,255,0.55)]',
+        selected && 'bg-[var(--wing-select-bg)] border-[var(--wing-select-border)]',
-        highlighted && !selected && 'bg-[rgba(245,158,11,0.16)] border border-[rgba(245,158,11,0.4)]',
+        highlighted && !selected && 'bg-[var(--wing-highlight-bg)] border border-[var(--wing-highlight-border)]',
-        selected && highlighted && 'bg-gradient-to-r from-[rgba(14,234,255,0.16)] to-[rgba(245,158,11,0.16)] border-[rgba(14,234,255,0.7)]',
+        selected && highlighted && 'bg-gradient-to-r from-[var(--wing-select-bg)] to-[var(--wing-highlight-bg)] border-[var(--wing-select-border)]',
         className,
       )}
       {...props}

packages/ui/src/components/Section.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { cn } from '../utils/cn.ts';
 
@@ -5,25 +6,33 @@ interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
   title: ReactNode;
   actions?: ReactNode;
   defaultOpen?: boolean;
+  contentClassName?: string;
   children: ReactNode;
 }
 
-export function Section({ title, actions, defaultOpen = true, className, children, ...props }: SectionProps) {
+export function Section({ title, actions, defaultOpen = true, className, contentClassName, children, ...props }: SectionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
   return (
-    <details open={defaultOpen || undefined} className={cn('border-b border-wing-border', className)} {...props}>
+    <div className={cn('border-b border-wing-border', className)} {...props}>
-      <summary className="flex cursor-pointer list-none items-center justify-between gap-2 px-3 py-2.5 select-none [&::-webkit-details-marker]:hidden">
+      <div
+        className="shrink-0 flex cursor-pointer items-center justify-between gap-2 px-3 py-2.5 select-none"
+        onClick={() => setIsOpen((v) => !v)}
+      >
         <span className="text-[9px] font-bold uppercase tracking-[1.5px] text-wing-muted">
           {title}
         </span>
         {actions && (
-          <span onClick={(e) => e.preventDefault()} className="flex items-center gap-1.5">
+          <span onClick={(e) => e.stopPropagation()} className="flex items-center gap-1.5">
             {actions}
           </span>
         )}
-      </summary>
-      <div className="px-3 pb-2.5">
-        {children}
       </div>
-    </details>
+      {isOpen && (
+        <div className={cn('px-3 pb-2.5', contentClassName)}>
+          {children}
+        </div>
+      )}
+    </div>
   );
 }

packages/ui/src/theme/tokens.css

@@ -18,6 +18,10 @@
   --wing-overlay: rgba(2, 6, 23, 0.42);
   --wing-card-alpha: rgba(30, 41, 59, 0.55);
   --wing-subtle: rgba(255, 255, 255, 0.03);
+  --wing-select-bg: rgba(14, 234, 255, 0.16);
+  --wing-select-border: rgba(14, 234, 255, 0.55);
+  --wing-highlight-bg: rgba(245, 158, 11, 0.16);
+  --wing-highlight-border: rgba(245, 158, 11, 0.4);
 
   /* Legacy aliases (backward compatibility) */
   --bg: var(--wing-bg);
@@ -48,6 +52,10 @@
   --wing-overlay: rgba(0, 0, 0, 0.25);
   --wing-card-alpha: rgba(226, 232, 240, 0.6);
   --wing-subtle: rgba(0, 0, 0, 0.03);
+  --wing-select-bg: rgba(14, 182, 210, 0.14);
+  --wing-select-border: rgba(14, 182, 210, 0.5);
+  --wing-highlight-bg: rgba(217, 119, 6, 0.14);
+  --wing-highlight-border: rgba(217, 119, 6, 0.4);
 
   --bg: var(--wing-bg);
   --panel: var(--wing-surface);