🎪 서커스 공연 시즌 패스 판매 플랫폼 - 회차별 티켓 구매 & 관람 히스토리

mkdir circus-season-pass-platform && cd circus-season-pass-platform

이 폴더에서 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 build
```

- `.env` 파일에서 `DB_CONNECTION=sqlite`로 변경하고, `database/database.sqlite` 파일 생성
- `php artisan migrate` 실행하여 기본 인증 테이블 생성
- `php artisan serve`로 개발 서버 실행 (http://localhost:8000)
- 별도 터미널에서 `npm run dev` 실행 (Vite HMR)

프로젝트가 정상적으로 실행되고, 회원가입/로그인 페이지가 표시되는지 확인하세요.

### 기대 결과
- Laravel Breeze 기본 인증 시스템 동작
- React 컴포넌트가 Inertia.js를 통해 렌더링됨
- Tailwind CSS 스타일 적용됨

## 데이터베이스 마이그레이션 생성

다음 4개 테이블의 마이그레이션을 생성하세요:

### 1. season_passes 테이블
```bash
php artisan make:migration create_season_passes_table
```

컬럼:
- `id` (primary key)
- `name` (string, 시즌 패스 이름, 예: "봄 시즌 5회권")
- `description` (text, 설명)
- `price` (decimal, 가격)
- `included_performances` (integer, 포함 회차 수)
- `valid_from` (date, 유효기간 시작)
- `valid_until` (date, 유효기간 종료)
- `poster_image` (string, nullable, 포스터 이미지 경로)
- `timestamps`

### 2. purchases 테이블
```bash
php artisan make:migration create_purchases_table
```

컬럼:
- `id` (primary key)
- `user_id` (foreignId, users 테이블 참조, onDelete cascade)
- `season_pass_id` (foreignId, season_passes 테이블 참조, onDelete cascade)
- `customer_name` (string)
- `customer_email` (string)
- `customer_phone` (string)
- `purchased_at` (timestamp, 구매 날짜)
- `remaining_uses` (integer, 남은 사용 횟수, 기본값은 season_pass의 included_performances)
- `timestamps`

### 3. performances 테이블
```bash
php artisan make:migration create_performances_table
```

컬럼:
- `id` (primary key)
- `title` (string, 공연 제목)
- `description` (text)
- `performance_date` (dateTime, 공연 날짜/시간)
- `venue` (string, 공연 장소)
- `poster_image` (string, nullable)
- `timestamps`

### 4. checkins 테이블
```bash
php artisan make:migration create_checkins_table
```

컬럼:
- `id` (primary key)
- `purchase_id` (foreignId, purchases 테이블 참조, onDelete cascade)
- `performance_id` (foreignId, performances 테이블 참조, onDelete cascade)
- `checked_in_at` (timestamp, 체크인 시각)
- `rating` (integer, nullable, 1~5 별점)
- `review` (text, nullable, 후기)
- `timestamps`

모든 마이그레이션 파일을 작성한 후 `php artisan migrate`를 실행하세요.

### 기대 결과
- 4개 테이블이 SQLite 데이터베이스에 생성됨
- 외래 키 관계가 올바르게 설정됨

## Eloquent 모델 생성 및 관계 설정

다음 4개 모델을 생성하고 관계를 설정하세요:

### 1. SeasonPass 모델
```bash
php artisan make:model SeasonPass
```

`app/Models/SeasonPass.php`:
- `$fillable`: name, description, price, included_performances, valid_from, valid_until, poster_image
- `$casts`: valid_from, valid_until을 'date'로 캐스팅
- 관계: `public function purchases() { return $this->hasMany(Purchase::class); }`

### 2. Purchase 모델
```bash
php artisan make:model Purchase
```

`app/Models/Purchase.php`:
- `$fillable`: user_id, season_pass_id, customer_name, customer_email, customer_phone, purchased_at, remaining_uses
- `$casts`: purchased_at을 'datetime'으로 캐스팅
- 관계:
  - `public function user() { return $this->belongsTo(User::class); }`
  - `public function seasonPass() { return $this->belongsTo(SeasonPass::class); }`
  - `public function checkins() { return $this->hasMany(Checkin::class); }`

### 3. Performance 모델
```bash
php artisan make:model Performance
```

`app/Models/Performance.php`:
- `$fillable`: title, description, performance_date, venue, poster_image
- `$casts`: performance_date를 'datetime'으로 캐스팅
- 관계: `public function checkins() { return $this->hasMany(Checkin::class); }`

### 4. Checkin 모델
```bash
php artisan make:model Checkin
```

`app/Models/Checkin.php`:
- `$fillable`: purchase_id, performance_id, checked_in_at, rating, review
- `$casts`: checked_in_at을 'datetime'으로 캐스팅
- 관계:
  - `public function purchase() { return $this->belongsTo(Purchase::class); }`
  - `public function performance() { return $this->belongsTo(Performance::class); }`

모든 모델 파일을 작성하세요.

### 기대 결과
- 4개 Eloquent 모델이 생성되고, 관계가 올바르게 설정됨
- `php artisan tinker`에서 관계 메서드 호출 가능 (예: `SeasonPass::first()->purchases`)

## 시더(Seeder)로 샘플 데이터 생성

개발/테스트를 위해 샘플 데이터를 생성하세요.

### 1. SeasonPassSeeder
```bash
php artisan make:seeder SeasonPassSeeder
```

`database/seeders/SeasonPassSeeder.php`:
- 3개의 시즌 패스 생성 (예: "봄 시즌 5회권", "여름 시즌 10회권", "가을 시즌 3회권")
- 각 패스의 가격, 포함 회차 수, 유효기간 설정
- `SeasonPass::create([...])` 사용

### 2. PerformanceSeeder
```bash
php artisan make:seeder PerformanceSeeder
```

`database/seeders/PerformanceSeeder.php`:
- 10개 정도의 공연 회차 생성 (예: "서커스 오프닝 쇼", "공중 곡예 특집", "마술과 저글링의 밤" 등)
- 각 공연의 날짜, 장소 설정 (미래 날짜 포함)
- `Performance::create([...])` 사용

### 3. DatabaseSeeder에 등록
`database/seeders/DatabaseSeeder.php`의 `run()` 메서드에서:
```php
$this->call([
    SeasonPassSeeder::class,
    PerformanceSeeder::class,
]);
```

시더 실행:
```bash
php artisan db:seed
```

### 기대 결과
- season_passes 테이블에 3개 레코드
- performances 테이블에 10개 레코드
- `php artisan tinker`에서 `SeasonPass::count()`, `Performance::count()` 확인 가능

## 시즌 패스 목록 페이지 (홈) 구현

Laravel 컨트롤러와 React 컴포넌트를 생성하여 시즌 패스 목록을 표시하세요.

### 1. SeasonPassController 생성
```bash
php artisan make:controller SeasonPassController
```

`app/Http/Controllers/SeasonPassController.php`의 `index()` 메서드:
```php
public function index()
{
    $seasonPasses = SeasonPass::orderBy('valid_from', 'desc')->get();
    return Inertia::render('SeasonPass/Index', [
        'seasonPasses' => $seasonPasses
    ]);
}
```

### 2. 라우트 등록
`routes/web.php`에 추가:
```php
use App\Http\Controllers\SeasonPassController;

