🎮 게임 캐릭터 커스터마이징 프리뷰 - 실시간 아바타 빌더

mkdir game-avatar-customizer && cd game-avatar-customizer

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

# Laravel 13.x API 백엔드 초기 설정

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

2. SQLite 데이터베이스 설정:
   - `.env` 파일에서 DB 설정 변경:
     ```
     DB_CONNECTION=sqlite
     # DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD 주석 처리
     ```
   - `database/database.sqlite` 파일 생성:
     ```bash
     touch database/database.sqlite
     ```

3. CORS 설정:
   - `config/cors.php`에서 `'allowed_origins'`를 `['http://localhost:5173']`로 설정
   - `bootstrap/app.php`에서 CORS 미들웨어 활성화 확인

4. Characters 테이블 마이그레이션 생성:
   ```bash
   php artisan make:migration create_characters_table
   ```
   - 마이그레이션 파일 내용:
     ```php
     Schema::create('characters', function (Blueprint $table) {
         $table->id();
         $table->string('nickname');
         $table->string('hairstyle');
         $table->string('skin_color');
         $table->string('top');
         $table->string('bottom');
         $table->string('accessory')->nullable();
         $table->integer('likes')->default(0);
         $table->timestamps();
     });
     ```

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

6. Character 모델 생성:
   ```bash
   php artisan make:model Character
   ```
   - `app/Models/Character.php`에서 fillable 속성 추가:
     ```php
     protected $fillable = ['nickname', 'hairstyle', 'skin_color', 'top', 'bottom', 'accessory', 'likes'];
     ```

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

   Route::get('/characters', [CharacterController::class, 'index']);
   Route::post('/characters', [CharacterController::class, 'store']);
   Route::post('/characters/{id}/like', [CharacterController::class, 'like']);
   ```

8. CharacterController 생성:
   ```bash
   php artisan make:controller CharacterController
   ```
   - 기본 CRUD 메서드 구현 (index, store, like)

9. 서버 실행 테스트:
   ```bash
   php artisan serve
   ```
   - `http://localhost:8000/api/characters` 접속하여 빈 배열 `[]` 반환 확인

완료되면 Laravel API 서버가 포트 8000에서 실행되고, SQLite DB와 Character 모델이 준비된 상태입니다.

# Laravel API 엔드포인트 구현

CharacterController에 캐릭터 CRUD 로직을 구현하세요.

`app/Http/Controllers/CharacterController.php` 파일 내용:

```php
namespace App\Http\Controllers;

use App\Models\Character;
use Illuminate\Http\Request;

class CharacterController extends Controller
{
    // 모든 캐릭터 조회 (좋아요 많은 순)
    public function index()
    {
        $characters = Character::orderBy('likes', 'desc')
            ->orderBy('created_at', 'desc')
            ->get();
        return response()->json($characters);
    }

    // 새 캐릭터 저장
    public function store(Request $request)
    {
        $validated = $request->validate([
            'nickname' => 'required|string|max:50',
            'hairstyle' => 'required|string',
            'skin_color' => 'required|string',
            'top' => 'required|string',
            'bottom' => 'required|string',
            'accessory' => 'nullable|string',
        ]);

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

    // 캐릭터 좋아요
    public function like($id)
    {
        $character = Character::findOrFail($id);
        $character->increment('likes');
        return response()->json($character);
    }
}
```

**테스트 방법:**

1. Postman 또는 curl로 캐릭터 생성 테스트:
   ```bash
   curl -X POST http://localhost:8000/api/characters \
     -H "Content-Type: application/json" \
     -d '{
       "nickname": "TestHero",
       "hairstyle": "short",
       "skin_color": "light",
       "top": "tshirt",
       "bottom": "jeans",
       "accessory": "cap"
     }'
   ```

2. 캐릭터 목록 조회:
   ```bash
   curl http://localhost:8000/api/characters
   ```

3. 좋아요 추가:
   ```bash
   curl -X POST http://localhost:8000/api/characters/1/like
   ```

모든 엔드포인트가 정상 작동하는지 확인하세요.

# React 19 프론트엔드 초기 설정

프로젝트 루트(`game-avatar-customizer`)로 돌아와서 React 프론트엔드를 생성하세요.

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

2. 필요한 패키지 설치:
   ```bash
   npm install axios
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   ```

3. Tailwind CSS 설정:
   - `tailwind.config.js` 파일:
     ```js
     export default {
       content: [
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",
       ],
       theme: {
         extend: {},
       },
       plugins: [],
     }
     ```
   - `src/index.css` 파일 맨 위에 추가:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```

4. 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;
   ```

