Reverted to edit edt-4426a05b-1f41-4ec2-95c4-fdef3127d8df: "Center align pie chart

The pie chart was not properly centered. This commit aligns the pie chart to the center of the component."

src/components/ExpenseChart.tsx

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { PieChart, Pie, Cell, ResponsiveContainer, Label } from 'recharts';
+import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
 import { getCategoryColor } from '@/utils/categoryColorUtils';
 
 interface ExpenseData {
@@ -17,7 +17,7 @@ const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
   return (
     <div className="neuro-card h-64 desktop-card">
       <ResponsiveContainer width="100%" height="100%">
-        <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 20 }}>
+        <PieChart margin={{ left: 20, right: 20, top: 20, bottom: 20 }}>
           <Pie
             data={data}
             cx="50%"
@@ -27,34 +27,10 @@ const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
             paddingAngle={5}
             dataKey="value"
             labelLine={true}
-            label={({ name, percent, x, y }) => {
-              // 좌표 조정으로 레이블 위치 최적화
-              const radius = 90; // 레이블을 더 바깥쪽으로 배치
-              const centerX = parseInt(x.toString());
-              const centerY = parseInt(y.toString());
-              
-              // 차트 중심으로부터의 각도 계산
-              const angle = Math.atan2(centerY - 100, centerX - 100);
-              
-              // 레이블을 원 바깥으로 배치
-              const labelX = 100 + Math.cos(angle) * radius;
-              const labelY = 100 + Math.sin(angle) * radius;
-              
-              return (
-                <g>
-                  <text 
-                    x={labelX} 
-                    y={labelY} 
-                    fill="#666" 
-                    textAnchor={labelX > 100 ? "start" : "end"}
-                    dominantBaseline="central"
+            label={({ name, percent }) => (
+              `${name} ${(percent * 100).toFixed(0)}%`
+            )}
             fontSize={12}
-                  >
-                    {`${name} ${(percent * 100).toFixed(0)}%`}
-                  </text>
-                </g>
-              );
-            }}
           >
             {data.map((entry, index) => (
               <Cell key={`cell-${index}`} fill={entry.color} />