[Pilot Test Analysis System] 주행 이벤트 뷰어 상호작용 및 테마 동기화
• 1 min read
이벤트 구간 탐색 편의성을 높이기 위해 복합 필터링 인터페이스를 추가하고, 시각적 피드백을 강화하기 위해 테마 엔진을 개선했다.
[TypeScript / Interaction] 복합 주행 필터링 인터페이스 및 타임라인 동기화
- 단순 수치 필터링을 넘어 객체 종별, 조향 상태 등 복합 조건을 적용하여 이벤트를 추출하는 기능을 구현했다.
- 프론트엔드 스토어 필터 조건을 백엔드 복합 필터 페이로드와 정확하게 매핑하도록 API 전송 규격을 확장했다.
- 추출 이벤트 구간과 비디오 플레이어 간 발생하는 시간 단위 불일치 현상을 해결하기 위해 오프셋 값을 직접 주입하는 동기화 보정 로직을 적용했다.
- 심층 분석 모달 내 타겟 분석 실행 상태(대기, 진행 중, 완료, 오류)를 렌더링해 분석 파이프라인 진행률을 상시 모니터링할 수 있는 기반을 마련했다.
[React / Theme Engine] 다중 컨텍스트 독립 테마 및 클래스 색상 매핑
- 레이더와 텔레메트리 차트가 단일 테마를 강제 공유함에 따라 특정 지표 가시성이 하락하는 문제를 해결했다.
- 레이더와 차트가 각자 독립된 라이트·다크 테마를 적용하도록 전용 스위치 패널을 배치하고 스토어 프로필을 분리했다.
- 객체 클래스 식별자별로 마커 색상을 개별 지정하는 팔레트를 도입하고, 렌더러가 설정값을 실시간 구독해 캔버스를 갱신하도록 적용했다.
- 레거시 평면 테마 설정을 신규 구조체 형식으로 자연스럽게 전환하는 대체 구조를 적용하여 하위 호환성을 유지했다.