- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel - 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API - 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
27 lines
1.9 KiB
Markdown
27 lines
1.9 KiB
Markdown
# POI 라벨(구분) · 시설등급 기타 · 회덕화물역 km 검증 · 컴팩트 팝업
|
|
|
|
**소요 시간**: 40분
|
|
**Context 사용량**: input 약 470k / output 약 38k tokens
|
|
|
|
## 1. 화면 POI 라벨 — '구분' 우선
|
|
- [StationOverlay.tsx](../../client/src/components/overlay/StationOverlay.tsx) `guboonOf()` 추가.
|
|
- poiCand/poiMarkers/LabelCache 에 `label` 필드(=구분 값 있으면 그 값, 없으면 title) 추가.
|
|
- 캔버스 라벨이 `poiA.label` 사용. (matching/override 키는 title 유지.)
|
|
|
|
## 2. 시설등급에 '기타' 추가
|
|
- [settingsStore.ts](../../client/src/store/settingsStore.ts) `KNOWN_GRADES`에 '기타' 추가, `DEFAULT_GRADE_FILTER['기타']=true`.
|
|
- VideoPlayer 필터 UI는 `KNOWN_GRADES.map`이라 자동 노출. isGradeVisible 규칙상 '기타'도 토글 대상이 됨.
|
|
|
|
## 3. 회덕화물역 스테이션바 값 = 157K990 (검증)
|
|
- 실데이터 검증: 회덕화물역 최근접 프레임 762(16.6m)·재접근 3647(44.7m) **둘 다 chain→157k990**. 마커 km 라벨은 이미 157k990 산출.
|
|
- 주의(미해결): 회덕화물역이 양끝 스냅으로 t=0(좌측 끝)에 붙어 있어, **마커로 seek 시 커서는 영상 시작(≈157k900) 위치**를 보임 → 마커값(157k990)과 불일치. 시작점도 방식1(시간축 재기준화)로 맞추려면 추가 작업 필요(사용자 확인 대기).
|
|
|
|
## 4. 화면 POI 컴팩트 팝업 + 클릭 시 전체
|
|
- `compactFieldsOf()` 추가: 시설종별 / 구조형식(상부구조형식) / 연장(m) 중 존재하는 것만.
|
|
- poiMarkers에 `compact` 미리계산. 캔버스에서 라벨 아래 반투명 박스로 **항상 표시**.
|
|
- 히트박스를 컴팩트 박스까지 확장 → 클릭 시 기존 전체 속성 DOM 팝업 오픈.
|
|
- 성능: DOM 팝업 남발 대신 캔버스 드로잉(라벨과 함께 매 프레임, 구조물만 대상).
|
|
|
|
## 검증
|
|
- `tsc --noEmit` 통과, 클라이언트 재빌드, pm2 ghiVideo 재기동, HTTP 200.
|