style(design): FINDING-007 — 고정 150px 파이의 ResponsiveContainer 제거

recharts 가 '고정 폭·높이엔 ResponsiveContainer 불필요' 경고를 콘솔에
반복 출력(페이지당 4회). PieChart 직접 렌더로 전환.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
민헌 2026-07-13 22:54:46 +09:00
parent 10ea8ddd45
commit 29e54ad838

View File

@ -82,15 +82,14 @@ export default function Crawl() {
{ip.data && reasons.length === 0 && <Empty> </Empty>}
{reasons.length > 0 && (
<div className="flex items-center gap-4">
<ResponsiveContainer width={150} height={150}>
<PieChart>
<Pie data={reasons} dataKey="value" nameKey="label" innerRadius={42} outerRadius={70}
paddingAngle={2} stroke="var(--color-surface)" strokeWidth={2} isAnimationActive={false}>
{reasons.map((r) => <Cell key={r.key} fill={r.color} />)}
</Pie>
<Tooltip formatter={(v: number, name: string) => [`${v}`, name]} />
</PieChart>
</ResponsiveContainer>
{/* 고정 크기 차트 — ResponsiveContainer 불필요(dev 경고 발생원) */}
<PieChart width={150} height={150}>
<Pie data={reasons} dataKey="value" nameKey="label" innerRadius={42} outerRadius={70}
paddingAngle={2} stroke="var(--color-surface)" strokeWidth={2} isAnimationActive={false}>
{reasons.map((r) => <Cell key={r.key} fill={r.color} />)}
</Pie>
<Tooltip formatter={(v: number, name: string) => [`${v}`, name]} />
</PieChart>
<ul className="min-w-0 flex-1 space-y-1.5 text-[12px]">
{reasons.map((r) => (
<li key={r.key} className="flex items-baseline gap-2">