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>
48 lines
2.5 KiB
Markdown
48 lines
2.5 KiB
Markdown
# 라벨 팝업 — 다중 유지 + 라벨 추적 이동 + 빈클릭(팝업닫기/재생토글)
|
|
|
|
**날짜**: 2026-06-24
|
|
**수정 파일**: `client/src/components/overlay/StationOverlay.tsx`, `client/src/components/player/VideoPlayer.tsx`
|
|
**관련**: [2026-06-24_1159_라벨정보-항상활성-호버커서.md](2026-06-24_1159_라벨정보-항상활성-호버커서.md)
|
|
|
|
## 요구 (4가지)
|
|
1. 라벨 클릭 시 기존 팝업 닫지 말고 계속 표시(다중).
|
|
2. 팝업 있을 때 화면 클릭 → 팝업 닫힘.
|
|
3. 팝업 없을 때 화면 클릭 → 재생/정지.
|
|
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
|