팀 스킬 매트릭스 대시보드 - 개발자 역량 시각화 & 학습 로드맵

mkdir team-skill-matrix-dashboard && cd team-skill-matrix-dashboard

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

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

1. Laravel 13.x 프로젝트를 생성합니다:
   ```bash
   composer create-project laravel/laravel . "13.*"
   ```

2. Laravel Breeze (React + Inertia.js 스택)를 설치합니다:
   ```bash
   composer require laravel/breeze --dev
   php artisan breeze:install react
   ```

3. 데이터베이스를 SQLite로 설정합니다:
   - .env 파일에서 DB_CONNECTION=sqlite로 변경
   - database/database.sqlite 파일 생성

4. 필요한 마이그레이션과 모델을 생성합니다:
   - members 테이블: 팀원 정보 (name, position, joined_at)
   - skills 테이블: 스킬 정보 (name, category)
   - member_skill 피벗 테이블: 팀원-스킬 관계 (member_id, skill_id, level)

5. 각 모델 파일을 생성하고 관계를 정의합니다:
   - Member 모델: skills() belongsToMany 관계
   - Skill 모델: members() belongsToMany 관계

6. 마이그레이션 파일 작성:
   - members: id, name(string), position(string), joined_at(date), timestamps
   - skills: id, name(string), category(string), timestamps
   - member_skill: id, member_id(foreign), skill_id(foreign), level(integer 1-5), timestamps

7. 시더(Seeder)를 생성하여 샘플 데이터를 추가합니다:
   - 5명의 팀원 (예: 김개발, 이프론트, 박백엔드, 최데브옵스, 정풀스택)
   - 카테고리별 스킬 15개 정도
     * Frontend: React, Vue, TypeScript, HTML/CSS, Next.js
     * Backend: Laravel, Node.js, Python, Database, API Design
     * DevOps: Docker, AWS, CI/CD, Kubernetes, Linux
   - 각 팀원마다 랜덤하게 5-10개 스킬에 1-5 레벨 할당

8. 마이그레이션과 시딩을 실행합니다:
   ```bash
   php artisan migrate:fresh --seed
   ```

9. 개발 서버를 실행합니다:
   ```bash
   php artisan serve
   npm install
   npm run dev
   ```

모든 설정이 완료되면 http://localhost:8000에 접속하여 Breeze 기본 화면이 나오는지 확인하세요.

스킬 매트릭스 대시보드의 메인 페이지를 구현합니다.

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

1. 라우트를 추가합니다 (routes/web.php):
   ```php
   Route::middleware('auth')->group(function () {
       Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');
   });
   ```

2. DashboardController를 생성하고 index 메서드를 구현합니다:
   - 모든 팀원 정보를 가져옵니다 (skills 관계 eager loading)
   - 모든 스킬 정보를 카테고리별로 그룹화합니다
   - Inertia::render()로 'Dashboard/Index' 컴포넌트에 데이터 전달
   ```php
   public function index()
   {
       $members = Member::with('skills')->get();
       $skills = Skill::all()->groupBy('category');
       
       return Inertia::render('Dashboard/Index', [
           'members' => $members,
           'skills' => $skills,
       ]);
   }
   ```

3. React 컴포넌트를 생성합니다 (resources/js/Pages/Dashboard/Index.jsx):
   - Tailwind CSS를 사용하여 레이아웃 구성
   - 상단에 페이지 제목과 설명
   - 스킬 매트릭스를 테이블 형식으로 표시:
     * 첫 번째 열: 팀원 이름
     * 나머지 열: 각 스킬 (카테고리별로 구분)
     * 셀 내용: 해당 팀원의 해당 스킬 레벨 (1-5)
   - 레벨에 따라 배경색 변경:
     * 레벨 없음: 회색 (gray-100)
     * 레벨 1: 파랑 연함 (blue-100)
     * 레벨 2: 파랑 (blue-300)
     * 레벨 3: 초록 (green-300)
     * 레벨 4: 노랑 (yellow-300)
     * 레벨 5: 주황 (orange-400)

4. 헤더에 카테고리별 구분선 추가:
   - 카테고리가 바뀔 때마다 배경색이나 구분선으로 시각적 구분

5. 반응형 디자인 적용:
   - 모바일에서는 가로 스크롤 가능하도록 overflow-x-auto 적용

6. 네비게이션 메뉴 수정:
   - Breeze 기본 레이아웃에서 'Dashboard' 링크가 /dashboard로 연결되도록 수정

