b23042andClaude Opus 4.8
e9052143d7
스테이션바/측점(체이니지) - 역 재진입 마커 누락 수정: 측점기준 탐지에 좌표근접(pxPassesTo) 합집합 보강(중복 24px 제거) - kmExists 판정: 좌표 반경만으로 잡힌 통과는 측점값 라벨/검색에서 제외(마커 동그라미는 유지) - 측점값 라벨 겹침 숨김(좌측 우선), 동일항목 브래킷 클러스터 - 측점 검색 순환(통과방향 다음→끝에서 처음), 마커 기준 후보 산출, 입력값 유지/blur 삭제 - 연속 체이니지 수직투영 유틸 분리(client/src/utils/chainage.ts), Minimap 컴포넌트 추가 영상 컨트롤 UI - 선형/드론궤적/좌측패널 토글을 재생바로 통합(settingsStore 공유·persist) - 드론 GPS·고도 HUD 상시 표시, 경로표고·투명도 항상 노출, 겹침제외 버튼 숨김 - 재생바 요소 재배치(좌측패널→선형→드론궤적→드론위치정보→시설등급), 활성색 amber 통일 문서/도구 - 종합 기술명세서(인계+특허 기초) md/html/pdf 3종, UI개선 보고서 3종 - md→html→pdf 변환 스크립트(scripts/md2docs.sh) + 스타일(docs/assets/report.css) - 작업 히스토리 다수 추가(docs/history/) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
3.9 KiB
3.9 KiB
작업 보고서 — 주행영상 플레이어 스테이션바/UI 개선
- 작성일: 2026-06-29
- 대상: 스테이션(측점) 기반 주행영상 플레이어 (GhiVideo)
- 범위: 하단 스테이션바 마커 정확도 개선, 영상 컨트롤 UI 재구성, 표시 일관성 정리
1. 개요
하단 스테이션바의 측점 마커 표시 정확도 문제 2건을 수정하고, 영상 화면의 표시 옵션 컨트롤을 재생바로 통합·정리하여 조작 동선을 단순화했습니다. 또한 활성 상태 색상을 통일해 UI 일관성을 높였습니다.
2. 버그 수정 (정확도)
2-1. 역(驛) 재진입 시 마커 누락 수정 ★
- 현상: 대전조차장처럼 드론이 같은 역을 두 번 지날 때, 한쪽 통과(예: 측점 162k080)에 역 마커(동그라미)가 표시되지 않음.
- 원인: 역 마커를 '측점선 투영값' 한 가지 방식으로만 탐지 → 종점/조차장처럼 선형이 복잡한 구역에서는 투영 오차로 일부 통과가 인정 범위(±20m) 밖으로 벗어나 누락.
- 조치: 측점 기준 탐지에 좌표 근접 탐지를 합집합으로 보강(중복은 자동 제거). 누락되던 재진입 통과까지 마커가 정상 표출.
- 효과: 동일 역 다중 통과 구간의 마커 신뢰도 향상.
2-2. 측점값 라벨 겹침 정리
- 현상: 근접 통과 시 측점값(예: 157k990) 텍스트가 서로 겹쳐 판독 불가.
- 조치: 라벨이 시각적으로 겹치면 먼저 나온(좌측) 값만 표시하고 뒤엣값은 숨김(아이콘·연결 점선은 유지).
- 효과: 측점값 가독성 확보.
3. UI/UX 개선 (영상 컨트롤 재구성)
기존에 '화면표시 옵션' 창에 흩어져 있던 표시 토글을 하단 재생바로 통합하여, 영상을 보면서 바로 켜고 끌 수 있도록 동선을 개선했습니다.
3-1. 표시 토글을 재생바로 이동
- 선형(중심선), 드론 궤적, 좌측 노선 패널 토글을 재생바 버튼으로 이동.
- 기존 '화면표시 옵션' 창의 중복 버튼은 제거(기능은 동일, 단일 위치로 일원화).
- 상태를 설정 저장소로 통합 → 어디서 켜도 즉시 반영되고 새로고침해도 유지.
3-2. 항상 표시 항목 정리
- 드론 GPS·절대고도 정보: ON/OFF 버튼 제거하고 상시 표시로 변경(요청사항).
- 경로 표고 / 투명도 슬라이더: 드론 궤적 ON/OFF와 무관하게 항상 노출.
3-3. 재생바 요소 배치 정리
- 최종 순서: 좌측 패널 → 선형 → 드론궤적 → 드론 위치정보(GPS·고도) → 시설등급
- 드론 궤적 버튼과 드론 위치정보를 인접 배치, 시설등급 옵션을 그 우측에 배치.
- 잘 쓰지 않는 'POI 겹침제외' 버튼은 숨김(기능/상태는 보존, 기본 ON).
3-4. 활성 상태 색상 통일
- 제각각이던 활성(ON) 색(파랑/초록/빨강/하늘색)을 앰버(겨자·오렌지 계열)로 통일 → UI 일관성 향상.
4. 운영 메모 (배포 방식)
- 사용자 화면(포트 55000)은 빌드 결과물을 서빙하는 구조로, 소스 수정 후 클라이언트 빌드 → 새로고침해야 반영됩니다. (이번 작업 중 빌드 누락으로 변경이 보이지 않던 이슈를 확인·정리)
- 데이터(드론 프레임/POI)는 폴더 선택으로 로드되므로, 새로고침 시 폴더 재선택 필요.
5. 검증
- 모든 변경 TypeScript 타입검사 + 프로덕션 빌드 통과.
- 역 재진입 마커 표출은 실제 화면(55000)에서 표시 확인 완료.
6. 향후 참고(선택 개선안)
- 측점값 라벨 폭 추정 상수는 폰트 변경 시 재조정 필요.
- 활성 색조(앰버 명도)는 가독성에 따라 미세 조정 가능.
- 'POI 겹침제외'는 현재 숨김 상태이므로, 재노출이 필요하면 토글 복원 가능.