Files
GhiVideo_v4/docs/history/2026-06-24_2025_라벨폭1줄확대+팝업물결제거.md
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.3 KiB
Raw Permalink Blame History

스테이션바 라벨 폭 확대(짧은 명칭 1줄) + POI 팝업 1배속 물결 제거

날짜: 2026-06-24 수정 파일: client/src/stationbar/components/Timeline/Timeline.tsx, client/src/stationbar/components/Timeline/Timeline.module.scss, client/src/components/overlay/StationOverlay.tsx

A. 짧은 명칭은 한 줄로

증상: "법동가도교 (하)" 처럼 한 줄에 들어갈 명칭이 2줄로 줄바꿈됨(폭 92px 가 좁아서).

  • .structName width 92→140px (≈8자 1줄). 긴 명칭만 2줄로 래핑.
  • 겹침 방지: dedup(structures, 90→130) (라벨 폭에 맞춤).

B. POI 팝업 1배속 물결(떨림) 제거

증상: 1배속 재생 시 팝업(큰 텍스트 박스)이 물결침. 원인: 라벨의 잔떨림 + 매 프레임 소수픽셀 위치 갱신 → 텍스트 안티앨리어싱 셰이딩이 물결로 보임.

  • 팝업 위치에 별도 EMA(α=0.18, 무겁게) 적용(popupPosRef) + 정수 픽셀 반올림(Math.round). → 라벨을 따라가되 잔떨림은 흡수, 소수픽셀 셰이딩 제거. (팝업 제거 시 ref 정리)
  • 팝업은 정보 박스라 약간의 지연은 무방.

검증

  • npm run build -w client (node20) tsc + vite build 통과.

소요 시간: 약 12분 Context 사용량: input ~1290k / output ~6k tokens