🎬 독립영화 상영회 티켓 예매 페이지 - 좌석 선택 & 예매 확인서

mkdir indie-film-screening-ticket-booking && cd indie-film-screening-ticket-booking

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

# Laravel 13.x 백엔드 API 프로젝트 생성

1. `backend` 폴더에 Laravel 13.x 프로젝트를 생성하세요:
   ```bash
   composer create-project laravel/laravel:^13.0 backend
   cd backend
   ```

2. `.env` 파일을 수정하여 SQLite 데이터베이스를 사용하도록 설정:
   ```
   DB_CONNECTION=sqlite
   # DB_HOST, DB_PORT, DB_DATABASE 등 다른 DB 설정은 주석 처리
   ```

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

4. CORS 설정 (React 프론트엔드와 통신하기 위해):
   - `config/cors.php` 파일에서 `'allowed_origins'`를 `['http://localhost:5173']`로 설정 (Vite 기본 포트)
   - 또는 `'supports_credentials' => true` 확인

5. API 라우트 확인:
   - `routes/api.php` 파일이 존재하는지 확인 (Laravel 13.x 기본 제공)

6. 마이그레이션 파일 2개 생성:
   ```bash
   php artisan make:migration create_screenings_table
   php artisan make:migration create_bookings_table
   ```

7. `database/migrations/xxxx_create_screenings_table.php` 작성:
   - 컬럼: id, title (영화 제목), screening_date (상영 날짜), screening_time (상영 시간), poster_url (포스터 이미지 URL, nullable), total_seats (총 좌석 수, 기본값 30), timestamps

8. `database/migrations/xxxx_create_bookings_table.php` 작성:
   - 컬럼: id, screening_id (외래키), seat_number (좌석 번호, 예: 'A1'), customer_name (예매자 이름), customer_email, customer_phone, booking_number (예매 번호, 유니크), timestamps
   - 외래키 제약: screening_id는 screenings 테이블 참조, onDelete('cascade')

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

10. 시더 파일 생성하여 샘플 상영 데이터 추가:
    ```bash
    php artisan make:seeder ScreeningSeeder
    ```
    - `database/seeders/ScreeningSeeder.php`에 샘플 영화 2~3개 추가 (제목, 날짜, 시간, 포스터 URL은 Unsplash placeholder 사용)
    - `database/seeders/DatabaseSeeder.php`에서 ScreeningSeeder 호출
    - 실행: `php artisan db:seed`

프로젝트 구조와 데이터베이스가 준비되었는지 확인하세요.

# Laravel API 엔드포인트 작성

`backend` 폴더에서 작업합니다.

1. Screening 모델 생성:
   ```bash
   php artisan make:model Screening
   ```
   - `app/Models/Screening.php`에 `$fillable = ['title', 'screening_date', 'screening_time', 'poster_url', 'total_seats'];` 추가
   - bookings 관계 정의: `public function bookings() { return $this->hasMany(Booking::class); }`

2. Booking 모델 생성:
   ```bash
   php artisan make:model Booking
   ```
   - `app/Models/Booking.php`에 `$fillable = ['screening_id', 'seat_number', 'customer_name', 'customer_email', 'customer_phone', 'booking_number'];` 추가
   - screening 관계 정의: `public function screening() { return $this->belongsTo(Screening::class); }`

3. API 컨트롤러 생성:
   ```bash
   php artisan make:controller Api/ScreeningController
   php artisan make:controller Api/BookingController
   ```

4. `app/Http/Controllers/Api/ScreeningController.php` 작성:
   - `index()` 메서드: 모든 상영 일정 반환 (JSON)
     ```php
     public function index() {
         $screenings = Screening::all();
         return response()->json($screenings);
     }
     ```
   - `show($id)` 메서드: 특정 상영 정보 + 예약된 좌석 번호 배열 반환
     ```php
     public function show($id) {
         $screening = Screening::with('bookings:screening_id,seat_number')->findOrFail($id);
         $bookedSeats = $screening->bookings->pluck('seat_number');
         return response()->json([
             'screening' => $screening,
             'bookedSeats' => $bookedSeats
         ]);
     }
     ```

5. `app/Http/Controllers/Api/BookingController.php` 작성:
   - `store(Request $request)` 메서드: 예매 생성
     - 입력: screening_id, seat_number, customer_name, customer_email, customer_phone
     - 좌석 중복 체크 (이미 예약된 좌석인지 확인)
     - booking_number 생성 (예: 'BK' + timestamp + random 4자리)
     - 예매 저장 후 예매 정보 반환 (JSON)
   - `show($bookingNumber)` 메서드: 예매 번호로 예매 정보 조회
     - Booking::where('booking_number', $bookingNumber)->with('screening')->firstOrFail() 반환

