팀 스프린트 회고록 - 애자일 회고 & 액션 아이템 관리

mkdir team-sprint-retrospective && cd team-sprint-retrospective

이 폴더에서 Laravel + Inertia.js + React 프로젝트를 시작합니다.

다음 작업을 수행해주세요:

1. Laravel Breeze (React + Inertia) starter kit으로 새 프로젝트 생성
   - `composer create-project laravel/laravel .`
   - `composer require laravel/breeze --dev`
   - `php artisan breeze:install react`
   - `npm install && npm run build`

2. 데이터베이스 설정
   - .env 파일에서 DB_CONNECTION=sqlite 설정
   - database/database.sqlite 파일 생성
   - `php artisan migrate`

3. 3개의 모델과 마이그레이션 생성:
   - Sprint 모델: title, start_date, end_date, goal (nullable), status (enum: active, completed)
   - RetrospectiveCard 모델: sprint_id (FK), author_name, category (enum: keep, problem, try), content, likes_count (default 0)
   - ActionItem 모델: sprint_id (FK), title, description (nullable), status (enum: todo, in_progress, done), assignee (nullable), due_date (nullable)

4. 각 모델에 적절한 관계 설정 (hasMany, belongsTo)

5. 더미 데이터 시더 생성:
   - 2개의 Sprint (1개는 active, 1개는 completed)
   - 각 스프린트당 5~8개의 RetrospectiveCard (카테고리 골고루 분포)
   - 각 스프린트당 3~5개의 ActionItem (상태 골고루 분포)

6. `php artisan db:seed` 실행하여 더미 데이터 추가

프로젝트 초기 설정이 완료되면 `php artisan serve`로 서버를 실행하고, 별도 터미널에서 `npm run dev`로 Vite 개발 서버를 실행해주세요.

스프린트 목록 페이지를 구현해주세요.

**Backend (Laravel)**:

1. `app/Http/Controllers/SprintController.php` 생성
   - index() 메서드: 모든 스프린트를 최신순으로 조회하고, 각 스프린트의 회고 카드 개수와 액션 아이템 완료율을 계산하여 Inertia::render('Sprints/Index', [...])로 전달
   - store() 메서드: 새 스프린트 생성 (title, start_date, end_date, goal 검증)

2. routes/web.php에 라우트 추가:
   - GET /sprints → SprintController@index
   - POST /sprints → SprintController@store

**Frontend (React)**:

1. `resources/js/Pages/Sprints/Index.jsx` 생성
   - props로 sprints 배열 받기 (각 스프린트에 retrospective_cards_count, action_items_completion_rate 포함)
   - 스프린트 목록을 카드 형태로 표시 (제목, 날짜, 상태 배지, 통계)
   - "새 스프린트" 버튼 클릭 시 모달 또는 인라인 폼 표시
   - Inertia의 useForm 훅을 사용하여 폼 제출
   - 각 스프린트 카드 클릭 시 /sprints/{id} 페이지로 이동 (Link 컴포넌트 사용)

2. Tailwind CSS로 스타일링:
   - 그리드 레이아웃 (md:grid-cols-2, lg:grid-cols-3)
   - 스프린트 상태에 따라 다른 색상 배지 (active: 녹색, completed: 회색)
   - 통계 정보는 작은 차트 또는 프로그레스 바로 표시

3. 네비게이션 메뉴에 "스프린트" 링크 추가 (resources/js/Layouts/AuthenticatedLayout.jsx)

완성 후 브라우저에서 /sprints 접속하여 스프린트 목록이 보이고, 새 스프린트를 생성할 수 있는지 확인해주세요.

스프린트 상세 페이지 - 회고 카드 보기 및 작성 기능을 구현해주세요.

**Backend (Laravel)**:

1. SprintController에 메서드 추가:
   - show($id): 특정 스프린트와 해당 스프린트의 모든 회고 카드를 카테고리별로 그룹화하여 Inertia::render('Sprints/Show', [...])

