🎸 인디 밴드 공연 일정 & 티켓 예매 페이지

mkdir indie-band-concert-booking && cd indie-band-concert-booking

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

# Laravel 13.x 백엔드 API 서버 생성

1. Laravel 13.x 프로젝트를 `backend` 폴더에 생성해주세요:
   - Composer를 사용하여 최신 Laravel 설치
   - 프로젝트명: backend

2. 데이터베이스 설정:
   - SQLite 사용 (.env 파일에서 DB_CONNECTION=sqlite 설정)
   - database/database.sqlite 파일 생성

3. 다음 마이그레이션 파일들을 생성해주세요:

   **concerts 테이블** (공연 일정):
   - id (primary key)
   - title (공연명, string)
   - date (공연 날짜, date)
   - time (공연 시간, string)
   - venue (장소, string)
   - price (티켓 가격, integer)
   - total_tickets (총 티켓 수, integer, 기본값 100)
   - available_tickets (남은 티켓 수, integer, 기본값 100)
   - poster_image (포스터 이미지 URL, string, nullable)
   - timestamps

   **bookings 테이블** (티켓 예매):
   - id (primary key)
   - concert_id (외래키, concerts 테이블 참조)
   - name (예매자 이름, string)
   - email (예매자 이메일, string)
   - phone (휴대폰 번호, string)
   - ticket_count (예매 매수, integer)
   - timestamps

4. 마이그레이션 실행 (php artisan migrate)

5. Seeder 생성 및 실행:
   - 샘플 공연 데이터 3~5개 생성 (ConcertSeeder)
   - php artisan db:seed

6. CORS 설정:
   - config/cors.php에서 'allowed_origins' => ['http://localhost:5173'] 추가
   - Kernel.php에서 CORS 미들웨어 활성화

7. API 라우트 설계 (routes/api.php):
   - GET /api/concerts (전체 공연 목록)
   - GET /api/concerts/{id} (특정 공연 상세)
   - POST /api/bookings (티켓 예매)
   - GET /api/bookings/search?email={email} (이메일로 예매 내역 조회)

8. 컨트롤러 생성:
   - ConcertController (공연 목록, 상세 조회)
   - BookingController (예매 생성, 조회)

모든 설정이 완료되면 `php artisan serve`로 API 서버를 8000번 포트에서 실행해주세요.

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

1. 현재 폴더(indie-band-concert-booking)에서 `frontend` 폴더를 생성하고, Vite + React 19 프로젝트를 설치해주세요:
   - npm create vite@latest frontend -- --template react
   - cd frontend
   - npm install

2. Tailwind CSS 설치 및 설정:
   - npm install -D tailwindcss postcss autoprefixer
   - npx tailwindcss init -p
   - tailwind.config.js에서 content 경로 설정: ["./index.html", "./src/**/*.{js,jsx}"]
   - src/index.css에 Tailwind 디렉티브 추가 (@tailwind base; @tailwind components; @tailwind utilities;)

3. axios 설치:
   - npm install axios

4. 기본 폴더 구조 생성:
   - src/components/ (컴포넌트 폴더)
   - src/pages/ (페이지 컴포넌트 폴더)
   - src/services/ (API 호출 함수 폴더)

5. API 서비스 파일 생성 (src/services/api.js):
   - axios 인스턴스 생성 (baseURL: 'http://localhost:8000/api')
   - getConcerts() 함수 (GET /concerts)
   - getConcertById(id) 함수 (GET /concerts/{id})
   - createBooking(data) 함수 (POST /bookings)
   - searchBookings(email) 함수 (GET /bookings/search?email={email})

6. React Router 설치 및 설정:
   - npm install react-router-dom
   - src/App.jsx에서 라우터 설정:
     - / (홈 페이지: 밴드 소개 + 공연 목록)
     - /concerts/:id (공연 상세 + 예매 폼)
     - /bookings (예매 내역 조회)

7. 기본 레이아웃 컴포넌트 생성 (src/components/Layout.jsx):
   - 헤더: 밴드 로고, 네비게이션 (홈, 예매 확인)
   - 푸터: SNS 링크 (선택)
   - Tailwind CSS로 스타일링

8. 개발 서버 실행:
   - npm run dev (포트 5173에서 실행)

프론트엔드 기본 구조가 완성되면 다음 단계로 넘어갑니다.

# 홈 페이지 구현 - 밴드 소개 & 공연 목록

