🎸 로컬 뮤직 페스티벌 아티스트 라인업 소개 페이지

mkdir music-festival-artist-showcase && cd music-festival-artist-showcase

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

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

**요구사항:**
- `composer create-project laravel/laravel .` 명령으로 현재 폴더에 Laravel 설치
- `.env` 파일에서 데이터베이스를 SQLite로 설정 (`DB_CONNECTION=sqlite`, `DB_DATABASE=database/database.sqlite`)
- `database/database.sqlite` 파일 생성
- Tailwind CSS 3.x 설치 및 설정 (npm 기반, `tailwind.config.js`에서 Blade 파일 경로 포함)
- `php artisan serve` 명령으로 서버 실행 가능하도록 확인

**추가 설정:**
- `resources/views` 폴더에 `layouts/app.blade.php` 기본 레이아웃 파일 생성 (Tailwind CSS CDN 또는 빌드된 CSS 연결)
- 기본 폰트는 'Inter' 또는 'Pretendard' 사용
- 레이아웃에 네비게이션 바 포함 (로고: '🎸 MUSIC FEST 2025', 메뉴: Home, Artists, Schedule)

완료 후 `http://localhost:8000` 접속 시 Laravel 기본 화면이 보여야 합니다.

아티스트 데이터를 저장할 데이터베이스 구조를 만들어주세요.

**요구사항:**
- `artists` 테이블 마이그레이션 생성 (`php artisan make:migration create_artists_table`)
- 컬럼 구조:
  - `id`: 기본키
  - `name`: 아티스트 이름 (string, 필수)
  - `genre`: 장르 (string, 예: Rock, Jazz, Hip-Hop, Electronic)
  - `bio`: 소개글 (text, nullable)
  - `profile_image`: 프로필 이미지 URL (string, nullable)
  - `performance_date`: 공연 날짜 (date)
  - `performance_time`: 공연 시간 (time)
  - `stage`: 공연 무대 (string, 예: Main Stage, Sub Stage)
  - `likes_count`: 좋아요 수 (integer, default 0)
  - `instagram_url`: 인스타그램 링크 (string, nullable)
  - `youtube_url`: 유튜브 링크 (string, nullable)
  - `timestamps`: 생성/수정 시간

- `representative_songs` 테이블 마이그레이션 생성 (대표곡 저장용)
- 컬럼 구조:
  - `id`: 기본키
  - `artist_id`: 외래키 (artists 테이블 참조, onDelete cascade)
  - `title`: 곡 제목 (string)
  - `duration`: 재생 시간 (string, 예: '3:45')
  - `timestamps`

- 마이그레이션 실행 (`php artisan migrate`)
- Artist 모델 생성 (`php artisan make:model Artist`)
- Artist 모델에 `representativeSongs()` 관계 메서드 추가 (hasMany)
- RepresentativeSong 모델 생성 및 `artist()` 관계 메서드 추가 (belongsTo)

완료 후 데이터베이스에 테이블이 생성되어야 합니다.

샘플 아티스트 데이터를 자동으로 생성하는 시더(Seeder)를 만들어주세요.

**요구사항:**
- `php artisan make:seeder ArtistSeeder` 명령으로 시더 생성
- 최소 8명의 아티스트 샘플 데이터 삽입
- 각 아티스트마다 2~4곡의 대표곡 포함
- 장르는 Rock, Jazz, Hip-Hop, Electronic, Indie, K-Pop 등 다양하게
- 공연 날짜는 2025-07-15, 2025-07-16, 2025-07-17 3일로 분산
- 공연 시간은 14:00, 16:00, 18:00, 20:00, 22:00 등으로 분산
- 무대는 'Main Stage', 'Sub Stage', 'Acoustic Stage' 등으로 분산
- 프로필 이미지는 Unsplash API 또는 placeholder 이미지 사용 (예: `https://i.pravatar.cc/300?img={번호}`)
- Instagram/YouTube URL은 실제 링크 형식으로 (예: `https://instagram.com/artist_name`)

