[react] star-rating 구현하기 2탄(이번엔 소수점까지!)

이에 구현할 별점 컴포넌트는 소수점까지 정교하게 표시되도록 하여 유저가 더욱 빠르고 정확하게 해당 음식점에 대한 후기를 접할 수 있도록 해보자.

구현 방법을 정리해보자.

1. 베이스가 될 별 모양을 배치(star_rating_base)한다.
2. 평점을 표시할 별모양을 똑같이 만든 후(star_rating_fill) display: absolute로 베이스 별을 덮어쓴다.
3. 별점이 보여지기를 원하는 만큼 width를 지정하면 된다.

 

먼저 컴포넌트 구성을 해준다.

<div className="star_rating">
   <div className="star_rating_fill" style={ratingToPercent}>
       <span>★</span>
       <span>★</span>
       <span>★</span>
       <span>★</span>
       <span>★</span>
    </div>
    <div className="star_rating_base">
       <span>★</span>
       <span>★</span>
       <span>★</span>
       <span>★</span>
       <span>★</span>
</div>

css는 styled-component를 사용하여 작성해준다.

.star_rating {
    color: #989898;
    position: relative;
    unicode-bidi: bidi-override;
    width: max-content;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1.3px;
    -webkit-text-stroke-color: #fcc419;
    margin: 0px 10px 0px 0px;
  }

  .star_rating_fill {
    color: #fcc419;
    padding: 0;
    position: absolute;
    z-index: 1;
    display: flex;
    top: 0;
    left: 0;
    overflow: hidden;
    -webkit-text-fill-color: #fcc419;
  }

  .star_rating_base {
    z-index: 0;
    padding: 0;
  }

평균 평점은 소수점으로 계산되어 나오기 때문에 별의 width %로 채워야한다. Inline 스타일링을 사용해보자.

  // star rating percentage 계산 후 style로 반영
  const ratingToPercent = {
    width: `${(starAvg / 5) * 100}%`,
  };

 

참고한 블로그

https://melthleeth.tistory.com/entry/HTML-CSS%EB%A1%9C-%EB%B3%84%EC%B0%8D%EA%B8%B0-Star-Rating

HTML, CSS로 별찍기 (Star Rating)