Files

T

b23042andClaude Fable 5 d38b842e8d GhiVideo 소스 복제 — v4 작업 시작 기준

기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제.
(node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

2026-07-09 14:32:51 +09:00

2.5 KiB

Raw 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 Blame History