[Next.js] 별점 만들기 (소수점 표현)

별점을 만드는 방법에 다양한 방법이 있지만 내가 했던 방법으로 두개의 별 SVG를 사용했다.
밑에 별이 회색, 위에 별이 노란색이고 노란색 별의 width값이 줄이면 overflow:hidden으로 안 보이게 했다.
그럼 밑에 회색 별이 보이면서 위에 사진처럼 나타날 수 있다.

회색 별 SVG

<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 23.44 19'><polygon fill='#80868B' points='10,15.27 16.18,19 14.54,11.97 20,7.24 12.81,6.63 10,0 7.19,6.63 0,7.24 5.46,11.97 3.82,19'/></svg>

노란 별 SVG

<svg xmlns='http://www.w3.org/2000/svg'  width='17' height='17' viewBox='0 0 23.44 19'><polygon fill='#FDD663' points='10,15.27 16.18,19 14.54,11.97 20,7.24 12.81,6.63 10,0 7.19,6.63 0,7.24 5.46,11.97 3.82,19'/></svg>

코드

import React from 'react'
import * as S from './style'

const Star = () => {
  const starWidth = 3.5 * 17 // (별점) * (85 / 5 = 17)

  const renderStars = (src, count) => (
    <>
      {/* svg라서 next/image 적용 안 함  */}
      {[...Array(count)].map((_, index) => (
        <img key={index} src={src} alt="star" />
      ))}
    </>
  )

  return (
    <S.StarWrap>
      <div>{renderStars('/images/star/star.svg', 5)}</div>
      <S.YellowStar starWidth={starWidth}>
        {renderStars('/images/star/starYellow.svg', 5)}
      </S.YellowStar>
    </S.StarWrap>
  )
}

export default Star

스타일

import styled from '@emotion/styled'

export const StarWrap = styled.div`
  position: relative;
  display: flex;
`
export const YellowStar = styled.div`
  position: absolute;
  display: flex;
  width: ${({ starWidth }) => starWidth && starWidth + 'px'};
  top: 0;
  overflow: hidden;
`

[참고]
https://jae04099.tistory.com/296