뮤직마켓

Spotify api를 이용해 최근 30일간 들은 곡을 조회해 즐겨 듣는 노래를 Three.js를 활용하고 영수증으로 표현해보았습니다.

화면

홈

Spotify 로그인

결과

프로젝트 목표

• Three.js 먹어보기: 오브젝트와 카메라를 원하는 곳에 위치시키는 것을 배웠습니다. 또 cannon을 이용해 물리 엔진을 구현했습니다.

• jwt 토큰 이해: Spotify API 요청 중 access token이 만료되면 refresh token으로 갱신했습니다.

기술 스택

{
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@react-three/cannon": "^6.6.0",
    "@react-three/drei": "^9.88.17",
    "@react-three/fiber": "^8.15.11",
    "@react-three/gltfjsx": "^4.3.4",
    "@tanstack/react-query": "^5.15.3",
    "three": "^0.158.0"
    "axios": "^1.6.2",
    "next": "14.0.3",
  }

프로젝트 실행 방법

npm run dev