유저가 좋아하는 노래, 노래의 속도와 무드, 유저의 감정상태를 바탕으로 신곡을 추천해드립니다.
Spotify 계정으로 로그인하시면, 추천된 음악을 서비스 내에서 직접 플레이해보실 수 있습니다! 플레이어는 Spotify Web Playback SDK를 이용해 직접 개발했습니다.
Next.js 기반 프론트엔드와 Spring boot기반 백엔드를 사용했습니다. 노래 추천 모델의 경우 Flask 서버를 사용했습니다. Content-Based 추천 시스템을 사용했습니다.
로그인 화면
Spotify authorization code flow
소셜 로그인
Spotify Web SDK를 활용한 음악 플레이 기능을 이용하기 위해서는 Spotify에서 제공하는 access_token 이 필요했습니다. 따라서 Next Auth를 사용하는 대신, Spotify API와 왼쪽 하단에 첨부된 Spotify authorization code flow를 참고해 소셜로그인을 직접 구현했습니다.
Context를 활용한
access_token 상태 관리
여러 컴포넌트에서 토큰을 사용해야 했기 때문에, Context API를 사용해 토큰을 저장하는 Context를 생성했습니다. 또한 커스텀 훅을 활용해 토큰의 사용과 수정을 용이하게 만들었습니다.
localStorage를 활용해 새로고침 시에도 로그인 상태 유지
새로고침 시 Context가 초기화되므로 토큰을 localStorage에 저장한 다음, 페이지가 새로고침될 때마다 useEffect 훅을 사용해 localStorage의 토큰 값을 Context에 넣어줬습니다.
토큰 유효기간(1시간) 만료 시 새로운 토큰 요청
새로고침할 때마다 useEffect 훅 내에서 isTokenValid API를 호출해 토큰의 유효성을 검사했습니다. 토큰이 만료되었다면 로그인 페이지로 유저를 리다이렉트 시켰습니다.
관련 블로그 포스팅 👇
[Spotify 소셜 로그인
[Spotify 소셜 로그인
[Spotify 소셜 로그인
플레이어 작동 화면
컴포넌트 구조
Spotify Web Playback SDK를 사용해 플레이어를 생성했습니다. 플레이어의 조작은 Spotify Web API를 사용했습니다.
플레이어 생성
공식문서에 제시되어 있는 Javascript용 코드를 React + NextJS 앱에 맞게 수정해 사용했습니다.
플레이어 컨트롤
플레이어를 컨트롤하는 동작(재생, 일시정지 등)별로 Web API Endpoint가 존재해 해당 API를 호출하는 방식입니다.
React Query를 사용해 ’유저별 추천노래’ 데이터를 요청
useQuery 훅을 사용해 fetchSongs API를 호출합니다. query의 상태(loading, error, success)에 따라 화면을 분기했습니다.
관련 블로그 포스팅 👇
[Spotify API로 뮤직 플레이어 만들기
[Spotify API로 뮤직 플레이어 만들기
