팀 이슈 트래커 - 버그 리포트 & 진행 상태 관리 - 바이브코딩 레시피
중급 PHP + JavaScript Laravel + React + Inertia.js AI: Claude

팀 이슈 트래커 - 버그 리포트 & 진행 상태 관리

리포지토리명 team-issue-tracker-laravel
조회수 87 2건 제출

문제 설명

프로젝트 개요

개발 팀이나 프로젝트 팀에서 발생하는 이슈(버그, 기능 요청, 개선 사항)를 체계적으로 관리하는 풀스택 이슈 트래커를 만듭니다. Laravel 13.x + Inertia.js + React 19 모노리스 아키텍처로 구현하며, 별도 API 없이 Laravel 컨트롤러에서 Inertia를 통해 React 컴포넌트로 데이터를 전달합니다.

필수 기능

  • 이슈 CRUD: 이슈 생성, 수정, 삭제, 목록 조회
  • 상태 관리: 상태(Open, In Progress, Resolved, Closed) 변경 기능
  • 우선순위 설정: Low, Medium, High, Critical 우선순위 지정
  • 카테고리 분류: Bug, Feature, Enhancement 등 타입 구분
  • 담당자 할당: 이슈별 담당자 지정 (간단한 사용자 관리)
  • 필터링 & 검색: 상태별, 우선순위별, 카테고리별 필터링 및 제목 검색
  • 상세 페이지: 이슈 상세 정보 및 코멘트 작성 기능
  • 대시보드: 통계 위젯 (전체 이슈 수, 상태별 분포, 우선순위별 분포)

