Files

T

b23042andClaude Opus 4.8 78fc090360 초기 커밋: 스테이션(측점) 기반 주행영상 플레이어

- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel
- 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API
- 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-25 16:37:57 +09:00

2.5 KiB

Raw Permalink Blame History

라벨 팝업 — 다중 유지 + 라벨 추적 이동 + 빈클릭(팝업닫기/재생토글)

날짜: 2026-06-24 수정 파일: client/src/components/overlay/StationOverlay.tsx, client/src/components/player/VideoPlayer.tsx 관련: 2026-06-24_1159_라벨정보-항상활성-호버커서.md

요구 (4가지)

라벨 클릭 시 기존 팝업 닫지 말고 계속 표시(다중).
팝업 있을 때 화면 클릭 → 팝업 닫힘.
팝업 없을 때 화면 클릭 → 재생/정지.
팝업이 라벨처럼 영상 재생에 따라 이동.

구현

다중 팝업 + 라벨 추적(1·4)

infoPopup(단일) → infoPopups: InfoPopup[](id=${kind}:${title}). 라벨 클릭 시 중복 id 아니면 append.
각 팝업 DOM 에 ref 등록(popupElsRef). RAF draw 에서 해당 라벨의 현재 표시좌표(displayedPoiRef/ displayedStRef)로 el.style.left/top 매 프레임 갱신 → 재생 중 라벨 따라 이동. 라벨이 화면에서 사라지면 팝업 visibility:hidden, 재등장 시 표시.
✕ 로 개별 닫기.

클릭 분기(2·3)

Video.js controls:false → 영상이 클릭을 처리 안 함. 캔버스가 모든 클릭을 받아 직접 분기:
- 라벨 클릭 → 팝업 추가.
- 빈 곳 클릭 → 팝업 있으면 모두 닫기(setInfoPopups([])), 없으면 onTogglePlay()(재생/정지).
onTogglePlay prop 신설 → VideoPlayer 의 handleTogglePlay 연결. hasPopupRef로 팝업 유무 판별.
캔버스 커서: 라벨 위 pointer(손) / 그 외 default(화살표) / 편집·보정 move.

입력 처리 단순화

캔버스 pointer-events 를 항상 auto(편집/보정/기본 모두)로 통일 — 이전의 '라벨 위에서만 auto' 토글 제거. 영상은 어차피 클릭 처리 안 하므로 캔버스가 전담. 패널(z-30)·스테이션바(z-20 후순위)는 캔버스 위라 각자 클릭 정상.

동작표

클릭 위치	팝업 유무	결과
라벨	—	팝업 추가(기존 유지)
빈 곳	있음	팝업 전체 닫기(재생 토글 안 함)
빈 곳	없음	재생/정지 토글

검증

npm run build -w client (node20) tsc + vite build 통과.

참고

팝업의 '거리' 값은 클릭 시점 고정(위치만 추적). 필요 시 RAF 에서 거리도 실시간 갱신 가능.

소요 시간: 약 20분 Context 사용량: input ~470k / output ~9k tokens

2.5 KiB Raw Permalink Blame History