🎬 영화 감상 큐레이션 - 본 영화 평점 & 추천 리스트

mkdir movie-rating-recommendation-list && cd movie-rating-recommendation-list

이 폴더에서 Laravel 13.x + React 19 풀스택 프로젝트를 시작합니다.

**백엔드 설정:**

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

2. `.env` 파일에서 SQLite 데이터베이스 설정:
   ```
   DB_CONNECTION=sqlite
   # DB_HOST, DB_PORT, DB_DATABASE 주석 처리
   ```

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

4. 영화 모델 및 마이그레이션 생성:
   ```bash
   php artisan make:model Movie -m
   ```

5. `database/migrations/xxxx_create_movies_table.php` 마이그레이션 파일 수정:
   ```php
   Schema::create('movies', function (Blueprint $table) {
       $table->id();
       $table->string('title');
       $table->string('poster_url')->nullable();
       $table->string('genre');
       $table->integer('rating'); // 1~5점
       $table->text('comment')->nullable();
       $table->boolean('is_wishlist')->default(false); // 위시리스트 여부
       $table->timestamps();
   });
   ```

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

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

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

   Route::get('/movies', [MovieController::class, 'index']);
   Route::post('/movies', [MovieController::class, 'store']);
   Route::delete('/movies/{id}', [MovieController::class, 'destroy']);
   ```

9. MovieController 생성 및 구현:
   ```bash
   php artisan make:controller MovieController
   ```

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

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

   class MovieController extends Controller
   {
       public function index()
       {
           return Movie::orderBy('created_at', 'desc')->get();
       }

       public function store(Request $request)
       {
           $validated = $request->validate([
               'title' => 'required|string|max:255',
               'poster_url' => 'nullable|url',
               'genre' => 'required|string',
               'rating' => 'required|integer|min:1|max:5',
               'comment' => 'nullable|string',
               'is_wishlist' => 'boolean',
           ]);

           return Movie::create($validated);
       }

       public function destroy($id)
       {
           Movie::findOrFail($id)->delete();
           return response()->json(['message' => 'Movie deleted']);
       }
   }
   ```

10. `app/Models/Movie.php`에 fillable 추가:
    ```php
    protected $fillable = ['title', 'poster_url', 'genre', 'rating', 'comment', 'is_wishlist'];
    ```

