React 컴포넌트 - Star

안녕하세요 트리플랩 입니다.
오늘은 별 모양 React component를 만들어서 공유해 보겠습니다.
보통 서비스를 만들다 보면 리뷰 컴포넌트 같은 곳에서 별점등 많이 구현하시잖아요?

해당 컴포넌트를 공유합니다.

// useStarRating.tsx

import React, { useState } from "react";
import star_active from "../assets/images/star_active.svg";
import star_default from "../assets/images/star_default.svg";

export interface StarRatingProps {
  totalStars: number;
  activeStars: number;
  size?: number;
}

const useStarRating = ({
  totalStars,
  activeStars,
  size = 20,
}: StarRatingProps) => {
  const [rating, setRating] = useState(activeStars);

  const handleChange = (value: number) => {
    setRating(value + 1);
  };

  const stars = Array.from({ length: totalStars }, (_, i) => i);

  const starElements = stars.map((_, index) => {
    const star = index < rating ? star_active : star_default;

    return (
      <img
        key={index}
        src={star}
        alt={`star-${index + 1}`}
        onClick={() => handleChange(index)}
        style={{ width: size, height: size, fontSize: size }}
      />
    );
  });

  return { starElements };
};

export default useStarRating;

// page/Star.tsx (부모 컴포넌트)

import useStarRating from "../hook/useStarRating";

export default function Star() {
  const { starElements } = useStarRating({
    totalStars: 5,
    activeStars: 2,
    size: 40,
  });

  return <div>{starElements}</div>;
}