From b9097c91cf49231713c171a8c63c079c53e38130 Mon Sep 17 00:00:00 2001
From: htlee <htlee@gcsc.co.kr>
Date: Tue, 10 Mar 2026 14:29:49 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat(map):=20OSM=20=EB=B2=A0=EC=9D=B4?=
 =?UTF-8?q?=EC=8A=A4=EB=A7=B5=20=EC=B6=94=EA=B0=80=20+=203-way=20=EB=9D=BC?=
 =?UTF-8?q?=EB=94=94=EC=98=A4=20=EA=B7=B8=EB=A3=B9=20=EC=A0=84=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/src/pages/dashboard/DashboardPage.tsx |  6 +--
 .../src/pages/dashboard/DashboardSidebar.tsx  | 37 ++++++++++++++-----
 .../widgets/map3d/hooks/useBaseMapToggle.ts   |  1 +
 .../src/widgets/map3d/layers/bathymetry.ts    | 17 +++++++++
 apps/web/src/widgets/map3d/types.ts           |  2 +-
 5 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/pages/dashboard/DashboardPage.tsx b/apps/web/src/pages/dashboard/DashboardPage.tsx
index 32e34e8..a80d705 100644
--- a/apps/web/src/pages/dashboard/DashboardPage.tsx
+++ b/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} />
-        )}
-        {baseMap !== 'ocean' && <DepthLegend depthStops={mapStyleSettings.depthStops} />}
+        ) : null}
+        {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} />
diff --git a/apps/web/src/pages/dashboard/DashboardSidebar.tsx b/apps/web/src/pages/dashboard/DashboardSidebar.tsx
index e6cbd8a..44019e5 100644
--- a/apps/web/src/pages/dashboard/DashboardSidebar.tsx
+++ b/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>
           }
         >
diff --git a/apps/web/src/widgets/map3d/hooks/useBaseMapToggle.ts b/apps/web/src/widgets/map3d/hooks/useBaseMapToggle.ts
index b9f3287..7d30a91 100644
--- a/apps/web/src/widgets/map3d/hooks/useBaseMapToggle.ts
+++ b/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;
 
diff --git a/apps/web/src/widgets/map3d/layers/bathymetry.ts b/apps/web/src/widgets/map3d/layers/bathymetry.ts
index 0ad3e2e..5bc8904 100644
--- a/apps/web/src/widgets/map3d/layers/bathymetry.ts
+++ b/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;
diff --git a/apps/web/src/widgets/map3d/types.ts b/apps/web/src/widgets/map3d/types.ts
index af087a7..417154d 100644
--- a/apps/web/src/widgets/map3d/types.ts
+++ b/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 {

From 07ad74c56ce79ccb0ba9525c30fe01438dd89e5f Mon Sep 17 00:00:00 2001
From: htlee <htlee@gcsc.co.kr>
Date: Tue, 10 Mar 2026 14:40:40 +0900
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=EB=A6=B4=EB=A6=AC=EC=A6=88=20?=
 =?UTF-8?q?=EB=85=B8=ED=8A=B8=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/RELEASE-NOTES.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/RELEASE-NOTES.md b/docs/RELEASE-NOTES.md
index 964fffe..6fb898f 100644
--- a/docs/RELEASE-NOTES.md
+++ b/docs/RELEASE-NOTES.md
@@ -4,5 +4,8 @@
 
 ## [Unreleased]
 
+### 추가
+- OSM 베이스맵 추가 + Base/OSM/Ocean 3-way 라디오 그룹 전환
+
 ### 기타
 - 팀 워크플로우 v1.6.1 동기화 + 관리 파일 .gitignore 전환