5. 개발 서버 실행 테스트:
   ```bash
   npm run dev
   ```
   - 브라우저에서 `http://localhost:5173` 접속하여 Vite 기본 화면 확인

6. `src/App.jsx`를 간단한 헬로월드로 수정하여 테스트:
   ```jsx
   function App() {
     return (
       <div className="min-h-screen bg-gray-100 p-8">
         <h1 className="text-3xl font-bold text-center">게임 캐릭터 커스터마이징</h1>
       </div>
     )
   }

   export default App
   ```

브라우저에 "게임 캐릭터 커스터마이징" 제목이 표시되면 성공입니다.

# React 캐릭터 커스터마이징 UI 구현

캐릭터 커스터마이징 옵션을 선택하고 실시간으로 프리뷰를 볼 수 있는 UI를 만드세요.

`src/App.jsx` 파일을 다음과 같이 작성:

```jsx
import { useState } from 'react'
import api from './api/axios'

function App() {
  // 캐릭터 커스터마이징 상태
  const [character, setCharacter] = useState({
    nickname: '',
    hairstyle: 'short',
    skin_color: 'light',
    top: 'tshirt',
    bottom: 'jeans',
    accessory: 'none'
  })

  const [savedCharacters, setSavedCharacters] = useState([])
  const [loading, setLoading] = useState(false)

  // 옵션 데이터
  const options = {
    hairstyle: ['short', 'long', 'curly', 'bald', 'ponytail'],
    skin_color: ['light', 'medium', 'tan', 'dark', 'pale'],
    top: ['tshirt', 'hoodie', 'jacket', 'tank'],
    bottom: ['jeans', 'shorts', 'skirt', 'pants'],
    accessory: ['none', 'cap', 'glasses', 'headband', 'earrings']
  }

  // 옵션 변경 핸들러
  const handleChange = (category, value) => {
    setCharacter(prev => ({ ...prev, [category]: value }))
  }

  // 캐릭터 저장
  const handleSave = async () => {
    if (!character.nickname.trim()) {
      alert('닉네임을 입력하세요!')
      return
    }

    setLoading(true)
    try {
      const response = await api.post('/characters', character)
      alert('캐릭터가 저장되었습니다!')
      setCharacter({ ...character, nickname: '' })
      fetchCharacters()
    } catch (error) {
      alert('저장 실패: ' + error.message)
    } finally {
      setLoading(false)
    }
  }

  // 저장된 캐릭터 불러오기
  const fetchCharacters = async () => {
    try {
      const response = await api.get('/characters')
      setSavedCharacters(response.data)
    } catch (error) {
      console.error('캐릭터 로딩 실패:', error)
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-400 to-pink-300 p-8">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-4xl font-bold text-white text-center mb-8">🎮 게임 캐릭터 빌더</h1>
        
        <div className="grid md:grid-cols-2 gap-8">
          {/* 캐릭터 프리뷰 */}
          <div className="bg-white rounded-lg shadow-xl p-6">
            <h2 className="text-2xl font-bold mb-4">캐릭터 프리뷰</h2>
            <div className="bg-gray-100 rounded-lg p-8 min-h-[300px] flex items-center justify-center">
              <div className="text-center">
                <div className="text-6xl mb-4">
                  {character.hairstyle === 'short' && '👦'}
                  {character.hairstyle === 'long' && '👩'}
                  {character.hairstyle === 'curly' && '👨‍🦱'}
                  {character.hairstyle === 'bald' && '👨‍🦲'}
                  {character.hairstyle === 'ponytail' && '👱‍♀️'}
                </div>
                <div className="text-sm text-gray-600 space-y-1">
                  <p>헤어: {character.hairstyle}</p>
                  <p>피부: {character.skin_color}</p>
                  <p>상의: {character.top}</p>
                  <p>하의: {character.bottom}</p>
                  <p>악세서리: {character.accessory}</p>
                </div>
              </div>
            </div>
          </div>

          {/* 커스터마이징 옵션 */}
          <div className="bg-white rounded-lg shadow-xl p-6">
            <h2 className="text-2xl font-bold mb-4">커스터마이징</h2>
            
            <div className="space-y-4">
              {/* 닉네임 입력 */}
              <div>
                <label className="block text-sm font-medium mb-2">닉네임</label>
                <input
                  type="text"
                  value={character.nickname}
                  onChange={(e) => setCharacter(prev => ({ ...prev, nickname: e.target.value }))}
                  className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500"
                  placeholder="멋진 닉네임을 입력하세요"
                />
              </div>

              {/* 각 옵션 선택 */}
              {Object.entries(options).map(([category, values]) => (
                <div key={category}>
                  <label className="block text-sm font-medium mb-2 capitalize">
                    {category.replace('_', ' ')}
                  </label>
                  <div className="flex flex-wrap gap-2">
                    {values.map(value => (
                      <button
                        key={value}
                        onClick={() => handleChange(category, value)}
                        className={`px-4 py-2 rounded-lg border-2 transition ${
                          character[category] === value
                            ? 'bg-purple-500 text-white border-purple-600'
                            : 'bg-white text-gray-700 border-gray-300 hover:border-purple-400'
                        }`}
                      >
                        {value}
                      </button>
                    ))}
                  </div>
                </div>
              ))}

              {/* 저장 버튼 */}
              <button
                onClick={handleSave}
                disabled={loading}
                className="w-full bg-purple-600 text-white py-3 rounded-lg font-bold hover:bg-purple-700 transition disabled:opacity-50"
              >
                {loading ? '저장 중...' : '💾 캐릭터 저장'}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App
```

