fix: Ocean 수심 커스텀 복원 + 선박명 테두리 개선

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/features/oceanMap/index.ts

@@ -1,5 +1,5 @@
 export type { OceanMapSettings, OceanDepthStop, OceanLabelLanguage, OceanDepthLabelSize } from './model/types';
-export { DEFAULT_OCEAN_MAP_SETTINGS } from './model/types';
+export { DEFAULT_OCEAN_MAP_SETTINGS, OCEAN_PRESET_DEPTH_STOPS } from './model/types';
 export { resolveOceanStyle } from './lib/resolveOceanStyle';
 export { discoverOceanLayers } from './lib/oceanLayerIds';
 export { useOceanMapSettings } from './hooks/useOceanMapSettings';

apps/web/src/features/oceanMap/model/types.ts

@@ -38,6 +38,26 @@ export interface OceanMapSettings {
   labelLanguage: OceanLabelLanguage;
 }
 
+/**
+ * Ocean 커스텀 수심 색상 프리셋 (12구간).
+ * 사용자가 "커스텀" 버튼을 누르면 이 값으로 초기화된다.
+ * Ocean 스타일에 어울리는 심해 → 천해 블루 그라데이션.
+ */
+export const OCEAN_PRESET_DEPTH_STOPS: OceanDepthStop[] = [
+  { depth: -11000, color: '#0a0e2a' },
+  { depth: -8000, color: '#0c1836' },
+  { depth: -6000, color: '#0e2444' },
+  { depth: -4000, color: '#103252' },
+  { depth: -2000, color: '#134060' },
+  { depth: -1000, color: '#175070' },
+  { depth: -200, color: '#1c6480' },
+  { depth: -100, color: '#217890' },
+  { depth: -50, color: '#288da0' },
+  { depth: -20, color: '#30a2b0' },
+  { depth: -10, color: '#3ab5be' },
+  { depth: 0, color: '#48c8cc' },
+];
+
 /**
  * Ocean 스타일 기본 설정.
  * depthStops가 비어있으면 Ocean 스타일의 네이티브 수심 색상을 유지한다.

apps/web/src/features/oceanMap/ui/OceanMapSettingsPanel.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import type { OceanMapSettings, OceanLabelLanguage, OceanDepthLabelSize, OceanDepthStop } from '../model/types';
-import { DEFAULT_OCEAN_MAP_SETTINGS } from '../model/types';
+import { DEFAULT_OCEAN_MAP_SETTINGS, OCEAN_PRESET_DEPTH_STOPS } from '../model/types';
 
 interface OceanMapSettingsPanelProps {
   value: OceanMapSettings;
@@ -114,12 +114,30 @@ export function OceanMapSettingsPanel({ value, onChange }: OceanMapSettingsPanel
           <div className="ms-section">
             <div className="ms-label" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
               수심 구간 색상
-              <span
-                className={`ml-2 cursor-pointer rounded border px-1.5 py-px text-[8px] transition-all duration-150 select-none ${autoGradient ? 'border-wing-accent bg-wing-accent text-white' : 'border-wing-border bg-wing-card text-wing-muted'}`}
-                onClick={toggleAutoGradient}
-                title="최소/최대 색상 기준으로 중간 구간을 자동 보간합니다"
-              >
-                자동채우기
+              <span style={{ display: 'flex', gap: 4 }}>
+                {value.depthStops.length > 0 && (
+                  <span
+                    className={`cursor-pointer rounded border px-1.5 py-px text-[8px] transition-all duration-150 select-none ${autoGradient ? 'border-wing-accent bg-wing-accent text-white' : 'border-wing-border bg-wing-card text-wing-muted'}`}
+                    onClick={toggleAutoGradient}
+                    title="최소/최대 색상 기준으로 중간 구간을 자동 보간합니다"
+                  >
+                    자동채우기
+                  </span>
+                )}
+                <span
+                  className={`cursor-pointer rounded border px-1.5 py-px text-[8px] transition-all duration-150 select-none ${value.depthStops.length > 0 ? 'border-wing-accent bg-wing-accent text-white' : 'border-wing-border bg-wing-card text-wing-muted'}`}
+                  onClick={() => {
+                    if (value.depthStops.length > 0) {
+                      update('depthStops', []);
+                      setAutoGradient(false);
+                    } else {
+                      update('depthStops', OCEAN_PRESET_DEPTH_STOPS);
+                    }
+                  }}
+                  title={value.depthStops.length > 0 ? 'Ocean 스타일 네이티브 색상으로 복원' : '수심 구간별 색상을 직접 지정합니다'}
+                >
+                  {value.depthStops.length > 0 ? '기본값' : '커스텀'}
+                </span>
               </span>
             </div>
             {value.depthStops.length === 0 ? (

apps/web/src/widgets/map3d/hooks/useGlobeShipLayers.ts

@@ -579,9 +579,9 @@ export function useGlobeShipLayers(
                   ['==', ['feature-state', 'highlighted'], 1], 'rgba(245,158,11,0.95)',
                   'rgba(226,232,240,0.92)',
                 ] as never,
-                'text-halo-color': 'rgba(2,6,23,0.85)',
-                'text-halo-width': 1.2,
-                'text-halo-blur': 0.8,
+                'text-halo-color': 'rgba(0,0,0,0.9)',
+                'text-halo-width': 0.8,
+                'text-halo-blur': 0.2,
               },
             } as unknown as LayerSpecification,
             undefined,

apps/web/src/widgets/map3d/lib/deckLayerFactories.ts

@@ -489,8 +489,8 @@ export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[
           characterSet: 'auto',
           getPixelOffset: [0, 16],
           getTextAnchor: 'middle',
-          outlineWidth: 2,
-          outlineColor: [2, 6, 23, 217],
+          outlineWidth: 1,
+          outlineColor: [0, 0, 0, 230],
         }),
       );
     }