[Pilot Test Analysis System] ECharts 기반 동적 통계 대시보드 시각화

데이터 분석가가 주행 통계 및 위험 이벤트 분포를 다양한 관점에서 분석할 수 있도록 클라이언트 사이드 기반 동적 대시보드와 유연한 시각화 파이프라인을 구축했다.

[React / Dashboard] 통계 대시보드 및 다이나믹 차트 빌더 구축

• 정적 형태였던 레거시 리포트 체계를 벗어나, 사용자가 원하는 지표를 동적으로 구성해 조회할 수 있는 대시보드 인터페이스를 추가했다.
• JSON 페이로드 기반으로 차트 구성을 동적으로 렌더링하는 공통 차트 컴포넌트를 적용했다.
• 정규 분포, 커널 밀도 추정, 누적 분포 함수 등 통계 분석용 차트 포맷을 추가했다.
• 상대 시간 정규화 기법을 적용해 상이한 세션에서 발생한 이벤트를 동일 타임라인에 겹쳐 두고 정밀하게 비교 분석하도록 구현했다.

[TypeScript / Interaction] 다중 텔레메트리 구간 리사이징 인터페이스

• 사용자가 시계열 차트상 여러 위험 이벤트 구간을 직접 편집하고 미세 조정하는 요구사항을 반영했다.
• 제스처 추적 라이브러리(@use-gesture/react)를 활용해 타임라인 위 다수 구간을 동시 드래그하거나 크기를 조절하는 다중 리사이징 기능을 구현했다.
• 픽셀 좌표 연산 도중 무한대 값이 발산해 렌더러 오류를 방지하기 위해 초기화 단계에 방어 로직을 적용했다.
• 인터페이스 내 드래그 구간 변경 시 즉각 API를 호출해 백엔드 분석 타겟 범위를 실시간 갱신하도록 연동했다.

[React / Architecture] 클라이언트 사이드 필터링 및 인증 연동

• 불필요한 API 왕복을 제거하고 사용자 권한에 따른 안전한 데이터 접근 제어 구조를 적용했다.
• 날짜, 세션, 이벤트가 포함된 계층형 트리 체크리스트 필터를 구축하고, 클라이언트 사이드 즉각 필터링을 수행해 조회 성능을 개선했다.
• 전역 인증 스토어와 연동해 읽기 권한 사용자가 대시보드 차트를 저장하거나 삭제하지 못하도록 UI 접근을 제한했다.
• 차트 선택 상자 렌더링 시 디바이스 픽셀 비율 기반 스케일링 보정 로직을 추가해 고해상도 디스플레이 내 화면 잘림 현상을 해결했다.