🎭 공연 티켓 구독 서비스 - 월간 공연 큐레이션 & 자동 예매

mkdir performance-subscription-service && cd performance-subscription-service

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

프로젝트 초기 설정이 완료되면 다음을 확인하세요:
- resources/js/Pages/ 디렉토리에 Welcome.jsx 같은 예제 페이지가 있는지
- routes/web.php에 Inertia::render() 방식의 라우트가 있는지
- .env 파일에서 DB_CONNECTION=sqlite로 설정되어 있는지 (없으면 수정)
- database/database.sqlite 파일이 생성되었는지 (없으면 touch database/database.sqlite로 생성)

초기 설정 완료 후 브라우저에서 http://localhost:8000 접속하여 Laravel Breeze 환영 페이지가 표시되는지 확인하세요.

이제 데이터베이스 스키마를 설계합니다. 다음 3개의 마이그레이션 파일을 생성하세요:

```bash
php artisan make:migration create_subscription_plans_table
php artisan make:migration create_performances_table
php artisan make:migration create_subscriptions_table
php artisan make:migration create_reviews_table
```

각 마이그레이션 파일 내용:

**1. subscription_plans 테이블** (구독 플랜)
- id (primary key)
- name (string) - 플랜명 (예: "월간", "분기", "연간")
- price (decimal) - 가격
- duration_months (integer) - 기간(개월)
- benefits (text) - 혜택 설명 (JSON 형식)
- timestamps

**2. performances 테이블** (공연 정보)
- id (primary key)
- title (string) - 공연 제목
- genre (string) - 장르 (연극/뮤지컬/콘서트)
- description (text) - 공연 설명
- poster_url (string, nullable) - 포스터 이미지 URL
- venue (string) - 공연장
- date (date) - 공연 날짜
- available_seats (integer) - 잔여 좌석
- timestamps

**3. subscriptions 테이블** (구독 정보)
- id (primary key)
- user_id (foreign key to users)
- subscription_plan_id (foreign key to subscription_plans)
- preferred_genres (text) - 선호 장르 (JSON 배열)
- available_days (text) - 관람 가능 요일 (JSON 배열)
- status (string) - 구독 상태 (active/paused/cancelled)
- started_at (date) - 구독 시작일
- expires_at (date) - 만료일
- timestamps

**4. reviews 테이블** (공연 리뷰)
- id (primary key)
- user_id (foreign key to users)
- performance_id (foreign key to performances)
- rating (integer) - 별점 (1~5)
- content (text) - 리뷰 내용
- timestamps

마이그레이션 작성 후 `php artisan migrate`를 실행하여 테이블을 생성하세요.

그리고 다음 Eloquent 모델을 생성하세요:

```bash
php artisan make:model SubscriptionPlan
php artisan make:model Performance
php artisan make:model Subscription
php artisan make:model Review
```

각 모델에 관계 메서드를 추가하세요:
- Subscription 모델: belongsTo(User), belongsTo(SubscriptionPlan)
- Review 모델: belongsTo(User), belongsTo(Performance)
- Performance 모델: hasMany(Review)
- User 모델: hasMany(Subscription), hasMany(Review)

이제 시더(Seeder)를 작성하여 초기 데이터를 생성합니다.

```bash
php artisan make:seeder SubscriptionPlanSeeder
php artisan make:seeder PerformanceSeeder
```

**SubscriptionPlanSeeder**에서 3개의 플랜을 생성하세요:
- 월간 플랜: 29,000원, 1개월, 혜택: ["월 1회 공연 자동 예매", "구독자 전용 리뷰 게시판"]
- 분기 플랜: 79,000원, 3개월, 혜택: ["분기당 3회 공연", "공연 변경 1회 무료", "친구 초대 10% 할인"]
- 연간 플랜: 299,000원, 12개월, 혜택: ["연간 12회 공연", "VIP 좌석 우선 배정", "공연 변경 무제한"]

