🎤 라이브 클럽 공연 라인업 & 티켓 판매 페이지

mkdir live-club-lineup-ticket-sales && cd live-club-lineup-ticket-sales

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

## Laravel 백엔드 API 서버 생성

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

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

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

4. CORS 설정 - `config/cors.php` 파일에서 프론트엔드 요청을 허용하도록 수정:
```php
'paths' => ['api/*'],
'allowed_origins' => ['http://localhost:5173'], // Vite 기본 포트
'allowed_methods' => ['*'],
'allowed_headers' => ['*'],
'supports_credentials' => true,
```

5. `app/Http/Middleware/HandleCors.php`가 없다면 `php artisan make:middleware HandleCors` 실행 후 `bootstrap/app.php` 또는 `app/Http/Kernel.php`에 미들웨어 등록

6. 서버 실행 확인:
```bash
php artisan serve
```
http://localhost:8000 접속하여 Laravel 초기 화면이 보이면 성공!

## React 프론트엔드 생성

1. 상위 폴더로 이동 후 `frontend` 폴더에 React 프로젝트 생성:
```bash
cd ..
npm create vite@latest frontend -- --template react
cd frontend
npm install
```

2. Axios와 Tailwind CSS 설치:
```bash
npm install axios
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

3. `tailwind.config.js` 수정:
```js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

4. `src/index.css`에 Tailwind 지시문 추가:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

5. 프론트엔드 서버 실행 확인:
```bash
npm run dev
```
http://localhost:5173 접속하여 Vite+React 초기 화면이 보이면 성공!

## 프로젝트 구조

```
live-club-lineup-ticket-sales/
├── backend/          (Laravel API)
│   ├── app/
│   ├── database/
│   ├── routes/
│   └── ...
└── frontend/         (React UI)
    ├── src/
    ├── public/
    └── ...
```

이제 백엔드는 http://localhost:8000, 프론트엔드는 http://localhost:5173에서 각각 실행됩니다.

## Laravel 백엔드: 공연(Show) 모델 & 마이그레이션 생성

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

1. Show 모델과 마이그레이션 생성:
```bash
php artisan make:model Show -m
```

2. `database/migrations/YYYY_MM_DD_create_shows_table.php` 파일 수정:
```php
public function up()
{
    Schema::create('shows', function (Blueprint $table) {
        $table->id();
        $table->string('artist_name');        // 아티스트명
        $table->string('genre');              // 장르 (Rock, Jazz, Hip-hop, Indie 등)
        $table->date('show_date');            // 공연 날짜
        $table->time('show_time');            // 공연 시간
        $table->decimal('ticket_price', 8, 2); // 티켓 가격
        $table->integer('total_seats')->default(100); // 총 좌석 수
        $table->integer('available_seats')->default(100); // 잔여 좌석
        $table->text('description')->nullable(); // 공연 설명
        $table->timestamps();
    });
}
```

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

4. 시드 데이터 생성 - `database/seeders/DatabaseSeeder.php` 수정:
```php
public function run()
{
    \App\Models\Show::create([
        'artist_name' => 'The Midnight Blues',
        'genre' => 'Blues',
        'show_date' => '2025-02-15',
        'show_time' => '20:00',
        'ticket_price' => 25000,
        'total_seats' => 100,
        'available_seats' => 100,
        'description' => '블루스의 정수를 느낄 수 있는 라이브 공연',
    ]);

    \App\Models\Show::create([
        'artist_name' => 'Indie Rockers',
        'genre' => 'Indie',
        'show_date' => '2025-02-16',
        'show_time' => '19:30',
        'ticket_price' => 20000,
        'total_seats' => 80,
        'available_seats' => 80,
        'description' => '신선한 인디 사운드로 가득한 밤',
    ]);

    \App\Models\Show::create([
        'artist_name' => 'Jazz Fusion Trio',
        'genre' => 'Jazz',
        'show_date' => '2025-02-17',
        'show_time' => '21:00',
        'ticket_price' => 30000,
        'total_seats' => 60,
        'available_seats' => 5, // 매진 임박 예시
        'description' => '재즈의 새로운 해석, 퓨전의 매력',
    ]);
}
```

5. 시드 실행:
```bash
php artisan db:seed
```

## Booking 모델 & 마이그레이션 생성 (티켓 예약)

1. Booking 모델과 마이그레이션 생성:
```bash
php artisan make:model Booking -m
```

