별점 UI

다음과 같이 별점을 평가할 수 있는 Rating UI를 구현하고자 한다.

 

별점 Container와 마우스 Position 가져오기

현재 별점 UI를 랩핑하고 있는 클래스가 stars인 컨테이너가 좌측으로 얼마만큼 떨어져 있는지와 마우스 커서의 현재 위치 값을 알아야지 컨테이너 내에서 현재 마우스 커서가 얼마만큼 이동했는지 파악할 수 있다.

 

또한 현재 마우스 커서가 컨테이너 내에서 이동한 비율이 별점 0.5점 단위로 계산되어야 하기 때문에 전체 star 컨테이너 내에서 별점 가로 너비/2의 값을 확인해야 된다.

MouseEvent 인터페이스의 clientX 읽기 전용 속성은 이벤트가 발생한 애플리케이션 viewport 내에 수평 좌표를 제공한다(페이지 내의 좌표와는 반대)

const calculateScore = (e) => {
  const { width, left } = e.currentTarget.getBoundingClientRect();
  const x = e.clientX - left;
  const scale = width / MAX_SCORE / 2;
  const score = Math.floor(x / scale + 1) / 2; //최소 0.5값만큼 점수 계산이 되어야 하기 때문에 계산 된 비율 값에 1을 가산
  return score;
}

 

별점 위치 값만큼 점수 계산

계산된 마우스 포지션의 위치값은 0.5단위로 이동하고 이를 통해 점수를 표현하기 위해서 별점 UI 배열을 순회하며 각 인덱스 값과 비교해준다.

const setDisplayScore = (score) => {
  const starList = Array.from($stars.children);
  starList.forEach((star, i) => {
    if(score > i) { //현재 마우스 위치가 각 인덱스 값보다 클 경우에만 별 UI를 채움
      if(score - i === 0.5) {
        star.className = 'star half';
      } else {
        star.className = 'star full';
      }
    } else {
      star.className = 'star empty';
    }
  })
}