From 4f82f6eb647ba707417ea632d67b2ac36c59c320 Mon Sep 17 00:00:00 2001 From: htlee Date: Sat, 21 Feb 2026 00:22:35 +0900 Subject: [PATCH] =?UTF-8?q?fix(ocean):=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20?= =?UTF-8?q?=EC=A0=84=ED=99=98=20=EC=8B=9C=20=EB=84=A4=EC=9D=B4=ED=8B=B0?= =?UTF-8?q?=EB=B8=8C=20=EC=83=89=EC=83=81=20=EB=B3=B5=EC=9B=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.6 --- .../oceanMap/hooks/useOceanMapSettings.ts | 39 ++++++++++++++++++- apps/web/src/features/oceanMap/model/types.ts | 7 ++-- 2 files changed, 40 insertions(+), 6 deletions(-) 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, -- 2.45.2