[개발 진행] 마이리스트 페이지 속 별점 기능 구현

마이리스트에서 구현해야할 서비스는 별점기능 이다.

 

이것도 배너 슬라이드 처럼 직접 다구현해야하나 하고 여러자료를 찾아본 결과, 

이미 구현을 다 해놓은 라이브러리가 있다는 것을 알게되어 다운받아 간단하게 구현 하였다.

정말 다행이라고 생각했다.

 

 

[라이브러리]

https://github.com/craigh411/vue-star-rating

craigh411/vue-star-rating

Usage를 보고 설치를 한다음 차근차근 따라하면된다.

처음부분에 만들어진 모습도 볼수있는 페이지를 제공해줘서 원하는 스타일로 적용할 수 있다.

<star-rating id=setstar :star-size="30" v-model="rating" :border-width="5" border-color="#d8d8d8" :rounded-corners="true" :star-points="[23,2, 14,17, 0,19, 10,34, 7,50, 23,43, 38,50, 36,34, 46,19, 31,17]"></star-rating>

내가 쓴 스타일은 Custom Star Shape 이다.

 

<구현된 모습>

터치해서 별점 점수를 보낼 수 있다.

 

 

 

 

생각보다 vue.js관련된 자료가 그렇게 많은 것 같지가 않다.

검색을 하거나 구글링을 하면 제이쿼리나 스프링은 정말 많던데.... 

그래도 하나씩하나씩 해나가는걸 보면 조금은 뿌듯하다.

 

마이리스트까지 구현이 되어서 크게 구현해야할 서비스는 거의 다 구현을 했다. (한 90%정도)

이제 세부적으로 오류 안내 메세지와 뒤로 빼놨던 카카오 로그인 api문제를 해결해야지ㅜㅜ

이번주까지 완성을 해야 시험공부할 시간도 겨우 마련할수있어서.. 시간이 많지않다ㅜ

현재 밀린과제도 있어서... 발등에 불이 떨어졌다ㅜㅜ