🎸 로컬 라이브 공연 티켓 판매 페이지

mkdir live-show-ticket-sales && cd live-show-ticket-sales

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

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

1. `backend` 폴더에 Laravel 13.x 프로젝트를 생성하세요.
2. `.env` 파일에서 데이터베이스를 SQLite로 설정하세요.
3. `database/database.sqlite` 파일을 생성하세요.
4. CORS 설정을 추가하여 React 프론트엔드(http://localhost:5173)에서 API 호출이 가능하도록 하세요.
5. `php artisan serve --port=8000`로 백엔드 서버를 실행할 수 있도록 준비하세요.

## 기대 결과
- `backend` 폴더에 Laravel 13.x 프로젝트 생성 완료
- SQLite 데이터베이스 설정 완료
- CORS 미들웨어 설정으로 React 앱과 통신 가능
- `php artisan serve` 실행 시 http://localhost:8000 접속 가능

## Laravel 마이그레이션 및 모델 생성

1. `shows` 테이블을 생성하는 마이그레이션을 만드세요. 컬럼:
   - id (primary key)
   - title (공연명, string)
   - artist (아티스트명, string)
   - venue (공연 장소, string)
   - show_date (공연 일시, datetime)
   - ticket_price (티켓 가격, decimal)
   - total_seats (총 좌석 수, integer)
   - sold_seats (판매된 좌석 수, integer, 기본값 0)
   - poster_url (포스터 이미지 URL, string, nullable)
   - created_at, updated_at (타임스탬프)

2. `ticket_orders` 테이블을 생성하는 마이그레이션을 만드세요. 컬럼:
   - id (primary key)
   - show_id (외래키, shows 테이블 참조)
   - customer_name (구매자 이름, string)
   - customer_email (구매자 이메일, string)
   - customer_phone (구매자 연락처, string)
   - quantity (티켓 수량, integer)
   - created_at, updated_at (타임스탬프)

3. `Show` 모델과 `TicketOrder` 모델을 생성하세요.
4. 모델 간 관계 설정:
   - Show 모델: `hasMany` 관계로 TicketOrder와 연결
   - TicketOrder 모델: `belongsTo` 관계로 Show와 연결

5. 마이그레이션을 실행하세요: `php artisan migrate`

## 기대 결과
- shows, ticket_orders 테이블이 SQLite DB에 생성됨
- Show, TicketOrder Eloquent 모델 생성 완료
- 모델 간 관계 설정 완료

## Laravel API 라우트 및 컨트롤러 구현

1. `routes/api.php`에 다음 API 엔드포인트를 정의하세요:
   - GET `/api/shows` : 모든 공연 목록 조회
   - GET `/api/shows/{id}` : 특정 공연 상세 정보 조회
   - POST `/api/shows` : 새 공연 등록 (관리자용, 선택사항)
   - POST `/api/ticket-orders` : 티켓 구매 신청

2. `ShowController`를 생성하고 다음 메서드를 구현하세요:
   - `index()`: 모든 공연 목록을 JSON으로 반환 (잔여석 계산 포함)
   - `show($id)`: 특정 공연 상세 정보 반환
   - `store()`: 새 공연 등록 (title, artist, venue, show_date, ticket_price, total_seats 입력)

3. `TicketOrderController`를 생성하고 `store()` 메서드를 구현하세요:
   - 티켓 구매 신청 처리
   - show_id, customer_name, customer_email, customer_phone, quantity 입력
   - 잔여석 확인: `show->sold_seats + quantity <= show->total_seats` 검증
   - 구매 가능하면 TicketOrder 생성 및 Show의 sold_seats 증가
   - 성공 시 JSON 응답 반환

4. Postman 또는 curl로 API 테스트:
   - POST `/api/shows`로 샘플 공연 데이터 1~2개 등록
   - GET `/api/shows`로 공연 목록 조회 확인
   - POST `/api/ticket-orders`로 티켓 구매 테스트

## 기대 결과
- RESTful API 엔드포인트 구현 완료
- 공연 등록, 조회, 티켓 구매 로직 동작
- JSON 응답 형식 확인

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

1. 프로젝트 루트(`live-show-ticket-sales`)에서 `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`에서 content 경로 설정: `["./index.html", "./src/**/*.{js,jsx}"]`
   - `src/index.css`에 Tailwind 지시어 추가:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```

3. `npm run dev`로 프론트엔드 개발 서버를 실행하세요 (http://localhost:5173).

4. `src/App.jsx`를 간단한 헤더와 "공연 티켓 판매" 타이틀로 수정하여 Tailwind CSS가 적용되는지 확인하세요.

## 기대 결과
- React 19 + Vite 프론트엔드 프로젝트 생성 완료
- Tailwind CSS 설정 완료
- http://localhost:5173 접속 시 기본 화면 표시

## React 컴포넌트 구현 - 공연 목록 표시

1. `src/components/ShowList.jsx` 컴포넌트를 생성하세요.
2. `useState`와 `useEffect`를 사용하여 Laravel API(`http://localhost:8000/api/shows`)에서 공연 목록을 fetch하세요.
3. 공연 데이터를 카드 형태로 표시:
   - 공연명, 아티스트, 장소, 일시, 티켓 가격
   - 잔여석 표시: `total_seats - sold_seats` 계산
   - Tailwind CSS로 반응형 그리드 레이아웃 (모바일: 1열, 태블릿: 2열, 데스크톱: 3열)
4. 각 카드에 "티켓 구매" 버튼 추가 (클릭 시 해당 공연 ID를 상태로 저장하여 구매 폼 표시 준비)
5. `src/App.jsx`에서 `<ShowList />` 컴포넌트를 렌더링하세요.

## 기대 결과
- 공연 목록이 카드 형태로 표시됨
- 잔여석 정보가 실시간으로 표시됨
- 반응형 디자인 적용

## React 컴포넌트 구현 - 티켓 구매 폼

1. `src/components/TicketOrderForm.jsx` 컴포넌트를 생성하세요.
2. Props로 선택된 공연 정보(`selectedShow`)를 받아옵니다.
3. 폼 필드:
   - 이름 (customer_name)
   - 이메일 (customer_email)
   - 연락처 (customer_phone)
   - 티켓 수량 (quantity, number input)
4. `useState`로 폼 입력값을 관리하세요.
5. 제출 버튼 클릭 시:
   - Laravel API(`http://localhost:8000/api/ticket-orders`)로 POST 요청
   - 요청 body: `{ show_id, customer_name, customer_email, customer_phone, quantity }`
   - 성공 시 알림 메시지 표시 및 폼 초기화
   - 실패 시 (잔여석 부족 등) 에러 메시지 표시
6. `ShowList` 컴포넌트에서 "티켓 구매" 버튼 클릭 시 `TicketOrderForm`을 모달 또는 섹션으로 표시하세요.
7. 구매 완료 후 공연 목록을 다시 fetch하여 잔여석 업데이트를 확인하세요.

## 기대 결과
- 티켓 구매 폼이 동작하여 Laravel API로 주문 데이터 전송
- 구매 성공 시 잔여석이 실시간으로 감소
- 폼 유효성 검사 및 에러 처리