From eb13fa76a1238729f9df558d38f38b3938610b87 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:51:25 +0000
Subject: [PATCH] Increase pie chart size

Make the pie charts in ExpenseChart and PaymentMethodChart components slightly larger.
---
 src/components/ExpenseChart.tsx                 | 6 +++---
 src/components/analytics/PaymentMethodChart.tsx | 8 ++++----
 src/pages/Analytics.tsx                         | 5 ++---
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/ExpenseChart.tsx b/src/components/ExpenseChart.tsx
index 32dece9..e840591 100644
--- a/src/components/ExpenseChart.tsx
+++ b/src/components/ExpenseChart.tsx
@@ -15,15 +15,15 @@ interface ExpenseChartProps {
 
 const ExpenseChart: React.FC<ExpenseChartProps> = ({ data }) => {
   return (
-    <div className="neuro-card h-64 desktop-card">
+    <div className="neuro-card h-72 desktop-card">
       <ResponsiveContainer width="100%" height="100%">
         <PieChart margin={{ left: 50, right: 30, top: 20, bottom: 20 }}>
           <Pie
             data={data}
             cx="50%"
             cy="50%"
-            innerRadius={40}
-            outerRadius={60}
+            innerRadius={50}
+            outerRadius={80}
             paddingAngle={5}
             dataKey="value"
             labelLine={false}
diff --git a/src/components/analytics/PaymentMethodChart.tsx b/src/components/analytics/PaymentMethodChart.tsx
index 1b9cb2d..f2ccdad 100644
--- a/src/components/analytics/PaymentMethodChart.tsx
+++ b/src/components/analytics/PaymentMethodChart.tsx
@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from 'recharts';
+import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
 
 interface PaymentMethodData {
   method: string;
@@ -30,15 +30,15 @@ const PaymentMethodChart: React.FC<PaymentMethodChartProps> = ({ data, isEmpty }
   }));
 
   return (
-    <div className="neuro-card h-64 desktop-card">
+    <div className="neuro-card h-72 desktop-card">
       <ResponsiveContainer width="100%" height="100%">
         <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 5 }}>
           <Pie
             data={chartData}
             cx="50%"
             cy="50%"
-            innerRadius={40}
-            outerRadius={60}
+            innerRadius={50}
+            outerRadius={80}
             paddingAngle={5}
             dataKey="value"
             labelLine={false}
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index d17ae57..8c0314a 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';
@@ -145,14 +144,14 @@ const Analytics = () => {
         
         {/* Category Pie Chart */}
         <h2 className="text-lg font-semibold mb-3">카테고리별 지출</h2>
-        <div className="w-full">
+        <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">
               <p>데이터가 없습니다</p>
             </div>}
         </div>
         
         {/* 결제 방법 차트 추가 */}
-        <h2 className="text-lg font-semibold mb-3 mt-6">결제 방법별 지출</h2>
+        <h2 className="text-lg font-semibold mb-3">결제 방법별 지출</h2>
         <PaymentMethodChart 
           data={paymentMethodData} 
           isEmpty={!hasPaymentData}