Star 컴포넌트

[jsweetpotato]

Star

별점을 적어주는 컴포넌트 입니다.

Method

props로 recipe 컬렉션 데이터의 expand.rating 전달

사용예시

const ratingData = data.expand.rating;
<Star rating={ratingData}/>

전체 코드

// data[0].rating[]
type Ratingtypes = {
  id: string;
  creater: string;
  review_stars: number;
  review_text: string;
};

export default function Star({ rating }) {
  // data가 불러온 레시피들 리스트 중 하나만 가져오게

  const getStarCount = () => {
    const total = rating.reduce((acc, cur) => acc + cur.review_stars, 0);
    return (total / rating.length / 2).toFixed(1) + '점';
  };

  return (
    <div className="flex text-cap-1-em gap-2pxr">
      <span className="bg-star-icon size-14pxr" aria-hidden></span>
      <p>{getStarCount()}</p>
    </div>
  );
}