[Pilot Test Analysis System] 텔레메트리 동적 필터링 및 대용량 비디오 업로드 UX 구축

4월 실증 테스트 과정에서는 H.265 액션캠 영상을 웹 브라우저가 지원하지 않아 범용성 확보를 위해 H.264 강제 인코딩을 수행해야 했으며, 변환된 영상마저 SD카드를 이용해 오프라인으로 수동 이관하는 물리적 제약이 존재했다. 이를 극복하고자 대용량 멀티 업로드 파이프라인을 프론트엔드에 새롭게 연동했으며, 복잡한 인지 반응 데이터를 직관적으로 파악할 수 있도록 텔레메트리 차트의 동적 필터링과 비디오 플레이어 오버레이 기능을 고도화했다.

[Uppy / Zustand] 대용량 비디오 멀티 업로드 파이프라인

• 다중 채널(전방, 후방, 좌/우측) 블랙박스 영상을 브라우저에서 직접 업로드하기 위해 @uppy/core와 XHRUpload를 결합한 VideoUploadDrawer UI 컴포넌트를 구축했다.
• Zustand 기반의 useUploadStore로 청크 전송 상태와 업로드 Progress를 전역 관리하여 대용량 파일 전송 중 발생하는 브라우저의 렌더링 블로킹 현상을 방지했다.

[React / Chart.js] 텔레메트리 차트 동적 필터링 및 커스텀 프리셋

• 사용자가 관심 있는 지표(가감속, 조향각, 보행자 인식 등)만 선택적으로 렌더링할 수 있도록 ChartFilterModal을 추가했다.
• ‘PEDESTRIAN + WARNING’ 또는 ‘PEDESTRIAN + DANGER’ 등 위험 수준에 따른 인식 데이터 필터링 프리셋을 mainOverlayPlugin 오버레이에 구현하여 분석 시나리오 대응 속도를 높였다.
• 차트 툴팁 렌더링 시 부모 컨테이너의 overflow: hidden 속성으로 인해 UI가 잘리던 결함을 React Portal을 사용해 document.body 레벨에서 렌더링되도록 수정했다.

[React / Video Player] 재생 조작 및 오버레이 고도화

• 플레이어 뷰에 usePlaybackShortcuts 커스텀 훅을 적용하여 스페이스바(정지/재생)와 좌우 방향키(1초 탐색) 단축키를 활성화했다. 단, input이나 textarea 입력 중에는 이벤트 타겟 예외 처리를 통해 단축키가 동작하지 않도록 구현했다.
• 4채널 영상 중 특정 채널을 더블클릭할 경우 화면 중앙에 모달 형태로 확대 표출하는 ExpandedVideoOverlay 기능을 도입하여 세부 상황 분석 시의 가시성을 확보했다.

[React / LocalStorage] 테마 상태 영속성 보장

• 시스템 설정(prefers-color-scheme)에 종속되어 강제로 다크모드가 적용되던 기존 렌더링 방식을 탈피했다.
• localStorage에 app-theme 값을 저장하여 초기 렌더링 시 이를 복원하도록 수정함으로써, 페이지 새로고침 후에도 사용자가 선택한 테마 환경이 일관되게 유지되도록 상태 영속성을 부여했다.