Files

T

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>

2026-06-25 16:37:57 +09:00

4.5 KiB

Raw Permalink Blame History

구조물 시설종별(1종/2종/3종) 표시 필터

소요 시간: 약 9분 (기능개발 에이전트 기준) Context 사용량: input ~추정 / output ~100k tokens (subagent_tokens 100,287 기준)

작업 개요

구조물(교량/터널/구교)의 시설종별(1종/2종/3종) 에 따라 재생바(StationBar)와 경로 패널(RoutePanel)의 표시를 필터링하는 기능을 추가했다. 플레이어에 1/2/3종 체크박스를 두어 사용자가 종별 노출을 즉시 토글할 수 있고, 선택 상태는 localStorage 에 지속된다.

작업 배경 (사용자 요청)

교량 등 3종 구조물이 너무 많아 재생바·패널이 혼잡 → 기본적으로 3종은 숨기고 싶다는 요청
시설종별 1종/2종/3종을 체크박스로 켜고 끄는 토글 UI 요구
기본값은 1종 ☑ / 2종 ☑ / 3종 ☐ (3종만 기본 숨김)

변경 / 신설 파일과 핵심 내용

client/src/types/geo.ts (변경)

RouteStructure 에 grade?: string 추가 (시설종별 원문 문자열, 예: "3종", "2종", "기타")

client/src/utils/geoData.ts — parseStructures (변경)

pushFrom spec 에 gradeFallback(시설종별 컬럼 위치 인덱스) 추가
시설종별을 헤더명 '시설종별' indexOf 우선 + 위치 인덱스 폴백으로 읽음
- 교량: 시설종별 = idx 1
- 터널: 시설종별 = idx 5
- 구교(06): 시설종별 컬럼 없음 → gradeFallback 미지정 → grade = undefined
읽은 값은 trim, 빈 문자열이면 undefined 로 정규화

client/src/store/settingsStore.ts (신설)

zustand + persist 미들웨어, 저장 키 'ghivideo.settings'
gradeFilter 기본값 { '1종': true, '2종': true, '3종': false }
setGradeFilter(grade, visible) 액션
KNOWN_GRADES(['1종','2종','3종']) 와 공유 표시 규칙 isGradeVisible export
merge 로 저장본에 누락된 키를 기본값으로 보충 (버전 호환)

공유 표시 규칙 — isGradeVisible

!grade || !KNOWN_GRADES.includes(grade) || gradeFilter[grade]

grade 없음(구교 등) → 항상 표시
grade 가 KNOWN 미포함('기타'/'인상' 등) → 항상 표시
1/2/3종 → gradeFilter[grade] === true 일 때만 표시

client/src/stationbar/StationBar.tsx (변경)

storeStructuresRaw 를 isGradeVisible 로 필터(useMemo, gradeFilter 구독) → structureMarks 가 필터된 목록을 사용

client/src/components/overlay/RoutePanel.tsx (변경)

filteredPois 에 isGradeVisible 조건 추가(동일 규칙, gradeFilter 구독)

client/src/components/player/VideoPlayer.tsx (변경)

좌하단 컨트롤 그룹의 배속 행 아래에 "시설등급" 라벨 + 1/2/3종 체크박스 3개
노출 조건: showVideoControls && geoLoaded
각 체크박스는 setGradeFilter 에 바인딩 → 즉시 토글 반영

시설종별 파싱 요약

구분	파일(03/04/06)	시설종별 컬럼	결과
교량	03)교량	`idx 1` (헤더 '시설종별' 우선)	grade = "3종"/"기타" 등
터널	04)터널	`idx 5` (헤더 '시설종별' 우선)	grade = "2종" 등
구교	06)구교	없음	grade = undefined (항상 표시)

기본값 / 지속

기본값: 1종 ☑ / 2종 ☑ / 3종 ☐
localStorage 키 'ghivideo.settings' 로 선택 상태 지속 (zustand persist)
UI 위치: 플레이어 좌하단 컨트롤(배속 행 아래), showVideoControls && geoLoaded 일 때 노출

실데이터 분포 (하행)회덕-대전조차장 데이터, v2.0, 좌표필터 적용 후)

교량 12건: 시설종별 3종 ×10, 기타 ×2 ("인상" 1건은 깨진 좌표로 이미 필터됨)
터널 2건: 시설종별 2종 ×2
구교 9건: 시설종별 컬럼 없음 → grade undefined(항상 표시)
기본값(1종☑2종☑3종☐) 적용 시: 3종 교량 10건 숨김, 기타 교량 2건 · 터널 2건(2종) · 구교 9건 표시

빌드 결과

nvm use 20 → npm run build -w client → tsc && vite build
에러 0 (기존 chunk > 500kB 경고만, video.js 특성상 정상)

검수 포인트 / 후속 과제

1종 데이터 부재: 이 데이터엔 1종 구조물이 없어 1종 체크박스의 실제 토글 효과는 1종이 포함된 다른 데이터로 검증 권장(필터 구조 자체는 완성)
StationOverlay 미적용: 영상 위 측점 마커(StationOverlay)는 structures 를 사용하지 않으므로 필터 미적용 — 요구 범위(재생바/패널)대로

4.5 KiB Raw Permalink Blame History Unescape Escape