🎬 영화 큐레이션 구독 서비스 - 취향 기반 월간 추천 플랫폼

mkdir movie-curation-subscription-service && cd movie-curation-subscription-service

이 폴더에서 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` 파일을 열고 SQLite로 변경:

```
DB_CONNECTION=sqlite
# DB_HOST, DB_PORT, DB_DATABASE 등 주석 처리
```

`database/database.sqlite` 파일 생성:

```bash
touch database/database.sqlite
```

# 마이그레이션 생성

다음 테이블을 위한 마이그레이션을 생성하세요:

1. `profiles` 테이블:
   - user_id (foreignId, users 테이블 참조)
   - favorite_genres (json, nullable) - ["액션", "드라마", "스릴러"] 형식
   - favorite_directors (json, nullable) - ["봉준호", "크리스토퍼 놀란"] 형식
   - favorite_actors (json, nullable)
   - preferred_countries (json, nullable) - ["한국", "미국", "일본"] 형식
   - mood_preferences (json, nullable) - ["감동", "스릴", "유쾌함"] 형식
   - timestamps

2. `subscriptions` 테이블:
   - user_id (foreignId)
   - plan (string) - 'basic', 'standard', 'premium'
   - started_at (date)
   - expires_at (date)
   - status (string) - 'active', 'expired', 'canceled'
   - timestamps

3. `movies` 테이블:
   - title (string)
   - director (string)
   - cast (json) - ["배우1", "배우2"] 형식
   - genres (json) - ["액션", "드라마"] 형식
   - plot (text) - 줄거리
   - poster_url (string, nullable)
   - release_year (integer)
   - runtime (integer) - 분 단위
   - country (string)
   - timestamps

4. `curations` 테이블:
   - user_id (foreignId)
   - movie_id (foreignId)
   - reason (text) - 추천 이유
   - month (string) - '2025-01' 형식
   - timestamps

5. `watch_history` 테이블:
   - user_id (foreignId)
   - movie_id (foreignId)
   - rating (integer, nullable) - 1~5점
   - watched_at (date)
   - timestamps

6. `wishlists` 테이블:
   - user_id (foreignId)
   - movie_id (foreignId)
   - timestamps

마이그레이션 생성 명령어:

```bash
php artisan make:migration create_profiles_table
php artisan make:migration create_subscriptions_table
php artisan make:migration create_movies_table
php artisan make:migration create_curations_table
php artisan make:migration create_watch_history_table
php artisan make:migration create_wishlists_table
```

각 마이그레이션 파일을 열어 위 스키마대로 작성한 후 실행:

```bash
php artisan migrate
```

# 모델 생성

```bash
php artisan make:model Profile
php artisan make:model Subscription
php artisan make:model Movie
php artisan make:model Curation
php artisan make:model WatchHistory
php artisan make:model Wishlist
```

각 모델에 관계(hasMany, belongsTo) 설정:

- User hasOne Profile
- User hasMany Subscriptions
- User hasMany WatchHistory
- User hasMany Wishlists
- Movie hasMany Curations
- Movie hasMany WatchHistory

모델에서 JSON 컬럼은 `protected $casts = ['favorite_genres' => 'array', ...]` 설정.

완료 후 `php artisan serve`로 서버 실행 확인.

# 시드 데이터 생성

영화 데이터 50개를 시딩하세요.

`database/seeders/MovieSeeder.php` 생성:

```bash
php artisan make:seeder MovieSeeder
```

`MovieSeeder.php` 내용:

```php
use App\Models\Movie;
use Illuminate\Database\Seeder;

