🎪 서커스단 공연 일정 캘린더 - 투어 도시별 티켓 예매 안내

mkdir circus-tour-schedule-calendar && cd circus-tour-schedule-calendar

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

# Laravel 프로젝트 생성
composer create-project laravel/laravel:^13.0 .

# 환경 설정
- .env 파일에서 DB_CONNECTION을 sqlite로 변경
- database/database.sqlite 파일 생성
- APP_NAME을 'Circus Tour Calendar'로 변경

# Tailwind CSS 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# tailwind.config.js 설정
content: [
  "./resources/**/*.blade.php",
  "./resources/**/*.js",
]

# resources/css/app.css에 Tailwind 지시어 추가
@tailwind base;
@tailwind components;
@tailwind utilities;

# 마이그레이션 실행
php artisan migrate

프로젝트 구조가 준비되면 다음 단계로 진행하겠습니다.

# 공연 일정 데이터베이스 설계

## 마이그레이션 파일 생성
php artisan make:migration create_performances_table

## database/migrations/xxxx_create_performances_table.php 작성
Schema::create('performances', function (Blueprint $table) {
    $table->id();
    $table->date('performance_date'); // 공연 날짜
    $table->time('performance_time'); // 공연 시간
    $table->string('city'); // 도시명
    $table->string('venue'); // 공연장 이름
    $table->integer('ticket_price'); // 티켓 가격 (원)
    $table->integer('remaining_seats'); // 잔여석
    $table->string('booking_url')->nullable(); // 예매 링크 (선택)
    $table->timestamps();
    
    $table->index('performance_date'); // 날짜 검색 최적화
});

## 마이그레이션 실행
php artisan migrate

## 모델 생성
php artisan make:model Performance

## app/Models/Performance.php
protected $fillable = [
    'performance_date',
    'performance_time',
    'city',
    'venue',
    'ticket_price',
    'remaining_seats',
    'booking_url',
];

protected $casts = [
    'performance_date' => 'date',
    'performance_time' => 'datetime',
];

## 시더 생성 (샘플 데이터)
php artisan make:seeder PerformanceSeeder

## database/seeders/PerformanceSeeder.php
// 2025년 1월~3월 샘플 공연 10개 정도 생성
// 서울, 부산, 대구, 광주, 대전 등 다양한 도시
// 잔여석은 랜덤 (5~100석)

php artisan db:seed --class=PerformanceSeeder

데이터베이스와 샘플 데이터가 준비되면 다음 단계로 진행합니다.

# 캘린더 뷰 컨트롤러 및 라우트 구현

## 컨트롤러 생성
php artisan make:controller CalendarController

## app/Http/Controllers/CalendarController.php
public function index(Request $request)
{
    // URL 쿼리에서 year, month 가져오기 (기본값: 현재 년월)
    $year = $request->input('year', now()->year);
    $month = $request->input('month', now()->month);
    
    // Carbon으로 해당 월의 첫날/마지막날 계산
    $startOfMonth = Carbon::create($year, $month, 1);
    $endOfMonth = $startOfMonth->copy()->endOfMonth();
    
    // 해당 월의 공연 데이터 조회
    $performances = Performance::whereBetween('performance_date', [
        $startOfMonth->format('Y-m-d'),
        $endOfMonth->format('Y-m-d')
    ])->orderBy('performance_date')->orderBy('performance_time')->get();
    
    // 날짜별로 그룹핑 (Blade에서 쉽게 표시하기 위해)
    $performancesByDate = $performances->groupBy(function($item) {
        return $item->performance_date->format('Y-m-d');
    });
    
    // 이전/다음 달 계산
    $prevMonth = $startOfMonth->copy()->subMonth();
    $nextMonth = $startOfMonth->copy()->addMonth();
    
    return view('calendar', compact(
        'year',
        'month',
        'startOfMonth',
        'endOfMonth',
        'performancesByDate',
        'prevMonth',
        'nextMonth'
    ));
}

