🎸 로컬 공연장 월간 라인업 캘린더 - 공연 일정 & 티켓 정보 한눈에

mkdir local-venue-monthly-lineup && cd local-venue-monthly-lineup

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

# 프로젝트 초기 설정

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

2. `.env` 파일 설정:
- `DB_CONNECTION=sqlite` 로 변경
- `DB_DATABASE=database/database.sqlite` 설정
- `APP_NAME="Local Venue Lineup"` 설정

3. SQLite 데이터베이스 파일 생성:
```bash
touch database/database.sqlite
```

4. Tailwind CSS 설치 및 설정:
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

5. `tailwind.config.js` 수정:
```js
content: [
  "./resources/**/*.blade.php",
  "./resources/**/*.js",
],
```

6. `resources/css/app.css`에 Tailwind 디렉티브 추가:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

7. `vite.config.js` 확인 (Laravel 13 기본 설정 유지)

8. 개발 서버 실행:
```bash
npm install
npm run dev
# 새 터미널에서
php artisan serve
```

완료 후 `http://localhost:8000` 접속하여 Laravel 기본 페이지 확인.

# 공연(Show) 모델 및 마이그레이션 생성

1. 공연 모델과 마이그레이션 파일 생성:
```bash
php artisan make:model Show -m
```

2. `database/migrations/xxxx_create_shows_table.php` 파일 수정:
```php
public function up()
{
    Schema::create('shows', function (Blueprint $table) {
        $table->id();
        $table->string('title'); // 공연명
        $table->string('artist'); // 아티스트명
        $table->string('genre'); // 장르 (jazz, rock, indie, electronic 등)
        $table->date('show_date'); // 공연 날짜
        $table->time('show_time'); // 공연 시간
        $table->integer('ticket_price'); // 티켓 가격 (원)
        $table->string('ticket_link')->nullable(); // 예매 링크 (선택)
        $table->text('description')->nullable(); // 공연 설명 (선택)
        $table->string('poster_image')->nullable(); // 포스터 이미지 경로 (선택)
        $table->integer('likes')->default(0); // 좋아요 카운터
        $table->timestamps();
    });
}
```

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

4. `app/Models/Show.php` 파일에 fillable 속성 추가:
```php
protected $fillable = [
    'title',
    'artist',
    'genre',
    'show_date',
    'show_time',
    'ticket_price',
    'ticket_link',
    'description',
    'poster_image',
    'likes',
];

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

완료 후 `php artisan migrate:status`로 마이그레이션 확인.

# 샘플 데이터 시딩 및 컨트롤러 생성

1. Seeder 파일 생성:
```bash
php artisan make:seeder ShowSeeder
```

2. `database/seeders/ShowSeeder.php` 파일 수정:
```php
use App\Models\Show;
use Carbon\Carbon;

public function run()
{
    $shows = [
        [
            'title' => '재즈 나이트 with 블루문 트리오',
            'artist' => 'Blue Moon Trio',
            'genre' => 'jazz',
            'show_date' => Carbon::now()->addDays(5)->toDateString(),
            'show_time' => '20:00:00',
            'ticket_price' => 25000,
            'ticket_link' => 'https://example.com/ticket/1',
            'description' => '부드러운 재즈 선율과 함께하는 금요일 밤',
            'likes' => 12,
        ],
        [
            'title' => '인디 록 페스티벌',
            'artist' => 'The Wildcats',
            'genre' => 'rock',
            'show_date' => Carbon::now()->addDays(10)->toDateString(),
            'show_time' => '19:30:00',
            'ticket_price' => 30000,
            'ticket_link' => 'https://example.com/ticket/2',
            'description' => '열정적인 록 밴드의 라이브 무대',
            'likes' => 8,
        ],
        [
            'title' => '일렉트로닉 비트 파티',
            'artist' => 'DJ Neon',
            'genre' => 'electronic',
            'show_date' => Carbon::now()->addDays(15)->toDateString(),
            'show_time' => '22:00:00',
            'ticket_price' => 20000,
            'ticket_link' => null,
            'description' => '댄스 플로어를 가득 채울 일렉트로닉 사운드',
            'likes' => 15,
        ],
        [
            'title' => '어쿠스틱 싱어송라이터 쇼케이스',
            'artist' => 'Luna Park',
            'genre' => 'indie',
            'show_date' => Carbon::now()->addDays(20)->toDateString(),
            'show_time' => '18:00:00',
            'ticket_price' => 15000,
            'ticket_link' => 'https://example.com/ticket/4',
            'description' => '감성적인 어쿠스틱 공연',
            'likes' => 20,
        ],
    ];

    foreach ($shows as $show) {
        Show::create($show);
    }
}
```

3. `database/seeders/DatabaseSeeder.php`에서 호출:
```php
public function run()
{
    $this->call(ShowSeeder::class);
}
```

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

5. ShowController 생성:
```bash
php artisan make:controller ShowController
```

완료 후 `php artisan tinker`로 `Show::count()` 실행하여 4개 데이터 확인.

# 월간 달력 뷰 및 라우트 구현

1. `app/Http/Controllers/ShowController.php`에 index 메서드 추가:
```php
use App\Models\Show;
use Carbon\Carbon;

