Files
GhiVideo_v4/docs/history/2026-07-02_POI팝업-라벨겹침-수정.md
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

1.0 KiB

POI 팝업 ↔ 라벨 겹침 수정

소요 시간: 약 15분 Context 사용량: input ~60k / output ~4k tokens

문제

POI 팝업이 화면 아래쪽에 다가올수록 라벨(십자마커+글자)과 팝업창이 겹치는 문제.

원인

client/src/components/overlay/StationOverlay.tsx 의 RAF 팝업 위치 계산에서 여백 GAP=16 을 라벨 중심(sy, 십자마커 위치) 기준으로 잡음. 라벨 글자·아이콘이 sy 위아래로 ~13px 차지 → 실제 여백은 3px뿐. 하단 위로 플립해도 동일 3px라 계속 겹침.

수정

  • LABEL_HALF=15(라벨 반높이) 도입 → 라벨 바깥 가장자리 기준으로 띄움.
    • 아래: ty = sy + LABEL_HALF + GAP
    • 위 플립: aboveTy = sy - LABEL_HALF - GAP - ph
    • GAP 16→12 (실제 여백 3px → 12px)
  • 초기 렌더 top sy+16 → sy+27 로 맞춰 1프레임 튐 방지.

검증

  • tsc --noEmit 통과
  • npm run build 성공 → :55000 프로덕션 반영