[DIP/FE] 둘러보기 - 카테고리별 API 호출하기
·
TAVE-16th
Ⅰ. 둘러보기 개요 둘러보기란 다른 사용자들이 생성한 플레이리스트를 탐색할 수 있는 페이지이다. 사용ㅈ는 다양한 맥락에서 만들어진 플레이리스트를 살펴보며 새로운 음악 취향을 발견할 수 있다. 상단에는 다음과 같은 카테고리 필터가 제공된다.장소 : 카페, 이동 중, 집/실내 등목표 : 활력, 집중, 위로 등데시벨 : 조용함, 보통, 시끄러움 등사용자는 이 카테고리를 선택하여 원하는 상황에 맞는 플레이리스트를 탐색할 수 있으며, 각 카테고리 안에서도 세부 필터를 통해 플레이리스트를 좁혀볼 수 있다. 또한 둘러보기 중 맘에 드는 플레이리스트를 발견하면 Spotify 딥링크를 통해 바로 재생할 수 있으며, 내 라이브러리레 저장할 수 있는 기능도 있다. Ⅱ. 둘러보기 필터링 구현 둘러보기 페이지에서 장소', ..
[DIP/FE] 라이브러리 - Spotify에서 4분할 커버 가져오기 & 플리 삭제하기
·
TAVE-16th
Ⅰ. 라이브러리 개요 사용자가 추천받은 플레이리스트를 저장하고 다시 찾아볼 수 있는 공간인 라이브러리이다. 2열 그리드로 구성하였고, 각 플레이리스트의 커버는 최상단의 플레이리스트 앨범 커버 4개를 분할하여 보여줬다. 이를 통해 사용자는 플레이리스트 이름과 앨범 커버를 동시에 확인하면서 시각적으로 시원함을 주었다. 라이브러리의 서버 요청을 할 때에는 데이터가 많아질 가능성이 있기 때문에 페이지네이션 방식을 사용하였다. 10개 단위로 끊어서 로드했고, 스크롤 하단 도달 시 다음 페이지를 또 요청하는 방식이다. 라이브러리에 들어오면 일단 우리 서버에서 playlistId 목록을 조회한다. 처음에는 이 아이디를 다시 상세 조회 API로 호출하여 4개의 커버를 가져오는 방식으로 하였는데, 이렇게 되면 for문..