## routes/web.php
use App\Http\Controllers\CalendarController;

Route::get('/', [CalendarController::class, 'index'])->name('calendar');

다음 단계에서 Blade 뷰를 작성하겠습니다.

# 캘린더 Blade 뷰 작성

## resources/views/calendar.blade.php 생성

### 레이아웃 구조
- 상단: 서커스 테마의 헤더 (🎪 제목, 서브타이틀)
- 월 네비게이션: 이전 달 / 현재 년월 표시 / 다음 달 버튼
- 캘린더 그리드: 7열(일~토) 테이블 형태
  - 각 날짜 셀에 공연이 있으면 작은 배지 표시 (예: "🎭 2건")
  - 날짜 클릭 시 모달 열기 (Alpine.js 또는 JavaScript)
- 모달: 선택한 날짜의 공연 상세 정보 리스트
  - 공연 시간, 도시, 장소, 티켓 가격, 잔여석
  - 잔여석 10석 이하일 때 "⚠️ 매진 임박" 빨간 라벨
  - 예매 링크 버튼 (있으면 표시)

### Tailwind CSS 스타일링
- 배경: gradient (주황-핑크-보라 등 서커스 느낌)
- 캘린더 셀: 호버 시 확대 효과
- 공연 배지: 작고 귀여운 둥근 라벨
- 모달: 중앙 오버레이, 애니메이션 (fade-in)

### Alpine.js 또는 JavaScript로 모달 구현
- x-data로 selectedDate, showModal 상태 관리
- 날짜 클릭 시 해당 날짜 데이터를 모달에 표시

### 캘린더 그리드 렌더링 로직 (Blade)
- $startOfMonth->dayOfWeek로 첫날 요일 계산
- 빈 셀 채우기 (이전 달 마지막 날짜들)
- 1일부터 마지막 날까지 루프
- 각 날짜에 해당하는 공연 데이터 $performancesByDate에서 조회

## resources/views/layouts/app.blade.php (선택)
간단한 레이아웃 파일로 head, body 구조 분리

npm run dev로 Vite 빌드 실행하여 Tailwind 적용 확인

php artisan serve로 서버 실행 후 http://localhost:8000 접속하여 캘린더 확인

# 공연 추가 폼 구현 (관리자용 간단 페이지)

## 컨트롤러 메서드 추가
// CalendarController.php
public function create()
{
    return view('performances.create');
}

public function store(Request $request)
{
    $validated = $request->validate([
        'performance_date' => 'required|date',
        'performance_time' => 'required',
        'city' => 'required|string|max:100',
        'venue' => 'required|string|max:200',
        'ticket_price' => 'required|integer|min:0',
        'remaining_seats' => 'required|integer|min:0',
        'booking_url' => 'nullable|url',
    ]);
    
    Performance::create($validated);
    
    return redirect()->route('calendar')
        ->with('success', '공연이 추가되었습니다!');
}

## 라우트 추가
Route::get('/performances/create', [CalendarController::class, 'create'])->name('performances.create');
Route::post('/performances', [CalendarController::class, 'store'])->name('performances.store');

## resources/views/performances/create.blade.php 생성
- 폼 필드: 날짜, 시간, 도시, 장소, 티켓 가격, 잔여석, 예매 링크
- Tailwind CSS로 깔끔한 폼 디자인
- 제출 버튼: "공연 추가하기"
- 취소 버튼: 캘린더로 돌아가기 링크

## 캘린더 페이지에 "+ 공연 추가" 버튼 추가
상단 네비게이션에 작은 버튼 배치 (performances.create 라우트 링크)

## 성공 메시지 표시
calendar.blade.php 상단에 세션 메시지 표시 영역 추가
@if(session('success'))
<div class="alert">{{ session('success') }}</div>
@endif

폼 동작 테스트: 새 공연 추가 후 캘린더에서 확인