diff --git a/apps/web/src/features/oceanMap/hooks/useOceanMapSettings.ts b/apps/web/src/features/oceanMap/hooks/useOceanMapSettings.ts index 6197dd2..39fe15b 100644 --- a/apps/web/src/features/oceanMap/hooks/useOceanMapSettings.ts +++ b/apps/web/src/features/oceanMap/hooks/useOceanMapSettings.ts @@ -12,14 +12,46 @@ const OCEAN_DEPTH_FONT_SIZE: Record = { large: ['interpolate', ['linear'], ['zoom'], 5, 12, 8, 15, 11, 18], }; +/* ── Original paint cache (Ocean 네이티브 색상 복원용) ─────────── */ +const originalDepthPaint = new Map(); + +function captureOriginalDepthPaint(map: maplibregl.Map, layers: string[]) { + if (originalDepthPaint.size > 0) return; // 이미 캡처됨 + for (const id of layers) { + if (!map.getLayer(id)) continue; + try { + originalDepthPaint.set(id, { + fillColor: map.getPaintProperty(id, 'fill-color'), + fillOpacity: map.getPaintProperty(id, 'fill-opacity'), + }); + } catch { /* ignore */ } + } +} + +function restoreOriginalDepthPaint(map: maplibregl.Map, layers: string[]) { + for (const id of layers) { + const orig = originalDepthPaint.get(id); + if (!orig || !map.getLayer(id)) continue; + try { + map.setPaintProperty(id, 'fill-color', orig.fillColor as never); + map.setPaintProperty(id, 'fill-opacity', orig.fillOpacity as never); + } catch { /* ignore */ } + } +} + /* ── Apply functions (Ocean 전용 — enhanced 코드와 공유 없음) ────── */ function applyOceanDepthColors(map: maplibregl.Map, layers: string[], stops: OceanDepthStop[], opacity: number) { if (layers.length === 0) return; - const depth = ['to-number', ['get', 'depth']]; const sorted = [...stops].sort((a, b) => a.depth - b.depth); - if (sorted.length < 2) return; + if (sorted.length < 2) { + // depthStops 비어있음 → Ocean 네이티브 색상 복원 + restoreOriginalDepthPaint(map, layers); + return; + } + + const depth = ['to-number', ['get', 'depth']]; const expr: unknown[] = ['interpolate', ['linear'], depth]; for (const s of sorted) { expr.push(s.depth, s.color); @@ -176,6 +208,9 @@ export function useOceanMapSettings( const stop = onMapStyleReady(map, () => { const oceanLayers = discoverOceanLayers(map); + // 커스텀 적용 전에 원본 paint 캡처 (최초 1회) + captureOriginalDepthPaint(map, oceanLayers.depthFill); + applyOceanDepthColors(map, oceanLayers.depthFill, s.depthStops, s.depthOpacity); applyOceanContourStyle(map, oceanLayers.contourLine, s.contourVisible, s.contourColor, s.contourOpacity, s.contourWidth); applyOceanDepthLabels(map, oceanLayers.depthLabel, s.depthLabelsVisible, s.depthLabelColor, s.depthLabelSize); diff --git a/apps/web/src/features/oceanMap/model/types.ts b/apps/web/src/features/oceanMap/model/types.ts index e330468..09f9845 100644 --- a/apps/web/src/features/oceanMap/model/types.ts +++ b/apps/web/src/features/oceanMap/model/types.ts @@ -60,12 +60,11 @@ export const OCEAN_PRESET_DEPTH_STOPS: OceanDepthStop[] = [ /** * Ocean 스타일 기본 설정. - * depthStops가 비어있으면 Ocean 스타일의 네이티브 수심 색상을 유지한다. - * 사용자가 커스텀하면 depthStops에 값이 채워져 적용된다. + * depthStops에 프리셋 색상이 기본 적용되며, 사용자가 자유롭게 변경 가능. + * "초기화" 시 프리셋 색상으로 복원된다. */ export const DEFAULT_OCEAN_MAP_SETTINGS: OceanMapSettings = { - // 빈 배열 = Ocean 스타일 네이티브 색상 사용 (커스텀 안 함) - depthStops: [], + depthStops: OCEAN_PRESET_DEPTH_STOPS, depthOpacity: 1, contourVisible: true,