🎬 영화 시청 기록 타임라인 - 본 영화 히스토리 with 감상 메모

mkdir movie-watch-history-timeline && cd movie-watch-history-timeline

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

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

**목표**: Laravel 13.x 프로젝트를 생성하고 SQLite 데이터베이스를 설정합니다.

### 작업 내용
1. `backend/` 폴더에 Laravel 13.x 프로젝트 생성
   ```bash
   composer create-project laravel/laravel:^13.0 backend
   cd backend
   ```

2. `.env` 파일에서 데이터베이스를 SQLite로 변경
   ```
   DB_CONNECTION=sqlite
   # DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD 주석 처리
   ```

3. `database/database.sqlite` 파일 생성 (빈 파일)
   ```bash
   touch database/database.sqlite
   ```

4. `movies` 테이블 마이그레이션 파일 생성
   ```bash
   php artisan make:migration create_movies_table
   ```

5. 마이그레이션 파일 작성 (`database/migrations/xxxx_create_movies_table.php`)
   ```php
   Schema::create('movies', function (Blueprint $table) {
       $table->id();
       $table->string('title');
       $table->date('watched_at');
       $table->integer('rating'); // 1~5
       $table->text('memo')->nullable();
       $table->timestamps();
   });
   ```

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

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

### 확인 방법
- `database/database.sqlite` 파일이 생성되고 `movies` 테이블이 존재하는지 확인
- `php artisan serve`로 서버 실행 후 `http://localhost:8000` 접속 확인

## Step 2: Laravel API 엔드포인트 구현

**목표**: 영화 기록 CRUD API를 구현합니다.

### 작업 내용
1. Movie 모델 생성
   ```bash
   cd backend
   php artisan make:model Movie
   ```

2. `app/Models/Movie.php` 설정
   ```php
   protected $fillable = ['title', 'watched_at', 'rating', 'memo'];
   protected $casts = ['watched_at' => 'date'];
   ```

3. API 라우트 정의 (`routes/api.php`)
   ```php
   use App\Models\Movie;
   use Illuminate\Http\Request;

   Route::get('/movies', function () {
       return Movie::orderBy('watched_at', 'desc')->get();
   });

   Route::post('/movies', function (Request $request) {
       $validated = $request->validate([
           'title' => 'required|string|max:255',
           'watched_at' => 'required|date',
           'rating' => 'required|integer|min:1|max:5',
           'memo' => 'nullable|string',
       ]);

       $movie = Movie::create($validated);
       return response()->json($movie, 201);
   });
   ```

4. 테스트 데이터 시딩 (선택사항)
   ```bash
   php artisan tinker
   ```
   ```php
   App\Models\Movie::create([
       'title' => '인터스텔라',
       'watched_at' => '2024-01-15',
       'rating' => 5,
       'memo' => '시간과 공간을 넘어선 감동'
   ]);
   ```

### 확인 방법
- `php artisan serve` 실행 후 Postman/curl로 API 테스트
  - GET `http://localhost:8000/api/movies` → 빈 배열 또는 시딩 데이터 반환
  - POST `http://localhost:8000/api/movies` → 새 영화 기록 생성 확인

## Step 3: React 19 프론트엔드 프로젝트 생성 및 API 연동

**목표**: React 19 + Vite 프로젝트를 생성하고 Laravel API와 연동합니다.

### 작업 내용
1. 프로젝트 루트에서 React 프로젝트 생성
   ```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,jsx}'],
     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';

   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 fetch(API_URL);
         const data = await response.json();
         setMovies(data);
       } catch (error) {
         console.error('Error fetching movies:', error);
       } finally {
         setLoading(false);
       }
     };

     return (
       <div className="min-h-screen bg-gray-100 py-8 px-4">
         <div className="max-w-4xl mx-auto">
           <h1 className="text-4xl font-bold text-center mb-8 text-gray-800">
             🎬 영화 시청 기록 타임라인
           </h1>
           {loading ? (
             <p className="text-center text-gray-600">로딩 중...</p>
           ) : (
             <div className="space-y-4">
               {movies.length === 0 ? (
                 <p className="text-center text-gray-500">아직 기록이 없습니다.</p>
               ) : (
                 movies.map((movie) => (
                   <div key={movie.id} className="bg-white p-6 rounded-lg shadow">
                     <h3 className="text-xl font-semibold">{movie.title}</h3>
                     <p className="text-gray-600">{movie.watched_at}</p>
                     <p className="text-yellow-500">{'⭐'.repeat(movie.rating)}</p>
                     {movie.memo && <p className="mt-2 text-gray-700">{movie.memo}</p>}
                   </div>
                 ))
               )}
             </div>
           )}
         </div>
       </div>
     );
   }

   export default App;
   ```

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

