🎬 영화관 상영 시간표 & 예고편 갤러리

mkdir cinema-schedule-trailer-gallery && cd cinema-schedule-trailer-gallery

이 폴더에서 Laravel 13.x 프로젝트를 시작합니다.

# Laravel 13.x 프로젝트 생성 및 초기 설정

다음 작업을 순서대로 진행해주세요:

1. Laravel 13.x 프로젝트 생성:
   ```bash
   composer create-project laravel/laravel .
   ```

2. .env 파일 수정 (SQLite 사용):
   ```
   DB_CONNECTION=sqlite
   # DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD 주석 처리
   ```

3. database/database.sqlite 파일 생성:
   ```bash
   touch database/database.sqlite
   ```

4. Tailwind CSS 설치 및 설정:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - tailwind.config.js에서 content 경로 설정:
     ```js
     content: [
       "./resources/**/*.blade.php",
       "./resources/**/*.js",
     ],
     ```
   - resources/css/app.css에 Tailwind 디렉티브 추가:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```

5. Vite 빌드 및 개발 서버 실행:
   ```bash
   npm install
   npm run dev
   ```

6. 별도 터미널에서 Laravel 서버 실행:
   ```bash
   php artisan serve
   ```

모든 설정이 완료되면 http://localhost:8000 에서 Laravel 기본 페이지가 보여야 합니다.

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

영화 정보와 상영 시간표를 저장할 테이블을 만들어주세요.

## 1. Movie 모델 및 마이그레이션 생성

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

`database/migrations/xxxx_create_movies_table.php` 파일을 다음과 같이 수정:

```php
public function up()
{
    Schema::create('movies', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->string('poster_url');
        $table->string('genre');
        $table->integer('runtime'); // 분 단위
        $table->text('synopsis');
        $table->string('director');
        $table->string('cast'); // 쉼표로 구분된 배우 이름
        $table->string('rating'); // 전체관람가, 12세, 15세, 청불 등
        $table->string('trailer_url')->nullable(); // YouTube embed URL
        $table->timestamps();
    });
}
```

## 2. Showtime 모델 및 마이그레이션 생성

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

`database/migrations/xxxx_create_showtimes_table.php` 파일을 다음과 같이 수정:

```php
public function up()
{
    Schema::create('showtimes', function (Blueprint $table) {
        $table->id();
        $table->foreignId('movie_id')->constrained()->onDelete('cascade');
        $table->date('show_date');
        $table->time('show_time');
        $table->timestamps();
    });
}
```

## 3. 모델 관계 설정

`app/Models/Movie.php`에 관계 추가:

```php
public function showtimes()
{
    return $this->hasMany(Showtime::class);
}
```

`app/Models/Showtime.php`에 관계 추가:

```php
public function movie()
{
    return $this->belongsTo(Movie::class);
}

protected $casts = [
    'show_date' => 'date',
    'show_time' => 'datetime:H:i',
];
```

## 4. 마이그레이션 실행

```bash
php artisan migrate
```

완료되면 SQLite 데이터베이스에 movies, showtimes 테이블이 생성됩니다.

# 시드 데이터 생성 및 더미 영화 추가

실제 영화관처럼 보이도록 5개 이상의 영화 데이터와 각 영화별 상영 시간표를 추가해주세요.

## 1. Seeder 생성

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

## 2. `database/seeders/MovieSeeder.php` 작성

```php
use App\Models\Movie;
use App\Models\Showtime;
use Carbon\Carbon;

