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