PieChart 컴포넌트

[joyswim]

📝작업 내용

Chart.js 라이브러리를 사용하여 세부 결과에 사용될 PieChart 컴포넌트를 구현합니다. 테스트 코드를 참고하여 labels, data를 전달해주세요.

📷스크린샷

🧪 테스트

// page.tsx
import { PieChart } from '@/components/PieChart';

const DUMMY_DATA = {
  labels: ['고양이', '강아지', '미선택'],
  data: [5, 4, 1],
};

export default function Home() {
  return (
    <div className="my-10 flex gap-10">
      <PieChart
        labels={DUMMY_DATA.labels}
        data={DUMMY_DATA.data}
      />
      <PieChart
        labels={[]}
        data={[]}
      />
      <PieChart
        labels={DUMMY_DATA.labels}
        data={DUMMY_DATA.data}
        className="bg-gray-800 w-80"
      />
    </div>
  );
}

✨PR Point

• 세부 결과 컴포넌트(detailResult)는 현재 round 정보와 user 정보가 필요하여 따로 작업하는 것이 좋을 것 같습니다. 유저를 리스트로 나열해주는 부분은 API로 유저 데이터를 어떻게 받을지 백엔드와 논의가 필요할 것 같습니다.