From acea18c3682496f334f8ad7463bfd5b7e328da81 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 21 Mar 2025 12:06:28 +0000
Subject: [PATCH] Fix category list text overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses an issue where the "쇼" character in "쇼핑" was being truncated in the category spending list.
---
 src/components/ExpenseChart.tsx | 36 +++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/ExpenseChart.tsx b/src/components/ExpenseChart.tsx
index 5d60d63..135ce03 100644
--- a/src/components/ExpenseChart.tsx
+++ b/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)}%`
-            )}
-            fontSize={12}
+            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} />