Spotify 프로젝트 기록 일지(1)

Spotify 의 기획 구성안 

☑️ 프로젝트 개요

프로젝트 이름: MusicVibe (예시)

목표: Spotify API를 활용해 사용자가 음악을 검색하고 플레이리스트를 관리하며 개인화된 음악 추천을 받을 수 있는 웹 애플리케이션 개발

---

☑️ 주요 기능

1. 사용자 로그인
   • 사용자가 웹사이트에 접속하면, Spotify 로그인 페이지로 리디렉션됩니다. 
   • Spotify OAuth 인증을 통해 사용자가 자신의 계정으로 로그인.
   • 사용자 정보와 플레이리스트를 가져오기.
2. 메인 대시보드
   • 로그인 후, 사용자 맞춤형 대시보드가 표시됩니다. 대시보드에서는 다음과 같은 정보를 제공합니다:
     • 인기 차트: 현재 인기 있는 곡 목록
     • 추천 플레이리스트: 사용자의 취향에 맞는 추천 플레이리스트
     • 사용자 맞춤 추천: 최근 재생한 곡이나 좋아한 음악에 기반한 추천
3. 음악 검색
   • 특정 아티스트, 앨범, 곡을 검색할 수 있는 기능.
   • 검색 결과를 리스트로 출력.
4. 현재 인기 음악
   • Spotify에서 제공하는 현재 인기 음악 목록을 표시.
   • 지역별, 장르별 필터링.
5. 추천 플레이리스트
   • 사용자의 청취 기록과 취향에 따라 Spotify의 추천 곡/플레이리스트 표시.
6. 플레이리스트 관리
   • 새로운 플레이리스트 생성.
   • 기존 플레이리스트에 곡 추가/삭제.
7. 노래 미리 듣기
   • 검색된 곡의 미리 듣기(Preview URL 사용).
8. 사용자 맞춤 통계
   • 가장 많이 듣는 아티스트, 장르, 곡을 시각화(차트로 표시).
9. 사용자 정보 관리
   • 로그인 후, 사용자의 프로필(이름, 프로필 이미지 등)과 재생 목록을 확인할 수 있습니다.
   • 음악 즐겨찾기 및 최근 재생된 음악에 대한 정보도 제공합니다.
   •  
10. 테마 선택
    • 다크/라이트 모드 지원.

---

☑️ 기획서

✔️ 프로젝트 구조

페이지

1. 홈 페이지
   • 현재 인기 곡과 추천 플레이리스트 표시.
   • 로그인 버튼 배치.
2. 검색 페이지
   • 검색 창과 검색 결과 표시.
   • 검색 결과를 아티스트, 곡, 앨범으로 분류.
3. 플레이리스트 페이지
   • 사용자가 생성한 플레이리스트와 곡 리스트.
   • 새로운 플레이리스트 생성 버튼 제공.
4. 프로필 페이지
   • 사용자 이름, 이메일, 프로필 사진 표시.
   • 가장 많이 들은 음악 통계 제공.

---

✔️ UI/UX 와이어프레임

레퍼런스 사이트는 코드잇 부트캠프에서 기초 프로젝트에 진행했던 디자인 참고

홈 페이지

• 상단: 네비게이션 바(로고, 검색, 플레이리스트, 프로필).
• 중단: 현재 인기 곡과 추천 플레이리스트 카드형 레이아웃.
• 하단: 로그인 버튼 또는 사용자 정보.

검색 페이지

• 상단: 검색창(아티스트, 곡, 앨범 필터 버튼).
• 중단: 검색 결과 리스트(앨범 표지, 곡명, 아티스트명).
• 하단: 추가/재생 버튼.

플레이리스트 페이지

• 상단: 플레이리스트 이름, 설명, 생성 날짜.
• 중단: 곡 리스트(재생, 삭제 버튼).
• 하단: 곡 추가 버튼.

프로필 페이지

• 상단: 프로필 정보(사진, 이메일).
• 중단: 청취 기록 통계(가장 많이 듣는 곡, 아티스트).
• 하단: 로그아웃 버튼.

---

✔️ 기술 스택

1. Frontend
   • React.js: 컴포넌트 기반 UI 개발.
   • React의 Context API 또는 Zustand를 사용해 사용자 데이터 관리
   • Axios: Spotify API와 통신.
2. Spotify API
   • OAuth 인증.
   • Search API.
   • Playlist API.
3. 추가 도구
   • Chart.js 또는 Recharts: 음악 통계 시각화.

---

✔️ API 활용

1. OAuth 인증

• Spotify API를 사용하려면 먼저 OAuth 인증을 통해 액세스 토큰을 받아야 합니다.
• 사용자의 계정에 액세스하여 플레이리스트 및 청취 데이터를 가져오기.

2. 음악 검색

• 엔드포인트: GET /v1/search
• 파라미터: q (검색어), type (track, artist, album 등).

3. 인기 음악

• 엔드포인트: GET /v1/browse/categories/{category_id}/playlists
• 인기 카테고리별 음악 정보를 가져오기.

4. 플레이리스트 관리

• 엔드포인트: POST /v1/users/{user_id}/playlists
• 새 플레이리스트 생성.

5. 사용자 통계

• 엔드포인트: GET /v1/me/top/{type}
• 사용자 상위 아티스트, 곡, 장르 데이터 가져오기.

---

5. 프로젝트 일정

1주차: 기본 세팅 및 UI/UX 디자인

• Spotify API OAuth 인증 구현.
• 기본 레이아웃 및 UI 설계.

2주차: 주요 기능 개발

• 음악 검색 및 인기 곡 표시.
• 플레이리스트 관리 기능 구현.

3주차: 개인화 기능 추가

• 사용자 맞춤 통계 및 추천 곡 구현.
• 차트 시각화 추가.

4주차: 최적화 및 배포

• 반응형 디자인 적용.
• Vercel 또는 Netlify로 배포.