mkdir music-festival-lineup-timetable && cd music-festival-lineup-timetable

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

Laravel 13.x + Inertia.js + React 19 풀스택 프로젝트를 생성해주세요.

```bash
npx create laravel --react --inertia
```

또는 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
```

프로젝트 생성 후 다음 설정을 확인하세요:

1. `.env` 파일에서 DB 설정을 SQLite로 변경:
```
DB_CONNECTION=sqlite
# DB_DATABASE 주석 처리 또는 삭제
```

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

3. 기본 마이그레이션 실행:
```bash
php artisan migrate
```

4. 개발 서버 실행 (두 개 터미널 필요):
```bash
# 터미널 1: Laravel 서버
php artisan serve

# 터미널 2: Vite 빌드
npm run dev
```

프로젝트가 정상적으로 실행되면 http://localhost:8000 에서 Laravel + Inertia.js + React 기본 화면을 확인할 수 있습니다.

이제 데이터베이스 모델과 마이그레이션을 생성하겠습니다.

**1. Artist 모델 생성:**
```bash
php artisan make:model Artist -m
```

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

```php
public function up()
{
    Schema::create('artists', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('genre'); // Rock, Pop, EDM, Hip-Hop 등
        $table->text('bio')->nullable();
        $table->string('profile_image')->nullable();
        $table->string('instagram_url')->nullable();
        $table->string('spotify_url')->nullable();
        $table->timestamps();
    });
}
```

**2. Stage 모델 생성:**
```bash
php artisan make:model Stage -m
```

`database/migrations/xxxx_create_stages_table.php` 파일 수정:

```php
public function up()
{
    Schema::create('stages', function (Blueprint $table) {
        $table->id();
        $table->string('name'); // Main Stage, Sub Stage, Acoustic Tent 등
        $table->text('description')->nullable();
        $table->string('location')->nullable(); // 무대 위치 설명
        $table->timestamps();
    });
}
```

**3. Performance 모델 생성 (공연 일정):**
```bash
php artisan make:model Performance -m
```

`database/migrations/xxxx_create_performances_table.php` 파일 수정:

```php
public function up()
{
    Schema::create('performances', function (Blueprint $table) {
        $table->id();
        $table->foreignId('artist_id')->constrained()->onDelete('cascade');
        $table->foreignId('stage_id')->constrained()->onDelete('cascade');
        $table->date('performance_date'); // 공연 날짜
        $table->time('start_time'); // 시작 시간
        $table->time('end_time'); // 종료 시간
        $table->text('setlist')->nullable(); // 셋리스트 (보너스 기능)
        $table->timestamps();
        
        // 같은 무대, 같은 날짜에 시간 중복 방지를 위한 인덱스
        $table->index(['stage_id', 'performance_date', 'start_time']);
    });
}
```

**4. 모델 관계 설정:**

`app/Models/Artist.php`:
```php
public function performances()
{
    return $this->hasMany(Performance::class);
}
```

`app/Models/Stage.php`:
```php
public function performances()
{
    return $this->hasMany(Performance::class);
}
```

`app/Models/Performance.php`:
```php
protected $casts = [
    'performance_date' => 'date',
    'start_time' => 'datetime:H:i',
    'end_time' => 'datetime:H:i',
];

public function artist()
{
    return $this->belongsTo(Artist::class);
}

public function stage()
{
    return $this->belongsTo(Stage::class);
}
```

**5. 마이그레이션 실행:**
```bash
php artisan migrate
```

마이그레이션이 성공하면 artists, stages, performances 테이블이 생성됩니다.

이제 시더(Seeder)를 만들어 샘플 데이터를 생성하겠습니다.

**1. 시더 파일 생성:**
```bash
php artisan make:seeder FestivalSeeder
```

**2. `database/seeders/FestivalSeeder.php` 파일 수정:**

```php
use App\Models\Artist;
use App\Models\Stage;
use App\Models\Performance;
use Illuminate\Support\Facades\DB;

