From eb4d9c6d16f232ccdcfa07da4f89b02bc48d1a3f Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 02:44:48 +0000
Subject: [PATCH] Swap chart card positions

Swapped the positions of the category expense chart and the monthly comparison graph cards.
---
 src/pages/Analytics.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index e0f3c8e..6b52d5a 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -4,6 +4,7 @@ import ExpenseChart from '@/components/ExpenseChart';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+
 const Analytics = () => {
   const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
 
@@ -48,10 +49,12 @@ const Analytics = () => {
     income: 2550000,
     expense: 1740000
   }];
+  
   const totalIncome = 2550000;
   const totalExpense = 1740000;
   const savings = totalIncome - totalExpense;
   const savingsPercentage = Math.round(savings / totalIncome * 100);
+  
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -106,11 +109,8 @@ const Analytics = () => {
           </div>
         </header>
         
-        {/* Category Pie Chart */}
-        <ExpenseChart data={expenseData} />
-        
-        {/* Monthly Comparison */}
-        <div className="mt-6 mb-8">
+        {/* Monthly Comparison - MOVED UP */}
+        <div className="mb-8">
           <h2 className="text-lg font-semibold mb-3">월별 그래프</h2>
           <div className="neuro-card h-72">
             <ResponsiveContainer width="100%" height="100%">
@@ -145,8 +145,11 @@ const Analytics = () => {
           </div>
         </div>
         
+        {/* Category Pie Chart - MOVED DOWN */}
+        <ExpenseChart data={expenseData} />
+        
         {/* Top Spending Categories */}
-        <h2 className="text-lg font-semibold mb-3">주요 지출 카테고리</h2>
+        <h2 className="text-lg font-semibold mb-3 mt-6">주요 지출 카테고리</h2>
         <div className="neuro-card mb-6">
           <div className="space-y-4">
             {expenseData.map((category, index) => <div key={category.name} className="flex items-center justify-between">
@@ -177,4 +180,5 @@ const Analytics = () => {
       <NavBar />
     </div>;
 };
-export default Analytics;
\ No newline at end of file
+
+export default Analytics;