🎬 인디 영화제 상영작 투표 플랫폼 - 관객이 선택하는 최고의 작품

mkdir indie-film-festival-voting && cd indie-film-festival-voting

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

# Laravel 13.x API 백엔드 설정

1. Laravel 13.x 프로젝트를 생성하세요:
   - 프로젝트명: `backend`
   - SQLite 데이터베이스 사용
   - `.env` 파일에서 `DB_CONNECTION=sqlite` 설정
   - `database/database.sqlite` 파일 생성

2. 영화(Film) 모델과 마이그레이션을 생성하세요:
   - 테이블명: `films`
   - 컬럼:
     - `id` (primary key)
     - `title` (string, 영화 제목)
     - `director` (string, 감독 이름)
     - `synopsis` (text, 시놉시스)
     - `poster_url` (string, 포스터 이미지 URL)
     - `genre` (string, 장르)
     - `votes` (integer, 투표수, 기본값 0)
     - `timestamps`

3. 마이그레이션을 실행하세요.

4. 5개 이상의 샘플 영화 데이터를 시더로 생성하세요:
   - 다양한 장르 (드라마, 스릴러, 로맨스, SF, 다큐멘터리 등)
   - 실제 인디 영화 느낌이 나는 제목과 시놉시스
   - 포스터 이미지는 placeholder 이미지 URL 사용 (예: https://via.placeholder.com/300x450)

5. 시더를 실행하세요.

명령어와 코드를 모두 제공해주세요.

# Laravel API 라우트 및 컨트롤러 구현

1. FilmController를 생성하고 다음 API 엔드포인트를 구현하세요:
   - `GET /api/films`: 모든 영화 목록 조회 (votes 내림차순 정렬)
   - `POST /api/films/{id}/vote`: 특정 영화에 투표 (votes 카운트 +1)

2. `routes/api.php`에 라우트를 등록하세요.

3. CORS 설정을 추가하세요:
   - `config/cors.php`에서 `http://localhost:5173` (React Vite 기본 포트) 허용
   - 또는 `php artisan install:api` 명령으로 API 기본 설정 적용

4. FilmController의 `vote` 메서드 구현 시:
   - 영화 ID로 레코드를 찾고
   - votes 컬럼을 +1 증가
   - 업데이트된 영화 데이터를 JSON으로 반환

5. Postman이나 curl로 API 테스트:
   - `GET http://localhost:8000/api/films`
   - `POST http://localhost:8000/api/films/1/vote`

모든 코드와 테스트 결과를 제공해주세요.

# React 19 프론트엔드 프로젝트 생성

1. `indie-film-festival-voting` 폴더에서 React 프로젝트를 생성하세요:
   - Vite 사용
   - 프로젝트명: `frontend`
   - React 19 최신 버전 확인

2. Tailwind CSS를 설치하고 설정하세요:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - `tailwind.config.js`에서 content 경로 설정
   - `src/index.css`에 Tailwind directives 추가

3. Axios를 설치하세요:
   - `npm install axios`

4. 기본 프로젝트 구조:
   - `src/components/FilmCard.jsx` (영화 카드 컴포넌트)
   - `src/App.jsx` (메인 앱 컴포넌트)

5. `npm run dev`로 개발 서버를 실행하고 http://localhost:5173에서 확인하세요.

모든 설치 명령어와 초기 설정 코드를 제공해주세요.

# React 앱 구현: 영화 목록 조회 및 표시

1. `src/App.jsx`를 수정하세요:
   - useState로 films 상태 관리
   - useEffect로 컴포넌트 마운트 시 Laravel API에서 영화 목록 fetch
   - axios.get('http://localhost:8000/api/films')로 데이터 가져오기
   - 로딩 상태와 에러 처리 포함

2. `src/components/FilmCard.jsx` 컴포넌트를 생성하세요:
   - props: film 객체, onVote 함수
   - 영화 포스터, 제목, 감독, 시놉시스, 장르 표시
   - 투표수 배지 (우측 상단에 하트 아이콘과 함께)
   - "투표하기" 버튼 (클릭 시 onVote 호출)
   - Tailwind CSS로 카드 스타일링 (그림자, 라운드 모서리, 호버 효과)

3. App.jsx에서 films 배열을 map으로 순회하며 FilmCard 렌더링:
   - 그리드 레이아웃 (모바일 1열, 태블릿 2열, 데스크톱 3열)
   - gap과 padding 적용

4. 헤더 섹션 추가:
   - 페이지 제목: "🎬 인디 영화제 관객 투표"
   - 부제: "당신이 선택하는 최고의 작품"

모든 React 컴포넌트 코드를 제공해주세요.

# 투표 기능 구현 및 실시간 업데이트

1. `src/App.jsx`에 handleVote 함수를 추가하세요:
   - 파라미터: filmId
   - axios.post(`http://localhost:8000/api/films/${filmId}/vote`)로 투표 요청
   - 성공 시 films 상태를 업데이트 (해당 영화의 votes +1)
   - 에러 처리 포함

2. handleVote 함수를 FilmCard 컴포넌트에 onVote prop으로 전달하세요.

3. FilmCard에서 투표 버튼 클릭 시:
   - onVote(film.id) 호출
   - 버튼에 로딩 상태 표시 (클릭 후 잠깐 비활성화)
   - 투표 후 성공 피드백 (버튼 색상 변경 또는 체크 아이콘)

4. 투표 후 자동으로 영화 목록 재정렬:
   - votes 내림차순으로 정렬
   - 1위 영화에 "🏆 1위" 배지 표시

5. 스타일링 개선:
   - 투표 버튼 호버 시 애니메이션 (scale-105)
   - 투표수 배지에 그라데이션 배경
   - 포스터 이미지 로딩 시 skeleton UI

모든 코드와 스타일링을 제공해주세요.