frontend/src/common/components/map/MapView.tsx

@@ -17,8 +17,8 @@ import { MeasureOverlay } from './MeasureOverlay'
 import { useMeasureTool } from '@common/hooks/useMeasureTool'
 import { hexToRgba } from './mapUtils'
 import { S57EncOverlay } from './S57EncOverlay'
+import { SrOverlay } from './SrOverlay'
 import { useMapStore } from '@common/store/mapStore'
-import { useThemeStore } from '@common/store/themeStore'
 import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle'
 
 const GEOSERVER_URL = import.meta.env.VITE_GEOSERVER_URL || 'http://localhost:8080'
@@ -113,6 +113,7 @@ interface MapViewProps {
   drawingPoints?: BoomLineCoord[]
   layerOpacity?: number
   layerBrightness?: number
+  layerColors?: Record<string, string>
   backtrackReplay?: {
     isActive: boolean
     ships: ReplayShip[]
@@ -306,6 +307,7 @@ export function MapView({
   drawingPoints = [],
   layerOpacity = 50,
   layerBrightness = 50,
+  layerColors,
   backtrackReplay,
   sensitiveResources = [],
   sensitiveResourceGeojson,
@@ -329,7 +331,7 @@ export function MapView({
   analysisCircleRadiusM = 0,
   showOverlays = true,
 }: MapViewProps) {
-  const lightMode = useThemeStore((s) => s.theme) === 'light'
+  const lightMode = true
   const { mapToggles, measureMode, measureInProgress, measurements } = useMapStore()
   const { handleMeasureClick } = useMeasureTool()
   const isControlled = externalCurrentTime !== undefined
@@ -1135,6 +1137,9 @@ export function MapView({
         {/* S-57 전자해도 오버레이 (공식 style.json 기반) */}
         <S57EncOverlay visible={mapToggles['s57'] ?? false} />
 
+        {/* SR 민감자원 벡터타일 오버레이 */}
+        <SrOverlay enabledLayers={enabledLayers} opacity={layerOpacity} layerColors={layerColors} />
+
         {/* WMS 레이어 */}
         {wmsLayers.map(layer => (
           <Source

frontend/src/common/hooks/useBaseMapStyle.ts

@@ -1,19 +1,15 @@
 import type { StyleSpecification } from 'maplibre-gl';
 import { useMapStore } from '@common/store/mapStore';
-import { useThemeStore } from '@common/store/themeStore';
 import {
-  BASE_STYLE,
   LIGHT_STYLE,
   SATELLITE_3D_STYLE,
   ENC_EMPTY_STYLE,
 } from '@common/components/map/mapStyles';
 
 export function useBaseMapStyle(): StyleSpecification {
-  const theme = useThemeStore((s) => s.theme);
   const mapToggles = useMapStore((s) => s.mapToggles);
 
   if (mapToggles.s57) return ENC_EMPTY_STYLE;
   if (mapToggles.threeD) return SATELLITE_3D_STYLE;
-  if (theme === 'light') return LIGHT_STYLE;
-  return BASE_STYLE;
+  return LIGHT_STYLE;
 }