SP-537 사용자 평점 그래프 컴포넌트

[abiriadev]

배포된 storybook preview 링크: https://6639b92a06ad1d3b783f16fd-ndmldekdvb.chromatic.com/?path=/docs/components-circularrate--docs

Closes #191

💡 다음 이슈를 해결했어요.

• 사용자 평점을 원형(circular)으로 보여주는 그래프 컴포넌트를 외부 종속성을 가져오지 않고 구현하였어요!
• 원 안에 숫자, 문자 등의 원하는 컴포넌트를 렌더링 할 수 있게 되었어요!
• 사용자 마음대로의 그래디언트를 사용할 수 있어요!
• 그래프의 진행도가 전부 같게 보이는 이슈를 수정했어요.
• 0%일때 미세한 gap이 표시되는 것을 해결했어요.
  
  
  

💡 이슈를 처리하면서 추가된 코드가 있어요.

• <CircularRate /> 컴포넌트를 추가했어요: https://github.com/Ludo-SMP/ludo-frontend/blob/draft/progress/src/Components/CircularRate/index.tsx
• 고유한 SVG Mask를 사용하기 위해 useMaskId 훅을 추가했어요.
• 총 9개의 새 스토리를 추가했어요!
  
  
  

💡 필요한 후속작업이 있어요.

• 그래디언드 stop에 대한 논의
• 마운트 시 자연스러운 애니메이션 보여주기
  
  
  

💡 다음 자료를 참고하면 좋아요.

• 현재와 같이 PR이 올라온 상황에서 브랜치 이름을 SP-537로 바꿀 수 없는 이유:
  • https://stackoverflow.com/a/20014444/16246435
    
    
    

✅ 셀프 체크리스트

• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
• 커밋 메세지를 컨벤션에 맞추었습니다.
• 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
• 변경 후 코드는 기존의 테스트를 통과합니다.
• 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
• docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

[SungHyun627]

css 라이브러리 없이 사용자 평점 그래프를 구현하시느라 고생 많으셨습니다. svg를 활용하여 다양한 방식으로 색상 gradient를 표현하는 방법 배우고 갑니다!! 수고하셨습니다.

[hyosin-Jang]

라이브러리 없이 직접 구현하신거 정말 대단하십니다 👍
코드가 정말 깔끔하고 직관적으로 작성되어 있어서 읽기 편했습니다.
고생하셨습니다 !!