팀 프로젝트 마일스톤 타임라인 - 일정 시각화 & 진행률 추적

mkdir project-milestone-timeline-tracker && cd project-milestone-timeline-tracker

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

다음 명령으로 Laravel Breeze (React + Inertia) starter kit을 사용하여 프로젝트를 생성하세요:

```bash
npx create laravel@latest . --breeze --stack=react --typescript=no
```

프로젝트 생성 후:
1. .env 파일에서 DB_CONNECTION=sqlite로 설정
2. database/database.sqlite 파일 생성
3. npm install 및 npm run dev 실행
4. php artisan migrate 실행

프로젝트가 정상적으로 설정되었는지 확인하고, Breeze 기본 인증 페이지(로그인/회원가입)가 작동하는지 테스트하세요.

프로젝트(Project)와 마일스톤(Milestone) 모델 및 마이그레이션을 생성하세요.

**요구사항:**

1. Project 모델 생성:
```bash
php artisan make:model Project -m
```

마이그레이션 파일에 다음 컬럼 추가:
- title (string, 필수)
- description (text, nullable)
- start_date (date, 필수)
- end_date (date, 필수)
- user_id (foreignId, users 테이블 참조)
- is_archived (boolean, 기본값 false)
- timestamps

2. Milestone 모델 생성:
```bash
php artisan make:model Milestone -m
```

마이그레이션 파일에 다음 컬럼 추가:
- project_id (foreignId, projects 테이블 참조, onDelete cascade)
- title (string, 필수)
- description (text, nullable)
- due_date (date, 필수)
- status (enum: 'pending', 'in_progress', 'completed', 기본값 'pending')
- progress (integer, 0-100, 기본값 0)
- color (string, 기본값 '#3B82F6')
- order (integer, 정렬 순서용)
- timestamps

3. 모델 관계 설정:
- Project 모델: hasMany(Milestone::class), belongsTo(User::class)
- Milestone 모델: belongsTo(Project::class)

4. 마이그레이션 실행:
```bash
php artisan migrate
```

모델과 데이터베이스 구조가 올바르게 설정되었는지 확인하세요.

프로젝트 목록 및 생성 기능을 구현하세요.

**요구사항:**

1. ProjectController 생성:
```bash
php artisan make:controller ProjectController
```

2. 라우트 설정 (routes/web.php):
```php
Route::middleware('auth')->group(function () {
    Route::get('/projects', [ProjectController::class, 'index'])->name('projects.index');
    Route::post('/projects', [ProjectController::class, 'store'])->name('projects.store');
    Route::get('/projects/{project}', [ProjectController::class, 'show'])->name('projects.show');
});
```

3. ProjectController 메서드 구현:
- index(): 현재 로그인한 사용자의 프로젝트 목록 조회 (is_archived = false만), Inertia::render('Projects/Index')로 전달
- store(): Request 유효성 검사 후 프로젝트 생성, 리다이렉트
- show(): 특정 프로젝트와 관련 마일스톤 조회(order 기준 정렬), Inertia::render('Projects/Show')로 전달

4. React 컴포넌트 생성 (resources/js/Pages/Projects/Index.jsx):
- 프로젝트 목록을 카드 형태로 표시
- 각 카드: 제목, 설명(일부), 시작일~종료일, 전체 진행률(마일스톤 평균)
- "새 프로젝트 만들기" 버튼 및 모달 폼
- Inertia form helper 사용하여 프로젝트 생성
- Tailwind CSS로 스타일링

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

프로젝트 목록 페이지와 생성 기능이 정상 작동하는지 테스트하세요.

프로젝트 상세 페이지에 마일스톤 CRUD 기능을 구현하세요.

**요구사항:**

1. MilestoneController 생성:
```bash
php artisan make:controller MilestoneController
```

2. 라우트 설정 (routes/web.php):
```php
Route::middleware('auth')->group(function () {
    Route::post('/projects/{project}/milestones', [MilestoneController::class, 'store'])->name('milestones.store');
    Route::put('/milestones/{milestone}', [MilestoneController::class, 'update'])->name('milestones.update');
    Route::delete('/milestones/{milestone}', [MilestoneController::class, 'destroy'])->name('milestones.destroy');
});
```

3. MilestoneController 메서드 구현:
- store(): 마일스톤 생성, order는 기존 마일스톤 개수 + 1
- update(): 마일스톤 수정 (제목, 설명, 예정일, 상태, 진행률, 색상)
- destroy(): 마일스톤 삭제

4. React 컴포넌트 생성 (resources/js/Pages/Projects/Show.jsx):
- 프로젝트 정보 헤더 (제목, 설명, 기간, 전체 진행률 프로그레스 바)
- 마일스톤 목록을 리스트 형태로 표시
- 각 마일스톤: 제목, 예정일, 상태 배지, 진행률 프로그레스 바, 색상 인디케이터
- "마일스톤 추가" 버튼 및 폼
- 각 마일스톤에 수정/삭제 버튼
- Inertia form helper 사용

5. 마일스톤 컴포넌트 (resources/js/Components/Milestone.jsx) 분리:
- 재사용 가능한 마일스톤 카드 컴포넌트
- 상태에 따라 다른 색상 표시
- 진행률 프로그레스 바 포함

