🎵 인디 뮤지션 EP 트랙리스트 페이지 - 음원 시청 & 스트리밍 링크 모음

mkdir indie-ep-tracklist-page && cd indie-ep-tracklist-page

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

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

1. Laravel 13.x 프로젝트 생성:
   - `composer create-project laravel/laravel backend`
   - backend 폴더로 이동: `cd backend`

2. 데이터베이스 설정 (.env):
   - DB_CONNECTION=sqlite
   - DB_DATABASE 경로를 database/database.sqlite로 설정
   - `touch database/database.sqlite` 명령으로 빈 SQLite 파일 생성

3. tracks 테이블 마이그레이션 생성 및 실행:
   - php artisan make:migration create_tracks_table
   - 마이그레이션 파일에 다음 컬럼 추가:
     * id (primary key)
     * track_number (integer, 트랙 번호)
     * title (string, 곡 제목)
     * duration (string, 러닝타임 예: '3:45')
     * audio_url (string, nullable, 30초 샘플 오디오 URL)
     * spotify_url (string, nullable)
     * apple_music_url (string, nullable)
     * youtube_url (string, nullable)
     * timestamps
   - php artisan migrate 실행

4. Track 모델 생성:
   - php artisan make:model Track
   - fillable 속성에 위 컬럼들 추가

5. API 라우트 설정 (routes/api.php):
   - GET /api/tracks (전체 트랙 목록 조회)
   - GET /api/album-info (앨범 정보 조회 - 하드코딩된 JSON 반환)

6. TracksController 생성 및 구현:
   - php artisan make:controller Api/TracksController
   - index() 메서드: Track::orderBy('track_number')->get() 반환
   - albumInfo() 메서드: 앨범명, 아티스트명, 발매일, 커버 이미지 URL을 JSON으로 반환 (예시 데이터)

7. 시더로 샘플 데이터 3개 생성:
   - php artisan make:seeder TracksSeeder
   - 3개 트랙 샘플 (track_number: 1~3, title, duration, 오디오 URL은 placeholder)
   - DatabaseSeeder에서 호출
   - php artisan db:seed

8. CORS 설정:
   - config/cors.php에서 'paths' => ['api/*'] 확인
   - 'allowed_origins' => ['http://localhost:5173'] 추가 (Vite 기본 포트)

