mkdir band-setlist-voting-page && cd band-setlist-voting-page

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

Laravel 13.x 프로젝트를 생성하고 초기 설정을 해주세요.

요구사항:
1. `composer create-project laravel/laravel .` 명령으로 Laravel 13.x 최신 버전 설치
2. `.env` 파일에서 데이터베이스를 SQLite로 설정:
   - DB_CONNECTION=sqlite
   - DB_DATABASE=/absolute/path/to/database.sqlite (또는 상대경로 database/database.sqlite)
   - database/database.sqlite 파일 생성 (touch database/database.sqlite)
3. Tailwind CSS 설치 및 설정:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - tailwind.config.js에서 content 경로 설정: `content: ['./resources/**/*.blade.php', './resources/**/*.js']`
   - resources/css/app.css에 Tailwind 디렉티브 추가:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```
   - resources/views/layouts/app.blade.php 레이아웃 파일 생성 (기본 HTML 구조 + Vite로 CSS/JS 로드)
4. `php artisan serve` 명령으로 개발 서버 실행 확인
5. `npm run dev` 명령으로 Vite 개발 서버 실행 확인

초기 설정이 완료되면 "Laravel 13.x 프로젝트 생성 완료, Tailwind CSS 설정 완료, 개발 서버 실행 중" 메시지를 출력해주세요.

노래 정보를 저장할 데이터베이스 마이그레이션과 모델, 시드 데이터를 생성해주세요.

요구사항:
1. `php artisan make:model Song -m` 명령으로 Song 모델과 마이그레이션 파일 생성
2. 마이그레이션 파일(database/migrations/xxxx_create_songs_table.php)에 다음 컬럼 추가:
   - id (primary key, auto increment)
   - title (string, 곡명)
   - album (string, 앨범명)
   - thumbnail_url (string, 앨범 커버 이미지 URL)
   - genre (string, nullable, 장르 - 예: Rock, Ballad, Dance)
   - votes (integer, default 0, 득표수)
   - spotify_link (string, nullable, Spotify 링크 - 보너스)
   - timestamps (created_at, updated_at)
3. `php artisan migrate` 명령으로 테이블 생성
4. database/seeders/DatabaseSeeder.php에서 샘플 노래 데이터 5~10곡 시드:
   - 실제 인디 밴드 곡 또는 가상의 곡명 사용
   - thumbnail_url은 Unsplash 또는 Placeholder 이미지 URL 사용 (예: https://picsum.photos/seed/song1/400/400)
   - 장르는 Rock, Ballad, Dance, Pop 등 다양하게
   - votes는 0으로 초기화
5. `php artisan db:seed` 명령으로 시드 데이터 삽입
6. Song 모델(app/Models/Song.php)에 $fillable 속성 설정:
   - protected $fillable = ['title', 'album', 'thumbnail_url', 'genre', 'votes', 'spotify_link'];

완료 후 "songs 테이블 생성 완료, 시드 데이터 삽입 완료" 메시지를 출력해주세요.

메인 페이지에서 노래 목록을 표시하고 투표 기능을 구현해주세요.

요구사항:
1. routes/web.php에 메인 라우트 정의:
   - GET '/' 라우트: 모든 노래를 득표수 기준 내림차순으로 조회하여 뷰에 전달
   - POST '/vote/{song}' 라우트: 특정 노래의 votes 컬럼을 +1 증가시키고 메인 페이지로 리다이렉트
2. app/Http/Controllers/SongController.php 컨트롤러 생성:
   - `php artisan make:controller SongController` 명령 실행
   - index() 메서드: Song::orderBy('votes', 'desc')->get()으로 노래 목록 조회 후 'songs.index' 뷰에 전달
   - vote(Song $song) 메서드: $song->increment('votes'); 후 redirect()->route('songs.index')->with('success', '투표 완료!');
3. resources/views/songs/index.blade.php 뷰 생성:
   - layouts/app.blade.php 레이아웃 확장 (@extends('layouts.app'))
   - 페이지 제목: "🎸 밴드 공연 셋리스트 투표 - 팬들이 선택하는 앵콜곡"
   - 노래 목록을 Tailwind CSS 그리드 카드로 표시 (grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6):
     - 각 카드: 앨범 커버 이미지 (썸네일), 곡명, 앨범명, 장르 배지, 득표수 표시
     - "이 곡 듣고 싶어요! 🎵" 버튼 (POST /vote/{song->id} 폼 제출)
     - 1위~3위 노래에 특별 배지 표시 ("👑 1위", "🥈 2위", "🥉 3위")
   - 투표 완료 메시지 표시 (session('success') 확인)
4. Tailwind CSS 스타일링:
   - 카드: 배경 흰색, 그림자, 둥근 모서리, 호버 시 스케일 애니메이션
   - 버튼: 기본 파란색, 호버 시 진한 파란색, 투표 후 초록색으로 변경 (선택)
   - 득표수 카운터: 큰 폰트, 볼드체, 강조 색상
   - 반응형 디자인: 모바일(1열), 태블릿(2열), 데스크톱(3열)

완료 후 브라우저에서 http://localhost:8000 접속 시 노래 목록이 카드 형태로 표시되고, 투표 버튼 클릭 시 득표수가 증가하며 페이지가 새로고침되는지 확인해주세요.

UI/UX를 개선하고 보너스 기능을 추가해주세요.

요구사항:
1. **투표 완료 피드백 강화**:
   - 투표 후 세션에 투표한 노래 ID 저장 (session()->put('voted_songs', []))
   - 이미 투표한 노래는 버튼을 비활성화하거나 "투표 완료 ✅" 텍스트로 변경
   - 투표 완료 시 Toast 알림 또는 간단한 모달 표시 (선택, Alpine.js 사용 가능)
2. **애니메이션 효과**:
   - 투표 버튼 클릭 시 하트 이모지(❤️) 날리기 애니메이션 (CSS keyframes 또는 Alpine.js)
   - 득표수 증가 시 숫자 카운터 애니메이션 (선택, CountUp.js 라이브러리 또는 CSS transition)
3. **장르 필터링**:
   - 페이지 상단에 장르 필터 버튼 추가 (전체, Rock, Ballad, Dance, Pop)
   - JavaScript로 클라이언트 사이드 필터링 구현 (data-genre 속성 활용)
4. **Spotify 미리듣기 링크**:
   - 각 카드에 "🎧 미리듣기" 버튼 추가 (spotify_link가 있는 경우만 표시)
   - 새 창으로 Spotify 링크 열기 (target="_blank")
5. **다크 모드 지원**:
   - Tailwind CSS dark: 클래스를 사용하여 다크 모드 스타일 추가
   - 페이지 상단에 다크 모드 토글 버튼 (Alpine.js 또는 JavaScript로 구현)
6. **반응형 개선**:
   - 모바일에서 카드 크기 최적화
   - 태블릿에서 2열 그리드 간격 조정

완료 후 브라우저에서 투표 시 애니메이션이 작동하고, 장르 필터링이 동작하며, 다크 모드 전환이 가능한지 확인해주세요.