**샘플 아티스트 예시:**
- The Midnight Riders (Rock, Main Stage, 2025-07-15 20:00)
- Luna Jazz Quartet (Jazz, Acoustic Stage, 2025-07-15 18:00)
- DJ Pulse (Electronic, Main Stage, 2025-07-16 22:00)
- Seoul Vibes (K-Pop, Sub Stage, 2025-07-16 16:00)
- 등등...

- `DatabaseSeeder.php`에서 ArtistSeeder 호출 추가
- `php artisan db:seed` 명령으로 시더 실행

완료 후 `php artisan tinker`로 `Artist::count()`가 8 이상이어야 합니다.

아티스트 목록 페이지와 상세 페이지를 만들어주세요.

**요구사항:**

**1. 라우트 설정 (`routes/web.php`):**
- `GET /` → 홈 페이지 (아티스트 목록으로 리다이렉트)
- `GET /artists` → 아티스트 목록 페이지
- `GET /artists?genre={장르}` → 장르별 필터링
- `GET /artists/{id}` → 아티스트 상세 페이지

**2. ArtistController 생성 (`php artisan make:controller ArtistController`):**
- `index()` 메서드: 전체 아티스트 목록 또는 장르별 필터링
  - 쿼리 파라미터 `genre`가 있으면 해당 장르만 조회
  - 좋아요 수 많은 순으로 정렬 옵션 추가 (쿼리 파라미터 `sort=popular`)
  - 페이지네이션 없이 전체 목록 반환
- `show($id)` 메서드: 아티스트 상세 정보 + 대표곡 목록

**3. Blade 뷰 파일 생성:**

**`resources/views/artists/index.blade.php`:**
- 페이지 상단에 장르 필터 버튼 (All, Rock, Jazz, Hip-Hop, Electronic, Indie, K-Pop)
- 각 버튼 클릭 시 `?genre={장르}` 쿼리 파라미터로 페이지 새로고침
- 현재 선택된 장르 버튼은 파란색으로 하이라이트
- 아티스트 카드 그리드 레이아웃 (3열, 모바일에서는 1열)
- 각 카드 내용:
  - 프로필 이미지 (원형, 150x150px)
  - 아티스트 이름 (굵은 글씨)
  - 장르 배지 (색상별 구분: Rock은 빨강, Jazz는 보라, 등)
  - 공연 일시 (아이콘 + 날짜/시간)
  - 무대 정보
  - 좋아요 수 표시 (❤️ 아이콘 + 숫자)
  - '자세히 보기' 버튼 (아티스트 상세 페이지로 링크)
- Tailwind CSS로 카드 hover 효과 추가 (그림자, 확대 애니메이션)

**`resources/views/artists/show.blade.php`:**
- 아티스트 프로필 섹션:
  - 큰 프로필 이미지 (300x300px)
  - 이름, 장르, 공연 일시, 무대
  - 소개글 (bio)
  - SNS 링크 버튼 (Instagram, YouTube)
- 대표곡 리스트:
  - 곡 제목, 재생 시간
  - 리스트 스타일로 깔끔하게 표시
- 좋아요 버튼 (하트 아이콘, 클릭 시 Ajax로 좋아요 증가 - 다음 단계에서 구현)
- '목록으로 돌아가기' 버튼

**4. 레이아웃 업데이트:**
- `layouts/app.blade.php`의 네비게이션 바에서 'Artists' 메뉴를 `/artists`로 링크

완료 후 `/artists` 접속 시 아티스트 목록이 카드 형식으로 표시되고, 장르 필터가 작동해야 합니다. 각 카드 클릭 시 상세 페이지로 이동합니다.

좋아요 기능을 구현해주세요. 사용자가 아티스트 상세 페이지에서 '좋아요' 버튼을 클릭하면 좋아요 수가 증가하고, 쿠키로 중복 클릭을 방지합니다.

**요구사항:**

**1. 라우트 추가 (`routes/web.php`):**
- `POST /artists/{id}/like` → 좋아요 증가 API

**2. ArtistController에 `like($id)` 메서드 추가:**
- 쿠키 확인: `liked_artists_{아티스트 ID}` 쿠키가 있으면 이미 좋아요를 눌렀다고 판단하고 에러 반환
- 쿠키가 없으면:
  - 아티스트의 `likes_count` 증가 (`$artist->increment('likes_count')`)
  - 쿠키 생성 (유효기간 30일)
  - JSON 응답으로 새로운 좋아요 수 반환

