팀 스탠드업 미팅 노트 - 데일리 진행 상황 & 블로커 공유 - 바이브코딩 레시피
중급 PHP + JavaScript Laravel + React + Inertia.js AI: Claude

팀 스탠드업 미팅 노트 - 데일리 진행 상황 & 블로커 공유

리포지토리명 team-standup-meeting-notes
조회수 66 1건 제출

문제 설명

프로젝트 개요

애자일 팀의 데일리 스탠드업 미팅을 효율적으로 관리하는 웹 애플리케이션입니다. 팀원들이 오늘 한 일(Yesterday), 오늘 할 일(Today), 블로커(Blockers)를 기록하고 공유할 수 있습니다.

필수 기능

  • 팀원 등록 및 관리 (이름, 역할, 아바타)
  • 날짜별 스탠드업 노트 작성 (Yesterday/Today/Blockers 3가지 섹션)
  • 팀원별 스탠드업 노트 조회 (캘린더 뷰)
  • 블로커 상태 관리 (미해결/해결 중/해결 완료)
  • 주간 통계 대시보드 (참여율, 블로커 해결률)
  • 반응형 디자인 (모바일 친화적)

보너스 기능

  • 스탠드업 노트 템플릿 저장 기능
  • 팀원별 색상 테마 지정
  • 블로커에 대한 댓글 기능
  • 주간 요약 이메일 발송 (시뮬레이션)
  • 다크 모드 지원

기술 스택

  • Laravel 13.x (백엔드)
  • Inertia.js (서버-클라이언트 브릿지)
  • React 19 (프론트엔드)
  • Tailwind CSS (스타일링)
  • SQLite (데이터베이스)

제약 조건

  • • Laravel 13.x + Inertia.js + React 19 모노리스 풀스택 구조 (별도 API 라우트 없음)
  • • Laravel Breeze React+Inertia starter kit으로 프로젝트 생성
  • • SQLite 데이터베이스 사용 (간편한 로컬 개발)
  • • Tailwind CSS로 모든 스타일링 처리
  • • Inertia::render()로 Laravel 컨트롤러에서 React 컴포넌트에 데이터 전달
  • • Laravel Eloquent ORM과 마이그레이션 활용
  • • React 컴포넌트는 Pages 폴더에 구성
  • • useState, useReducer 등 React Hooks 활용
  • • 폼 검증은 Laravel의 Request Validation 사용
  • • 날짜 처리는 Carbon 라이브러리 활용

프롬프트 레시피

아래 프롬프트를 순서대로 AI에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.

1
Step 1
mkdir team-standup-meeting-notes && cd team-standup-meeting-notes

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

다음 명령으로 Laravel Breeze React+Inertia starter kit 프로젝트를 생성하세요:

```bash
composer create-project laravel/laravel .
composer require laravel/breeze --dev
php artisan breeze:install react
php artisan migrate
npm install
```

프로젝트 구조를 확인하고, .env 파일에서 DB_CONNECTION=sqlite로 설정한 후 database/database.sqlite 파일을 생성하세요.

기본 인증 기능(로그인/회원가입)이 포함된 Breeze 스타터 킷이 설치되었는지 확인하고, npm run dev로 프론트엔드 빌드가 정상 작동하는지 테스트하세요.

기대 결과: Laravel 13.x + Breeze React+Inertia 프로젝트가 생성되고, SQLite 데이터베이스가 설정되며, 기본 인증 페이지(로그인/회원가입)가 작동합니다. http://localhost:8000으로 접속 시 Welcome 페이지가 보입니다.

2
Step 2
팀원(TeamMember)과 스탠드업 노트(StandupNote) 모델을 생성하고 마이그레이션을 작성하세요.

