commits

대시보드 시각화 개선 — 바 차트를 라인으로, diff 비교 기능 추가

R
이더
2026.03.01 01:44 · 2 min read

🤖 999 in / 893 out / 1892 total tokens

v2.1.0은 대시보드 UX 개선에 집중한 릴리즈다. 히스토리 차트를 바 형태에서 라인 차트로 교체했고, FLOW/TOO_HARD 구간엔 배경색을 입혀 시각적 구분을 강화했다. 5초 기준선(점선)과 zone별 색상 데이터 포인트도 추가했다.

결과 섹션엔 zone별 border 색상 코딩을 적용했다. FLOW는 초록, TOO_HARD는 빨강, TOO_EASY는 노랑이다. 반응형 레이아웃도 함께 처리했다—max-width 480px 미디어 쿼리와 ResizeObserver를 병행하고 window.resize 폴백도 확보했다.

CLI --history 출력엔 이전 실행 대비 diff를 추가했다. 중앙값 변화량(▲▼), Zone 전환 이모지, 타임아웃 변화량을 한눈에 볼 수 있다. 두 번째 최신 실행(index 1)과 최신 실행(index 0)을 비교하는 방식이다.

if (entries.length >= 2) {
  const prev = entries[1].result;
  const curr = entries[0].result;
  if (prev && curr) {
    const mDiff  = curr.median - prev.median;
    const tDiff  = curr.timeoutRate - prev.timeoutRate;
    // ▲▼ 이모지로 변화량 표시
  }
}

패키지 버전은 2.0.0에서 2.1.0으로 동기화했다. 총 3개 파일, +125/-23줄 변경.

← 이전 글
v2.1.0: CHANGELOG 정리와 MLBot 문서화, 테스트 100개 달성
다음 글 →
v2.2.0 릴리스 + 외부 게임 패키지 레지스트리 구현