React 별점 기능 구현

구현 내용

• 별점을 소수점 까지 표시 할 수 있다.

준비물

1 . 회색 별 5개 이미지

2 . 파란 별 5개 이미지

동작원리

---

1. 회색별과 파란별을 겹쳐야 한다 그러기 위해서 겹치게 해주기 위한 부모 박스를 만든다.
2. 회색별을 파란별 아래에 배치한다. 그에 대한 방법은 파란별 이미지에 z-index를 통해서 파란별이 회색별 보다 위에 있게 배치한다.
3. 파란별의 부모 박스에 overflow : hidden 이라는 속성을 부여하고 부모박스의 width가 파란별 이미지의 width 값보다 작을 때 width 값의 차이만큼 파란별의 이미지가 가려지도록 한다.
   그랬을 때 자연스레 파란별의 이미지는 가려지고 아래에 있던 회색별의 이미지가 나타나게 된다.
4. inline style을 통해서 width 값이 별점에 의해 달라질 수 있도록 한다.

---

4. inline style을 통해서 width 값이 별점에 의해 달라질 수 있도록 한다.

구현 코드

const starView = productInfo.star_point * 20;
.
.
.
<div className="starBox" style={{ width: starView }}>
   <img
     className="pointOfStar"
     alt="별"
     src="/images/파란별들.png"
   />
</div>

지금의 starBox의 식은 별점의 이미지의 width 가 100px일 경우이다.
만약 별점 이미지의 크기가 130px 이라면

별점 x (130 / 5 )
130 = 별점 이미지의 width값
5 = 별점의 최대 수치

위의 식에 따라 식이 변하게 될 것이다

구현코드

---

[javascript]

<div className="starBox" style={{ width: starView }}>
  <img
    className="pointOfStar"
    alt="별"
    src="/images/파란별들.png"
  />
</div>
<img
  className="backgrdoundStar"
  alt="별"
  src="/images/회색별들.png"
/>

    
    [css]
    
        .starBox {
          z-index: 1000;
          margin-left: 55px;
          margin-right: 10px;
          height: 19px;
          overflow: hidden;

          .pointOfStar {
            z-index: 10;
            height: 19px;
            width: 100px;
          }
        }
        .backgroundStar {
          position: absolute;
          margin-left: 84px;
          width: 100px;
          height: 19px;
        }
      }

힘들었던 점

---

검색을 해보았지만 이번 문제는 내가 직접 생각하고 구현 해봐야겠다는 생각이 더 커서 직접 아이디어를 짜고 그에 맞게 구현해보려 했다.
어려웠던 부분은 어떻게 하면 파란별이 가려지고 가려진 부분에 회색별이 나타나게 할지였다.

해결했다..? 해결이 됐다..?

---

아직도 어이가 없다. 몇시간동안 어떻게 하면 해결할지 고민을 하다가 머리가아파서 잤다.. 그런데 자다가 갑자기 해결책이 생각이 나서 해보니까 됐다..?
나도 영문을 모르겠다 새로운 경험이었다..

나의 자랑스러운 결과물

---