🎸 인디 뮤지션 EP 앨범 프리오더 페이지 - 한정판 음반 예약 판매

mkdir indie-album-preorder-page && cd indie-album-preorder-page

이 폴더에서 Laravel 13.x API 백엔드와 React 19 프론트엔드로 구성된 인디 앨범 프리오더 페이지 프로젝트를 시작합니다.

## 1단계: Laravel API 백엔드 설정

### Laravel 프로젝트 생성
```bash
composer create-project laravel/laravel:^13.0 backend
cd backend
```

### 데이터베이스 설정 (SQLite)
`.env` 파일 수정:
```
DB_CONNECTION=sqlite
# DB_HOST, DB_PORT, DB_DATABASE 등 주석 처리
```

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

### 마이그레이션 생성
`preorders` 테이블을 위한 마이그레이션 파일 생성:
```bash
php artisan make:migration create_preorders_table
```

`database/migrations/xxxx_create_preorders_table.php` 내용:
```php
public function up()
{
    Schema::create('preorders', function (Blueprint $table) {
        $table->id();
        $table->string('customer_name');
        $table->string('email');
        $table->enum('package_type', ['standard', 'limited', 'deluxe']);
        $table->integer('quantity')->default(1);
        $table->timestamps();
    });
}
```

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

### 모델 생성
```bash
php artisan make:model Preorder
```

`app/Models/Preorder.php`:
```php
protected $fillable = ['customer_name', 'email', 'package_type', 'quantity'];
```

### CORS 설정
`config/cors.php`에서 `'paths' => ['api/*']` 확인

`'allowed_origins' => ['http://localhost:5173']` 추가 (React 개발 서버)

### API 라우트 작성
`routes/api.php`:
```php
use App\Models\Preorder;
use Illuminate\Http\Request;

Route::get('/preorders/count', function () {
    return response()->json(['count' => Preorder::sum('quantity')]);
});

Route::post('/preorders', function (Request $request) {
    $validated = $request->validate([
        'customer_name' => 'required|string|max:255',
        'email' => 'required|email',
        'package_type' => 'required|in:standard,limited,deluxe',
        'quantity' => 'required|integer|min:1|max:10'
    ]);

    $preorder = Preorder::create($validated);
    return response()->json($preorder, 201);
});

Route::get('/preorders', function () {
    return response()->json(Preorder::latest()->get());
});
```

### Laravel 서버 실행
```bash
php artisan serve
```

API가 `http://localhost:8000`에서 실행됩니다.

이제 백엔드 API 서버가 준비되었습니다. 다음 단계에서 React 프론트엔드를 구축하겠습니다.

## 2단계: React 19 프론트엔드 프로젝트 생성

### 프로젝트 루트로 이동
```bash
cd ..
```

### React + Vite 프로젝트 생성
```bash
npm create vite@latest frontend -- --template react
cd frontend
npm install
```

### Tailwind CSS 설치
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

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

`src/index.css`:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### 기본 App.jsx 구조
`src/App.jsx`:
```jsx
import { useState, useEffect } from 'react';

function App() {
  const [preorderCount, setPreorderCount] = useState(0);

  useEffect(() => {
    fetch('http://localhost:8000/api/preorders/count')
      .then(res => res.json())
      .then(data => setPreorderCount(data.count))
      .catch(err => console.error(err));
  }, []);

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-800 to-blue-900">
      <div className="container mx-auto px-4 py-12">
        <h1 className="text-5xl font-bold text-white text-center mb-4">
          🎸 Midnight Echo - New EP "Neon Dreams"
        </h1>
        <p className="text-xl text-purple-200 text-center mb-8">
          Pre-order Now | Release Date: 2025.03.15
        </p>
        <div className="text-center mb-12">
          <span className="inline-block bg-yellow-400 text-purple-900 font-bold px-6 py-2 rounded-full text-lg">
            🔥 {preorderCount} albums pre-ordered!
          </span>
        </div>
      </div>
    </div>
  );
}

export default App;
```

### 개발 서버 실행
```bash
npm run dev
```

React 앱이 `http://localhost:5173`에서 실행됩니다.

브라우저에서 페이지를 열면 앨범 제목과 현재 예약 수량이 표시됩니다. Laravel API에서 데이터를 성공적으로 가져오는지 확인하세요.

## 3단계: 앨범 소개 & 트랙리스트 섹션 추가

`src/App.jsx`를 확장하여 앨범 커버 이미지, 트랙리스트, 패키지 옵션을 추가합니다.