class MovieSeeder extends Seeder
{
    public function run()
    {
        $movies = [
            [
                'title' => '기생충',
                'director' => '봉준호',
                'cast' => ['송강호', '이선균', '조여정'],
                'genres' => ['드라마', '스릴러'],
                'plot' => '전원 백수인 기택 가족이 사기와 위장으로 박 사장 가족에게 침투하는 이야기.',
                'poster_url' => 'https://via.placeholder.com/300x450?text=Parasite',
                'release_year' => 2019,
                'runtime' => 132,
                'country' => '한국',
            ],
            [
                'title' => '인터스텔라',
                'director' => '크리스토퍼 놀란',
                'cast' => ['매튜 맥커너히', '앤 해서웨이'],
                'genres' => ['SF', '드라마'],
                'plot' => '지구의 종말을 막기 위해 우주로 떠난 탐험대의 이야기.',
                'poster_url' => 'https://via.placeholder.com/300x450?text=Interstellar',
                'release_year' => 2014,
                'runtime' => 169,
                'country' => '미국',
            ],
            // ... 총 50개 영화 데이터 추가 (다양한 장르, 감독, 국가)
            // 장르: 액션, 드라마, 코미디, 로맨스, 스릴러, 공포, SF, 애니메이션, 다큐멘터리, 범죄
            // 감독: 봉준호, 박찬욱, 크리스토퍼 놀란, 쿠엔틴 타란티노, 스티븐 스필버그, 마틴 스콜세지, 웨스 앤더슨 등
            // 국가: 한국, 미국, 일본, 프랑스, 영국 등
        ];

        foreach ($movies as $movie) {
            Movie::create($movie);
        }
    }
}
```

`DatabaseSeeder.php`에서 호출:

```php
public function run()
{
    $this->call(MovieSeeder::class);
}
```

실행:

```bash
php artisan db:seed --class=MovieSeeder
```

# 컨트롤러 생성

```bash
php artisan make:controller ProfileController
php artisan make:controller SubscriptionController
php artisan make:controller CurationController
php artisan make:controller WatchHistoryController
php artisan make:controller WishlistController
```

각 컨트롤러에 기본 메서드 추가:

- ProfileController: `edit`, `update` (취향 프로필 수정)
- SubscriptionController: `index`, `store` (구독 플랜 보기, 신청)
- CurationController: `index` (월간 큐레이션 목록)
- WatchHistoryController: `index`, `store` (시청 기록, 별점 저장)
- WishlistController: `index`, `store`, `destroy` (위시리스트 CRUD)

완료 후 `php artisan route:list`로 라우트 확인.

# 라우트 설정

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

```php
use App\Http\Controllers\ProfileController;
use App\Http\Controllers\SubscriptionController;
use App\Http\Controllers\CurationController;
use App\Http\Controllers\WatchHistoryController;
use App\Http\Controllers\WishlistController;

Route::middleware(['auth'])->group(function () {
    // 취향 프로필
    Route::get('/profile/preferences', [ProfileController::class, 'edit'])->name('profile.preferences.edit');
    Route::post('/profile/preferences', [ProfileController::class, 'update'])->name('profile.preferences.update');

    // 구독 관리
    Route::get('/subscriptions', [SubscriptionController::class, 'index'])->name('subscriptions.index');
    Route::post('/subscriptions', [SubscriptionController::class, 'store'])->name('subscriptions.store');

    // 월간 큐레이션
    Route::get('/curations', [CurationController::class, 'index'])->name('curations.index');

    // 시청 기록
    Route::get('/watch-history', [WatchHistoryController::class, 'index'])->name('watch-history.index');
    Route::post('/watch-history', [WatchHistoryController::class, 'store'])->name('watch-history.store');

    // 위시리스트
    Route::get('/wishlist', [WishlistController::class, 'index'])->name('wishlist.index');
    Route::post('/wishlist', [WishlistController::class, 'store'])->name('wishlist.store');
    Route::delete('/wishlist/{movie}', [WishlistController::class, 'destroy'])->name('wishlist.destroy');
});
```

# ProfileController 구현

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

```php
use Inertia\Inertia;
use Illuminate\Http\Request;

class ProfileController extends Controller
{
    public function edit()
    {
        $profile = auth()->user()->profile;
        
        return Inertia::render('Profile/Preferences', [
            'profile' => $profile,
        ]);
    }

