[프로젝트#1-MasterPiece] 마스터피스랭킹 더보기 기능 추가, 검색결과 노출 개수 조정, 앨범커버사진 출력

현재 MasterPiece의 랭킹은 1위부터 마지막 순위까지 메인화면에 출력되고 있다.

이는 등록된 곡 수가 많을 수록 스크롤 압박이 심해지게 만드는 요인이기 때문에 5위까지만 출력하고, 더보기를 누르면 이후 순위가 출력되도록 만들 예정이다.

 

<!-- 더보기 -->

        {% if loop.index == 6 %}

        <button id="btn_more">더보기</button>

        {% endif %}

        {% endfor %}

 

<script>

document.getElementById("btn_more").addEventListener("click", function() {

    window.location.href = "{{ url_for('song.ranking') }}"; 

  });

</script>

메인화면의 html파일에 위와 같은 코드를 추가하였다.

반복문 loop의 index를 이용해 등록된 곡이 6개 이상이면 더보기 버튼이 노출되게 하였고,

이를 클릭하면 song.ranking에 해당하는 링크로 연결되게 만들었다.

 

song.ranking에는 순위를 페이징처리하여 출력되게 만들었다.

 

마스터피스 랭킹 더보기 기능

좌측 사진은 메인화면이고, 마스터피스랭킹에 더보기 버튼이 있는 것을 확인할 수 있다.

이 버튼을 클릭할 시 렌더링되는 화면이 중앙사진이다. 10위까지 출력이되고 페이징기능이 구현된 것을 확인할 수 있다.

2페이지로 가면 11위부터 12위까지 출력되고 있음을 확인할 수 있다.

 

 

위 사진들을 보면 앨범커버사진이 각 곡마다 출력되고 있음을 확인할 수 있다.

그렇다. 필자가 이를 구현하였다.

Spotify에서 제공하는 파이썬 API 모델인 Spotipy에서 앨범커버사진도 제공하고 있다.

sp.search객체에

['tracks']['items'][i]['album']['images'][0]['url']

이런 식으로 인덱싱하면 앨범커버사진의 url에 접근이 가능하다

이를 이용하여 검색결과, 메인화면에 출력되는 곡들 모두에 앨범커버사진을 출력하도록 하였다.

 

 

<구현 완료>

마스터피스랭킹 10위까지보여주고 더보기하면 쭉 보여주기
후기 삭제시 취소 눌렀는데 삭제되는 오류 수정
검색결과 50개(최대)로 늘림. 이 때 검색결과가 50개 이하면 그만큼만 출력되게! (더보기보다 이게 나을 듯 어차피 spotipy에서 제공하는 검색결과 최대개수가 50개여서. 더 검색결과 보이고 싶으면 딥러닝 알고리즘 넣어야할 듯. 검색결과와 관련있는 단어로 자동으로 검색하게 만들어야할 듯. 이건 나중에 시간비면 하자)
검색시 검색결과만 출력되게
검색시 앨범커버출력, 메인화면 앨범커버출력-진행중

 

 

<구현해야 할 것>

song_detail에 해당 노래 spotify링크 추가하기
리리뷰 추가하기(리뷰의 답글)
좋아요 추가하기(리뷰에 좋아요)

(나중)마스터피스랭킹 수식에 파퓰러리티 추가하기
(나중)카카오/spotify 연동 회원가입 & 본인인증