6. `routes/api.php`에 라우트 추가:
   ```php
   use App\Http\Controllers\Api\ScreeningController;
   use App\Http\Controllers\Api\BookingController;

   Route::get('/screenings', [ScreeningController::class, 'index']);
   Route::get('/screenings/{id}', [ScreeningController::class, 'show']);
   Route::post('/bookings', [BookingController::class, 'store']);
   Route::get('/bookings/{bookingNumber}', [BookingController::class, 'show']);
   ```

7. Laravel 개발 서버 실행:
   ```bash
   php artisan serve
   ```
   - 기본 포트: http://localhost:8000

8. API 테스트 (Postman 또는 curl):
   - GET http://localhost:8000/api/screenings (상영 목록)
   - GET http://localhost:8000/api/screenings/1 (특정 상영 + 예약된 좌석)

API가 정상적으로 작동하는지 확인하세요.

# React 19 프론트엔드 프로젝트 생성

프로젝트 루트 폴더(`indie-film-screening-ticket-booking`)로 돌아와서 작업합니다.

1. `frontend` 폴더에 React 19 프로젝트 생성 (Vite 사용):
   ```bash
   npm create vite@latest frontend -- --template react
   cd frontend
   npm install
   ```

2. Tailwind CSS 설치 및 설정:
   ```bash
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   ```
   - `tailwind.config.js` 수정:
     ```js
     content: ["./index.html", "./src/**/*.{js,jsx}"],
     ```
   - `src/index.css`에 Tailwind directives 추가:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```

3. axios 설치 (API 통신용):
   ```bash
   npm install axios
   ```

4. `src/App.jsx` 초기 구조 작성:
   - useState로 `screenings` 상태 관리
   - useEffect에서 `http://localhost:8000/api/screenings` 호출하여 상영 목록 가져오기
   - 상영 목록을 카드 형태로 표시 (영화 제목, 날짜, 시간, 포스터 이미지)
   - 각 카드에 "예매하기" 버튼 추가 (클릭 시 해당 상영 ID 저장)

5. Tailwind CSS로 스타일링:
   - 카드 레이아웃: 그리드 또는 flexbox
   - 포스터 이미지: aspect-ratio 유지, rounded corners
   - 버튼: bg-blue-600 hover:bg-blue-700 등

6. 개발 서버 실행:
   ```bash
   npm run dev
   ```
   - 기본 포트: http://localhost:5173

7. 브라우저에서 확인:
   - 상영 목록이 표시되는지 확인
   - CORS 에러 발생 시 Laravel `config/cors.php` 재확인

프론트엔드 기본 구조가 완성되었는지 확인하세요.

# 좌석 선택 UI 구현

`frontend/src` 폴더에서 작업합니다.

1. `src/components/SeatMap.jsx` 컴포넌트 생성:
   - props: `bookedSeats` (배열), `selectedSeat` (문자열), `onSeatSelect` (함수)
   - 좌석 배치: 5행(A~E) x 6열(1~6) = 30석 그리드 생성
   - 각 좌석을 버튼으로 렌더링:
     - 예약 가능: 클릭 시 `onSeatSelect` 호출, 배경색 회색
     - 예약 불가능 (`bookedSeats`에 포함): 클릭 불가, 배경색 빨간색, cursor-not-allowed
     - 선택된 좌석 (`selectedSeat`): 배경색 초록색
   - Tailwind CSS로 그리드 레이아웃 (grid grid-cols-6 gap-2)

2. `src/App.jsx` 수정:
   - "예매하기" 버튼 클릭 시:
     - 선택한 상영 ID로 `http://localhost:8000/api/screenings/{id}` 호출
     - 응답에서 `screening` 정보와 `bookedSeats` 배열 저장
     - 좌석 선택 화면으로 전환 (조건부 렌더링)
   - 상태 추가:
     - `selectedScreening` (선택한 상영 정보)
     - `bookedSeats` (예약된 좌석 배열)
     - `selectedSeat` (사용자가 선택한 좌석)
   - `SeatMap` 컴포넌트 렌더링:
     - `onSeatSelect` 함수로 `selectedSeat` 상태 업데이트

3. 좌석 선택 후 예매 폼 표시:
   - 좌석 선택 후 "다음" 버튼 활성화
   - 클릭 시 예매 폼 표시 (이름, 이메일, 전화번호 입력 필드)

4. 스타일링:
   - 좌석 버튼: w-10 h-10, 텍스트 중앙 정렬
   - 범례 추가: 예약 가능(회색), 예약 불가(빨간색), 선택됨(초록색)

브라우저에서 좌석 선택이 정상적으로 작동하는지 확인하세요.

# 예매 폼 제출 및 예매 확인 페이지

`frontend/src` 폴더에서 작업합니다.

