ID: key_26_22_05_25_P3_3_4 Created date: 5월 25 2026 월요일
연관 문서
개발 일정 > Phase 3 UI 개발 | 3-3_대시보드-데이터-API
개요
번다운 차트, Velocity 리포트, CFD 차트를 포함한 리포팅 대시보드 UI를 구현한다.
- 예상 소요: 4~5일
- 선행 조건: 3-3_대시보드-데이터-API 완료, 차트 라이브러리 결정
- 완료 기준: 스프린트 선택 시 번다운 차트 렌더링 확인
Claude Code 작업 수행서
작업 지시
CIRA UI에 리포팅 대시보드 페이지를 구현해줘.
[차트 라이브러리]
- Recharts (권장 — React 친화적)
[수행 작업]
1. 리포팅 페이지 라우팅
/projects/[projectId]/reports/burndown — 번다운 차트
/projects/[projectId]/reports/velocity — Velocity 리포트
/projects/[projectId]/reports/cfd — CFD 차트
공통 레이아웃: 탭 네비게이션
2. 번다운 차트 페이지
파일: src/app/(main)/projects/[projectId]/reports/burndown/page.tsx
컴포넌트: BurndownChart
- 스프린트 선택 드롭다운 (기본: 현재 활성 스프린트)
- 차트 구성 (LineChart):
* X축: 날짜 (스프린트 기간)
* Y축: 남은 스토리 포인트
* 라인 1: 이상적 번다운 (점선, 회색)
* 라인 2: 실제 번다운 (실선, 파란색)
* 오늘 날짜 수직선 (빨간 점선)
- 스프린트 요약: 총 포인트, 완료 포인트, 남은 포인트
3. Velocity 리포트 페이지
파일: src/app/(main)/projects/[projectId]/reports/velocity/page.tsx
컴포넌트: VelocityChart
- 차트 구성 (ComposedChart — BarChart + LineChart):
* X축: 스프린트 이름
* 막대: 커밋 포인트 (회색) + 완료 포인트 (파란색)
* 라인: 평균 Velocity (주황색)
- 마지막 N개 스프린트 선택 (6/10/12)
- 평균 Velocity 카드 (우측 상단)
4. CFD 차트 페이지
파일: src/app/(main)/projects/[projectId]/reports/cfd/page.tsx
컴포넌트: CfdChart
- 차트 구성 (AreaChart — stacked):
* X축: 날짜
* Y축: 이슈 수
* 영역별: 상태 (To Do / In Progress / In Review / Done)
* 색상: 상태별 구분색
- 날짜 범위 선택 (DateRangePicker)
- 리드 타임 및 사이클 타임 표시
5. 개인 대시보드 페이지
파일: src/app/(main)/dashboard/page.tsx
구성:
- 상단 카드 행: 내 할당 이슈 수, 오늘 마감, 이번 주 완료
- 섹션 1: 나에게 할당된 이슈 목록 (컴팩트 테이블)
- 섹션 2: 마감 임박 이슈 (7일 이내, 우선순위 정렬)
- 섹션 3: 최근 활동 타임라인
6. 공통 차트 스타일
- 툴팁 커스터마이징 (날짜 + 포인트 포맷)
- 범례 표시
- 반응형 (ResponsiveContainer)
- 다크모드 지원 (CSS 변수 활용)
7. 데이터 없을 때 Empty State
- "스프린트 데이터가 없습니다" 안내
- 스프린트 생성 바로가기 링크
완료 기준
| 항목 | 기준 |
|---|---|
| 번다운 차트 | 이상/실제 2개 라인 정상 렌더링 |
| Velocity 차트 | 막대 + 평균 라인 렌더링 |
| CFD 차트 | 스택 영역 차트 렌더링 |
| 개인 대시보드 | 4개 섹션 데이터 표시 |
| 반응형 | 모바일에서 스크롤 가능 |