브라우저에서 옵션 버튼을 클릭하면 캐릭터 정보가 실시간으로 업데이트되는지 확인하세요.

# 저장된 캐릭터 갤러리 및 좋아요 기능 구현

`src/App.jsx` 파일에 캐릭터 갤러리 섹션을 추가하세요.

기존 `App` 컴포넌트에 다음 기능을 추가:

1. 컴포넌트 마운트 시 캐릭터 목록 불러오기:
   ```jsx
   import { useState, useEffect } from 'react'

   // ... 기존 코드 ...

   useEffect(() => {
     fetchCharacters()
   }, [])
   ```

2. 좋아요 핸들러 추가:
   ```jsx
   const handleLike = async (id) => {
     try {
       await api.post(`/characters/${id}/like`)
       fetchCharacters() // 목록 새로고침
     } catch (error) {
       console.error('좋아요 실패:', error)
     }
   }
   ```

3. 갤러리 UI를 `return` 문 마지막에 추가:
   ```jsx
   return (
     <div className="min-h-screen bg-gradient-to-br from-purple-400 to-pink-300 p-8">
       {/* ... 기존 커스터마이징 UI ... */}

       {/* 캐릭터 갤러리 */}
       <div className="max-w-6xl mx-auto mt-12">
         <h2 className="text-3xl font-bold text-white text-center mb-6">👥 캐릭터 갤러리</h2>
         
         {savedCharacters.length === 0 ? (
           <div className="bg-white rounded-lg shadow-xl p-8 text-center text-gray-500">
             아직 저장된 캐릭터가 없습니다. 첫 번째 캐릭터를 만들어보세요! 🎨
           </div>
         ) : (
           <div className="grid md:grid-cols-3 gap-6">
             {savedCharacters.map(char => (
               <div key={char.id} className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition">
                 <div className="text-center mb-4">
                   <div className="text-5xl mb-2">
                     {char.hairstyle === 'short' && '👦'}
                     {char.hairstyle === 'long' && '👩'}
                     {char.hairstyle === 'curly' && '👨‍🦱'}
                     {char.hairstyle === 'bald' && '👨‍🦲'}
                     {char.hairstyle === 'ponytail' && '👱‍♀️'}
                   </div>
                   <h3 className="text-xl font-bold text-gray-800">{char.nickname}</h3>
                 </div>
                 
                 <div className="text-sm text-gray-600 space-y-1 mb-4">
                   <p>🎨 {char.hairstyle} / {char.skin_color}</p>
                   <p>👕 {char.top} + {char.bottom}</p>
                   <p>✨ {char.accessory}</p>
                 </div>

                 <button
                   onClick={() => handleLike(char.id)}
                   className="w-full bg-pink-500 text-white py-2 rounded-lg font-bold hover:bg-pink-600 transition flex items-center justify-center gap-2"
                 >
                   ❤️ 좋아요 {char.likes}
                 </button>
               </div>
             ))}
           </div>
         )}
       </div>
     </div>
   )
   ```

**테스트 시나리오:**

1. 캐릭터를 여러 개 만들어 저장
2. 갤러리에 저장된 캐릭터들이 표시되는지 확인
3. 좋아요 버튼 클릭 시 숫자가 증가하는지 확인
4. 좋아요가 많은 캐릭터가 상단에 정렬되는지 확인

모든 기능이 정상 작동하면 완성입니다! 🎉