2. 할 일 진행상황 원형 차트

2-1. 라이브러리 선정 과정

1. npm trend를 활용한 다운로드 수 비교

1️⃣ 여러 차트 라이브러리의 다운로드 수 추이를 비교한 결과, Recharts가 가장 활발하게 사용되고 있으며, 커뮤니티의 신뢰도가 높다고 판단했습니다.

2. stats의 stars와 updated날짜 비교

1️⃣ Stars(별점) 수와 업데이트 빈도를 확인했을 때, Recharts는 꾸준히 유지보수되고 있으며, 인기가 높은 라이브러리라는 점을 확인했습니다.
2️⃣ 최신 React 버전에서도 안정적으로 업데이트되고 있어, 장기적인 유지보수가 용이하다고 판단했습니다.

3. 버전 문제

1️⃣ 기존에 고려했던 react-circular-progressbar의 경우 React 19 버전과의 호환성 문제가 발생했습니다.

2️⃣ 반면, Recharts는 최신 React 버전에서도 정상적으로 동작하며, 커뮤니티에서 활발하게 사용되고 있음을 확인했습니다.

✅ 최종 결론

이러한 과정을 거쳐 Recharts가 다운로드 수, 유지보수, 호환성 측면에서 가장 안정적이고 적합하다는 결론을 내렸으며, 이를 기반으로 할 일 진행 상황을 원형 차트로 표현하기 위해 Recharts를 사용하게 되었습니다.

---

2-2. Recharts Pie 차트에 그라데이션 적용하기(svg 그라디언트를 활용)

🎯 문제 상황

1. Recharts의 Pie 컴포넌트는 fill 속성을 통해 색상을 지정할 수 있음.
2. Tailwind CSS의 fill 클래스를 fill 속성에 적용할 수 없음.
3. 그라디언트 효과를 적용하려면 SVG linearGradient를 활용해야 함.

Recharts의 PieChart를 활용하여 원형 차트(Pie 차트)를 만들 때, 단일 색상이 아닌 그라데이션 효과를 적용하고자 했습니다.
하지만 Tailwind CSS의 fill 속성을 Recharts의 fill 속성에 직접 적용하는 것은 불가능했습니다.
이에 따라 SVG의 linearGradient를 활용하여 배경색을 적용하는 방식으로 해결하였습니다.

🔹 SVG를 사용해 그라디언트 정의

<svg>
  <defs>
	<linearGradient
		id="progressGradient"
		x1="0%"
		y1="0%"
		x2="100%"
		y2="0%"
	>
      <stop offset="0%" stopColor="#10B981" />
      <stop offset="100%" stopColor="#A3E635" />
	</linearGradient>
  </defs>
</svg>

📌 여기서 id="progressGradient"로 지정한 값을 Pie 차트의 fill 속성에서 사용할 수 있습니다.

🔹 Pie 차트의 fill 속성에 적용

  <Pie
    data={[{ name: 'Completed', value: completionPercentage }]}
    dataKey="value"
    cx="50%"
    cy="50%"
    innerRadius={40}
    outerRadius={70}
    startAngle={270}
    endAngle={270 + (completionPercentage * 360) / 100}
    fill="url(#progressGradient)"// SVG 그라디언트 적용
    stroke="none"
    isAnimationActive
    animationDuration={500}
    animationEasing="ease-out"
  />

✅ 정리

• Tailwind CSS의 fill 속성을 Recharts의 fill에 직접 적용할 수 없음.
• SVG의 linearGradient를 활용하여 원하는 색상의 그라디언트를 정의함.
• Pie 차트의 fill 속성에 url(#gradientId)을 사용하여 적용함.

🚀 이렇게 SVG 그라디언트를 활용하면 React 환경에서도 보다 세련된 데이터 시각화를 구현할 수 있었습니다!