- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel - 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API - 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1.5 KiB
1.5 KiB
스테이션바 구조물명 라벨 2줄 균등 분할
소요 시간: 15분 Context 사용량: input 약 350k / output 약 25k tokens
요청
스테이션바 항목 이름이 2줄로 표출될 때 위/아래 글자 수가 최대한 같게 배치(옆 라벨과 간격 최대 확보).
조치
- Timeline.tsx
splitStructLabel추가- 추정 폭 ≤ 8.2자(≈140px/16.5px, CJK 1.0·기타 0.55)면 1줄 유지.
- 길면 글자수 절반 지점에서 2줄 분할(균등) → 최대 줄 폭 최소화.
- 분할점이 괄호
(...)내부를 가르면 괄호 시작 앞으로 이동(괄호 통째 아랫줄). - 라벨 렌더:
lines.length===1 ? text : <>{l0}<br/>{l1}</>.
- Timeline.module.scss
.structNamewidth:140px자동 줄바꿈 →width:max-content; max-width:140px; white-space:nowrap.- JS가
<br>로 줄을 제어하므로 word-break/line-clamp 제거. 박스가 내용 폭에 맞게 줄어 간격 확보.
검증
- 한국철도공사대전조차장역 → 한국철도공사 / 대전조차장역 (6/6)
- 법동가도교(상,인상,고속) → 법동가도교 / (상,인상,고속)
- 회덕제1가도교(인상) → 회덕제1가도 / 교(인상) (6/5)
- 회덕화물역·신대천교(복)·회덕터널(상) 등 → 1줄
tsc통과, 클라이언트 재빌드, pm2ghiVideo재기동, HTTP 200.
비고
- 한 줄 임계값(8.2자)·괄호 처리 방식은 조정 가능.