1. `src/components/BookingForm.jsx` 컴포넌트 생성:
   - props: `screening` (상영 정보), `selectedSeat` (선택한 좌석), `onSubmit` (함수)
   - 폼 필드:
     - 이름 (input text, required)
     - 이메일 (input email, required)
     - 전화번호 (input tel, required)
   - 제출 버튼: "예매 완료"
   - 폼 제출 시 `onSubmit` 함수 호출 (입력값 전달)

2. `src/App.jsx` 수정:
   - `BookingForm` 컴포넌트 렌더링 (좌석 선택 후)
   - `handleBookingSubmit` 함수 작성:
     - axios POST 요청: `http://localhost:8000/api/bookings`
     - 요청 본문: { screening_id, seat_number, customer_name, customer_email, customer_phone }
     - 응답에서 예매 정보 받아 `bookingConfirmation` 상태에 저장
     - 예매 확인 페이지로 전환

3. `src/components/BookingConfirmation.jsx` 컴포넌트 생성:
   - props: `booking` (예매 정보 객체)
   - 표시 내용:
     - "예매가 완료되었습니다!" 메시지
     - 예매 번호 (큰 글씨로 강조)
     - 영화 제목, 상영 날짜/시간
     - 좌석 번호
     - 예매자 이름, 이메일, 전화번호
   - "처음으로" 버튼 (상영 목록으로 돌아가기)

4. `src/App.jsx`에서 조건부 렌더링:
   - `bookingConfirmation` 상태가 있으면 `BookingConfirmation` 컴포넌트 표시
   - 없으면 상영 목록 또는 좌석 선택 화면 표시

5. 스타일링:
   - 폼: 세로 레이아웃, 입력 필드 간격, 라벨 추가
   - 예매 확인 페이지: 카드 형태, 중앙 정렬, 배경색 구분

6. 테스트:
   - 상영 선택 → 좌석 선택 → 예매 폼 작성 → 예매 완료 → 확인 페이지 표시
   - Laravel 데이터베이스에 예매 데이터가 저장되는지 확인 (SQLite 브라우저 또는 `php artisan tinker`로 확인)

전체 예매 흐름이 정상적으로 작동하는지 확인하세요.

# 예매 내역 조회 기능 추가 및 최종 마무리

`frontend/src` 폴더에서 작업합니다.

1. `src/components/BookingLookup.jsx` 컴포넌트 생성:
   - 예매 번호 입력 필드 (input text)
   - "조회" 버튼
   - 버튼 클릭 시 `http://localhost:8000/api/bookings/{bookingNumber}` GET 요청
   - 응답 받으면 예매 정보 표시 (BookingConfirmation 컴포넌트 재사용 또는 유사한 레이아웃)
   - 예매를 찾을 수 없는 경우 에러 메시지 표시

2. `src/App.jsx` 수정:
   - 상영 목록 페이지 상단에 "예매 조회" 링크 또는 버튼 추가
   - 클릭 시 `BookingLookup` 컴포넌트 표시 (조건부 렌더링)
   - "뒤로 가기" 버튼으로 상영 목록으로 돌아가기

3. 에러 핸들링 개선:
   - API 요청 실패 시 사용자에게 알림 (alert 또는 toast)
   - 좌석 중복 예약 시도 시 Laravel에서 에러 반환 → React에서 처리

4. UI/UX 개선:
   - 로딩 상태 표시 (API 요청 중 스피너 또는 "로딩 중..." 메시지)
   - 반응형 디자인 확인 (모바일 화면에서도 잘 보이는지)
   - 포스터 이미지 없는 경우 플레이스홀더 표시

5. README.md 작성:
   - 프로젝트 설명
   - 설치 방법:
     ```
     # 백엔드
     cd backend
     composer install
     cp .env.example .env
     php artisan key:generate
     touch database/database.sqlite
     php artisan migrate --seed
     php artisan serve

     # 프론트엔드 (새 터미널)
     cd frontend
     npm install
     npm run dev
     ```
   - 사용 방법 (스크린샷 추가 권장)
   - 기술 스택 명시

6. 최종 테스트:
   - 전체 예매 흐름 (상영 선택 → 좌석 선택 → 예매 → 확인)
   - 예매 조회 기능
   - 중복 좌석 예약 시도 (에러 처리 확인)
   - 여러 상영 일정에 대해 예매 테스트

7. Git 커밋 및 GitHub 업로드:
   ```bash
   git init
   git add .
   git commit -m "Initial commit: 독립영화 상영회 티켓 예매 시스템"
   git branch -M main
   git remote add origin https://github.com/your-username/indie-film-screening-ticket-booking.git
   git push -u origin main
   ```

프로젝트가 완성되었습니다! 모든 기능이 정상적으로 작동하는지 최종 확인하세요.