public function index()
{
    // 현재 월의 모든 공연 가져오기
    $currentMonth = Carbon::now();
    $shows = Show::whereYear('show_date', $currentMonth->year)
                 ->whereMonth('show_date', $currentMonth->month)
                 ->orderBy('show_date')
                 ->get();
    
    // 달력 생성을 위한 데이터
    $startOfMonth = $currentMonth->copy()->startOfMonth();
    $endOfMonth = $currentMonth->copy()->endOfMonth();
    $startDay = $startOfMonth->copy()->startOfWeek(); // 월요일부터 시작
    $endDay = $endOfMonth->copy()->endOfWeek();
    
    $calendar = [];
    $day = $startDay->copy();
    
    while ($day <= $endDay) {
        $week = [];
        for ($i = 0; $i < 7; $i++) {
            $week[] = [
                'date' => $day->copy(),
                'is_current_month' => $day->month === $currentMonth->month,
                'shows' => $shows->filter(function($show) use ($day) {
                    return $show->show_date->isSameDay($day);
                }),
            ];
            $day->addDay();
        }
        $calendar[] = $week;
    }
    
    return view('shows.index', compact('calendar', 'currentMonth'));
}
```

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

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

3. `resources/views/shows/index.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>{{ config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-900 text-white">
    <div class="container mx-auto px-4 py-8">
        <!-- 헤더 -->
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold mb-2">🎸 Local Venue Lineup</h1>
            <p class="text-gray-400">{{ $currentMonth->format('Y년 m월') }} 공연 일정</p>
        </div>

        <!-- 달력 -->
        <div class="bg-gray-800 rounded-lg shadow-xl p-6">
            <!-- 요일 헤더 -->
            <div class="grid grid-cols-7 gap-2 mb-4">
                @foreach(['월', '화', '수', '목', '금', '토', '일'] as $day)
                    <div class="text-center font-semibold text-gray-400">{{ $day }}</div>
                @endforeach
            </div>

            <!-- 날짜 그리드 -->
            @foreach($calendar as $week)
                <div class="grid grid-cols-7 gap-2 mb-2">
                    @foreach($week as $day)
                        <div class="min-h-[120px] p-2 rounded {{ $day['is_current_month'] ? 'bg-gray-700' : 'bg-gray-800 opacity-50' }}">
                            <div class="text-sm {{ $day['date']->isToday() ? 'text-blue-400 font-bold' : 'text-gray-300' }}">
                                {{ $day['date']->format('d') }}
                            </div>
                            
                            @foreach($day['shows'] as $show)
                                <div class="mt-2 p-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded text-xs hover:scale-105 transition cursor-pointer">
                                    <div class="font-semibold truncate">{{ $show->title }}</div>
                                    <div class="text-gray-200 truncate">{{ $show->artist }}</div>
                                    <div class="text-gray-300">{{ $show->show_time->format('H:i') }}</div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach
                </div>
            @endforeach
        </div>
    </div>
</body>
</html>
```

완료 후 브라우저에서 `http://localhost:8000` 접속하여 달력 뷰 확인.

# 공연 상세 페이지 및 장르별 필터링 구현

1. `app/Http/Controllers/ShowController.php`에 show 메서드 추가:
```php
public function show(Show $show)
{
    return view('shows.show', compact('show'));
}
```

2. `routes/web.php`에 라우트 추가:
```php
Route::get('/shows/{show}', [ShowController::class, 'show'])->name('shows.show');
```

3. `resources/views/shows/show.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>{{ $show->title }} - {{ config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-900 text-white">
    <div class="container mx-auto px-4 py-8 max-w-3xl">
        <a href="{{ route('shows.index') }}" class="text-blue-400 hover:underline mb-4 inline-block">← 달력으로 돌아가기</a>
        
        <div class="bg-gray-800 rounded-lg shadow-xl p-8">
            <div class="mb-6">
                <span class="px-3 py-1 rounded-full text-sm font-semibold
                    {{ $show->genre === 'jazz' ? 'bg-blue-600' : '' }}
                    {{ $show->genre === 'rock' ? 'bg-red-600' : '' }}
                    {{ $show->genre === 'indie' ? 'bg-green-600' : '' }}
                    {{ $show->genre === 'electronic' ? 'bg-purple-600' : '' }}
                ">
                    {{ strtoupper($show->genre) }}
                </span>
            </div>
            
            <h1 class="text-4xl font-bold mb-4">{{ $show->title }}</h1>
            <p class="text-2xl text-gray-300 mb-6">{{ $show->artist }}</p>
            
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div>
                    <p class="text-gray-400 text-sm">공연 날짜</p>
                    <p class="text-xl font-semibold">{{ $show->show_date->format('Y년 m월 d일') }}</p>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">공연 시간</p>
                    <p class="text-xl font-semibold">{{ $show->show_time->format('H:i') }}</p>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">티켓 가격</p>
                    <p class="text-xl font-semibold">{{ number_format($show->ticket_price) }}원</p>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">관심도</p>
                    <p class="text-xl font-semibold">❤️ {{ $show->likes }}</p>
                </div>
            </div>
            
            @if($show->description)
                <div class="mb-6">
                    <h2 class="text-xl font-semibold mb-2">공연 소개</h2>
                    <p class="text-gray-300">{{ $show->description }}</p>
                </div>
            @endif
            
            @if($show->ticket_link)
                <a href="{{ $show->ticket_link }}" target="_blank" class="block w-full bg-gradient-to-r from-purple-600 to-pink-600 text-center py-3 rounded-lg font-semibold hover:scale-105 transition">
                    티켓 예매하기 →
                </a>
            @endif
        </div>
    </div>
</body>
</html>
```

4. `resources/views/shows/index.blade.php` 수정 (공연 카드 클릭 시 상세 페이지 이동):
```blade
<!-- 공연 카드 부분을 다음과 같이 수정 -->
@foreach($day['shows'] as $show)
    <a href="{{ route('shows.show', $show) }}" class="block mt-2 p-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded text-xs hover:scale-105 transition">
        <div class="font-semibold truncate">{{ $show->title }}</div>
        <div class="text-gray-200 truncate">{{ $show->artist }}</div>
        <div class="text-gray-300">{{ $show->show_time->format('H:i') }}</div>
    </a>
@endforeach
```

5. 장르 필터링 추가 - `resources/views/shows/index.blade.php` 헤더 아래에 추가:
```blade
<!-- 장르 필터 버튼 -->
<div class="flex justify-center gap-2 mb-6 flex-wrap">
    <a href="{{ route('shows.index') }}" class="px-4 py-2 rounded-full bg-gray-700 hover:bg-gray-600 transition">전체</a>
    <a href="{{ route('shows.index', ['genre' => 'jazz']) }}" class="px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-500 transition">재즈</a>
    <a href="{{ route('shows.index', ['genre' => 'rock']) }}" class="px-4 py-2 rounded-full bg-red-600 hover:bg-red-500 transition">록</a>
    <a href="{{ route('shows.index', ['genre' => 'indie']) }}" class="px-4 py-2 rounded-full bg-green-600 hover:bg-green-500 transition">인디</a>
    <a href="{{ route('shows.index', ['genre' => 'electronic']) }}" class="px-4 py-2 rounded-full bg-purple-600 hover:bg-purple-500 transition">일렉트로닉</a>
</div>
```

6. ShowController의 index 메서드 수정 (필터링 로직):
```php
public function index(Request $request)
{
    $currentMonth = Carbon::now();
    $query = Show::whereYear('show_date', $currentMonth->year)
                 ->whereMonth('show_date', $currentMonth->month);
    
    // 장르 필터링
    if ($request->has('genre')) {
        $query->where('genre', $request->genre);
    }
    
    $shows = $query->orderBy('show_date')->get();
    
    // ... 나머지 달력 생성 코드 동일
}
```

완료 후 공연 카드 클릭 시 상세 페이지로 이동하는지 확인하고, 장르 필터 버튼으로 공연 필터링 테스트.