Star (2) 썸네일형 리스트형 [react] star-rating 구현하기 2탄(이번엔 소수점까지!) 이에 구현할 별점 컴포넌트는 소수점까지 정교하게 표시되도록 하여 유저가 더욱 빠르고 정확하게 해당 음식점에 대한 후기를 접할 수 있도록 해보자. 구현 방법을 정리해보자. 베이스가 될 별 모양을 배치(star_rating_base)한다. 평점을 표시할 별모양을 똑같이 만든 후(star_rating_fill) display: absolute로 베이스 별을 덮어쓴다. 별점이 보여지기를 원하는 만큼 width를 지정하면 된다. 먼저 컴포넌트 구성을 해준다. ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ css는 styled-component를 사용하여 작성해준다. .star_rating { color: #989898; position: relative; unicode-bidi: bidi-override; width: ma.. [react] star-rating 구현하기(feat. typescript) 후기의 핵심.. 별점 매기기 기능을 구현해보도록 하자. 이것도 라이브러리가 몇 개 있었는데, 타스에서 적용이 안된다는 이야기가 많아 자스로 구현된 예시 몇개를 보고 리팩토링을 하는 방식으로 진행하였다! 먼저 별점 매기기 기능의 꽃! 별 아이콘을 가져오자. 나는 클릭 여부에 따라 커스텀을 해야하기 때문에 mui 아이콘을 그냥 사용하지 않고 컴포넌트로 만든 뒤 svg 형식으로 가져와 사용했다. 하단 코드는 공식 홈페이지를 참고하였다. import SvgIcon from "@mui/material/SvgIcon"; interface IProps { key: number; size: string; onClick: () => void; className: string; } const StarRate = (prop.. 이전 1 다음
