별점 평균 받아서 점수만큼 별 색깔 채우기

내용

백엔드에서 별점 평균을 내서 넘겨주면 그 데이터로 해당 별 색깔을 채운다.

결과

코드

• 백엔드 별점 평균 데이터 { rating : 3 }

        <StarBox>
          <span className="star">
            //별 5개 만들기
            {[1, 2, 3, 4, 5].map(el => (
              <i
                key={el}
//el과 백에서 넘어오는 rating 데이터가 작거나 같으면 yellowStar 클래스를 나타냄
		className={`fas fa-star ${el <= data.rating && 'yellowStar'}`}
              />
            ))}
          </span>
          <span className="score">{data.rating}</span>
          <span className="score">점</span>
          <span className="count">(15명)</span>
        </StarBox>

const StarBox = styled.div`
  font-size: 14px;
//보통때는 lightgray
  .star {
    margin-right: 3px;
    color: lightgray;
  }
//조건에 맞으면 orange로 변경됨
  .yellowStar,
  .score {
    margin-right: 3px;
    color: orange;
  }

  .count {
    color: #999;
  }
`;