풀스택 영화 좌석 예매 시스템 - 실시간 좌석 선택

mkdir movie-seat-booking-system && cd movie-seat-booking-system

이 폴더에서 풀스택 영화 좌석 예매 시스템 프로젝트를 시작합니다.

## 백엔드 (Laravel 13.x API) 설정

1. `backend` 폴더에 Laravel 13.x 프로젝트를 생성하세요.
2. 데이터베이스는 SQLite를 사용하도록 `.env` 파일을 수정하세요.
3. CORS 설정을 추가하여 React 프론트엔드(http://localhost:5173)와 통신할 수 있도록 하세요.
4. 다음 테이블을 마이그레이션으로 생성하세요:
   - `movies` 테이블: id, title (영화 제목), showtime (상영 시간, 예: "14:00"), price (가격, 정수)
   - `seats` 테이블: id, movie_id (외래키), row (행, A-J), number (좌석 번호, 1-8), is_booked (예약 여부, boolean, 기본값 false)
   - `bookings` 테이블: id, movie_id, seat_id (외래키), customer_name (예매자 이름), created_at, updated_at

5. Seeder를 작성하여 다음 샘플 데이터를 추가하세요:
   - 영화 3편 (예: "인터스텔라", "오펜하이머", "듄")
   - 각 영화당 80개 좌석 (A1~A8, B1~B8, ..., J1~J8)

6. `php artisan migrate --seed`를 실행하여 테이블과 샘플 데이터를 생성하세요.

## 프론트엔드 (React 19 + Vite) 설정

7. `frontend` 폴더에 React 19 + Vite 프로젝트를 생성하세요.
8. Tailwind CSS를 설치하고 설정하세요.
9. 개발 서버를 실행했을 때 "Movie Seat Booking System" 제목이 표시되는 기본 레이아웃을 만드세요.

모든 설정이 완료되면 `backend` 폴더에서 `php artisan serve`, `frontend` 폴더에서 `npm run dev`를 실행하여 두 서버가 정상 작동하는지 확인하세요.

## Laravel API 엔드포인트 구현

다음 RESTful API를 구현하세요:

1. **GET /api/movies** - 모든 영화 목록 반환
   - 응답 형식: `[{id, title, showtime, price}, ...]`

2. **GET /api/movies/{movieId}/seats** - 특정 영화의 모든 좌석 정보 반환
   - 응답 형식: `[{id, row, number, is_booked}, ...]`
   - 좌석은 row와 number 순으로 정렬

3. **POST /api/bookings** - 좌석 예매 처리
   - 요청 본문: `{movie_id, seat_ids: [1, 2, 3], customer_name}`
   - 처리 로직:
     - seat_ids 배열의 모든 좌석이 예약 가능한지 확인 (is_booked가 false인지)
     - 이미 예약된 좌석이 있으면 에러 반환 (422 상태 코드)
     - 모두 예약 가능하면 bookings 테이블에 레코드 생성하고 seats 테이블의 is_booked를 true로 업데이트
   - 응답 형식: `{message: "예매가 완료되었습니다.", booking_ids: [...]}`

4. **GET /api/bookings** - 모든 예매 내역 반환
   - 응답 형식: `[{id, movie: {title, showtime}, seat: {row, number}, customer_name, created_at}, ...]`
   - Movie와 Seat 정보를 함께 반환 (Eager Loading 사용)

Laravel Controller와 Route를 작성하고, Postman이나 curl로 각 엔드포인트를 테스트하세요.

## React 프론트엔드 - 영화 선택 화면 구현

1. `src/components/MovieList.jsx` 컴포넌트를 생성하세요.
2. useEffect와 fetch API를 사용하여 `http://localhost:8000/api/movies`에서 영화 목록을 가져오세요.
3. 영화 목록을 카드 형태로 표시하세요. 각 카드에는:
   - 영화 제목 (큰 폰트)
   - 상영 시간 (시계 아이콘과 함께)
   - 가격 (원화 표시)
   - "좌석 선택" 버튼
4. "좌석 선택" 버튼을 클릭하면 선택한 영화 정보를 부모 컴포넌트로 전달하세요 (props callback 사용).
5. Tailwind CSS로 스타일링:
   - 카드는 그리드 레이아웃 (2열 또는 3열)
   - hover 시 그림자 효과
   - 버튼은 파란색 배경, hover 시 진하게

`App.jsx`에서 MovieList 컴포넌트를 렌더링하고, 선택된 영화 정보를 state로 관리하세요.

## React 프론트엔드 - 좌석 배치도 및 선택 기능 구현

1. `src/components/SeatMap.jsx` 컴포넌트를 생성하세요.
2. props로 `movieId`를 받아 `http://localhost:8000/api/movies/{movieId}/seats`에서 좌석 정보를 가져오세요.
3. 좌석을 10행(A-J) x 8열(1-8) 그리드로 시각화하세요:
   - 각 좌석은 정사각형 버튼 (40px x 40px)
   - 좌석 상태별 색상:
     - 예약 가능: 회색 배경 (#d1d5db)
     - 선택됨: 파란색 배경 (#3b82f6)
     - 예약됨: 빨간색 배경 (#ef4444), 비활성화 (클릭 불가)
   - 좌석 번호를 버튼 안에 표시 (예: "A1", "B5")
4. 좌석 클릭 시:
   - 예약 가능한 좌석이면 선택 상태로 변경 (useState로 selectedSeats 배열 관리)
   - 이미 선택된 좌석이면 선택 취소
   - 예약된 좌석은 클릭 불가
5. 선택된 좌석 정보를 화면 하단에 표시:
   - 선택한 좌석 개수
   - 총 금액 (좌석 개수 x 영화 가격)
6. "예매하기" 버튼 추가:
   - 선택된 좌석이 없으면 비활성화
   - 클릭 시 선택된 좌석 정보를 부모 컴포넌트로 전달

Tailwind CSS로 그리드 레이아웃과 좌석 스타일을 구현하세요.

## React 프론트엔드 - 예매 처리 및 예매 내역 표시

1. SeatMap 컴포넌트에서 "예매하기" 버튼 클릭 시:
   - 사용자에게 예매자 이름을 입력받는 간단한 prompt 또는 input 필드 추가
   - POST 요청을 `http://localhost:8000/api/bookings`로 전송:
     ```javascript
     fetch('http://localhost:8000/api/bookings', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         movie_id: movieId,
         seat_ids: selectedSeats.map(s => s.id),
         customer_name: customerName
       })
     })
     ```
   - 성공 시: 알림 메시지 표시, 선택 초기화, 좌석 정보 새로고침
   - 실패 시 (이미 예약된 좌석): 에러 메시지 표시

2. `src/components/BookingHistory.jsx` 컴포넌트를 생성하세요:
   - `http://localhost:8000/api/bookings`에서 예매 내역을 가져와 테이블로 표시
   - 각 행에 표시할 정보:
     - 영화 제목
     - 상영 시간
     - 좌석 번호 (예: "A3")
     - 예매자 이름
     - 예매 일시 (created_at)
   - Tailwind CSS로 깔끔한 테이블 디자인

3. App.jsx에서 "예매 내역 보기" 버튼을 추가하고, 클릭 시 BookingHistory 컴포넌트를 모달 또는 별도 섹션에 표시하세요.

모든 기능을 테스트하세요: 영화 선택 → 좌석 선택 → 예매 → 예매 내역 확인