1. src/pages/Home.jsx 생성:
   - 밴드 프로필 섹션:
     - 밴드 이름 (예: "The Indie Vibes")
     - 장르 (예: "Indie Rock / Alternative")
     - 소개 텍스트 (2~3문장)
     - 대표 이미지 (placeholder 이미지 사용 가능)
   
   - 공연 일정 목록 섹션:
     - useEffect + useState로 API에서 공연 목록 가져오기 (getConcerts())
     - 각 공연 카드 표시:
       - 공연명, 날짜, 시간, 장소, 티켓 가격
       - 남은 티켓 수량 배지 (available_tickets)
       - "예매하기" 버튼 (클릭 시 /concerts/{id}로 이동)
     - 그리드 레이아웃 (md:grid-cols-2 lg:grid-cols-3)
   
   - 로딩 상태 처리 (데이터 불러오는 동안 스피너 표시)
   - 에러 처리 (API 호출 실패 시 메시지 표시)

2. Tailwind CSS로 스타일링:
   - 밴드 프로필: 중앙 정렬, 큰 헤딩, 이미지 rounded-lg
   - 공연 카드: shadow-md, hover:shadow-lg 효과, border, padding
   - 남은 티켓 배지: bg-green-100 text-green-800 (10장 이하면 bg-red-100 text-red-800)
   - 예매하기 버튼: bg-indigo-600 hover:bg-indigo-700 text-white

3. src/App.jsx에서 홈 페이지 라우트 연결:
   - path="/" element={<Home />}

완성되면 홈 페이지에서 밴드 소개와 공연 목록이 보이고, 각 공연의 예매하기 버튼을 클릭하면 상세 페이지로 이동할 수 있어야 합니다.

# 공연 상세 & 티켓 예매 폼 구현

1. src/pages/ConcertDetail.jsx 생성:
   - useParams로 URL에서 공연 ID 추출
   - useEffect + useState로 API에서 공연 상세 정보 가져오기 (getConcertById(id))
   
   - 공연 상세 정보 표시:
     - 포스터 이미지 (있으면 표시, 없으면 placeholder)
     - 공연명 (큰 제목)
     - 날짜, 시간, 장소 (아이콘과 함께 표시)
     - 티켓 가격
     - 남은 티켓 수량 (실시간 업데이트)
   
   - 티켓 예매 폼:
     - 입력 필드: 이름, 이메일, 휴대폰 번호, 예매 매수 (1~10장)
     - 유효성 검사: 모든 필드 필수, 이메일 형식 확인
     - "예매하기" 버튼 (클릭 시 createBooking() 호출)
     - 예매 성공 시: 성공 메시지 + 예매 내역 확인 페이지로 이동 안내
     - 예매 실패 시: 에러 메시지 표시
   
   - 남은 티켓 수량이 0이면 "매진" 배지 표시 및 예매 폼 비활성화

2. Tailwind CSS로 스타일링:
   - 2단 레이아웃: 왼쪽 공연 정보, 오른쪽 예매 폼
   - 입력 필드: border, rounded, focus:ring-2
   - 예매하기 버튼: bg-indigo-600 hover:bg-indigo-700, 비활성화 시 bg-gray-300

3. src/App.jsx에서 라우트 연결:
   - path="/concerts/:id" element={<ConcertDetail />}

완성되면 공연 상세 페이지에서 티켓을 예매할 수 있고, 예매 후 성공 메시지가 표시되어야 합니다.

# 예매 내역 조회 페이지 구현

1. src/pages/Bookings.jsx 생성:
   - 이메일 입력 폼:
     - 입력 필드: 이메일
     - "조회하기" 버튼 (클릭 시 searchBookings(email) 호출)
   
   - 예매 내역 목록 표시:
     - API에서 가져온 예매 내역을 테이블 또는 카드 형태로 표시
     - 각 예매 항목: 공연명, 날짜, 장소, 예매자 이름, 매수, 예매 일시
     - 예매 내역이 없으면 "예매 내역이 없습니다" 메시지 표시
   
   - 로딩 상태 처리
   - 에러 처리 (API 호출 실패 시)

2. Tailwind CSS로 스타일링:
   - 이메일 입력 폼: 중앙 정렬, border, rounded
   - 조회하기 버튼: bg-indigo-600 hover:bg-indigo-700
   - 예매 내역 테이블: border, shadow, striped rows (bg-gray-50)

3. src/App.jsx에서 라우트 연결:
   - path="/bookings" element={<Bookings />}

4. 헤더 네비게이션에 "예매 확인" 링크 추가 (/bookings)

완성되면 사용자는 이메일을 입력하여 자신의 예매 내역을 조회할 수 있어야 합니다.