### 확인 방법
- `http://localhost:5173` 접속
- Laravel API에서 가져온 영화 목록이 화면에 표시되는지 확인
- 시딩 데이터가 있다면 카드 형태로 렌더링됨

## Step 4: 영화 추가 폼 구현 및 완성

**목표**: 사용자가 새 영화 기록을 추가할 수 있는 폼을 만들고, 전체 기능을 완성합니다.

### 작업 내용
1. `src/App.jsx`에 폼 상태 및 제출 함수 추가
   ```jsx
   const [formData, setFormData] = useState({
     title: '',
     watched_at: '',
     rating: 5,
     memo: ''
   });

   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
       const response = await fetch(API_URL, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(formData)
       });
       if (response.ok) {
         fetchMovies(); // 목록 새로고침
         setFormData({ title: '', watched_at: '', rating: 5, memo: '' }); // 폼 초기화
       }
     } catch (error) {
       console.error('Error adding movie:', error);
     }
   };

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

2. JSX에 폼 UI 추가 (h1 태그 아래)
   ```jsx
   <form onSubmit={handleSubmit} className="bg-white p-6 rounded-lg shadow mb-8">
     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div>
         <label className="block text-sm font-medium mb-1">영화 제목</label>
         <input
           type="text"
           name="title"
           value={formData.title}
           onChange={handleChange}
           required
           className="w-full px-3 py-2 border rounded-lg"
           placeholder="예: 인터스텔라"
         />
       </div>
       <div>
         <label className="block text-sm font-medium mb-1">관람일</label>
         <input
           type="date"
           name="watched_at"
           value={formData.watched_at}
           onChange={handleChange}
           required
           className="w-full px-3 py-2 border rounded-lg"
         />
       </div>
       <div>
         <label className="block text-sm font-medium mb-1">별점</label>
         <select
           name="rating"
           value={formData.rating}
           onChange={handleChange}
           className="w-full px-3 py-2 border rounded-lg"
         >
           {[1, 2, 3, 4, 5].map(num => (
             <option key={num} value={num}>
               {'⭐'.repeat(num)} ({num}점)
             </option>
           ))}
         </select>
       </div>
       <div className="md:col-span-2">
         <label className="block text-sm font-medium mb-1">감상 메모</label>
         <textarea
           name="memo"
           value={formData.memo}
           onChange={handleChange}
           className="w-full px-3 py-2 border rounded-lg"
           rows="3"
           placeholder="이 영화에 대한 생각을 자유롭게 적어보세요..."
         />
       </div>
     </div>
     <button
       type="submit"
       className="mt-4 w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition"
     >
       기록 추가
     </button>
   </form>
   ```

3. 날짜 포맷 개선 (옵션)
   - 영화 카드에서 `watched_at`를 `new Date(movie.watched_at).toLocaleDateString('ko-KR')`로 표시

### 확인 방법
- 폼에서 영화 제목, 관람일, 별점, 메모를 입력 후 "기록 추가" 버튼 클릭
- 페이지가 새로고침되지 않고 타임라인에 새 영화 카드가 즉시 추가되는지 확인
- Laravel 서버와 React 앱이 모두 실행 중인지 확인 (`php artisan serve`, `npm run dev`)

### 최종 체크리스트
- [ ] 영화 추가 폼이 정상 작동
- [ ] 타임라인에 최신순으로 정렬된 영화 목록 표시
- [ ] 별점이 ⭐ 이모지로 시각화
- [ ] 반응형 디자인 (모바일/데스크톱 모두 지원)
- [ ] CORS 오류 없이 API 통신 성공