2. `database/migrations/YYYY_MM_DD_create_bookings_table.php` 파일 수정:
```php
public function up()
{
    Schema::create('bookings', function (Blueprint $table) {
        $table->id();
        $table->foreignId('show_id')->constrained()->onDelete('cascade');
        $table->string('customer_name');
        $table->string('customer_email');
        $table->integer('ticket_count')->default(1);
        $table->timestamps();
    });
}
```

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

Show 모델과 Booking 모델이 생성되었고, 테스트 데이터가 시드되었습니다!

## Laravel 백엔드: API 라우트 & 컨트롤러 생성

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

1. ShowController 생성:
```bash
php artisan make:controller Api/ShowController --api
```

2. `app/Http/Controllers/Api/ShowController.php` 구현:
```php
namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\Show;
use Illuminate\Http\Request;

class ShowController extends Controller
{
    // 모든 공연 목록 조회 (장르 필터 지원)
    public function index(Request $request)
    {
        $query = Show::query();
        
        if ($request->has('genre') && $request->genre !== 'all') {
            $query->where('genre', $request->genre);
        }
        
        $shows = $query->orderBy('show_date', 'asc')->get();
        
        return response()->json($shows);
    }

    // 특정 공연 상세 조회
    public function show($id)
    {
        $show = Show::findOrFail($id);
        return response()->json($show);
    }
}
```

3. BookingController 생성:
```bash
php artisan make:controller Api/BookingController --api
```

4. `app/Http/Controllers/Api/BookingController.php` 구현:
```php
namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\Booking;
use App\Models\Show;
use Illuminate\Http\Request;

class BookingController extends Controller
{
    // 티켓 예약 생성
    public function store(Request $request)
    {
        $validated = $request->validate([
            'show_id' => 'required|exists:shows,id',
            'customer_name' => 'required|string|max:100',
            'customer_email' => 'required|email',
            'ticket_count' => 'required|integer|min:1|max:10',
        ]);

        $show = Show::findOrFail($validated['show_id']);

        // 잔여 좌석 확인
        if ($show->available_seats < $validated['ticket_count']) {
            return response()->json([
                'message' => '잔여 좌석이 부족합니다.',
                'available_seats' => $show->available_seats,
            ], 400);
        }

        // 예약 생성
        $booking = Booking::create($validated);

        // 잔여 좌석 차감
        $show->decrement('available_seats', $validated['ticket_count']);

        return response()->json([
            'message' => '티켓 예약이 완료되었습니다!',
            'booking' => $booking,
        ], 201);
    }

    // 내 예약 목록 조회 (이메일 기반)
    public function index(Request $request)
    {
        $email = $request->query('email');
        
        if (!$email) {
            return response()->json(['message' => '이메일을 입력하세요.'], 400);
        }

        $bookings = Booking::with('show')
            ->where('customer_email', $email)
            ->orderBy('created_at', 'desc')
            ->get();

        return response()->json($bookings);
    }
}
```

5. Booking 모델에 관계 설정 - `app/Models/Booking.php`:
```php
protected $fillable = ['show_id', 'customer_name', 'customer_email', 'ticket_count'];

public function show()
{
    return $this->belongsTo(Show::class);
}
```

6. API 라우트 등록 - `routes/api.php`:
```php
use App\Http\Controllers\Api\ShowController;
use App\Http\Controllers\Api\BookingController;

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

7. API 테스트 (Postman 또는 curl):
```bash
# 공연 목록 조회
curl http://localhost:8000/api/shows

# 장르 필터링
curl http://localhost:8000/api/shows?genre=Jazz

# 티켓 예약
curl -X POST http://localhost:8000/api/bookings \
  -H "Content-Type: application/json" \
  -d '{"show_id": 1, "customer_name": "홍길동", "customer_email": "hong@example.com", "ticket_count": 2}'
```

Laravel API가 완성되었습니다!

## React 프론트엔드: API 연동 & 공연 목록 UI 구현

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

1. Axios 설정 파일 생성 - `src/api/axios.js`:
```js
import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:8000/api',
  headers: {
    'Content-Type': 'application/json',
  },
});

export default api;
```

2. 공연 목록 컴포넌트 - `src/components/ShowList.jsx`:
```jsx
import { useState, useEffect } from 'react';
import api from '../api/axios';

