🎤 스탠드업 코미디 쇼 티켓팅 페이지 - 공연 소개 & 좌석 예약 폼

mkdir standup-comedy-ticketing-page && cd standup-comedy-ticketing-page

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

# 스탠드업 코미디 쇼 티켓팅 페이지 - Step 1: 프로젝트 초기 설정

## 요구사항

1. Laravel 13.x 프로젝트 생성 (composer create-project laravel/laravel . 또는 Laravel installer 사용)
2. .env 파일 설정:
   - DB_CONNECTION=sqlite
   - .env.example을 복사하여 .env 생성
3. database/database.sqlite 파일 생성 (빈 파일)
4. Tailwind CSS 설치 및 설정:
   - npm install -D tailwindcss postcss autoprefixer
   - npx tailwindcss init -p
   - tailwind.config.js에 Blade 템플릿 경로 추가
   - resources/css/app.css에 Tailwind 지시어 추가
5. 기본 레이아웃 Blade 템플릿 생성 (resources/views/layouts/app.blade.php):
   - HTML5 기본 구조
   - Tailwind CSS 로드
   - 네비게이션 바 (로고, 공연 정보, 예약하기 링크)
   - Footer (저작권 정보)
6. 웰컴 페이지를 랜딩페이지로 변경 (routes/web.php에서 '/' 라우트 설정)
7. npm run dev 실행하여 Vite 개발 서버 시작
8. php artisan serve로 로컬 서버 실행 확인

## 체크리스트

- [ ] Laravel 13.x 설치 완료
- [ ] SQLite DB 파일 생성 및 .env 설정
- [ ] Tailwind CSS 설치 및 기본 스타일 적용
- [ ] layouts/app.blade.php 레이아웃 생성
- [ ] 브라우저에서 http://localhost:8000 접속 시 Tailwind 스타일 확인

# Step 2: 데이터베이스 마이그레이션 & 모델 생성

## 요구사항

1. Reservation 모델 및 마이그레이션 생성:
   - php artisan make:model Reservation -m
2. 마이그레이션 파일 (database/migrations/xxxx_create_reservations_table.php) 수정:
   - name (string, 예약자 이름)
   - phone (string, 연락처)
   - seat_type (string, 좌석 등급: VIP/일반/학생)
   - quantity (integer, 티켓 매수)
   - total_price (integer, 총 금액)
   - special_request (text, nullable, 요청사항)
   - reservation_code (string, unique, 6자리 예약번호)
   - timestamps (created_at, updated_at)
3. php artisan migrate 실행하여 테이블 생성
4. Reservation 모델 (app/Models/Reservation.php)에 $fillable 속성 추가:
   - ['name', 'phone', 'seat_type', 'quantity', 'total_price', 'special_request', 'reservation_code']

## 체크리스트

- [ ] Reservation 모델 및 마이그레이션 생성
- [ ] 마이그레이션 파일에 필요한 컬럼 정의
- [ ] php artisan migrate 실행 성공
- [ ] database.sqlite 파일에 reservations 테이블 생성 확인

# Step 3: 랜딩페이지 UI 구현 (코미디언 프로필 & 공연 정보)

## 요구사항

1. HomeController 생성 (php artisan make:controller HomeController)
2. HomeController의 index 메서드에서 공연 정보 데이터를 뷰로 전달:
   - 코미디언 이름: "김웃음"
   - 공연 제목: "2025 김웃음 단독 코미디쇼 - 웃음 폭발"
   - 공연 날짜: "2025년 3월 15일 (토) 19:00"
   - 공연 장소: "서울 코미디 극장"
   - 러닝타임: "90분"
   - 관람 연령: "15세 이상"
   - 좌석 가격: ['VIP' => 50000, '일반' => 30000, '학생' => 20000]
3. resources/views/home.blade.php 생성:
   - layouts/app.blade.php 레이아웃 상속
   - Hero 섹션: 공연 제목, 날짜, 큰 CTA 버튼 ("지금 예약하기")
   - 코미디언 프로필 섹션: 사진(placeholder 이미지 사용), 이름, 경력 소개
   - 공연 정보 카드: 날짜/시간, 장소, 러닝타임, 관람 연령 (아이콘과 함께 표시)
   - 좌석 등급 & 가격표: 테이블 형태로 VIP/일반/학생 가격 비교
4. Tailwind CSS로 스타일링:
   - Hero 섹션: 그라디언트 배경, 큰 폰트, 중앙 정렬
   - 프로필 섹션: 좌우 2단 레이아웃 (이미지 왼쪽, 텍스트 오른쪽)
   - 가격표: 테이블 또는 카드 형태로 깔끔하게
5. routes/web.php에서 '/' 라우트를 HomeController@index로 연결

## 체크리스트

- [ ] HomeController 생성 및 index 메서드 구현
- [ ] home.blade.php 뷰 생성 및 레이아웃 상속
- [ ] Hero 섹션, 프로필 섹션, 공연 정보, 가격표 UI 완성
- [ ] Tailwind CSS로 반응형 디자인 적용
- [ ] 브라우저에서 랜딩페이지 확인

