mkdir circus-performance-review-gallery && cd circus-performance-review-gallery

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

다음 명령으로 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
```

그 다음, 데이터베이스를 SQLite로 설정하고 마이그레이션을 실행하세요:

1. `.env` 파일에서 DB_CONNECTION을 sqlite로 변경
2. `database/database.sqlite` 파일 생성 (touch database/database.sqlite)
3. `php artisan migrate`로 기본 테이블 생성

마지막으로 개발 서버를 실행하세요:

```bash
php artisan serve
```

브라우저에서 http://localhost:8000 접속하여 Laravel Breeze 기본 화면(로그인/회원가입)이 정상적으로 표시되는지 확인하세요.

서커스 공연(Performance)과 후기(Review), 댓글(Comment), 좋아요(ReviewLike) 모델을 생성하고 마이그레이션을 작성하세요.

**모델 & 마이그레이션 생성:**

```bash
php artisan make:model Performance -m
php artisan make:model Review -m
php artisan make:model Comment -m
php artisan make:model ReviewLike -m
```

**마이그레이션 파일 작성:**

1. `create_performances_table.php`:
   - id (bigIncrements)
   - title (string) - 공연 제목
   - description (text) - 공연 설명
   - poster_image (string, nullable) - 포스터 이미지 경로
   - start_date (date) - 공연 시작일
   - end_date (date) - 공연 종료일
   - timestamps

2. `create_reviews_table.php`:
   - id (bigIncrements)
   - performance_id (foreignId) - performances 테이블 참조 (onDelete cascade)
   - user_id (foreignId) - users 테이블 참조 (onDelete cascade)
   - rating (integer) - 별점 (1~5)
   - content (text) - 후기 내용
   - watched_at (date, nullable) - 관람 날짜
   - is_spoiler (boolean, default false) - 스포일러 여부
   - timestamps

3. `create_comments_table.php`:
   - id (bigIncrements)
   - review_id (foreignId) - reviews 테이블 참조 (onDelete cascade)
   - user_id (foreignId) - users 테이블 참조 (onDelete cascade)
   - content (text) - 댓글 내용
   - timestamps

4. `create_review_likes_table.php`:
   - id (bigIncrements)
   - review_id (foreignId) - reviews 테이블 참조 (onDelete cascade)
   - user_id (foreignId) - users 테이블 참조 (onDelete cascade)
   - timestamps
   - unique(['review_id', 'user_id']) - 중복 좋아요 방지

**모델 관계 설정:**

- `Performance.php`: `public function reviews() { return $this->hasMany(Review::class); }`
- `Review.php`: `public function performance() { return $this->belongsTo(Performance::class); }`, `public function user() { return $this->belongsTo(User::class); }`, `public function comments() { return $this->hasMany(Comment::class); }`, `public function likes() { return $this->hasMany(ReviewLike::class); }`
- `Comment.php`: `public function review() { return $this->belongsTo(Review::class); }`, `public function user() { return $this->belongsTo(User::class); }`
- `ReviewLike.php`: `public function review() { return $this->belongsTo(Review::class); }`, `public function user() { return $this->belongsTo(User::class); }`
- `User.php`에 `public function reviews() { return $this->hasMany(Review::class); }`와 `public function comments() { return $this->hasMany(Comment::class); }` 추가

마이그레이션 실행:

```bash
php artisan migrate
```

**테스트 데이터 시딩:**

`database/seeders/DatabaseSeeder.php`에서 더미 공연 데이터 3개 생성:

```php
Performance::create([
    'title' => '환상의 서커스: 빛과 그림자',
    'description' => '세계적인 서커스단이 선보이는 화려한 공중 곡예와 마술 쇼',
    'poster_image' => 'https://picsum.photos/seed/circus1/400/600',
    'start_date' => '2024-01-01',
    'end_date' => '2024-06-30',
]);
// 2개 더 추가...
```

시딩 실행:

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

공연 목록 페이지를 구현하세요.

**Laravel 컨트롤러 생성:**

```bash
php artisan make:controller PerformanceController
```

`app/Http/Controllers/PerformanceController.php`:

```php
public function index()
{
    $performances = Performance::withCount('reviews')
        ->withAvg('reviews', 'rating')
        ->get()
        ->map(function ($performance) {
            return [
                'id' => $performance->id,
                'title' => $performance->title,
                'description' => $performance->description,
                'poster_image' => $performance->poster_image,
                'start_date' => $performance->start_date,
                'end_date' => $performance->end_date,
                'reviews_count' => $performance->reviews_count,
                'average_rating' => round($performance->reviews_avg_rating, 1) ?? 0,
            ];
        });

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

**라우트 추가** (`routes/web.php`):

```php
use App\Http\Controllers\PerformanceController;

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

**React 컴포넌트 생성** (`resources/js/Pages/Performances/Index.jsx`):

```jsx
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link } from '@inertiajs/react';

