[Pilot Test Analysis System] 멀티 채널 비디오 동기화 및 쿼드런트 대시보드 아키텍처 구축

이전 개발 페이즈에서는 시스템의 상태가 단일 모놀리식 스토어로 관리되어, 사소한 텔레메트리 업데이트에도 전체 UI 리렌더링이 발생하는 성능 병목이 존재했다. 비디오 렌더링 시 React의 상태 갱신 주기에 묶여 무한 Seek 루프 현상이 나타났으며, 현장에서 수집된 액션캠의 H.265 코덱 영상이 브라우저 호환성 문제로 재생되지 않는 물리적 한계까지 겹쳐 분석 업무에 큰 지장을 주었다. 이에 H.264 인코딩 파이프라인을 적용하고, 쿼드런트 기반의 모듈화된 대시보드 아키텍처를 도입하였다.

[Zustand / State] 3-Tier 상태 아키텍처 및 렌더링 최적화

• 비대해진 전역 상태를 역할에 따라 useAppStore(공통 UI), useDashboardStore(지도 필터링), useVideoStore(세션 및 재생 시간)로 분리하여 상태 오염과 불필요한 렌더링을 방지함.
• Zustand의 Selector 패턴을 적극 활용하여 고빈도로 업데이트되는 masterTime 상태가 전체 UI의 리렌더링을 유발하지 않도록 최적화함.

[React / Video DOM] 2x2 쿼드런트 레이아웃 및 4채널 동기화 컨트롤

• 비디오 렌더링 호환성을 위해 액션캠 기반 H.265 코덱 영상을 웹 범용 H.264로 자동 변환하는 인코딩 단계를 실증 파이프라인에 추가함.
• VideoPlayerPage를 [지도 | 4채널 서브 비디오] 및 [텔레메트리 차트 | 마스터 비디오] 형태의 2x2 쿼드런트 레이아웃으로 개편하여 4분할 화면 표출 효율성을 극대화함.
• MasterVideo 컴포넌트를 재생 시간의 기준(Time Driver)으로 설정하고, React의 렌더링 사이클을 우회하여 비디오 DOM 객체의 currentTime을 직접 폴링하는 방식으로 무한 Seek 루프 및 끊김 현상을 해결함.
• SubVideo 컴포넌트(Front, Rear, Left, Right)는 전역 masterTime을 구독하며, 여러 비디오 세그먼트 간의 전환 시 공백 처리와 자동 이어보기 로직을 연동함.

[React / Leaflet] 세션 필터링 모달 분리 및 공간 기반 매핑(Map Picker)

• react-select 및 react-datepicker를 도입하여 태그(Tag) 및 시간 기반의 복잡한 세션 필터링 기능을 모달 형태로 분리(SessionModal)함.
• 관리자가 개별 주행 세션을 특정 사고 다발지(Hotspot)와 매핑할 수 있도록 MapPickerModal을 구현하였으며, 지도 팝업 내에서 바로 비디오 플레이어로 딥링킹(Deep-linking)되도록 UI 흐름을 개선함.