2. `app/Http/Controllers/RetrospectiveCardController.php` 생성:
   - store() 메서드: 새 회고 카드 생성 (sprint_id, author_name, category, content 검증)
   - destroy($id): 회고 카드 삭제

3. routes/web.php에 라우트 추가:
   - GET /sprints/{id} → SprintController@show
   - POST /retrospective-cards → RetrospectiveCardController@store
   - DELETE /retrospective-cards/{id} → RetrospectiveCardController@destroy

**Frontend (React)**:

1. `resources/js/Pages/Sprints/Show.jsx` 생성:
   - props로 sprint, retrospectiveCards 받기
   - 3개 컬럼 레이아웃: Keep / Problem / Try
   - 각 컬럼에 해당 카테고리의 회고 카드를 스티커 노트 스타일로 표시
   - 각 컬럼 상단에 "+ 추가" 버튼 (클릭 시 해당 카테고리의 새 카드 작성 폼 표시)
   - 회고 카드에 작성자 이름, 내용, 좋아요 수 표시
   - 카드 호버 시 삭제 버튼 표시

2. 회고 카드 작성 폼:
   - author_name, content 입력 필드
   - category는 클릭한 컬럼에 따라 자동 설정
   - Inertia useForm으로 제출

3. 스타일링:
   - Keep: 녹색 계열, Problem: 빨간색 계열, Try: 파란색 계열
   - 스티커 노트 효과 (그림자, 약간의 회전 효과)
   - 반응형: 모바일에서는 세로 스택, 태블릿 이상에서는 3컬럼

완성 후 스프린트 상세 페이지에서 회고 카드를 카테고리별로 볼 수 있고, 새 카드를 추가/삭제할 수 있는지 확인해주세요.

액션 아이템 관리 기능을 스프린트 상세 페이지에 추가해주세요.

**Backend (Laravel)**:

1. `app/Http/Controllers/ActionItemController.php` 생성:
   - store(): 새 액션 아이템 생성 (sprint_id, title, description, status, assignee, due_date 검증)
   - update($id): 액션 아이템 수정 (주로 status 변경용)
   - destroy($id): 액션 아이템 삭제

2. routes/web.php에 라우트 추가:
   - POST /action-items → ActionItemController@store
   - PATCH /action-items/{id} → ActionItemController@update
   - DELETE /action-items/{id} → ActionItemController@destroy

3. SprintController의 show() 메서드 수정:
   - actionItems도 함께 전달 (상태별로 그룹화하거나 전체 목록)

**Frontend (React)**:

1. `resources/js/Pages/Sprints/Show.jsx` 수정:
   - 회고 카드 섹션 아래에 "액션 아이템" 섹션 추가
   - 액션 아이템을 칸반 보드 형태로 표시 (TODO / IN_PROGRESS / DONE 3개 컬럼)
   - 각 액션 아이템 카드에 제목, 설명, 담당자, 마감일 표시
   - 상태 변경 드롭다운 또는 버튼 (클릭 시 PATCH 요청)

2. 액션 아이템 추가 폼:
   - "+ 새 액션 아이템" 버튼 클릭 시 모달 또는 인라인 폼 표시
   - title, description, assignee, due_date, status(초기값 todo) 입력
   - Inertia useForm으로 제출

3. 스타일링:
   - 칸반 보드 레이아웃 (3컬럼, 카드 형태)
   - 상태에 따라 다른 색상 (TODO: 회색, IN_PROGRESS: 노란색, DONE: 녹색)
   - 마감일이 지난 액션 아이템은 빨간색 경고 표시

4. 액션 아이템 완료율 표시:
   - 스프린트 정보 섹션에 전체 액션 아이템 중 완료된 비율을 프로그레스 바로 표시

완성 후 스프린트 상세 페이지에서 액션 아이템을 추가하고, 상태를 변경하고, 삭제할 수 있는지 확인해주세요.

회고 카드 좋아요 기능과 팀원별 필터링 기능을 추가해주세요.

**Backend (Laravel)**:

1. RetrospectiveCardController에 메서드 추가:
   - like($id): 특정 회고 카드의 likes_count를 1 증가 (POST 요청)

2. routes/web.php에 라우트 추가:
   - POST /retrospective-cards/{id}/like → RetrospectiveCardController@like

3. SprintController의 show() 메서드 수정:
   - author_name 파라미터로 필터링 기능 추가 (쿼리 스트링 ?author=이름)
   - 모든 고유한 author_name 목록도 함께 전달

**Frontend (React)**:

1. `resources/js/Pages/Sprints/Show.jsx` 수정:
   - 회고 카드에 하트 아이콘과 좋아요 수 표시
   - 하트 아이콘 클릭 시 좋아요 증가 (Inertia.post 사용, 애니메이션 효과 추가)
   - 페이지 상단에 "팀원별 필터" 드롭다운 추가
   - 드롭다운에서 팀원 선택 시 해당 팀원의 회고 카드만 표시 (Inertia.get으로 쿼리 스트링 전달)
   - "전체 보기" 옵션으로 필터 해제

2. 스타일링:
   - 좋아요 버튼: 하트 아이콘 (클릭 시 색상 변경 애니메이션)
   - 필터 드롭다운: 깔끔한 select 또는 커스텀 드롭다운 메뉴
   - 현재 선택된 필터 표시 (예: "홍길동의 회고만 보기")

3. UX 개선:
   - 좋아요 클릭 시 즉각적인 피드백 (낙관적 업데이트)
   - 필터 변경 시 부드러운 전환 효과

완성 후 회고 카드에 좋아요를 누를 수 있고, 팀원별로 회고 카드를 필터링할 수 있는지 확인해주세요.

스프린트 통계 대시보드와 마무리 작업을 수행해주세요.

**Backend (Laravel)**:

1. SprintController에 메서드 추가:
   - dashboard(): 전체 스프린트 통계를 계산하여 Inertia::render('Dashboard', [...])
     - 총 스프린트 수, 완료된 스프린트 수
     - 총 회고 카드 수, 카테고리별 분포
     - 총 액션 아이템 수, 상태별 분포
     - 최근 3개 스프린트의 완료율 추이

2. routes/web.php 수정:
   - GET /dashboard → SprintController@dashboard (기본 대시보드를 스프린트 통계로 변경)

**Frontend (React)**:

1. `resources/js/Pages/Dashboard.jsx` 수정:
   - props로 통계 데이터 받기
   - 4개 섹션으로 구성:
     a. 전체 통계 카드 (스프린트 수, 회고 카드 수, 액션 아이템 수)
     b. 회고 카드 카테고리별 분포 차트 (간단한 바 차트 또는 파이 차트)
     c. 액션 아이템 상태별 분포 차트
     d. 최근 스프린트 완료율 추이 라인 차트

2. 차트 라이브러리 설치 및 사용:
   - `npm install recharts` (React용 차트 라이브러리)
   - BarChart, PieChart, LineChart 컴포넌트 활용

3. 스타일링:
   - 그리드 레이아웃으로 통계 카드 배치
   - 차트는 반응형으로 크기 조정
   - 색상 테마 일관성 유지

4. 마무리 작업:
   - README.md 작성 (프로젝트 설명, 설치 방법, 실행 방법)
   - .env.example 파일 업데이트
   - 모든 페이지에서 반응형 디자인 확인 및 수정
   - 에러 처리 개선 (폼 검증 에러 메시지 표시)

5. 선택적 개선사항 (시간이 있다면):
   - 다크 모드 토글 버튼 추가
   - 액션 아이템 드래그 앤 드롭으로 상태 변경
   - 스프린트 아카이브 기능 (완료된 스프린트 숨기기/보기)

완성 후 전체 애플리케이션을 테스트하고, 모든 기능이 정상 작동하는지 확인해주세요. 대시보드에서 통계 차트가 올바르게 표시되는지 확인하고, README.md를 읽고 프로젝트를 처음부터 설치할 수 있는지 검증해주세요.