CRUD 기능이 정상 작동하는지 테스트하세요.

타임라인 시각화 기능을 구현하세요.

**요구사항:**

1. date-fns 라이브러리 설치:
```bash
npm install date-fns
```

2. Timeline 컴포넌트 생성 (resources/js/Components/Timeline.jsx):
- 수평 타임라인 레이아웃
- 프로젝트 시작일~종료일을 기준으로 타임라인 생성
- 각 마일스톤을 예정일 기준으로 타임라인에 배치
- 현재 날짜를 표시하는 "Today" 마커 (빨간 세로선)
- 마일스톤 노드: 원형 아이콘, 제목, 예정일, 진행률 표시
- 완료된 마일스톤은 체크 아이콘으로 표시
- 지연된 마일스톤(예정일 지났는데 미완료)은 경고 색상

3. 날짜 계산 로직:
- date-fns의 differenceInDays, format, isAfter, isBefore 등 활용
- 타임라인 상에서 마일스톤 위치 계산 (퍼센트)

4. Projects/Show.jsx에 Timeline 컴포넌트 추가:
- 마일스톤 목록 위에 타임라인 뷰 표시
- "타임라인 뷰" / "리스트 뷰" 토글 버튼 추가

5. 반응형 디자인:
- 데스크톱: 수평 타임라인
- 모바일(768px 이하): 세로 타임라인으로 자동 전환

타임라인이 시각적으로 표시되고, 날짜 계산이 정확한지 테스트하세요.

드래그 앤 드롭으로 마일스톤 순서 변경 기능을 구현하세요.

**요구사항:**

1. @hello-pangea/dnd 라이브러리 설치:
```bash
npm install @hello-pangea/dnd
```

2. 마일스톤 순서 변경 라우트 추가 (routes/web.php):
```php
Route::put('/projects/{project}/milestones/reorder', [MilestoneController::class, 'reorder'])->name('milestones.reorder');
```

3. MilestoneController에 reorder 메서드 추가:
- Request에서 milestones 배열 받기 (id와 새로운 order)
- 각 마일스톤의 order 컬럼 업데이트

4. Projects/Show.jsx에 DragDropContext, Droppable, Draggable 적용:
- 마일스톤 리스트를 드래그 가능하게 만들기
- onDragEnd 핸들러에서 순서 변경 로직 구현
- Inertia router.put()으로 서버에 순서 저장

5. 드래그 중 시각적 피드백:
- 드래그 중인 아이템 스타일 변경
- 드롭 가능 영역 하이라이트

6. 타임라인 뷰에서는 드래그 비활성화 (리스트 뷰에서만 가능)

드래그 앤 드롭으로 마일스톤 순서를 변경하고, 새로고침 후에도 순서가 유지되는지 테스트하세요.

진행률 대시보드 및 통계 기능을 구현하세요.

**요구사항:**

1. Dashboard 컴포넌트 생성 (resources/js/Components/ProjectDashboard.jsx):
- 프로젝트 전체 진행률 계산 (모든 마일스톤 진행률 평균)
- 원형 프로그레스 바로 전체 진행률 표시
- 통계 카드:
  - 전체 마일스톤 개수
  - 완료된 마일스톤 개수
  - 진행중인 마일스톤 개수
  - 예정된 마일스톤 개수
  - 지연된 마일스톤 개수 (예정일 지났는데 미완료)
- 각 통계는 아이콘과 함께 카드 형태로 표시

2. Projects/Show.jsx에 Dashboard 컴포넌트 추가:
- 페이지 상단에 대시보드 배치
- Tailwind CSS로 그리드 레이아웃 구성

3. 지연 경고 표시:
- 지연된 마일스톤이 있으면 경고 배너 표시
- 지연된 마일스톤 목록 표시

4. 프로젝트 완료율에 따른 시각적 피드백:
- 100% 완료 시 축하 메시지
- 50% 이상 시 격려 메시지

대시보드가 정확한 통계를 표시하는지 테스트하세요.

마일스톤 필터링 및 검색 기능을 추가하세요.

**요구사항:**

1. Projects/Show.jsx에 필터 UI 추가:
- 상태별 필터 버튼 (전체/예정/진행중/완료)
- 검색 입력 필드 (마일스톤 제목 검색)
- 날짜 범위 필터 (시작일~종료일)

2. 클라이언트 사이드 필터링 로직:
- useState로 필터 상태 관리
- useMemo로 필터링된 마일스톤 목록 계산
- 검색어, 상태, 날짜 범위를 모두 고려한 필터링

3. 필터 적용 시 타임라인과 리스트 모두 업데이트:
- 필터링된 마일스톤만 표시
- 필터 개수 표시 (예: "5개 중 3개 표시")

4. 필터 초기화 버튼:
- 모든 필터를 기본값으로 리셋

5. URL 쿼리 파라미터로 필터 상태 유지 (선택):
- Inertia router를 사용하여 필터 상태를 URL에 반영
- 페이지 새로고침 후에도 필터 유지

필터링과 검색이 정상 작동하는지 테스트하세요.