Fix budget discrepancies

The budget amounts displayed on the home page were inconsistent with those shown on the transactions and analytics pages. This commit addresses this issue.

src/pages/Analytics.tsx

@@ -4,56 +4,38 @@ import ExpenseChart from '@/components/ExpenseChart';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { ChevronLeft, ChevronRight, Wallet, CreditCard, PiggyBank } from 'lucide-react';
+import { useBudget } from '@/contexts/BudgetContext';
+import { formatCurrency } from '@/utils/formatters';
+import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
+
 const Analytics = () => {
   const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
+  const { budgetData, getCategorySpending, transactions } = useBudget();
+  
+  // 월간 예산 및 지출 데이터 가져오기
+  const totalBudget = budgetData.monthly.targetAmount;
+  const totalExpense = budgetData.monthly.spentAmount;
+  const savings = Math.max(0, totalBudget - totalExpense);
+  const savingsPercentage = totalBudget > 0 ? Math.round(savings / totalBudget * 100) : 0;
+  
+  // 카테고리별 지출 데이터 생성
+  const categorySpending = getCategorySpending();
+  const expenseData = categorySpending.map(category => ({
+    name: category.title,
+    value: category.current,
+    color: category.title === '식비' ? '#81c784' : 
+           category.title === '생활비' ? '#AED581' : '#2E7D32'
+  }));
 
-  // Updated expense categories with green color scheme
-  const expenseData = [{
-    name: '식비',
-    value: 350000,
-    color: '#81c784' // Green (matching neuro-income)
-  }, {
-    name: '생활비',
-    value: 650000,
-    color: '#AED581' // Light green
-  }, {
-    name: '교통비',
-    value: 175000,
-    color: '#2E7D32' // Dark green (replacing yellow)
-  }];
-
-  // Sample data for the monthly comparison - renamed income to budget
-  const monthlyData = [{
-    name: '3월',
-    budget: 2400000,
-    expense: 1800000
-  }, {
-    name: '4월',
-    budget: 2300000,
-    expense: 1700000
-  }, {
-    name: '5월',
-    budget: 2700000,
-    expense: 1900000
-  }, {
-    name: '6월',
-    budget: 2200000,
-    expense: 1500000
-  }, {
-    name: '7월',
-    budget: 2500000,
-    expense: 1650000
-  }, {
-    name: '8월',
-    budget: 2550000,
-    expense: 1740000
-  }];
-
-  // Updated variable names to match new terminology
-  const totalBudget = 2550000;
-  const totalExpense = 1740000;
-  const savings = totalBudget - totalExpense;
-  const savingsPercentage = Math.round(savings / totalBudget * 100);
+  // 최근 6개월 데이터 (샘플 데이터와 현재 월 실제 데이터 결합)
+  const monthlyData = [
+    { name: '3월', budget: totalBudget, expense: totalBudget * 0.7 },
+    { name: '4월', budget: totalBudget, expense: totalBudget * 0.65 },
+    { name: '5월', budget: totalBudget, expense: totalBudget * 0.7 },
+    { name: '6월', budget: totalBudget, expense: totalBudget * 0.55 },
+    { name: '7월', budget: totalBudget, expense: totalBudget * 0.6 },
+    { name: '8월', budget: totalBudget, expense: totalExpense } // 현재 달은 실제 데이터
+  ];
 
   // Custom formatter for Y-axis that removes currency symbol and uses K format
   const formatYAxisTick = (value: number) => {
@@ -63,15 +45,13 @@ const Analytics = () => {
   // Custom formatter for tooltip that keeps the original formatting with currency symbol
   const formatTooltip = (value: number | string) => {
     if (typeof value === 'number') {
-      return new Intl.NumberFormat('ko-KR', {
-        style: 'currency',
-        currency: 'KRW',
-        maximumFractionDigits: 0
-      }).format(value);
+      return formatCurrency(value);
     }
     return value;
   };
-  return <div className="min-h-screen bg-neuro-background pb-24">
+  
+  return (
+    <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
         <header className="py-8">
@@ -100,11 +80,7 @@ const Analytics = () => {
                 <p className="text-gray-500 text-base">예산</p>
               </div>
               <p className="text-sm font-bold text-neuro-income">
-                {new Intl.NumberFormat('ko-KR', {
-                style: 'currency',
-                currency: 'KRW',
-                maximumFractionDigits: 0
-              }).format(totalBudget)}
+                {formatCurrency(totalBudget)}
               </p>
             </div>
             <div className="neuro-card">
@@ -113,11 +89,7 @@ const Analytics = () => {
                 <p className="text-gray-500 font-medium text-base">지출</p>
               </div>
               <p className="text-sm font-bold text-neuro-income">
-                {new Intl.NumberFormat('ko-KR', {
-                style: 'currency',
-                currency: 'KRW',
-                maximumFractionDigits: 0
-              }).format(totalExpense)}
+                {formatCurrency(totalExpense)}
               </p>
             </div>
             <div className="neuro-card">
@@ -138,13 +110,13 @@ const Analytics = () => {
           <div className="neuro-card h-72">
             <ResponsiveContainer width="100%" height="100%">
               <BarChart data={monthlyData} margin={{
-              top: 20,
-              right: 10,
-              left: -10,
-              bottom: 5
-            }} style={{
-              fontSize: '11px'
-            }}>
+                top: 20,
+                right: 10,
+                left: -10,
+                bottom: 5
+              }} style={{
+                fontSize: '11px'
+              }}>
                 <XAxis dataKey="name" />
                 <YAxis tickFormatter={formatYAxisTick} />
                 <Tooltip formatter={formatTooltip} />
@@ -164,32 +136,32 @@ const Analytics = () => {
         <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">
+            {expenseData.map((category, index) => (
+              <div key={category.name} className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
                   <div className="w-6 h-6 rounded-full" style={{
-                backgroundColor: category.color
-              }}></div>
+                    backgroundColor: category.color
+                  }}></div>
                   <span>{category.name}</span>
                 </div>
                 <div className="text-right">
                   <p className="font-medium">
-                    {new Intl.NumberFormat('ko-KR', {
-                  style: 'currency',
-                  currency: 'KRW',
-                  maximumFractionDigits: 0
-                }).format(category.value)}
+                    {formatCurrency(category.value)}
                   </p>
                   <p className="text-xs text-gray-500">
-                    {Math.round(category.value / totalExpense * 100)}%
+                    {totalExpense > 0 ? Math.round(category.value / totalExpense * 100) : 0}%
                   </p>
                 </div>
-              </div>)}
+              </div>
+            ))}
           </div>
         </div>
       </div>
 
       <AddTransactionButton />
       <NavBar />
-    </div>;
+    </div>
+  );
 };
-export default Analytics;
+
+export default Analytics;