완성 후 /dashboard 경로로 접속하여 팀원별 스킬 레벨이 색상으로 표시되는 매트릭스가 보이는지 확인하세요.

팀원 관리 기능을 구현합니다 (CRUD).

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

1. 라우트를 추가합니다 (routes/web.php):
   ```php
   Route::middleware('auth')->group(function () {
       Route::resource('members', MemberController::class);
   });
   ```

2. MemberController를 생성하고 다음 메서드를 구현합니다:
   - index: 팀원 목록
   - create: 팀원 추가 폼
   - store: 팀원 저장
   - edit: 팀원 수정 폼
   - update: 팀원 업데이트
   - destroy: 팀원 삭제

3. React 컴포넌트를 생성합니다:
   - resources/js/Pages/Members/Index.jsx: 팀원 목록 (테이블 형식)
     * 이름, 직무, 입사일 표시
     * 각 행에 '수정', '삭제' 버튼
     * 상단에 '+ 새 팀원 추가' 버튼
   - resources/js/Pages/Members/Create.jsx: 팀원 추가 폼
     * 이름 (text input)
     * 직무 (text input)
     * 입사일 (date input)
     * '저장' 버튼 (Inertia.post로 전송)
   - resources/js/Pages/Members/Edit.jsx: 팀원 수정 폼
     * Create와 유사하지만 기존 데이터 표시
     * Inertia.put으로 업데이트

4. 폼 검증 (Validation) 추가:
   - MemberController의 store/update 메서드에서 Request validation 적용
   - name: required, max:255
   - position: required, max:255
   - joined_at: required, date

5. 삭제 확인 모달:
   - 삭제 버튼 클릭 시 confirm() 또는 모달로 확인 후 Inertia.delete 호출

6. 네비게이션에 '팀원 관리' 링크 추가:
   - Breeze 레이아웃에서 /members로 연결되는 링크 추가

7. 성공/에러 메시지 표시:
   - Laravel의 session flash 메시지를 Inertia에서 받아서 알림으로 표시
   - Tailwind CSS 알림 컴포넌트 사용 (초록색: 성공, 빨강색: 에러)

완성 후 /members에서 팀원을 추가/수정/삭제할 수 있는지 확인하세요.

스킬 관리 기능을 구현합니다 (CRUD).

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

1. 라우트를 추가합니다 (routes/web.php):
   ```php
   Route::middleware('auth')->group(function () {
       Route::resource('skills', SkillController::class);
   });
   ```

2. SkillController를 생성하고 다음 메서드를 구현합니다:
   - index: 스킬 목록 (카테고리별로 그룹화)
   - create: 스킬 추가 폼
   - store: 스킬 저장
   - edit: 스킬 수정 폼
   - update: 스킬 업데이트
   - destroy: 스킬 삭제

3. React 컴포넌트를 생성합니다:
   - resources/js/Pages/Skills/Index.jsx: 스킬 목록
     * 카테고리별로 아코디언 또는 탭으로 구분
     * 각 스킬에 '수정', '삭제' 버튼
     * 상단에 '+ 새 스킬 추가' 버튼
   - resources/js/Pages/Skills/Create.jsx: 스킬 추가 폼
     * 스킬 이름 (text input)
     * 카테고리 (select dropdown: Frontend, Backend, DevOps, Soft Skills, Other)
     * '저장' 버튼
   - resources/js/Pages/Skills/Edit.jsx: 스킬 수정 폼

4. 폼 검증:
   - name: required, max:255
   - category: required, in:Frontend,Backend,DevOps,Soft Skills,Other

5. 카테고리별 색상 뱃지:
   - Frontend: 파랑
   - Backend: 초록
   - DevOps: 보라
   - Soft Skills: 주황
   - Other: 회색

6. 네비게이션에 '스킬 관리' 링크 추가:
   - /skills로 연결

7. 스킬 삭제 시 주의사항:
   - 스킬이 팀원과 연결되어 있으면 경고 메시지 표시
   - 강제 삭제 또는 취소 선택 가능

완성 후 /skills에서 스킬을 추가/수정/삭제할 수 있는지 확인하세요.

팀원별 스킬 레벨 편집 기능을 구현합니다.

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