public function run()
{
    $movies = [
        [
            'title' => '오펜하이머',
            'poster_url' => 'https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg',
            'genre' => '드라마',
            'runtime' => 180,
            'synopsis' => '원자폭탄의 아버지 로버트 오펜하이머의 삶과 맨해튼 프로젝트를 다룬 대서사시.',
            'director' => '크리스토퍼 놀란',
            'cast' => '킬리언 머피, 에밀리 블런트, 로버트 다우니 주니어',
            'rating' => '15세 관람가',
            'trailer_url' => 'https://www.youtube.com/embed/uYPbbksJxIg',
        ],
        [
            'title' => '듄: 파트 2',
            'poster_url' => 'https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg',
            'genre' => 'SF',
            'runtime' => 166,
            'synopsis' => '폴 아트레이데스가 프레멘족과 함께 황제에 맞서 싸우는 장대한 SF 대작.',
            'director' => '드니 빌뇌브',
            'cast' => '티모시 샬라메, 젠데이아, 레베카 퍼거슨',
            'rating' => '12세 관람가',
            'trailer_url' => 'https://www.youtube.com/embed/Way9Dexny3w',
        ],
        [
            'title' => '파묘',
            'poster_url' => 'https://image.tmdb.org/t/p/w500/7JsHbxT03xShsvRy4R4TmD5tBTy.jpg',
            'genre' => '공포',
            'runtime' => 134,
            'synopsis' => '미국 LA에서 의문의 병이 발생하고, 무속인들이 기이한 사건의 실체를 파헤치는 오컬트 미스터리.',
            'director' => '장재현',
            'cast' => '최민식, 김고은, 유해진, 이도현',
            'rating' => '15세 관람가',
            'trailer_url' => 'https://www.youtube.com/embed/HFvPeDSWKTI',
        ],
        [
            'title' => '범죄도시 4',
            'poster_url' => 'https://image.tmdb.org/t/p/w500/jRyGHNkHSe2vVEcTbNqNvbtHPmO.jpg',
            'genre' => '액션',
            'runtime' => 109,
            'synopsis' => '마석도와 광수대가 IT 기반 신종 범죄 조직과 맞서는 통쾌한 액션 블록버스터.',
            'director' => '허명행',
            'cast' => '마동석, 김무열, 박지환',
            'rating' => '15세 관람가',
            'trailer_url' => 'https://www.youtube.com/embed/r6XI0xx1LIU',
        ],
        [
            'title' => '위시',
            'poster_url' => 'https://image.tmdb.org/t/p/w500/AcoVfiv1rrWOmAdpnAMnM56ki19.jpg',
            'genre' => '애니메이션',
            'runtime' => 95,
            'synopsis' => '디즈니 100주년 기념작. 소원을 이루어주는 왕국에서 펼쳐지는 마법 같은 모험.',
            'director' => '크리스 벅, 파운 비라수티콘',
            'cast' => '아리아나 드보즈, 크리스 파인 (목소리 출연)',
            'rating' => '전체 관람가',
            'trailer_url' => 'https://www.youtube.com/embed/oyKWDB63gJM',
        ],
    ];

    foreach ($movies as $movieData) {
        $movie = Movie::create($movieData);

        // 각 영화별로 오늘, 내일, 모레 상영 시간 생성
        $times = ['10:30', '13:00', '15:30', '18:00', '20:30'];
        for ($day = 0; $day < 3; $day++) {
            foreach ($times as $time) {
                Showtime::create([
                    'movie_id' => $movie->id,
                    'show_date' => Carbon::today()->addDays($day),
                    'show_time' => $time,
                ]);
            }
        }
    }
}
```

## 3. DatabaseSeeder에 등록

`database/seeders/DatabaseSeeder.php`:

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

## 4. 시드 실행

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

완료되면 5개 영화와 각각 15개의 상영 시간(3일 × 5회)이 데이터베이스에 추가됩니다.

# 영화 목록 페이지 및 상세 페이지 구현

메인 페이지에서 영화 카드 그리드를 보여주고, 클릭하면 상세 페이지로 이동하도록 만들어주세요.

## 1. 컨트롤러 생성

```bash
php artisan make:controller MovieController
```

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

```php
namespace App\Http\Controllers;

use App\Models\Movie;
use Illuminate\Http\Request;

class MovieController extends Controller
{
    public function index()
    {
        $movies = Movie::all();
        return view('movies.index', compact('movies'));
    }

    public function show(Movie $movie)
    {
        $movie->load('showtimes');
        return view('movies.show', compact('movie'));
    }
}
```

## 2. 라우트 설정

`routes/web.php`:

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

Route::get('/', [MovieController::class, 'index'])->name('movies.index');
Route::get('/movies/{movie}', [MovieController::class, 'show'])->name('movies.show');
```

## 3. 레이아웃 템플릿 생성

`resources/views/layouts/app.blade.php`:

