🎵 인디 음악 스트리밍 플레이리스트 - 장르별 큐레이션 & 좋아요

mkdir indie-music-playlist-curator && cd indie-music-playlist-curator

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

## Laravel 13.x API 백엔드 프로젝트 생성

다음 요구사항에 맞춰 Laravel 프로젝트를 생성하고 초기 설정을 완료해주세요:

1. **Laravel 13.x 프로젝트 생성**
   - `backend` 폴더에 Laravel 13.x 설치
   - Composer 최신 버전 사용

2. **데이터베이스 설정**
   - SQLite 데이터베이스 사용 (.env 파일 수정)
   - `database/database.sqlite` 파일 생성

3. **마이그레이션 생성**
   - `songs` 테이블 생성
   - 컬럼: id, title (곡 제목), artist (아티스트명), genre (장르), album_cover (앨범 커버 URL), duration (재생 시간, 초 단위), play_count (재생 횟수, 기본값 0), likes_count (좋아요 수, 기본값 0), timestamps

4. **시더(Seeder) 생성**
   - 10개 이상의 샘플 인디 음악 데이터 추가
   - 장르: 인디팝, 인디록, 포크, 일렉트로닉 등 다양하게
   - 앨범 커버는 placeholder 이미지 URL 사용 (예: https://via.placeholder.com/300)

5. **CORS 설정**
   - `config/cors.php` 설정 (React 앱과 통신 가능하도록)
   - `php artisan config:publish cors` 명령 실행 후 설정

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

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

RESTful API를 구현해주세요:

1. **컨트롤러 생성**
   - `SongController` 생성 (Resource Controller)

2. **API 라우트 정의** (`routes/api.php`)
   - `GET /api/songs` - 모든 곡 목록 조회 (장르 필터링 쿼리 파라미터 지원)
   - `GET /api/songs/{id}` - 특정 곡 상세 조회
   - `POST /api/songs/{id}/like` - 좋아요 증가
   - `POST /api/songs/{id}/play` - 재생 횟수 증가

3. **컨트롤러 메서드 구현**
   - `index()`: 모든 곡 반환, 쿼리 파라미터 `genre`로 필터링 가능
   - `show($id)`: 특정 곡 상세 정보 반환
   - `like($id)`: likes_count 1 증가 후 업데이트된 곡 정보 반환
   - `play($id)`: play_count 1 증가 후 업데이트된 곡 정보 반환

4. **JSON 응답 형식**
   - 성공 시: `{ "success": true, "data": {...} }`
   - 실패 시: `{ "success": false, "message": "에러 메시지" }`

모든 코드를 작성해주세요.

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

`frontend` 폴더에 React 프로젝트를 생성하고 초기 설정을 완료해주세요:

1. **Vite로 React 19 프로젝트 생성**
   - `npm create vite@latest frontend -- --template react`
   - React 19 버전 확인

2. **Tailwind CSS 설치 및 설정**
   - Tailwind CSS 최신 버전 설치
   - `tailwind.config.js` 설정
   - `src/index.css`에 Tailwind directives 추가

3. **Axios 설치**
   - `npm install axios`
   - API 통신용 axios 인스턴스 생성 (`src/api/axios.js`)
   - baseURL: `http://localhost:8000/api`

4. **기본 폴더 구조 생성**
   - `src/components/` - 재사용 컴포넌트
   - `src/pages/` - 페이지 컴포넌트
   - `src/api/` - API 호출 함수

5. **개발 서버 실행 확인**
   - `npm run dev` 실행하여 기본 화면 확인

모든 명령어와 설정 파일 코드를 제공해주세요.

## 음악 목록 페이지 구현 (React 컴포넌트)

메인 페이지에 음악 목록을 표시하는 기능을 구현해주세요:

1. **API 호출 함수 작성** (`src/api/songs.js`)
   - `fetchSongs(genre = '')` - 곡 목록 조회 (장르 필터링 옵션)
   - `likeSong(id)` - 좋아요 증가
   - `playSong(id)` - 재생 횟수 증가

2. **SongCard 컴포넌트** (`src/components/SongCard.jsx`)
   - Props: song 객체 (id, title, artist, genre, album_cover, duration, play_count, likes_count)
   - 앨범 커버 이미지 표시
   - 아티스트명, 곡 제목 표시
   - 장르 배지 (Tailwind로 스타일링)
   - 재생 시간 표시 (초 → 분:초 형식 변환)
   - 좋아요 버튼 (하트 아이콘, 클릭 시 likes_count 증가)
   - 재생 버튼 (재생 아이콘, 클릭 시 play_count 증가)
   - 호버 시 그림자 효과

3. **MusicList 페이지** (`src/pages/MusicList.jsx`)
   - useState로 songs 배열 상태 관리
   - useState로 selectedGenre 상태 관리
   - useEffect로 컴포넌트 마운트 시 fetchSongs 호출
   - 장르 필터 버튼들 (전체, 인디팝, 인디록, 포크, 일렉트로닉)
   - 필터 버튼 클릭 시 selectedGenre 변경 및 API 재호출
   - SongCard 컴포넌트를 그리드 레이아웃으로 배치 (반응형: 모바일 1열, 태블릿 2열, 데스크톱 3열)
   - 로딩 상태 표시
   - 에러 처리

4. **App.jsx 수정**
   - MusicList 페이지를 메인으로 렌더링
   - 헤더 추가 (로고, 제목)

모든 컴포넌트 코드를 작성해주세요. Tailwind CSS로 스타일링하고, 반응형 디자인을 적용하세요.