[Pilot Test Analysis System] 통계 대시보드 컴포넌트 아키텍처 및 상태 관리

프론트엔드 시스템은 차트 렌더링으로 발생하는 메인 스레드 블로킹 이슈와 모달 컴포넌트의 상태 관리 복잡도 문제를 가지고 있었다. 이를 해결하기 위해 병렬 처리 워커를 도입하고 모달의 역할을 훅 기반으로 분리하여 컴포넌트 응집도를 개선했다.

[TypeScript / Web Worker] 백그라운드 데이터 연산

• 브라우저 메인 스레드가 대량 통계 데이터 기반 커널 밀도 추정 연산을 수행하여 UI 렌더링 지연이 발생하는 문제를 해결했다.
• 브라우저 백그라운드 스레드에서 구동하는 전용 웹 워커를 투입해, 메인 스레드 병목의 원인이던 수치 연산을 위임했다.
• 연산이 비동기 처리되는 동안 차트 렌더링 대기 상태를 직관적으로 표시하는 로딩 오버레이를 추가했다.
• 백그라운드 연산이 완료된 후 React 상태를 일괄 업데이트하여 차트 렌더링 성능을 개선했다.

[React / Component] 다목적 분석 모달 로직 분리

• 분석 상세 모달 컴포넌트 내부에 영상 재생, 키보드 단축키, 태그 편집 등 여러 상태와 비즈니스 로직이 혼재하던 구조를 개선했다.
• 모달 내부에 위치하던 태그 편집 상태와 이벤트 핸들러를 독립된 커스텀 훅으로 변경하여 데이터 처리 로직을 분리했다.
• 영상 재생 제어, 스크롤 동기화, 단축키 처리 등 UI와 무관한 제어 로직을 별도의 동기화 전용 훅으로 격리했다.
• 비즈니스 로직을 분리한 모달 컴포넌트는 주입받은 상태를 기반으로 UI만 렌더링하도록 구조를 변경하여 코드를 간소화했다.

[React / Event System] 계층형 이벤트 필터링

• 조건 검색 기능을 제한하던 기존 이벤트 검색 체계를 변경했다.
• 보행자 상태, 가시성, 비고 등 신규 확장 메타데이터를 기반으로 조건을 설정할 수 있는 다중 드롭다운 컴포넌트를 추가했다.
• 평면 구조이던 이벤트 목록을 계층형 트리 구조로 변경하고, 여러 태그 선택 시 교집합 기반 검색이 수행되도록 상태 관리를 최적화했다.
• 다수의 이벤트를 필터링할 때 발생하는 데이터 로드 성능 저하를 방지하기 위해, 전체 선택 토글 및 필터링 알고리즘 로직을 개선했다.

[React / Data Export] 데이터 추출 유틸리티

• 차트 데이터를 외부에서 검증하거나 보고서로 인용할 수 있는 기능이 부재하던 한계를 해결했다.
• 사용자가 지정한 조건과 일치하는 데이터를 파싱하여 CSV 포맷으로 생성하는 전용 내보내기 모듈을 구현했다.
• 서드파티 프로그램에서 파일 열기 시 문자가 깨지는 인코딩 호환성 문제를 방지하기 위해, 파일 시작 부분에 BOM(Byte Order Mark)을 추가했다.
• 사용자가 내보내기 기능을 쉽게 이용할 수 있도록 차트 패널 상단에 다운로드 버튼을 배치했다.