refactor: OpenLayers → MapLibre GL JS 완전 전환 (Phase 3 Step 2) #1

htlee · 2026-02-15T17:52:18+09:00

htlee 코멘트됨,

2026-02-15 17:52:18 +09:00

소유자

개요

OpenLayers → MapLibre GL JS 완전 전환 (Phase 3 Step 2)

✅ Session C: 코어 지도 엔진 전환 (21개 파일)
✅ Session E: 관심구역 + 추적 반경원 전환
✅ Session F: 측정 도구 MapLibre 구현
✅ Session H: 미니맵 전환 + OL 패키지 제거
⏭️ Session G: 구역 편집 패스 (기능 미사용)

주요 변경사항

MapLibre GL JS 5.18.0 + @deck.gl/mapbox 통합
측정 도구: Turf.js 기반 재구현
미니맵: VesselDetailModal, StsContactDetailModal MapLibre 전환
OpenLayers 완전 제거 (~500KB 번들 감소)

검증

yarn type-check 통과
yarn lint 통과 (31 warnings, 0 errors)
yarn build 성공

커밋

96ee263b - Session C: 코어 지도 엔진 전환
2a7f1af6 - Session E: 관심구역 + 반경원 전환
4c7bd42b - Session E + F + H: 종합 전환
7b13977b - 문서 정리 + 코드 정리

🤖 Generated with Claude Code

## 개요 OpenLayers → MapLibre GL JS 완전 전환 (Phase 3 Step 2) - ✅ Session C: 코어 지도 엔진 전환 (21개 파일) - ✅ Session E: 관심구역 + 추적 반경원 전환 - ✅ Session F: 측정 도구 MapLibre 구현 - ✅ Session H: 미니맵 전환 + OL 패키지 제거 - ⏭️ Session G: 구역 편집 패스 (기능 미사용) ## 주요 변경사항 - MapLibre GL JS 5.18.0 + @deck.gl/mapbox 통합 - 측정 도구: Turf.js 기반 재구현 - 미니맵: VesselDetailModal, StsContactDetailModal MapLibre 전환 - **OpenLayers 완전 제거** (~500KB 번들 감소) ## 검증 - [x] `yarn type-check` 통과 - [x] `yarn lint` 통과 (31 warnings, 0 errors) - [x] `yarn build` 성공 ## 커밋 - `96ee263b` - Session C: 코어 지도 엔진 전환 - `2a7f1af6` - Session E: 관심구역 + 반경원 전환 - `4c7bd42b` - Session E + F + H: 종합 전환 - `7b13977b` - 문서 정리 + 코드 정리 🤖 Generated with Claude Code

htlee added 8 commits 2026-02-15 17:52:22 +09:00

chore: JavaScript → TypeScript 전환 완료 (77개 파일) 6e3ad9e0d8

JS/JSX 77개 파일을 TS/TSX로 전환하고 JS 원본을 삭제.
- stores 7개, map core 6개, hooks 4개 등 전체 모듈 전환
- TypeScript strict 모드, OL/Deck.gl 타입 적용
- .gitignore에서 TS/TSX 무시 규칙 제거
- pre-commit hook: .js,.jsx → .ts,.tsx 확장자 변경
- tsc --noEmit 0 에러, ESLint 0 에러, yarn build 성공

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

docs: CLAUDE.md TypeScript 전환 및 Phase 3 계획 반영 fb922fa793

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

chore: React 19 + Vite 7 + ESLint 9 + Zustand 5 업그레이드 3060973f92

- React 18.2 → 19.2.4, react-dom 19.2.4
- Vite 5.2.10 → 7.3.1, @vitejs/plugin-react 5.1.4
- ESLint 8.44 → 9.39.2 flat config, typescript-eslint 8.55.0
- eslint-plugin-react-hooks 7.0.1 (신규 규칙 warn 설정)
- Zustand 4.5 → 5.0.11 (shallow → useShallow 마이그레이션)
- sass 1.77.8 → 1.97.3
- sockjs-client, flatgeobuf 미사용 패키지 제거
- react-router-dom v7 future flag 적용
- vite.config.ts: defineConfig 함수형, build.target: es2022

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

docs: CLAUDE.md 기술 스택 버전 업데이트 (Step 1 완료 반영) 4c291bb08f

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

