# 대시보드(매출·주문·정산) 개발 **Task ID:** T-004 **Status:** DONE **Importance:** MUST **Complexity:** 6/10 **Urgency:** 6/10 **Dependencies:** T-001, T-002 ## Description # 설명 벤더사 및 인플루언서 거래 현황(매출, 주문 수, 정산 완료율)을 집계하고, 차트·기간별 필터링 UI로 시각화합니다. ## 구현 상세 1. DB 집계 쿼리(CI4) - 월별/일별 매출, 주문 수, 정산 완료율 계산용 뷰 또는 Stored Procedure 작성 - Redis 캐싱으로 조회 성능 최적화 2. Backend API(CI4) - `DashboardController`에서 `getMetrics(filterParams)` 메서드 구현 - BFF(Node.js)로 `GET /dashboard/metrics` 엔드포인트 작성, 캐시 미들기 및 파라미터 검증 추가 3. Frontend(Nuxt3 + Chart.js 또는 Vuetify Chart) - 대시보드 페이지 컴포넌트 개발, Chart.js 플러그인(useChart composable) 활용 - 기간/파트너별 드롭다운 필터링, 로딩 상태, 에러 핸들링 UI 구현 - 코드 스플리팅(dynamically import)으로 초기 로드 최적화 4. 반응형 디자인 및 접근성(WCAG 2.1 AA) 적용 ## 테스트 전략 - Backend 단위 테스트: 집계 로직 정확성, 캐시 사용 검증 - API 부하 테스트: 평균 응답 300ms 이하, 동시 1,000 요청 상황에서 95 Percentile 만족 여부 측정 - Frontend Snapshot 테스트: 차트 렌더링, 필터링 동작 검증 - E2E(Cypress): 대시보드 필터링, 데이터 일관성, 반응형 레이아웃 검증 --- **Created:** 2025-07-17T02:02:42.157Z **Updated:** 2025-07-21T06:34:50.862Z