public function run()
{
    // 기존 데이터 삭제
    DB::table('performances')->delete();
    DB::table('artists')->delete();
    DB::table('stages')->delete();

    // Stage 생성
    $mainStage = Stage::create([
        'name' => 'Main Stage',
        'description' => '메인 무대 - 헤드라이너 공연',
        'location' => '중앙 광장'
    ]);

    $subStage = Stage::create([
        'name' => 'Sub Stage',
        'description' => '서브 무대 - 신진 아티스트',
        'location' => '동측 잔디밭'
    ]);

    $acousticTent = Stage::create([
        'name' => 'Acoustic Tent',
        'description' => '어쿠스틱 텐트 - 소규모 공연',
        'location' => '서측 숲속'
    ]);

    // Artist 생성
    $artists = [
        ['name' => 'The Rolling Waves', 'genre' => 'Rock', 'bio' => '전설적인 록 밴드', 'instagram_url' => 'https://instagram.com/rollingwaves'],
        ['name' => 'DJ Neon', 'genre' => 'EDM', 'bio' => '일렉트로닉 뮤직 프로듀서', 'spotify_url' => 'https://spotify.com/djneon'],
        ['name' => 'Luna Park', 'genre' => 'Indie Pop', 'bio' => '감성 인디 팝 듀오'],
        ['name' => 'Urban Poets', 'genre' => 'Hip-Hop', 'bio' => '힙합 크루'],
        ['name' => 'Acoustic Dreams', 'genre' => 'Folk', 'bio' => '포크 싱어송라이터'],
        ['name' => 'Electric Souls', 'genre' => 'Electronic', 'bio' => '실험적 일렉트로니카'],
    ];

    $createdArtists = [];
    foreach ($artists as $artist) {
        $createdArtists[] = Artist::create($artist);
    }

    // Performance 생성 (2024-07-20, 2024-07-21 양일간)
    Performance::create([
        'artist_id' => $createdArtists[0]->id,
        'stage_id' => $mainStage->id,
        'performance_date' => '2024-07-20',
        'start_time' => '20:00',
        'end_time' => '21:30',
    ]);

    Performance::create([
        'artist_id' => $createdArtists[1]->id,
        'stage_id' => $mainStage->id,
        'performance_date' => '2024-07-20',
        'start_time' => '22:00',
        'end_time' => '23:30',
    ]);

    Performance::create([
        'artist_id' => $createdArtists[2]->id,
        'stage_id' => $subStage->id,
        'performance_date' => '2024-07-20',
        'start_time' => '18:00',
        'end_time' => '19:00',
    ]);

    Performance::create([
        'artist_id' => $createdArtists[3]->id,
        'stage_id' => $subStage->id,
        'performance_date' => '2024-07-21',
        'start_time' => '19:00',
        'end_time' => '20:30',
    ]);

    Performance::create([
        'artist_id' => $createdArtists[4]->id,
        'stage_id' => $acousticTent->id,
        'performance_date' => '2024-07-21',
        'start_time' => '16:00',
        'end_time' => '17:00',
    ]);

    Performance::create([
        'artist_id' => $createdArtists[5]->id,
        'stage_id' => $acousticTent->id,
        'performance_date' => '2024-07-20',
        'start_time' => '17:30',
        'end_time' => '18:30',
    ]);
}
```

**3. DatabaseSeeder에서 호출:**

`database/seeders/DatabaseSeeder.php` 파일 수정:

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

**4. 시더 실행:**
```bash
php artisan db:seed
```

시더 실행 후 DB에 샘플 아티스트, 무대, 공연 일정 데이터가 생성됩니다.

이제 Laravel 컨트롤러와 라우트를 생성하여 Inertia.js로 React 컴포넌트에 데이터를 전달하겠습니다.

**1. TimetableController 생성:**
```bash
php artisan make:controller TimetableController
```

**2. `app/Http/Controllers/TimetableController.php` 파일 수정:**

```php
use App\Models\Performance;
use App\Models\Stage;
use App\Models\Artist;
use Inertia\Inertia;

