🎨 크리에이터 작품 판매 샵 - 디지털 아트 마켓플레이스

mkdir digital-art-marketplace-laravel && cd digital-art-marketplace-laravel

이 폴더에서 디지털 아트 마켓플레이스 프로젝트를 시작합니다.

**Laravel 13.x API 백엔드 설정:**

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

2. .env 파일 수정:
```
DB_CONNECTION=sqlite
# DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD 주석 처리
```

3. SQLite 데이터베이스 파일 생성:
```bash
touch database/database.sqlite
```

4. CORS 설정 (config/cors.php):
```php
'paths' => ['api/*'],
'allowed_origins' => ['http://localhost:5173'],
'allowed_methods' => ['*'],
'allowed_headers' => ['*'],
```

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

6. 마이그레이션 파일 작성 (database/migrations/xxxx_create_artworks_table.php):
```php
public function up()
{
    Schema::create('artworks', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('description');
        $table->string('category'); // illustration, photo, 3d-art, digital-painting
        $table->decimal('price', 10, 2);
        $table->string('image_url');
        $table->string('creator_name');
        $table->string('creator_avatar')->nullable();
        $table->integer('likes')->default(0);
        $table->timestamps();
    });
}
```

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

8. Seeder 생성 및 샘플 데이터 추가:
```bash
php artisan make:seeder ArtworkSeeder
```

database/seeders/ArtworkSeeder.php:
```php
public function run()
{
    $artworks = [
        [
            'title' => 'Sunset Dreams',
            'description' => '따뜻한 색감의 일러스트레이션',
            'category' => 'illustration',
            'price' => 29.99,
            'image_url' => 'https://picsum.photos/seed/art1/800/600',
            'creator_name' => 'Luna Park',
            'creator_avatar' => 'https://i.pravatar.cc/150?img=1',
            'likes' => 124,
        ],
        [
            'title' => 'Urban Geometry',
            'description' => '도시의 기하학적 패턴',
            'category' => 'photo',
            'price' => 49.99,
            'image_url' => 'https://picsum.photos/seed/art2/800/600',
            'creator_name' => 'Alex Kim',
            'creator_avatar' => 'https://i.pravatar.cc/150?img=2',
            'likes' => 89,
        ],
        [
            'title' => 'Future City',
            'description' => '미래 도시 3D 렌더링',
            'category' => '3d-art',
            'price' => 79.99,
            'image_url' => 'https://picsum.photos/seed/art3/800/600',
            'creator_name' => 'Chris Lee',
            'creator_avatar' => 'https://i.pravatar.cc/150?img=3',
            'likes' => 203,
        ],
        [
            'title' => 'Ocean Waves',
            'description' => '파도의 역동성을 담은 디지털 페인팅',
            'category' => 'digital-painting',
            'price' => 39.99,
            'image_url' => 'https://picsum.photos/seed/art4/800/600',
            'creator_name' => 'Emma Stone',
            'creator_avatar' => 'https://i.pravatar.cc/150?img=4',
            'likes' => 156,
        ],
        [
            'title' => 'Neon Nights',
            'description' => '네온 사인이 빛나는 밤거리',
            'category' => 'illustration',
            'price' => 34.99,
            'image_url' => 'https://picsum.photos/seed/art5/800/600',
            'creator_name' => 'Luna Park',
            'creator_avatar' => 'https://i.pravatar.cc/150?img=1',
            'likes' => 178,
        ],
        [
            'title' => 'Mountain Peak',
            'description' => '장엄한 산의 정상',
            'category' => 'photo',
            'price' => 44.99,
            'image_url' => 'https://picsum.photos/seed/art6/800/600',
            'creator_name' => 'Alex Kim',
            'creator_avatar' => 'https://i.pravatar.cc/150?img=2',
            'likes' => 92,
        ],
    ];

    foreach ($artworks as $artwork) {
        \App\Models\Artwork::create($artwork);
    }
}
```

9. Seeder 실행:
```bash
php artisan db:seed --class=ArtworkSeeder
```

10. API 컨트롤러 생성:
```bash
php artisan make:controller Api/ArtworkController
```

app/Http/Controllers/Api/ArtworkController.php:
```php
namespace App\Http\Controllers\Api;

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

class ArtworkController extends Controller
{
    public function index()
    {
        $artworks = Artwork::orderBy('created_at', 'desc')->get();
        return response()->json($artworks);
    }

    public function show($id)
    {
        $artwork = Artwork::findOrFail($id);
        return response()->json($artwork);
    }
}
```