function ShowList({ onSelectShow }) {
  const [shows, setShows] = useState([]);
  const [selectedGenre, setSelectedGenre] = useState('all');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchShows();
  }, [selectedGenre]);

  const fetchShows = async () => {
    setLoading(true);
    try {
      const params = selectedGenre !== 'all' ? { genre: selectedGenre } : {};
      const response = await api.get('/shows', { params });
      setShows(response.data);
    } catch (error) {
      console.error('공연 목록 로딩 실패:', error);
    } finally {
      setLoading(false);
    }
  };

  const genres = ['all', 'Rock', 'Jazz', 'Hip-hop', 'Indie', 'Blues'];

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-4xl font-bold text-center mb-8 text-purple-600">
        🎤 이번 주 라이브 공연 라인업
      </h1>

      {/* 장르 필터 */}
      <div className="flex gap-2 mb-6 flex-wrap justify-center">
        {genres.map((genre) => (
          <button
            key={genre}
            onClick={() => setSelectedGenre(genre)}
            className={`px-4 py-2 rounded-full font-medium transition ${
              selectedGenre === genre
                ? 'bg-purple-600 text-white'
                : 'bg-gray-200 hover:bg-gray-300'
            }`}
          >
            {genre === 'all' ? '전체' : genre}
          </button>
        ))}
      </div>

      {/* 공연 목록 */}
      {loading ? (
        <p className="text-center text-gray-500">로딩 중...</p>
      ) : shows.length === 0 ? (
        <p className="text-center text-gray-500">공연이 없습니다.</p>
      ) : (
        <div className="grid gap-6 md:grid-cols-2">
          {shows.map((show) => (
            <div
              key={show.id}
              className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition cursor-pointer"
              onClick={() => onSelectShow(show)}
            >
              <div className="flex justify-between items-start mb-3">
                <h2 className="text-2xl font-bold text-gray-800">{show.artist_name}</h2>
                <span className="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-medium">
                  {show.genre}
                </span>
              </div>
              <p className="text-gray-600 mb-2">{show.description}</p>
              <div className="flex justify-between items-center mt-4 pt-4 border-t">
                <div>
                  <p className="text-sm text-gray-500">📅 {show.show_date}</p>
                  <p className="text-sm text-gray-500">🕐 {show.show_time}</p>
                </div>
                <div className="text-right">
                  <p className="text-2xl font-bold text-purple-600">
                    ₩{parseInt(show.ticket_price).toLocaleString()}
                  </p>
                  <p className="text-sm text-gray-500">
                    잔여 {show.available_seats}석
                    {show.available_seats <= 5 && (
                      <span className="ml-2 text-red-500 font-bold">⚠️ 매진임박</span>
                    )}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default ShowList;
```

3. `src/App.jsx` 수정:
```jsx
import { useState } from 'react';
import ShowList from './components/ShowList';

function App() {
  const [selectedShow, setSelectedShow] = useState(null);

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50">
      <ShowList onSelectShow={setSelectedShow} />
      {selectedShow && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-lg p-6 max-w-md w-full">
            <h3 className="text-xl font-bold mb-2">{selectedShow.artist_name}</h3>
            <p className="text-gray-600">티켓 예약 폼은 다음 단계에서 구현합니다!</p>
            <button
              onClick={() => setSelectedShow(null)}
              className="mt-4 w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700"
            >
              닫기
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

export default App;
```

프론트엔드에서 공연 목록을 불러와 카드 형태로 표시하고, 장르 필터링이 작동합니다!

## React 프론트엔드: 티켓 예약 폼 & 내 예약 조회 UI 구현

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

1. 티켓 예약 폼 컴포넌트 - `src/components/BookingForm.jsx`:
```jsx
import { useState } from 'react';
import api from '../api/axios';

function BookingForm({ show, onClose, onSuccess }) {
  const [formData, setFormData] = useState({
    customer_name: '',
    customer_email: '',
    ticket_count: 1,
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    try {
      const response = await api.post('/bookings', {
        show_id: show.id,
        ...formData,
      });
      alert(response.data.message);
      onSuccess();
      onClose();
    } catch (err) {
      setError(err.response?.data?.message || '예약에 실패했습니다.');
    } finally {
      setLoading(false);
    }
  };

  const totalPrice = show.ticket_price * formData.ticket_count;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-lg p-6 max-w-md w-full">
        <h3 className="text-2xl font-bold mb-4 text-purple-600">🎫 티켓 예약</h3>
        <div className="mb-4 p-4 bg-purple-50 rounded-lg">
          <p className="font-bold text-lg">{show.artist_name}</p>
          <p className="text-sm text-gray-600">{show.show_date} {show.show_time}</p>
          <p className="text-sm text-gray-600">잔여석: {show.available_seats}석</p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              이름 *
            </label>
            <input
              type="text"
              required
              value={formData.customer_name}
              onChange={(e) => setFormData({ ...formData, customer_name: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              placeholder="홍길동"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              이메일 *
            </label>
            <input
              type="email"
              required
              value={formData.customer_email}
              onChange={(e) => setFormData({ ...formData, customer_email: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              placeholder="hong@example.com"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              티켓 매수 *
            </label>
            <input
              type="number"
              required
              min="1"
              max={show.available_seats}
              value={formData.ticket_count}
              onChange={(e) => setFormData({ ...formData, ticket_count: parseInt(e.target.value) })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            />
          </div>

          <div className="p-4 bg-gray-50 rounded-lg">
            <div className="flex justify-between items-center">
              <span className="text-gray-600">총 결제 금액</span>
              <span className="text-2xl font-bold text-purple-600">
                ₩{totalPrice.toLocaleString()}
              </span>
            </div>
          </div>

          {error && (
            <div className="p-3 bg-red-50 text-red-600 rounded-lg text-sm">
              {error}
            </div>
          )}

          <div className="flex gap-3">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
              disabled={loading}
            >
              취소
            </button>
            <button
              type="submit"
              className="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition disabled:bg-gray-300"
              disabled={loading}
            >
              {loading ? '예약 중...' : '예약하기'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

export default BookingForm;
```

2. 내 예약 조회 컴포넌트 - `src/components/MyBookings.jsx`:
```jsx
import { useState } from 'react';
import api from '../api/axios';

function MyBookings() {
  const [email, setEmail] = useState('');
  const [bookings, setBookings] = useState([]);
  const [loading, setLoading] = useState(false);
  const [searched, setSearched] = useState(false);

  const handleSearch = async (e) => {
    e.preventDefault();
    setLoading(true);
    setSearched(true);

    try {
      const response = await api.get('/bookings', { params: { email } });
      setBookings(response.data);
    } catch (error) {
      console.error('예약 조회 실패:', error);
      setBookings([]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-2xl mx-auto p-6 mt-8">
      <h2 className="text-3xl font-bold text-center mb-6 text-purple-600">
        📋 내 예약 조회
      </h2>

      <form onSubmit={handleSearch} className="flex gap-3 mb-6">
        <input
          type="email"
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="예약 시 입력한 이메일"
          className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        />
        <button
          type="submit"
          className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
          disabled={loading}
        >
          {loading ? '조회 중...' : '조회'}
        </button>
      </form>

      {searched && (
        <div>
          {bookings.length === 0 ? (
            <p className="text-center text-gray-500">예약 내역이 없습니다.</p>
          ) : (
            <div className="space-y-4">
              {bookings.map((booking) => (
                <div key={booking.id} className="bg-white rounded-lg shadow-md p-6">
                  <div className="flex justify-between items-start mb-3">
                    <div>
                      <h3 className="text-xl font-bold">{booking.show.artist_name}</h3>
                      <p className="text-gray-600">{booking.show.genre}</p>
                    </div>
                    <span className="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-medium">
                      예약완료
                    </span>
                  </div>
                  <div className="border-t pt-3 space-y-2">
                    <p className="text-sm text-gray-600">📅 {booking.show.show_date} {booking.show.show_time}</p>
                    <p className="text-sm text-gray-600">👤 {booking.customer_name}</p>
                    <p className="text-sm text-gray-600">🎫 {booking.ticket_count}매</p>
                    <p className="text-sm text-gray-600">
                      💰 ₩{(booking.show.ticket_price * booking.ticket_count).toLocaleString()}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export default MyBookings;
```

3. `src/App.jsx` 최종 통합:
```jsx
import { useState } from 'react';
import ShowList from './components/ShowList';
import BookingForm from './components/BookingForm';
import MyBookings from './components/MyBookings';

function App() {
  const [selectedShow, setSelectedShow] = useState(null);
  const [refreshKey, setRefreshKey] = useState(0);

  const handleBookingSuccess = () => {
    setRefreshKey((prev) => prev + 1); // 공연 목록 새로고침
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50">
      <ShowList key={refreshKey} onSelectShow={setSelectedShow} />
      <MyBookings />
      {selectedShow && (
        <BookingForm
          show={selectedShow}
          onClose={() => setSelectedShow(null)}
          onSuccess={handleBookingSuccess}
        />
      )}
    </div>
  );
}

export default App;
```

완성! 공연 선택 → 티켓 예약 → 내 예약 조회까지 전체 플로우가 작동합니다. 🎉