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>
- 통계 펼치기 버튼을 topbar 내부에서 하단 우측 탭으로 이동
- 통계 바를 absolute→flow 레이아웃으로 변경 (지도 줌 겹침 방지)
- 모바일 grid-rows를 auto로 변경하여 통계 바 높이 수용
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- POLL/DATA/API/READY 상태 표시 제거
- 데스크톱: 통계 칩 항상 인라인 표시
- 모바일: 통계 펼치기 버튼 + 하단 확장 바
- 시스템명/시계/테마/로그아웃 항상 표시
- pollingStatus/lastFetchMinutes props 제거
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- @theme에서 --text-xs/sm 오버라이드 제거 (Tailwind 기본값 복원)
- 라이트 모드: bg #e2e8f0, border #94a3b8로 영역 대비 강화
- 새 토큰: --wing-glass-dense, --wing-overlay, --wing-card-alpha, --wing-subtle
- 8개 CSS 파일의 하드코딩된 rgba 값을 CSS 변수로 전환
- MapLibre 컨트롤 아이콘 라이트 모드 대응
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- useTheme: localStorage 기반 다크/라이트 테마 전환
- data-theme 속성으로 CSS 변수 자동 전환
- Topbar에 Light/Dark 토글 버튼 추가
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
DashboardPage.tsx (808줄) → 3파일 분리:
- useDashboardState.ts (147줄): UI 상태 관리 훅
- DashboardSidebar.tsx (430줄): 좌측 사이드바 컴포넌트
- DashboardPage.tsx (295줄): 레이아웃 + 지도 영역
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Mercator/Globe track-replay 레이어 충돌 및 setProps 레이스 해결
- track DTO 좌표/시간 정규화 + stale query 응답 무시
- 조회 직후 표시 안정화 및 기본 100x 자동재생 적용
- Global Track Replay 패널 초기 위치 조정 + 헤더 드래그 지원
- liveRenderer batch rendering + trackReplay store 기반 구조 반영
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 대상선박 우클릭 컨텍스트 메뉴로 항적 조회 (6h~5d)
- Mercator: PathLayer(고정) + TripsLayer(애니메이션) + ScatterplotLayer(포인트)
- Globe: MapLibre 네이티브 line + arrow + circle 레이어
- rAF 직접 overlay 조작으로 React 재렌더링 방지
- SVG 아이콘 data URL 캐시로 네트워크 재요청 방지
- 항적 조회 시 자동 fitBounds (전체 항적 뷰포트 맞춤)
- API 프록시 /api/ais-target/:mmsi/track 엔드포인트 추가
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- fill 3-tier 제거 → 단일 레이어(전체 depth) 복원
- setSky: sky/horizon/fog를 심해색(#010610)으로 설정
- 캔버스/map-area 배경: #010610 (타일 gap seam 비가시화)
- 타일 경계 gap으로 배경이 비칠 때 색상 차이를 제거
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 심해 fill 폴리곤이 globe 타일 경계에서 seam 아티팩트 발생
- bathymetry-fill: z3-7 (depth >= -2000, 천해만)
- bathymetry-fill-medium: z7-9 (depth >= -4000)
- bathymetry-fill-deep: z9+ (전체 depth)
- applyDepthGradient: 3개 fill 레이어 모두 적용
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- shallowFilter 제거: 전체 depth 범위 렌더링 복원
- bathyFillColor: -8000m, -4000m 색상 stop 복원
- DEPTHS_MEDIUM: -4000m 추가 (z7-9)
- DEPTHS_DETAIL: -4000m, -8000m 추가 (z9+)
- 줌 기반 LOD가 vertex 제어 담당 (depth 필터 불필요)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
소스 데이터 간소화가 projectionBusy 가드 뒤에 있어서
globe 전환 시 원본 데이터(2100+ vertex)로 tessellation 진행 →
73,000+ vertex 폭증. setData를 가드 앞으로 이동하고
useMemo로 간소화 데이터 캐싱.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- overlay 파괴/재생성 대신 layers 비움으로 전환
- globe ship 레이어 visibility 즉시 토글 (projectionBusy 우회)
- fleet circles fill vertex 초과 수정 (steps 72→36/24)
- globe scrollZoom easing 경고 수정
- projection 비영속화 (항상 mercator 시작)
- globe 레이어 준비 전까지 3D 토글 비활성화
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
usePersistedState hook으로 대시보드 상태를
localStorage에 자동 저장. 지도 뷰(중심/줌/방위)도
60초 주기 + 언마운트 시 저장하여 새로고침 복원.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
shared/lib/datetime.ts에 KST 고정 포맷 함수 추가.
AIS 정보, 선박 목록, 대시보드 등의 날짜 표시를
로컬 포맷에서 KST 명시적 포맷으로 통일.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- shared/auth 모듈: AuthProvider, ProtectedRoute, useAuth, authApi
- 페이지: LoginPage(Google OAuth), PendingPage, DeniedPage
- WING_PERMIT 역할 기반 접근 제어
- Topbar에 사용자 이름 + 로그아웃 버튼 추가
- App.tsx에 react-router 라우팅 + AuthProvider 래핑
- DEV 모드 Mock 로그인 지원 (김개발)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 육지색 적용 범위 확대 (background + 전체 fill 레이어)
- UI 가독성 개선: 라벨 10px, 색상 대비 강화
- 수심 구간 '자동채우기' 토글 추가 (최소/최대 기준 보간)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 나침반/줌 컨트롤 분리, 기어 버튼으로 설정 패널 토글
- 설정 항목: 레이블 언어, 육지/물/수심 색상, 수심 폰트 크기/색상
- 런타임 map.setPaintProperty/setLayoutProperty로 즉시 적용
- 수심 색상 범례 (좌하단 그라데이션 바 + 눈금)
- 초기화 버튼으로 디폴트 복원
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 수심 레이블: minzoom 10→7, 텍스트 크기 확대, halo 가독성 개선
- 해저 지형명: minzoom 8→6, 텍스트 크기 확대
- MapTiler 베이스맵 한글 지명 적용 (name:ko fallback)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- useNativeMapLayers 범용 hook 생성
- source/layer 생성, visibility, cleanup 자동화
- projectionBusy/isStyleLoaded 가드 내장
- Globe 레이어 순서 관리 내장
- beforeLayer 후보 배열 지원
- useSubcablesLayer를 useNativeMapLayers로 전환
- React Compiler ref 접근 규칙 준수 (useEffect 내 할당)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- useEffect 3개 분리 (레이어생성/호버/이벤트)
- hoveredCableId를 레이어 생성 deps에서 분리하여 깜박임 제거
- 이벤트 바인딩에 retry 로직 추가 (프로젝션 전환 후)
- paint 기본값을 상수로 추출하여 일관성 보장
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