```blade
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', '영화관 상영 시간표')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-900 text-white">
    <nav class="bg-gray-800 shadow-lg">
        <div class="container mx-auto px-4 py-4">
            <a href="{{ route('movies.index') }}" class="text-2xl font-bold text-red-500">🎬 Cinema</a>
        </div>
    </nav>

    <main class="container mx-auto px-4 py-8">
        @yield('content')
    </main>

    <footer class="bg-gray-800 mt-16 py-6 text-center text-gray-400">
        <p>&copy; 2024 Cinema. All rights reserved.</p>
    </footer>
</body>
</html>
```

## 4. 영화 목록 페이지

`resources/views/movies/index.blade.php`:

```blade
@extends('layouts.app')

@section('title', '현재 상영작 - Cinema')

@section('content')
<div class="mb-8">
    <h1 class="text-4xl font-bold mb-2">현재 상영 중</h1>
    <p class="text-gray-400">지금 극장에서 만나보세요</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
    @foreach($movies as $movie)
        <a href="{{ route('movies.show', $movie) }}" class="group">
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
                <img src="{{ $movie->poster_url }}" alt="{{ $movie->title }}" class="w-full h-96 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-bold mb-2 group-hover:text-red-500 transition">{{ $movie->title }}</h3>
                    <div class="flex items-center justify-between text-sm text-gray-400">
                        <span class="bg-gray-700 px-2 py-1 rounded">{{ $movie->genre }}</span>
                        <span>{{ $movie->runtime }}분</span>
                    </div>
                </div>
            </div>
        </a>
    @endforeach
</div>
@endsection
```

## 5. 영화 상세 페이지

`resources/views/movies/show.blade.php`:

```blade
@extends('layouts.app')

@section('title', $movie->title . ' - Cinema')

@section('content')
<div class="max-w-6xl mx-auto">
    <div class="grid md:grid-cols-3 gap-8">
        <div class="md:col-span-1">
            <img src="{{ $movie->poster_url }}" alt="{{ $movie->title }}" class="w-full rounded-lg shadow-2xl">
        </div>
        <div class="md:col-span-2">
            <h1 class="text-4xl font-bold mb-4">{{ $movie->title }}</h1>
            <div class="flex flex-wrap gap-4 mb-6 text-sm">
                <span class="bg-red-600 px-3 py-1 rounded">{{ $movie->rating }}</span>
                <span class="bg-gray-700 px-3 py-1 rounded">{{ $movie->genre }}</span>
                <span class="bg-gray-700 px-3 py-1 rounded">{{ $movie->runtime }}분</span>
            </div>
            <p class="text-gray-300 mb-6 leading-relaxed">{{ $movie->synopsis }}</p>
            <div class="mb-4">
                <p class="text-gray-400"><span class="font-semibold text-white">감독:</span> {{ $movie->director }}</p>
                <p class="text-gray-400"><span class="font-semibold text-white">출연:</span> {{ $movie->cast }}</p>
            </div>

            @if($movie->trailer_url)
            <div class="mb-8">
                <h2 class="text-2xl font-bold mb-4">예고편</h2>
                <div class="aspect-video">
                    <iframe src="{{ $movie->trailer_url }}" class="w-full h-full rounded-lg" allowfullscreen></iframe>
                </div>
            </div>
            @endif

            <div>
                <h2 class="text-2xl font-bold mb-4">상영 시간표</h2>
                @php
                    $groupedShowtimes = $movie->showtimes->groupBy(function($showtime) {
                        return $showtime->show_date->format('Y-m-d');
                    });
                @endphp
                @foreach($groupedShowtimes as $date => $times)
                    <div class="mb-4">
                        <h3 class="font-semibold mb-2">{{ \Carbon\Carbon::parse($date)->isoFormat('M월 D일 (ddd)') }}</h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach($times as $showtime)
                                <button class="bg-gray-700 hover:bg-red-600 px-4 py-2 rounded transition">
                                    {{ $showtime->show_time->format('H:i') }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection
```

완료되면 http://localhost:8000 에서 영화 목록을 볼 수 있고, 각 영화를 클릭하면 상세 페이지로 이동합니다.