Like / Review star in react

리뷰용 별 구현
https://github.com/wecode-bootcamp-korea/26-1st-LIKE-frontend

리뷰 평점에 맞게 별이 채워지는 코드. 밸런스 있게 js와 scss 그리고 이에 맞는 별 이미지도 있어야지 구현되기에 짧고 작지만 마음에 들었다.

Code Review

//React
//parent component
...
<ReviewStarBar score={rating} />
...

//in ReviewStarBar
export class ReviewStarBar extends Component {
  render() {
    const { score } = this.props;
    const stars = (100 / 5) * score;

    return (
      <div className="ReviewStarBar">
        <div style={{ width: `${stars}%` }} className="reviewStar" />
      </div>
    );
  }
}

//Sass

.ReviewStarBar {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 25px;

  &::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 100%;
    height: 100%;
    background-image: url('assets/images/star.svg');
    opacity: 0.2;
  }

  .reviewStar {
    background-color: var(--color-black);
    height: 100%;
    position: relative;
    mask-image: url('assets/images/star.svg');
    mask-mode: alpha;
  }
}

Output

what is modules?

Things to improve

Resource