From ab38a1931efe6bbda9ad852d5642690016661c95 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 13:02:14 +0000
Subject: [PATCH] Update category chart appearance

Modify the appearance of the category chart to have an inset look.
---
 src/components/ExpenseChart.tsx | 46 ++++++++++++++++-----------------
 src/pages/Analytics.tsx         |  5 +---
 2 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/components/ExpenseChart.tsx b/src/components/ExpenseChart.tsx
index bc9068a..df06f62 100644
--- a/src/components/ExpenseChart.tsx
+++ b/src/components/ExpenseChart.tsx
@@ -15,30 +15,28 @@ interface ExpenseChartProps {
 
 const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
   return (
-    <div className="neuro-card h-72 desktop-card">
-      <ResponsiveContainer width="100%" height="100%">
-        <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 20 }}>
-          <Pie
-            data={data}
-            cx="50%"
-            cy="50%"
-            innerRadius={50}
-            outerRadius={80}
-            paddingAngle={5}
-            dataKey="value"
-            labelLine={false}
-            label={({ name, percent }) => (
-              `${name} ${(percent * 100).toFixed(0)}%`
-            )}
-            fontSize={12}
-          >
-            {data.map((entry, index) => (
-              <Cell key={`cell-${index}`} fill={entry.color} />
-            ))}
-          </Pie>
-        </PieChart>
-      </ResponsiveContainer>
-    </div>
+    <ResponsiveContainer width="100%" height="100%">
+      <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 20 }}>
+        <Pie
+          data={data}
+          cx="50%"
+          cy="50%"
+          innerRadius={50}
+          outerRadius={80}
+          paddingAngle={5}
+          dataKey="value"
+          labelLine={false}
+          label={({ name, percent }) => (
+            `${name} ${(percent * 100).toFixed(0)}%`
+          )}
+          fontSize={12}
+        >
+          {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.color} />
+          ))}
+        </Pie>
+      </PieChart>
+    </ResponsiveContainer>
   );
 };
 
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index 42ac2ef..cf7fd15 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react';
 import NavBar from '@/components/NavBar';
 import ExpenseChart from '@/components/ExpenseChart';
@@ -151,7 +150,7 @@ const Analytics = () => {
           <div className="w-full">
             {expenseData.some(item => item.value > 0) ? (
               <>
-                <div className="h-72">
+                <div className="h-72 flex items-center justify-center">
                   <ExpenseChart data={expenseData} />
                 </div>
                 {/* 원그래프 아래에 카테고리 지출 목록 추가 */}
@@ -172,8 +171,6 @@ const Analytics = () => {
         {/* 결제 방법 차트 추가 */}
         <h2 className="text-lg font-semibold mb-3">결제 방법 비율</h2>
         <PaymentMethodChart data={paymentMethodData} isEmpty={!hasPaymentData} />
-        
-        {/* 카테고리 지출 섹션은 제거됨 - 위 카테고리 비율 카드로 병합됨 */}
       </div>
 
       <AddTransactionButton />