    public function update(Request $request)
    {
        $validated = $request->validate([
            'favorite_genres' => 'array',
            'favorite_directors' => 'array',
            'favorite_actors' => 'array',
            'preferred_countries' => 'array',
            'mood_preferences' => 'array',
        ]);

        auth()->user()->profile()->updateOrCreate(
            ['user_id' => auth()->id()],
            $validated
        );

        return redirect()->route('curations.index')->with('success', '취향 프로필이 저장되었습니다!');
    }
}
```

# React 페이지 컴포넌트 생성

`resources/js/Pages/Profile/Preferences.jsx` 생성:

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

export default function Preferences({ auth, profile }) {
    const { data, setData, post, processing } = useForm({
        favorite_genres: profile?.favorite_genres || [],
        favorite_directors: profile?.favorite_directors || [],
        favorite_actors: profile?.favorite_actors || [],
        preferred_countries: profile?.preferred_countries || [],
        mood_preferences: profile?.mood_preferences || [],
    });

    const genres = ['액션', '드라마', '코미디', '로맨스', '스릴러', '공포', 'SF', '애니메이션'];
    const countries = ['한국', '미국', '일본', '프랑스', '영국', '중국'];
    const moods = ['감동', '스릴', '유쾌함', '긴장감', '잔잔함', '몰입감'];

    const toggleArray = (array, value) => {
        if (array.includes(value)) {
            return array.filter(item => item !== value);
        }
        return [...array, value];
    };

    const submit = (e) => {
        e.preventDefault();
        post(route('profile.preferences.update'));
    };

    return (
        <AuthenticatedLayout user={auth.user}>
            <div className="max-w-4xl mx-auto py-12 px-4">
                <h1 className="text-3xl font-bold mb-8">취향 프로필 설정</h1>
                
                <form onSubmit={submit} className="space-y-8">
                    {/* 선호 장르 */}
                    <div>
                        <h2 className="text-xl font-semibold mb-4">좋아하는 장르 (복수 선택)</h2>
                        <div className="grid grid-cols-4 gap-3">
                            {genres.map(genre => (
                                <button
                                    key={genre}
                                    type="button"
                                    onClick={() => setData('favorite_genres', toggleArray(data.favorite_genres, genre))}
                                    className={`py-2 px-4 rounded-lg border-2 transition ${
                                        data.favorite_genres.includes(genre)
                                            ? 'bg-blue-500 text-white border-blue-500'
                                            : 'bg-white text-gray-700 border-gray-300 hover:border-blue-300'
                                    }`}
                                >
                                    {genre}
                                </button>
                            ))}
                        </div>
                    </div>

                    {/* 선호 국가 */}
                    <div>
                        <h2 className="text-xl font-semibold mb-4">선호 국가</h2>
                        <div className="grid grid-cols-3 gap-3">
                            {countries.map(country => (
                                <button
                                    key={country}
                                    type="button"
                                    onClick={() => setData('preferred_countries', toggleArray(data.preferred_countries, country))}
                                    className={`py-2 px-4 rounded-lg border-2 transition ${
                                        data.preferred_countries.includes(country)
                                            ? 'bg-green-500 text-white border-green-500'
                                            : 'bg-white text-gray-700 border-gray-300 hover:border-green-300'
                                    }`}
                                >
                                    {country}
                                </button>
                            ))}
                        </div>
                    </div>

                    {/* 분위기 선호 */}
                    <div>
                        <h2 className="text-xl font-semibold mb-4">원하는 분위기</h2>
                        <div className="grid grid-cols-3 gap-3">
                            {moods.map(mood => (
                                <button
                                    key={mood}
                                    type="button"
                                    onClick={() => setData('mood_preferences', toggleArray(data.mood_preferences, mood))}
                                    className={`py-2 px-4 rounded-lg border-2 transition ${
                                        data.mood_preferences.includes(mood)
                                            ? 'bg-purple-500 text-white border-purple-500'
                                            : 'bg-white text-gray-700 border-gray-300 hover:border-purple-300'
                                    }`}
                                >
                                    {mood}
                                </button>
                            ))}
                        </div>
                    </div>

                    {/* 좋아하는 감독 (텍스트 입력) */}
                    <div>
                        <h2 className="text-xl font-semibold mb-4">좋아하는 감독 (쉼표로 구분)</h2>
                        <input
                            type="text"
                            value={data.favorite_directors.join(', ')}
                            onChange={(e) => setData('favorite_directors', e.target.value.split(',').map(s => s.trim()).filter(Boolean))}
                            className="w-full px-4 py-2 border border-gray-300 rounded-lg"
                            placeholder="예: 봉준호, 크리스토퍼 놀란, 박찬욱"
                        />
                    </div>

                    {/* 좋아하는 배우 */}
                    <div>
                        <h2 className="text-xl font-semibold mb-4">좋아하는 배우 (쉼표로 구분)</h2>
                        <input
                            type="text"
                            value={data.favorite_actors.join(', ')}
                            onChange={(e) => setData('favorite_actors', e.target.value.split(',').map(s => s.trim()).filter(Boolean))}
                            className="w-full px-4 py-2 border border-gray-300 rounded-lg"
                            placeholder="예: 송강호, 레오나르도 디카프리오"
                        />
                    </div>

                    <button
                        type="submit"
                        disabled={processing}
                        className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition disabled:opacity-50"
                    >
                        저장하기
                    </button>
                </form>
            </div>
        </AuthenticatedLayout>
    );
}
```

