gc-wing/apps/web/src/features/encMap/hooks/useEncMapSettings.ts
htlee d0f67ae803 feat(encMap): gcnautical 타일 서버 기반 ENC 전자해도 + UI 개선
## ENC 베이스맵 (features/encMap/)
- gcnautical 타일 서버 연동 (nautical.json 49개 레이어, 73개 S-52 스프라이트)
- 설정 패널: 12개 레이어 토글, 영역 색상 3종, 수심 색상 5단계
- 배경색 밝기 기반 선박 라벨 색상 자동 전환 (labelColor.ts)
- useMapStyleSettings에 ENC 가드 추가 (스타일 간섭 방지)
- useBaseMapToggle 초기 로드 스킵 (useMapInit과 중복 setStyle 방지)

## 선박 표시 개선
- Globe 원형 halo/outline 제거 — 아이콘 본체만 표시
- Globe 아이콘 스케일 1.3배, 줌아웃 최소 크기 보장 (minzoom 2)
- SDF icon-halo로 테두리 적용 (성능 영향 없음)
- 기타 AIS 투명도 상향 (0.28→0.6 ~ 1.0)
- 선박명 영문 우선 표시 (shipNameRoman > shipNameCn)

## 오버레이 제어 수정
- 연결선/범위/선단 토글 off 시 인터랙티브 오버레이도 비활성
- Globe pair/fc/fleet 레이어: || active 제거 → 토글 우선
- 강조 링/알람 링: shipData→shipLayerData (클러스터링 연동)

## 기본값 변경
- 경고 필터 5개: 초기 false
- 연결선/범위/선단: 초기 false
- 사진 파란 원 아이콘: Globe+Mercator 모두 제거

## 폰트 정리
- Open Sans 폴백 전면 제거 → Noto Sans 단독
- ENC 스타일 fetch 시 text-font 패치

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 14:19:28 +09:00

44 lines
1.4 KiB
TypeScript

import { useEffect, useRef, type MutableRefObject } from 'react';
import type maplibregl from 'maplibre-gl';
import { applyEncVisibility, applyEncColors } from '../lib/encSettings';
import type { EncMapSettings } from '../model/types';
import type { BaseMapId } from '../../../widgets/map3d/types';
/**
* Applies ENC map settings changes at runtime (no style reload).
*/
export function useEncMapSettings(
mapRef: MutableRefObject<maplibregl.Map | null>,
baseMap: BaseMapId,
settings: EncMapSettings,
) {
const prevRef = useRef<EncMapSettings>(settings);
useEffect(() => {
if (baseMap !== 'enc') return;
const map = mapRef.current;
if (!map) return;
const prev = prevRef.current;
prevRef.current = settings;
const toggleKeys = [
'showBuoys', 'showBeacons', 'showLights', 'showDangers', 'showLandmarks',
'showSoundings', 'showPilot', 'showAnchorage', 'showRestricted',
'showDredged', 'showTSS', 'showContours',
] as const;
if (toggleKeys.some((k) => prev[k] !== settings[k])) {
applyEncVisibility(map, settings);
}
const colorKeys = [
'landColor', 'coastlineColor', 'backgroundColor',
'depthDrying', 'depthVeryShallow', 'depthSafetyZone', 'depthMedium', 'depthDeep',
] as const;
if (colorKeys.some((k) => prev[k] !== settings[k])) {
applyEncColors(map, settings);
}
}, [baseMap, settings]);
}