feat(map): OSM 베이스맵 추가 + 3-way 라디오 그룹 전환

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

@@ -464,10 +464,10 @@ export function DashboardPage() {
         <WeatherOverlayPanel {...weatherOverlay} />
         {baseMap === 'ocean' ? (
           <OceanMapSettingsPanel value={state.oceanMapSettings} onChange={state.setOceanMapSettings} />
-        ) : (
+        ) : baseMap !== 'osm' ? (
           <MapSettingsPanel value={mapStyleSettings} onChange={setMapStyleSettings} />
-        )}
+        ) : null}
-        {baseMap !== 'ocean' && <DepthLegend depthStops={mapStyleSettings.depthStops} />}
+        {baseMap !== 'ocean' && baseMap !== 'osm' && <DepthLegend depthStops={mapStyleSettings.depthStops} />}
         <MapLegend />
         {selectedLegacyVessel ? (
           <VesselInfoPanel vessel={selectedLegacyVessel} allVessels={legacyVesselsAll} onClose={() => setSelectedMmsi(null)} onSelectMmsi={setSelectedMmsi} imo={selectedTarget && selectedTarget.imo > 0 ? selectedTarget.imo : undefined} shipImagePath={selectedTarget?.shipImagePath} shipImageCount={selectedTarget?.shipImageCount} onOpenImageModal={handlePanelOpenImageModal} />

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

@@ -157,10 +157,10 @@ export function DashboardSidebar({
         </Section>
 
         <Section
-          title="지도 표시 설정"
+          title="지도 설정"
           className="md:shrink-0"
           actions={
-            <div className="flex gap-1">
+            <div className="flex items-center gap-1">
               <ToggleButton
                 on={freeCamera}
                 onClick={toggleFreeCamera}
@@ -169,14 +169,6 @@ export function DashboardSidebar({
               >
                 자유 시점
               </ToggleButton>
-              <ToggleButton
-                on={baseMap === 'ocean'}
-                onClick={() => setBaseMap(baseMap === 'ocean' ? 'enhanced' : 'ocean')}
-                title="Ocean 전용 지도 (해양 정보 극대화)"
-                className="px-2 py-0.5 text-[9px]"
-              >
-                Ocean
-              </ToggleButton>
               <ToggleButton
                 on={projection === 'globe'}
                 onClick={isProjectionToggleDisabled ? undefined : () => setProjection((p) => (p === 'globe' ? 'mercator' : 'globe'))}
@@ -185,6 +177,31 @@ export function DashboardSidebar({
               >
                 3D
               </ToggleButton>
+              <span className="mx-0.5 h-3 w-px bg-wing-border" />
+              <ToggleButton
+                on={baseMap === 'enhanced'}
+                onClick={() => setBaseMap('enhanced')}
+                title="기본 지도 (MapTiler Enhanced)"
+                className="px-2 py-0.5 text-[9px]"
+              >
+                Base
+              </ToggleButton>
+              <ToggleButton
+                on={baseMap === 'osm'}
+                onClick={() => setBaseMap('osm')}
+                title="OSM 기본 래스터 지도"
+                className="px-2 py-0.5 text-[9px]"
+              >
+                OSM
+              </ToggleButton>
+              <ToggleButton
+                on={baseMap === 'ocean'}
+                onClick={() => setBaseMap('ocean')}
+                title="Ocean 전용 지도 (해양 정보 극대화)"
+                className="px-2 py-0.5 text-[9px]"
+              >
+                Ocean
+              </ToggleButton>
             </div>
           }
         >

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

@@ -63,6 +63,7 @@ export function useBaseMapToggle(
 
     const apply = () => {
       if (!map.isStyleLoaded()) return;
+      if (baseMap === 'osm') return;
       const seaVisibility = 'visible' as const;
       const seaRegex = /(water|sea|ocean|river|lake|coast|bay)/i;
 

apps/web/src/widgets/map3d/layers/bathymetry.ts

@@ -394,6 +394,23 @@ export async function resolveMapStyle(baseMap: BaseMapId, signal: AbortSignal):
     const { resolveOceanStyle } = await import('../../../features/oceanMap/lib/resolveOceanStyle');
     return resolveOceanStyle(signal);
   }
+  if (baseMap === 'osm') {
+    void signal;
+    return {
+      version: 8,
+      name: 'OSM Raster',
+      glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
+      sources: {
+        osm: {
+          type: 'raster',
+          tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+          tileSize: 256,
+          attribution: '© OpenStreetMap contributors',
+        },
+      },
+      layers: [{ id: 'osm', type: 'raster', source: 'osm' }],
+    } satisfies StyleSpecification;
+  }
   // 레거시 베이스맵 비활성 — 향후 위성/라이트 테마 등 추가 시 재활용
   // if (baseMap === 'legacy') return '/map/styles/carto-dark.json';
   void baseMap;

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

@@ -14,7 +14,7 @@ export type Map3DSettings = {
   showDensity: boolean;
 };
 
-export type BaseMapId = 'enhanced' | 'ocean' | 'legacy';
+export type BaseMapId = 'enhanced' | 'osm' | 'ocean' | 'legacy';
 export type MapProjectionId = 'mercator' | 'globe';
 
 export interface MapViewState {