1차 팀 프로젝트 - goorm music

[프로젝트 명] goorm_music

<aside> ☝🏻 프로젝트 개요

</aside>

프로젝트 소개

음악은 감정과 취향을 가장 직관적으로 반영하는 컨텐츠이기 때문에 사용자 맞춤형 경험을 제공하기에 적합한 주제입니다. 특히 Spotify는 전 세계적으로 널리 사용되는 음악 플랫폼으로 다양한 음악 정보 API를 제공합니다. 이러한 Spotify API를 활용하면 장르별, 국가별 차트 및 사용자 검색 기반 음악 추천 등 실제 데이터를 바탕으로 한 동적 웹 서비스를 개발할 수 있습니다. 우리는 이 데이터를 기반으로 사용자와의 상호작용에 따라 콘텐츠가 실시간으로 변하는 프론트엔드 중심의 음악 추천 사이트를 구현하고자 합니다. API 연동, 조건부 렌더링, 사용자 중심의 인터페이스 설계 등은 모두 프론트엔드 개발자가 실무에서 반드시 익혀야 할 요소이기도 합니다. 따라서 본 프로젝트는 단순한 컨텐츠 나열이 아닌 외부 데이터 활용 및 UI/UX 구현까지 아우르는 실전형 웹 서비스 개발 경험을 제공할 수 있다고 판단하여 주제로 선정하게 되었습니다.

프로젝트 목표

본 프로젝트의 궁극적인 목표는 Spotify의 API를 활용하여 사용자 취향 기반의 음악 추천 웹 애플리케이션을 개발하는 것입니다. 외부 API와의 통신을 통해 다양한 음악 데이터를 실시간으로 불러오고 이를 기반으로 사용자 맞춤형 추천 리스트를 구성합니다. 또한 Firebase의 인증 및 데이터베이스 기능을 활용하여 사용자 로그인 및 인증 시스템을 구현하며 사용자별로 선호하는 음악 장르 등을 저장합니다. 이러한 데이터를 바탕으로 사용자의 음악 취향을 시각화하고 개인화된 콘텐츠 경험을 제공합니다. 더불어 반응형 UI/UX 설계를 통해 데스크탑과 모바일 환경 모두에서 원활하게 사용할 수 있도록 최적화된 사용자 인터페이스를 구현하는 것을 주요 목표로 합니다. 이를 통해 프론트엔드 실무 전반에 필요한 핵심 역량을 종합적으로 경험하고자 합니다.

지원 기능

회원가입 페이지
1-1. spotify 계정 연동 필수
1-2. DB에 사용자 선호 장르 저장

로그인 페이지
2-1. spotify 계정 로그인
2-2. 자체 로그인

메인 페이지
3-1. 사용자 선호 장르를 기반으로 음악 추천
3-2. 다른 페이지로 이동할 수 있는 네비게이션 바 필요

검색 페이지
4-1. 사용자의 입력을 기반으로 음악 및 아티스트 검색

카테고리별 페이지
5-1. 사용자가 선택한 카테고리별 인기 음악을 보여주는 페이지
5-2. 카테고리는 국가별, 장르별 등등..
5-3. 커다란 카테고리 선택 시 세부 카테고리로 나뉨(국가는 한국, 미국 등으로, 장르는 발라드, 랩 등으로)

곡 디테일 페이지
6-1. 곡마다 상세 정보를 보여주는 페이지
6-2. 좋아요 기능
6-3. 아티스트 클릭 시 아티스트 상세 페이지로 이동
6-4. 음악 30초 미리 듣기 기능 구현

아티스트 상세 페이지
7-1. 아티스트에 대한 정보를 보여주는 페이지
7-2. 아티스트가 올린 곡들도 보여줌

마이페이지
8-1. 본인의 정보를 보여주는 페이지
8-2. 사용자가 만든 플레이리스트를 보여줌
8-3. 선호 장르를 확인 및 수정 가능
8-4. 사용자가 follow한 플레이리스트 또한 보여줌

