Files

b23042 819065a8f5 UI 수정

기획안 반영 및 보완

2026-06-19 14:40:47 +09:00

작업 로그 — DefVideo 폴더-구동 UI & StationBar

날짜: 2026-06-18
작성 시각: 11:29 KST
작업 타이틀: 폴더 선택 기반 데이터 구동화 + videoplayer RouteInfo 디자인 이식 + StationBar 이정 표시/레이아웃 정리
대상: /home/hanmac/projects/gitea/b23042/DefVideo
토큰 사용량(추정): 오케스트레이터 input ~250k / output ~45k · 서브에이전트: Explore(파일흐름) ~40k, Explore(StationBar 감사) ~80k, DEV(폴더구동 구현) 55.5k(측정) · 총 추정 ≈ 470k tokens

정확 집계 도구가 없어 추정치(CLAUDE.md 규칙 준수).

작업 요약 (변경 파일)

파일	변경
`client/src/utils/geoData.ts`	`parseRouteMeta()` 추가 — `<base>.route.json`/`route.json` 파싱
`client/src/types/geo.ts`	`RouteMeta/RouteInfo/RouteStructure` 타입, `FolderGeoData.routeMeta`
`client/src/store/geoStore.ts`	`routeMeta` 상태 + 로드/clear
`client/src/stationbar/StationBar.tsx`	서버 fetch→geoStore, 커서 배지 10m(chain), 턴 라벨 10m·기본 100m, 구조물/터미널명 폴더화
`client/src/stationbar/components/Timeline/Timeline.tsx`	하드코딩 신탄진/대전 제거 → props
`client/src/components/overlay/RoutePanel.tsx`	양끝 라벨 route.json 이름
`client/src/components/overlay/RouteInfoOverlay.tsx`	좌상단 노선 배너(폴더-구동, videoplayer 디자인 이식, 폭/1920 스케일)
`client/src/components/overlay/RouteInfo.module.css`	videoplayer RouteInfo 스타일 이식
`client/public/assets/title-panel-bg@2x.png`	배너 배경 에셋 복사
`client/src/components/player/VideoPlayer.tsx`	영상 fill(꽉 채움)+오버레이 앵커, StationBar 폴더로드 후 표시, 도구 패널 UI 숨김, 배너 추가
`client/src/hooks/useVideoPlayer.ts`	Video.js `fluid`→`fill`
`client/src/index.css`	`.vjs-fill/.vjs-tech { object-fit: cover }`
`client/src/App.tsx`	좌·우 패널 UI 숨김(코드 보존, SHOW_*_PANEL)
`samplevideo/하행)회덕-대전조차장.route.json`	보조 메타데이터 샘플 생성
`agent-docs/feature-folder-load.md`, `feature-stationbar-folder-driven.md`	설계/검수 문서

원칙: 모든 표시 데이터는 선택한 폴더에서 가져온다(하드코딩 0). CSV에 없는 정보(노선명·방향·시종점 역명·구조물)는 <영상명>.route.json으로 보완. mock/dead 코드는 삭제하지 않고 보존.

Q. 실행방법 / 에러 있어 → Node 12 → ?? SyntaxError. nvm으로 Node 20 설치, .nvmrc, 의존성 재설치.
Q. ecosystem 환경설정 역할 / 상대경로화 → env가 config.ts/geo로 주입됨을 설명. 절대경로→__dirname 기준 상대경로, ffmpeg는 PATH 명령어로 변경.
Q. PM2 errored → ffprobe ENOENT(FFmpeg 미설치) → 설치. 이후 false 경고는 checkFFmpegInstalled가 -version 출력을 JSON.parse 하던 버그 → exit code 확인으로 수정.
Q. 한글 깨짐 → 파일명이 CP949 인코딩. iconv로 UTF-8 일괄 변환.
Q. 클라이언트 빌드 실패 → Vite8(rolldown) manualChunks 객체→함수.

Q. 에이전트 여러 개로 속도 올릴 수 있나 / 3개(개발·문서·검수) 구성 → 서브에이전트 병렬·파이프라인 설명. 순서는 설계문서화→개발→테스트→검수로 합의, 문서·토큰 기록 병행.

Q. "파일 선택"으로 영상 고르면 같은 폴더+building 데이터도 읽어 화면 세팅 → 브라우저 단일파일 보안 제약 설명, 폴더 선택(webkitdirectory) 클라이언트 처리 방식 선택. geoData/geoStore로 폴더 파싱 구현.
Q. 측점 패널 안 보임 → StationBar가 리팩터링서 누락(서버 fetch 잔존) → geoStore 연결.
Q. 폴더 선택 시 업로드되나 → 아니오. webkitdirectory의 브라우저 경고 문구일 뿐, 전송 없음(전부 브라우저 메모리 파싱).
Q. "파일 선택" 제거, 가운데 반투명 폴더 선택 버튼 → 적용.
Q. 하단 도구 패널 collapse / 이후 UI에서 숨김 → SHOW_TOOLBAR=false(코드 보존).
Q. 모든 데이터 폴더에서, 없는 건 route.json → StationBar 완전 폴더-구동화(Explore 감사 → route.json 도입 → 구현).

Q. 좌상단 노선정보 표시(폴더 데이터) → RouteInfoOverlay(이모지) 1차 → 느낌 다름 → videoplayer RouteInfo 디자인(배경이미지+절대좌표) 1:1 이식 → 크기 차이 → 영상폭/1920 비율 스케일 적용.
연장=route.json 우선, 없으면 측점 구간 계산 / 소요=route.json 우선, 없으면 영상 길이 / 방향·노선명=route.json.

Q. 커서 값 10m 단위 표현 → chain(연속 체이니지) + formatMileage10로 10m.
Q. 드론 정지 시 값 고정이 실제 위치 반영? → 맞음. 배지=프레임 GPS 투영(값), 커서 위치=시간 진행(px). 정지 시 GPS 불변→값 고정, 시간 흐름→커서 이동.
Q1. 바 라벨도 폴더 데이터 파싱한 것? → 예. 측점선은 측점 위경도 CSV, 라벨/체이니지는 프레임 GPS를 측점 폴리라인에 투영한 값(둘 다 폴더 CSV 파싱). [StationBar.tsx kmLabels]
Q2. 기본 100m, 실제 턴 지점은 10m → bounds에 turn 플래그, 턴 라벨=formatMileage10(10m), 시·종점=100m. (이번 작업)