🎮 인디 게임 스크린샷 갤러리 - 플레이 순간 아카이브

mkdir indie-game-screenshot-gallery && cd indie-game-screenshot-gallery

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

Laravel 13.x 백엔드 API 프로젝트를 생성하고 기본 설정을 완료하세요.

**요구사항:**
1. `backend` 폴더에 Laravel 13.x 프로젝트 생성 (`composer create-project laravel/laravel backend`)
2. `.env` 파일에서 데이터베이스를 SQLite로 설정:
   ```
   DB_CONNECTION=sqlite
   # DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD 주석 처리
   ```
3. `database/database.sqlite` 파일 생성 (빈 파일)
4. CORS 설정:
   - `config/cors.php`에서 `'supports_credentials' => true` 설정
   - `'allowed_origins'`에 `['http://localhost:5173']` 추가 (React Vite 기본 포트)
5. Storage 설정:
   - `php artisan storage:link` 명령으로 public 스토리지 심볼릭 링크 생성
   - `config/filesystems.php`에서 `'default' => 'public'` 확인

**백엔드 폴더 구조 예시:**
```
backend/
├── app/
├── config/
├── database/
│   └── database.sqlite
├── public/
│   └── storage/ (심볼릭 링크)
├── routes/
└── .env
```

**확인 방법:**
- `php artisan serve`로 Laravel 서버 실행 (http://localhost:8000)
- 브라우저에서 접속 시 Laravel 기본 페이지 표시
- `php artisan route:list`로 라우트 목록 확인

Laravel 백엔드에서 스크린샷 관리 API를 구축하세요.

**요구사항:**

### 1. 마이그레이션 생성
`php artisan make:migration create_screenshots_table`로 마이그레이션 파일 생성 후 다음 스키마 정의:
```php
Schema::create('screenshots', function (Blueprint $table) {
    $table->id();
    $table->string('game_title'); // 게임 제목
    $table->string('genre'); // 장르 (Action, RPG, Puzzle 등)
    $table->date('play_date'); // 플레이 날짜
    $table->string('image_path'); // 이미지 파일 경로
    $table->integer('likes')->default(0); // 좋아요 수
    $table->timestamps();
});
```

### 2. 모델 생성
`php artisan make:model Screenshot`로 모델 생성 후 fillable 필드 설정:
```php
protected $fillable = ['game_title', 'genre', 'play_date', 'image_path', 'likes'];
```

### 3. API 컨트롤러 생성
`php artisan make:controller Api/ScreenshotController`로 컨트롤러 생성 후 다음 메서드 구현:

- `index()`: 모든 스크린샷 목록 반환 (JSON)
  - 최신순 정렬 (`orderBy('created_at', 'desc')`)
  - 이미지 URL은 `Storage::url($screenshot->image_path)`로 변환
  
- `store(Request $request)`: 새 스크린샷 업로드
  - 유효성 검사:
    ```php
    $request->validate([
        'game_title' => 'required|string|max:255',
        'genre' => 'required|string',
        'play_date' => 'required|date',
        'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:5120', // 5MB
    ]);
    ```
  - 이미지 파일 저장: `$request->file('image')->store('screenshots', 'public')`
  - 데이터베이스에 저장 후 생성된 스크린샷 반환

- `show($id)`: 특정 스크린샷 상세 정보 반환

- `like($id)`: 좋아요 증가
  - `$screenshot->increment('likes')`로 좋아요 수 증가
  - 업데이트된 스크린샷 반환

### 4. API 라우트 등록
`routes/api.php`에 다음 라우트 추가:
```php
use App\Http\Controllers\Api\ScreenshotController;

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

### 5. 마이그레이션 실행
`php artisan migrate`로 데이터베이스 테이블 생성

**확인 방법:**
- Postman 또는 curl로 API 테스트:
  - `GET http://localhost:8000/api/screenshots` → 빈 배열 반환
  - `POST http://localhost:8000/api/screenshots` (FormData로 이미지 업로드) → 스크린샷 생성
- `php artisan route:list`로 API 라우트 확인

React 19 프론트엔드 프로젝트를 생성하고 기본 레이아웃을 구성하세요.

**요구사항:**

### 1. React 프로젝트 생성
프로젝트 루트에서 다음 명령 실행:
```bash
npm create vite@latest frontend -- --template react
cd frontend
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

### 2. Tailwind CSS 설정
`tailwind.config.js` 파일 수정:
```js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

`src/index.css`에 Tailwind 디렉티브 추가:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### 3. 기본 레이아웃 컴포넌트 생성
`src/App.jsx` 파일을 다음과 같이 작성:

```jsx
import { useState } from 'react'

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
      {/* 헤더 */}
      <header className="bg-black bg-opacity-50 backdrop-blur-md border-b border-purple-500/30">
        <div className="container mx-auto px-4 py-6">
          <h1 className="text-4xl font-bold text-white flex items-center gap-3">
            🎮 <span>Indie Game Gallery</span>
          </h1>
          <p className="text-purple-300 mt-2">Share your epic gaming moments</p>
        </div>
      </header>

      {/* 메인 컨텐츠 */}
      <main className="container mx-auto px-4 py-8">
        {/* 업로드 폼 영역 (다음 단계에서 구현) */}
        <section className="bg-white bg-opacity-10 backdrop-blur-md rounded-2xl p-6 mb-8 border border-purple-500/30">
          <h2 className="text-2xl font-bold text-white mb-4">📸 Upload Screenshot</h2>
          <p className="text-purple-200">Upload form will be added here...</p>
        </section>

        {/* 갤러리 그리드 영역 (다음 단계에서 구현) */}
        <section>
          <h2 className="text-2xl font-bold text-white mb-6">🖼️ Gallery</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <p className="text-purple-200 col-span-full text-center py-12">No screenshots yet. Upload your first one!</p>
          </div>
        </section>
      </main>

      {/* 푸터 */}
      <footer className="bg-black bg-opacity-50 backdrop-blur-md border-t border-purple-500/30 mt-16">
        <div className="container mx-auto px-4 py-6 text-center text-purple-300">
          <p>Built with Laravel 13 + React 19 🚀</p>
        </div>
      </footer>
    </div>
  )
}

export default App
```

### 4. 개발 서버 실행
`npm run dev`로 React 개발 서버 실행 (http://localhost:5173)

**확인 방법:**
- 브라우저에서 http://localhost:5173 접속
- 게임 갤러리 헤더와 기본 레이아웃이 표시됨
- 다크 테마의 게이밍 분위기 디자인 확인

React 프론트엔드에서 스크린샷 업로드 폼과 갤러리 목록을 구현하세요.

**요구사항:**

### 1. `src/App.jsx` 수정

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

const API_BASE_URL = 'http://localhost:8000/api'

function App() {
  const [screenshots, setScreenshots] = useState([])
  const [loading, setLoading] = useState(true)
  const [formData, setFormData] = useState({
    game_title: '',
    genre: '',
    play_date: '',
    image: null
  })
  const [uploading, setUploading] = useState(false)

  // 스크린샷 목록 불러오기
  useEffect(() => {
    fetchScreenshots()
  }, [])

  const fetchScreenshots = async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/screenshots`)
      const data = await response.json()
      setScreenshots(data)
    } catch (error) {
      console.error('Failed to fetch screenshots:', error)
    } finally {
      setLoading(false)
    }
  }

  // 폼 입력 처리
  const handleInputChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
  }

  const handleFileChange = (e) => {
    setFormData(prev => ({ ...prev, image: e.target.files[0] }))
  }

  // 업로드 처리
  const handleSubmit = async (e) => {
    e.preventDefault()
    setUploading(true)

    const formDataToSend = new FormData()
    formDataToSend.append('game_title', formData.game_title)
    formDataToSend.append('genre', formData.genre)
    formDataToSend.append('play_date', formData.play_date)
    formDataToSend.append('image', formData.image)

    try {
      const response = await fetch(`${API_BASE_URL}/screenshots`, {
        method: 'POST',
        body: formDataToSend
      })

      if (response.ok) {
        // 폼 초기화
        setFormData({ game_title: '', genre: '', play_date: '', image: null })
        document.getElementById('image-upload').value = ''
        // 목록 새로고침
        fetchScreenshots()
        alert('Screenshot uploaded successfully! 🎉')
      }
    } catch (error) {
      console.error('Upload failed:', error)
      alert('Upload failed. Please try again.')
    } finally {
      setUploading(false)
    }
  }

  // 좋아요 처리
  const handleLike = async (id) => {
    try {
      const response = await fetch(`${API_BASE_URL}/screenshots/${id}/like`, {
        method: 'POST'
      })
      if (response.ok) {
        fetchScreenshots() // 목록 새로고침
      }
    } catch (error) {
      console.error('Like failed:', error)
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
      <header className="bg-black bg-opacity-50 backdrop-blur-md border-b border-purple-500/30">
        <div className="container mx-auto px-4 py-6">
          <h1 className="text-4xl font-bold text-white flex items-center gap-3">
            🎮 <span>Indie Game Gallery</span>
          </h1>
          <p className="text-purple-300 mt-2">Share your epic gaming moments</p>
        </div>
      </header>

      <main className="container mx-auto px-4 py-8">
        {/* 업로드 폼 */}
        <section className="bg-white bg-opacity-10 backdrop-blur-md rounded-2xl p-6 mb-8 border border-purple-500/30">
          <h2 className="text-2xl font-bold text-white mb-4">📸 Upload Screenshot</h2>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-purple-200 mb-2">Game Title</label>
              <input
                type="text"
                name="game_title"
                value={formData.game_title}
                onChange={handleInputChange}
                required
                className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-20 border border-purple-400 text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-500"
                placeholder="e.g., Hollow Knight"
              />
            </div>
            <div>
              <label className="block text-purple-200 mb-2">Genre</label>
              <select
                name="genre"
                value={formData.genre}
                onChange={handleInputChange}
                required
                className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-20 border border-purple-400 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"
              >
                <option value="">Select Genre</option>
                <option value="Action">Action</option>
                <option value="RPG">RPG</option>
                <option value="Puzzle">Puzzle</option>
                <option value="Adventure">Adventure</option>
                <option value="Platformer">Platformer</option>
                <option value="Strategy">Strategy</option>
              </select>
            </div>
            <div>
              <label className="block text-purple-200 mb-2">Play Date</label>
              <input
                type="date"
                name="play_date"
                value={formData.play_date}
                onChange={handleInputChange}
                required
                className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-20 border border-purple-400 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"
              />
            </div>
            <div>
              <label className="block text-purple-200 mb-2">Screenshot Image</label>
              <input
                id="image-upload"
                type="file"
                accept="image/*"
                onChange={handleFileChange}
                required
                className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-20 border border-purple-400 text-white file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-purple-600 file:text-white hover:file:bg-purple-700"
              />
            </div>
            <button
              type="submit"
              disabled={uploading}
              className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {uploading ? '⏳ Uploading...' : '🚀 Upload Screenshot'}
            </button>
          </form>
        </section>

        {/* 갤러리 그리드 */}
        <section>
          <h2 className="text-2xl font-bold text-white mb-6">🖼️ Gallery</h2>
          {loading ? (
            <p className="text-purple-200 text-center py-12">Loading...</p>
          ) : screenshots.length === 0 ? (
            <p className="text-purple-200 text-center py-12">No screenshots yet. Upload your first one!</p>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {screenshots.map(screenshot => (
                <div key={screenshot.id} className="bg-white bg-opacity-10 backdrop-blur-md rounded-xl overflow-hidden border border-purple-500/30 hover:border-purple-400 transition">
                  <img
                    src={`http://localhost:8000${screenshot.image_url}`}
                    alt={screenshot.game_title}
                    className="w-full h-64 object-cover"
                  />
                  <div className="p-4">
                    <h3 className="text-xl font-bold text-white mb-2">{screenshot.game_title}</h3>
                    <div className="flex items-center gap-2 text-sm text-purple-300 mb-3">
                      <span className="bg-purple-600 px-2 py-1 rounded">{screenshot.genre}</span>
                      <span>📅 {screenshot.play_date}</span>
                    </div>
                    <button
                      onClick={() => handleLike(screenshot.id)}
                      className="flex items-center gap-2 text-pink-400 hover:text-pink-300 transition"
                    >
                      ❤️ <span>{screenshot.likes}</span>
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </section>
      </main>

      <footer className="bg-black bg-opacity-50 backdrop-blur-md border-t border-purple-500/30 mt-16">
        <div className="container mx-auto px-4 py-6 text-center text-purple-300">
          <p>Built with Laravel 13 + React 19 🚀</p>
        </div>
      </footer>
    </div>
  )
}

export default App
```

**확인 방법:**
1. Laravel 백엔드 서버 실행 (`php artisan serve`)
2. React 프론트엔드 서버 실행 (`npm run dev`)
3. 브라우저에서 http://localhost:5173 접속
4. 업로드 폼에서 게임 정보와 스크린샷 이미지 입력 후 업로드
5. 갤러리 그리드에 스크린샷 카드가 표시되는지 확인
6. 좋아요 버튼 클릭 시 카운트가 증가하는지 확인