diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx index 7c2cadd..8dd8183 100644 --- a/src/pages/Analytics.tsx +++ b/src/pages/Analytics.tsx @@ -1,4 +1,5 @@ -import React, { useState } from 'react'; + +import React, { useState, useEffect } from 'react'; import NavBar from '@/components/NavBar'; import ExpenseChart from '@/components/ExpenseChart'; import AddTransactionButton from '@/components/AddTransactionButton'; @@ -7,35 +8,58 @@ import { ChevronLeft, ChevronRight, Wallet, CreditCard, PiggyBank } from 'lucide import { useBudget } from '@/contexts/BudgetContext'; import { formatCurrency } from '@/utils/formatters'; import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons'; +import { MONTHS_KR } from '@/hooks/useTransactions'; 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' + category.title === '생활비' ? '#AED581' : + category.title === '교통비' ? '#2E7D32' : '#4CAF50' })); - // 최근 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 } // 현재 달은 실제 데이터 - ]; + // 최근 6개월 데이터를 위한 상태 + const [monthlyData, setMonthlyData] = useState([]); + + // 월별 데이터 생성 (실제 데이터 + 예상 데이터) + useEffect(() => { + // 현재 월 가져오기 + const today = new Date(); + const currentMonth = today.getMonth(); + + // 최근 6개월 데이터 배열 생성 + const last6Months = []; + for (let i = 5; i >= 0; i--) { + const monthIndex = (currentMonth - i + 12) % 12; // 순환적으로 이전 월 계산 + const month = MONTHS_KR[monthIndex]; // 월 이름 가져오기 + + // 현재 달은 실제 데이터 사용, 이전 달은 예상 데이터 사용 + const isCurrentMonth = i === 0; + const expense = isCurrentMonth + ? totalExpense + : totalBudget * (0.5 + Math.random() * 0.3); // 예상 데이터 (총 예산의 50~80%) + + last6Months.push({ + name: month.split(' ')[0], // '8월' 형식으로 변환 + budget: totalBudget, + expense: expense + }); + } + + setMonthlyData(last6Months); + }, [totalBudget, totalExpense]); // Custom formatter for Y-axis that removes currency symbol and uses K format const formatYAxisTick = (value: number) => { @@ -50,6 +74,17 @@ const Analytics = () => { return value; }; + // 이전/다음 기간 이동 처리 (현재는 UI만 표시) + const handlePrevPeriod = () => { + // 필요에 따라 구현 + console.log('이전 기간으로 이동'); + }; + + const handleNextPeriod = () => { + // 필요에 따라 구현 + console.log('다음 기간으로 이동'); + }; + return (
@@ -59,7 +94,10 @@ const Analytics = () => { {/* Period Selector */}
- @@ -67,7 +105,10 @@ const Analytics = () => { {selectedPeriod}
-
@@ -136,20 +177,21 @@ const Analytics = () => {

주요 지출 카테고리

- {expenseData.map((category, index) => ( -
+ {categorySpending.map((category) => ( +
- {category.name} + {category.title}

- {formatCurrency(category.value)} + {formatCurrency(category.current)}

- {totalExpense > 0 ? Math.round(category.value / totalExpense * 100) : 0}% + {totalExpense > 0 ? Math.round(category.current / totalExpense * 100) : 0}%