완료 후 `/profile/preferences` 접속하여 취향 프로필 설정 페이지 확인.

# SubscriptionController 구현

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

```php
use Inertia\Inertia;
use Illuminate\Http\Request;
use App\Models\Subscription;

class SubscriptionController extends Controller
{
    public function index()
    {
        $currentSubscription = auth()->user()->subscriptions()->latest()->first();
        
        $plans = [
            [
                'name' => 'Basic',
                'price' => '9,900원/월',
                'limit' => '월 5편',
                'features' => ['기본 큐레이션', '시청 기록', '위시리스트'],
            ],
            [
                'name' => 'Standard',
                'price' => '14,900원/월',
                'limit' => '월 10편',
                'features' => ['고급 큐레이션', '통계 분석', '우선 지원'],
            ],
            [
                'name' => 'Premium',
                'price' => '19,900원/월',
                'limit' => '무제한',
                'features' => ['VIP 큐레이션', '실시간 알림', '전담 큐레이터'],
            ],
        ];

        return Inertia::render('Subscriptions/Index', [
            'plans' => $plans,
            'currentSubscription' => $currentSubscription,
        ]);
    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'plan' => 'required|in:basic,standard,premium',
        ]);

        // 기존 구독 만료 처리
        auth()->user()->subscriptions()->where('status', 'active')->update(['status' => 'expired']);

        // 새 구독 생성
        Subscription::create([
            'user_id' => auth()->id(),
            'plan' => $validated['plan'],
            'started_at' => now(),
            'expires_at' => now()->addMonth(),
            'status' => 'active',
        ]);

        return redirect()->route('curations.index')->with('success', '구독이 시작되었습니다!');
    }
}
```

# React 페이지 생성

`resources/js/Pages/Subscriptions/Index.jsx`:

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