9. 서버 실행:
   - php artisan serve (http://localhost:8000)

완료 후 Postman이나 브라우저에서 http://localhost:8000/api/tracks 접속 시 JSON 배열이 반환되는지 확인해주세요.

indie-ep-tracklist-page 루트 폴더로 돌아와서 (cd ..) React 19 프론트엔드 프로젝트를 생성하고 기본 설정을 해주세요.

1. Vite로 React 프로젝트 생성:
   - `npm create vite@latest frontend -- --template react`
   - frontend 폴더로 이동: `cd frontend`
   - npm install 실행

2. Tailwind CSS 설치 및 설정:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - tailwind.config.js의 content에 "./index.html", "./src/**/*.{js,jsx}" 추가
   - src/index.css에 Tailwind 디렉티브 추가:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```

3. 프로젝트 구조 설정:
   - src/components 폴더 생성
   - src/services 폴더 생성

4. API 서비스 함수 작성 (src/services/api.js):
   - fetchTracks() 함수: fetch('http://localhost:8000/api/tracks')로 트랙 목록 가져오기
   - fetchAlbumInfo() 함수: fetch('http://localhost:8000/api/album-info')로 앨범 정보 가져오기
   - 두 함수 모두 async/await 사용, JSON 파싱 후 반환

5. 개발 서버 실행:
   - npm run dev (http://localhost:5173)

완료 후 브라우저에서 http://localhost:5173 접속 시 Vite + React 기본 화면이 보이는지 확인해주세요.

React 프론트엔드에서 앨범 정보와 트랙리스트를 화면에 표시하는 UI를 구현해주세요.

1. AlbumHeader 컴포넌트 생성 (src/components/AlbumHeader.jsx):
   - props로 albumInfo 받기 (coverImage, albumName, artistName, releaseDate)
   - 앨범 커버 이미지 (최대 300px), 앨범명, 아티스트명, 발매일을 Tailwind로 스타일링
   - 반응형: 모바일에서는 세로 배치, 데스크탑에서는 가로 배치 (flex)

2. TrackCard 컴포넌트 생성 (src/components/TrackCard.jsx):
   - props로 track 객체 받기 (track_number, title, duration, audio_url, spotify_url, apple_music_url, youtube_url)
   - 카드 레이아웃:
     * 왼쪽: 트랙 번호 (큰 폰트, 회색 원형 배경)
     * 중앙: 곡 제목 + 러닝타임
     * 오른쪽: 재생 버튼 (아이콘 또는 "▶" 텍스트)
   - 스트리밍 링크 버튼들 (Spotify, Apple Music, YouTube):
     * 각 링크가 있을 때만 버튼 표시 (조건부 렌더링)
     * 버튼 클릭 시 target="_blank" rel="noopener noreferrer"로 새 창 열기
     * Tailwind로 버튼 스타일링 (bg-green-500, bg-red-500 등)
   - 카드 전체에 hover 효과 (shadow-lg, scale-105)

3. App.jsx 수정:
   - useState로 albumInfo, tracks 상태 관리
   - useEffect로 컴포넌트 마운트 시 fetchAlbumInfo(), fetchTracks() 호출
   - 로딩 상태 처리 (loading이 true일 때 "Loading..." 표시)
   - 에러 처리 (fetch 실패 시 에러 메시지 표시)
   - AlbumHeader 컴포넌트에 albumInfo 전달
   - tracks 배열을 map으로 순회하며 TrackCard 컴포넌트 렌더링

4. 전체 레이아웃:
   - 배경색: bg-gray-100 (연한 회색)
   - 최대 너비 컨테이너: max-w-4xl mx-auto py-8 px-4
   - AlbumHeader와 트랙리스트 사이 여백: mt-8

완료 후 브라우저에서 앨범 정보와 3개의 트랙 카드가 보이는지, 스트리밍 링크 버튼 클릭 시 새 창이 열리는지 확인해주세요.

TrackCard 컴포넌트에 HTML5 audio 태그를 사용한 미리듣기 플레이어를 추가해주세요.

1. TrackCard 컴포넌트 수정:
   - useState로 isPlaying 상태 추가 (초기값: false)
   - useRef로 audioRef 생성 (audio 태그 참조용)

2. audio 태그 추가:
   - src={track.audio_url}
   - ref={audioRef}
   - onEnded 이벤트: 재생 완료 시 isPlaying을 false로 변경
   - 태그는 숨김 처리 (className="hidden")

3. 재생/일시정지 버튼 구현:
   - 버튼 클릭 시 togglePlay 함수 실행
   - togglePlay 함수:
     * isPlaying이 false면 audioRef.current.play() 호출, isPlaying을 true로 변경
     * isPlaying이 true면 audioRef.current.pause() 호출, isPlaying을 false로 변경
   - 버튼 아이콘:
     * isPlaying이 true일 때: "⏸" (일시정지 아이콘)
     * isPlaying이 false일 때: "▶" (재생 아이콘)
   - 버튼 스타일: bg-blue-500 hover:bg-blue-600 text-white rounded-full p-3

4. audio_url이 없는 경우 처리:
   - track.audio_url이 null이면 재생 버튼 비활성화 (opacity-50 cursor-not-allowed)
   - 버튼 클릭해도 동작하지 않도록 조건 추가

5. 시더 데이터 업데이트 (backend):
   - backend/database/seeders/TracksSeeder.php 수정
   - audio_url에 무료 샘플 오디오 URL 추가 (예: https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3)
   - 또는 Laravel public/audio 폴더에 mp3 파일 추가 후 http://localhost:8000/audio/sample1.mp3 형식으로 URL 설정
   - php artisan migrate:fresh --seed 재실행

완료 후 브라우저에서 재생 버튼 클릭 시 오디오가 재생되고, 아이콘이 일시정지 모양으로 변경되는지 확인해주세요. 재생 완료 시 자동으로 버튼이 재생 아이콘으로 돌아오는지도 확인하세요.