b23042andClaude Fable 5
d38b842e8d
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제. (node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외) Co-Authored-By: Claude Fable 5 <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
|