```jsx
import { useState, useEffect } from 'react';

function App() {
  const [preorderCount, setPreorderCount] = useState(0);

  useEffect(() => {
    fetch('http://localhost:8000/api/preorders/count')
      .then(res => res.json())
      .then(data => setPreorderCount(data.count))
      .catch(err => console.error(err));
  }, []);

  const tracks = [
    { no: 1, title: 'Neon Lights', duration: '3:45' },
    { no: 2, title: 'Midnight Drive', duration: '4:12' },
    { no: 3, title: 'Echo in the Dark', duration: '3:58' },
    { no: 4, title: 'Digital Dreams', duration: '5:20' },
    { no: 5, title: 'Last Call', duration: '4:05' },
  ];

  const packages = [
    {
      type: 'standard',
      name: 'Standard Edition',
      price: 15000,
      items: ['CD', 'Digital Download Code', 'Photocard (Random 1 of 5)']
    },
    {
      type: 'limited',
      name: 'Limited Edition',
      price: 25000,
      items: ['CD', 'Digital Download Code', 'Photocard Set (5 pcs)', 'Poster', 'Sticker Pack'],
      badge: 'POPULAR'
    },
    {
      type: 'deluxe',
      name: 'Deluxe Box Set',
      price: 45000,
      items: ['CD', 'Vinyl LP', 'Digital Download Code', 'Photocard Set', 'Poster', 'Sticker Pack', 'Art Book (40 pages)', 'Signed Postcard']
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-800 to-blue-900">
      <div className="container mx-auto px-4 py-12">
        {/* Header */}
        <h1 className="text-5xl font-bold text-white text-center mb-4">
          🎸 Midnight Echo - New EP "Neon Dreams"
        </h1>
        <p className="text-xl text-purple-200 text-center mb-8">
          Pre-order Now | Release Date: 2025.03.15
        </p>
        <div className="text-center mb-12">
          <span className="inline-block bg-yellow-400 text-purple-900 font-bold px-6 py-2 rounded-full text-lg">
            🔥 {preorderCount} albums pre-ordered!
          </span>
        </div>

        {/* Album Cover & Artist Info */}
        <div className="max-w-4xl mx-auto mb-16">
          <div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 shadow-2xl">
            <div className="grid md:grid-cols-2 gap-8 items-center">
              <div>
                <div className="aspect-square bg-gradient-to-br from-pink-500 to-purple-600 rounded-xl shadow-lg flex items-center justify-center">
                  <span className="text-white text-6xl font-bold">NE</span>
                </div>
              </div>
              <div>
                <h2 className="text-3xl font-bold text-white mb-4">About the Album</h2>
                <p className="text-purple-100 mb-4">
                  "Neon Dreams" is Midnight Echo's sophomore EP, featuring 5 tracks of synth-driven indie rock. Recorded in Seoul, this album captures the energy of late-night city drives and neon-lit streets.
                </p>
                <p className="text-purple-200 text-sm">
                  Producer: Kim Jae-hyun | Label: Echo Records | Genre: Indie Rock, Synth Pop
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Tracklist */}
        <div className="max-w-4xl mx-auto mb-16">
          <h2 className="text-3xl font-bold text-white mb-6 text-center">📀 Tracklist</h2>
          <div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 shadow-2xl">
            <table className="w-full text-white">
              <thead>
                <tr className="border-b border-purple-400/30">
                  <th className="text-left py-3 px-4">No.</th>
                  <th className="text-left py-3 px-4">Title</th>
                  <th className="text-right py-3 px-4">Duration</th>
                </tr>
              </thead>
              <tbody>
                {tracks.map(track => (
                  <tr key={track.no} className="border-b border-purple-400/10 hover:bg-white/5">
                    <td className="py-3 px-4">{track.no}</td>
                    <td className="py-3 px-4 font-medium">{track.title}</td>
                    <td className="py-3 px-4 text-right text-purple-300">{track.duration}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Package Options */}
        <div className="max-w-6xl mx-auto mb-16">
          <h2 className="text-3xl font-bold text-white mb-6 text-center">🎁 Package Options</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {packages.map(pkg => (
              <div key={pkg.type} className="bg-white/10 backdrop-blur-md rounded-2xl p-6 shadow-2xl hover:scale-105 transition relative">
                {pkg.badge && (
                  <span className="absolute top-4 right-4 bg-yellow-400 text-purple-900 text-xs font-bold px-3 py-1 rounded-full">
                    {pkg.badge}
                  </span>
                )}
                <h3 className="text-2xl font-bold text-white mb-2">{pkg.name}</h3>
                <p className="text-3xl font-bold text-yellow-400 mb-4">₩{pkg.price.toLocaleString()}</p>
                <ul className="text-purple-100 space-y-2">
                  {pkg.items.map((item, i) => (
                    <li key={i} className="flex items-start">
                      <span className="mr-2">✓</span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;
```

