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>} {ip.data && reasons.length === 0 && <Empty>기간 내 세션 없음 — 워커가 검색을 시작하면 쌓입니다</Empty>}
{reasons.length > 0 && ( {reasons.length > 0 && (
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<ResponsiveContainer width={150} height={150}> {/* 고정 크기 차트 — ResponsiveContainer 불필요(dev 경고 발생원) */}
<PieChart> <PieChart width={150} height={150}>
<Pie data={reasons} dataKey="value" nameKey="label" innerRadius={42} outerRadius={70} <Pie data={reasons} dataKey="value" nameKey="label" innerRadius={42} outerRadius={70}
paddingAngle={2} stroke="var(--color-surface)" strokeWidth={2} isAnimationActive={false}> paddingAngle={2} stroke="var(--color-surface)" strokeWidth={2} isAnimationActive={false}>
{reasons.map((r) => <Cell key={r.key} fill={r.color} />)} {reasons.map((r) => <Cell key={r.key} fill={r.color} />)}
</Pie> </Pie>
<Tooltip formatter={(v: number, name: string) => [`${v}건`, name]} /> <Tooltip formatter={(v: number, name: string) => [`${v}건`, name]} />
</PieChart> </PieChart>
</ResponsiveContainer>
<ul className="min-w-0 flex-1 space-y-1.5 text-[12px]"> <ul className="min-w-0 flex-1 space-y-1.5 text-[12px]">
{reasons.map((r) => ( {reasons.map((r) => (
<li key={r.key} className="flex items-baseline gap-2"> <li key={r.key} className="flex items-baseline gap-2">