[Pilot Test Analysis System] 반응 동역학 시각화 엔진 및 서버 상태 동기화

반응 동역학 분석 결과가 고도화됨에 따라 다차원 데이터를 효과적으로 표현할 시각화 시스템을 도입했다. ECharts를 활용한 복합 차트 레이아웃을 구축하고, 상태 관리 패턴을 개편하여 서버와 클라이언트 간 데이터 동기화 안정성을 높였다.

[React / State Management] 비동기 데이터 패칭 레이어 개편

• 클라이언트 로컬 상태와 비동기 API 호출 로직이 섞여 있어 로딩 상태 관리와 데이터 캐시 무효화 처리가 비효율적이었다.
• 비동기 전용 외부 상태 관리 라이브러리를 도입하여, 서버 상태와 로컬 상태의 관리를 분리했다.
• 시스템 운영, 리포트 조회, 테마 설정 등 도메인별로 전용 쿼리 훅을 생성하여 흩어져 있던 API 호출 로직을 캡슐화했다.
• 데이터 생성 및 수정 후 연관된 캐시를 자동으로 무효화하도록 설정하여, 불필요한 수동 상태 동기화 코드를 제거했다.

[TypeScript / ECharts] 다차원 반응 동역학 대시보드

• 새롭게 도출된 궤적 데이터와 통계 지표를 한 화면에서 비교 분석할 수 있는 수단이 없었다.
• 커널 밀도 분포, 주행 맥락 산점도, 반응 지연 분포, 속도 및 거리 궤적 등 다차원 데이터를 탭 형태로 쉽게 전환하며 볼 수 있는 차트 컴포넌트를 개발했다.
• 개별 궤적 선형 차트 위에 신뢰 구간 밴드를 다층으로 겹쳐 렌더링하여, 데이터 평균과 분산 범위를 시각적으로 나타냈다.
• 전체 분포 밀도 배경과 개별 관측치 포인트를 동시에 렌더링하는 혼합 차트를 구현했다.

[React / UI Components] 렌더링 애니메이션 결함 수정

• 차트 진입 애니메이션이 실행될 때 동적인 축 범위 재계산으로 인해 라벨이 겹치거나 사라지는 렌더링 버그가 있었다.
• 수직축의 최대값을 동적 계산이 아닌 고정된 상수로 입력하여, 진입 애니메이션 첫 프레임부터 축 스케일이 유지되도록 수정했다.
• 축 제목과 눈금 라벨 간의 여백을 충분히 확보하고, 시각적으로 불필요한 눈금을 숨겨 텍스트 충돌 현상을 방지했다.
• 차트 구성 요소의 색상 테마를 설정값과 동기화하여 다크/라이트 모드 관계없이 적절한 명도 대비를 유지하도록 했다.