[DIP/FE] 라이브러리 - Spotify에서 4분할 커버 가져오기 & 플리 삭제하기
·
TAVE-16th
Ⅰ. 라이브러리 개요 사용자가 추천받은 플레이리스트를 저장하고 다시 찾아볼 수 있는 공간인 라이브러리이다. 2열 그리드로 구성하였고, 각 플레이리스트의 커버는 최상단의 플레이리스트 앨범 커버 4개를 분할하여 보여줬다. 이를 통해 사용자는 플레이리스트 이름과 앨범 커버를 동시에 확인하면서 시각적으로 시원함을 주었다. 라이브러리의 서버 요청을 할 때에는 데이터가 많아질 가능성이 있기 때문에 페이지네이션 방식을 사용하였다. 10개 단위로 끊어서 로드했고, 스크롤 하단 도달 시 다음 페이지를 또 요청하는 방식이다. 라이브러리에 들어오면 일단 우리 서버에서 playlistId 목록을 조회한다. 처음에는 이 아이디를 다시 상세 조회 API로 호출하여 4개의 커버를 가져오는 방식으로 하였는데, 이렇게 되면 for문..
[DIP/FE] 온보딩 구현 - 문자열 검사 및 Spotify API로 아티스트 목록 가져오기
·
TAVE-16th
온보딩 개요로그인 진행 후 최초 1회 실행되는 온보딩으로 닉네임, 아티스트 취향, 장르 취향을 설정한다. 닉네임은 한글은 1-10자 이내, 영문은 2-20자 이내로 설정하는 제한을 두었다. 프론트엔드에서 1차적으로 문자열 검사를 하고, 추가적으로 백엔드에서도 검증 로직을 한 번 더 거친다. 아티스트 취향은 Spotify API를 활용하였다. Spotify에서 제공하는 아티스트 정보를 기반으로 사용자가 선호하는 아티스트를 선택할 수 있게 구현하였다. Spotify API를 사용하는 함수와 구현 방식은 밑에서 자세히 설명할 예정이다. 장르의 경우 선택 가능한 항목이 약 10개 정도로 적기 때문에 별도의 API를 호출하지 않고 미리 장르 리스트를 정의하여 사용하였다. + 모드 설정온보딩에서 사용하는 3개의 프..