팀 이슈 트래커 - 버그 리포트 & 진행 상태 관리
team-issue-tracker-laravel
문제 설명
프로젝트 개요
개발 팀이나 프로젝트 팀에서 발생하는 이슈(버그, 기능 요청, 개선 사항)를 체계적으로 관리하는 풀스택 이슈 트래커를 만듭니다. 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에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
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 마이그레이션이 완료되며, 로컬 서버가 정상 작동합니다. 기본 인증 화면이 표시됩니다.
이슈(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 관계가 설정됩니다. 데이터베이스 스키마가 완성됩니다.
이슈 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 로직이 포함됩니다.
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가 구현됩니다.
코멘트 기능을 추가하세요.
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}
코멘트는 시간순 정렬 (최신순)으로 표시하세요.
기대 결과: 코멘트 기능이 완성됩니다. 이슈 상세 페이지에서 코멘트 작성 및 삭제가 가능하며, 실시간으로 반영됩니다. 본인 코멘트만 삭제할 수 있습니다.
대시보드 페이지를 추가하여 이슈 통계를 시각화하세요.
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)
로그인 후 제출이슈 트래커 (ISSUE TRACKER)
Laravel + Livewire 기반의 서버 중심 단일 애플리케이션 (monolith) 스택, 협업 기능을 갖춘 소규모 팀을 위한 심플한 이슈 추적 시스템 (작은 팀 내부 도구)
팀 이슈 트래커 - Laravel 기반 버그 관리 시스템
Laravel 프레임워크로 구축된 팀 협업용 이슈 트래커로, 버그 리포트 작성 및 진행 상태를 효율적으로 관리할 수 있습니다.