[Pilot Test Analysis System] 프론트엔드 상태 관리 및 타입 시스템 고도화

비디오 플레이어와 일간 리포트 대시보드 컴포넌트의 복잡해진 상태 관리 및 비즈니스 로직을 분리했다. 기존 단일 상태 스토어가 여러 도메인의 설정을 동시에 관리하면서 발생하던 결합도를 낮추고, 런타임 에러를 방지하기 위해 엄격한 타입 시스템을 도입했다. 추가적으로 지도 기반 시각화 컴포넌트의 렌더링 방식을 개선하고, 분석 모달의 타임라인 동기화 로직을 보완했다.

[React / State Management] 도메인 특화 상태 스토어 분리 및 스트랭글러 패턴

• 기존에는 단일 스토어가 차트, 레이더, 통계 등 모든 UI 테마 상태를 관리하여 모듈 간 강한 결합과 유지보수 병목이 발생했다.
• 인터페이스 분리 원칙을 적용해 차트, 레이더, 통계용 개별 스토어로 분리하고, 기존 단일 스토어는 파사드 역할만 하도록 스트랭글러 패턴을 적용했다.
• UI 컴포넌트가 각 도메인 설정에만 의존하게 되어 코드의 응집도와 유지보수성이 향상되었다.

[TypeScript / Types] 타입 캐스팅 제거 및 도메인 인터페이스 엄격화

• 외부 API 응답 및 DOM 요소 조작 시 암묵적인 타입 캐스팅(as any)을 남용하여 빌드 타임 검증이 누락되는 문제가 있었다.
• 데이터 인터페이스 및 리포트 API 응답, 에러 핸들링 객체에 명시적인 타입을 선언하여 타입 캐스팅을 전면 제거했다.
• 런타임 타입 에러 발생 가능성을 차단하고, 데이터 구조 변경 시 컴파일 타임 추적성을 확보했다.

[React / UI] 비디오 플레이어 비즈니스 로직 분리 및 지도 마커 렌더링 개편

• 비디오 플레이어 페이지 내부에 세션 데이터 조회 및 타임라인 동기화 로직이 섞여 있어 컴포넌트 복잡도가 높았다.
• 세션 관리 커스텀 훅을 분리하여 API 통신 및 타임라인 오프셋 처리 로직을 중앙화하고, 페이지 컴포넌트는 UI 구성에만 집중하도록 역할을 나눴다.
• 지도 마커를 단순 문자열 기반으로 렌더링하던 방식을 React 서버 사이드 렌더링 기반 컴포넌트로 변경하여 확장성을 확보했다.