Files
GhiVideo_v4/docs/history/2026-06-25_1010_스테이션바-라벨-2줄-균등분할.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.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자)·괄호 처리 방식은 조정 가능.