**3. Blade 뷰 업데이트 (`artists/show.blade.php`):**
- 좋아요 버튼 추가:
  - 버튼 디자인: 큰 하트 아이콘 + '좋아요' 텍스트 + 현재 좋아요 수
  - 이미 좋아요를 눌렀다면 버튼 비활성화 (쿠키 확인)
  - 버튼 클릭 시 Ajax 요청으로 `/artists/{id}/like` POST 호출
- JavaScript (Blade 템플릿 내 `<script>` 태그):
  - Fetch API 사용하여 POST 요청
  - CSRF 토큰 포함 (`@csrf` 또는 `<meta name="csrf-token">`)
  - 성공 시: 좋아요 수 업데이트, 버튼 비활성화, 애니메이션 효과 (하트 커졌다 작아지는 효과)
  - 실패 시: 알림 메시지 표시 ('이미 좋아요를 눌렀습니다')

**4. 목록 페이지에도 좋아요 수 실시간 반영:**
- 아티스트 카드에 좋아요 수 표시
- 인기순 정렬 버튼 추가 (`?sort=popular`)

완료 후 아티스트 상세 페이지에서 좋아요 버튼을 클릭하면 숫자가 증가하고, 새로고침 후에도 중복 클릭이 방지되어야 합니다.

공연 일정 타임라인 페이지를 추가하고, 전체 프로젝트를 마무리해주세요.

**요구사항:**

**1. 라우트 추가 (`routes/web.php`):**
- `GET /schedule` → 공연 일정 타임라인 페이지

**2. ArtistController에 `schedule()` 메서드 추가:**
- 모든 아티스트를 공연 날짜 및 시간 순으로 정렬
- 날짜별로 그룹화하여 뷰에 전달

**3. Blade 뷰 생성 (`resources/views/schedule.blade.php`):**
- 페이지 제목: '🎵 Festival Schedule'
- 날짜별 탭 또는 섹션 (2025-07-15, 2025-07-16, 2025-07-17)
- 각 날짜별로 타임라인 형식으로 아티스트 표시:
  - 시간 (예: 14:00)
  - 아티스트 이름
  - 무대 (Main Stage, Sub Stage 등)
  - 장르 배지
  - 아티스트 상세 페이지로 링크
- 타임라인 디자인: 세로 라인 + 동그라미 마커 + 카드 형식
- 모바일 최적화

**4. 네비게이션 업데이트:**
- `layouts/app.blade.php`의 'Schedule' 메뉴를 `/schedule`로 링크

**5. 홈 페이지 (`welcome.blade.php` 또는 새로운 `home.blade.php`) 개선:**
- 페스티벌 소개 섹션:
  - 큰 헤더 이미지 또는 그라데이션 배경
  - 페스티벌 이름: 'MUSIC FEST 2025'
  - 부제: 'Experience the Best Live Music'
  - 날짜: July 15-17, 2025
  - 장소: Seoul Olympic Park
- 인기 아티스트 TOP 5 표시 (좋아요 수 기준)
- 'View All Artists' 버튼 → `/artists`로 링크
- 'See Schedule' 버튼 → `/schedule`로 링크

**6. 전체 디자인 통일:**
- 색상 테마: 보라색/파란색 그라데이션 (음악 페스티벌 느낌)
- 모든 페이지에 일관된 여백, 폰트, 버튼 스타일 적용
- 다크모드 토글 추가 (보너스, JavaScript로 `localStorage` 활용)

**7. README.md 작성:**
- 프로젝트 설명
- 설치 방법 (composer install, npm install, migrate, seed)
- 실행 방법 (php artisan serve)
- 주요 기능 목록
- 스크린샷 (선택)

완료 후 전체 프로젝트가 완성되고, `/schedule` 페이지에서 공연 일정을 타임라인 형식으로 볼 수 있어야 합니다. 홈 페이지에서 페스티벌 분위기가 느껴지고, 모든 페이지가 반응형으로 동작해야 합니다.