보너스 기능

  • 이슈 코멘트에 마크다운 지원
  • 이슈 히스토리 로그 (상태 변경, 담당자 변경 기록)
  • 이슈 번호 자동 생성 (#1, #2, ...)
  • 라벨/태그 시스템 추가
  • 이슈 정렬 기능 (생성일, 우선순위, 상태 기준)
  • 담당자별 이슈 목록 보기

기술 스택

  • 백엔드: Laravel 13.x (SQLite DB)
  • 프론트엔드: React 19
  • 통합: Inertia.js (모노리스 풀스택)
  • 스타일링: Tailwind CSS
  • 개발 도구: Vite

제약 조건

  • • Laravel 13.x + Inertia.js + React 19 모노리스 아키텍처 필수
  • • Laravel Breeze (React + Inertia starter kit) 또는 npx create laravel로 프로젝트 시작
  • • 별도 RESTful API 라우트 금지 - Inertia::render()로 데이터 전달
  • • 데이터베이스는 SQLite 사용
  • • Eloquent ORM 및 마이그레이션 활용
  • • React 컴포넌트는 resources/js/Pages 디렉토리에 구성
  • • Tailwind CSS로 스타일링
  • • 사용자 인증은 간단하게 구현 (Breeze 기본 인증 활용 가능)
  • • 코멘트 기능은 별도 테이블로 구현 (issues-comments 관계)
  • • 상태, 우선순위, 카테고리는 ENUM 또는 문자열 상수로 관리

프롬프트 레시피

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

1
Step 1
mkdir team-issue-tracker-laravel && cd team-issue-tracker-laravel

이 폴더에서 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
npm install
npm run dev
```

프로젝트 초기 설정:
- .env 파일에서 DB_CONNECTION=sqlite 설정
- database/database.sqlite 파일 생성
- php artisan migrate 실행하여 기본 테이블 생성
- 프로젝트가 정상적으로 실행되는지 확인 (php artisan serve)

완료 후 http://localhost:8000 에서 Laravel Breeze 기본 화면(로그인/회원가입)이 보여야 합니다.

기대 결과: Laravel 13.x + Breeze (React + Inertia) 프로젝트가 초기화되고, SQLite DB 마이그레이션이 완료되며, 로컬 서버가 정상 작동합니다. 기본 인증 화면이 표시됩니다.

2
Step 2
이슈(Issue) 및 코멘트(Comment) 테이블을 위한 마이그레이션과 모델을 생성하세요.

**이슈 테이블 (issues)**:
- id (primary key)
- title (string, 필수)
- description (text, nullable)
- status (string: 'open', 'in_progress', 'resolved', 'closed', 기본값 'open')
- priority (string: 'low', 'medium', 'high', 'critical', 기본값 'medium')
- category (string: 'bug', 'feature', 'enhancement', 기본값 'bug')
- assigned_to (foreign key to users, nullable)
- created_by (foreign key to users)
- timestamps

**코멘트 테이블 (comments)**:
- id (primary key)
- issue_id (foreign key to issues)
- user_id (foreign key to users)
- content (text, 필수)
- timestamps

다음 명령을 실행하세요:
```bash
php artisan make:model Issue -m
php artisan make:model Comment -m
```

마이그레이션 파일을 위 스키마대로 작성하고, Issue와 Comment 모델에 관계를 설정하세요:
- Issue 모델: assignedTo, createdBy (User 관계), comments (Comment 관계)
- Comment 모델: issue, user 관계

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

기대 결과: issues와 comments 테이블이 생성되고, Issue와 Comment 모델에 Eloquent 관계가 설정됩니다. 데이터베이스 스키마가 완성됩니다.

3
Step 3
이슈 CRUD를 위한 IssueController를 생성하고, 라우트를 설정하세요.

```bash
php artisan make:controller IssueController
```

IssueController에 다음 메서드를 구현하세요:
- index(): 이슈 목록 조회 (필터링 및 검색 쿼리 파라미터 지원: status, priority, category, search)
- create(): 이슈 생성 폼 페이지
- store(): 이슈 저장 (validation 포함)
- show($id): 이슈 상세 페이지 (코멘트 포함)
- edit($id): 이슈 수정 폼 페이지
- update($id): 이슈 업데이트
- destroy($id): 이슈 삭제

각 메서드는 Inertia::render()를 사용하여 React 컴포넌트에 데이터를 전달합니다.

routes/web.php에 이슈 관련 라우트를 추가하세요:
```php
Route::middleware('auth')->group(function () {
    Route::resource('issues', IssueController::class);
});
```

사용자 목록을 가져오는 헬퍼도 추가하세요 (담당자 할당용):
- IssueController의 create, edit 메서드에서 User::all()을 Inertia props로 전달

기대 결과: IssueController가 생성되고, 이슈 CRUD 메서드가 구현됩니다. 라우트가 설정되어 /issues 경로로 접근 가능합니다. Validation 로직이 포함됩니다.

4
Step 4
React 컴포넌트를 생성하여 이슈 목록, 생성, 수정, 상세 페이지를 구현하세요.

resources/js/Pages/Issues 폴더를 만들고 다음 컴포넌트를 작성하세요:

**Index.jsx** (이슈 목록):
- 이슈 테이블 (제목, 상태, 우선순위, 카테고리, 담당자, 생성일)
- 필터 UI (상태, 우선순위, 카테고리 드롭다운, 검색 입력창)
- 각 행 클릭 시 상세 페이지로 이동
- 새 이슈 생성 버튼

**Create.jsx** (이슈 생성):
- 폼: 제목, 설명(textarea), 상태, 우선순위, 카테고리, 담당자 선택
- Inertia form helper 사용 (useForm)
- 제출 시 POST /issues

**Edit.jsx** (이슈 수정):
- Create와 유사하지만 기존 데이터를 props로 받아 폼 초기화
- 제출 시 PUT /issues/{id}

**Show.jsx** (이슈 상세):
- 이슈 정보 표시 (제목, 설명, 상태, 우선순위, 카테고리, 담당자, 생성자, 생성일)
- 상태 변경 드롭다운 (변경 즉시 PUT 요청)
- 수정/삭제 버튼
- 하단에 코멘트 목록 및 코멘트 작성 폼 (다음 단계에서 구현)

Tailwind CSS로 테이블, 폼, 버튼, 배지(상태, 우선순위) 스타일링을 깔끔하게 적용하세요.

상태별 색상:
- open: blue
- in_progress: yellow
- resolved: green
- closed: gray

우선순위별 색상:
- low: gray
- medium: blue
- high: orange
- critical: red

기대 결과: 이슈 목록, 생성, 수정, 상세 페이지 React 컴포넌트가 완성됩니다. Inertia.js를 통해 Laravel 컨트롤러와 연동되며, CRUD 기능이 정상 작동합니다. 필터링 및 검색 UI가 구현됩니다.

5
Step 5
코멘트 기능을 추가하세요.

CommentController를 생성하고 store, destroy 메서드를 구현하세요:
```bash
php artisan make:controller CommentController
```

- store(): 코멘트 저장 (issue_id, content 필수)
- destroy($id): 코멘트 삭제 (본인이 작성한 코멘트만 삭제 가능하도록 권한 체크)

routes/web.php에 코멘트 라우트 추가:
```php
Route::middleware('auth')->group(function () {
    Route::post('issues/{issue}/comments', [CommentController::class, 'store'])->name('comments.store');
    Route::delete('comments/{comment}', [CommentController::class, 'destroy'])->name('comments.destroy');
});
```

Show.jsx 컴포넌트에 코멘트 섹션 추가:
- 코멘트 목록 표시 (작성자, 내용, 작성일, 삭제 버튼)
- 코멘트 작성 폼 (textarea + 제출 버튼)
- Inertia form helper로 POST /issues/{id}/comments
- 코멘트 삭제 시 DELETE /comments/{id}

코멘트는 시간순 정렬 (최신순)으로 표시하세요.

기대 결과: 코멘트 기능이 완성됩니다. 이슈 상세 페이지에서 코멘트 작성 및 삭제가 가능하며, 실시간으로 반영됩니다. 본인 코멘트만 삭제할 수 있습니다.

6
Step 6
대시보드 페이지를 추가하여 이슈 통계를 시각화하세요.

DashboardController를 생성하고 index 메서드를 구현하세요:
```bash
php artisan make:controller DashboardController
```

index 메서드에서 다음 통계 데이터를 계산하여 Inertia로 전달:
- 전체 이슈 수
- 상태별 이슈 수 (open, in_progress, resolved, closed)
- 우선순위별 이슈 수 (low, medium, high, critical)
- 카테고리별 이슈 수 (bug, feature, enhancement)
- 최근 생성된 이슈 5개

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

resources/js/Pages/Dashboard.jsx를 수정하여:
- 통계 카드 4개 (전체 이슈, Open 이슈, In Progress 이슈, Resolved 이슈)
- 차트 또는 바 그래프로 상태별/우선순위별 분포 표시 (간단한 CSS 바 차트로 구현 가능)
- 최근 이슈 목록 테이블
- "모든 이슈 보기" 버튼 (/issues로 이동)

Tailwind CSS로 대시보드 레이아웃을 깔끔하게 디자인하세요.

기대 결과: 대시보드 페이지가 완성되어 이슈 통계가 한눈에 보입니다. 상태별, 우선순위별 분포가 시각화되고, 최근 이슈 목록이 표시됩니다. 사용자가 로그인 후 대시보드를 먼저 보게 됩니다.

제출된 작품 (2)

로그인 후 제출

Laravel + Livewire 기반의 서버 중심 단일 애플리케이션 (monolith) 스택, 협업 기능을 갖춘 소규모 팀을 위한 심플한 이슈 추적 시스템 (작은 팀 내부 도구)

조회수 1545 댓글수 0 추천수 1

Laravel 프레임워크로 구축된 팀 협업용 이슈 트래커로, 버그 리포트 작성 및 진행 상태를 효율적으로 관리할 수 있습니다.

조회수 95 댓글수 0 추천수 1

댓글 (0)

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