Favor-Eat : 캐릭터 모양의 rating 컴포넌트 구현하기

J·2023년 5월 23일

React rating component

프로젝트

목록 보기

3/14

Favor-Eat 프로젝트에는 4가지 맛 지표(맵,단,짠,느끼)를 사용한다.
각 맛에 해당하는 캐릭터와 색깔이 있고 대표 모양이 있다.

음식 추천을 위한 초기 평가와 레시피의 맛 평균, 나의 맛 평균
같은 부분에서 사용될 rating component가 필요했다.

아이디어 구상

구상 해보기로는
일단 저 모양들을 반반 짤라서 hover할때 색깔 바뀌고,
클릭하면 클릭값 저장해두고,
이 모양들에서 마우스가 떠나면 다시 reset하고 이러면 되겠지?
라고 생각하고 구현을 시작했다.

아이콘 자르기

디자이너님께서 만들어주신 아이콘들을 figma의 slice 기능으로 반틈으로 잘라냈다.
저게 반반을 정확하게 잘라야 이어붙일때 예쁘게 붙고 각 모양의 slice들의 크기가 똑같아야 했다.

컴포넌트 작동 방식 정리

중요한 동작은

icon hover시 현재 hover한 icon보다 왼쪽의 icon들은 모두 active 될것
icon에서 mouse out시 inactive 될것 (이미 점수가 계산된 경우에는 mouse out 무시)
클릭시 클릭한 곳보다 왼쪽에 있는 아이콘들이 active 될것
icon 클릭시 5점 만점에 0.5점 단위로 값이 계산될것
(후에는 백엔드 요청으로 1점 단위로 바꿈)

간단하게 코드를 정리해보자면


// icon의 left, right가 active 되었는지를 저장
  const [ratingList, setRatingList] = useState(
    Array(5).fill({ left: false, right: false }),
  );


//JSX
//현재 컴포넌트를 mouse out해야 값 reset (2번 사항)
<style.Container onMouseOut={onResetRating}>
      {ratingList.map((shape, index) => {
        return (
          <span key={index}>
            <style.Rating
              characterType={type}        //svg 색상
              active={shape.left}
              onMouseOver={() => onMouseOver(index)}   //
              onClick={() => onClickRating(index)}     //click시 값 계산
            >
              {ratingImg[type].left}      //left icon
            </style.Rating>
            <style.Rating
              characterType={type}
              active={shape.right}
              onMouseOver={() => onMouseOver(index)}
              onClick={() => onClickRating(index)}
            >
              {ratingImg[type].right}    //right icon
            </style.Rating>
          </span>
        );
      })}
    </style.Container>