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

**날짜**: 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