11. Laravel 개발 서버 실행:
    ```bash
    php artisan serve
    ```
    (기본 포트: http://localhost:8000)

백엔드 API가 준비되었습니다. 다음 단계에서 React 프론트엔드를 구성합니다.

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

프로젝트 루트 폴더(movie-rating-recommendation-list)로 돌아와서 React 프론트엔드를 생성합니다.

1. React + Vite 프로젝트 생성:
   ```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. `src/App.jsx` 파일을 아래와 같이 수정하여 기본 레이아웃과 영화 목록을 표시:

   ```jsx
   import { useState, useEffect } from 'react'
   import axios from 'axios'
   import './App.css'

   const API_URL = 'http://localhost:8000/api/movies'

   function App() {
     const [movies, setMovies] = useState([])
     const [loading, setLoading] = useState(true)

     useEffect(() => {
       fetchMovies()
     }, [])

     const fetchMovies = async () => {
       try {
         const response = await axios.get(API_URL)
         setMovies(response.data)
       } catch (error) {
         console.error('Error fetching movies:', error)
       } finally {
         setLoading(false)
       }
     }

     const renderStars = (rating) => {
       return '★'.repeat(rating) + '☆'.repeat(5 - rating)
     }

     if (loading) {
       return <div className="flex justify-center items-center h-screen text-xl">Loading...</div>
     }

     return (
       <div className="min-h-screen bg-gray-100 py-8">
         <div className="max-w-6xl mx-auto px-4">
           <header className="text-center mb-8">
             <h1 className="text-4xl font-bold text-gray-800 mb-2">🎬 영화 감상 큐레이션</h1>
             <p className="text-gray-600">본 영화 평점 & 추천 리스트</p>
           </header>

           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {movies.length === 0 ? (
               <div className="col-span-full text-center text-gray-500 py-12">
                 아직 등록된 영화가 없습니다. 첫 영화를 추가해보세요!
               </div>
             ) : (
               movies.map((movie) => (
                 <div key={movie.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
                   {movie.poster_url && (
                     <img src={movie.poster_url} alt={movie.title} className="w-full h-64 object-cover" />
                   )}
                   <div className="p-4">
                     <h3 className="text-xl font-semibold text-gray-800 mb-2">{movie.title}</h3>
                     <p className="text-sm text-gray-500 mb-2">장르: {movie.genre}</p>
                     <div className="text-yellow-500 text-2xl mb-2">{renderStars(movie.rating)}</div>
                     {movie.comment && (
                       <p className="text-gray-700 text-sm italic">"{movie.comment}"</p>
                     )}
                     {movie.is_wishlist && (
                       <span className="inline-block mt-2 px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded">위시리스트</span>
                     )}
                   </div>
                 </div>
               ))
             )}
           </div>
         </div>
       </div>
     )
   }

   export default App
   ```

6. React 개발 서버 실행:
   ```bash
   npm run dev
   ```
   (기본 포트: http://localhost:5173)

브라우저에서 http://localhost:5173을 열면 영화 목록이 표시됩니다 (현재는 비어 있음).

**영화 추가 폼 구현:**

사용자가 새로운 영화를 추가할 수 있는 폼을 만듭니다.

`src/App.jsx` 파일을 수정하여 영화 추가 폼과 POST 요청 로직을 추가합니다:

```jsx
import { useState, useEffect } from 'react'
import axios from 'axios'
import './App.css'

const API_URL = 'http://localhost:8000/api/movies'

function App() {
  const [movies, setMovies] = useState([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [formData, setFormData] = useState({
    title: '',
    poster_url: '',
    genre: '',
    rating: 3,
    comment: '',
    is_wishlist: false,
  })

  useEffect(() => {
    fetchMovies()
  }, [])

  const fetchMovies = async () => {
    try {
      const response = await axios.get(API_URL)
      setMovies(response.data)
    } catch (error) {
      console.error('Error fetching movies:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      await axios.post(API_URL, formData)
      setFormData({ title: '', poster_url: '', genre: '', rating: 3, comment: '', is_wishlist: false })
      setShowForm(false)
      fetchMovies()
    } catch (error) {
      console.error('Error adding movie:', error)
      alert('영화 추가에 실패했습니다.')
    }
  }

  const handleDelete = async (id) => {
    if (!confirm('이 영화를 삭제하시겠습니까?')) return
    try {
      await axios.delete(`${API_URL}/${id}`)
      fetchMovies()
    } catch (error) {
      console.error('Error deleting movie:', error)
    }
  }

  const renderStars = (rating) => {
    return '★'.repeat(rating) + '☆'.repeat(5 - rating)
  }

  if (loading) {
    return <div className="flex justify-center items-center h-screen text-xl">Loading...</div>
  }

  return (
    <div className="min-h-screen bg-gray-100 py-8">
      <div className="max-w-6xl mx-auto px-4">
        <header className="text-center mb-8">
          <h1 className="text-4xl font-bold text-gray-800 mb-2">🎬 영화 감상 큐레이션</h1>
          <p className="text-gray-600">본 영화 평점 & 추천 리스트</p>
        </header>

        <div className="text-center mb-6">
          <button
            onClick={() => setShowForm(!showForm)}
            className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg shadow transition"
          >
            {showForm ? '취소' : '+ 영화 추가'}
          </button>
        </div>

        {showForm && (
          <div className="bg-white rounded-lg shadow-md p-6 mb-8 max-w-2xl mx-auto">
            <h2 className="text-2xl font-semibold mb-4">새 영화 추가</h2>
            <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.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">포스터 URL</label>
                <input
                  type="url"
                  value={formData.poster_url}
                  onChange={(e) => setFormData({ ...formData, poster_url: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="https://example.com/poster.jpg"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">장르 *</label>
                <select
                  required
                  value={formData.genre}
                  onChange={(e) => setFormData({ ...formData, genre: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">선택하세요</option>
                  <option value="액션">액션</option>
                  <option value="코미디">코미디</option>
                  <option value="드라마">드라마</option>
                  <option value="SF">SF</option>
                  <option value="로맨스">로맨스</option>
                  <option value="스릴러">스릴러</option>
                  <option value="애니메이션">애니메이션</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">평점 *</label>
                <div className="flex items-center space-x-2">
                  <input
                    type="range"
                    min="1"
                    max="5"
                    value={formData.rating}
                    onChange={(e) => setFormData({ ...formData, rating: parseInt(e.target.value) })}
                    className="flex-1"
                  />
                  <span className="text-2xl text-yellow-500">{renderStars(formData.rating)}</span>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">한줄평</label>
                <textarea
                  value={formData.comment}
                  onChange={(e) => setFormData({ ...formData, comment: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  rows="3"
                  placeholder="이 영화에 대한 짧은 감상을 남겨주세요"
                />
              </div>
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="wishlist"
                  checked={formData.is_wishlist}
                  onChange={(e) => setFormData({ ...formData, is_wishlist: e.target.checked })}
                  className="mr-2"
                />
                <label htmlFor="wishlist" className="text-sm text-gray-700">위시리스트에 추가 (아직 안 본 영화)</label>
              </div>
              <button
                type="submit"
                className="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 rounded-lg transition"
              >
                추가하기
              </button>
            </form>
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {movies.length === 0 ? (
            <div className="col-span-full text-center text-gray-500 py-12">
              아직 등록된 영화가 없습니다. 첫 영화를 추가해보세요!
            </div>
          ) : (
            movies.map((movie) => (
              <div key={movie.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
                {movie.poster_url && (
                  <img src={movie.poster_url} alt={movie.title} className="w-full h-64 object-cover" />
                )}
                <div className="p-4">
                  <h3 className="text-xl font-semibold text-gray-800 mb-2">{movie.title}</h3>
                  <p className="text-sm text-gray-500 mb-2">장르: {movie.genre}</p>
                  <div className="text-yellow-500 text-2xl mb-2">{renderStars(movie.rating)}</div>
                  {movie.comment && (
                    <p className="text-gray-700 text-sm italic mb-3">"{movie.comment}"</p>
                  )}
                  {movie.is_wishlist && (
                    <span className="inline-block mb-3 px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded">위시리스트</span>
                  )}
                  <button
                    onClick={() => handleDelete(movie.id)}
                    className="w-full bg-red-500 hover:bg-red-600 text-white text-sm py-1 rounded transition"
                  >
                    삭제
                  </button>
                </div>
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  )
}

export default App
```

이제 "+ 영화 추가" 버튼을 클릭하면 폼이 나타나고, 영화 정보를 입력하여 추가할 수 있습니다.