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>
1.6 KiB
1.6 KiB
스테이션바 구조물명 — 긴 명칭 2줄 + 첫/마지막 항목 양끝 정렬
날짜: 2026-06-24
수정 파일: client/src/stationbar/components/Timeline/Timeline.tsx,
client/src/stationbar/components/Timeline/Timeline.module.scss
요구
- 스테이션바 구조물명이 길면 두 줄로 표시.
- 첫 항목과 마지막 항목은 바 끝에 위치(끝에서 잘리지 않게).
조치
1) 긴 명칭 2줄 (.structName)
구조물명 라벨에 structName 클래스 추가:
.structName { width:96px; white-space:normal; text-align:center; font-size:12px;
line-height:12.5px; word-break:break-all; overflow-wrap:anywhere;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
- 폭 96px 고정 → 길면 자동 줄바꿈, 공백 없는 한글도 끊어 2줄. 최대 2줄(넘으면 …).
- 폰트 16.5→12px 로 줄여 2줄이 라벨행(26px)에 들어가게.
2) 첫/마지막 항목 양끝 정렬
structs(px 정렬)의 i===0 은 anchorStart(좌측 정렬, 좌끝이 px), 마지막은 anchorEnd(우측
정렬, 우끝이 px) → 가운데정렬 시 바 가장자리에서 잘리던 것 방지(기존 anchor 클래스 재사용).
참고
- 요구2는 "첫/마지막 라벨을 바 끝에서 안 잘리게 정렬"로 해석. 만약 '첫/마지막 시설을 바의 물리적 좌우 끝 좌표로 이동'을 의도했다면 다른 구현 필요(확인 후 조정 가능).
검증
npm run build -w client(node20) tsc + vite build 통과.
소요 시간: 약 12분 Context 사용량: input ~1060k / output ~5k tokens