🎸 뮤지션 공연 셋리스트 공유 페이지 - 팬들과 함께하는 무대

mkdir musician-setlist-sharing-page && cd musician-setlist-sharing-page

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

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

1. Laravel 최신 버전(13.x) 프로젝트 생성
2. .env 파일에서 DB_CONNECTION을 sqlite로 변경
3. database/database.sqlite 파일 생성
4. Tailwind CSS 설치 및 설정 (Laravel Vite와 통합)
5. php artisan migrate 실행하여 기본 마이그레이션 완료

완료 후 php artisan serve로 서버를 실행하고 http://localhost:8000 에서 Laravel 기본 화면이 보이는지 확인해주세요.

셋리스트와 곡 정보를 저장할 데이터베이스 구조를 만들어주세요:

**마이그레이션 2개 생성:**

1. `concerts` 테이블:
   - id (Primary Key)
   - title (공연 제목, string)
   - date (공연 날짜, date)
   - venue (공연 장소, string)
   - status (상태: upcoming/ongoing/ended, string, 기본값 'upcoming')
   - poster_image (포스터 이미지 경로, string, nullable)
   - created_at, updated_at

2. `songs` 테이블:
   - id (Primary Key)
   - concert_id (Foreign Key → concerts.id, onDelete cascade)
   - title (곡명, string)
   - artist (아티스트명, string)
   - album (앨범명, string, nullable)
   - duration (예상 연주 시간(분), integer, nullable)
   - likes_count (좋아요 수, integer, 기본값 0)
   - order (곡 순서, integer)
   - created_at, updated_at

마이그레이션 파일을 생성하고 php artisan migrate를 실행하여 테이블을 생성해주세요.

추가로 Concert와 Song 모델도 생성하고, Concert 모델에 songs() 관계(hasMany)를 설정해주세요.

셋리스트를 보여줄 메인 페이지를 만들어주세요:

**라우트 설정 (routes/web.php):**
- GET `/` → 전체 공연 목록 페이지
- GET `/concerts/{concert}` → 특정 공연의 셋리스트 상세 페이지
- POST `/songs/{song}/like` → 곡에 좋아요 추가

**컨트롤러 생성 (ConcertController):**
- index() 메서드: 모든 공연을 날짜 역순으로 가져와 뷰에 전달
- show($id) 메서드: 특정 공연과 관련 곡들을 order 순서대로 가져와 뷰에 전달

**뷰 파일 생성:**

1. `resources/views/layouts/app.blade.php` (메인 레이아웃):
   - Tailwind CSS 포함
   - 음악 테마의 그라디언트 배경 (보라-핑크 계열)
   - 헤더에 "🎸 Setlist Share" 로고
   - @yield('content') 영역

2. `resources/views/concerts/index.blade.php`:
   - 공연 목록을 카드 형태로 표시
   - 각 카드에 공연 제목, 날짜, 장소, 상태 배지 표시
   - 카드 클릭 시 상세 페이지로 이동
   - 공연이 없으면 "아직 등록된 공연이 없습니다" 메시지

3. `resources/views/concerts/show.blade.php`:
   - 공연 정보 헤더 (제목, 날짜, 장소, 상태)
   - 셋리스트 테이블: 순서, 곡명, 아티스트, 앨범, 연주시간, 좋아요 수, 좋아요 버튼
   - 좋아요 수에 따라 곡 목록 정렬 (내림차순)
   - 반응형 디자인 (모바일에서는 테이블 대신 카드 레이아웃)

Tailwind CSS로 음악 공연 분위기의 세련된 디자인을 적용해주세요. 버튼은 하트 이모지(❤️)를 사용하고, 좋아요를 누른 곡은 하트가 채워진 상태(💗)로 표시해주세요.

좋아요 기능을 구현해주세요:

**SongController 생성:**
- like($id) 메서드 구현:
  - 세션을 사용해 이미 좋아요를 누른 곡인지 확인 (세션 키: 'liked_songs', 배열로 곡 ID 저장)
  - 이미 좋아요를 눌렀으면 "이미 좋아요를 누르셨습니다" 메시지와 함께 리다이렉트
  - 처음 누르는 경우 Song 모델의 likes_count를 +1 증가시키고 세션에 곡 ID 추가
  - 성공 메시지와 함께 이전 페이지로 리다이렉트

**라우트 추가 (routes/web.php):**
- POST `/songs/{song}/like` → SongController@like

**뷰 수정 (concerts/show.blade.php):**
- 좋아요 버튼을 폼으로 감싸기 (CSRF 토큰 포함)
- 세션에서 liked_songs 배열을 확인하여 이미 좋아요를 누른 곡은 💗(채워진 하트), 안 누른 곡은 ❤️(빈 하트) 표시
- 좋아요 수가 높은 곡 순으로 자동 정렬 (컨트롤러에서 orderBy('likes_count', 'desc') 적용)
- 성공/오류 메시지를 Tailwind CSS 알림 박스로 표시

**보너스:**
- Alpine.js를 추가하여 좋아요 버튼 클릭 시 페이지 새로고침 없이 하트 아이콘이 즉시 변경되도록 구현 (선택 사항)

좋아요 기능이 정상 작동하는지 테스트해주세요. 같은 곡에 여러 번 좋아요를 누르면 중복 방지 메시지가 나와야 합니다.

샘플 데이터를 추가하고 UI를 개선해주세요:

**Seeder 생성 (DatabaseSeeder.php):**

1. Concert 2개 생성:
   - Concert 1: "Spring Live 2025", 날짜: 2025-05-15, 장소: "Olympic Hall", 상태: "upcoming"
   - Concert 2: "Summer Festival", 날짜: 2025-07-20, 장소: "Han River Park", 상태: "upcoming"

2. 각 Concert마다 Song 5개씩 생성:
   - 다양한 곡명, 아티스트, 앨범, 연주 시간 설정
   - order는 1~5로 순차 부여
   - likes_count는 랜덤으로 0~50 사이 값 할당

php artisan db:seed를 실행하여 샘플 데이터를 데이터베이스에 추가해주세요.

**UI 개선:**

1. Blade 컴포넌트 생성:
   - `resources/views/components/concert-card.blade.php`: 공연 카드 컴포넌트 (제목, 날짜, 장소, 상태 배지)
   - `resources/views/components/song-row.blade.php`: 셋리스트 곡 행 컴포넌트 (순서, 곡 정보, 좋아요 버튼)
   - `resources/views/components/status-badge.blade.php`: 상태 배지 컴포넌트 (upcoming=파란색, ongoing=초록색, ended=회색)

2. 뷰 파일에서 컴포넌트 사용:
   - `concerts/index.blade.php`에서 <x-concert-card> 사용
   - `concerts/show.blade.php`에서 <x-song-row>, <x-status-badge> 사용

3. 추가 스타일링:
   - 좋아요 Top 3 곡에 금/은/동 메달 이모지(🥇🥈🥉) 표시
   - 호버 효과 추가 (카드, 버튼에 transition 적용)
   - 공연 상세 페이지 상단에 공연 포스터 이미지 영역 추가 (이미지가 없으면 기본 뮤직 아이콘 표시)

모든 기능이 정상 작동하는지 테스트하고, 모바일 화면에서도 UI가 깔끔하게 보이는지 확인해주세요.