[Feat] 진행률 차트 페이지 구현

[JiWoongE]

Pull Request

작업 내용

• 워크스페이스 진행률 차트 페이지를 구현했습니다.
• FSD 구조 기준으로 app / views / features / entities 레이어를 분리했습니다.
• 피그마 시안 기준으로 상단 요약 카드, 전체 진행률 바, 담당자별 업무 현황, 상태 분포 영역을 구성했습니다.
• 진행률 차트 수치가 별도 mock 값이 아니라 프로젝트 관리 task 데이터를 기준으로 집계되도록 연결했습니다.

작업 결과

• /workspaces/test/progress-chart 경로에서 진행률 차트 페이지에 진입할 수 있습니다.
• 전체 업무 / 완료 / 진행 중 수치가 프로젝트 관리 task 기준으로 표시됩니다.
• 전체 진행률 바, 담당자별 막대 차트, 상태 분포 도넛 차트가 렌더링됩니다.
• 피그마와 비교했을 때 전체 비율이 크게 보이던 부분을 줄이면서 카드/차트 크기를 조정했습니다.

변경 사항

Added

• src/app/workspaces/[workspaceId]/progress-chart/page.tsx
• src/views/progress-chart/index.ts
• src/views/progress-chart/ui/ProgressChartPage.tsx
• src/features/manage-progress-chart/index.ts
• src/features/manage-progress-chart/model/progress-chart.ts
• src/features/manage-progress-chart/ui/ProgressChartView.tsx
• src/entities/progress-chart/index.ts
• src/entities/progress-chart/model/progress-chart.types.ts

Changed

• 진행률 차트가 프로젝트 관리 task 기준으로 수치를 계산하도록 구성했습니다.
• 피그마 기준으로 카드/차트 비율, 여백, 전체 스케일을 조정했습니다.
• 차트 계산 로직과 CSS 기반 시각화 의도를 이해할 수 있도록 필요한 주석을 보강했습니다.

Fixed

• 진행률 차트가 별도 고정 mock 수치에 의존하던 구조를 제거하고, 실제 프로젝트 관리 task 기준으로 집계되도록 수정했습니다.

실행화면

• 진행률 차트 메인 화면

테스트

• 로컬 실행 확인
• 주요 시나리오 확인
• 영향 범위 확인

리뷰 체크리스트

