재활용 가능한 Rating component (별점 컴포넌트)

저번 프로젝트도 그렇고 지금 프로젝트도 그렇고 자꾸 별점 컴포넌트를 필요로 합니다.

 

이번 프로젝트는 MUI, 라이브러리 등을 사용하지 않고 만들고 있습니다.

 

근데 구글링을 해보니 딱히 프로젝트에 적용할 만한 글이 없길래 직접 만들었습니다.

 

만드는 김에 재활용성 빵빵하게 만들어서 두고두고 쓰자 라는 생각이 들었습니다.

 

제 생각엔 어디든 쓸 수 있을 거 같으니 퍼가서 써도 좋을 거 같습니다.

 

결과물부터 보여드리면

 

 

 

 

1

2

3

4

깔끔한가요?

 

 

 

 

 

원리를 간단하게 설명하면

 

1. 별을 누르면 값이 변하고

2. 변한 값보다 작으면 별을 색칠하고

3. 변한 값을 부모로 보낸다

입니다.

 

진짜 간단하네요

 

RatingSection.tsx

// line 26 까지는 css
const RatingContainer = styled.div`
  display: flex;
  text-align: center;
  margin: 13px 0px;
  .inactive {
    color: ${palette.border};
  }
  .active {
    color: coral;
  }
`;

// AiFillStar는 react-icon 인데요 이거를 하트나 동그라미등 원하는거로 커스텀 가능합니다.
const RatingStar = styled(AiFillStar)`
  cursor: pointer;
`;

const PIndex = styled.p`
  margin: 0 5px;
`;

interface RatingSectionProps {
  ratingIndex: number;
  setRatingIndex: Dispatch<SetStateAction<number>>;
}

function RatingSection({ ratingIndex, setRatingIndex }: RatingSectionProps) {
  // map를 사용하려고 급조한 array 입니다;;
  const ArrayIndexes = [1, 2, 3, 4, 5];
  return (
    <RatingContainer>
      {ArrayIndexes.map((arrayindex, index) => (
        <RatingStar
          size={35}
          key={`rating_${index}`}
// 여기가 핵심
          className={arrayindex <= ratingIndex ? 'active' : 'inactive'}
          onClick={() => setRatingIndex(arrayindex)}
        />
      ))}
      <PIndex>
        {ratingIndex === 5
          ? '아주 좋아요'
          : ratingIndex === 4
          ? '맘에 들어요'
          : ratingIndex === 3
          ? '보통이에요'
          : ratingIndex === 2
          ? '그냥 그래요'
          : '별로에요'}
      </PIndex>
    </RatingContainer>
  );
}

 

사용할 컴포넌트.tsx

 function 사용할 컴포넌트() {
 // ratingIndex = 받을 평점
 const [ratingIndex, setRatingIndex] = useState(1);
 return(
 
 ~~~~~~~ code
 
       <RatingSection
          ratingIndex={ratingIndex}
          setRatingIndex={setRatingIndex}
        />
        
~~~~~~~~ code
)        
export default 사용할 컴포넌트;

 

이렇게 되면 끝입니다

별을 클릭할 때마다 ratingIndex 값을 부모인 "사용할 컴포넌트. tsx " 에 보내줍니다!