2026-03-31 18:01:06 +09:00
--- a/frontend/src/common/components/map/MapView.tsx
+++ b/frontend/src/common/components/map/MapView.tsx
@ -3,7 +3,6 @@ import { Map, Marker, Popup, Source, Layer, useControl, useMap } from '@vis.gl/r
 import { MapboxOverlay } from '@deck.gl/mapbox'
 import { ScatterplotLayer, PathLayer, TextLayer, BitmapLayer, PolygonLayer, GeoJsonLayer } from '@deck.gl/layers'
 import type { PickingInfo, Layer as DeckLayer } from '@deck.gl/core'
-import type { StyleSpecification } from 'maplibre-gl'
 import type { MapLayerMouseEvent } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { layerDatabase } from '@common/services/layerService'
@ -19,6 +18,7 @@ import { useMeasureTool } from '@common/hooks/useMeasureTool'
 import { hexToRgba } from './mapUtils'
 import { S57EncOverlay } from './S57EncOverlay'
 import { useMapStore } from '@common/store/mapStore'
+import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle'

 const GEOSERVER_URL = import.meta.env.VITE_GEOSERVER_URL || 'http://localhost:8080'

@ -26,252 +26,6 @@ const GEOSERVER_URL = import.meta.env.VITE_GEOSERVER_URL || 'http://localhost:80
 const DEFAULT_CENTER: [number, number] = [37.39, 126.64]
 const DEFAULT_ZOOM = 10