**TeamMember 모델:**
- id (primary key)
- name (string, 팀원 이름)
- role (string, 역할: Developer, Designer, PM 등)
- avatar_color (string, 아바타 배경색 hex 코드, 예: #3B82F6)
- timestamps

**StandupNote 모델:**
- id (primary key)
- team_member_id (foreign key, team_members 테이블 참조)
- date (date, 스탠드업 날짜)
- yesterday (text, 어제 한 일)
- today (text, 오늘 할 일)
- blockers (text, nullable, 블로커 내용)
- blocker_status (enum: 'none', 'open', 'in_progress', 'resolved', default: 'none')
- timestamps

모델 간 관계 설정:
- TeamMember hasMany StandupNote
- StandupNote belongsTo TeamMember

마이그레이션을 실행하고, 테스트용 시더를 작성하여 팀원 3명과 각각의 스탠드업 노트 5개씩 생성하세요.

```bash
php artisan make:model TeamMember -m
php artisan make:model StandupNote -m
php artisan make:seeder TeamMemberSeeder
php artisan migrate:fresh --seed
```

기대 결과: team_members와 standup_notes 테이블이 생성되고, 테스트 데이터(팀원 3명, 각 5개의 스탠드업 노트)가 시딩됩니다. 모델 간 관계가 정상적으로 설정됩니다.

3
Step 3
팀원 목록 페이지와 팀원 등록 기능을 구현하세요.

**Laravel 컨트롤러 (TeamMemberController):**
- index() 메서드: 모든 팀원 조회하여 Inertia::render('TeamMembers/Index')로 전달
- store() 메서드: 팀원 등록 (name, role, avatar_color 검증 후 저장)
- destroy() 메서드: 팀원 삭제

**React 페이지 컴포넌트 (resources/js/Pages/TeamMembers/Index.jsx):**
- 팀원 목록을 카드 형태로 표시 (아바타 색상, 이름, 역할)
- 팀원 추가 버튼 클릭 시 모달 또는 인라인 폼 표시
- 폼: 이름, 역할 입력 필드, 아바타 색상 선택기 (미리 정의된 5가지 색상 중 선택)
- Inertia의 useForm 훅 사용하여 폼 제출 처리
- 팀원 삭제 버튼 (확인 알림 후 삭제)

**라우트 설정 (routes/web.php):**
```php
Route::middleware('auth')->group(function () {
    Route::get('/team-members', [TeamMemberController::class, 'index'])->name('team-members.index');
    Route::post('/team-members', [TeamMemberController::class, 'store'])->name('team-members.store');
    Route::delete('/team-members/{teamMember}', [TeamMemberController::class, 'destroy'])->name('team-members.destroy');
});
```

Tailwind CSS로 깔끔한 UI를 구성하세요.

기대 결과: 팀원 목록 페이지가 작동하고, 새 팀원을 등록하거나 삭제할 수 있습니다. 아바타 색상이 시각적으로 표시되며, 폼 검증이 정상 작동합니다.

4
Step 4
스탠드업 노트 작성 및 조회 기능을 구현하세요.

**Laravel 컨트롤러 (StandupNoteController):**
- index() 메서드: 날짜별 또는 팀원별 스탠드업 노트 조회 (쿼리 파라미터로 필터링)
- create() 메서드: 스탠드업 노트 작성 폼 페이지 (팀원 목록 전달)
- store() 메서드: 스탠드업 노트 저장 (team_member_id, date, yesterday, today, blockers, blocker_status 검증)
- update() 메서드: 블로커 상태 업데이트 (blocker_status만 수정 가능)

**React 페이지 컴포넌트 (resources/js/Pages/StandupNotes/Index.jsx):**
- 날짜 선택기 (기본값: 오늘)
- 선택한 날짜의 모든 팀원 스탠드업 노트를 카드 형태로 표시
- 각 카드: 팀원 이름, 아바타, Yesterday/Today/Blockers 섹션
- 블로커가 있는 경우 상태 배지 표시 (Open: 빨강, In Progress: 노랑, Resolved: 초록)
- 블로커 상태 변경 드롭다운 (인라인 업데이트)

**React 페이지 컴포넌트 (resources/js/Pages/StandupNotes/Create.jsx):**
- 팀원 선택 드롭다운
- 날짜 선택 (기본값: 오늘)
- Yesterday, Today, Blockers 텍스트 영역
- Blockers가 입력된 경우 blocker_status를 'open'으로 자동 설정
- useForm 훅으로 폼 제출 처리

**라우트 추가:**
```php
Route::middleware('auth')->group(function () {
    Route::get('/standup-notes', [StandupNoteController::class, 'index'])->name('standup-notes.index');
    Route::get('/standup-notes/create', [StandupNoteController::class, 'create'])->name('standup-notes.create');
    Route::post('/standup-notes', [StandupNoteController::class, 'store'])->name('standup-notes.store');
    Route::patch('/standup-notes/{standupNote}/status', [StandupNoteController::class, 'update'])->name('standup-notes.update-status');
});
```

네비게이션 메뉴에 팀원 관리, 스탠드업 노트 링크를 추가하세요.

기대 결과: 스탠드업 노트 작성 페이지에서 노트를 등록할 수 있고, 조회 페이지에서 날짜별로 팀원들의 노트를 확인할 수 있습니다. 블로커 상태를 인라인으로 변경할 수 있습니다.

5
Step 5
주간 통계 대시보드를 구현하세요.

**Laravel 컨트롤러 (DashboardController):**
- index() 메서드:
  - 이번 주(월~금) 스탠드업 참여율 계산 (전체 예상 노트 수 대비 실제 작성된 노트 수)
  - 블로커 해결률 계산 (전체 블로커 중 'resolved' 상태 비율)
  - 최근 7일간 일별 참여 팀원 수 차트 데이터
  - 팀원별 이번 주 참여 횟수
  - Inertia::render('Dashboard')로 통계 데이터 전달

**React 페이지 컴포넌트 (resources/js/Pages/Dashboard.jsx):**
- 상단 KPI 카드 4개: 이번 주 참여율, 블로커 해결률, 총 팀원 수, 미해결 블로커 수
- 최근 7일간 일별 참여 팀원 수 막대 차트 (Chart.js 또는 Recharts 라이브러리 사용)
- 팀원별 이번 주 참여 현황 테이블
- Tailwind CSS로 대시보드 레이아웃 구성

**라우트 설정:**
```php
Route::middleware('auth')->get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');
```

Chart.js 또는 Recharts를 npm으로 설치하고 차트를 구현하세요:
```bash
npm install recharts
```

기대 결과: 대시보드 페이지에 이번 주 참여율, 블로커 해결률 등 주요 지표가 표시되고, 최근 7일간 참여 추이를 시각화한 차트가 보입니다. 팀원별 참여 현황 테이블이 정상 작동합니다.

6
Step 6
캘린더 뷰와 팀원별 스탠드업 히스토리 페이지를 추가하세요.

**Laravel 컨트롤러 (StandupNoteController):**
- calendar() 메서드: 월별 캘린더 데이터 생성 (날짜별 스탠드업 노트 작성 여부 표시)
- history() 메서드: 특정 팀원의 스탠드업 노트 전체 히스토리 조회 (페이지네이션)

**React 페이지 컴포넌트 (resources/js/Pages/StandupNotes/Calendar.jsx):**
- 월 선택기 (이전/다음 달 이동 버튼)
- 캘린더 그리드 (일~토, 각 날짜에 스탠드업 노트 작성 여부 표시)
- 노트가 있는 날짜 클릭 시 해당 날짜의 스탠드업 노트 목록 모달 표시
- Tailwind CSS로 캘린더 UI 구성

**React 페이지 컴포넌트 (resources/js/Pages/StandupNotes/History.jsx):**
- 팀원 선택 드롭다운
- 선택한 팀원의 스탠드업 노트 전체 목록 (최신순, 페이지네이션)
- 각 노트 카드: 날짜, Yesterday/Today/Blockers, 블로커 상태
- 검색 필터 (날짜 범위, 블로커 상태)

**라우트 추가:**
```php
Route::middleware('auth')->group(function () {
    Route::get('/standup-notes/calendar', [StandupNoteController::class, 'calendar'])->name('standup-notes.calendar');
    Route::get('/standup-notes/history', [StandupNoteController::class, 'history'])->name('standup-notes.history');
});
```

네비게이션 메뉴에 캘린더, 히스토리 링크를 추가하세요.

기대 결과: 캘린더 뷰에서 월별로 스탠드업 노트 작성 여부를 시각적으로 확인할 수 있고, 날짜 클릭 시 해당 날짜의 노트를 볼 수 있습니다. 히스토리 페이지에서 팀원별 전체 스탠드업 노트를 검색하고 필터링할 수 있습니다.

제출된 작품 (1)

로그인 후 제출

팀 스탠드업 미팅 노트

리자
리자
· Claude Code

데일리 스탠드업 미팅의 진행 상황과 블로커를 효율적으로 공유하고 관리하는 협업 도구

조회수 98 댓글수 0 추천수 0

댓글 (0)

로그인 후 댓글을 남길 수 있습니다.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!