11. API 라우트 설정 (routes/api.php):
```php
use App\Http\Controllers\Api\ArtworkController;

Route::get('/artworks', [ArtworkController::class, 'index']);
Route::get('/artworks/{id}', [ArtworkController::class, 'show']);
```

12. Laravel 서버 실행:
```bash
php artisan serve
```

브라우저에서 http://localhost:8000/api/artworks 접속하여 JSON 데이터 확인.

**React 19 프론트엔드 설정:**

1. 프로젝트 루트로 돌아가서 React + Vite 프로젝트 생성:
```bash
cd ..
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
```

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. React Router DOM 설치:
```bash
npm install react-router-dom
```

6. src/App.jsx를 라우터로 구성:
```jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import HomePage from './pages/HomePage'
import ArtworkDetailPage from './pages/ArtworkDetailPage'
import CartPage from './pages/CartPage'
import CheckoutPage from './pages/CheckoutPage'
import ThankYouPage from './pages/ThankYouPage'
import Header from './components/Header'
import { CartProvider } from './context/CartContext'

function App() {
  return (
    <CartProvider>
      <BrowserRouter>
        <div className="min-h-screen bg-gray-50">
          <Header />
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/artwork/:id" element={<ArtworkDetailPage />} />
            <Route path="/cart" element={<CartPage />} />
            <Route path="/checkout" element={<CheckoutPage />} />
            <Route path="/thank-you" element={<ThankYouPage />} />
          </Routes>
        </div>
      </BrowserRouter>
    </CartProvider>
  )
}

export default App
```

7. 장바구니 Context 생성 (src/context/CartContext.jsx):
```jsx
import { createContext, useState, useContext } from 'react'

const CartContext = createContext()

export function CartProvider({ children }) {
  const [cartItems, setCartItems] = useState([])

  const addToCart = (artwork) => {
    setCartItems(prev => {
      const existing = prev.find(item => item.id === artwork.id)
      if (existing) {
        return prev.map(item => 
          item.id === artwork.id 
            ? { ...item, quantity: item.quantity + 1 }
            : item
        )
      }
      return [...prev, { ...artwork, quantity: 1 }]
    })
  }

  const removeFromCart = (id) => {
    setCartItems(prev => prev.filter(item => item.id !== id))
  }

  const updateQuantity = (id, quantity) => {
    if (quantity === 0) {
      removeFromCart(id)
    } else {
      setCartItems(prev => 
        prev.map(item => 
          item.id === id ? { ...item, quantity } : item
        )
      )
    }
  }

  const getTotalPrice = () => {
    return cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0)
  }

  const getTotalItems = () => {
    return cartItems.reduce((sum, item) => sum + item.quantity, 0)
  }

  const clearCart = () => {
    setCartItems([])
  }

  return (
    <CartContext.Provider value={{
      cartItems,
      addToCart,
      removeFromCart,
      updateQuantity,
      getTotalPrice,
      getTotalItems,
      clearCart
    }}>
      {children}
    </CartContext.Provider>
  )
}

export function useCart() {
  return useContext(CartContext)
}
```

8. Header 컴포넌트 생성 (src/components/Header.jsx):
```jsx
import { Link } from 'react-router-dom'
import { useCart } from '../context/CartContext'

function Header() {
  const { getTotalItems } = useCart()
  const totalItems = getTotalItems()

  return (
    <header className="bg-white shadow-sm sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
        <Link to="/" className="text-2xl font-bold text-indigo-600">
          🎨 ArtMarket
        </Link>
        <Link to="/cart" className="relative">
          <svg className="w-8 h-8 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
          {totalItems > 0 && (
            <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
              {totalItems}
            </span>
          )}
        </Link>
      </div>
    </header>
  )
}

export default Header
```

9. 페이지 폴더 생성 및 기본 컴포넌트 파일 생성:
```bash
mkdir -p src/pages src/components src/context
touch src/pages/HomePage.jsx src/pages/ArtworkDetailPage.jsx src/pages/CartPage.jsx src/pages/CheckoutPage.jsx src/pages/ThankYouPage.jsx
```

10. 개발 서버 실행:
```bash
npm run dev
```

http://localhost:5173 접속하여 Header가 표시되는지 확인.