-// CartoDB Dark Matter 스타일
-const BASE_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    'carto-dark': {
-      type: 'raster',
-      tiles: [
-        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-      ],
-      tileSize: 256,
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
-    },
-  },
-  layers: [
-    {
-      id: 'carto-dark-layer',
-      type: 'raster',
-      source: 'carto-dark',
-      minzoom: 0,
-      maxzoom: 22,
-    },
-  ],
-}
-
-// MarineTraffic 스타일 — 깔끔한 연한 회색 육지 + 흰색 바다 + 한글 라벨
-const LIGHT_STYLE: StyleSpecification = {
-  version: 8,
-  glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
-  sources: {
-    'ofm-chart': {
-      type: 'vector',
-      url: 'https://tiles.openfreemap.org/planet',
-    },
-  },
-  layers: [
-    // ── 배경 = 육지 (연한 회색) ──
-    {
-      id: 'land-bg',
-      type: 'background',
-      paint: { 'background-color': '#e8e8e8' },
-    },
-    // ── 바다/호수/강 = water 레이어 (파란색) ──
-    {
-      id: 'water',
-      type: 'fill',
-      source: 'ofm-chart',
-      'source-layer': 'water',
-      paint: { 'fill-color': '#a8cce0' },
-    },
-    // ── 주요 도로 (zoom 9+) ──
-    {
-      id: 'roads-major',
-      type: 'line',
-      source: 'ofm-chart',
-      'source-layer': 'transportation',
-      minzoom: 9,
-      filter: ['in', 'class', 'motorway', 'trunk', 'primary'],
-      paint: {
-        'line-color': '#c0c0c0',
-        'line-width': ['interpolate', ['linear'], ['zoom'], 9, 0.4, 14, 1.5],
-      },
-    },
-    // ── 보조 도로 (zoom 12+) ──
-    {
-      id: 'roads-secondary',
-      type: 'line',
-      source: 'ofm-chart',
-      'source-layer': 'transportation',
-      minzoom: 12,
-      filter: ['in', 'class', 'secondary', 'tertiary'],
-      paint: {
-        'line-color': '#cccccc',
-        'line-width': ['interpolate', ['linear'], ['zoom'], 12, 0.3, 14, 1],
-      },
-    },
-    // ── 건물 (zoom 14+) ──
-    {
-      id: 'buildings',
-      type: 'fill',
-      source: 'ofm-chart',
-      'source-layer': 'building',
-      minzoom: 14,
-      paint: { 'fill-color': '#cbcbcb', 'fill-opacity': 0.5 },
-    },
-    // ── 국경선 ──
-    {
-      id: 'boundaries-country',
-      type: 'line',
-      source: 'ofm-chart',
-      'source-layer': 'boundary',
-      filter: ['==', 'admin_level', 2],
-      paint: { 'line-color': '#999999', 'line-width': 1, 'line-dasharray': [4, 2] },
-    },
-    // ── 시도 경계 (zoom 5+) ──
-    {
-      id: 'boundaries-province',
-      type: 'line',
-      source: 'ofm-chart',
-      'source-layer': 'boundary',
-      minzoom: 5,
-      filter: ['==', 'admin_level', 4],
-      paint: { 'line-color': '#bbbbbb', 'line-width': 0.5, 'line-dasharray': [3, 2] },
-    },
-    // ── 국가/시도 라벨 (한글) ──
-    {
-      id: 'place-labels-major',
-      type: 'symbol',
-      source: 'ofm-chart',
-      'source-layer': 'place',
-      minzoom: 3,
-      filter: ['in', 'class', 'country', 'state'],
-      layout: {
-        'text-field': ['coalesce', ['get', 'name:ko'], ['get', 'name']],
-        'text-font': ['Open Sans Bold'],
-        'text-size': ['interpolate', ['linear'], ['zoom'], 3, 11, 8, 16],
-        'text-max-width': 8,
-      },
-      paint: {
-        'text-color': '#555555',
-        'text-halo-color': '#ffffff',
-        'text-halo-width': 2,
-      },
-    },
-    {
-      id: 'place-labels-city',
-      type: 'symbol',
-      source: 'ofm-chart',
-      'source-layer': 'place',
-      minzoom: 5,
-      filter: ['in', 'class', 'city', 'town'],
-      layout: {
-        'text-field': ['coalesce', ['get', 'name:ko'], ['get', 'name']],
-        'text-font': ['Open Sans Regular'],
-        'text-size': ['interpolate', ['linear'], ['zoom'], 5, 10, 12, 14],
-        'text-max-width': 7,
-      },
-      paint: {
-        'text-color': '#666666',
-        'text-halo-color': '#ffffff',
-        'text-halo-width': 1.5,
-      },
-    },
-    // ── 해양 지명 (water_name) ──
-    {
-      id: 'water-labels',
-      type: 'symbol',
-      source: 'ofm-chart',
-      'source-layer': 'water_name',
-      layout: {
-        'text-field': ['coalesce', ['get', 'name:ko'], ['get', 'name']],
-        'text-font': ['Open Sans Italic'],
-        'text-size': ['interpolate', ['linear'], ['zoom'], 3, 10, 8, 14],
-        'text-max-width': 10,
-        'text-letter-spacing': 0.15,
-      },
-      paint: {
-        'text-color': '#8899aa',
-        'text-halo-color': 'rgba(168,204,224,0.7)',
-        'text-halo-width': 1,
-      },
-    },
-    // ── 마을/소지명 (zoom 10+) ──
-    {
-      id: 'place-labels-village',
-      type: 'symbol',
-      source: 'ofm-chart',
-      'source-layer': 'place',
-      minzoom: 10,
-      filter: ['in', 'class', 'village', 'suburb', 'hamlet'],
-      layout: {
-        'text-field': ['coalesce', ['get', 'name:ko'], ['get', 'name']],
-        'text-font': ['Open Sans Regular'],
-        'text-size': ['interpolate', ['linear'], ['zoom'], 10, 9, 14, 12],
-        'text-max-width': 6,
-      },
-      paint: {
-        'text-color': '#777777',
-        'text-halo-color': '#ffffff',
-        'text-halo-width': 1,
-      },
-    },
-  ],
-}
-
-// 3D 위성 스타일 (VWorld 위성 배경 + OpenFreeMap 건물 extrusion)
-// VWorld WMTS: {z}/{y}/{x} (row/col 순서)
-// OpenFreeMap: CORS 허용, 전 세계 OSM 벡터타일 (building: render_height 포함)
-const SATELLITE_3D_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    'vworld-satellite': {
-      type: 'raster',
-      tiles: ['/api/tiles/vworld/{z}/{y}/{x}.jpeg'],
-      tileSize: 256,
-      attribution: '&copy; <a href="https://www.vworld.kr">국토지리정보원 VWorld</a>',
-    },
-    'ofm': {
-      type: 'vector',
-      url: 'https://tiles.openfreemap.org/planet',
-    },
-  },
-  layers: [
-    {
-      id: 'satellite-base',
-      type: 'raster',
-      source: 'vworld-satellite',
-      minzoom: 0,
-      maxzoom: 22,
-    },
-    {
-      id: 'roads-3d',
-      type: 'line',
-      source: 'ofm',
-      'source-layer': 'transportation',
-      filter: ['in', ['get', 'class'], ['literal', ['motorway', 'trunk', 'primary', 'secondary']]],
-      paint: {
-        'line-color': 'rgba(255,255,200,0.3)',
-        'line-width': ['interpolate', ['linear'], ['zoom'], 10, 1, 16, 3],
-      },
-    },
-    {
-      id: '3d-buildings',
-      type: 'fill-extrusion',
-      source: 'ofm',
-      'source-layer': 'building',
-      minzoom: 13,
-      filter: ['!=', ['get', 'hide_3d'], true],
-      paint: {
-        'fill-extrusion-color': '#c8b99a',
-        'fill-extrusion-height': ['max', ['coalesce', ['get', 'render_height'], 0], 3],
-        'fill-extrusion-base': ['coalesce', ['get', 'render_min_height'], 0],
-        'fill-extrusion-opacity': 0.85,
-      },
-    },
-  ],
-}
-
-// S-57 전자해도 전용 빈 스타일 (ENC 레이어가 자체적으로 육지/해안/수심 모두 포함)
-const ENC_EMPTY_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {},
-  layers: [],
-}
-
 // 모델별 색상 매핑
 const MODEL_COLORS: Record<PredictionModel, string> = {
  'KOSPS': '#06b6d4',
@ -1347,9 +1101,7 @@ export function MapView({
  ])

  // 3D 모드 / 밝은 톤에 따른 지도 스타일 전환
-  const currentMapStyle = mapToggles['s57']
-    ? ENC_EMPTY_STYLE
-    : mapToggles['threeD'] ? SATELLITE_3D_STYLE : lightMode ? LIGHT_STYLE : BASE_STYLE
+  const currentMapStyle = useBaseMapStyle(lightMode)

  return (
    <div className="w-full h-full relative">
--- a/frontend/src/common/components/map/mapStyles.ts
+++ b/frontend/src/common/components/map/mapStyles.ts
@ -0,0 +1,247 @@
+import type { StyleSpecification } from 'maplibre-gl';
+
+// CartoDB Dark Matter 스타일
+export const BASE_STYLE: StyleSpecification = {
+  version: 8,
+  sources: {
+    'carto-dark': {
+      type: 'raster',
+      tiles: [
+        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+      ],
+      tileSize: 256,
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
+    },
+  },
+  layers: [
+    {
+      id: 'carto-dark-layer',
+      type: 'raster',
+      source: 'carto-dark',
+      minzoom: 0,
+      maxzoom: 22,
+    },
+  ],
+};
+
+// MarineTraffic 스타일 — 깔끔한 연한 회색 육지 + 흰색 바다 + 한글 라벨
+export const LIGHT_STYLE: StyleSpecification = {
+  version: 8,
+  glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
+  sources: {
+    'ofm-chart': {
+      type: 'vector',
+      url: 'https://tiles.openfreemap.org/planet',
+    },
+  },
+  layers: [
+    // ── 배경 = 육지 (연한 회색) ──
+    {
+      id: 'land-bg',
+      type: 'background',
+      paint: { 'background-color': '#e8e8e8' },
+    },
+    // ── 바다/호수/강 = water 레이어 (파란색) ──
+    {
+      id: 'water',
+      type: 'fill',
+      source: 'ofm-chart',
+      'source-layer': 'water',
+      paint: { 'fill-color': '#a8cce0' },
+    },
+    // ── 주요 도로 (zoom 9+) ──
+    {
+      id: 'roads-major',
+      type: 'line',
+      source: 'ofm-chart',
+      'source-layer': 'transportation',
+      minzoom: 9,
+      filter: ['in', 'class', 'motorway', 'trunk', 'primary'],
+      paint: {
+        'line-color': '#c0c0c0',
+        'line-width': ['interpolate', ['linear'], ['zoom'], 9, 0.4, 14, 1.5],
+      },
+    },
+    // ── 보조 도로 (zoom 12+) ──
+    {
+      id: 'roads-secondary',
+      type: 'line',
+      source: 'ofm-chart',
+      'source-layer': 'transportation',
+      minzoom: 12,
+      filter: ['in', 'class', 'secondary', 'tertiary'],
+      paint: {
+        'line-color': '#cccccc',
+        'line-width': ['interpolate', ['linear'], ['zoom'], 12, 0.3, 14, 1],
+      },
+    },
+    // ── 건물 (zoom 14+) ──
+    {
+      id: 'buildings',
+      type: 'fill',
+      source: 'ofm-chart',
+      'source-layer': 'building',
+      minzoom: 14,
+      paint: { 'fill-color': '#cbcbcb', 'fill-opacity': 0.5 },
+    },
+    // ── 국경선 ──
+    {
+      id: 'boundaries-country',
+      type: 'line',
+      source: 'ofm-chart',
+      'source-layer': 'boundary',
+      filter: ['==', 'admin_level', 2],
+      paint: { 'line-color': '#999999', 'line-width': 1, 'line-dasharray': [4, 2] },
+    },
+    // ── 시도 경계 (zoom 5+) ──
+    {
+      id: 'boundaries-province',
+      type: 'line',
+      source: 'ofm-chart',
+      'source-layer': 'boundary',
+      minzoom: 5,
+      filter: ['==', 'admin_level', 4],
+      paint: { 'line-color': '#bbbbbb', 'line-width': 0.5, 'line-dasharray': [3, 2] },
+    },
+    // ── 국가/시도 라벨 (한글) ──
+    {
+      id: 'place-labels-major',
+      type: 'symbol',
+      source: 'ofm-chart',
+      'source-layer': 'place',
+      minzoom: 3,
+      filter: ['in', 'class', 'country', 'state'],
+      layout: {
+        'text-field': ['coalesce', ['get', 'name:ko'], ['get', 'name']],
+        'text-font': ['Open Sans Bold'],
+        'text-size': ['interpolate', ['linear'], ['zoom'], 3, 11, 8, 16],
+        'text-max-width': 8,
+      },
+      paint: {
+        'text-color': '#555555',
+        'text-halo-color': '#ffffff',
+        'text-halo-width': 2,
+      },
+    },
+    {
+      id: 'place-labels-city',
+      type: 'symbol',
+      source: 'ofm-chart',
+      'source-layer': 'place',
+      minzoom: 5,
+      filter: ['in', 'class', 'city', 'town'],
+      layout: {
+        'text-field': ['coalesce', ['get', 'name:ko'], ['get', 'name']],
+        'text-font': ['Open Sans Regular'],
+        'text-size': ['interpolate', ['linear'], ['zoom'], 5, 10, 12, 14],
+        'text-max-width': 7,
+      },
+      paint: {
+        'text-color': '#666666',
+        'text-halo-color': '#ffffff',
+        'text-halo-width': 1.5,
+      },
+    },
+    // ── 해양 지명 (water_name) ──
+    {
+      id: 'water-labels',
+      type: 'symbol',
+      source: 'ofm-chart',
+      'source-layer': 'water_name',
+      layout: {
+        'text-field': ['coalesce', ['get', 'name:ko'], ['get', 'name']],
+        'text-font': ['Open Sans Italic'],
+        'text-size': ['interpolate', ['linear'], ['zoom'], 3, 10, 8, 14],
+        'text-max-width': 10,
+        'text-letter-spacing': 0.15,
+      },
+      paint: {
+        'text-color': '#8899aa',
+        'text-halo-color': 'rgba(168,204,224,0.7)',
+        'text-halo-width': 1,
+      },
+    },
+    // ── 마을/소지명 (zoom 10+) ──
+    {
+      id: 'place-labels-village',
+      type: 'symbol',
+      source: 'ofm-chart',
+      'source-layer': 'place',
+      minzoom: 10,
+      filter: ['in', 'class', 'village', 'suburb', 'hamlet'],
+      layout: {
+        'text-field': ['coalesce', ['get', 'name:ko'], ['get', 'name']],
+        'text-font': ['Open Sans Regular'],
+        'text-size': ['interpolate', ['linear'], ['zoom'], 10, 9, 14, 12],
+        'text-max-width': 6,
+      },
+      paint: {
+        'text-color': '#777777',
+        'text-halo-color': '#ffffff',
+        'text-halo-width': 1,
+      },
+    },
+  ],
+};
+
+// 3D 위성 스타일 (VWorld 위성 배경 + OpenFreeMap 건물 extrusion)
+// VWorld WMTS: {z}/{y}/{x} (row/col 순서)
+// OpenFreeMap: CORS 허용, 전 세계 OSM 벡터타일 (building: render_height 포함)
+export const SATELLITE_3D_STYLE: StyleSpecification = {
+  version: 8,
+  sources: {
+    'vworld-satellite': {
+      type: 'raster',
+      tiles: ['/api/tiles/vworld/{z}/{y}/{x}.jpeg'],
+      tileSize: 256,
+      attribution: '&copy; <a href="https://www.vworld.kr">국토지리정보원 VWorld</a>',
+    },
+    'ofm': {
+      type: 'vector',
+      url: 'https://tiles.openfreemap.org/planet',
+    },
+  },
+  layers: [
+    {
+      id: 'satellite-base',
+      type: 'raster',
+      source: 'vworld-satellite',
+      minzoom: 0,
+      maxzoom: 22,
+    },
+    {
+      id: 'roads-3d',
+      type: 'line',
+      source: 'ofm',
+      'source-layer': 'transportation',
+      filter: ['in', ['get', 'class'], ['literal', ['motorway', 'trunk', 'primary', 'secondary']]],
+      paint: {
+        'line-color': 'rgba(255,255,200,0.3)',
+        'line-width': ['interpolate', ['linear'], ['zoom'], 10, 1, 16, 3],
+      },
+    },
+    {
+      id: '3d-buildings',
+      type: 'fill-extrusion',
+      source: 'ofm',
+      'source-layer': 'building',
+      minzoom: 13,
+      filter: ['!=', ['get', 'hide_3d'], true],
+      paint: {
+        'fill-extrusion-color': '#c8b99a',
+        'fill-extrusion-height': ['max', ['coalesce', ['get', 'render_height'], 0], 3],
+        'fill-extrusion-base': ['coalesce', ['get', 'render_min_height'], 0],
+        'fill-extrusion-opacity': 0.85,
+      },
+    },
+  ],
+};
+
+// S-57 전자해도 전용 빈 스타일 (ENC 레이어가 자체적으로 육지/해안/수심 모두 포함)
+export const ENC_EMPTY_STYLE: StyleSpecification = {
+  version: 8,
+  sources: {},
+  layers: [],
+};
--- a/frontend/src/common/hooks/useBaseMapStyle.ts
+++ b/frontend/src/common/hooks/useBaseMapStyle.ts
@ -0,0 +1,12 @@
+import type { StyleSpecification } from 'maplibre-gl';
+import { useMapStore } from '@common/store/mapStore';
+import { BASE_STYLE, LIGHT_STYLE, SATELLITE_3D_STYLE, ENC_EMPTY_STYLE } from '@common/components/map/mapStyles';
+
+export function useBaseMapStyle(lightMode = false): StyleSpecification {
+  const mapToggles = useMapStore((s) => s.mapToggles);
+
+  if (mapToggles.s57) return ENC_EMPTY_STYLE;
+  if (mapToggles.threeD) return SATELLITE_3D_STYLE;
+  if (lightMode) return LIGHT_STYLE;
+  return BASE_STYLE;
+}
--- a/frontend/src/common/store/mapStore.ts
+++ b/frontend/src/common/store/mapStore.ts
@ -55,7 +55,7 @@ const DEFAULT_MAP_TYPES: MapTypeItem[] = [
 let measureIdCounter = 0;

 export const useMapStore = create<MapState>((set, get) => ({
-  mapToggles: { s57: true, s101: false, threeD: false, satellite: false },
+  mapToggles: { s57: false, s101: false, threeD: false, satellite: false },
  mapTypes: DEFAULT_MAP_TYPES,
  toggleMap: (key) =>
    set((s) => {
@ -76,10 +76,7 @@ export const useMapStore = create<MapState>((set, get) => ({
          newToggles[t.mapKey as keyof MapToggles] = current[t.mapKey as keyof MapToggles] ?? false
        }
      }
-      // s57 기본값 유지
-      if (newToggles['s57'] === undefined && types.find(t => t.mapKey === 's57')) {
-        newToggles['s57'] = true
-      }
+      // 모든 토글 기본 off (기본지도 표시)
      set({ mapTypes: types, mapToggles: { ...current, ...newToggles } })
    } catch {
      // API 실패 시 fallback 유지
--- a/frontend/src/tabs/admin/components/DispersingZonePanel.tsx
+++ b/frontend/src/tabs/admin/components/DispersingZonePanel.tsx
@ -3,35 +3,10 @@ import { Map, useControl } from '@vis.gl/react-maplibre';
 import { MapboxOverlay } from '@deck.gl/mapbox';
 import { GeoJsonLayer } from '@deck.gl/layers';
 import type { Layer } from '@deck.gl/core';
-import type { StyleSpecification } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
-
-// CartoDB Dark Matter 스타일
-const MAP_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    'carto-dark': {
-      type: 'raster',
-      tiles: [
-        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
-        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
-        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
-      ],
-      tileSize: 256,
-      attribution:
-        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
-    },
-  },
-  layers: [
-    {
-      id: 'carto-dark-layer',
-      type: 'raster',
-      source: 'carto-dark',
-      minzoom: 0,
-      maxzoom: 22,
-    },
-  ],
-};
+import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
+import { S57EncOverlay } from '@common/components/map/S57EncOverlay';
+import { useMapStore } from '@common/store/mapStore';

 const MAP_CENTER: [number, number] = [127.5, 36.0];
 const MAP_ZOOM = 5.5;
@ -83,6 +58,8 @@ const ZONE_INFO: Record<ZoneKey, { label: string; rows: { key: string; value: st
 };

 const DispersingZonePanel = () => {
+  const currentMapStyle = useBaseMapStyle();
+  const mapToggles = useMapStore((s) => s.mapToggles);
  const [showConsider, setShowConsider] = useState(true);
  const [showRestrict, setShowRestrict] = useState(true);
  const [expandedZone, setExpandedZone] = useState<ZoneKey | null>(null);
@ -208,8 +185,9 @@ const DispersingZonePanel = () => {
            zoom: MAP_ZOOM,
          }}
          style={{ width: '100%', height: '100%' }}
-          mapStyle={MAP_STYLE}
+          mapStyle={currentMapStyle}
        >
+          <S57EncOverlay visible={mapToggles['s57'] ?? false} />
          <DeckGLOverlay layers={layers} />
        </Map>

--- a/frontend/src/tabs/aerial/components/CctvView.tsx
+++ b/frontend/src/tabs/aerial/components/CctvView.tsx
@ -1,8 +1,10 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { Map, Marker, Popup } from '@vis.gl/react-maplibre'
-import type { StyleSpecification } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { fetchCctvCameras } from '../services/aerialApi'
+import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle'
+import { S57EncOverlay } from '@common/components/map/S57EncOverlay'
+import { useMapStore } from '@common/store/mapStore'
 import type { CctvCameraItem } from '../services/aerialApi'
 import { CCTVPlayer } from './CCTVPlayer'
 import type { CCTVPlayerHandle } from './CCTVPlayer'
@ -20,22 +22,6 @@ function kbsCctvUrl(cctvId: number): string {
  return `/api/aerial/cctv/kbs-hls/${cctvId}/stream.m3u8`;
 }

-/** 지도 스타일 (CartoDB Dark Matter) */
-const MAP_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    'carto-dark': {
-      type: 'raster',
-      tiles: [
-        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-      ],
-      tileSize: 256,
-    },
-  },
-  layers: [{ id: 'carto-dark-layer', type: 'raster', source: 'carto-dark', minzoom: 0, maxzoom: 22 }],
-}

 const cctvFavorites = [
  { name: '여수항 해무관측', reason: '유출 사고 인접' },
@ -101,6 +87,8 @@ export function CctvView() {
  const [mapPopup, setMapPopup] = useState<CctvCameraItem | null>(null)
  const [viewMode, setViewMode] = useState<'list' | 'map'>('map')
  const playerRefs = useRef<(CCTVPlayerHandle | null)[]>([])
+  const currentMapStyle = useBaseMapStyle()
+  const mapToggles = useMapStore((s) => s.mapToggles)

  /** 지도 모드이거나, 리스트 모드에서 카메라 미선택 시 지도 표시 */
  const showMap = viewMode === 'map' && activeCells.length === 0
@ -440,10 +428,11 @@ export function CctvView() {
          <div className="flex-1 overflow-hidden relative">
            <Map
              initialViewState={{ longitude: 127.8, latitude: 35.5, zoom: 6.2 }}
-              mapStyle={MAP_STYLE}
+              mapStyle={currentMapStyle}
              style={{ width: '100%', height: '100%' }}
              attributionControl={false}
            >
+              <S57EncOverlay visible={mapToggles['s57'] ?? false} />
              {filtered.filter(c => c.lon && c.lat).map(cam => (
                <Marker
                  key={cam.cctvSn}
@ -563,11 +552,12 @@ export function CctvView() {
        <div className="w-full shrink-0 relative h-[210px] overflow-hidden">
          <Map
            initialViewState={{ longitude: 127.8, latitude: 35.5, zoom: 5.3 }}
-            mapStyle={MAP_STYLE}
+            mapStyle={currentMapStyle}
            style={{ width: '100%', height: '100%' }}
            attributionControl={false}
            interactive={true}
          >
+            <S57EncOverlay visible={mapToggles['s57'] ?? false} />
            {cameras.filter(c => c.lon && c.lat).map(cam => (
              <Marker
                key={`mini-${cam.cctvSn}`}
--- a/frontend/src/tabs/aerial/components/RealtimeDrone.tsx
+++ b/frontend/src/tabs/aerial/components/RealtimeDrone.tsx
@ -1,11 +1,13 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 import { Map, Marker, Popup } from '@vis.gl/react-maplibre'
-import type { StyleSpecification } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { fetchDroneStreams, startDroneStreamApi, stopDroneStreamApi } from '../services/aerialApi'
 import type { DroneStreamItem } from '../services/aerialApi'
 import { CCTVPlayer } from './CCTVPlayer'
 import type { CCTVPlayerHandle } from './CCTVPlayer'
+import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle'
+import { S57EncOverlay } from '@common/components/map/S57EncOverlay'
+import { useMapStore } from '@common/store/mapStore'

 /** 함정 위치 + 드론 비행 위치 */
 const DRONE_POSITIONS: Record<string, { ship: { lat: number; lon: number }; drone: { lat: number; lon: number } }> = {
@ -14,22 +16,6 @@ const DRONE_POSITIONS: Record<string, { ship: { lat: number; lon: number }; dron
  'mokpo-3015': { ship: { lat: 34.7780, lon: 126.3780 }, drone: { lat: 34.8050, lon: 126.4100 } },
 }

-const DRONE_MAP_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    'carto-dark': {
-      type: 'raster',
-      tiles: [
-        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-      ],
-      tileSize: 256,
-    },
-  },
-  layers: [{ id: 'carto-dark-layer', type: 'raster', source: 'carto-dark', minzoom: 0, maxzoom: 22 }],
-}
-
 export function RealtimeDrone() {
  const [streams, setStreams] = useState<DroneStreamItem[]>([])
  const [loading, setLoading] = useState(true)
@ -38,6 +24,8 @@ export function RealtimeDrone() {
  const [activeCells, setActiveCells] = useState<DroneStreamItem[]>([])
  const [mapPopup, setMapPopup] = useState<DroneStreamItem | null>(null)
  const playerRefs = useRef<(CCTVPlayerHandle | null)[]>([])
+  const currentMapStyle = useBaseMapStyle()
+  const mapToggles = useMapStore((s) => s.mapToggles)

  const showMap = activeCells.length === 0

@ -261,10 +249,11 @@ export function RealtimeDrone() {
          <div className="flex-1 overflow-hidden relative">
            <Map
              initialViewState={{ longitude: 127.8, latitude: 35.5, zoom: 6.2 }}
-              mapStyle={DRONE_MAP_STYLE}
+              mapStyle={currentMapStyle}
              style={{ width: '100%', height: '100%' }}
              attributionControl={false}
            >
+              <S57EncOverlay visible={mapToggles['s57'] ?? false} />
              {streams.map(stream => {
                const pos = DRONE_POSITIONS[stream.id]
                if (!pos) return null
--- a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx
+++ b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx
@ -1,8 +1,10 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { Map, Source, Layer } from '@vis.gl/react-maplibre'
-import type { StyleSpecification } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { Marker } from '@vis.gl/react-maplibre'
+import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle'
+import { S57EncOverlay } from '@common/components/map/S57EncOverlay'
+import { useMapStore } from '@common/store/mapStore'
 import { fetchSatellitePasses } from '../services/aerialApi'

 const VWORLD_API_KEY = import.meta.env.VITE_VWORLD_API_KEY || ''
@ -71,21 +73,6 @@ const up42Satellites = [

 // up42Passes — 실시간 패스로 대체됨 (satPasses from API)

-const SAT_MAP_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    'carto-dark': {
-      type: 'raster',
-      tiles: [
-        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-      ],
-      tileSize: 256,
-    },
-  },
-  layers: [{ id: 'carto-dark-layer', type: 'raster', source: 'carto-dark', minzoom: 0, maxzoom: 22 }],
-}

 /** 좌표 문자열 파싱 ("33.24°N 126.50°E" → {lat, lon}) */
 function parseCoord(coordStr: string): { lat: number; lon: number } | null {
@ -119,6 +106,8 @@ export function SatelliteRequest() {
  const satImgBrightness = 100
  const satShowOverlay = true

+  const currentMapStyle = useBaseMapStyle()
+  const mapToggles = useMapStore((s) => s.mapToggles)
  const modalRef = useRef<HTMLDivElement>(null)

  const loadSatPasses = useCallback(async () => {
@ -410,10 +399,11 @@ export function SatelliteRequest() {
        <div className="bg-bg-elevated border border-stroke rounded-md overflow-hidden relative" style={{ height: 'calc(100vh - 160px)' }}>
          <Map
            initialViewState={{ longitude: 127.5, latitude: 34.5, zoom: 7 }}
-            mapStyle={SAT_MAP_STYLE}
+            mapStyle={currentMapStyle}
            style={{ width: '100%', height: '100%' }}
            attributionControl={false}
          >
+            <S57EncOverlay visible={mapToggles['s57'] ?? false} />
            {/* 선택된 날짜의 촬영 구역 폴리곤 */}
            {dateFiltered.map(r => {
              const coord = parseCoord(r.zoneCoord)
@ -963,10 +953,11 @@ export function SatelliteRequest() {
                    <div className="flex-1 relative" style={{ minHeight: 350 }}>
                      <Map
                        initialViewState={{ longitude: 128, latitude: 36, zoom: 5.5 }}
-                        mapStyle={SAT_MAP_STYLE}
+                        mapStyle={currentMapStyle}
                        style={{ width: '100%', height: '100%' }}
                        attributionControl={false}
                      >
+                        <S57EncOverlay visible={mapToggles['s57'] ?? false} />
                        {/* 한국 영역 AOI 박스 */}
                        <Source id="korea-aoi" type="geojson" data={{
                          type: 'Feature',
--- a/frontend/src/tabs/aerial/components/WingAI.tsx
+++ b/frontend/src/tabs/aerial/components/WingAI.tsx
@ -2,8 +2,11 @@ import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { Map, useControl } from '@vis.gl/react-maplibre';
 import { MapboxOverlay } from '@deck.gl/mapbox';
 import { PolygonLayer, ScatterplotLayer } from '@deck.gl/layers';
-import type { StyleSpecification, MapMouseEvent } from 'maplibre-gl';
+import type { MapMouseEvent } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
+import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
+import { S57EncOverlay } from '@common/components/map/S57EncOverlay';
+import { useMapStore } from '@common/store/mapStore';

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function DeckGLOverlay({ layers }: { layers: any[] }) {
@ -12,21 +15,6 @@ function DeckGLOverlay({ layers }: { layers: any[] }) {
  return null;
 }

-const AOI_MAP_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    'carto-dark': {
-      type: 'raster',
-      tiles: [
-        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-      ],
-      tileSize: 256,
-    },
-  },
-  layers: [{ id: 'carto-dark-layer', type: 'raster', source: 'carto-dark', minzoom: 0, maxzoom: 22 }],
-};

 type WingAITab = 'detect' | 'change' | 'aoi';

@ -104,6 +92,8 @@ interface VesselDetection {
 function DetectPanel() {
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [filterStatus, setFilterStatus] = useState<MismatchStatus | '전체'>('전체');
+  const currentMapStyle = useBaseMapStyle();
+  const mapToggles = useMapStore((s) => s.mapToggles);

  const detections: VesselDetection[] = [
    { id: 'VD-001', mmsi: '440123456', vesselName: 'OCEAN GLORY', aisType: '화물선', detectedType: '유조선', mismatch: true, status: '불일치', confidence: '94.2%', coord: '33.24°N 126.50°E', lon: 126.50, lat: 33.24, time: '14:23', detail: 'AIS 화물선 등록 → 영상 분석 결과 유조선 선형 + 탱크 구조 탐지' },
@ -159,9 +149,10 @@ function DetectPanel() {
            <Map
              initialViewState={{ longitude: 127.5, latitude: 34.0, zoom: 6.5 }}
              style={{ width: '100%', height: '100%' }}
-              mapStyle={AOI_MAP_STYLE}
+              mapStyle={currentMapStyle}
              attributionControl={false}
            >
+              <S57EncOverlay visible={mapToggles['s57'] ?? false} />
              <DeckGLOverlay layers={[
                new ScatterplotLayer({
                  id: 'vessel-detect-markers',
@ -654,6 +645,8 @@ const INITIAL_ZONES: MonitorZone[] = [
 function AoiPanel() {
  const [zones, setZones] = useState<MonitorZone[]>(INITIAL_ZONES);
  const [selectedZone, setSelectedZone] = useState<string | null>(null);
+  const currentMapStyle = useBaseMapStyle();
+  const mapToggles = useMapStore((s) => s.mapToggles);
  // 드로잉 상태
  const [isDrawing, setIsDrawing] = useState(false);
  const [drawingPoints, setDrawingPoints] = useState<[number, number][]>([]);
@ -936,10 +929,11 @@ function AoiPanel() {
            <Map
              initialViewState={{ longitude: 127.8, latitude: 34.5, zoom: 6.5 }}
              style={{ width: '100%', height: '100%' }}
-              mapStyle={AOI_MAP_STYLE}
+              mapStyle={currentMapStyle}
              attributionControl={false}
              onClick={handleMapClick}
            >
+              <S57EncOverlay visible={mapToggles['s57'] ?? false} />
              <DeckGLOverlay layers={deckLayers} />
            </Map>
          </div>
--- a/frontend/src/tabs/assets/components/AssetMap.tsx
+++ b/frontend/src/tabs/assets/components/AssetMap.tsx
@ -2,29 +2,14 @@ import { useMemo, useCallback, useEffect, useRef } from 'react'
 import { Map, useControl, useMap } from '@vis.gl/react-maplibre'
 import { MapboxOverlay } from '@deck.gl/mapbox'
 import { ScatterplotLayer } from '@deck.gl/layers'
-import type { StyleSpecification } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
+import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle'
+import { S57EncOverlay } from '@common/components/map/S57EncOverlay'
+import { useMapStore } from '@common/store/mapStore'
 import type { AssetOrgCompat } from '../services/assetsApi'
 import { typeColor } from './assetTypes'
 import { hexToRgba } from '@common/components/map/mapUtils'

-const BASE_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    'carto-dark': {
-      type: 'raster',
-      tiles: [
-        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-      ],
-      tileSize: 256,
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
-    },
-  },
-  layers: [{ id: 'carto-dark-layer', type: 'raster', source: 'carto-dark' }],
-}
-
 // ── DeckGLOverlay ──────────────────────────────────────
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function DeckGLOverlay({ layers }: { layers: any[] }) {
@ -64,6 +49,9 @@ function AssetMap({
  regionFilter,
  onRegionFilterChange,
 }: AssetMapProps) {
+  const currentMapStyle = useBaseMapStyle()
+  const mapToggles = useMapStore((s) => s.mapToggles)
+
  const handleClick = useCallback(
    (org: AssetOrgCompat) => {
      onSelectOrg(org)
@ -113,10 +101,11 @@ function AssetMap({
    <div className="w-full h-full relative">
      <Map
        initialViewState={{ longitude: 127.8, latitude: 35.9, zoom: 7 }}
-        mapStyle={BASE_STYLE}
+        mapStyle={currentMapStyle}
        className="w-full h-full"
        attributionControl={false}
      >
+        <S57EncOverlay visible={mapToggles['s57'] ?? false} />
        <DeckGLOverlay layers={[markerLayer]} />
        <FlyToController selectedOrg={selectedOrg} />
      </Map>
--- a/frontend/src/tabs/incidents/components/IncidentsView.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentsView.tsx
@ -3,8 +3,9 @@ import { Map as MapLibre, Popup, useControl, useMap } from '@vis.gl/react-maplib
 import { MapboxOverlay } from '@deck.gl/mapbox'
 import { ScatterplotLayer, IconLayer, PathLayer, TextLayer, GeoJsonLayer } from '@deck.gl/layers'
 import { PathStyleExtension } from '@deck.gl/extensions'
-import type { StyleSpecification } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
+import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle'
+import { S57EncOverlay } from '@common/components/map/S57EncOverlay'
 import { IncidentsLeftPanel, type Incident } from './IncidentsLeftPanel'
 import { IncidentsRightPanel, type ViewMode, type AnalysisSection } from './IncidentsRightPanel'
 import { mockVessels, VESSEL_LEGEND, type Vessel } from '@common/mock/vesselMockData'
@ -43,24 +44,6 @@ function getCategoryColor(index: number): [number, number, number] {
  return CATEGORY_PALETTE[index % CATEGORY_PALETTE.length]
 }

-// ── CartoDB Positron 베이스맵 (밝은 테마) ────────────────
-const BASE_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    'carto-light': {
-      type: 'raster',
-      tiles: [
-        'https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png',
-        'https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png',
-        'https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png',
-      ],
-      tileSize: 256,
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-    },
-  },
-  layers: [{ id: 'carto-light-layer', type: 'raster', source: 'carto-light' }],
-}
-
 // ── DeckGLOverlay ──────────────────────────────────────
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function DeckGLOverlay({ layers }: { layers: any[] }) {
@ -146,6 +129,10 @@ export function IncidentsView() {
  const [dischargeMode, setDischargeMode] = useState(false)
  const [dischargeInfo, setDischargeInfo] = useState<{ lat: number; lon: number; distanceNm: number } | null>(null)

+  // Map style & toggles
+  const currentMapStyle = useBaseMapStyle(true)
+  const mapToggles = useMapStore((s) => s.mapToggles)
+
  // Measure tool
  const { handleMeasureClick, measureMode } = useMeasureTool()
  const measureInProgress = useMapStore((s) => s.measureInProgress)
@ -616,7 +603,7 @@ export function IncidentsView() {
            <div className="absolute inset-0">
              <MapLibre
                initialViewState={{ longitude: 127.8, latitude: 35.0, zoom: 7 }}
-                mapStyle={BASE_STYLE}
+                mapStyle={currentMapStyle}
                style={{ width: '100%', height: '100%', background: '#f0f0f0' }}
                attributionControl={false}
                onClick={(e) => {
@ -633,6 +620,7 @@ export function IncidentsView() {
                }}
                cursor={(measureMode !== null || dischargeMode) ? 'crosshair' : undefined}
              >
+                <S57EncOverlay visible={mapToggles['s57'] ?? false} />
                <DeckGLOverlay layers={deckLayers} />
                <FlyToController incident={selectedIncident} />
                <MeasureOverlay />
--- a/frontend/src/tabs/scat/components/ScatMap.tsx
+++ b/frontend/src/tabs/scat/components/ScatMap.tsx
@ -2,30 +2,15 @@ import { useState, useMemo, useCallback, useEffect, useRef } from 'react'
 import { Map, useControl, useMap } from '@vis.gl/react-maplibre'
 import { MapboxOverlay } from '@deck.gl/mapbox'
 import { PathLayer, ScatterplotLayer } from '@deck.gl/layers'
-import type { StyleSpecification } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
+import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle'
+import { S57EncOverlay } from '@common/components/map/S57EncOverlay'
+import { useMapStore } from '@common/store/mapStore'
 import type { ScatSegment } from './scatTypes'
 import type { ApiZoneItem } from '../services/scatApi'
 import { esiColor } from './scatConstants'
 import { hexToRgba } from '@common/components/map/mapUtils'

-const BASE_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    'carto-dark': {
-      type: 'raster',
-      tiles: [
-        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-      ],
-      tileSize: 256,
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
-    },
-  },
-  layers: [{ id: 'carto-dark-layer', type: 'raster', source: 'carto-dark' }],
-}
-
 interface ScatMapProps {
  segments: ScatSegment[]
  zones: ApiZoneItem[]
@ -118,6 +103,9 @@ interface TooltipState {

 // ── ScatMap ─────────────────────────────────────────────
 function ScatMap({ segments, zones, selectedSeg, jurisdictionFilter, onSelectSeg, onOpenPopup }: ScatMapProps) {
+  const currentMapStyle = useBaseMapStyle()
+  const mapToggles = useMapStore((s) => s.mapToggles)
+
  const [zoom, setZoom] = useState(10)
  const [tooltip, setTooltip] = useState<TooltipState | null>(null)

@ -266,11 +254,12 @@ function ScatMap({ segments, zones, selectedSeg, jurisdictionFilter, onSelectSeg
          }
          return { longitude: 126.55, latitude: 33.38, zoom: 10 };
        })()}
-        mapStyle={BASE_STYLE}
+        mapStyle={currentMapStyle}
        className="w-full h-full"
        attributionControl={false}
        onZoom={e => setZoom(e.viewState.zoom)}
      >
+        <S57EncOverlay visible={mapToggles['s57'] ?? false} />
        <DeckGLOverlay layers={deckLayers} />
        <FlyToController selectedSeg={selectedSeg} zones={zones} />
      </Map>
--- a/frontend/src/tabs/weather/components/WeatherView.tsx
+++ b/frontend/src/tabs/weather/components/WeatherView.tsx
@ -2,8 +2,11 @@ import { useState, useMemo, useCallback } from 'react'
 import { Map, Marker, useControl } from '@vis.gl/react-maplibre'
 import { MapboxOverlay } from '@deck.gl/mapbox'
 import type { Layer } from '@deck.gl/core'
-import type { StyleSpecification, MapLayerMouseEvent } from 'maplibre-gl'
+import type { MapLayerMouseEvent } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
+import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle'
+import { S57EncOverlay } from '@common/components/map/S57EncOverlay'
+import { useMapStore } from '@common/store/mapStore'
 import { WeatherRightPanel } from './WeatherRightPanel'
 import { WeatherMapOverlay, useWeatherDeckLayers } from './WeatherMapOverlay'
 // import { OceanForecastOverlay } from './OceanForecastOverlay'
@ -82,33 +85,6 @@ const generateForecast = (timeOffset: TimeOffset): WeatherForecast[] => {
  return forecasts
 }

-// CartoDB Dark Matter 스타일 (기존 WeatherView와 동일)
-const WEATHER_MAP_STYLE: StyleSpecification = {
-  version: 8,
-  sources: {
-    'carto-dark': {
-      type: 'raster',
-      tiles: [
-        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
-        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
-        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
-      ],
-      tileSize: 256,
-      attribution:
-        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
-    },
-  },
-  layers: [
-    {
-      id: 'carto-dark-layer',
-      type: 'raster',
-      source: 'carto-dark',
-      minzoom: 0,
-      maxzoom: 22,
-    },
-  ],
-}
-
 // 한국 해역 중심 좌표 (한반도 중앙)
 const WEATHER_MAP_CENTER: [number, number] = [127.8, 36.5] // [lng, lat]
 const WEATHER_MAP_ZOOM = 7
@ -226,6 +202,8 @@ function WeatherMapInner({

 export function WeatherView() {
  const { weatherStations, loading, error, lastUpdate } = useWeatherData(BASE_STATIONS)
+  const currentMapStyle = useBaseMapStyle()
+  const mapToggles = useMapStore((s) => s.mapToggles)


  // const {
@ -373,11 +351,12 @@ export function WeatherView() {
              latitude: WEATHER_MAP_CENTER[1],
              zoom: WEATHER_MAP_ZOOM,
            }}
-            mapStyle={WEATHER_MAP_STYLE}
+            mapStyle={currentMapStyle}
            className="w-full h-full"
            onClick={handleMapClick}
            attributionControl={false}
          >
+            <S57EncOverlay visible={mapToggles['s57'] ?? false} />
            <WeatherMapInner
              weatherStations={weatherStations}
              enabledLayers={enabledLayers}