꾸매코딩

[Netflix] Star Rating 구현 본문

Project/Netflix [React + Hooks]

[Netflix] Star Rating 구현

꾸매코더 2021. 9. 11. 21:42
반응형

결과

각 포스터에 나오던 평점을 점수에 맞게 별 모양으로 출력되도록 하였다.

Detail 페이지에 나오는 평점을 평점 점수에 맞게 별 모양으로 출력되도록 하였다.

 

 


Star Rating

npm i react-star-ratings을 활용하여 만들었다.

해보려고 이런 저런 시도를 하다가, 잘 만들어진 라이브러리가 있어서 이용하였다.

설명이 잘 되어있으니 참고하여 필요에 맞게 사용하면 될 것 같다.

https://www.npmjs.com/package/react-star-ratings

 

react-star-ratings

A customizable star rating component for selecting x stars or visualizing x stars

www.npmjs.com

 


수정

포스터 상단에 [기본 정보 / 무비 클립 / 시즌 정보]를 클릭하면 각각의 내용을 나타내려 하였는데,

router를 통해 새로운 페이지에 출력을 하려 하니 중복되는 요인들이 너무 많아서 다른 방법을 찾아보고 있다.

 

 


계획

수정에 기록한 내용을 계속 생각하면서 Search (검색) 기능을 만들 예정이다.

TV와 영화 페이지에 영화를 출력해주는것이 마음에 안들어서 배치를 다르게 해줄 예정이다.

배치를 스크롤이 바닥에 닿으면 새로운 데이터를 불러오기 적합하게 변경해줄 생각이다.

 


코드

https://github.com/ssc9811/scflix-hook

 

GitHub - ssc9811/scflix-hook: TMDB API를 활용하여 Netflix를 클론한 나만의 Scflix

TMDB API를 활용하여 Netflix를 클론한 나만의 Scflix. Contribute to ssc9811/scflix-hook development by creating an account on GitHub.

github.com

 

반응형