From a138e814394b61359c3a328d71cd85a6e99f42c6 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 22 Mar 2025 12:53:08 +0000
Subject: [PATCH] Adjust layout of category spending

Adjust the layout of the category spending chart to align vertically with the payment method chart, while keeping the payment method chart's position unchanged.
---
 src/components/ExpenseChart.tsx | 2 +-
 src/pages/Analytics.tsx         | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/ExpenseChart.tsx b/src/components/ExpenseChart.tsx
index e840591..bc9068a 100644
--- a/src/components/ExpenseChart.tsx
+++ b/src/components/ExpenseChart.tsx
@@ -17,7 +17,7 @@ const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
   return (
     <div className="neuro-card h-72 desktop-card">
       <ResponsiveContainer width="100%" height="100%">
-        <PieChart margin={{ left: 50, right: 30, top: 20, bottom: 20 }}>
+        <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 20 }}>
           <Pie
             data={data}
             cx="50%"
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index 8c0314a..fbcb6fb 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -142,12 +142,15 @@ const Analytics = () => {
           <MonthlyComparisonChart monthlyData={monthlyData} isEmpty={totalBudget === 0 && totalExpense === 0} />
         </div>
         
-        {/* Category Pie Chart */}
+        {/* Category Pie Chart - 왼쪽 여백 조정 */}
         <h2 className="text-lg font-semibold mb-3">카테고리별 지출</h2>
         <div className="w-full mb-8">
-          {expenseData.some(item => item.value > 0) ? <ExpenseChart data={expenseData} /> : <div className="neuro-card h-52 w-full flex items-center justify-center text-gray-400">
+          {expenseData.some(item => item.value > 0) ? 
+            <ExpenseChart data={expenseData} /> : 
+            <div className="neuro-card h-52 w-full flex items-center justify-center text-gray-400">
               <p>데이터가 없습니다</p>
-            </div>}
+            </div>
+          }
         </div>
         
         {/* 결제 방법 차트 추가 */}