**홈페이지 작품 갤러리 구현:**

src/pages/HomePage.jsx:
```jsx
import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'

function HomePage() {
  const [artworks, setArtworks] = useState([])
  const [loading, setLoading] = useState(true)
  const [selectedCategory, setSelectedCategory] = useState('all')

  useEffect(() => {
    fetch('http://localhost:8000/api/artworks')
      .then(res => res.json())
      .then(data => {
        setArtworks(data)
        setLoading(false)
      })
      .catch(err => {
        console.error('Error fetching artworks:', err)
        setLoading(false)
      })
  }, [])

  const categories = [
    { value: 'all', label: '전체' },
    { value: 'illustration', label: '일러스트' },
    { value: 'photo', label: '사진' },
    { value: '3d-art', label: '3D 아트' },
    { value: 'digital-painting', label: '디지털 페인팅' },
  ]

  const filteredArtworks = selectedCategory === 'all'
    ? artworks
    : artworks.filter(art => art.category === selectedCategory)

  if (loading) {
    return (
      <div className="flex justify-center items-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
      </div>
    )
  }

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      <div className="text-center mb-12">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">디지털 아트 마켓플레이스</h1>
        <p className="text-gray-600 text-lg">크리에이터의 멋진 작품을 만나보세요</p>
      </div>

      {/* 카테고리 필터 */}
      <div className="flex justify-center gap-4 mb-8 flex-wrap">
        {categories.map(cat => (
          <button
            key={cat.value}
            onClick={() => setSelectedCategory(cat.value)}
            className={`px-6 py-2 rounded-full font-medium transition-all ${
              selectedCategory === cat.value
                ? 'bg-indigo-600 text-white shadow-lg'
                : 'bg-white text-gray-700 hover:bg-gray-100'
            }`}
          >
            {cat.label}
          </button>
        ))}
      </div>

      {/* 작품 그리드 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {filteredArtworks.map(artwork => (
          <Link
            key={artwork.id}
            to={`/artwork/${artwork.id}`}
            className="group bg-white rounded-xl shadow-md overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
          >
            <div className="aspect-[4/3] overflow-hidden">
              <img
                src={artwork.image_url}
                alt={artwork.title}
                className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
              />
            </div>
            <div className="p-6">
              <h3 className="text-xl font-bold text-gray-900 mb-2">{artwork.title}</h3>
              <div className="flex items-center gap-2 mb-3">
                <img
                  src={artwork.creator_avatar}
                  alt={artwork.creator_name}
                  className="w-8 h-8 rounded-full"
                />
                <span className="text-sm text-gray-600">{artwork.creator_name}</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-2xl font-bold text-indigo-600">${artwork.price}</span>
                <div className="flex items-center gap-1 text-gray-500">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
                  </svg>
                  <span className="text-sm">{artwork.likes}</span>
                </div>
              </div>
            </div>
          </Link>
        ))}
      </div>

      {filteredArtworks.length === 0 && (
        <div className="text-center py-12">
          <p className="text-gray-500 text-lg">해당 카테고리에 작품이 없습니다.</p>
        </div>
      )}
    </div>
  )
}

export default HomePage
```

브라우저에서 http://localhost:5173 접속하여 작품 갤러리가 표시되고, 카테고리 필터가 동작하는지 확인하세요. 카드에 마우스를 올리면 확대 효과가 나타나야 합니다.

**작품 상세 페이지 및 장바구니 담기 기능 구현:**

