| 1234567891011121314151617181920212223242526272829303132333435 |
- # 대시보드(매출·주문·정산) 개발
- **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
|