class TimetableController extends Controller
{
    public function index()
    {
        // 모든 공연 일정 로드 (아티스트, 무대 관계 포함)
        $performances = Performance::with(['artist', 'stage'])
            ->orderBy('performance_date')
            ->orderBy('start_time')
            ->get();

        // 날짜별로 그룹화
        $groupedByDate = $performances->groupBy('performance_date');

        // 모든 무대 목록
        $stages = Stage::all();

        // 장르 목록 (중복 제거)
        $genres = Artist::distinct()->pluck('genre');

        return Inertia::render('Timetable/Index', [
            'performances' => $performances,
            'groupedByDate' => $groupedByDate,
            'stages' => $stages,
            'genres' => $genres,
        ]);
    }

    public function artists()
    {
        $artists = Artist::with('performances.stage')->get();

        return Inertia::render('Artists/Index', [
            'artists' => $artists,
        ]);
    }

    public function artistShow($id)
    {
        $artist = Artist::with('performances.stage')->findOrFail($id);

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

**3. 라우트 설정 (`routes/web.php`):**

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

Route::get('/', [TimetableController::class, 'index'])->name('timetable.index');
Route::get('/artists', [TimetableController::class, 'artists'])->name('artists.index');
Route::get('/artists/{id}', [TimetableController::class, 'artistShow'])->name('artists.show');
```

라우트 설정 후 http://localhost:8000 접속 시 TimetableController의 index 메서드가 실행되며, Inertia.js를 통해 React 컴포넌트에 데이터가 전달됩니다.

이제 React 컴포넌트를 생성하여 타임테이블 UI를 구현하겠습니다.

**1. Timetable/Index.jsx 컴포넌트 생성:**

`resources/js/Pages/Timetable/Index.jsx` 파일 생성:

```jsx
import { useState } from 'react';
import { Head } from '@inertiajs/react';

export default function TimetableIndex({ performances, groupedByDate, stages, genres }) {
    const [selectedDate, setSelectedDate] = useState(Object.keys(groupedByDate)[0] || null);
    const [selectedStage, setSelectedStage] = useState(null);
    const [selectedGenre, setSelectedGenre] = useState(null);
    const [favorites, setFavorites] = useState(() => {
        const saved = localStorage.getItem('favPerformances');
        return saved ? JSON.parse(saved) : [];
    });

    const toggleFavorite = (performanceId) => {
        const newFavorites = favorites.includes(performanceId)
            ? favorites.filter(id => id !== performanceId)
            : [...favorites, performanceId];
        setFavorites(newFavorites);
        localStorage.setItem('favPerformances', JSON.stringify(newFavorites));
    };

    const filteredPerformances = performances.filter(perf => {
        if (selectedDate && perf.performance_date !== selectedDate) return false;
        if (selectedStage && perf.stage.id !== selectedStage) return false;
        if (selectedGenre && perf.artist.genre !== selectedGenre) return false;
        return true;
    });

    return (
        <>
            <Head title="Festival Timetable" />
            <div className="min-h-screen bg-gradient-to-br from-purple-900 via-pink-800 to-orange-600 py-8 px-4">
                <div className="max-w-7xl mx-auto">
                    <h1 className="text-5xl font-bold text-white text-center mb-8 drop-shadow-lg">
                        🎸 Music Festival 2024
                    </h1>

                    {/* 필터 섹션 */}
                    <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 mb-8">
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                            {/* 날짜 필터 */}
                            <div>
                                <label className="block text-white font-semibold mb-2">📅 Date</label>
                                <select
                                    className="w-full px-4 py-2 rounded-lg bg-white/90 text-gray-800"
                                    value={selectedDate || ''}
                                    onChange={(e) => setSelectedDate(e.target.value || null)}
                                >
                                    <option value="">All Dates</option>
                                    {Object.keys(groupedByDate).map(date => (
                                        <option key={date} value={date}>{date}</option>
                                    ))}
                                </select>
                            </div>

                            {/* 무대 필터 */}
                            <div>
                                <label className="block text-white font-semibold mb-2">🎤 Stage</label>
                                <select
                                    className="w-full px-4 py-2 rounded-lg bg-white/90 text-gray-800"
                                    value={selectedStage || ''}
                                    onChange={(e) => setSelectedStage(e.target.value ? parseInt(e.target.value) : null)}
                                >
                                    <option value="">All Stages</option>
                                    {stages.map(stage => (
                                        <option key={stage.id} value={stage.id}>{stage.name}</option>
                                    ))}
                                </select>
                            </div>

                            {/* 장르 필터 */}
                            <div>
                                <label className="block text-white font-semibold mb-2">🎵 Genre</label>
                                <select
                                    className="w-full px-4 py-2 rounded-lg bg-white/90 text-gray-800"
                                    value={selectedGenre || ''}
                                    onChange={(e) => setSelectedGenre(e.target.value || null)}
                                >
                                    <option value="">All Genres</option>
                                    {genres.map(genre => (
                                        <option key={genre} value={genre}>{genre}</option>
                                    ))}
                                </select>
                            </div>
                        </div>
                    </div>

                    {/* 타임테이블 그리드 */}
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {filteredPerformances.map(perf => (
                            <div
                                key={perf.id}
                                className="bg-white rounded-xl shadow-2xl overflow-hidden transform transition hover:scale-105 hover:shadow-3xl"
                            >
                                <div className="bg-gradient-to-r from-pink-500 to-purple-600 p-4 text-white">
                                    <div className="flex justify-between items-start">
                                        <div>
                                            <h3 className="text-2xl font-bold">{perf.artist.name}</h3>
                                            <span className="inline-block bg-white/20 px-3 py-1 rounded-full text-sm mt-2">
                                                {perf.artist.genre}
                                            </span>
                                        </div>
                                        <button
                                            onClick={() => toggleFavorite(perf.id)}
                                            className="text-3xl transform transition hover:scale-125"
                                        >
                                            {favorites.includes(perf.id) ? '⭐' : '☆'}
                                        </button>
                                    </div>
                                </div>
                                <div className="p-6">
                                    <div className="flex items-center text-gray-700 mb-2">
                                        <span className="font-semibold mr-2">📍</span>
                                        {perf.stage.name}
                                    </div>
                                    <div className="flex items-center text-gray-700 mb-2">
                                        <span className="font-semibold mr-2">📅</span>
                                        {perf.performance_date}
                                    </div>
                                    <div className="flex items-center text-gray-700">
                                        <span className="font-semibold mr-2">🕐</span>
                                        {perf.start_time} - {perf.end_time}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>

                    {filteredPerformances.length === 0 && (
                        <div className="text-center text-white text-xl mt-12">
                            No performances found with current filters.
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}
```

**2. Tailwind CSS 설정 확인:**

`tailwind.config.js` 파일에서 Inertia.js 경로가 포함되어 있는지 확인:

```js
content: [
    './resources/**/*.blade.php',
    './resources/**/*.jsx',
    './resources/**/*.js',
],
```

**3. 개발 서버 재시작:**

```bash
npm run dev
```

http://localhost:8000 접속 시 타임테이블 UI가 표시되며, 날짜/무대/장르 필터링과 즐겨찾기 기능이 작동합니다.

마지막으로 아티스트 목록 페이지와 상세 페이지를 추가하여 프로젝트를 완성하겠습니다.

**1. Artists/Index.jsx 컴포넌트 생성:**

`resources/js/Pages/Artists/Index.jsx` 파일 생성:

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

export default function ArtistsIndex({ artists }) {
    return (
        <>
            <Head title="Artists Lineup" />
            <div className="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-600 py-8 px-4">
                <div className="max-w-7xl mx-auto">
                    <h1 className="text-5xl font-bold text-white text-center mb-8 drop-shadow-lg">
                        🎤 Artists Lineup
                    </h1>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {artists.map(artist => (
                            <Link
                                key={artist.id}
                                href={`/artists/${artist.id}`}
                                className="bg-white rounded-xl shadow-2xl overflow-hidden transform transition hover:scale-105 hover:shadow-3xl block"
                            >
                                <div className="h-48 bg-gradient-to-br from-pink-400 to-purple-500 flex items-center justify-center">
                                    <span className="text-white text-6xl">🎸</span>
                                </div>
                                <div className="p-6">
                                    <h2 className="text-2xl font-bold text-gray-800 mb-2">{artist.name}</h2>
                                    <span className="inline-block bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-semibold">
                                        {artist.genre}
                                    </span>
                                    {artist.bio && (
                                        <p className="text-gray-600 mt-3 line-clamp-2">{artist.bio}</p>
                                    )}
                                    <div className="mt-4 text-purple-600 font-semibold">
                                        {artist.performances.length} performance(s) →
                                    </div>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            </div>
        </>
    );
}
```

**2. Artists/Show.jsx 컴포넌트 생성:**

`resources/js/Pages/Artists/Show.jsx` 파일 생성:

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

export default function ArtistShow({ artist }) {
    return (
        <>
            <Head title={artist.name} />
            <div className="min-h-screen bg-gradient-to-br from-purple-900 via-pink-800 to-orange-600 py-8 px-4">
                <div className="max-w-4xl mx-auto">
                    <Link href="/artists" className="text-white text-lg mb-6 inline-block hover:underline">
                        ← Back to Artists
                    </Link>

                    <div className="bg-white rounded-xl shadow-2xl overflow-hidden">
                        <div className="h-64 bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center">
                            <span className="text-white text-9xl">🎸</span>
                        </div>

                        <div className="p-8">
                            <h1 className="text-4xl font-bold text-gray-800 mb-4">{artist.name}</h1>
                            <span className="inline-block bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-lg font-semibold mb-6">
                                {artist.genre}
                            </span>

                            {artist.bio && (
                                <p className="text-gray-700 text-lg mb-6">{artist.bio}</p>
                            )}

                            {/* SNS 링크 */}
                            <div className="flex gap-4 mb-8">
                                {artist.instagram_url && (
                                    <a
                                        href={artist.instagram_url}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="bg-pink-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-pink-600 transition"
                                    >
                                        📷 Instagram
                                    </a>
                                )}
                                {artist.spotify_url && (
                                    <a
                                        href={artist.spotify_url}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="bg-green-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-green-600 transition"
                                    >
                                        🎵 Spotify
                                    </a>
                                )}
                            </div>

                            {/* 공연 일정 */}
                            <h2 className="text-2xl font-bold text-gray-800 mb-4">Performance Schedule</h2>
                            <div className="space-y-4">
                                {artist.performances.map(perf => (
                                    <div key={perf.id} className="bg-purple-50 p-4 rounded-lg">
                                        <div className="flex justify-between items-center">
                                            <div>
                                                <div className="font-semibold text-gray-800">{perf.stage.name}</div>
                                                <div className="text-gray-600">{perf.performance_date}</div>
                                            </div>
                                            <div className="text-right">
                                                <div className="font-semibold text-purple-600">
                                                    {perf.start_time} - {perf.end_time}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}
```

**3. 네비게이션 추가 (선택):**

Timetable/Index.jsx 상단에 네비게이션 링크 추가:

```jsx
<div className="flex justify-center gap-4 mb-8">
    <Link href="/" className="bg-white/20 backdrop-blur-md text-white px-6 py-3 rounded-lg font-semibold hover:bg-white/30 transition">
        🎫 Timetable
    </Link>
    <Link href="/artists" className="bg-white/20 backdrop-blur-md text-white px-6 py-3 rounded-lg font-semibold hover:bg-white/30 transition">
        🎤 Artists
    </Link>
</div>
```

Artists/Index.jsx에도 동일하게 추가.

**4. 최종 테스트:**

- http://localhost:8000 - 타임테이블 페이지 (필터링, 즐겨찾기 작동)
- http://localhost:8000/artists - 아티스트 목록 페이지
- http://localhost:8000/artists/1 - 아티스트 상세 페이지 (공연 일정 표시)

모든 페이지가 정상 작동하면 프로젝트 완성입니다! 🎉