팀 온보딩 체크리스트 매니저 - 신입 개발자 환영 프로세스 자동화

mkdir team-onboarding-checklist-manager && cd team-onboarding-checklist-manager

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

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

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 dev`

2. 데이터베이스 설정 (.env 파일)
   - SQLite 사용 설정 (DB_CONNECTION=sqlite)
   - `touch database/database.sqlite` 명령으로 DB 파일 생성

3. 필요한 데이터베이스 마이그레이션 파일 생성
   - `onboarding_templates` 테이블: id, title (체크리스트 항목 제목), description (설명), category (카테고리: 계정/환경/문서 등), order (순서), created_at, updated_at
   - `team_members` 테이블: id, name, email, position (직무), hire_date (입사일), created_at, updated_at
   - `onboarding_checklists` 테이블: id, team_member_id (FK), template_id (FK), is_completed (완료 여부), assignee (담당자 이름), due_date (마감일), notes (메모), completed_at, created_at, updated_at

4. 마이그레이션 실행 (`php artisan migrate`)

5. Eloquent 모델 생성
   - OnboardingTemplate 모델: hasMany 관계로 OnboardingChecklist 연결
   - TeamMember 모델: hasMany 관계로 OnboardingChecklist 연결
   - OnboardingChecklist 모델: belongsTo 관계로 TeamMember, OnboardingTemplate 연결

모든 설정이 완료되면 `php artisan serve`로 서버를 실행하고, 별도 터미널에서 `npm run dev`로 프론트엔드 빌드를 시작해주세요.

온보딩 템플릿 관리 기능을 구현해주세요.

**Laravel 백엔드 작업:**

1. OnboardingTemplateController 생성
   - `php artisan make:controller OnboardingTemplateController`
   - index() 메서드: 모든 템플릿을 category별로 그룹화하여 Inertia::render('Templates/Index')로 전달
   - store() 메서드: 새 템플릿 생성 (Request Validation: title 필수, category 필수, order 숫자)
   - update() 메서드: 템플릿 수정
   - destroy() 메서드: 템플릿 삭제 (해당 템플릿을 사용하는 체크리스트가 있으면 삭제 불가 메시지)

2. routes/web.php에 라우트 추가
   ```php
   Route::resource('templates', OnboardingTemplateController::class);
   ```

**React 프론트엔드 작업:**

1. `resources/js/Pages/Templates/Index.jsx` 생성
   - 템플릿 목록을 카테고리별로 그룹화하여 표시 (예: 계정 설정, 개발 환경, 문서 작성 등)
   - 각 템플릿 카드에 제목, 설명, 순서 표시
   - "새 템플릿 추가" 버튼 (모달 또는 인라인 폼)
   - 수정/삭제 버튼 (각 템플릿 카드에)

2. 컴포넌트 분리
   - `TemplateCard.jsx`: 개별 템플릿 카드 컴포넌트 (재사용 가능)
   - `TemplateForm.jsx`: 템플릿 생성/수정 폼 컴포넌트

3. Inertia.js의 `useForm` 훅 사용하여 폼 데이터 관리 및 제출
   - 생성/수정 시 `Inertia.post()` 또는 `Inertia.put()` 사용
   - 삭제 시 `Inertia.delete()` 사용
   - 성공/실패 메시지 표시 (Laravel의 session flash 메시지 활용)

4. Tailwind CSS로 스타일링
   - 카드 레이아웃, 그리드 시스템 사용
   - 버튼, 폼 입력 필드 스타일
   - 반응형 디자인 (모바일: 1열, 태블릿: 2열, 데스크톱: 3열)

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

신입 팀원 관리 기능을 구현해주세요.

**Laravel 백엔드 작업:**

1. TeamMemberController 생성
   - `php artisan make:controller TeamMemberController`
   - index() 메서드: 모든 팀원을 입사일 기준 내림차순으로 정렬하여 Inertia::render('TeamMembers/Index')로 전달
   - store() 메서드: 신입 팀원 생성 (Validation: name 필수, email 필수/unique, position 필수, hire_date 필수/날짜 형식)
   - show() 메서드: 특정 팀원의 상세 정보 + 해당 팀원의 온보딩 체크리스트 목록 (with 관계 로딩)
   - update() 메서드: 팀원 정보 수정
   - destroy() 메서드: 팀원 삭제 (연결된 체크리스트도 함께 삭제 - cascade)

2. routes/web.php에 라우트 추가
   ```php
   Route::resource('team-members', TeamMemberController::class);
   ```

**React 프론트엔드 작업:**

1. `resources/js/Pages/TeamMembers/Index.jsx` 생성
   - 팀원 목록을 테이블 형식으로 표시 (이름, 이메일, 직무, 입사일, 액션)
   - "신입 팀원 추가" 버튼 (모달 또는 별도 페이지)
   - 각 팀원 행 클릭 시 상세 페이지로 이동

2. `resources/js/Pages/TeamMembers/Show.jsx` 생성
   - 팀원 상세 정보 표시 (이름, 이메일, 직무, 입사일, D+몇일 계산)
   - 해당 팀원의 온보딩 체크리스트 목록 미리보기 (다음 단계에서 완성)
   - 수정/삭제 버튼

3. 컴포넌트 분리
   - `TeamMemberForm.jsx`: 팀원 생성/수정 폼 컴포넌트
   - `TeamMemberTable.jsx`: 팀원 목록 테이블 컴포넌트

4. 날짜 계산 로직
   - 입사일 기준으로 "D+7일" 형식으로 표시 (JavaScript Date 객체 사용)
   - 입사한 지 30일 미만이면 "신입" 배지 표시

5. Tailwind CSS로 스타일링
   - 테이블 레이아웃, 헤더, 행 hover 효과
   - 배지 스타일 (신입 배지)
   - 반응형 테이블 (모바일에서는 카드 형식으로 전환)

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

개인별 온보딩 체크리스트 생성 및 관리 기능을 구현해주세요.

**Laravel 백엔드 작업:**

1. OnboardingChecklistController 생성
   - `php artisan make:controller OnboardingChecklistController`
   - generateForMember() 메서드: 특정 팀원을 위한 체크리스트 자동 생성
     - 모든 OnboardingTemplate을 가져와서 해당 팀원의 OnboardingChecklist 레코드로 복사
     - due_date는 템플릿의 order에 따라 자동 계산 (입사일 + order일)
     - is_completed는 false로 초기화
   - update() 메서드: 체크리스트 항목 수정 (완료 여부 토글, 담당자 변경, 마감일 변경, 메모 추가)
   - toggleComplete() 메서드: 체크리스트 항목 완료/미완료 토글 (completed_at 타임스탬프 기록)

2. TeamMemberController의 show() 메서드 수정
   - 팀원의 모든 체크리스트 항목을 템플릿 정보와 함께 로딩 (with('template'))
   - 진행률 계산: (완료된 항목 수 / 전체 항목 수) * 100
   - 지연된 항목 수 계산: due_date < 오늘 && is_completed = false

3. routes/web.php에 라우트 추가
   ```php
   Route::post('team-members/{teamMember}/generate-checklist', [OnboardingChecklistController::class, 'generateForMember']);
   Route::patch('checklists/{checklist}', [OnboardingChecklistController::class, 'update']);
   Route::post('checklists/{checklist}/toggle', [OnboardingChecklistController::class, 'toggleComplete']);
   ```

**React 프론트엔드 작업:**

1. `resources/js/Pages/TeamMembers/Show.jsx` 업데이트
   - "체크리스트 생성" 버튼 추가 (체크리스트가 없을 때만 표시)
   - 진행률 프로그레스 바 표시 (Tailwind의 progress bar 스타일 또는 커스텀 div)
   - 체크리스트 항목 목록 표시 (완료/미완료 구분)
   - 각 항목에 체크박스, 제목, 담당자, 마감일, D-day 표시
   - 체크박스 클릭 시 완료 상태 토글 (Inertia.post()로 toggleComplete 호출)
   - 마감일이 지난 항목은 빨간색으로 강조

2. 컴포넌트 분리
   - `ChecklistItem.jsx`: 개별 체크리스트 항목 컴포넌트 (체크박스, 제목, 담당자, 마감일 포함)
   - `ProgressBar.jsx`: 진행률 프로그레스 바 컴포넌트 (퍼센트 표시)
   - `ChecklistEditModal.jsx`: 체크리스트 항목 수정 모달 (담당자, 마감일, 메모 수정)

3. 상태 관리
   - useState로 체크리스트 항목 로컬 상태 관리 (낙관적 업데이트)
   - 체크박스 토글 시 즉시 UI 업데이트 후 서버 요청

4. 필터링 기능
   - "전체", "완료", "미완료", "지연" 탭 또는 버튼으로 필터링
   - useState로 현재 필터 상태 관리

5. Tailwind CSS로 스타일링
   - 체크박스 커스텀 스타일 (완료 시 회색 줄 긋기)
   - 프로그레스 바 (배경색 그라데이션)
   - 지연 항목 강조 (빨간색 테두리 또는 배경)
   - 완료 항목 스타일 (흐릿하게)

모든 기능이 정상 작동하는지 테스트해주세요.

전체 온보딩 현황 대시보드를 구현해주세요.

**Laravel 백엔드 작업:**

1. DashboardController 생성
   - `php artisan make:controller DashboardController`
   - index() 메서드:
     - 전체 통계 계산:
       - 현재 온보딩 진행 중인 팀원 수 (입사 후 90일 이내)
       - 전체 평균 완료율 (모든 팀원의 평균)
       - 지연된 체크리스트 항목 총 개수
       - 이번 주에 입사한 신입 수
     - 최근 입사한 팀원 5명 목록 (각 팀원의 진행률 포함)
     - 지연된 체크리스트 항목 목록 (팀원 이름, 항목 제목, 담당자, 마감일 포함)
     - Inertia::render('Dashboard/Index')로 데이터 전달

2. routes/web.php에 라우트 추가
   ```php
   Route::get('/', [DashboardController::class, 'index'])->name('dashboard');
   ```

**React 프론트엔드 작업:**

1. `resources/js/Pages/Dashboard/Index.jsx` 생성
   - 4개의 통계 카드 (진행 중인 팀원 수, 평균 완료율, 지연 항목 수, 이번 주 신입 수)
   - 최근 입사한 팀원 목록 (이름, 직무, 입사일, 진행률 프로그레스 바)
   - 지연된 체크리스트 항목 목록 (팀원 이름, 항목 제목, 담당자, D-day)
   - "템플릿 관리" 및 "팀원 관리" 페이지로 이동하는 네비게이션 링크

2. 컴포넌트 분리
   - `StatCard.jsx`: 통계 카드 컴포넌트 (아이콘, 숫자, 라벨)
   - `RecentMemberCard.jsx`: 최근 팀원 카드 컴포넌트 (이름, 진행률)
   - `OverdueItem.jsx`: 지연 항목 컴포넌트

3. 레이아웃 구성
   - 상단: 4개의 통계 카드 (그리드 레이아웃)
   - 중단: 최근 팀원 목록 (카드 형식)
   - 하단: 지연 항목 목록 (테이블 또는 리스트)

4. Tailwind CSS로 스타일링
   - 통계 카드: 그림자, 둥근 모서리, 아이콘 컬러
   - 프로그레스 바: 진행률에 따라 색상 변경 (낮음: 빨강, 중간: 노랑, 높음: 초록)
   - 지연 항목: 빨간색 강조
   - 반응형 그리드 (모바일: 1열, 태블릿: 2열, 데스크톱: 4열)

5. 네비게이션 바 추가
   - `resources/js/Components/Navigation.jsx` 생성 또는 수정
   - "대시보드", "템플릿 관리", "팀원 관리" 링크
   - Inertia의 `Link` 컴포넌트 사용

모든 기능이 정상 작동하는지 테스트해주세요.

필터링, 정렬, 검색 기능 및 최종 UI/UX 개선을 진행해주세요.

**Laravel 백엔드 작업:**

1. TeamMemberController의 index() 메서드 업데이트
   - 쿼리 파라미터로 필터링/정렬/검색 지원:
     - `search`: 이름 또는 이메일로 검색 (LIKE 쿼리)
     - `sort`: hire_date (입사일), progress (진행률) 기준 정렬
     - `filter`: all (전체), active (진행 중), completed (완료)
   - 각 팀원의 진행률을 계산하여 함께 전달 (withCount, 서브쿼리 사용)

2. OnboardingChecklistController에 필터링 추가
   - TeamMemberController의 show() 메서드에 쿼리 파라미터 추가:
     - `status`: all, completed, pending, overdue

**React 프론트엔드 작업:**

1. `resources/js/Pages/TeamMembers/Index.jsx` 업데이트
   - 검색 입력 필드 추가 (실시간 검색 또는 버튼 클릭)
   - 정렬 드롭다운 추가 (입사일, 진행률)
   - 필터 버튼/탭 추가 (전체, 진행 중, 완료)
   - Inertia의 `router.get()`을 사용하여 쿼리 파라미터와 함께 페이지 리로드

2. `resources/js/Pages/TeamMembers/Show.jsx` 업데이트
   - 체크리스트 필터 탭 추가 (전체, 완료, 미완료, 지연)
   - useState로 현재 필터 상태 관리
   - 필터에 따라 체크리스트 항목 필터링

3. UI/UX 개선
   - 로딩 상태 표시 (Inertia의 progress bar 또는 커스텀 스피너)
   - 빈 상태 메시지 (데이터가 없을 때 "아직 팀원이 없습니다" 등)
   - 성공/에러 토스트 메시지 (체크리스트 완료 시 "완료되었습니다!" 등)
   - 확인 다이얼로그 (삭제 전 "정말 삭제하시겠습니까?")

4. 반응형 디자인 최종 점검
   - 모바일에서 테이블이 카드로 전환되는지 확인
   - 네비게이션 바가 모바일에서 햄버거 메뉴로 전환되는지 확인

5. 접근성 개선
   - 폼 입력 필드에 label 추가
   - 버튼에 aria-label 추가
   - 키보드 네비게이션 지원 (Tab, Enter)

6. 최종 스타일링 및 폴리싱
   - 일관된 색상 팔레트 적용
   - 버튼 hover/active 상태 스타일
   - 애니메이션 추가 (체크박스 토글 시 부드러운 전환)

**시더(Seeder) 생성 (선택 사항):**

1. `php artisan make:seeder OnboardingSeeder`
2. 더미 데이터 생성:
   - 10개의 템플릿 (다양한 카테고리)
   - 5명의 팀원 (다양한 입사일)
   - 각 팀원별 체크리스트 자동 생성 (일부는 완료, 일부는 지연)
3. `php artisan db:seed --class=OnboardingSeeder`로 시드 실행

모든 기능을 종합적으로 테스트하고, README.md 파일을 작성하여 프로젝트 설명, 설치 방법, 사용 방법을 문서화해주세요.