Fix category list text overflow

Addresses an issue where the "쇼" character in "쇼핑" was being truncated in the category spending list.

src/components/ExpenseChart.tsx

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
+import { PieChart, Pie, Cell, ResponsiveContainer, Label } 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: 20, right: 20, top: 20, bottom: 20 }}>
+        <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 20 }}>
           <Pie
             data={data}
             cx="50%"
@@ -27,10 +27,34 @@ const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
             paddingAngle={5}
             dataKey="value"
             labelLine={true}
-            label={({ name, percent }) => (
-              `${name} ${(percent * 100).toFixed(0)}%`
-            )}
+            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"
                     fontSize={12}
+                  >
+                    {`${name} ${(percent * 100).toFixed(0)}%`}
+                  </text>
+                </g>
+              );
+            }}
           >
             {data.map((entry, index) => (
               <Cell key={`cell-${index}`} fill={entry.color} />