Route::get('/', [SeasonPassController::class, 'index'])->name('home');
```

### 3. React 컴포넌트 생성
`resources/js/Pages/SeasonPass/Index.jsx` 파일 생성:
- props로 `seasonPasses` 배열 받기
- Tailwind CSS로 카드 레이아웃 구현 (그리드 또는 flexbox)
- 각 카드에 패스 이름, 설명, 가격, 포함 회차 수, 유효기간 표시
- "자세히 보기" 버튼 추가 (아직 링크 없음, 다음 단계에서 구현)

예시 구조:
```jsx
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';

export default function Index({ auth, seasonPasses }) {
    return (
        <AuthenticatedLayout user={auth.user}>
            <Head title="시즌 패스 목록" />
            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <h1 className="text-3xl font-bold mb-6">🎪 시즌 패스 목록</h1>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        {seasonPasses.map(pass => (
                            <div key={pass.id} className="bg-white rounded-lg shadow-md p-6">
                                <h2 className="text-xl font-semibold mb-2">{pass.name}</h2>
                                <p className="text-gray-600 mb-4">{pass.description}</p>
                                <div className="text-2xl font-bold text-indigo-600 mb-2">
                                    {pass.price.toLocaleString()}원
                                </div>
                                <p className="text-sm text-gray-500 mb-4">
                                    포함 회차: {pass.included_performances}회
                                </p>
                                <p className="text-xs text-gray-400 mb-4">
                                    유효기간: {pass.valid_from} ~ {pass.valid_until}
                                </p>
                                <button className="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700">
                                    자세히 보기
                                </button>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

브라우저에서 http://localhost:8000 접속하여 시즌 패스 목록이 표시되는지 확인하세요.

### 기대 결과
- 홈 페이지에 시즌 패스 3개가 카드 형태로 표시됨
- 각 카드에 이름, 설명, 가격, 회차 수, 유효기간 표시
- Tailwind CSS 스타일 적용됨

## 시즌 패스 상세 페이지 & 구매 폼 구현

### 1. SeasonPassController에 show() 메서드 추가
`app/Http/Controllers/SeasonPassController.php`:
```php
public function show(SeasonPass $seasonPass)
{
    return Inertia::render('SeasonPass/Show', [
        'seasonPass' => $seasonPass
    ]);
}
```

### 2. 라우트 추가
`routes/web.php`:
```php
Route::get('/season-pass/{seasonPass}', [SeasonPassController::class, 'show'])->name('season-pass.show');
```

### 3. React 컴포넌트 생성
`resources/js/Pages/SeasonPass/Show.jsx`:
- props로 `seasonPass` 객체 받기
- 패스 상세 정보 표시 (이름, 설명, 가격, 포함 회차, 유효기간)
- 구매 폼 추가:
  - 고객 이름 (customer_name)
  - 이메일 (customer_email)
  - 전화번호 (customer_phone)
  - "구매하기" 버튼
- Inertia.js의 `useForm` 훅 사용하여 폼 데이터 관리
- 폼 제출 시 POST 요청 (다음 단계에서 구현)

예시:
```jsx
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, useForm } from '@inertiajs/react';

export default function Show({ auth, seasonPass }) {
    const { data, setData, post, processing, errors } = useForm({
        customer_name: auth.user?.name || '',
        customer_email: auth.user?.email || '',
        customer_phone: '',
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        post(route('purchase.store', seasonPass.id));
    };

    return (
        <AuthenticatedLayout user={auth.user}>
            <Head title={seasonPass.name} />
            <div className="py-12">
                <div className="max-w-4xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white rounded-lg shadow-md p-8">
                        <h1 className="text-3xl font-bold mb-4">{seasonPass.name}</h1>
                        <p className="text-gray-600 mb-6">{seasonPass.description}</p>
                        <div className="grid grid-cols-2 gap-4 mb-8">
                            <div>
                                <span className="text-gray-500">가격:</span>
                                <span className="ml-2 text-2xl font-bold text-indigo-600">
                                    {seasonPass.price.toLocaleString()}원
                                </span>
                            </div>
                            <div>
                                <span className="text-gray-500">포함 회차:</span>
                                <span className="ml-2 text-xl font-semibold">
                                    {seasonPass.included_performances}회
                                </span>
                            </div>
                            <div className="col-span-2">
                                <span className="text-gray-500">유효기간:</span>
                                <span className="ml-2">
                                    {seasonPass.valid_from} ~ {seasonPass.valid_until}
                                </span>
                            </div>
                        </div>

                        <form onSubmit={handleSubmit} className="space-y-4">
                            <h2 className="text-2xl font-semibold mb-4">구매 정보 입력</h2>
                            <div>
                                <label className="block text-sm font-medium mb-1">이름</label>
                                <input
                                    type="text"
                                    value={data.customer_name}
                                    onChange={e => setData('customer_name', e.target.value)}
                                    className="w-full border rounded px-3 py-2"
                                    required
                                />
                                {errors.customer_name && <p className="text-red-500 text-sm">{errors.customer_name}</p>}
                            </div>
                            <div>
                                <label className="block text-sm font-medium mb-1">이메일</label>
                                <input
                                    type="email"
                                    value={data.customer_email}
                                    onChange={e => setData('customer_email', e.target.value)}
                                    className="w-full border rounded px-3 py-2"
                                    required
                                />
                                {errors.customer_email && <p className="text-red-500 text-sm">{errors.customer_email}</p>}
                            </div>
                            <div>
                                <label className="block text-sm font-medium mb-1">전화번호</label>
                                <input
                                    type="tel"
                                    value={data.customer_phone}
                                    onChange={e => setData('customer_phone', e.target.value)}
                                    className="w-full border rounded px-3 py-2"
                                    required
                                />
                                {errors.customer_phone && <p className="text-red-500 text-sm">{errors.customer_phone}</p>}
                            </div>
                            <button
                                type="submit"
                                disabled={processing}
                                className="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 disabled:opacity-50"
                            >
                                {processing ? '처리 중...' : '구매하기'}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

### 4. Index.jsx의 "자세히 보기" 버튼 링크 연결
`resources/js/Pages/SeasonPass/Index.jsx`의 버튼을:
```jsx
import { Link } from '@inertiajs/react';

<Link
    href={route('season-pass.show', pass.id)}
    className="block w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 text-center"
>
    자세히 보기
</Link>
```

브라우저에서 시즌 패스 카드를 클릭하여 상세 페이지가 표시되는지 확인하세요.

### 기대 결과
- 시즌 패스 상세 페이지에 패스 정보와 구매 폼 표시
- 폼 필드에 기본값 자동 입력 (로그인한 사용자 이름/이메일)
- "구매하기" 버튼 클릭 시 아직 동작하지 않음 (다음 단계에서 구현)

## 구매 기능 구현 (Purchase 생성)

### 1. PurchaseController 생성
```bash
php artisan make:controller PurchaseController
```

`app/Http/Controllers/PurchaseController.php`의 `store()` 메서드:
```php
use App\Models\Purchase;
use App\Models\SeasonPass;
use Illuminate\Http\Request;

public function store(Request $request, SeasonPass $seasonPass)
{
    $validated = $request->validate([
        'customer_name' => 'required|string|max:255',
        'customer_email' => 'required|email|max:255',
        'customer_phone' => 'required|string|max:20',
    ]);

    Purchase::create([
        'user_id' => auth()->id(),
        'season_pass_id' => $seasonPass->id,
        'customer_name' => $validated['customer_name'],
        'customer_email' => $validated['customer_email'],
        'customer_phone' => $validated['customer_phone'],
        'purchased_at' => now(),
        'remaining_uses' => $seasonPass->included_performances,
    ]);

    return redirect()->route('my-passes')->with('success', '시즌 패스 구매가 완료되었습니다!');
}
```

### 2. 라우트 추가
`routes/web.php`:
```php
use App\Http\Controllers\PurchaseController;

Route::middleware('auth')->group(function () {
    Route::post('/purchase/{seasonPass}', [PurchaseController::class, 'store'])->name('purchase.store');
});
```

### 3. "내 패스" 페이지 컨트롤러 메서드 추가
`app/Http/Controllers/PurchaseController.php`에 `index()` 메서드 추가:
```php
public function index()
{
    $purchases = Purchase::with('seasonPass')
        ->where('user_id', auth()->id())
        ->orderBy('purchased_at', 'desc')
        ->get();

    return Inertia::render('Purchase/Index', [
        'purchases' => $purchases
    ]);
}
```

### 4. 라우트 추가
```php
Route::middleware('auth')->group(function () {
    Route::get('/my-passes', [PurchaseController::class, 'index'])->name('my-passes');
});
```

### 5. React 컴포넌트 생성
`resources/js/Pages/Purchase/Index.jsx`:
- props로 `purchases` 배열 받기
- 각 구매 내역을 카드로 표시 (시즌 패스 이름, 구매 날짜, 남은 회차 수)
- 프로그레스 바로 사용률 표시 (예: 5회 중 2회 사용 = 40%)

예시:
```jsx
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';

export default function Index({ auth, purchases }) {
    return (
        <AuthenticatedLayout user={auth.user}>
            <Head title="내 패스" />
            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <h1 className="text-3xl font-bold mb-6">🎟️ 내 패스</h1>
                    {purchases.length === 0 ? (
                        <p className="text-gray-500">구매한 패스가 없습니다.</p>
                    ) : (
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {purchases.map(purchase => {
                                const totalUses = purchase.season_pass.included_performances;
                                const usedUses = totalUses - purchase.remaining_uses;
                                const usagePercent = (usedUses / totalUses) * 100;

                                return (
                                    <div key={purchase.id} className="bg-white rounded-lg shadow-md p-6">
                                        <h2 className="text-xl font-semibold mb-2">{purchase.season_pass.name}</h2>
                                        <p className="text-sm text-gray-500 mb-4">
                                            구매일: {new Date(purchase.purchased_at).toLocaleDateString()}
                                        </p>
                                        <div className="mb-4">
                                            <div className="flex justify-between text-sm mb-1">
                                                <span>사용 현황</span>
                                                <span>{usedUses} / {totalUses}회</span>
                                            </div>
                                            <div className="w-full bg-gray-200 rounded-full h-2">
                                                <div
                                                    className="bg-indigo-600 h-2 rounded-full"
                                                    style={{ width: `${usagePercent}%` }}
                                                ></div>
                                            </div>
                                        </div>
                                        <p className="text-lg font-semibold text-indigo-600">
                                            남은 횟수: {purchase.remaining_uses}회
                                        </p>
                                    </div>
                                );
                            })}
                        </div>
                    )}
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

### 6. 네비게이션에 "내 패스" 링크 추가
`resources/js/Layouts/AuthenticatedLayout.jsx`의 네비게이션에:
```jsx
<Link href={route('my-passes')} className="...">
    내 패스
</Link>
```

시즌 패스를 구매하고, "내 패스" 페이지에서 구매 내역이 표시되는지 확인하세요.

### 기대 결과
- 시즌 패스 구매 시 Purchase 레코드가 생성됨
- "내 패스" 페이지에 구매한 패스 목록 표시
- 각 패스의 사용률이 프로그레스 바로 표시됨

## 공연 회차 목록 & 체크인 기능 구현

### 1. PerformanceController 생성
```bash
php artisan make:controller PerformanceController
```

`app/Http/Controllers/PerformanceController.php`의 `index()` 메서드:
```php
use App\Models\Performance;

public function index()
{
    $performances = Performance::orderBy('performance_date', 'asc')->get();
    return Inertia::render('Performance/Index', [
        'performances' => $performances
    ]);
}
```

### 2. 라우트 추가
`routes/web.php`:
```php
use App\Http\Controllers\PerformanceController;

Route::get('/performances', [PerformanceController::class, 'index'])->name('performances.index');
```

### 3. React 컴포넌트 생성
`resources/js/Pages/Performance/Index.jsx`:
- props로 `performances` 배열 받기
- 각 공연을 카드로 표시 (제목, 설명, 날짜, 장소)
- "체크인하기" 버튼 추가 (로그인한 사용자만 표시)

### 4. CheckinController 생성
```bash
php artisan make:controller CheckinController
```

`app/Http/Controllers/CheckinController.php`의 `store()` 메서드:
```php
use App\Models\Checkin;
use App\Models\Purchase;
use App\Models\Performance;
use Illuminate\Http\Request;

public function store(Request $request, Performance $performance)
{
    // 사용자의 패스 중 남은 횟수가 있는 것 찾기
    $purchase = Purchase::where('user_id', auth()->id())
        ->where('remaining_uses', '>', 0)
        ->first();

    if (!$purchase) {
        return back()->withErrors(['error' => '사용 가능한 패스가 없습니다.']);
    }

    // 이미 체크인했는지 확인
    $existingCheckin = Checkin::where('purchase_id', $purchase->id)
        ->where('performance_id', $performance->id)
        ->exists();

    if ($existingCheckin) {
        return back()->withErrors(['error' => '이미 체크인한 공연입니다.']);
    }

    // 체크인 생성
    Checkin::create([
        'purchase_id' => $purchase->id,
        'performance_id' => $performance->id,
        'checked_in_at' => now(),
    ]);

    // 남은 횟수 감소
    $purchase->decrement('remaining_uses');

    return back()->with('success', '체크인이 완료되었습니다!');
}
```

### 5. 라우트 추가
```php
Route::middleware('auth')->group(function () {
    Route::post('/checkin/{performance}', [CheckinController::class, 'store'])->name('checkin.store');
});
```

### 6. Performance/Index.jsx 업데이트
체크인 버튼 추가:
```jsx
import { useForm } from '@inertiajs/react';

export default function Index({ auth, performances }) {
    const { post, processing } = useForm();

    const handleCheckin = (performanceId) => {
        if (confirm('이 공연에 체크인하시겠습니까?')) {
            post(route('checkin.store', performanceId));
        }
    };

    return (
        <AuthenticatedLayout user={auth.user}>
            <Head title="공연 일정" />
            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <h1 className="text-3xl font-bold mb-6">🎪 공연 일정</h1>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {performances.map(performance => (
                            <div key={performance.id} className="bg-white rounded-lg shadow-md p-6">
                                <h2 className="text-xl font-semibold mb-2">{performance.title}</h2>
                                <p className="text-gray-600 mb-4">{performance.description}</p>
                                <p className="text-sm text-gray-500 mb-2">
                                    📅 {new Date(performance.performance_date).toLocaleString()}
                                </p>
                                <p className="text-sm text-gray-500 mb-4">
                                    📍 {performance.venue}
                                </p>
                                {auth.user && (
                                    <button
                                        onClick={() => handleCheckin(performance.id)}
                                        disabled={processing}
                                        className="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 disabled:opacity-50"
                                    >
                                        체크인하기
                                    </button>
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

### 7. 네비게이션에 "공연 일정" 링크 추가
`resources/js/Layouts/AuthenticatedLayout.jsx`:
```jsx
<Link href={route('performances.index')} className="...">
    공연 일정
</Link>
```

공연 일정 페이지에서 체크인하고, "내 패스" 페이지에서 남은 횟수가 감소했는지 확인하세요.

### 기대 결과
- 공연 일정 페이지에 모든 공연 표시
- 체크인 버튼 클릭 시 Checkin 레코드 생성 및 남은 횟수 감소
- 중복 체크인 방지
- 패스가 없으면 에러 메시지 표시

## 관람 히스토리 & 후기 기능 구현

### 1. PurchaseController에 show() 메서드 추가
`app/Http/Controllers/PurchaseController.php`:
```php
public function show(Purchase $purchase)
{
    // 본인의 패스만 조회 가능
    if ($purchase->user_id !== auth()->id()) {
        abort(403);
    }

    $purchase->load(['seasonPass', 'checkins.performance']);

    return Inertia::render('Purchase/Show', [
        'purchase' => $purchase
    ]);
}
```

### 2. 라우트 추가
```php
Route::middleware('auth')->group(function () {
    Route::get('/my-passes/{purchase}', [PurchaseController::class, 'show'])->name('my-passes.show');
});
```

### 3. React 컴포넌트 생성
`resources/js/Pages/Purchase/Show.jsx`:
- props로 `purchase` 객체 받기 (checkins 관계 포함)
- 패스 정보 표시 (이름, 구매일, 사용 현황)
- 관람 히스토리 타임라인 표시 (체크인한 공연 목록)
- 각 공연에 별점/후기 남기기 폼 추가

예시:
```jsx
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, useForm } from '@inertiajs/react';
import { useState } from 'react';

export default function Show({ auth, purchase }) {
    const [editingCheckin, setEditingCheckin] = useState(null);
    const { data, setData, put, processing } = useForm({
        rating: 0,
        review: '',
    });

    const handleReviewSubmit = (e, checkinId) => {
        e.preventDefault();
        put(route('checkin.update', checkinId), {
            onSuccess: () => setEditingCheckin(null),
        });
    };

    const totalUses = purchase.season_pass.included_performances;
    const usedUses = totalUses - purchase.remaining_uses;
    const usagePercent = (usedUses / totalUses) * 100;

    return (
        <AuthenticatedLayout user={auth.user}>
            <Head title="패스 상세" />
            <div className="py-12">
                <div className="max-w-4xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white rounded-lg shadow-md p-8 mb-6">
                        <h1 className="text-3xl font-bold mb-4">{purchase.season_pass.name}</h1>
                        <p className="text-sm text-gray-500 mb-4">
                            구매일: {new Date(purchase.purchased_at).toLocaleDateString()}
                        </p>
                        <div className="mb-4">
                            <div className="flex justify-between text-sm mb-1">
                                <span>사용 현황</span>
                                <span>{usedUses} / {totalUses}회</span>
                            </div>
                            <div className="w-full bg-gray-200 rounded-full h-3">
                                <div
                                    className="bg-indigo-600 h-3 rounded-full"
                                    style={{ width: `${usagePercent}%` }}
                                ></div>
                            </div>
                        </div>
                    </div>

                    <div className="bg-white rounded-lg shadow-md p-8">
                        <h2 className="text-2xl font-semibold mb-6">관람 히스토리</h2>
                        {purchase.checkins.length === 0 ? (
                            <p className="text-gray-500">아직 관람한 공연이 없습니다.</p>
                        ) : (
                            <div className="space-y-6">
                                {purchase.checkins.map(checkin => (
                                    <div key={checkin.id} className="border-l-4 border-indigo-600 pl-4">
                                        <h3 className="text-lg font-semibold">{checkin.performance.title}</h3>
                                        <p className="text-sm text-gray-500 mb-2">
                                            체크인: {new Date(checkin.checked_in_at).toLocaleString()}
                                        </p>
                                        <p className="text-sm text-gray-600 mb-2">
                                            📍 {checkin.performance.venue}
                                        </p>
                                        {checkin.rating ? (
                                            <div className="bg-gray-50 p-4 rounded">
                                                <div className="flex items-center mb-2">
                                                    <span className="text-yellow-500 text-xl">
                                                        {'⭐'.repeat(checkin.rating)}
                                                    </span>
                                                </div>
                                                <p className="text-gray-700">{checkin.review}</p>
                                            </div>
                                        ) : (
                                            editingCheckin === checkin.id ? (
                                                <form onSubmit={(e) => handleReviewSubmit(e, checkin.id)} className="bg-gray-50 p-4 rounded">
                                                    <div className="mb-3">
                                                        <label className="block text-sm font-medium mb-1">별점</label>
                                                        <select
                                                            value={data.rating}
                                                            onChange={e => setData('rating', e.target.value)}
                                                            className="w-full border rounded px-3 py-2"
                                                            required
                                                        >
                                                            <option value="">선택하세요</option>
                                                            <option value="1">⭐ 1점</option>
                                                            <option value="2">⭐⭐ 2점</option>
                                                            <option value="3">⭐⭐⭐ 3점</option>
                                                            <option value="4">⭐⭐⭐⭐ 4점</option>
                                                            <option value="5">⭐⭐⭐⭐⭐ 5점</option>
                                                        </select>
                                                    </div>
                                                    <div className="mb-3">
                                                        <label className="block text-sm font-medium mb-1">후기</label>
                                                        <textarea
                                                            value={data.review}
                                                            onChange={e => setData('review', e.target.value)}
                                                            className="w-full border rounded px-3 py-2"
                                                            rows="3"
                                                            placeholder="공연 소감을 남겨주세요"
                                                        />
                                                    </div>
                                                    <div className="flex gap-2">
                                                        <button
                                                            type="submit"
                                                            disabled={processing}
                                                            className="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700"
                                                        >
                                                            저장
                                                        </button>
                                                        <button
                                                            type="button"
                                                            onClick={() => setEditingCheckin(null)}
                                                            className="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400"
                                                        >
                                                            취소
                                                        </button>
                                                    </div>
                                                </form>
                                            ) : (
                                                <button
                                                    onClick={() => setEditingCheckin(checkin.id)}
                                                    className="text-indigo-600 hover:underline text-sm"
                                                >
                                                    후기 남기기
                                                </button>
                                            )
                                        )}
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

### 4. CheckinController에 update() 메서드 추가
`app/Http/Controllers/CheckinController.php`:
```php
public function update(Request $request, Checkin $checkin)
{
    // 본인의 체크인만 수정 가능
    if ($checkin->purchase->user_id !== auth()->id()) {
        abort(403);
    }

    $validated = $request->validate([
        'rating' => 'required|integer|min:1|max:5',
        'review' => 'nullable|string|max:1000',
    ]);

    $checkin->update($validated);

    return back()->with('success', '후기가 저장되었습니다!');
}
```

### 5. 라우트 추가
```php
Route::middleware('auth')->group(function () {
    Route::put('/checkin/{checkin}', [CheckinController::class, 'update'])->name('checkin.update');
});
```

### 6. Purchase/Index.jsx에서 패스 상세 링크 추가
각 패스 카드에 "상세 보기" 버튼 추가:
```jsx
import { Link } from '@inertiajs/react';

<Link
    href={route('my-passes.show', purchase.id)}
    className="block w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 text-center mt-4"
>
    상세 보기
</Link>
```

"내 패스" 페이지에서 패스를 클릭하여 관람 히스토리가 표시되는지 확인하고, 후기를 남겨보세요.

### 기대 결과
- 패스 상세 페이지에 체크인한 공연 목록이 타임라인으로 표시됨
- 각 공연에 별점/후기 남기기 가능
- 후기 저장 후 페이지에 바로 반영됨

## 최종 마무리 & 개선 사항

### 1. 플래시 메시지 표시 컴포넌트 추가
`resources/js/Components/FlashMessage.jsx` 생성:
```jsx
import { usePage } from '@inertiajs/react';
import { useEffect, useState } from 'react';

export default function FlashMessage() {
    const { flash } = usePage().props;
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        if (flash.success || flash.error) {
            setVisible(true);
            setTimeout(() => setVisible(false), 3000);
        }
    }, [flash]);

    if (!visible) return null;

    return (
        <div className="fixed top-4 right-4 z-50 animate-fade-in">
            {flash.success && (
                <div className="bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg">
                    ✓ {flash.success}
                </div>
            )}
            {flash.error && (
                <div className="bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg">
                    ✗ {flash.error}
                </div>
            )}
        </div>
    );
}
```

`resources/js/Layouts/AuthenticatedLayout.jsx`에 추가:
```jsx
import FlashMessage from '@/Components/FlashMessage';

// Layout 내부에
<FlashMessage />
```

### 2. 홈 페이지에 히어로 섹션 추가
`resources/js/Pages/SeasonPass/Index.jsx` 상단에:
```jsx
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-16 mb-8">
    <div className="max-w-7xl mx-auto text-center px-4">
        <h1 className="text-5xl font-bold mb-4">🎪 서커스 시즌 패스</h1>
        <p className="text-xl">여러 공연을 한 번에! 시즌 패스로 더 저렴하게 즐기세요</p>
    </div>
</div>
```

### 3. 패스 유효기간 검증 추가
`app/Http/Controllers/CheckinController.php`의 `store()` 메서드에 유효기간 체크 추가:
```php
// 패스 유효기간 확인
$seasonPass = $purchase->seasonPass;
if (now()->lt($seasonPass->valid_from) || now()->gt($seasonPass->valid_until)) {
    return back()->withErrors(['error' => '이 패스는 현재 사용할 수 없습니다.']);
}
```

### 4. 공연 날짜 필터링 (지나간 공연 표시)
`app/Http/Controllers/PerformanceController.php`:
```php
public function index()
{
    $upcomingPerformances = Performance::where('performance_date', '>=', now())
        ->orderBy('performance_date', 'asc')
        ->get();
    
    $pastPerformances = Performance::where('performance_date', '<', now())
        ->orderBy('performance_date', 'desc')
        ->get();

    return Inertia::render('Performance/Index', [
        'upcomingPerformances' => $upcomingPerformances,
        'pastPerformances' => $pastPerformances,
    ]);
}
```

`Performance/Index.jsx`에서 두 섹션으로 나누어 표시.

### 5. README.md 작성
프로젝트 루트에 `README.md` 생성:
```markdown
# 🎪 서커스 시즌 패스 플랫폼

Laravel 13.x + Inertia.js + React 19로 구현한 시즌 패스 판매 플랫폼입니다.

## 기능
- 시즌 패스 목록 및 상세 페이지
- 패스 구매 (주문 접수)
- 내 패스 대시보드 (사용 현황)
- 공연 일정 조회 및 체크인
- 관람 히스토리 & 별점/후기

## 설치 방법
```bash
composer install
npm install
cp .env.example .env
php artisan key:generate
touch database/database.sqlite
php artisan migrate --seed
npm run build
php artisan serve
```

## 기술 스택
- Laravel 13.x
- Inertia.js
- React 19
- Tailwind CSS
- SQLite
```

### 6. 최종 테스트
- 회원가입 → 시즌 패스 구매 → 공연 체크인 → 후기 남기기 전체 플로우 테스트
- 패스 남은 횟수가 0이 되면 체크인 불가 확인
- 중복 체크인 방지 확인
- 플래시 메시지 표시 확인

프로젝트가 완성되었습니다! 🎉

### 추가 개선 아이디어
- 패스 선물하기 (이메일 전송)
- QR 코드 생성/스캔 체크인
- 관리자 페이지 (패스 판매 통계)
- 결제 연동 (Stripe, Toss Payments)
- 이메일 알림 (구매 확인, 공연 리마인더)
- 패스 환불 기능
- 공연 포스터 이미지 업로드