b23042andClaude Fable 5
d38b842e8d
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제. (node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
24 lines
1.0 KiB
Markdown
24 lines
1.0 KiB
Markdown
# POI 팝업 ↔ 라벨 겹침 수정
|
|
|
|
**소요 시간**: 약 15분
|
|
**Context 사용량**: input ~60k / output ~4k tokens
|
|
|
|
## 문제
|
|
POI 팝업이 화면 아래쪽에 다가올수록 라벨(십자마커+글자)과 팝업창이 겹치는 문제.
|
|
|
|
## 원인
|
|
[client/src/components/overlay/StationOverlay.tsx](../../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 프로덕션 반영
|