브라우저를 새로고침하면 앨범 커버(임시 그라데이션), 트랙리스트 테이블, 3가지 패키지 옵션 카드가 표시됩니다.

## 4단계: 프리오더 폼 추가 및 API 연동

사용자가 패키지를 선택하고 정보를 입력한 후 프리오더를 제출할 수 있는 폼을 추가합니다.

`src/App.jsx`에 폼 상태와 제출 로직을 추가:

```jsx
import { useState, useEffect } from 'react';

function App() {
  const [preorderCount, setPreorderCount] = useState(0);
  const [formData, setFormData] = useState({
    customer_name: '',
    email: '',
    package_type: 'limited',
    quantity: 1
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitMessage, setSubmitMessage] = useState('');

  useEffect(() => {
    fetchPreorderCount();
  }, []);

  const fetchPreorderCount = () => {
    fetch('http://localhost:8000/api/preorders/count')
      .then(res => res.json())
      .then(data => setPreorderCount(data.count))
      .catch(err => console.error(err));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitMessage('');

    try {
      const response = await fetch('http://localhost:8000/api/preorders', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData)
      });

      if (response.ok) {
        setSubmitMessage('✅ Pre-order confirmed! Check your email for details.');
        setFormData({
          customer_name: '',
          email: '',
          package_type: 'limited',
          quantity: 1
        });
        fetchPreorderCount(); // 예약 수량 업데이트
      } else {
        const error = await response.json();
        setSubmitMessage('❌ Error: ' + (error.message || 'Please try again.'));
      }
    } catch (err) {
      setSubmitMessage('❌ Network error. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  const tracks = [
    { no: 1, title: 'Neon Lights', duration: '3:45' },
    { no: 2, title: 'Midnight Drive', duration: '4:12' },
    { no: 3, title: 'Echo in the Dark', duration: '3:58' },
    { no: 4, title: 'Digital Dreams', duration: '5:20' },
    { no: 5, title: 'Last Call', duration: '4:05' },
  ];

  const packages = [
    {
      type: 'standard',
      name: 'Standard Edition',
      price: 15000,
      items: ['CD', 'Digital Download Code', 'Photocard (Random 1 of 5)']
    },
    {
      type: 'limited',
      name: 'Limited Edition',
      price: 25000,
      items: ['CD', 'Digital Download Code', 'Photocard Set (5 pcs)', 'Poster', 'Sticker Pack'],
      badge: 'POPULAR'
    },
    {
      type: 'deluxe',
      name: 'Deluxe Box Set',
      price: 45000,
      items: ['CD', 'Vinyl LP', 'Digital Download Code', 'Photocard Set', 'Poster', 'Sticker Pack', 'Art Book (40 pages)', 'Signed Postcard']
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-800 to-blue-900">
      <div className="container mx-auto px-4 py-12">
        {/* Header */}
        <h1 className="text-5xl font-bold text-white text-center mb-4">
          🎸 Midnight Echo - New EP "Neon Dreams"
        </h1>
        <p className="text-xl text-purple-200 text-center mb-8">
          Pre-order Now | Release Date: 2025.03.15
        </p>
        <div className="text-center mb-12">
          <span className="inline-block bg-yellow-400 text-purple-900 font-bold px-6 py-2 rounded-full text-lg">
            🔥 {preorderCount} albums pre-ordered!
          </span>
        </div>

        {/* Album Cover & Artist Info */}
        <div className="max-w-4xl mx-auto mb-16">
          <div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 shadow-2xl">
            <div className="grid md:grid-cols-2 gap-8 items-center">
              <div>
                <div className="aspect-square bg-gradient-to-br from-pink-500 to-purple-600 rounded-xl shadow-lg flex items-center justify-center">
                  <span className="text-white text-6xl font-bold">NE</span>
                </div>
              </div>
              <div>
                <h2 className="text-3xl font-bold text-white mb-4">About the Album</h2>
                <p className="text-purple-100 mb-4">
                  "Neon Dreams" is Midnight Echo's sophomore EP, featuring 5 tracks of synth-driven indie rock. Recorded in Seoul, this album captures the energy of late-night city drives and neon-lit streets.
                </p>
                <p className="text-purple-200 text-sm">
                  Producer: Kim Jae-hyun | Label: Echo Records | Genre: Indie Rock, Synth Pop
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Tracklist */}
        <div className="max-w-4xl mx-auto mb-16">
          <h2 className="text-3xl font-bold text-white mb-6 text-center">📀 Tracklist</h2>
          <div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 shadow-2xl">
            <table className="w-full text-white">
              <thead>
                <tr className="border-b border-purple-400/30">
                  <th className="text-left py-3 px-4">No.</th>
                  <th className="text-left py-3 px-4">Title</th>
                  <th className="text-right py-3 px-4">Duration</th>
                </tr>
              </thead>
              <tbody>
                {tracks.map(track => (
                  <tr key={track.no} className="border-b border-purple-400/10 hover:bg-white/5">
                    <td className="py-3 px-4">{track.no}</td>
                    <td className="py-3 px-4 font-medium">{track.title}</td>
                    <td className="py-3 px-4 text-right text-purple-300">{track.duration}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Package Options */}
        <div className="max-w-6xl mx-auto mb-16">
          <h2 className="text-3xl font-bold text-white mb-6 text-center">🎁 Package Options</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {packages.map(pkg => (
              <div key={pkg.type} className="bg-white/10 backdrop-blur-md rounded-2xl p-6 shadow-2xl hover:scale-105 transition relative">
                {pkg.badge && (
                  <span className="absolute top-4 right-4 bg-yellow-400 text-purple-900 text-xs font-bold px-3 py-1 rounded-full">
                    {pkg.badge}
                  </span>
                )}
                <h3 className="text-2xl font-bold text-white mb-2">{pkg.name}</h3>
                <p className="text-3xl font-bold text-yellow-400 mb-4">₩{pkg.price.toLocaleString()}</p>
                <ul className="text-purple-100 space-y-2">
                  {pkg.items.map((item, i) => (
                    <li key={i} className="flex items-start">
                      <span className="mr-2">✓</span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* Pre-order Form */}
        <div className="max-w-2xl mx-auto mb-16">
          <h2 className="text-3xl font-bold text-white mb-6 text-center">🛒 Pre-order Form</h2>
          <div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 shadow-2xl">
            <form onSubmit={handleSubmit} className="space-y-6">
              <div>
                <label className="block text-white font-medium mb-2">Your Name</label>
                <input
                  type="text"
                  required
                  value={formData.customer_name}
                  onChange={(e) => setFormData({...formData, customer_name: e.target.value})}
                  className="w-full px-4 py-3 rounded-lg bg-white/20 text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"
                  placeholder="Kim Min-soo"
                />
              </div>
              <div>
                <label className="block text-white font-medium mb-2">Email</label>
                <input
                  type="email"
                  required
                  value={formData.email}
                  onChange={(e) => setFormData({...formData, email: e.target.value})}
                  className="w-full px-4 py-3 rounded-lg bg-white/20 text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"
                  placeholder="your@email.com"
                />
              </div>
              <div>
                <label className="block text-white font-medium mb-2">Package</label>
                <select
                  value={formData.package_type}
                  onChange={(e) => setFormData({...formData, package_type: e.target.value})}
                  className="w-full px-4 py-3 rounded-lg bg-white/20 text-white focus:outline-none focus:ring-2 focus:ring-yellow-400"
                >
                  <option value="standard" className="bg-purple-900">Standard Edition - ₩15,000</option>
                  <option value="limited" className="bg-purple-900">Limited Edition - ₩25,000</option>
                  <option value="deluxe" className="bg-purple-900">Deluxe Box Set - ₩45,000</option>
                </select>
              </div>
              <div>
                <label className="block text-white font-medium mb-2">Quantity</label>
                <input
                  type="number"
                  min="1"
                  max="10"
                  required
                  value={formData.quantity}
                  onChange={(e) => setFormData({...formData, quantity: parseInt(e.target.value)})}
                  className="w-full px-4 py-3 rounded-lg bg-white/20 text-white focus:outline-none focus:ring-2 focus:ring-yellow-400"
                />
              </div>
              <button
                type="submit"
                disabled={isSubmitting}
                className="w-full bg-yellow-400 text-purple-900 font-bold py-4 rounded-lg hover:bg-yellow-300 transition disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isSubmitting ? 'Processing...' : '🎉 Confirm Pre-order'}
              </button>
              {submitMessage && (
                <p className={`text-center font-medium ${submitMessage.startsWith('✅') ? 'text-green-300' : 'text-red-300'}`}>
                  {submitMessage}
                </p>
              )}
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;
```

폼을 제출하면 Laravel API로 POST 요청이 전송되고, 성공 시 예약 수량이 자동으로 업데이트됩니다. 브라우저에서 테스트해보세요!