|
|
|
|
@@ -1,48 +1,95 @@
|
|
|
|
|
|
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
|
|
|
import { BudgetData, BudgetPeriod, Transaction } from './types';
|
|
|
|
|
import { useBudgetDataState } from './hooks/useBudgetDataState';
|
|
|
|
|
import { useCategoryBudgetState } from './hooks/useCategoryBudgetState';
|
|
|
|
|
import { useTransactionState } from './hooks/useTransactionState';
|
|
|
|
|
import { calculateCategorySpending } from './budgetUtils';
|
|
|
|
|
import { toast } from '@/hooks/useToast.wrapper';
|
|
|
|
|
import { loadCategoryBudgetsFromStorage, saveCategoryBudgetsToStorage } from './storage';
|
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
|
import { Transaction, BudgetData, BudgetPeriod, BudgetContextType } from './types';
|
|
|
|
|
import { loadTransactionsFromStorage, saveTransactionsToStorage } from './storage/transactionStorage';
|
|
|
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 예산 상태 관리를 위한 메인 훅
|
|
|
|
|
*/
|
|
|
|
|
export const useBudgetState = () => {
|
|
|
|
|
// 트랜잭션 상태 관리
|
|
|
|
|
const {
|
|
|
|
|
transactions,
|
|
|
|
|
addTransaction,
|
|
|
|
|
updateTransaction,
|
|
|
|
|
deleteTransaction
|
|
|
|
|
} = useTransactionState();
|
|
|
|
|
// 로컬 스토리지에서 초기 트랜잭션 데이터 로드
|
|
|
|
|
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
|
|
|
|
const [categoryBudgets, setCategoryBudgets] = useState<Record<string, number>>({});
|
|
|
|
|
const [budgetData, setBudgetData] = useState<BudgetData>({
|
|
|
|
|
daily: { targetAmount: 0, spentAmount: 0, remainingAmount: 0 },
|
|
|
|
|
weekly: { targetAmount: 0, spentAmount: 0, remainingAmount: 0 },
|
|
|
|
|
monthly: { targetAmount: 0, spentAmount: 0, remainingAmount: 0 },
|
|
|
|
|
});
|
|
|
|
|
const [selectedTab, setSelectedTab] = useState<BudgetPeriod>('monthly');
|
|
|
|
|
|
|
|
|
|
// 예산 데이터 상태 관리
|
|
|
|
|
const {
|
|
|
|
|
budgetData,
|
|
|
|
|
selectedTab,
|
|
|
|
|
setSelectedTab,
|
|
|
|
|
handleBudgetGoalUpdate,
|
|
|
|
|
resetBudgetData
|
|
|
|
|
} = useBudgetDataState(transactions);
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const storedTransactions = loadTransactionsFromStorage();
|
|
|
|
|
setTransactions(storedTransactions);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
// 카테고리 예산 상태 관리
|
|
|
|
|
const {
|
|
|
|
|
categoryBudgets,
|
|
|
|
|
updateCategoryBudgets,
|
|
|
|
|
resetCategoryBudgets
|
|
|
|
|
} = useCategoryBudgetState();
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// 트랜잭션 변경 시 로컬 스토리지에 저장
|
|
|
|
|
saveTransactionsToStorage(transactions);
|
|
|
|
|
}, [transactions]);
|
|
|
|
|
|
|
|
|
|
// 트랜잭션 추가
|
|
|
|
|
const addTransaction = (transaction: Transaction) => {
|
|
|
|
|
const newTransaction = { ...transaction, id: uuidv4() };
|
|
|
|
|
setTransactions(prevTransactions => [...prevTransactions, newTransaction]);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 트랜잭션 업데이트
|
|
|
|
|
const updateTransaction = (updatedTransaction: Transaction) => {
|
|
|
|
|
setTransactions(prevTransactions =>
|
|
|
|
|
prevTransactions.map(transaction =>
|
|
|
|
|
transaction.id === updatedTransaction.id ? updatedTransaction : transaction
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 트랜잭션 삭제
|
|
|
|
|
const deleteTransaction = (id: string) => {
|
|
|
|
|
setTransactions(prevTransactions =>
|
|
|
|
|
prevTransactions.filter(transaction => transaction.id !== id)
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 예산 목표 업데이트
|
|
|
|
|
const handleBudgetGoalUpdate = (type: BudgetPeriod, amount: number, newCategoryBudgets?: Record<string, number>) => {
|
|
|
|
|
setBudgetData(prev => ({
|
|
|
|
|
...prev,
|
|
|
|
|
[type]: {
|
|
|
|
|
...prev[type],
|
|
|
|
|
targetAmount: amount,
|
|
|
|
|
},
|
|
|
|
|
}));
|
|
|
|
|
if (newCategoryBudgets) {
|
|
|
|
|
setCategoryBudgets(newCategoryBudgets);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 카테고리별 지출 계산
|
|
|
|
|
const getCategorySpending = useCallback(() => {
|
|
|
|
|
return calculateCategorySpending(transactions, categoryBudgets);
|
|
|
|
|
}, [transactions, categoryBudgets]);
|
|
|
|
|
const getCategorySpending = () => {
|
|
|
|
|
const categorySpending: { [key: string]: { total: number; current: number } } = {};
|
|
|
|
|
|
|
|
|
|
// 결제 방법 통계 계산 함수 추가
|
|
|
|
|
const getPaymentMethodStats = useCallback(() => {
|
|
|
|
|
// 초기화
|
|
|
|
|
['음식', '쇼핑', '교통', '기타'].forEach(category => {
|
|
|
|
|
categorySpending[category] = { total: categoryBudgets[category] || 0, current: 0 };
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 지출 합산
|
|
|
|
|
transactions.filter(tx => tx.type === 'expense').forEach(tx => {
|
|
|
|
|
if (categorySpending[tx.category]) {
|
|
|
|
|
categorySpending[tx.category].current += tx.amount;
|
|
|
|
|
} else {
|
|
|
|
|
// 새 카테고리인 경우 초기화
|
|
|
|
|
categorySpending[tx.category] = { total: 0, current: tx.amount };
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 배열로 변환
|
|
|
|
|
return Object.entries(categorySpending).map(([title, { total, current }]) => ({
|
|
|
|
|
title,
|
|
|
|
|
total,
|
|
|
|
|
current,
|
|
|
|
|
}));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 결제 방법 통계 계산 함수
|
|
|
|
|
const getPaymentMethodStats = () => {
|
|
|
|
|
// 지출 트랜잭션 필터링
|
|
|
|
|
const expenseTransactions = transactions.filter(t => t.type === 'expense');
|
|
|
|
|
|
|
|
|
|
@@ -73,96 +120,30 @@ export const useBudgetState = () => {
|
|
|
|
|
].sort((a, b) => b.amount - a.amount);
|
|
|
|
|
|
|
|
|
|
return result;
|
|
|
|
|
}, [transactions]);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 예산 목표 업데이트 함수 (기존 함수 래핑)
|
|
|
|
|
const handleBudgetUpdate = useCallback((
|
|
|
|
|
type: BudgetPeriod,
|
|
|
|
|
amount: number,
|
|
|
|
|
newCategoryBudgets?: Record<string, number>
|
|
|
|
|
) => {
|
|
|
|
|
console.log(`예산 업데이트 시작: ${type}, 금액: ${amount}, 카테고리 예산:`, newCategoryBudgets);
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
// 금액이 유효한지 확인
|
|
|
|
|
if (isNaN(amount) || amount <= 0) {
|
|
|
|
|
console.error('유효하지 않은 예산 금액:', amount);
|
|
|
|
|
toast({
|
|
|
|
|
title: "예산 설정 오류",
|
|
|
|
|
description: "유효한 예산 금액을 입력해주세요.",
|
|
|
|
|
variant: "destructive"
|
|
|
|
|
// 예산 데이터 재설정 함수
|
|
|
|
|
const resetBudgetData = () => {
|
|
|
|
|
setBudgetData({
|
|
|
|
|
daily: { targetAmount: 0, spentAmount: 0, remainingAmount: 0 },
|
|
|
|
|
weekly: { targetAmount: 0, spentAmount: 0, remainingAmount: 0 },
|
|
|
|
|
monthly: { targetAmount: 0, spentAmount: 0, remainingAmount: 0 },
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 카테고리 예산이 제공된 경우
|
|
|
|
|
if (newCategoryBudgets) {
|
|
|
|
|
console.log('카테고리 예산도 함께 업데이트:', newCategoryBudgets);
|
|
|
|
|
|
|
|
|
|
// 카테고리 예산의 합계 검증 - 가져온 totalBudget과 카테고리 총합이 같아야 함
|
|
|
|
|
const categoryTotal = Object.values(newCategoryBudgets).reduce((sum, val) => sum + val, 0);
|
|
|
|
|
console.log(`카테고리 예산 합계: ${categoryTotal}, 입력 금액: ${amount}`);
|
|
|
|
|
|
|
|
|
|
// 금액이 카테고리 합계와 다르면 로그 기록 (허용 오차 ±10)
|
|
|
|
|
if (Math.abs(categoryTotal - amount) > 10) {
|
|
|
|
|
console.warn('카테고리 예산 합계와 총 예산이 일치하지 않음 - 카테고리 합계를 사용함');
|
|
|
|
|
// 카테고리 합계를 기준으로 예산 설정
|
|
|
|
|
amount = categoryTotal;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 카테고리 예산 저장
|
|
|
|
|
updateCategoryBudgets(newCategoryBudgets);
|
|
|
|
|
saveCategoryBudgetsToStorage(newCategoryBudgets);
|
|
|
|
|
console.log('카테고리 예산 저장 완료');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 항상 월간 타입으로 예산 업데이트 (BudgetTabContent에서는 항상 월간 예산을 전달)
|
|
|
|
|
handleBudgetGoalUpdate('monthly', amount);
|
|
|
|
|
console.log('예산 데이터 업데이트 완료');
|
|
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('예산 업데이트 오류:', error);
|
|
|
|
|
toast({
|
|
|
|
|
title: "예산 업데이트 실패",
|
|
|
|
|
description: "예산 설정 중 오류가 발생했습니다.",
|
|
|
|
|
variant: "destructive"
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, [handleBudgetGoalUpdate, updateCategoryBudgets]);
|
|
|
|
|
|
|
|
|
|
// 모든 데이터 초기화
|
|
|
|
|
const resetAllData = useCallback(() => {
|
|
|
|
|
resetBudgetData?.();
|
|
|
|
|
resetCategoryBudgets();
|
|
|
|
|
}, [resetBudgetData, resetCategoryBudgets]);
|
|
|
|
|
|
|
|
|
|
// 상태 디버깅 (개발 시 유용)
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
console.log('BudgetState 훅 - 현재 상태:');
|
|
|
|
|
console.log('- 예산 데이터:', budgetData);
|
|
|
|
|
console.log('- 카테고리 예산:', categoryBudgets);
|
|
|
|
|
console.log('- 트랜잭션 수:', transactions.length);
|
|
|
|
|
}, [budgetData, categoryBudgets, transactions.length]);
|
|
|
|
|
setCategoryBudgets({});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
// 데이터
|
|
|
|
|
transactions,
|
|
|
|
|
budgetData,
|
|
|
|
|
categoryBudgets,
|
|
|
|
|
budgetData,
|
|
|
|
|
selectedTab,
|
|
|
|
|
|
|
|
|
|
// 상태 변경 함수
|
|
|
|
|
setSelectedTab,
|
|
|
|
|
addTransaction,
|
|
|
|
|
updateTransaction,
|
|
|
|
|
deleteTransaction,
|
|
|
|
|
handleBudgetGoalUpdate: handleBudgetUpdate, // 래핑된 함수 사용
|
|
|
|
|
|
|
|
|
|
// 도우미 함수
|
|
|
|
|
handleBudgetGoalUpdate,
|
|
|
|
|
getCategorySpending,
|
|
|
|
|
getPaymentMethodStats, // 여기에 추가
|
|
|
|
|
|
|
|
|
|
// 데이터 초기화
|
|
|
|
|
resetBudgetData: resetAllData
|
|
|
|
|
getPaymentMethodStats,
|
|
|
|
|
resetBudgetData,
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|