Merge pull request 'develop' (#46) from develop into main

Reviewed-on: #46

apps/web/src/features/oceanMap/hooks/useOceanMapSettings.ts

@@ -12,14 +12,46 @@ const OCEAN_DEPTH_FONT_SIZE: Record<OceanDepthLabelSize, unknown[]> = {
   large: ['interpolate', ['linear'], ['zoom'], 5, 12, 8, 15, 11, 18],
 };
 
+/* ── Original paint cache (Ocean 네이티브 색상 복원용) ─────────── */
+const originalDepthPaint = new Map<string, { fillColor: unknown; fillOpacity: unknown }>();
+
+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);

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,