[Pilot Test Analysis System] 대규모 세션 데이터 분석 및 시각화 파이프라인 통합 아키텍처 개편

단일 폴더에 비대하게 뭉쳐있던 프론트엔드 컴포넌트들을 기능별 모듈로 재배치하고, 대용량 주행 세션 데이터 처리와 시각화 렌더링 과정에서 발생하는 성능 병목 현상을 해소했다. 데이터 업로드 파이프라인을 비동기로 전환하고 React 렌더링 스레드의 강제 리플로우(Forced Reflow) 현상을 제거하여 전체적인 시스템 안정성과 상호작용 성능(INP)을 개선했다.

[Architecture / Refactoring] 프론트엔드 기능 모듈 분할 및 UI 아키텍처 개편

• 비대해진 리포트 모듈에 섞여 있던 파일들을 관리자(Admin), 주행 세션(Session), 분석 리포트(Report) 모듈로 분할 및 재배치하여 프론트엔드 폴더 구조의 직관성을 확보했다.
• 대용량 데이터를 다루는 관리자 인터페이스에 사이드바 레이아웃을 전면 도입하고 다중 세션을 한 번에 제어할 수 있는 일괄 처리 기능(Batch Actions)을 구현했다.
• 위치 데이터 맵핑(Mapping) 액션을 분석 리포트 상세 화면 내부로 통합하고 재생 인터페이스를 일원화하여 분석 흐름의 복잡도를 낮췄다.

[Pipeline / Security] 비동기 데이터 파이프라인 구축 및 동적 권한 제어 도입

• 태스크 충돌을 막기 위해 락(Lock) 기반의 분산 백그라운드 제어 시스템을 구축하고, 비디오 업로드 프로세스를 완전한 비동기 파이프라인으로 전환하여 Spring Boot 백엔드의 메인 스레드 블로킹을 해소했다.
• 전역 진행률 추적(Global Progress Tracking) 파이프라인을 도입하여 비동기 작업의 가시성을 확보했다.
• 모든 데이터를 순회하던 주행 세션 재탐색(Rescan) 로직을 타겟 기반의 일괄 연산(Targeted Batch Operations)으로 수정하여 데이터베이스 부하를 낮췄다.
• Spring Security 기반의 관리자 전용 회원가입 엔드포인트를 분리하고, JWT(JSON Web Token) 페이로드에 사용자 역할을 동적으로 주입하는 RBAC(Role-Based Access Control) 아키텍처를 적용했다.

[React / Rendering] 렌더링 파이프라인 개편을 통한 상호작용 성능(INP) 최적화

• EventBus 패턴을 도입하여 타임라인(Time Range) 변경 이벤트를 최상위 컨텍스트에서 분리하고 필요한 컴포넌트만 구독하여 반응하도록 렌더링을 최적화했다.
• 데이터 갱신 사이클과 uPlot 인스턴스의 생명주기를 분리하여, 데이터가 변경되더라도 사용자의 확대/축소 및 패닝(Pan) 상호작용 상태가 유지되도록 제어 흐름을 수정했다.
• 차트 패닝 시 생성되는 타임스탬프를 정수형으로 반올림 처리하여 InfluxDB 쿼리 파싱 에러를 차단하고 극단적인 확대 조작 시 한계치를 적용했다.
• React 컴포넌트 트리에 ErrorBoundary 및 원격 측정 전용 전역 상태(Store Context)를 추가하여 부분적인 차트 렌더링 실패가 전체 화면의 장애로 이어지지 않도록 방어했다.

[Media / Synchronization] 다중 채널 비디오 재생 동기화 로직 최적화

• 비디오 재생 컴포넌트의 마운트 및 일시정지 상태에서, 개별 미디어의 재생 시점을 시스템의 마스터 타임라인 기준으로 강제 동기화하는 파이프라인을 구축했다.
• 연속 재생 중 이미 동기화 궤도에 오른 비디오에 대한 불필요한 미디어 API 호출을 차단하여 브라우저 리플로우를 억제했다.
• 보조 비디오 채널의 동기화 주기를 하향 조정하고 궤적(Map Track) 검증 과정을 최적화하여 렌더링 스레드의 부하를 완화했다.
• 플레이백 모드(Playback Mode) 진입 시 차트의 초기 타임라인을 주행 세션의 실제 시작 시간과 자동으로 정렬했다.