프로필 페이지(마이페이지와 다름)
9-1. 상대방의 정보를 보여주는 페이지
9-2. 민감 정보는 보여주지 않고, 그 사용자가 만든 플레이리스트 등을 보여줌

플레이 리스트 페이지
10-1. 사용자가 만든 플레이리스트를 보여주는 페이지
10-2. 사용자는 자신이 만든 플레이 리스트라면 곡을 추가하고 삭제할 수 있음

사용 스택

프론트엔드 (Client)

기술	역할
Next.js (App Router)	React 기반 풀스택 프레임워크. 라우팅, SSR/CSR, API route 제공
TypeScript	정적 타입을 통한 안정적인 코드 작성
Tailwind CSS	빠르고 효율적인 스타일링
Zustand	상태 관리 도구 (사용자 상태, access_token 등)
Axios or Fetch API	비동기 통신 처리
React Icon	간단한 아이콘 제공

OAuth & 인증 / 사용자 관리

기술	역할
Spotify OAuth 2.0 with PKCE	Spotify 계정 기반 로그인 구현
Access Token / Refresh Token 관리	Spotify API 요청을 위한 인증 토큰
Firebase Authentication	자체 회원 시스템 또는 Spotify 연동 사용자 식별 저장용

데이터베이스 / 백엔드 기능

기술 역할

Firebase Firestore 사용자 선호 장르 저장
외부 API

API 역할

Spotify Web API 음악 검색, 사용자 정보, 플레이리스트 생성, 음악 추천 등 전반적 기능 제공
개발 및 협업 도구

도구 설명

GitHub / Git 버전 관리 및 협업

Figma UI 디자인 및 시안 공유

Notion 기획 문서 정리

기술	역할
Firebase Firestore	사용자 선호 장르 저장

API	역할
Spotify Web API	음악 검색, 사용자 정보, 플레이리스트 생성, 음악 추천 등 전반적 기능 제공

도구	설명
GitHub / Git	버전 관리 및 협업
Figma	UI 디자인 및 시안 공유
Notion	기획 문서 정리

[프로젝트 진행] Role & Meeting

신유승(팀장)
- 회원가입, 로그인 기능 구현
- 곡 상세 페이지 구현
	- 음악 재생 기능
	- 음악 좋아요 기능
	- 음악 상세 정보 열람 기능
	- 관련 음악 추천 기능
- 데일리 스크럼 작성

김소연
- 메인 페이지 구현
	- 사용자 선호 장르에 맞게 음악 추천 기능
- 검색 페이지 구현
	- 사용자의 입력을 기반으로 음악 검색 기능
- 카테고리별 페이지 구현
	- 사용자가 선택한 카테고리별로 인기 음악 리스트를 보여주는 기능
	- 카테고리는 장르, 국가 등등..
- 플레이리스트 페이지 구현
	- 사용자가 플레이리스트를 만들 수 있도록 하는 기능
	- 곡을 추가하고 삭제할 수 있는 기능
	- 다른 사용자가 플레이리스트를 열람할 수 있고, follow할 수 있음

김승범
- 마이 페이지 구현
	- 본인의 정보를 열람할 수 있는 페이지
	- 선호 장르 수정 기능
	- 제작한 플레이리스트 볼 수 있는 기능
	- 좋아요 누른 곡 리스트 기능
	- 사용자가 follow한 플레이 리스트를 볼 수 있는 기능
- 프로필 페이지 구현
	- 상대방의 간략한 정보를 열람할 수 있는 페이지
	- 상대방의 선호 장르 확인 기능
	- 상대방이 follow한 플레이 리스트를 볼 수 있는 기능
- 아티스트 상세 페이지 구현
	- 아티스트에 대한 상세 정보를 볼 수 있는 페이지
	- 아티스트가 발매한 곡들을 볼 수 있는 기능