export default function Index({ auth, performances }) {
    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-8">🎪 서커스 공연 목록</h1>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {performances.map((performance) => (
                            <Link
                                key={performance.id}
                                href={`/performances/${performance.id}`}
                                className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition"
                            >
                                <img
                                    src={performance.poster_image}
                                    alt={performance.title}
                                    className="w-full h-64 object-cover"
                                />
                                <div className="p-4">
                                    <h2 className="text-xl font-bold mb-2">{performance.title}</h2>
                                    <p className="text-gray-600 text-sm mb-3 line-clamp-2">
                                        {performance.description}
                                    </p>
                                    <div className="flex items-center justify-between">
                                        <div className="flex items-center">
                                            <span className="text-yellow-500 text-lg mr-1">⭐</span>
                                            <span className="font-semibold">
                                                {performance.average_rating || '평가 없음'}
                                            </span>
                                        </div>
                                        <span className="text-gray-500 text-sm">
                                            후기 {performance.reviews_count}개
                                        </span>
                                    </div>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

브라우저에서 `/performances` 접속하여 공연 목록이 카드 형태로 표시되는지 확인하세요.

공연 상세 페이지와 후기 목록을 구현하세요.

**컨트롤러 메서드 추가** (`PerformanceController.php`):

```php
public function show($id)
{
    $performance = Performance::with([
        'reviews' => function ($query) {
            $query->with(['user', 'comments.user', 'likes'])
                  ->withCount('likes')
                  ->latest();
        }
    ])->findOrFail($id);

    $reviews = $performance->reviews->map(function ($review) {
        return [
            'id' => $review->id,
            'rating' => $review->rating,
            'content' => $review->content,
            'watched_at' => $review->watched_at,
            'is_spoiler' => $review->is_spoiler,
            'created_at' => $review->created_at->diffForHumans(),
            'user' => [
                'name' => $review->user->name,
            ],
            'likes_count' => $review->likes_count,
            'comments' => $review->comments->map(function ($comment) {
                return [
                    'id' => $comment->id,
                    'content' => $comment->content,
                    'created_at' => $comment->created_at->diffForHumans(),
                    'user' => ['name' => $comment->user->name],
                ];
            }),
        ];
    });

    return Inertia::render('Performances/Show', [
        'performance' => [
            'id' => $performance->id,
            'title' => $performance->title,
            'description' => $performance->description,
            'poster_image' => $performance->poster_image,
            'start_date' => $performance->start_date,
            'end_date' => $performance->end_date,
        ],
        'reviews' => $reviews,
    ]);
}
```

**라우트 추가:**

```php
Route::get('/performances/{id}', [PerformanceController::class, 'show'])->name('performances.show');
```

**React 컴포넌트** (`resources/js/Pages/Performances/Show.jsx`):

```jsx
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link } from '@inertiajs/react';

export default function Show({ auth, performance, reviews }) {
    return (
        <AuthenticatedLayout user={auth.user}>
            <Head title={performance.title} />
            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white rounded-lg shadow-md p-6 mb-8">
                        <div className="flex flex-col md:flex-row gap-6">
                            <img
                                src={performance.poster_image}
                                alt={performance.title}
                                className="w-full md:w-1/3 rounded-lg"
                            />
                            <div className="flex-1">
                                <h1 className="text-3xl font-bold mb-4">{performance.title}</h1>
                                <p className="text-gray-700 mb-4">{performance.description}</p>
                                <p className="text-sm text-gray-500">
                                    공연 기간: {performance.start_date} ~ {performance.end_date}
                                </p>
                                <Link
                                    href={`/performances/${performance.id}/reviews/create`}
                                    className="mt-6 inline-block bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700"
                                >
                                    후기 작성하기
                                </Link>
                            </div>
                        </div>
                    </div>

                    <h2 className="text-2xl font-bold mb-4">관람객 후기 ({reviews.length})</h2>
                    <div className="space-y-4">
                        {reviews.map((review) => (
                            <div key={review.id} className="bg-white rounded-lg shadow p-6">
                                <div className="flex items-center justify-between mb-3">
                                    <div className="flex items-center gap-2">
                                        <span className="font-semibold">{review.user.name}</span>
                                        <span className="text-yellow-500">
                                            {'⭐'.repeat(review.rating)}
                                        </span>
                                    </div>
                                    <span className="text-sm text-gray-500">{review.created_at}</span>
                                </div>
                                <p className="text-gray-700 mb-3">{review.content}</p>
                                <div className="flex items-center gap-4 text-sm text-gray-500">
                                    <button className="flex items-center gap-1 hover:text-red-500">
                                        ❤️ {review.likes_count}
                                    </button>
                                    <span>💬 {review.comments.length}</span>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

브라우저에서 공연 상세 페이지 접속하여 후기 목록이 표시되는지 확인하세요.

후기 작성 폼을 구현하세요. 별점 선택, 텍스트 입력, 이미지 업로드(최대 3장) 기능을 포함합니다.

**컨트롤러 메서드 추가** (`ReviewController` 생성):

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

`app/Http/Controllers/ReviewController.php`:

```php
public function create($performanceId)
{
    $performance = Performance::findOrFail($performanceId);

    return Inertia::render('Reviews/Create', [
        'performance' => [
            'id' => $performance->id,
            'title' => $performance->title,
        ],
    ]);
}

public function store(Request $request, $performanceId)
{
    $validated = $request->validate([
        'rating' => 'required|integer|min:1|max:5',
        'content' => 'required|string|min:10',
        'watched_at' => 'nullable|date',
        'is_spoiler' => 'boolean',
        'images.*' => 'nullable|image|max:2048', // 최대 2MB
    ]);

    $review = Review::create([
        'performance_id' => $performanceId,
        'user_id' => auth()->id(),
        'rating' => $validated['rating'],
        'content' => $validated['content'],
        'watched_at' => $validated['watched_at'] ?? null,
        'is_spoiler' => $validated['is_spoiler'] ?? false,
    ]);

    // 이미지 업로드 처리 (다음 단계에서 구현)

    return redirect()->route('performances.show', $performanceId)
        ->with('success', '후기가 작성되었습니다!');
}
```

**라우트 추가:**

```php
use App\Http\Controllers\ReviewController;

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

**React 컴포넌트** (`resources/js/Pages/Reviews/Create.jsx`):

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

export default function Create({ auth, performance }) {
    const { data, setData, post, processing, errors } = useForm({
        rating: 5,
        content: '',
        watched_at: '',
        is_spoiler: false,
        images: [],
    });

    const [previewImages, setPreviewImages] = useState([]);

    const handleImageChange = (e) => {
        const files = Array.from(e.target.files).slice(0, 3); // 최대 3장
        setData('images', files);

        const previews = files.map((file) => URL.createObjectURL(file));
        setPreviewImages(previews);
    };

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

    return (
        <AuthenticatedLayout user={auth.user}>
            <Head title="후기 작성" />
            <div className="py-12">
                <div className="max-w-3xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white rounded-lg shadow-md p-6">
                        <h1 className="text-2xl font-bold mb-6">
                            {performance.title} 후기 작성
                        </h1>
                        <form onSubmit={handleSubmit} className="space-y-6">
                            <div>
                                <label className="block text-sm font-medium mb-2">별점</label>
                                <div className="flex gap-2">
                                    {[1, 2, 3, 4, 5].map((star) => (
                                        <button
                                            key={star}
                                            type="button"
                                            onClick={() => setData('rating', star)}
                                            className="text-3xl"
                                        >
                                            {star <= data.rating ? '⭐' : '☆'}
                                        </button>
                                    ))}
                                </div>
                                {errors.rating && (
                                    <p className="text-red-500 text-sm mt-1">{errors.rating}</p>
                                )}
                            </div>

                            <div>
                                <label className="block text-sm font-medium mb-2">후기 내용</label>
                                <textarea
                                    value={data.content}
                                    onChange={(e) => setData('content', e.target.value)}
                                    rows="6"
                                    className="w-full border rounded-lg p-3"
                                    placeholder="공연을 관람한 소감을 자유롭게 작성해주세요 (최소 10자)"
                                />
                                {errors.content && (
                                    <p className="text-red-500 text-sm mt-1">{errors.content}</p>
                                )}
                            </div>

                            <div>
                                <label className="block text-sm font-medium mb-2">관람 날짜 (선택)</label>
                                <input
                                    type="date"
                                    value={data.watched_at}
                                    onChange={(e) => setData('watched_at', e.target.value)}
                                    className="border rounded-lg p-2"
                                />
                            </div>

                            <div>
                                <label className="flex items-center gap-2">
                                    <input
                                        type="checkbox"
                                        checked={data.is_spoiler}
                                        onChange={(e) => setData('is_spoiler', e.target.checked)}
                                    />
                                    <span className="text-sm">스포일러 포함</span>
                                </label>
                            </div>

                            <div>
                                <label className="block text-sm font-medium mb-2">
                                    사진 업로드 (최대 3장)
                                </label>
                                <input
                                    type="file"
                                    accept="image/*"
                                    multiple
                                    onChange={handleImageChange}
                                    className="block"
                                />
                                <div className="flex gap-2 mt-3">
                                    {previewImages.map((src, index) => (
                                        <img
                                            key={index}
                                            src={src}
                                            alt={`Preview ${index + 1}`}
                                            className="w-24 h-24 object-cover rounded"
                                        />
                                    ))}
                                </div>
                            </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"
                            >
                                후기 등록하기
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

브라우저에서 후기 작성 폼이 정상적으로 표시되고, 별점 선택과 폼 제출이 작동하는지 확인하세요.

이미지 업로드 기능을 완성하고, 후기에 이미지를 첨부할 수 있도록 구현하세요.

**ReviewImage 모델 생성:**

```bash
php artisan make:model ReviewImage -m
```

**마이그레이션** (`create_review_images_table.php`):

```php
Schema::create('review_images', function (Blueprint $table) {
    $table->id();
    $table->foreignId('review_id')->constrained()->onDelete('cascade');
    $table->string('path'); // 이미지 저장 경로
    $table->timestamps();
});
```

마이그레이션 실행:

```bash
php artisan migrate
```

**모델 관계 추가:**

- `Review.php`: `public function images() { return $this->hasMany(ReviewImage::class); }`
- `ReviewImage.php`: `public function review() { return $this->belongsTo(Review::class); }`

**스토리지 링크 생성:**

```bash
php artisan storage:link
```

**컨트롤러 수정** (`ReviewController::store`):

```php
public function store(Request $request, $performanceId)
{
    $validated = $request->validate([
        'rating' => 'required|integer|min:1|max:5',
        'content' => 'required|string|min:10',
        'watched_at' => 'nullable|date',
        'is_spoiler' => 'boolean',
        'images.*' => 'nullable|image|max:2048',
    ]);

    $review = Review::create([
        'performance_id' => $performanceId,
        'user_id' => auth()->id(),
        'rating' => $validated['rating'],
        'content' => $validated['content'],
        'watched_at' => $validated['watched_at'] ?? null,
        'is_spoiler' => $validated['is_spoiler'] ?? false,
    ]);

    // 이미지 업로드 처리
    if ($request->hasFile('images')) {
        foreach ($request->file('images') as $image) {
            $path = $image->store('review-images', 'public');
            $review->images()->create(['path' => $path]);
        }
    }

    return redirect()->route('performances.show', $performanceId)
        ->with('success', '후기가 작성되었습니다!');
}
```

**공연 상세 페이지에서 이미지 표시** (`PerformanceController::show` 수정):

```php
$reviews = $performance->reviews->map(function ($review) {
    return [
        'id' => $review->id,
        'rating' => $review->rating,
        'content' => $review->content,
        'watched_at' => $review->watched_at,
        'is_spoiler' => $review->is_spoiler,
        'created_at' => $review->created_at->diffForHumans(),
        'user' => ['name' => $review->user->name],
        'likes_count' => $review->likes_count,
        'images' => $review->images->map(fn($img) => asset('storage/' . $img->path)),
        'comments' => $review->comments->map(function ($comment) {
            return [
                'id' => $comment->id,
                'content' => $comment->content,
                'created_at' => $comment->created_at->diffForHumans(),
                'user' => ['name' => $comment->user->name],
            ];
        }),
    ];
});
```

**Show.jsx에서 이미지 표시:**

```jsx
{review.images && review.images.length > 0 && (
    <div className="flex gap-2 mt-3">
        {review.images.map((imgUrl, index) => (
            <img
                key={index}
                src={imgUrl}
                alt={`후기 이미지 ${index + 1}`}
                className="w-32 h-32 object-cover rounded cursor-pointer"
            />
        ))}
    </div>
)}
```

후기 작성 후 이미지가 정상적으로 업로드되고 상세 페이지에 표시되는지 확인하세요.