export default function Index({ auth, plans, currentSubscription }) {
    const { data, setData, post, processing } = useForm({
        plan: 'standard',
    });

    const submit = (e) => {
        e.preventDefault();
        post(route('subscriptions.store'));
    };

    return (
        <AuthenticatedLayout user={auth.user}>
            <div className="max-w-6xl mx-auto py-12 px-4">
                <h1 className="text-4xl font-bold text-center mb-4">구독 플랜 선택</h1>
                <p className="text-center text-gray-600 mb-12">당신에게 맞는 플랜을 선택하세요</p>

                {currentSubscription && currentSubscription.status === 'active' && (
                    <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-8">
                        현재 <strong>{currentSubscription.plan.toUpperCase()}</strong> 플랜 구독 중입니다. (만료일: {new Date(currentSubscription.expires_at).toLocaleDateString()})
                    </div>
                )}

                <div className="grid grid-cols-3 gap-8 mb-12">
                    {plans.map((plan) => (
                        <div
                            key={plan.name}
                            className={`border-2 rounded-xl p-6 transition hover:shadow-lg ${
                                data.plan === plan.name.toLowerCase()
                                    ? 'border-blue-500 bg-blue-50'
                                    : 'border-gray-300'
                            }`}
                        >
                            <h2 className="text-2xl font-bold mb-2">{plan.name}</h2>
                            <p className="text-3xl font-bold text-blue-600 mb-1">{plan.price}</p>
                            <p className="text-gray-600 mb-4">{plan.limit}</p>
                            <ul className="space-y-2 mb-6">
                                {plan.features.map((feature, index) => (
                                    <li key={index} className="flex items-center">
                                        <span className="text-green-500 mr-2">✓</span>
                                        {feature}
                                    </li>
                                ))}
                            </ul>
                            <button
                                type="button"
                                onClick={() => setData('plan', plan.name.toLowerCase())}
                                className={`w-full py-2 rounded-lg font-semibold transition ${
                                    data.plan === plan.name.toLowerCase()
                                        ? 'bg-blue-600 text-white'
                                        : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                                }`}
                            >
                                {data.plan === plan.name.toLowerCase() ? '선택됨' : '선택하기'}
                            </button>
                        </div>
                    ))}
                </div>

                <form onSubmit={submit} className="max-w-md mx-auto">
                    <button
                        type="submit"
                        disabled={processing}
                        className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition disabled:opacity-50"
                    >
                        구독 시작하기
                    </button>
                </form>
            </div>
        </AuthenticatedLayout>
    );
}
```

완료 후 `/subscriptions` 접속하여 구독 플랜 선택 페이지 확인.

# CurationController 구현 (월간 추천 영화)

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

```php
use Inertia\Inertia;
use App\Models\Movie;
use App\Models\Curation;

class CurationController extends Controller
{
    public function index()
    {
        $user = auth()->user();
        $profile = $user->profile;
        $subscription = $user->subscriptions()->where('status', 'active')->latest()->first();

        if (!$subscription) {
            return redirect()->route('subscriptions.index')->with('error', '구독이 필요합니다.');
        }

        // 이번 달 큐레이션 확인
        $currentMonth = now()->format('Y-m');
        $existingCurations = Curation::where('user_id', $user->id)
            ->where('month', $currentMonth)
            ->with('movie')
            ->get();

        // 큐레이션이 없으면 생성
        if ($existingCurations->isEmpty()) {
            $limit = match($subscription->plan) {
                'basic' => 5,
                'standard' => 10,
                'premium' => 20,
            };

            // 취향 기반 영화 필터링
            $query = Movie::query();

            if ($profile && !empty($profile->favorite_genres)) {
                $query->where(function($q) use ($profile) {
                    foreach ($profile->favorite_genres as $genre) {
                        $q->orWhereJsonContains('genres', $genre);
                    }
                });
            }

            $movies = $query->inRandomOrder()->limit($limit)->get();

            foreach ($movies as $movie) {
                $reason = $this->generateReason($movie, $profile);
                Curation::create([
                    'user_id' => $user->id,
                    'movie_id' => $movie->id,
                    'reason' => $reason,
                    'month' => $currentMonth,
                ]);
            }

            $existingCurations = Curation::where('user_id', $user->id)
                ->where('month', $currentMonth)
                ->with('movie')
                ->get();
        }

        // 시청 기록 가져오기
        $watchedMovieIds = $user->watchHistory()->pluck('movie_id')->toArray();

        return Inertia::render('Curations/Index', [
            'curations' => $existingCurations,
            'watchedMovieIds' => $watchedMovieIds,
        ]);
    }

    private function generateReason($movie, $profile)
    {
        $reasons = [];

        if ($profile && !empty($profile->favorite_genres)) {
            $matchedGenres = array_intersect($movie->genres, $profile->favorite_genres);
            if (!empty($matchedGenres)) {
                $reasons[] = "당신이 좋아하는 " . implode(', ', $matchedGenres) . " 장르";
            }
        }

        if ($profile && in_array($movie->director, $profile->favorite_directors ?? [])) {
            $reasons[] = "좋아하는 감독 {$movie->director}의 작품";
        }

        if (empty($reasons)) {
            $reasons[] = "평점 높은 추천작";
        }

        return implode(' | ', $reasons);
    }
}
```

# React 페이지 생성

`resources/js/Pages/Curations/Index.jsx`:

```jsx
import { router } from '@inertiajs/react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';

