Wing Fleet Dashboard
htlee
168bea0621
Part A — 오버레이 라인 가시성: - Globe/Mercator 쌍끌이·FC·선단 라인 굵기 ~2x 증가 - Globe 범위 원·선단 원 대시 패턴 추가 - Globe 오버레이 호버 시 브리딩(breathing) 맥동 rAF Part B — 경고 선박 강조: - DashboardPage → Map3D alarmMmsiMap 전달 - Globe: 경고 맥동 레이어(ships-globe-alarm-pulse) + 배지(ships-globe-alarm-badge) - Mercator: Deck.gl ScatterplotLayer 맥동 + TextLayer 배지 - 경고 종류별 배지(이/수/환/휴/A), z-index 상향, 호버 스케일 확대 - 경고 필터 OFF 시 맥동/배지 자동 비표시 Part C — Mercator 선명 라벨: - MapLibre 라벨 → Deck.gl TextLayer 교체 (z-order 안정) Part D — 프로젝션 전환 안정화: - Globe→Mercator 전환 시 Globe custom layer 맵에서 분리 - alarm rAF에 projectionBusyRef 가드 추가 - overlay.setProps() stale WebGL 자원 참조 방지 Part E — 김개발(DEV) 모드 더미 데이터: - mockOverlayData.ts: 서해 12척 가상 선박 (5종 경고 시나리오) - 김개발 로그인 시 자동 주입, 일반 계정 미노출 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> |
||
|---|---|---|
| .claude | ||
| .gitea/workflows | ||
| .githooks | ||
| apps | ||
| data/raw/zones | ||
| legacy | ||
| packages/ui | ||
| scripts | ||
| .editorconfig | ||
| .gitignore | ||
| .node-version | ||
| .npmrc | ||
| .prettierrc | ||
| CLAUDE.md | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
WING Fleet Dashboard (Prototype to Project)
This repo started as a single HTML prototype and is being refactored into a structured React + TypeScript project.
Layout
legacy/: original single-file HTML prototype (reference)data/raw/zones/: raw GeoJSON zone polygons as receivedapps/web/: React + TS frontend (MapLibre GL JS + Deck.gl, single WebGL context)apps/api/: optional API server (proxy/stub)scripts/: data preparation scripts (e.g. zone reprojection)
What Works Now (GIS Demo)
- Live AIS polling (initial 10 minutes, then every 1 minute / last 2 minutes incremental) with MMSI upsert store:
- frontend hook:
apps/web/src/features/aisPolling/useAisTargetPolling.ts - API proxy (CORS safe):
apps/api/src/index.ts(GET /api/ais-target/search?minutes=...&bbox=...)
- frontend hook:
- MapLibre basemap:
- default (no MapTiler key): local raster style + OpenSeaMap seamark overlay:
apps/web/public/map/styles/osm-seamark.json - optional (recommended): MapTiler
dataviz-dark+ Ocean (bathymetry) vector overlays, plus OpenSeaMap seamark raster overlay
- default (no MapTiler key): local raster style + OpenSeaMap seamark overlay:
- Deck.gl layers rendered into MapLibre WebGL context (single context via
MapboxOverlay):- ships
IconLayer, zonesGeoJsonLayer, optional 3D densityHexagonLayer - map widget:
apps/web/src/widgets/map3d/Map3D.tsx
- ships
- Zone polygons converted to WGS84 GeoJSON:
- input:
data/raw/zones/*.json - build:
pnpm prepare:data->apps/web/public/data/zones/zones.wgs84.geojson
- input:
- Legacy CN-permit overlay (name/callsign/mmsi match; ring + color by 업종):
- legacy sources:
legacy/*.xlsx,legacy/*.jsx - build:
pnpm prepare:data->apps/web/public/data/legacy/chinese-permitted.v1.json
- legacy sources:
Quick Start
pnpm installpnpm prepare:datapnpm dev:web- (optional)
pnpm dev:api# only needed when you start adding DB-backed/local APIs
API server (optional): pnpm dev:api (defaults to http://127.0.0.1:5174)
Ports (dev):
- Web (Vite):
http://127.0.0.1:5175(default, strict). Change viaWEB_PORT=.... - API (Fastify):
http://127.0.0.1:5174(default). Change viaPORT=....and matchAPI_PORT=....for the web proxy.
Vite proxy (dev):
/snp-api/*->http://211.208.115.83:8041(override viaVITE_SNP_API_TARGET=...)
MapTiler (Optional, Bathymetry Vector Map)
To enable a dark-mode basemap + bathymetry (MapTiler Ocean tiles):
- Create a free MapTiler Cloud account and get an API key
- Set env vars for the web app:
# enables MapTiler style + ocean bathymetry layers in MapLibre
VITE_MAPTILER_KEY="YOUR_KEY"
# optional: change basemap style id (default: dataviz-dark)
VITE_MAPTILER_BASE_MAP_ID="dataviz-dark"