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.
2025-03-15 11:06:23 +00:00
parent 81a950a96c
commit 6e02282383
2 changed files with 103 additions and 125 deletions
--- a/src/pages/Analytics.tsx
+++ b/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;
--- a/src/pages/Transactions.tsx
+++ b/src/pages/Transactions.tsx
@@ -1,45 +1,59 @@

-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import NavBar from '@/components/NavBar';
 import TransactionCard from '@/components/TransactionCard';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { Calendar, Search, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
-import { useTransactions } from '@/hooks/useTransactions';
 import { formatCurrency } from '@/utils/formatters';
+import { useBudget } from '@/contexts/BudgetContext';
+import { MONTHS_KR, getCurrentMonth, getPrevMonth, getNextMonth } from '@/utils/dateUtils';

 const Transactions = () => {
-  const {
-    transactions,
-    isLoading,
-    error,
-    totalBudget,
-    selectedMonth,
-    searchQuery,
-    setSearchQuery,
-    handlePrevMonth,
-    handleNextMonth,
-    updateTransaction,
-    totalExpenses,
-    refreshTransactions
-  } = useTransactions();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedMonth, setSelectedMonth] = useState(getCurrentMonth());
+  const [isLoading, setIsLoading] = useState(false);
+  const [filteredTransactions, setFilteredTransactions] = useState<any[]>([]);
+  
+  const { 
+    transactions, 
+    budgetData, 
+    updateTransaction
+  } = useBudget();

-  // 페이지 진입/초점 시 새로고침
+  // 월 변경 처리
+  const handlePrevMonth = () => {
+    setSelectedMonth(getPrevMonth(selectedMonth));
+  };
+
+  const handleNextMonth = () => {
+    setSelectedMonth(getNextMonth(selectedMonth));
+  };
+
+  // 트랜잭션 필터링
  useEffect(() => {
-    const handleFocus = () => {
-      refreshTransactions();
-    };
+    setIsLoading(true);
    
-    window.addEventListener('focus', handleFocus);
+    // 해당 월의 트랜잭션만 필터링
+    let filtered = transactions.filter(t => {
+      return t.date.includes(selectedMonth);
+    });
    
-    return () => {
-      window.removeEventListener('focus', handleFocus);
-    };
-  }, [refreshTransactions]);
+    // 검색어로 필터링
+    if (searchQuery.trim()) {
+      filtered = filtered.filter(t => 
+        t.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        t.category.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+    
+    setFilteredTransactions(filtered);
+    setIsLoading(false);
+  }, [transactions, selectedMonth, searchQuery]);

  // 트랜잭션을 날짜별로 그룹화
-  const groupedTransactions: Record<string, typeof transactions> = {};
+  const groupedTransactions: Record<string, typeof filteredTransactions> = {};
  
-  transactions.forEach(transaction => {
+  filteredTransactions.forEach(transaction => {
    const datePart = transaction.date.split(',')[0];
    if (!groupedTransactions[datePart]) {
      groupedTransactions[datePart] = [];
@@ -47,6 +61,11 @@ const Transactions = () => {
    groupedTransactions[datePart].push(transaction);
  });

+  // 총 지출 계산
+  const totalExpenses = filteredTransactions
+    .filter(t => t.type === 'expense')
+    .reduce((sum, t) => sum + t.amount, 0);
+
  return (
    <div className="min-h-screen bg-neuro-background pb-24">
      <div className="max-w-md mx-auto px-6">
@@ -93,7 +112,7 @@ const Transactions = () => {
            <div className="neuro-card">
              <p className="text-sm text-gray-500 mb-1">총 예산</p>
              <p className="text-lg font-bold text-neuro-income">
-                {formatCurrency(totalBudget)}
+                {formatCurrency(budgetData.monthly.targetAmount)}
              </p>
            </div>
            <div className="neuro-card">
@@ -113,21 +132,8 @@ const Transactions = () => {
          </div>
        )}

-        {/* Error State */}
-        {error && (
-          <div className="neuro-card p-4 text-red-500 mb-6">
-            <p>{error}</p>
-            <button 
-              className="text-neuro-income mt-2"
-              onClick={refreshTransactions}
-            >
-              다시 시도
-            </button>
-          </div>
-        )}
-
        {/* Empty State */}
-        {!isLoading && !error && transactions.length === 0 && (
+        {!isLoading && filteredTransactions.length === 0 && (
          <div className="text-center py-10">
            <p className="text-gray-500 mb-3">
              {searchQuery.trim() 
@@ -146,7 +152,7 @@ const Transactions = () => {
        )}

        {/* Transactions By Date */}
-        {!isLoading && !error && (
+        {!isLoading && filteredTransactions.length > 0 && (
          <div className="space-y-6">
            {Object.entries(groupedTransactions).map(([date, transactions]) => (
              <div key={date}>