[Pilot Test Analysis System] 렌더링 파이프라인 최적화 및 Report Hub 대시보드 구축

기존 대시보드에서는 수만 건의 세션 데이터를 시각화하고 탐색하는 과정에서, 차트와 지도 컴포넌트가 배열 전체를 순회하면서 극심한 프레임 드랍이 발생했다. 또한 UI 구조가 하드코딩된 이모지와 비표준 클래스명으로 얽혀 있어 유지보수가 어려웠다. 효율적인 데이터 탐색을 위한 Report Hub를 구축하고 컴포넌트 라이브러리 기반으로 디자인 시스템을 전면 개편하였다.

[Leaflet / DOM] 이진 탐색 및 Imperative Update를 통한 렌더링 성능 최적화

• 비디오 재생 프레임에 맞춰 호출되는 Map 컴포넌트(VehicleTrack, GpsTrack)의 필터링 로직에 이진 탐색(Binary Search, O(log N)) 알고리즘을 도입하여 좌표 탐색 병목을 제거함.
• React의 상태(State) 기반 렌더링을 제거하고, useRef를 통해 Leaflet DOM 요소와 마커 객체를 직접 제어(Imperative Update)함으로써 Virtual DOM 갱신에 따른 메모리 누수와 끊김 현상을 방지함.
• uPlot 차트 툴팁의 좌표 이탈 및 깜빡임 문제를 해결하기 위해, 커서의 좌표를 추적하고 requestAnimationFrame을 통해 CSS Transform 위치를 갱신하도록 고도화함.

[React / Dashboard] useReportStore 기반 상태 분할 및 서버사이드 페이지네이션 연동

• 수만 건의 세션 데이터를 효율적으로 조회하고 필터링할 수 있도록 useReportStore 기반의 상태를 구축하고, DashboardHeader, DashboardMain으로 컴포넌트를 분할하여 재사용성을 극대화함.
• 좌측의 사고 다발지 리스트 사이드바를 숨김 처리하고 토글화하여 텔레메트리 그래프와 지도가 차지하는 화면 영역을 넓힘.
• 서버단에서 넘어오는 PagedModel 규격을 온전히 지원하는 ReportTable 컴포넌트를 설계하여 대용량 페이지네이션 성능을 개선함.

[Tailwind CSS / daisyUI] 컴포넌트 모듈화 및 lucide-react 벡터 아이콘 전면 교체

• Tailwind CSS 기반의 daisyUI 플러그인을 도입하여 버튼, 토글, 모달 등의 복잡한 마크업을 모듈화된 유틸리티 클래스로 교체함.
• 하드코딩된 이모지와 텍스트 아이콘을 lucide-react 벡터 아이콘으로 일괄 교체하여 해상도 독립성을 확보하고 일관성을 높임.