next.js 별점 기능 구현

어떤 글을 쓸 거냐면

후기, 리뷰에서 쓰일 별점 기능을 구현해보려고 한다.

구현 기능 미리보기

• 마우스 hover시 색상이 변하고 클릭하면 점수를 부여한다.

⭐️ 별점 기능 구현

• 별 한 개를 불리언타입으로 지정해서 선택된 개수와 그렇지 않은 개수를 구별하고, 선택된 별점 만큼 true를 숫자로 변환하여 점수로 나타내려고 한다.

// 5개 별점 boolean 초기 상태 설정
  const [clicked, setClicked] = useState<boolean[]>([
    false,
    false,
    false,
    false,
    false,
  ]);

• clicked 배열을 복사하고 반복문을 이용해 clickStates 배열을 변경하여 i 값이 index 값 이하일 경우 true를 반환하고, 그렇지 않으면 false를 반환한다.

const handleStarClick = (index: number): void => {
    let clickStates: boolean[] = [...clicked];
    for (let i = 0; i < 5; i++) {
      clickStates[i] = i <= index ? true : false;
    }
    setClicked(clickStates);
  };

• 컴포넌트의 재사용성을 위해 별점 컴포넌트를 분리해 작성하였다.

 <ReviewRating clicked={clicked} onStarClick={handleStarClick} />

// 별점 컴포넌트.tsx 
const ReviewRating = ({ clicked, onStarClick }: RatingProps) => {
  const starArray = [0, 1, 2, 3, 4];
  // true의 개수를 점수로 환산
  const rating = clicked.filter(Boolean).length;
  

  return (
    <div className={styles.stars}>
    // 배열을 순회해서 선택이 된 값은 노란색, 아닌 값은 회색으로 표시
      {starArray.map((el) => {
        return (
          <AiFillStar
            fontSize={40}
            key={el}
            id={`${el}`}
            onClick={() => onStarClick(el)}
            className={`${clicked[el] && styles.yellowStars}`}
          />
        );
      })}
	// 점수만큼 텍스트로 표시 
      <p className={styles.ratingTxt}>
        {rating === 5
          ? "5.0"
          : rating === 4
          ? "4.0"
          : rating === 3
          ? "3.0"
          : rating === 2
          ? "2.0"
          : rating === 1
          ? "1.0"
          : "0.0"}
      </p>
    </div>
  );
};

export default ReviewRating;

• css

.stars {
  display: flex;
  padding-top: 5px;
}

.stars svg {
  color: gray;
  cursor: pointer;
}

.stars:hover svg {
  color: yellow;
}

.stars svg:hover ~ svg {
  color: gray;
}

.stars .yellowStars {
  color: yellow;
}

• 이렇게 숫자로 변환한 rating 값은 백엔드로 전송할 때 유용하게 쓰일 수 있다.