**PerformanceSeeder**에서 10개 이상의 공연 데이터를 생성하세요. 장르는 "연극", "뮤지컬", "콘서트" 중 랜덤으로 배정하고, 포스터 URL은 Unsplash Placeholder (https://source.unsplash.com/800x1200/?theater,musical,concert)를 사용하세요. 공연 날짜는 현재 날짜 기준 +7일 ~ +60일 사이로 랜덤 생성.

database/seeders/DatabaseSeeder.php에서 두 시더를 호출하도록 수정한 후:

```bash
php artisan db:seed
```

실행하여 데이터를 삽입하세요.

이제 메인 페이지와 구독 플랜 소개 페이지를 만듭니다.

routes/web.php에 다음 라우트를 추가하세요:

```php
use App\Models\SubscriptionPlan;
use App\Models\Performance;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home', [
        'plans' => SubscriptionPlan::all(),
        'featuredPerformances' => Performance::latest()->take(6)->get()
    ]);
});

Route::get('/plans', function () {
    return Inertia::render('Plans', [
        'plans' => SubscriptionPlan::all()
    ]);
});
```

resources/js/Pages/ 디렉토리에 다음 React 컴포넌트를 생성하세요:

**Home.jsx** (메인 페이지)
- 히어로 섹션: 서비스 소개 헤드라인 "매달 새로운 공연을 만나보세요", CTA 버튼 "구독 시작하기"
- 구독 플랜 카드 3개 나란히 배치 (Tailwind 그리드 사용)
- 이번 달 추천 공연 6개 썸네일 갤러리 (2행 3열 그리드)
- 각 공연 카드에 포스터 이미지, 제목, 장르 배지, 날짜 표시

**Plans.jsx** (구독 플랜 상세 페이지)
- 3개 플랜을 카드 형태로 비교 (가격, 기간, 혜택 목록)
- 각 카드에 "구독하기" 버튼 (아직 동작 안 함, 다음 단계에서 구현)
- Tailwind CSS로 호버 효과 (scale-105, shadow-xl 등) 추가

Tailwind CSS를 활용하여 반응형 디자인 적용 (모바일에서는 1열, 태블릿 2열, 데스크탑 3열).

이제 공연 목록 페이지와 상세 모달을 구현합니다.

routes/web.php에 다음 라우트를 추가하세요:

```php
Route::get('/performances', function () {
    $genre = request('genre');
    $query = Performance::query();
    if ($genre) {
        $query->where('genre', $genre);
    }
    return Inertia::render('Performances', [
        'performances' => $query->latest()->paginate(12),
        'selectedGenre' => $genre
    ]);
});

Route::get('/performances/{id}', function ($id) {
    $performance = Performance::with('reviews.user')->findOrFail($id);
    return Inertia::render('PerformanceDetail', [
        'performance' => $performance
    ]);
});
```

**Performances.jsx** 컴포넌트 생성:
- 상단에 장르 필터 버튼 3개 (전체/연극/뮤지컬/콘서트)
- 필터 버튼 클릭 시 ?genre=연극 같은 쿼리 파라미터를 URL에 추가하여 페이지 새로고침 (Inertia Link 사용)
- 공연 카드 12개씩 그리드 레이아웃으로 표시
- 각 카드 클릭 시 /performances/{id} 경로로 이동
- 페이지네이션 컴포넌트 추가 (Inertia 기본 페이지네이션 활용)

**PerformanceDetail.jsx** 컴포넌트 생성:
- 공연 포스터 이미지 크게 표시
- 제목, 장르, 공연장, 날짜, 잔여 좌석 정보
- 공연 설명 텍스트
- 하단에 "이 공연 리뷰 보기" 버튼 (다음 단계에서 리뷰 섹션 추가)
- 뒤로가기 버튼 (Inertia Link로 /performances로 이동)

Tailwind CSS로 카드 호버 애니메이션, 배지 스타일링 적용.

이제 구독 신청 폼과 마이페이지를 구현합니다.

먼저 컨트롤러를 생성하세요:

```bash
php artisan make:controller SubscriptionController
```

app/Http/Controllers/SubscriptionController.php에 다음 메서드를 추가하세요:

```php
public function create($planId)
{
    $plan = SubscriptionPlan::findOrFail($planId);
    return Inertia::render('SubscriptionForm', [
        'plan' => $plan,
        'genres' => ['연극', '뮤지컬', '콘서트'],
        'days' => ['월', '화', '수', '목', '금', '토', '일']
    ]);
}

public function store(Request $request)
{
    $validated = $request->validate([
        'subscription_plan_id' => 'required|exists:subscription_plans,id',
        'preferred_genres' => 'required|array',
        'available_days' => 'required|array'
    ]);

    $subscription = auth()->user()->subscriptions()->create([
        'subscription_plan_id' => $validated['subscription_plan_id'],
        'preferred_genres' => json_encode($validated['preferred_genres']),
        'available_days' => json_encode($validated['available_days']),
        'status' => 'active',
        'started_at' => now(),
        'expires_at' => now()->addMonths(SubscriptionPlan::find($validated['subscription_plan_id'])->duration_months)
    ]);

    return redirect()->route('my-subscription')->with('success', '구독이 완료되었습니다!');
}

public function mySubscription()
{
    $subscription = auth()->user()->subscriptions()->with('subscriptionPlan')->latest()->first();
    return Inertia::render('MySubscription', [
        'subscription' => $subscription
    ]);
}
```

routes/web.php에 라우트 추가:

```php
Route::middleware('auth')->group(function () {
    Route::get('/subscribe/{planId}', [SubscriptionController::class, 'create'])->name('subscribe.create');
    Route::post('/subscribe', [SubscriptionController::class, 'store'])->name('subscribe.store');
    Route::get('/my-subscription', [SubscriptionController::class, 'mySubscription'])->name('my-subscription');
});
```

**SubscriptionForm.jsx** 컴포넌트 생성:
- 선택한 플랜 정보 표시 (카드 형태)
- 선호 장르 체크박스 3개 (연극/뮤지컬/콘서트)
- 관람 가능 요일 체크박스 7개 (월~일)
- 결제 정보 입력 필드 (카드번호, 유효기간, CVV) - 실제 결제 연동은 하지 않고 UI만
- "구독 완료" 버튼 (Inertia 폼 제출)

**MySubscription.jsx** 컴포넌트 생성:
- 현재 구독 플랜 정보 (플랜명, 시작일, 만료일, 상태)
- 선호 장르 및 관람 가능 요일 표시
- "구독 취소" 버튼 (아직 동작 안 함, 추후 구현 가능)
- 이번 달 예정된 공연 목록 (아직 연동 안 됨, 다음 단계에서 추가)

Inertia useForm 훅을 사용하여 폼 상태 관리 및 제출 처리.

마지막으로 리뷰 작성 및 조회 기능을 추가합니다.

컨트롤러 생성:

```bash
php artisan make:controller ReviewController
```

app/Http/Controllers/ReviewController.php에 다음 메서드 추가:

```php
public function store(Request $request, $performanceId)
{
    $validated = $request->validate([
        'rating' => 'required|integer|min:1|max:5',
        'content' => 'required|string|min:10'
    ]);

    auth()->user()->reviews()->create([
        'performance_id' => $performanceId,
        'rating' => $validated['rating'],
        'content' => $validated['content']
    ]);

    return back()->with('success', '리뷰가 등록되었습니다!');
}

public function index()
{
    $reviews = Review::with(['user', 'performance'])
        ->latest()
        ->paginate(10);
    return Inertia::render('Reviews', [
        'reviews' => $reviews
    ]);
}
```

routes/web.php에 라우트 추가:

```php
Route::middleware('auth')->group(function () {
    Route::post('/performances/{performanceId}/reviews', [ReviewController::class, 'store'])->name('reviews.store');
    Route::get('/reviews', [ReviewController::class, 'index'])->name('reviews.index');
});
```

**PerformanceDetail.jsx 수정**:
- 하단에 리뷰 작성 폼 추가 (별점 선택 5개 별 아이콘, 리뷰 내용 textarea)
- 폼 제출 시 POST /performances/{id}/reviews로 전송 (Inertia useForm 사용)
- 해당 공연의 기존 리뷰 목록 표시 (작성자명, 별점, 내용, 작성일)

**Reviews.jsx** 컴포넌트 생성:
- 모든 리뷰 목록을 시간순으로 표시
- 각 리뷰 카드에 공연 제목, 작성자명, 별점(별 아이콘), 리뷰 내용, 작성일 표시
- 페이지네이션 추가

별점은 Heroicons의 StarIcon을 사용하여 채워진 별(text-yellow-400)과 빈 별(text-gray-300)로 표현.

이제 전체 프로젝트가 완성되었습니다. 다음을 확인하세요:
1. 회원가입/로그인 후 구독 신청 가능
2. 공연 목록 필터링 및 상세 페이지 이동
3. 공연 상세 페이지에서 리뷰 작성
4. 마이페이지에서 구독 정보 확인
5. 전체 리뷰 게시판에서 다른 사용자 리뷰 열람

최종적으로 npm run build로 프로덕션 빌드를 생성하고, php artisan serve로 서버를 실행하여 전체 기능을 테스트하세요.