src/pages/ArtworkDetailPage.jsx:
```jsx
import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { useCart } from '../context/CartContext'

function ArtworkDetailPage() {
  const { id } = useParams()
  const navigate = useNavigate()
  const { addToCart } = useCart()
  const [artwork, setArtwork] = useState(null)
  const [loading, setLoading] = useState(true)
  const [addedToCart, setAddedToCart] = useState(false)

  useEffect(() => {
    fetch(`http://localhost:8000/api/artworks/${id}`)
      .then(res => res.json())
      .then(data => {
        setArtwork(data)
        setLoading(false)
      })
      .catch(err => {
        console.error('Error fetching artwork:', err)
        setLoading(false)
      })
  }, [id])

  const handleAddToCart = () => {
    addToCart(artwork)
    setAddedToCart(true)
    setTimeout(() => setAddedToCart(false), 2000)
  }

  if (loading) {
    return (
      <div className="flex justify-center items-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
      </div>
    )
  }

  if (!artwork) {
    return (
      <div className="max-w-7xl mx-auto px-4 py-12 text-center">
        <p className="text-gray-500 text-lg">작품을 찾을 수 없습니다.</p>
      </div>
    )
  }

  const categoryLabels = {
    'illustration': '일러스트',
    'photo': '사진',
    '3d-art': '3D 아트',
    'digital-painting': '디지털 페인팅'
  }

  return (
    <div className="max-w-7xl mx-auto px-4 py-12">
      <button
        onClick={() => navigate(-1)}
        className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-8"
      >
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
        </svg>
        뒤로 가기
      </button>

      <div className="grid md:grid-cols-2 gap-12">
        {/* 이미지 */}
        <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
          <img
            src={artwork.image_url}
            alt={artwork.title}
            className="w-full h-full object-cover"
          />
        </div>

        {/* 정보 */}
        <div>
          <span className="inline-block px-4 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm font-medium mb-4">
            {categoryLabels[artwork.category]}
          </span>
          <h1 className="text-4xl font-bold text-gray-900 mb-4">{artwork.title}</h1>
          
          <div className="flex items-center gap-3 mb-6">
            <img
              src={artwork.creator_avatar}
              alt={artwork.creator_name}
              className="w-12 h-12 rounded-full"
            />
            <div>
              <p className="font-medium text-gray-900">{artwork.creator_name}</p>
              <p className="text-sm text-gray-500">크리에이터</p>
            </div>
          </div>

          <div className="flex items-center gap-3 mb-6">
            <svg className="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 20 20">
              <path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
            </svg>
            <span className="text-gray-600">{artwork.likes}명이 좋아합니다</span>
          </div>

          <p className="text-gray-700 text-lg leading-relaxed mb-8">{artwork.description}</p>

          <div className="border-t border-gray-200 pt-8">
            <div className="flex items-end justify-between mb-6">
              <div>
                <p className="text-gray-500 text-sm mb-1">가격</p>
                <p className="text-4xl font-bold text-indigo-600">${artwork.price}</p>
              </div>
            </div>

            <button
              onClick={handleAddToCart}
              disabled={addedToCart}
              className={`w-full py-4 rounded-xl font-bold text-lg transition-all ${
                addedToCart
                  ? 'bg-green-500 text-white'
                  : 'bg-indigo-600 text-white hover:bg-indigo-700 active:scale-95'
              }`}
            >
              {addedToCart ? (
                <span className="flex items-center justify-center gap-2">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                  장바구니에 추가됨!
                </span>
              ) : (
                '장바구니에 담기'
              )}
            </button>

            <button
              onClick={() => navigate('/cart')}
              className="w-full mt-3 py-4 border-2 border-indigo-600 text-indigo-600 rounded-xl font-bold text-lg hover:bg-indigo-50 transition-all"
            >
              장바구니 보기
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ArtworkDetailPage
```

작품 카드를 클릭하여 상세 페이지로 이동하고, '장바구니에 담기' 버튼을 클릭하면 장바구니에 추가되고 버튼이 초록색으로 변하며 체크 아이콘이 표시되는지 확인하세요.

**장바구니 페이지 및 결제 흐름 완성:**

1. src/pages/CartPage.jsx:
```jsx
import { useNavigate } from 'react-router-dom'
import { useCart } from '../context/CartContext'

function CartPage() {
  const navigate = useNavigate()
  const { cartItems, removeFromCart, updateQuantity, getTotalPrice } = useCart()

  if (cartItems.length === 0) {
    return (
      <div className="max-w-7xl mx-auto px-4 py-12 text-center">
        <svg className="w-24 h-24 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        <h2 className="text-2xl font-bold text-gray-900 mb-4">장바구니가 비어있습니다</h2>
        <p className="text-gray-600 mb-6">멋진 작품을 둘러보고 마음에 드는 작품을 담아보세요!</p>
        <button
          onClick={() => navigate('/')}
          className="bg-indigo-600 text-white px-8 py-3 rounded-xl font-medium hover:bg-indigo-700 transition-all"
        >
          작품 둘러보기
        </button>
      </div>
    )
  }

  return (
    <div className="max-w-7xl mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold text-gray-900 mb-8">장바구니</h1>

      <div className="grid lg:grid-cols-3 gap-8">
        {/* 장바구니 아이템 */}
        <div className="lg:col-span-2 space-y-4">
          {cartItems.map(item => (
            <div key={item.id} className="bg-white rounded-xl shadow-md p-6 flex gap-6">
              <img
                src={item.image_url}
                alt={item.title}
                className="w-32 h-32 object-cover rounded-lg"
              />
              <div className="flex-1">
                <h3 className="text-xl font-bold text-gray-900 mb-2">{item.title}</h3>
                <p className="text-gray-600 mb-2">{item.creator_name}</p>
                <p className="text-2xl font-bold text-indigo-600">${item.price}</p>
              </div>
              <div className="flex flex-col justify-between items-end">
                <button
                  onClick={() => removeFromCart(item.id)}
                  className="text-red-500 hover:text-red-700"
                >
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                </button>
                <div className="flex items-center gap-3">
                  <button
                    onClick={() => updateQuantity(item.id, item.quantity - 1)}
                    className="w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center"
                  >
                    -
                  </button>
                  <span className="font-bold text-lg">{item.quantity}</span>
                  <button
                    onClick={() => updateQuantity(item.id, item.quantity + 1)}
                    className="w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center"
                  >
                    +
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* 주문 요약 */}
        <div className="lg:col-span-1">
          <div className="bg-white rounded-xl shadow-md p-6 sticky top-24">
            <h2 className="text-xl font-bold text-gray-900 mb-4">주문 요약</h2>
            <div className="space-y-3 mb-6">
              <div className="flex justify-between text-gray-600">
                <span>소계</span>
                <span>${getTotalPrice().toFixed(2)}</span>
              </div>
              <div className="flex justify-between text-gray-600">
                <span>배송비</span>
                <span className="text-green-600">무료</span>
              </div>
              <div className="border-t pt-3 flex justify-between text-xl font-bold">
                <span>총 금액</span>
                <span className="text-indigo-600">${getTotalPrice().toFixed(2)}</span>
              </div>
            </div>
            <button
              onClick={() => navigate('/checkout')}
              className="w-full bg-indigo-600 text-white py-4 rounded-xl font-bold text-lg hover:bg-indigo-700 active:scale-95 transition-all"
            >
              결제하기
            </button>
            <button
              onClick={() => navigate('/')}
              className="w-full mt-3 text-indigo-600 py-3 rounded-xl font-medium hover:bg-indigo-50 transition-all"
            >
              쇼핑 계속하기
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default CartPage
```

2. src/pages/CheckoutPage.jsx:
```jsx
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useCart } from '../context/CartContext'

function CheckoutPage() {
  const navigate = useNavigate()
  const { cartItems, getTotalPrice, clearCart } = useCart()
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    address: '',
    paymentMethod: 'credit-card'
  })
  const [loading, setLoading] = useState(false)

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    })
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    setLoading(true)
    
    // 결제 처리 시뮬레이션 (2초 후 완료)
    setTimeout(() => {
      const orderNumber = 'ORD-' + Date.now()
      clearCart()
      navigate('/thank-you', { state: { orderNumber, ...formData } })
    }, 2000)
  }

  if (cartItems.length === 0) {
    return (
      <div className="max-w-7xl mx-auto px-4 py-12 text-center">
        <p className="text-gray-600 mb-4">장바구니가 비어있습니다.</p>
        <button
          onClick={() => navigate('/')}
          className="bg-indigo-600 text-white px-8 py-3 rounded-xl font-medium hover:bg-indigo-700"
        >
          작품 둘러보기
        </button>
      </div>
    )
  }

  return (
    <div className="max-w-4xl mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold text-gray-900 mb-8">결제하기</h1>

      <div className="grid md:grid-cols-3 gap-8">
        <form onSubmit={handleSubmit} className="md:col-span-2 space-y-6">
          {/* 구매자 정보 */}
          <div className="bg-white rounded-xl shadow-md p-6">
            <h2 className="text-xl font-bold text-gray-900 mb-4">구매자 정보</h2>
            <div className="space-y-4">
              <div>
                <label className="block text-gray-700 font-medium mb-2">이름</label>
                <input
                  type="text"
                  name="name"
                  value={formData.name}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                />
              </div>
              <div>
                <label className="block text-gray-700 font-medium mb-2">이메일</label>
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                />
              </div>
              <div>
                <label className="block text-gray-700 font-medium mb-2">전화번호</label>
                <input
                  type="tel"
                  name="phone"
                  value={formData.phone}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                />
              </div>
              <div>
                <label className="block text-gray-700 font-medium mb-2">주소</label>
                <textarea
                  name="address"
                  value={formData.address}
                  onChange={handleChange}
                  required
                  rows={3}
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                />
              </div>
            </div>
          </div>

          {/* 결제 방법 */}
          <div className="bg-white rounded-xl shadow-md p-6">
            <h2 className="text-xl font-bold text-gray-900 mb-4">결제 방법</h2>
            <div className="space-y-3">
              {[
                { value: 'credit-card', label: '신용카드' },
                { value: 'paypal', label: 'PayPal' },
                { value: 'bank-transfer', label: '계좌이체' }
              ].map(method => (
                <label key={method.value} className="flex items-center gap-3 cursor-pointer">
                  <input
                    type="radio"
                    name="paymentMethod"
                    value={method.value}
                    checked={formData.paymentMethod === method.value}
                    onChange={handleChange}
                    className="w-5 h-5 text-indigo-600"
                  />
                  <span className="text-gray-700">{method.label}</span>
                </label>
              ))}
            </div>
          </div>

          <button
            type="submit"
            disabled={loading}
            className="w-full bg-indigo-600 text-white py-4 rounded-xl font-bold text-lg hover:bg-indigo-700 active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {loading ? (
              <span className="flex items-center justify-center gap-2">
                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
                결제 처리 중...
              </span>
            ) : (
              `$${getTotalPrice().toFixed(2)} 결제하기`
            )}
          </button>
        </form>

        {/* 주문 요약 */}
        <div className="md:col-span-1">
          <div className="bg-white rounded-xl shadow-md p-6 sticky top-24">
            <h2 className="text-lg font-bold text-gray-900 mb-4">주문 요약</h2>
            <div className="space-y-3 mb-4">
              {cartItems.map(item => (
                <div key={item.id} className="flex justify-between text-sm">
                  <span className="text-gray-600">{item.title} x{item.quantity}</span>
                  <span className="font-medium">${(item.price * item.quantity).toFixed(2)}</span>
                </div>
              ))}
            </div>
            <div className="border-t pt-3 flex justify-between text-lg font-bold">
              <span>총 금액</span>
              <span className="text-indigo-600">${getTotalPrice().toFixed(2)}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default CheckoutPage
