Update category chart appearance

Modify the appearance of the category chart to have an inset look.

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%">
-      <ResponsiveContainer width="100%" height="100%">
+      <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 20 }}>
-        <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 20 }}>
+        <Pie
-          <Pie
+          data={data}
-            data={data}
+          cx="50%"
-            cx="50%"
+          cy="50%"
-            cy="50%"
+          innerRadius={50}
-            innerRadius={50}
+          outerRadius={80}
-            outerRadius={80}
+          paddingAngle={5}
-            paddingAngle={5}
+          dataKey="value"
-            dataKey="value"
+          labelLine={false}
-            labelLine={false}
+          label={({ name, percent }) => (
-            label={({ name, percent }) => (
+            `${name} ${(percent * 100).toFixed(0)}%`
-              `${name} ${(percent * 100).toFixed(0)}%`
+          )}
-            )}
+          fontSize={12}
-            fontSize={12}
+        >
-          >
+          {data.map((entry, index) => (
-            {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.color} />
-              <Cell key={`cell-${index}`} fill={entry.color} />
+          ))}
-            ))}
+        </Pie>
-          </Pie>
+      </PieChart>
-        </PieChart>
+    </ResponsiveContainer>
-      </ResponsiveContainer>
-    </div>
   );
 };
 

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 />