• PR base branch가 올바릅니다. (feature/* -> develop, 배포 시 develop 또는 release/* -> main)
• 브랜치명이 Type/#issue-number/description 형식을 따릅니다.
• 커밋 메시지가 컨벤션을 따릅니다.
• 불필요한 console.log, 주석, 임시 코드를 제거했습니다.
• 타입 에러와 린트 에러를 확인했습니다.
• CodeRabbit 1차 리뷰를 확인했습니다.
• CodeRabbit 리뷰 반영 후 Discord에 공유했습니다.
• 최소 1명 이상의 approve 후 merge합니다.

리뷰 요청사항

• 피그마 기준으로 전체 스케일을 줄여 맞춘 상태인데, 카드/차트 크기가 아직 더 조정이 필요한지 함께 봐주시면 좋겠습니다.
• 진행률 차트 수치를 프로젝트 관리 task 기준으로 연결한 방향이 적절한지 확인 부탁드립니다.

관련 이슈

Closes #38

Summary by CodeRabbit

• 새로운 기능
  • 워크스페이스별 진행률 차트 페이지를 추가했습니다.
  • 전체 작업 수, 완료 및 진행 중 작업 수, 전체 진행률을 한눈에 확인할 수 있습니다.
  • 담당자별 작업 현황을 막대 차트로 제공합니다.
  • 작업 상태별 분포를 도넛 차트와 범례로 표시합니다.
  • 담당자와 상태별 데이터가 작업 수를 기준으로 정리되어 표시됩니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

워크스페이스별 진행률 차트 페이지를 추가했습니다. 작업 데이터에서 진행률 요약을 계산하고, 숫자 요약·진행률·담당자·상태 차트를 렌더링하며, 새 라우트에서 workspaceId를 전달합니다.

Changes

진행률 차트 기능

Layer / File(s)	Summary
요약 타입과 계산 로직 src/entities/progress-chart/*, src/features/manage-progress-chart/model/progress-chart.ts	진행률 요약, 담당자 항목, 상태 항목의 공개 타입과 작업 목록 기반 집계·정렬·퍼센트 계산 로직을 추가합니다.
차트 카드 UI src/features/manage-progress-chart/ui/ProgressChartView.tsx, src/features/manage-progress-chart/index.ts	mock 작업 데이터를 요약한 뒤 숫자 카드, 진행률 바, 담당자 막대 차트, 상태 분포 차트를 그리드로 렌더링합니다.
페이지 라우트 연결 src/views/progress-chart/*, src/app/workspaces/[workspaceId]/progress-chart/page.tsx	워크스페이스 라우트의 workspaceId를 페이지와 차트 뷰로 전달합니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant WorkspaceRoute
  participant ProgressChartPage
  participant ProgressChartView
  participant getMockTasksByWorkspaceId
  participant createProgressChartSummary
  WorkspaceRoute->>ProgressChartPage: workspaceId 전달
  ProgressChartPage->>ProgressChartView: workspaceId 전달
  ProgressChartView->>getMockTasksByWorkspaceId: workspaceId로 mock 작업 조회
  getMockTasksByWorkspaceId-->>ProgressChartView: Task[] 반환
  ProgressChartView->>createProgressChartSummary: 작업 목록 전달
  createProgressChartSummary-->>ProgressChartView: ProgressChartSummary 반환
  ProgressChartView-->>WorkspaceRoute: 차트 UI 렌더링

Loading

Possibly related issues

• TeampleRun/syncly#39 — 동일한 워크스페이스 진행률 차트 라우트와 작업 지표 UI 구현 목적을 다룹니다.

Suggested reviewers: Kwon812, seongjinss555, 0011810

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 진행률 차트 페이지 구현이라는 주요 변경 사항을 정확히 반영합니다.
Description check	✅ Passed	필수 섹션인 작업 내용, 결과, 변경 사항, 실행화면, 테스트, 체크리스트, 이슈가 모두 포함되어 있습니다.
Linked Issues check	✅ Passed	경로 추가, FSD 분리, 차트/요약 UI, mock 데이터 연결이 이슈의 핵심 요구사항을 충족합니다.
Out of Scope Changes check	✅ Passed	변경 내용이 진행률 차트 페이지 구현 범위에 집중되어 있어 별도 무관한 수정은 보이지 않습니다.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch Feat/#38/progress-chart-page

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/features/manage-progress-chart/ui/ProgressChartView.tsx`:
- Around line 72-122: AssigneeBarChartCard의 막대 높이가 데이터 최댓값 기준으로 정규화되어 고정
Y축(0~8)과 불일치합니다. gridValues의 최댓값을 기준값으로 사용하도록 높이 계산을 변경하고, item.count가 해당 축 최댓값을
초과할 때는 차트 영역을 넘지 않도록 제한하세요.
- Line 1: Remove the `'use client'` directive from `ProgressChartView` so it is
treated as a server component, since its mock data aggregation and rendering are
fully synchronous and static.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 77fffd45-06fe-41b4-9c29-2997efbd64cf

📥 Commits

Reviewing files that changed from the base of the PR and between 11dbbc0 and 3e39969.

📒 Files selected for processing (8)

• src/app/workspaces/[workspaceId]/progress-chart/page.tsx
• src/entities/progress-chart/index.ts
• src/entities/progress-chart/model/progress-chart.types.ts
• src/features/manage-progress-chart/index.ts
• src/features/manage-progress-chart/model/progress-chart.ts
• src/features/manage-progress-chart/ui/ProgressChartView.tsx
• src/views/progress-chart/index.ts
• src/views/progress-chart/ui/ProgressChartPage.tsx

[seongjinss555]

코드레빗과 리뷰 된 것들 확인해봤습니다. 수정사항 완료 되시면 머지해주세요!