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

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

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

• 비대해진 리포트 모듈 내 혼재된 파일들을 관리자(Admin), 주행 세션(Session), 분석 리포트(Report) 모듈로 분리해 프론트엔드 폴더 구조 직관성을 개선했다.
• 대용량 데이터를 다루는 관리자 인터페이스에 사이드바 레이아웃을 적용하고, 다중 세션 일괄 제어를 위한 배치 작업 기능을 구현했다.
• 위치 데이터 매핑(Mapping) 액션을 분석 리포트 상세 화면 내부로 통합하고 재생 인터페이스를 통합해 분석 흐름 복잡도를 줄였다.

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

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

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

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

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

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