```

3. src/pages/ThankYouPage.jsx:
```jsx
import { useLocation, useNavigate } from 'react-router-dom'
import { useEffect } from 'react'

function ThankYouPage() {
  const location = useLocation()
  const navigate = useNavigate()
  const orderData = location.state

  useEffect(() => {
    if (!orderData) {
      navigate('/')
    }
  }, [orderData, navigate])

  if (!orderData) return null

  return (
    <div className="max-w-2xl mx-auto px-4 py-12 text-center">
      <div className="bg-white rounded-2xl shadow-lg p-12">
        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
          <svg className="w-12 h-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        </div>
        
        <h1 className="text-3xl font-bold text-gray-900 mb-4">주문이 완료되었습니다!</h1>
        <p className="text-gray-600 text-lg mb-8">구매해주셔서 감사합니다. 작품을 즐겨보세요!</p>
        
        <div className="bg-gray-50 rounded-xl p-6 mb-8">
          <p className="text-sm text-gray-500 mb-2">주문 번호</p>
          <p className="text-2xl font-bold text-indigo-600 mb-6">{orderData.orderNumber}</p>
          
          <div className="text-left space-y-2">
            <div className="flex justify-between">
              <span className="text-gray-600">이름:</span>
              <span className="font-medium">{orderData.name}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">이메일:</span>
              <span className="font-medium">{orderData.email}</span>
            </div>
          </div>
        </div>
        
        <p className="text-gray-600 mb-6">주문 확인 이메일이 {orderData.email}로 발송되었습니다.</p>
        
        <button
          onClick={() => navigate('/')}
          className="bg-indigo-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-indigo-700 active:scale-95 transition-all"
        >
          홈으로 돌아가기
        </button>
      </div>
    </div>
  )
}

export default ThankYouPage
```

장바구니에서 '결제하기' 버튼을 클릭하고, 결제 정보를 입력한 후 결제를 완료하면 주문 완료 페이지가 표시되는지 확인하세요. 장바구니가 비워지고 주문 번호가 생성되어야 합니다.