refactor: OpenLayers → MapLibre GL JS 코어 전환 (Session C) 96ee263b1e

메인 지도 엔진을 OpenLayers에서 MapLibre GL JS 5.18.0으로 전환.
Deck.gl 통합을 수동 캔버스 오버레이에서 @deck.gl/mapbox MapboxOverlay로 단순화.

주요 변경:
- maplibregl.Map + MapboxOverlay(자동 뷰 동기화) 기반 재구성
- OL EPSG:3857 좌표 변환 → MapLibre LngLat(4326) 직접 사용
- 줌 규약: mapStore.zoom = OL 규약 유지 (MapLibre zoom + 1)
- OL 전용 코드에 MapLibre 가드 패턴 적용 (getCanvas 체크)
- 커서 관리: default → pointer(호버) → grabbing(드래그)

신규: projection.ts | 재작성: baseLayer, useShipLayer, MapContainer, useTrackingMode
패치: mapStore, shipLayer, TopBar, useShipSearch, useRealmLayer, useMeasure,
      useZoneDraw, useZoneEdit, ReplayWebSocketService, TrackQueryViewer 외

미동작(후속 세션): 측정(F), 관심구역(E), 반경원(E), 구역편집(G), 미니맵(H)

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

refactor: 관심구역 폴리곤 + 추적 반경원 MapLibre 전환 (Session E) 2a7f1af6d2

- useRealmLayer: OL VectorLayer → MapLibre GeoJSON source + fill/line/symbol layer
  - data-driven expression으로 개별 스타일링 (fillColor, outlineColor, isDotted)
  - line-dasharray data-driven 미지원 → 실선/점선 레이어 분리
  - style.load 이벤트로 배경지도 전환 후 레이어 자동 복구
- useTrackingMode: @turf/circle 기반 반경 원 시각화 추가
  - trackingModeStore subscribe로 선박 이동/반경 변경에 동기화
  - style.load 복구 패턴 적용
- baseLayer: glyphs URL 추가 (symbol layer 텍스트 렌더링용)

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

refactor: 관심구역, 측정, 미니맵 MapLibre 전환 + OpenLayers 제거 (Session E, F, H) 4c7bd42b42

- Session E: 관심구역 폴리곤 + 추적 반경원 MapLibre GeoJSON 레이어로 전환
  - useRealmLayer: OL VectorLayer → MapLibre fill/line layer
  - useTrackingMode: 반경 원 @turf/circle → GeoJSON source
- Session F: 측정 도구 MapLibre 커스텀 구현
  - useMeasure: OL Draw/Overlay → MapLibre Marker + GeoJSON layer
  - 거리/면적: @turf/distance, @turf/length, @turf/area
  - 툴 믹싱 지원, 세션 persistence
- Session H: 미니맵 MapLibre 전환 + OpenLayers 완전 제거
  - VesselDetailModal/StsContactDetailModal: OL 임베디드 맵 → MapLibre 7개 레이어
  - mapStore: map 타입 any → maplibregl.Map | null
  - csvDownload: OL Polygon → Turf.js booleanPointInPolygon
  - package.json: ol, ol-ext 제거 (~500KB 감소)
  - main.tsx: OL CSS 제거
  - 6개 OL 파일 @ts-nocheck 추가 (Session G 패스)

검증: yarn type-check, yarn lint, yarn build 통과

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

chore: 메모리 문서 업데이트 및 사용하지 않는 변수 정리 7b13977b50

- memory/MEMORY.md: 현재 상태 업데이트 (커밋 4c7bd42b 반영)
- memory/maplibre-migration-status.md: 최종 커밋 정보 추가
- 사용하지 않는 catch 변수 제거 (4개 파일)
- ESLint 경고: 35개 → 31개

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

htlee referenced this pull request

2026-02-15 17:52:53 +09:00

release: Phase 3 완료 (React 19 + MapLibre GL JS 전환) #2

htlee merged commit ecaf203676 into develop

2026-02-15 17:52:59 +09:00

htlee 커밋

2026-02-15 17:53:01 +09:00

에서 이 이슈 언급

Merge pull request 'refactor: OpenLayers → MapLibre GL JS 완전 전환 (Phase 3 Step 2)' (#1) from refactor/maplibre-migration into develop

"로그인하여 이 대화에 참여"

No reviewers

레이블 없음