export default function Index({ auth, curations, watchedMovieIds }) {
    const markAsWatched = (movieId) => {
        router.post(route('watch-history.store'), {
            movie_id: movieId,
            watched_at: new Date().toISOString().split('T')[0],
        });
    };

    return (
        <AuthenticatedLayout user={auth.user}>
            <div className="max-w-7xl mx-auto py-12 px-4">
                <h1 className="text-4xl font-bold mb-2">이번 달 큐레이션</h1>
                <p className="text-gray-600 mb-8">당신을 위해 선별한 {curations.length}편의 영화</p>

                <div className="grid grid-cols-4 gap-6">
                    {curations.map((curation) => (
                        <div key={curation.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition">
                            <img
                                src={curation.movie.poster_url}
                                alt={curation.movie.title}
                                className="w-full h-64 object-cover"
                            />
                            <div className="p-4">
                                <h3 className="font-bold text-lg mb-1">{curation.movie.title}</h3>
                                <p className="text-sm text-gray-600 mb-2">{curation.movie.director} | {curation.movie.release_year}</p>
                                <p className="text-xs text-blue-600 mb-3">{curation.reason}</p>
                                <div className="flex gap-1 mb-3">
                                    {curation.movie.genres.map((genre, index) => (
                                        <span key={index} className="text-xs bg-gray-200 px-2 py-1 rounded">
                                            {genre}
                                        </span>
                                    ))}
                                </div>
                                {watchedMovieIds.includes(curation.movie.id) ? (
                                    <span className="text-green-600 text-sm font-semibold">✓ 시청 완료</span>
                                ) : (
                                    <button
                                        onClick={() => markAsWatched(curation.movie.id)}
                                        className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition text-sm"
                                    >
                                        시청 완료 표시
                                    </button>
                                )}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

완료 후 `/curations` 접속하여 월간 큐레이션 목록 확인.

# WatchHistoryController & 시청 기록 페이지 구현

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

```php
use Inertia\Inertia;
use Illuminate\Http\Request;
use App\Models\WatchHistory;
use Illuminate\Support\Facades\DB;

class WatchHistoryController extends Controller
{
    public function index()
    {
        $user = auth()->user();
        
        // 시청 기록 타임라인
        $history = WatchHistory::where('user_id', $user->id)
            ->with('movie')
            ->orderBy('watched_at', 'desc')
            ->get();

        // 통계 계산
        $totalWatched = $history->count();
        $averageRating = $history->whereNotNull('rating')->avg('rating');
        
        // 월별 시청 편수
        $monthlyStats = WatchHistory::where('user_id', $user->id)
            ->select(
                DB::raw('DATE_FORMAT(watched_at, "%Y-%m") as month'),
                DB::raw('COUNT(*) as count')
            )
            ->groupBy('month')
            ->orderBy('month')
            ->get();

        // 장르별 통계
        $genreStats = [];
        foreach ($history as $record) {
            foreach ($record->movie->genres as $genre) {
                if (!isset($genreStats[$genre])) {
                    $genreStats[$genre] = 0;
                }
                $genreStats[$genre]++;
            }
        }
        arsort($genreStats);

        return Inertia::render('WatchHistory/Index', [
            'history' => $history,
            'totalWatched' => $totalWatched,
            'averageRating' => round($averageRating, 1),
            'monthlyStats' => $monthlyStats,
            'genreStats' => $genreStats,
        ]);
    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'movie_id' => 'required|exists:movies,id',
            'rating' => 'nullable|integer|min:1|max:5',
            'watched_at' => 'required|date',
        ]);

        WatchHistory::updateOrCreate(
            [
                'user_id' => auth()->id(),
                'movie_id' => $validated['movie_id'],
            ],
            [
                'rating' => $validated['rating'] ?? null,
                'watched_at' => $validated['watched_at'],
            ]
        );

        return back()->with('success', '시청 기록이 저장되었습니다!');
    }
}
```

# React 페이지 생성

`resources/js/Pages/WatchHistory/Index.jsx`:

```jsx
import { useState } from 'react';
import { router } from '@inertiajs/react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Line, Bar } from 'react-chartjs-2';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    BarElement,
    Title,
    Tooltip,
    Legend,
} from 'chart.js';

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    BarElement,
    Title,
    Tooltip,
    Legend
);

export default function Index({ auth, history, totalWatched, averageRating, monthlyStats, genreStats }) {
    const [selectedMovie, setSelectedMovie] = useState(null);
    const [rating, setRating] = useState(0);

    const updateRating = (movieId, newRating) => {
        router.post(route('watch-history.store'), {
            movie_id: movieId,
            rating: newRating,
            watched_at: new Date().toISOString().split('T')[0],
        });
    };

    const monthlyChartData = {
        labels: monthlyStats.map(stat => stat.month),
        datasets: [
            {
                label: '시청 편수',
                data: monthlyStats.map(stat => stat.count),
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.5)',
            },
        ],
    };

    const genreChartData = {
        labels: Object.keys(genreStats).slice(0, 5),
        datasets: [
            {
                label: '시청 횟수',
                data: Object.values(genreStats).slice(0, 5),
                backgroundColor: 'rgba(34, 197, 94, 0.5)',
            },
        ],
    };

    return (
        <AuthenticatedLayout user={auth.user}>
            <div className="max-w-7xl mx-auto py-12 px-4">
                <h1 className="text-4xl font-bold mb-8">시청 기록</h1>

                {/* 통계 요약 */}
                <div className="grid grid-cols-3 gap-6 mb-8">
                    <div className="bg-white p-6 rounded-lg shadow">
                        <p className="text-gray-600 mb-2">총 시청 편수</p>
                        <p className="text-4xl font-bold text-blue-600">{totalWatched}편</p>
                    </div>
                    <div className="bg-white p-6 rounded-lg shadow">
                        <p className="text-gray-600 mb-2">평균 별점</p>
                        <p className="text-4xl font-bold text-yellow-500">{'⭐'.repeat(Math.round(averageRating))} {averageRating}/5</p>
                    </div>
                    <div className="bg-white p-6 rounded-lg shadow">
                        <p className="text-gray-600 mb-2">가장 많이 본 장르</p>
                        <p className="text-2xl font-bold text-green-600">{Object.keys(genreStats)[0] || 'N/A'}</p>
                    </div>
                </div>

                {/* 월별 시청 그래프 */}
                <div className="bg-white p-6 rounded-lg shadow mb-8">
                    <h2 className="text-2xl font-bold mb-4">월별 시청 편수</h2>
                    <Line data={monthlyChartData} options={{ responsive: true }} />
                </div>

                {/* 장르별 통계 */}
                <div className="bg-white p-6 rounded-lg shadow mb-8">
                    <h2 className="text-2xl font-bold mb-4">장르별 시청 횟수 TOP 5</h2>
                    <Bar data={genreChartData} options={{ responsive: true }} />
                </div>

                {/* 시청 기록 타임라인 */}
                <div className="bg-white p-6 rounded-lg shadow">
                    <h2 className="text-2xl font-bold mb-4">시청 타임라인</h2>
                    <div className="space-y-4">
                        {history.map((record) => (
                            <div key={record.id} className="flex items-center gap-4 border-b pb-4">
                                <img
                                    src={record.movie.poster_url}
                                    alt={record.movie.title}
                                    className="w-16 h-24 object-cover rounded"
                                />
                                <div className="flex-1">
                                    <h3 className="font-bold text-lg">{record.movie.title}</h3>
                                    <p className="text-sm text-gray-600">{record.movie.director} | {record.watched_at}</p>
                                </div>
                                <div className="flex gap-1">
                                    {[1, 2, 3, 4, 5].map((star) => (
                                        <button
                                            key={star}
                                            onClick={() => updateRating(record.movie.id, star)}
                                            className={`text-2xl ${
                                                star <= (record.rating || 0) ? 'text-yellow-400' : 'text-gray-300'
                                            }`}
                                        >
                                            ⭐
                                        </button>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

차트 라이브러리 설치:

```bash
npm install react-chartjs-2 chart.js
```

완료 후 `/watch-history` 접속하여 시청 기록 및 통계 확인.