From 3acda7432ef9f24a038f6d03b025a4b72fe4e64a Mon Sep 17 00:00:00 2001 From: htlee Date: Mon, 16 Feb 2026 07:04:31 +0900 Subject: [PATCH] =?UTF-8?q?refactor(map):=20UI=20=EA=B0=9C=EC=84=A0=20?= =?UTF-8?q?=E2=80=94=203D=20=EB=AA=85=EC=B9=AD,=20=EC=88=98=EC=8B=AC=20?= =?UTF-8?q?=EC=A4=8C,=20=EB=A0=88=EA=B1=B0=EC=8B=9C=20=EB=B9=84=ED=99=9C?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - "지구본" → "3D" 명칭 변경, 헤더 우측으로 이동 - 레거시 베이스맵 비활성 (주석처리) - 수심 minzoom 통일: fill 3, borders 5, major 3 - NavigationControl 통합, 기어 버튼 겹침 수정 - constants.ts 미사용 BATHY_ZOOM_RANGES 제거 Co-Authored-By: Claude Opus 4.6 --- apps/web/src/app/styles.css | 2 +- .../web/src/pages/dashboard/DashboardPage.tsx | 36 +++++++++---------- apps/web/src/widgets/map3d/constants.ts | 9 ++--- .../web/src/widgets/map3d/hooks/useMapInit.ts | 3 +- .../src/widgets/map3d/layers/bathymetry.ts | 14 ++++---- 5 files changed, 30 insertions(+), 34 deletions(-) diff --git a/apps/web/src/app/styles.css b/apps/web/src/app/styles.css index 3d864f8..462325f 100644 --- a/apps/web/src/app/styles.css +++ b/apps/web/src/app/styles.css @@ -925,7 +925,7 @@ body { .map-settings-gear { position: absolute; - top: 95px; + top: 100px; left: 10px; z-index: 850; width: 29px; diff --git a/apps/web/src/pages/dashboard/DashboardPage.tsx b/apps/web/src/pages/dashboard/DashboardPage.tsx index 62a5302..87e5bdb 100644 --- a/apps/web/src/pages/dashboard/DashboardPage.tsx +++ b/apps/web/src/pages/dashboard/DashboardPage.tsx @@ -113,7 +113,9 @@ export function DashboardPage() { const [showTargets, setShowTargets] = useState(true); const [showOthers, setShowOthers] = useState(false); - const [baseMap, setBaseMap] = useState("enhanced"); + // 레거시 베이스맵 비활성 — 향후 위성/라이트 등 추가 시 재활용 + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [baseMap, _setBaseMap] = useState("enhanced"); const [projection, setProjection] = useState("mercator"); const [mapStyleSettings, setMapStyleSettings] = useState(DEFAULT_MAP_STYLE_SETTINGS); @@ -357,30 +359,28 @@ export function DashboardPage() {
-
지도 표시 설정
- setOverlays((prev) => ({ ...prev, [k]: !prev[k] }))} /> -
- 베이스맵 +
+ 지도 표시 설정 +
+
setProjection((p) => (p === "globe" ? "mercator" : "globe"))} + title="3D 지구본 투영: 드래그로 회전, 휠로 확대/축소" + style={{ fontSize: 9, padding: "2px 8px" }} + > + 3D +
-
+ setOverlays((prev) => ({ ...prev, [k]: !prev[k] }))} /> + {/* 베이스맵 선택 — 현재 enhanced 단일 맵 사용, 레거시는 비활성 +
setBaseMap("enhanced")} title="현재 지도(해저지형/3D 표현 포함)"> 기본
setBaseMap("legacy")} title="레거시 대시보드(Carto Dark) 베이스맵"> 레거시
- -
- -
setProjection((p) => (p === "globe" ? "mercator" : "globe"))} - title="지구본(globe) 투영: 드래그로 회전, 휠로 확대/축소" - > - 지구본 -
-
- {/* Attribution (license) stays visible in the map UI; no need to repeat it here. */} +
*/}
diff --git a/apps/web/src/widgets/map3d/constants.ts b/apps/web/src/widgets/map3d/constants.ts index 66b2b78..92db352 100644 --- a/apps/web/src/widgets/map3d/constants.ts +++ b/apps/web/src/widgets/map3d/constants.ts @@ -3,7 +3,6 @@ import { OVERLAY_RGB, rgba as rgbaCss, } from '../../shared/lib/map/palette'; -import type { BathyZoomRange } from './types'; // ── Re-export palette aliases used throughout Map3D ── @@ -158,9 +157,5 @@ export const FLEET_LINE_ML = rgbaCss(OVERLAY_FLEET_RANGE_RGB, 0.65); export const FLEET_LINE_ML_HL = rgbaCss(OVERLAY_FLEET_RANGE_RGB, 0.95); // ── Bathymetry zoom ranges ── - -export const BATHY_ZOOM_RANGES: BathyZoomRange[] = [ - { id: 'bathymetry-fill', mercator: [5, 24], globe: [7, 24] }, - { id: 'bathymetry-borders', mercator: [5, 24], globe: [7, 24] }, - { id: 'bathymetry-borders-major', mercator: [3, 24], globe: [7, 24] }, -]; +// NOTE: BATHY_ZOOM_RANGES는 bathymetry.ts에서 로컬 정의 + applyBathymetryZoomProfile()에서 사용 +// 이 파일의 export는 사용처가 없어 제거됨 (2026-02-16) diff --git a/apps/web/src/widgets/map3d/hooks/useMapInit.ts b/apps/web/src/widgets/map3d/hooks/useMapInit.ts index 6e64376..26fb2de 100644 --- a/apps/web/src/widgets/map3d/hooks/useMapInit.ts +++ b/apps/web/src/widgets/map3d/hooks/useMapInit.ts @@ -91,8 +91,7 @@ export function useMapInit( scrollZoom: { around: 'center' }, }); - map.addControl(new maplibregl.NavigationControl({ showZoom: true, showCompass: false }), 'top-left'); - map.addControl(new maplibregl.NavigationControl({ showZoom: false, showCompass: true }), 'top-left'); + map.addControl(new maplibregl.NavigationControl({ showZoom: true, showCompass: true }), 'top-left'); map.addControl(new maplibregl.ScaleControl({ maxWidth: 120, unit: 'metric' }), 'bottom-left'); mapRef.current = map; diff --git a/apps/web/src/widgets/map3d/layers/bathymetry.ts b/apps/web/src/widgets/map3d/layers/bathymetry.ts index afcf223..4c4089b 100644 --- a/apps/web/src/widgets/map3d/layers/bathymetry.ts +++ b/apps/web/src/widgets/map3d/layers/bathymetry.ts @@ -10,9 +10,9 @@ export const SHALLOW_WATER_FILL_DEFAULT = '#14606e'; export const SHALLOW_WATER_LINE_DEFAULT = '#114f5c'; const BATHY_ZOOM_RANGES: BathyZoomRange[] = [ - { id: 'bathymetry-fill', mercator: [6, 24], globe: [8, 24] }, - { id: 'bathymetry-borders', mercator: [6, 24], globe: [8, 24] }, - { id: 'bathymetry-borders-major', mercator: [4, 24], globe: [8, 24] }, + { id: 'bathymetry-fill', mercator: [3, 24], globe: [3, 24] }, + { id: 'bathymetry-borders', mercator: [5, 24], globe: [5, 24] }, + { id: 'bathymetry-borders-major', mercator: [3, 24], globe: [3, 24] }, ]; export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerKey: string) { @@ -69,7 +69,7 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK type: 'fill', source: oceanSourceId, 'source-layer': 'contour', - minzoom: 5, + minzoom: 3, maxzoom: 24, paint: { 'fill-color': bathyFillColor, @@ -82,7 +82,7 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK type: 'line', source: oceanSourceId, 'source-layer': 'contour', - minzoom: 5, + minzoom: 5, // fill은 3부터, borders는 5부터 maxzoom: 24, paint: { 'line-color': 'rgba(255,255,255,0.06)', @@ -304,6 +304,8 @@ export async function resolveInitialMapStyle(signal: AbortSignal): Promise { - if (baseMap === 'legacy') return '/map/styles/carto-dark.json'; + // 레거시 베이스맵 비활성 — 향후 위성/라이트 테마 등 추가 시 재활용 + // if (baseMap === 'legacy') return '/map/styles/carto-dark.json'; + void baseMap; return resolveInitialMapStyle(signal); }