Files
GhiVideo/docs/history/2026-06-25_1010_스테이션바-라벨-2줄-균등분할.md
T
b23042andClaude Opus 4.8 78fc090360 초기 커밋: 스테이션(측점) 기반 주행영상 플레이어
- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel
- 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API
- 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-25 16:37:57 +09:00

1.5 KiB

스테이션바 구조물명 라벨 2줄 균등 분할

소요 시간: 15분 Context 사용량: input 약 350k / output 약 25k tokens

요청

스테이션바 항목 이름이 2줄로 표출될 때 위/아래 글자 수가 최대한 같게 배치(옆 라벨과 간격 최대 확보).

조치

  1. Timeline.tsx splitStructLabel 추가
    • 추정 폭 ≤ 8.2자(≈140px/16.5px, CJK 1.0·기타 0.55)면 1줄 유지.
    • 길면 글자수 절반 지점에서 2줄 분할(균등) → 최대 줄 폭 최소화.
    • 분할점이 괄호 (...) 내부를 가르면 괄호 시작 앞으로 이동(괄호 통째 아랫줄).
    • 라벨 렌더: lines.length===1 ? text : <>{l0}<br/>{l1}</>.
  2. Timeline.module.scss .structName
    • width:140px 자동 줄바꿈 → width:max-content; max-width:140px; white-space:nowrap.
    • JS가 <br>로 줄을 제어하므로 word-break/line-clamp 제거. 박스가 내용 폭에 맞게 줄어 간격 확보.

검증

  • 한국철도공사대전조차장역 → 한국철도공사 / 대전조차장역 (6/6)
  • 법동가도교(상,인상,고속) → 법동가도교 / (상,인상,고속)
  • 회덕제1가도교(인상) → 회덕제1가도 / 교(인상) (6/5)
  • 회덕화물역·신대천교(복)·회덕터널(상) 등 → 1줄
  • tsc 통과, 클라이언트 재빌드, pm2 ghiVideo 재기동, HTTP 200.

비고

  • 한 줄 임계값(8.2자)·괄호 처리 방식은 조정 가능.