1. 라우트를 추가합니다 (routes/web.php):
   ```php
   Route::middleware('auth')->group(function () {
       Route::get('/members/{member}/skills', [MemberSkillController::class, 'edit'])->name('members.skills.edit');
       Route::put('/members/{member}/skills', [MemberSkillController::class, 'update'])->name('members.skills.update');
   });
   ```

2. MemberSkillController를 생성하고 다음 메서드를 구현합니다:
   - edit: 특정 팀원의 스킬 레벨 편집 폼
     * 해당 팀원 정보와 모든 스킬 목록을 가져옴
     * 팀원이 이미 가진 스킬의 레벨도 함께 전달
   - update: 스킬 레벨 업데이트
     * Request에서 skills 배열을 받음 (skill_id => level)
     * sync() 메서드로 중간 테이블 업데이트
     * 레벨이 0이거나 null인 경우 해당 스킬 제거

3. React 컴포넌트를 생성합니다 (resources/js/Pages/Members/EditSkills.jsx):
   - 상단에 팀원 정보 표시 (이름, 직무)
   - 카테고리별로 스킬 목록 표시
   - 각 스킬마다 레벨 선택 드롭다운 (0-5):
     * 0: 없음 (해당 스킬 미보유)
     * 1-5: 레벨 1-5
   - 선택된 레벨에 따라 실시간으로 색상 프리뷰 표시
   - '저장' 버튼으로 Inertia.put 전송

4. 대시보드와 팀원 목록에 '스킬 편집' 링크 추가:
   - 각 팀원 행에 '스킬 편집' 버튼 추가
   - /members/{id}/skills로 연결

5. 저장 후 피드백:
   - 성공 시 '스킬이 업데이트되었습니다' 메시지
   - 대시보드로 리다이렉트

6. 선택적 개선:
   - 스킬 레벨 선택 시 각 레벨의 의미를 툴팁으로 표시
     * 1: 입문 - 기본 개념 이해
     * 2: 초급 - 간단한 작업 수행 가능
     * 3: 중급 - 독립적으로 작업 가능
     * 4: 고급 - 복잡한 문제 해결 가능
     * 5: 전문가 - 다른 사람을 가르칠 수 있음

완성 후 팀원의 스킬 레벨을 수정하고 대시보드에서 변경사항이 반영되는지 확인하세요.

대시보드에 필터링과 통계 기능을 추가합니다.

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

1. DashboardController를 업데이트합니다:
   - 카테고리별 평균 스킬 레벨 계산
   - 팀 전체 평균 스킬 레벨 계산
   - 레벨별 스킬 개수 통계 (레벨 1: X개, 레벨 2: Y개, ...)
   - 가장 많이 보유한 스킬 Top 5
   - 가장 부족한 스킬 (보유자가 적거나 레벨이 낮은 스킬)

2. Dashboard/Index.jsx 컴포넌트를 업데이트합니다:
   - 상단에 통계 카드 섹션 추가:
     * 총 팀원 수
     * 총 스킬 수
     * 팀 평균 스킬 레벨
     * 가장 강한 카테고리
   - 필터링 UI 추가:
     * 카테고리 필터 (드롭다운 또는 버튼 그룹)
     * 최소 레벨 필터 (슬라이더 또는 드롭다운)
   - 필터 적용 시 매트릭스 테이블 동적 업데이트

3. 스킬 갭 분석 섹션 추가:
   - 레벨 3 미만인 스킬을 하이라이트
   - '개선이 필요한 영역' 리스트 표시
   - 해당 스킬을 가진 팀원 목록 표시

4. React state를 사용하여 필터링 구현:
   - useState로 selectedCategory, minLevel 상태 관리
   - 필터 변경 시 테이블 데이터를 클라이언트 사이드에서 필터링
   - 필터링된 데이터만 테이블에 표시

5. 차트 라이브러리 추가 (선택사항):
   - npm install recharts 또는 chart.js
   - 카테고리별 평균 스킬 레벨을 막대 그래프로 표시
   - 레벨별 분포를 도넛 차트로 표시

6. 반응형 레이아웃:
   - 통계 카드는 그리드로 배치 (모바일: 1열, 태블릿: 2열, 데스크톱: 4열)
   - 차트는 모바일에서 세로 스크롤 가능하도록 조정

7. 데이터 새로고침 버튼:
   - 우측 상단에 '새로고침' 아이콘 버튼
   - 클릭 시 Inertia.reload() 호출

완성 후 대시보드에서 필터를 적용하고 통계가 정확하게 표시되는지 확인하세요.