🎬 영화 관람 인증샷 갤러리 - 티켓 사진으로 만드는 나만의 무비로그

mkdir movie-ticket-photo-gallery && cd movie-ticket-photo-gallery

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

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

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. 마이그레이션 파일 생성 (`database/migrations/xxxx_create_movie_logs_table.php`):
   ```php
   Schema::create('movie_logs', function (Blueprint $table) {
       $table->id();
       $table->string('movie_title');
       $table->date('watched_at');
       $table->text('review')->nullable();
       $table->string('ticket_image'); // 티켓 사진 경로
       $table->integer('likes')->default(0);
       $table->timestamps();
   });
   ```

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

6. `app/Models/MovieLog.php` 모델 생성:
   ```php
   protected $fillable = ['movie_title', 'watched_at', 'review', 'ticket_image', 'likes'];
   ```

7. 이미지 저장을 위한 심볼릭 링크 생성:
   ```bash
   php artisan storage:link
   ```

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

   Route::get('/movie-logs', [MovieLogController::class, 'index']);
   Route::post('/movie-logs', [MovieLogController::class, 'store']);
   Route::get('/movie-logs/{id}', [MovieLogController::class, 'show']);
   Route::post('/movie-logs/{id}/like', [MovieLogController::class, 'like']);
   ```

9. 컨트롤러 생성 (`app/Http/Controllers/MovieLogController.php`):
   ```php
   public function index(Request $request) {
       $query = MovieLog::query();
       
       if ($request->has('search')) {
           $query->where('movie_title', 'like', '%' . $request->search . '%');
       }
       
       $sort = $request->get('sort', 'desc');
       $logs = $query->orderBy('watched_at', $sort)->get();
       
       return response()->json($logs);
   }

   public function store(Request $request) {
       $validated = $request->validate([
           'movie_title' => 'required|string|max:255',
           'watched_at' => 'required|date',
           'review' => 'nullable|string',
           'ticket_image' => 'required|image|max:2048'
       ]);

       $path = $request->file('ticket_image')->store('tickets', 'public');
       $validated['ticket_image'] = $path;

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

   public function show($id) {
       $log = MovieLog::findOrFail($id);
       return response()->json($log);
   }

   public function like($id) {
       $log = MovieLog::findOrFail($id);
       $log->increment('likes');
       return response()->json($log);
   }
   ```

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

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

완료 후 다음 단계로 진행하세요.

## React 19 프론트엔드 설정

1. 프로젝트 루트(`movie-ticket-photo-gallery`)로 돌아가서 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,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';

   function App() {
     const [movieLogs, setMovieLogs] = useState([]);
     const [loading, setLoading] = useState(true);
     const [searchTerm, setSearchTerm] = useState('');
     const [sortOrder, setSortOrder] = useState('desc');

     useEffect(() => {
       fetchMovieLogs();
     }, [searchTerm, sortOrder]);

     const fetchMovieLogs = async () => {
       setLoading(true);
       const params = new URLSearchParams();
       if (searchTerm) params.append('search', searchTerm);
       params.append('sort', sortOrder);

       const response = await fetch(`http://localhost:8000/api/movie-logs?${params}`);
       const data = await response.json();
       setMovieLogs(data);
       setLoading(false);
     };

     return (
       <div className="min-h-screen bg-gray-50">
         <header className="bg-purple-600 text-white py-6 shadow-lg">
           <div className="container mx-auto px-4">
             <h1 className="text-3xl font-bold">🎬 무비로그 갤러리</h1>
             <p className="text-purple-200 mt-1">티켓 사진으로 만드는 나만의 영화 기록</p>
           </div>
         </header>

         <main className="container mx-auto px-4 py-8">
           {/* 검색 & 정렬 UI는 다음 단계에서 추가 */}
           <div className="text-center text-gray-500">
             {loading ? '로딩 중...' : `${movieLogs.length}개의 무비로그`}
           </div>
         </main>
       </div>
     );
   }

   export default App;
   ```

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

브라우저에서 http://localhost:5173 접속 시 헤더가 보이고, Laravel API에서 데이터를 fetch하는 구조가 작동하는지 확인하세요.

## 티켓 업로드 폼 & 갤러리 그리드 UI 구현

`src/App.jsx`를 확장하여 다음 기능을 추가하세요:

1. **업로드 폼 컴포넌트**:
   - 영화 제목 입력 (텍스트)
   - 관람일 선택 (date input)
   - 한줄평 입력 (textarea)
   - 티켓 사진 업로드 (file input, accept="image/*")
   - 제출 버튼

2. **폼 제출 로직**:
   ```jsx
   const handleSubmit = async (e) => {
     e.preventDefault();
     const formData = new FormData();
     formData.append('movie_title', movieTitle);
     formData.append('watched_at', watchedAt);
     formData.append('review', review);
     formData.append('ticket_image', ticketImage);

     await fetch('http://localhost:8000/api/movie-logs', {
       method: 'POST',
       body: formData,
     });

     // 폼 초기화 & 목록 새로고침
     setMovieTitle('');
     setWatchedAt('');
     setReview('');
     setTicketImage(null);
     fetchMovieLogs();
   };
   ```

3. **검색 & 정렬 UI**:
   - 검색창: `<input type="text" placeholder="영화 제목 검색" />`
   - 정렬 버튼: 최신순/오래된순 토글

4. **갤러리 그리드 레이아웃**:
   - Tailwind 그리드: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6`
   - 각 카드:
     ```jsx
     <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition">
       <img 
         src={`http://localhost:8000/storage/${log.ticket_image}`}
         alt={log.movie_title}
         className="w-full h-48 object-cover"
       />
       <div className="p-4">
         <h3 className="font-bold text-lg">{log.movie_title}</h3>
         <p className="text-gray-500 text-sm">{log.watched_at}</p>
         <p className="text-gray-700 mt-2 line-clamp-2">{log.review}</p>
         <div className="flex items-center mt-3 text-red-500">
           <span>❤️ {log.likes}</span>
         </div>
       </div>
     </div>
     ```

5. **반응형 디자인**:
   - 모바일: 1열
   - 태블릿: 2열
   - 데스크톱: 3열

업로드 폼을 페이지 상단에 배치하고, 그 아래에 갤러리 그리드를 표시하세요. 폼 제출 시 새로운 무비로그가 갤러리에 즉시 반영되도록 구현하세요.

## 상세 모달 & 좋아요 기능 구현

1. **모달 상태 관리**:
   ```jsx
   const [selectedLog, setSelectedLog] = useState(null);
   const [showModal, setShowModal] = useState(false);

   const openModal = (log) => {
     setSelectedLog(log);
     setShowModal(true);
   };

   const closeModal = () => {
     setShowModal(false);
     setSelectedLog(null);
   };
   ```

2. **카드 클릭 시 모달 열기**:
   - 각 카드에 `onClick={() => openModal(log)}` 추가

3. **모달 컴포넌트**:
   ```jsx
   {showModal && selectedLog && (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" onClick={closeModal}>
       <div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
         <div className="relative">
           <button 
             onClick={closeModal}
             className="absolute top-4 right-4 text-white bg-black bg-opacity-50 rounded-full w-8 h-8 flex items-center justify-center hover:bg-opacity-70"
           >
             ✕
           </button>
           <img 
             src={`http://localhost:8000/storage/${selectedLog.ticket_image}`}
             alt={selectedLog.movie_title}
             className="w-full h-96 object-contain bg-gray-100"
           />
         </div>
         <div className="p-6">
           <h2 className="text-2xl font-bold mb-2">{selectedLog.movie_title}</h2>
           <p className="text-gray-500 mb-4">📅 관람일: {selectedLog.watched_at}</p>
           <div className="bg-gray-50 p-4 rounded-lg mb-4">
             <p className="text-gray-700">{selectedLog.review || '한줄평이 없습니다.'}</p>
           </div>
           <button 
             onClick={() => handleLike(selectedLog.id)}
             className="bg-red-500 text-white px-6 py-2 rounded-lg hover:bg-red-600 transition"
           >
             ❤️ 좋아요 {selectedLog.likes}
           </button>
         </div>
       </div>
     </div>
   )}
   ```

4. **좋아요 기능**:
   ```jsx
   const handleLike = async (id) => {
     await fetch(`http://localhost:8000/api/movie-logs/${id}/like`, {
       method: 'POST',
     });
     
     // 로컬 상태 업데이트
     setMovieLogs(movieLogs.map(log => 
       log.id === id ? { ...log, likes: log.likes + 1 } : log
     ));
     
     if (selectedLog && selectedLog.id === id) {
       setSelectedLog({ ...selectedLog, likes: selectedLog.likes + 1 });
     }
   };
   ```

5. **모달 애니메이션 (선택)**:
   - Tailwind의 `transition-opacity`와 `scale` 활용
   - 모달 열릴 때 페이드인 + 스케일업 효과

6. **ESC 키로 모달 닫기**:
   ```jsx
   useEffect(() => {
     const handleEsc = (e) => {
       if (e.key === 'Escape') closeModal();
     };
     if (showModal) {
       window.addEventListener('keydown', handleEsc);
       return () => window.removeEventListener('keydown', handleEsc);
     }
   }, [showModal]);
   ```

카드 클릭 시 큰 이미지와 상세 정보를 보여주는 모달이 열리고, 좋아요 버튼을 누르면 카운트가 증가하도록 구현하세요.