diff --git a/apps/web/src/features/oceanMap/index.ts b/apps/web/src/features/oceanMap/index.ts index a326c1b..28fd507 100644 --- a/apps/web/src/features/oceanMap/index.ts +++ b/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'; diff --git a/apps/web/src/features/oceanMap/model/types.ts b/apps/web/src/features/oceanMap/model/types.ts index 83eb43a..e330468 100644 --- a/apps/web/src/features/oceanMap/model/types.ts +++ b/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 스타일의 네이티브 수심 색상을 유지한다. diff --git a/apps/web/src/features/oceanMap/ui/OceanMapSettingsPanel.tsx b/apps/web/src/features/oceanMap/ui/OceanMapSettingsPanel.tsx index 3f90a97..12fc3a0 100644 --- a/apps/web/src/features/oceanMap/ui/OceanMapSettingsPanel.tsx +++ b/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
수심 구간 색상 - - 자동채우기 + + {value.depthStops.length > 0 && ( + + 자동채우기 + + )} + 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 ? '기본값' : '커스텀'} +
{value.depthStops.length === 0 ? ( diff --git a/apps/web/src/widgets/map3d/hooks/useGlobeShipLayers.ts b/apps/web/src/widgets/map3d/hooks/useGlobeShipLayers.ts index 1a5a267..eaaf29e 100644 --- a/apps/web/src/widgets/map3d/hooks/useGlobeShipLayers.ts +++ b/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, diff --git a/apps/web/src/widgets/map3d/lib/deckLayerFactories.ts b/apps/web/src/widgets/map3d/lib/deckLayerFactories.ts index e72a68b..7703556 100644 --- a/apps/web/src/widgets/map3d/lib/deckLayerFactories.ts +++ b/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], }), ); }