# Step 4: 티켓 예약 폼 구현

## 요구사항

1. resources/views/home.blade.php에 예약 폼 섹션 추가:
   - 폼 ID: "reservation-form"
   - 필드:
     - 이름 (name): text input, required
     - 연락처 (phone): tel input, required, placeholder "010-1234-5678"
     - 좌석 등급 (seat_type): select (VIP/일반/학생), required
     - 티켓 매수 (quantity): number input, min=1, max=10, required
     - 요청사항 (special_request): textarea, optional
   - 제출 버튼: "예약 신청하기"
2. 폼 액션: POST /reservation/store
3. @csrf 토큰 추가
4. Tailwind CSS로 폼 스타일링:
   - 라벨과 인풋 간격 조정
   - 인풋 필드 테두리 및 포커스 스타일
   - 제출 버튼: 파란색 배경, 흰색 텍스트, hover 효과
5. 좌석 등급 선택 시 실시간 총 금액 계산 (Alpine.js 또는 Vanilla JS):
   - 좌석 등급과 매수에 따라 총 금액 표시
   - 예) VIP 2매 = 100,000원

## 체크리스트

- [ ] 예약 폼 HTML 구조 완성
- [ ] 모든 필드 required 속성 추가
- [ ] 좌석 등급 선택 시 총 금액 실시간 계산 기능 구현
- [ ] Tailwind CSS로 폼 디자인 완성
- [ ] 브라우저에서 폼 입력 및 계산 기능 테스트

# Step 5: 예약 처리 로직 & 확인 페이지

## 요구사항

1. ReservationController 생성 (php artisan make:controller ReservationController)
2. ReservationController의 store 메서드 구현:
   - 폼 데이터 검증 (Validation):
     - name: required, string, max:100
     - phone: required, string, regex:전화번호 형식
     - seat_type: required, in:VIP,일반,학생
     - quantity: required, integer, min:1, max:10
     - special_request: nullable, string, max:500
   - 총 금액 계산 (seat_type에 따라 가격 * quantity)
   - 6자리 랜덤 예약번호 생성 (예: strtoupper(Str::random(6)))
   - Reservation 모델에 데이터 저장
   - 저장 후 예약 확인 페이지로 리다이렉트 (예약 ID 전달)
3. resources/views/reservation/confirm.blade.php 생성:
   - 예약 완료 메시지
   - 예약자 정보 표시 (이름, 연락처, 좌석 등급, 매수, 총 금액)
   - 예약번호 크게 표시
   - "예약 목록 보기" 링크
   - "홈으로 돌아가기" 버튼
4. routes/web.php에 라우트 추가:
   - POST /reservation/store → ReservationController@store
   - GET /reservation/confirm/{id} → ReservationController@confirm
5. ReservationController의 confirm 메서드 구현:
   - 예약 ID로 Reservation 조회
   - 뷰에 예약 데이터 전달

## 체크리스트

- [ ] ReservationController 생성 및 store 메서드 구현
- [ ] 폼 검증 로직 추가
- [ ] 예약번호 자동 생성 로직 구현
- [ ] DB에 예약 데이터 저장 확인
- [ ] confirm.blade.php 뷰 생성 및 예약 정보 표시
- [ ] 예약 완료 후 확인 페이지로 리다이렉트 테스트

# Step 6: 예약 목록 조회 페이지 (관리자용)

## 요구사항

1. ReservationController의 index 메서드 구현:
   - 모든 예약 데이터 조회 (Reservation::latest()->get())
   - 뷰에 예약 목록 전달
2. resources/views/reservation/index.blade.php 생성:
   - layouts/app.blade.php 레이아웃 상속
   - 페이지 제목: "전체 예약 목록"
   - 테이블 형태로 예약 리스트 표시:
     - 컬럼: 예약번호, 이름, 연락처, 좌석 등급, 매수, 총 금액, 예약일시
   - 예약이 없을 경우 "아직 예약이 없습니다" 메시지 표시
   - "홈으로 돌아가기" 버튼
3. routes/web.php에 라우트 추가:
   - GET /reservations → ReservationController@index
4. Tailwind CSS로 테이블 스타일링:
   - 헤더 배경색, 테두리
   - 짝수/홀수 행 배경색 구분 (stripe)
   - 반응형 테이블 (모바일에서는 카드 형태로 변경)
5. 네비게이션 바에 "예약 목록" 링크 추가

## 체크리스트

- [ ] ReservationController의 index 메서드 구현
- [ ] index.blade.php 뷰 생성 및 테이블 구조 완성
- [ ] 예약 데이터가 테이블에 올바르게 표시되는지 확인
- [ ] 예약이 없을 때 메시지 표시 확인
- [ ] Tailwind CSS로 테이블 디자인 완성
- [ ] 네비게이션 바에서 예약 목록 페이지 접근 테스트