Refactor BudgetContext file
Refactor BudgetContext.tsx into smaller components and hooks to improve code readability and maintainability.
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,325 +1,5 @@
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
||||
import { Transaction } from '@/components/TransactionCard';
|
||||
import { DEFAULT_CATEGORY_BUDGETS, DEFAULT_MONTHLY_BUDGET, EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
|
||||
import { toast } from '@/components/ui/use-toast';
|
||||
import { BudgetProvider, useBudget } from './budget';
|
||||
|
||||
// 예산 데이터 타입 정의
|
||||
export type BudgetPeriod = 'daily' | 'weekly' | 'monthly';
|
||||
|
||||
export interface BudgetPeriodData {
|
||||
targetAmount: number;
|
||||
spentAmount: number;
|
||||
remainingAmount: number;
|
||||
}
|
||||
|
||||
export interface BudgetData {
|
||||
daily: BudgetPeriodData;
|
||||
weekly: BudgetPeriodData;
|
||||
monthly: BudgetPeriodData;
|
||||
}
|
||||
|
||||
export interface CategoryBudget {
|
||||
title: string;
|
||||
current: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
// Context 타입 정의
|
||||
interface BudgetContextType {
|
||||
transactions: Transaction[];
|
||||
categoryBudgets: Record<string, number>;
|
||||
budgetData: BudgetData;
|
||||
selectedTab: BudgetPeriod;
|
||||
setSelectedTab: (tab: BudgetPeriod) => void;
|
||||
updateTransaction: (updatedTransaction: Transaction) => void;
|
||||
handleBudgetGoalUpdate: (type: BudgetPeriod, amount: number, newCategoryBudgets?: Record<string, number>) => void;
|
||||
getCategorySpending: () => CategoryBudget[];
|
||||
}
|
||||
|
||||
// Context 생성
|
||||
const BudgetContext = createContext<BudgetContextType | undefined>(undefined);
|
||||
|
||||
// Context Provider 컴포넌트
|
||||
export const BudgetProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
|
||||
const [selectedTab, setSelectedTab] = useState<BudgetPeriod>("daily");
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [categoryBudgets, setCategoryBudgets] = useState<Record<string, number>>(DEFAULT_CATEGORY_BUDGETS);
|
||||
const [budgetData, setBudgetData] = useState<BudgetData>({
|
||||
daily: {
|
||||
targetAmount: Math.round(DEFAULT_MONTHLY_BUDGET / 30),
|
||||
spentAmount: 0,
|
||||
remainingAmount: Math.round(DEFAULT_MONTHLY_BUDGET / 30)
|
||||
},
|
||||
weekly: {
|
||||
targetAmount: Math.round(DEFAULT_MONTHLY_BUDGET / 4.3),
|
||||
spentAmount: 0,
|
||||
remainingAmount: Math.round(DEFAULT_MONTHLY_BUDGET / 4.3)
|
||||
},
|
||||
monthly: {
|
||||
targetAmount: DEFAULT_MONTHLY_BUDGET,
|
||||
spentAmount: 0,
|
||||
remainingAmount: DEFAULT_MONTHLY_BUDGET
|
||||
}
|
||||
});
|
||||
|
||||
// 로컬 스토리지에서 거래 내역을 불러옵니다
|
||||
useEffect(() => {
|
||||
const loadTransactions = () => {
|
||||
const storedTransactions = localStorage.getItem('transactions');
|
||||
if (storedTransactions) {
|
||||
setTransactions(JSON.parse(storedTransactions));
|
||||
}
|
||||
};
|
||||
|
||||
const loadBudgets = () => {
|
||||
const storedCategoryBudgets = localStorage.getItem('categoryBudgets');
|
||||
if (storedCategoryBudgets) {
|
||||
setCategoryBudgets(JSON.parse(storedCategoryBudgets));
|
||||
} else {
|
||||
localStorage.setItem('categoryBudgets', JSON.stringify(DEFAULT_CATEGORY_BUDGETS));
|
||||
}
|
||||
|
||||
const storedBudgetData = localStorage.getItem('budgetData');
|
||||
if (storedBudgetData) {
|
||||
setBudgetData(JSON.parse(storedBudgetData));
|
||||
} else {
|
||||
localStorage.setItem('budgetData', JSON.stringify(budgetData));
|
||||
}
|
||||
};
|
||||
|
||||
loadTransactions();
|
||||
loadBudgets();
|
||||
|
||||
// 지출 내역이 변경될 때마다 업데이트되도록 이벤트 리스너를 추가합니다
|
||||
window.addEventListener('storage', loadTransactions);
|
||||
return () => {
|
||||
window.removeEventListener('storage', loadTransactions);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 거래 내역이 업데이트될 때마다 지출액을 다시 계산합니다
|
||||
useEffect(() => {
|
||||
const calculateSpentAmounts = () => {
|
||||
// 오늘 날짜의 지출만 필터링
|
||||
const today = new Date();
|
||||
const todayString = today.toLocaleDateString();
|
||||
|
||||
// 지출 거래 필터링
|
||||
const expenseTransactions = transactions.filter(t => t.type === 'expense');
|
||||
|
||||
// 오늘 지출 계산
|
||||
const todayExpenses = expenseTransactions.filter(t => {
|
||||
if (t.date.includes('오늘')) return true;
|
||||
return false;
|
||||
});
|
||||
const dailySpent = todayExpenses.reduce((sum, t) => sum + t.amount, 0);
|
||||
|
||||
// 이번 주 지출 계산 (지난 7일)
|
||||
const weekStart = new Date();
|
||||
weekStart.setDate(today.getDate() - 7);
|
||||
const weeklyExpenses = expenseTransactions.filter(t => {
|
||||
// 간단하게 '오늘'이나 '어제'가 포함된 거래는 이번 주로 간주
|
||||
if (t.date.includes('오늘') || t.date.includes('어제')) return true;
|
||||
// 그 외에는 이번 달의 거래로 간주 (실제로는 날짜를 제대로 파싱해야 함)
|
||||
return true;
|
||||
});
|
||||
const weeklySpent = weeklyExpenses.reduce((sum, t) => sum + t.amount, 0);
|
||||
|
||||
// 이번 달 총 지출 계산
|
||||
const monthlySpent = expenseTransactions.reduce((sum, t) => sum + t.amount, 0);
|
||||
|
||||
// 예산 데이터 업데이트
|
||||
setBudgetData(prev => {
|
||||
const updatedBudgetData = {
|
||||
daily: {
|
||||
...prev.daily,
|
||||
spentAmount: dailySpent,
|
||||
remainingAmount: Math.max(0, prev.daily.targetAmount - dailySpent)
|
||||
},
|
||||
weekly: {
|
||||
...prev.weekly,
|
||||
spentAmount: weeklySpent,
|
||||
remainingAmount: Math.max(0, prev.weekly.targetAmount - weeklySpent)
|
||||
},
|
||||
monthly: {
|
||||
...prev.monthly,
|
||||
spentAmount: monthlySpent,
|
||||
remainingAmount: Math.max(0, prev.monthly.targetAmount - monthlySpent)
|
||||
}
|
||||
};
|
||||
|
||||
// 업데이트된 예산 데이터 저장
|
||||
localStorage.setItem('budgetData', JSON.stringify(updatedBudgetData));
|
||||
return updatedBudgetData;
|
||||
});
|
||||
};
|
||||
|
||||
calculateSpentAmounts();
|
||||
}, [transactions]);
|
||||
|
||||
// 카테고리별 예산 및 지출 계산
|
||||
useEffect(() => {
|
||||
const totalMonthlyBudget = Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0);
|
||||
const totalDailyBudget = Math.round(totalMonthlyBudget / 30);
|
||||
const totalWeeklyBudget = Math.round(totalMonthlyBudget / 4.3);
|
||||
|
||||
setBudgetData(prev => {
|
||||
const updatedBudgetData = {
|
||||
daily: {
|
||||
targetAmount: totalDailyBudget,
|
||||
spentAmount: prev.daily.spentAmount,
|
||||
remainingAmount: totalDailyBudget - prev.daily.spentAmount
|
||||
},
|
||||
weekly: {
|
||||
targetAmount: totalWeeklyBudget,
|
||||
spentAmount: prev.weekly.spentAmount,
|
||||
remainingAmount: totalWeeklyBudget - prev.weekly.spentAmount
|
||||
},
|
||||
monthly: {
|
||||
targetAmount: totalMonthlyBudget,
|
||||
spentAmount: prev.monthly.spentAmount,
|
||||
remainingAmount: totalMonthlyBudget - prev.monthly.spentAmount
|
||||
}
|
||||
};
|
||||
|
||||
// 업데이트된 예산 데이터 저장
|
||||
localStorage.setItem('budgetData', JSON.stringify(updatedBudgetData));
|
||||
return updatedBudgetData;
|
||||
});
|
||||
|
||||
// 카테고리 예산 저장
|
||||
localStorage.setItem('categoryBudgets', JSON.stringify(categoryBudgets));
|
||||
}, [categoryBudgets]);
|
||||
|
||||
// 카테고리별 지출 계산
|
||||
const getCategorySpending = () => {
|
||||
const expenseTransactions = transactions.filter(t => t.type === 'expense');
|
||||
const categorySpending: Record<string, number> = {};
|
||||
|
||||
// 모든 카테고리에 대해 초기값 0 설정
|
||||
EXPENSE_CATEGORIES.forEach(category => {
|
||||
categorySpending[category] = 0;
|
||||
});
|
||||
|
||||
expenseTransactions.forEach(t => {
|
||||
if (t.category in categorySpending) {
|
||||
categorySpending[t.category] += t.amount;
|
||||
}
|
||||
});
|
||||
|
||||
return Object.keys(categoryBudgets).map(category => ({
|
||||
title: category,
|
||||
current: categorySpending[category] || 0,
|
||||
total: categoryBudgets[category]
|
||||
}));
|
||||
};
|
||||
|
||||
// 예산 목표 업데이트 함수
|
||||
const handleBudgetGoalUpdate = (type: BudgetPeriod, amount: number, newCategoryBudgets?: Record<string, number>) => {
|
||||
// 카테고리 예산이 직접 업데이트된 경우
|
||||
if (newCategoryBudgets) {
|
||||
setCategoryBudgets(newCategoryBudgets);
|
||||
return; // 카테고리 예산이 변경되면 useEffect에서 자동으로 budgetData가 업데이트됩니다
|
||||
}
|
||||
|
||||
// 월간 예산을 업데이트하고 일일, 주간도 자동 계산
|
||||
if (type === 'monthly') {
|
||||
const dailyAmount = Math.round(amount / 30);
|
||||
const weeklyAmount = Math.round(amount / 4.3);
|
||||
|
||||
// 월간 총 예산이 변경되면 카테고리별 예산도 비례하여 조정
|
||||
const ratio = amount / budgetData.monthly.targetAmount;
|
||||
const updatedCategoryBudgets: Record<string, number> = {};
|
||||
|
||||
Object.keys(categoryBudgets).forEach(category => {
|
||||
updatedCategoryBudgets[category] = Math.round(categoryBudgets[category] * ratio);
|
||||
});
|
||||
|
||||
setCategoryBudgets(updatedCategoryBudgets);
|
||||
|
||||
setBudgetData(prev => {
|
||||
const updatedBudgetData = {
|
||||
daily: {
|
||||
targetAmount: dailyAmount,
|
||||
spentAmount: prev.daily.spentAmount,
|
||||
remainingAmount: Math.max(0, dailyAmount - prev.daily.spentAmount)
|
||||
},
|
||||
weekly: {
|
||||
targetAmount: weeklyAmount,
|
||||
spentAmount: prev.weekly.spentAmount,
|
||||
remainingAmount: Math.max(0, weeklyAmount - prev.weekly.spentAmount)
|
||||
},
|
||||
monthly: {
|
||||
targetAmount: amount,
|
||||
spentAmount: prev.monthly.spentAmount,
|
||||
remainingAmount: Math.max(0, amount - prev.monthly.spentAmount)
|
||||
}
|
||||
};
|
||||
|
||||
// 업데이트된 예산 데이터 저장
|
||||
localStorage.setItem('budgetData', JSON.stringify(updatedBudgetData));
|
||||
return updatedBudgetData;
|
||||
});
|
||||
} else {
|
||||
// 일일이나 주간 예산이 직접 업데이트되는 경우
|
||||
setBudgetData(prev => {
|
||||
const remainingAmount = Math.max(0, amount - prev[type].spentAmount);
|
||||
const updatedBudgetData = {
|
||||
...prev,
|
||||
[type]: {
|
||||
...prev[type],
|
||||
targetAmount: amount,
|
||||
remainingAmount: remainingAmount
|
||||
}
|
||||
};
|
||||
|
||||
// 업데이트된 예산 데이터 저장
|
||||
localStorage.setItem('budgetData', JSON.stringify(updatedBudgetData));
|
||||
return updatedBudgetData;
|
||||
});
|
||||
}
|
||||
|
||||
toast({
|
||||
title: "목표 업데이트 완료",
|
||||
description: `${type === 'daily' ? '일일' : type === 'weekly' ? '주간' : '월간'} 목표가 ${amount.toLocaleString()}원으로 설정되었습니다.`
|
||||
});
|
||||
};
|
||||
|
||||
// 트랜잭션 업데이트 처리
|
||||
const updateTransaction = (updatedTransaction: Transaction) => {
|
||||
setTransactions(prev => {
|
||||
const updated = prev.map(transaction =>
|
||||
transaction.id === updatedTransaction.id ? updatedTransaction : transaction
|
||||
);
|
||||
localStorage.setItem('transactions', JSON.stringify(updated));
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
const contextValue: BudgetContextType = {
|
||||
transactions,
|
||||
categoryBudgets,
|
||||
budgetData,
|
||||
selectedTab,
|
||||
setSelectedTab,
|
||||
updateTransaction,
|
||||
handleBudgetGoalUpdate,
|
||||
getCategorySpending
|
||||
};
|
||||
|
||||
return (
|
||||
<BudgetContext.Provider value={contextValue}>
|
||||
{children}
|
||||
</BudgetContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
// Context 사용을 위한 Hook
|
||||
export const useBudget = () => {
|
||||
const context = useContext(BudgetContext);
|
||||
if (!context) {
|
||||
throw new Error('useBudget must be used within a BudgetProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
export { BudgetProvider, useBudget };
|
||||
export type { BudgetPeriod } from './budget';
|
||||
|
||||
27
src/contexts/budget/BudgetContext.tsx
Normal file
27
src/contexts/budget/BudgetContext.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
|
||||
import React, { createContext, useContext, ReactNode } from 'react';
|
||||
import { BudgetContextType } from './types';
|
||||
import { useBudgetState } from './useBudgetState';
|
||||
|
||||
// Context 생성
|
||||
const BudgetContext = createContext<BudgetContextType | undefined>(undefined);
|
||||
|
||||
// Context Provider 컴포넌트
|
||||
export const BudgetProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
|
||||
const budgetState = useBudgetState();
|
||||
|
||||
return (
|
||||
<BudgetContext.Provider value={budgetState}>
|
||||
{children}
|
||||
</BudgetContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
// Context 사용을 위한 Hook
|
||||
export const useBudget = () => {
|
||||
const context = useContext(BudgetContext);
|
||||
if (!context) {
|
||||
throw new Error('useBudget must be used within a BudgetProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
144
src/contexts/budget/budgetUtils.ts
Normal file
144
src/contexts/budget/budgetUtils.ts
Normal file
@@ -0,0 +1,144 @@
|
||||
|
||||
import { BudgetData, BudgetPeriod, CategoryBudget, Transaction } from './types';
|
||||
import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
|
||||
|
||||
// 기본 데이터 상수
|
||||
export const DEFAULT_CATEGORY_BUDGETS: Record<string, number> = {
|
||||
식비: 400000,
|
||||
생활비: 600000,
|
||||
교통비: 200000
|
||||
};
|
||||
|
||||
export const DEFAULT_MONTHLY_BUDGET = 1200000;
|
||||
|
||||
// 카테고리별 지출 계산
|
||||
export const calculateCategorySpending = (
|
||||
transactions: Transaction[],
|
||||
categoryBudgets: Record<string, number>
|
||||
): CategoryBudget[] => {
|
||||
const expenseTransactions = transactions.filter(t => t.type === 'expense');
|
||||
const categorySpending: Record<string, number> = {};
|
||||
|
||||
// 모든 카테고리에 대해 초기값 0 설정
|
||||
Object.keys(categoryBudgets).forEach(category => {
|
||||
categorySpending[category] = 0;
|
||||
});
|
||||
|
||||
expenseTransactions.forEach(t => {
|
||||
if (t.category in categorySpending) {
|
||||
categorySpending[t.category] += t.amount;
|
||||
}
|
||||
});
|
||||
|
||||
return Object.keys(categoryBudgets).map(category => ({
|
||||
title: category,
|
||||
current: categorySpending[category] || 0,
|
||||
total: categoryBudgets[category]
|
||||
}));
|
||||
};
|
||||
|
||||
// 예산 데이터 업데이트 계산
|
||||
export const calculateUpdatedBudgetData = (
|
||||
prevBudgetData: BudgetData,
|
||||
type: BudgetPeriod,
|
||||
amount: number
|
||||
): BudgetData => {
|
||||
if (type === 'monthly') {
|
||||
const dailyAmount = Math.round(amount / 30);
|
||||
const weeklyAmount = Math.round(amount / 4.3);
|
||||
|
||||
return {
|
||||
daily: {
|
||||
targetAmount: dailyAmount,
|
||||
spentAmount: prevBudgetData.daily.spentAmount,
|
||||
remainingAmount: Math.max(0, dailyAmount - prevBudgetData.daily.spentAmount)
|
||||
},
|
||||
weekly: {
|
||||
targetAmount: weeklyAmount,
|
||||
spentAmount: prevBudgetData.weekly.spentAmount,
|
||||
remainingAmount: Math.max(0, weeklyAmount - prevBudgetData.weekly.spentAmount)
|
||||
},
|
||||
monthly: {
|
||||
targetAmount: amount,
|
||||
spentAmount: prevBudgetData.monthly.spentAmount,
|
||||
remainingAmount: Math.max(0, amount - prevBudgetData.monthly.spentAmount)
|
||||
}
|
||||
};
|
||||
} else {
|
||||
const remainingAmount = Math.max(0, amount - prevBudgetData[type].spentAmount);
|
||||
return {
|
||||
...prevBudgetData,
|
||||
[type]: {
|
||||
...prevBudgetData[type],
|
||||
targetAmount: amount,
|
||||
remainingAmount: remainingAmount
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// 지출액 계산 (일일, 주간, 월간)
|
||||
export const calculateSpentAmounts = (
|
||||
transactions: Transaction[],
|
||||
prevBudgetData: BudgetData
|
||||
): BudgetData => {
|
||||
// 지출 거래 필터링
|
||||
const expenseTransactions = transactions.filter(t => t.type === 'expense');
|
||||
|
||||
// 오늘 지출 계산
|
||||
const todayExpenses = expenseTransactions.filter(t => {
|
||||
if (t.date.includes('오늘')) return true;
|
||||
return false;
|
||||
});
|
||||
const dailySpent = todayExpenses.reduce((sum, t) => sum + t.amount, 0);
|
||||
|
||||
// 이번 주 지출 계산 (단순화된 버전)
|
||||
const weeklyExpenses = expenseTransactions.filter(t => {
|
||||
if (t.date.includes('오늘') || t.date.includes('어제')) return true;
|
||||
return true;
|
||||
});
|
||||
const weeklySpent = weeklyExpenses.reduce((sum, t) => sum + t.amount, 0);
|
||||
|
||||
// 이번 달 총 지출 계산
|
||||
const monthlySpent = expenseTransactions.reduce((sum, t) => sum + t.amount, 0);
|
||||
|
||||
// 예산 데이터 업데이트
|
||||
return {
|
||||
daily: {
|
||||
...prevBudgetData.daily,
|
||||
spentAmount: dailySpent,
|
||||
remainingAmount: Math.max(0, prevBudgetData.daily.targetAmount - dailySpent)
|
||||
},
|
||||
weekly: {
|
||||
...prevBudgetData.weekly,
|
||||
spentAmount: weeklySpent,
|
||||
remainingAmount: Math.max(0, prevBudgetData.weekly.targetAmount - weeklySpent)
|
||||
},
|
||||
monthly: {
|
||||
...prevBudgetData.monthly,
|
||||
spentAmount: monthlySpent,
|
||||
remainingAmount: Math.max(0, prevBudgetData.monthly.targetAmount - monthlySpent)
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 초기 예산 데이터 생성
|
||||
export const getInitialBudgetData = (): BudgetData => {
|
||||
return {
|
||||
daily: {
|
||||
targetAmount: Math.round(DEFAULT_MONTHLY_BUDGET / 30),
|
||||
spentAmount: 0,
|
||||
remainingAmount: Math.round(DEFAULT_MONTHLY_BUDGET / 30)
|
||||
},
|
||||
weekly: {
|
||||
targetAmount: Math.round(DEFAULT_MONTHLY_BUDGET / 4.3),
|
||||
spentAmount: 0,
|
||||
remainingAmount: Math.round(DEFAULT_MONTHLY_BUDGET / 4.3)
|
||||
},
|
||||
monthly: {
|
||||
targetAmount: DEFAULT_MONTHLY_BUDGET,
|
||||
spentAmount: 0,
|
||||
remainingAmount: DEFAULT_MONTHLY_BUDGET
|
||||
}
|
||||
};
|
||||
};
|
||||
4
src/contexts/budget/index.ts
Normal file
4
src/contexts/budget/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
export * from './types';
|
||||
export * from './BudgetContext';
|
||||
export * from './budgetUtils';
|
||||
45
src/contexts/budget/storageUtils.ts
Normal file
45
src/contexts/budget/storageUtils.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
|
||||
import { BudgetData, Transaction } from './types';
|
||||
import { DEFAULT_CATEGORY_BUDGETS, getInitialBudgetData } from './budgetUtils';
|
||||
|
||||
// 로컬 스토리지에서 트랜잭션 불러오기
|
||||
export const loadTransactionsFromStorage = (): Transaction[] => {
|
||||
const storedTransactions = localStorage.getItem('transactions');
|
||||
if (storedTransactions) {
|
||||
return JSON.parse(storedTransactions);
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
// 트랜잭션 저장
|
||||
export const saveTransactionsToStorage = (transactions: Transaction[]): void => {
|
||||
localStorage.setItem('transactions', JSON.stringify(transactions));
|
||||
};
|
||||
|
||||
// 카테고리 예산 불러오기
|
||||
export const loadCategoryBudgetsFromStorage = (): Record<string, number> => {
|
||||
const storedCategoryBudgets = localStorage.getItem('categoryBudgets');
|
||||
if (storedCategoryBudgets) {
|
||||
return JSON.parse(storedCategoryBudgets);
|
||||
}
|
||||
return DEFAULT_CATEGORY_BUDGETS;
|
||||
};
|
||||
|
||||
// 카테고리 예산 저장
|
||||
export const saveCategoryBudgetsToStorage = (categoryBudgets: Record<string, number>): void => {
|
||||
localStorage.setItem('categoryBudgets', JSON.stringify(categoryBudgets));
|
||||
};
|
||||
|
||||
// 예산 데이터 불러오기
|
||||
export const loadBudgetDataFromStorage = (): BudgetData => {
|
||||
const storedBudgetData = localStorage.getItem('budgetData');
|
||||
if (storedBudgetData) {
|
||||
return JSON.parse(storedBudgetData);
|
||||
}
|
||||
return getInitialBudgetData();
|
||||
};
|
||||
|
||||
// 예산 데이터 저장
|
||||
export const saveBudgetDataToStorage = (budgetData: BudgetData): void => {
|
||||
localStorage.setItem('budgetData', JSON.stringify(budgetData));
|
||||
};
|
||||
43
src/contexts/budget/types.ts
Normal file
43
src/contexts/budget/types.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
|
||||
// 예산 관련 타입 정의
|
||||
export type BudgetPeriod = 'daily' | 'weekly' | 'monthly';
|
||||
|
||||
export interface BudgetPeriodData {
|
||||
targetAmount: number;
|
||||
spentAmount: number;
|
||||
remainingAmount: number;
|
||||
}
|
||||
|
||||
export interface BudgetData {
|
||||
daily: BudgetPeriodData;
|
||||
weekly: BudgetPeriodData;
|
||||
monthly: BudgetPeriodData;
|
||||
}
|
||||
|
||||
export interface CategoryBudget {
|
||||
title: string;
|
||||
current: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
// BudgetContext 타입 정의
|
||||
export interface BudgetContextType {
|
||||
transactions: Transaction[];
|
||||
categoryBudgets: Record<string, number>;
|
||||
budgetData: BudgetData;
|
||||
selectedTab: BudgetPeriod;
|
||||
setSelectedTab: (tab: BudgetPeriod) => void;
|
||||
updateTransaction: (updatedTransaction: Transaction) => void;
|
||||
handleBudgetGoalUpdate: (type: BudgetPeriod, amount: number, newCategoryBudgets?: Record<string, number>) => void;
|
||||
getCategorySpending: () => CategoryBudget[];
|
||||
}
|
||||
|
||||
// Transaction 타입 (기존 TransactionCard에서 가져옴)
|
||||
export interface Transaction {
|
||||
id: string;
|
||||
title: string;
|
||||
amount: number;
|
||||
date: string;
|
||||
category: string;
|
||||
type: 'income' | 'expense';
|
||||
}
|
||||
138
src/contexts/budget/useBudgetState.ts
Normal file
138
src/contexts/budget/useBudgetState.ts
Normal file
@@ -0,0 +1,138 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { BudgetData, BudgetPeriod, Transaction } from './types';
|
||||
import { toast } from '@/components/ui/use-toast';
|
||||
import {
|
||||
loadTransactionsFromStorage,
|
||||
saveTransactionsToStorage,
|
||||
loadCategoryBudgetsFromStorage,
|
||||
saveCategoryBudgetsToStorage,
|
||||
loadBudgetDataFromStorage,
|
||||
saveBudgetDataToStorage
|
||||
} from './storageUtils';
|
||||
import {
|
||||
calculateCategorySpending,
|
||||
calculateSpentAmounts,
|
||||
calculateUpdatedBudgetData
|
||||
} from './budgetUtils';
|
||||
|
||||
export const useBudgetState = () => {
|
||||
// 상태 초기화
|
||||
const [selectedTab, setSelectedTab] = useState<BudgetPeriod>("daily");
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [categoryBudgets, setCategoryBudgets] = useState<Record<string, number>>(loadCategoryBudgetsFromStorage());
|
||||
const [budgetData, setBudgetData] = useState<BudgetData>(loadBudgetDataFromStorage());
|
||||
|
||||
// 트랜잭션 로드
|
||||
useEffect(() => {
|
||||
const loadTransactions = () => {
|
||||
const storedTransactions = loadTransactionsFromStorage();
|
||||
setTransactions(storedTransactions);
|
||||
};
|
||||
|
||||
loadTransactions();
|
||||
|
||||
// 지출 내역이 변경될 때마다 업데이트되도록 이벤트 리스너를 추가합니다
|
||||
window.addEventListener('storage', loadTransactions);
|
||||
return () => {
|
||||
window.removeEventListener('storage', loadTransactions);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 지출 계산 및 업데이트
|
||||
useEffect(() => {
|
||||
const updatedBudgetData = calculateSpentAmounts(transactions, budgetData);
|
||||
setBudgetData(updatedBudgetData);
|
||||
saveBudgetDataToStorage(updatedBudgetData);
|
||||
}, [transactions]);
|
||||
|
||||
// 카테고리별 예산 및 지출 계산
|
||||
useEffect(() => {
|
||||
const totalMonthlyBudget = Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0);
|
||||
const totalDailyBudget = Math.round(totalMonthlyBudget / 30);
|
||||
const totalWeeklyBudget = Math.round(totalMonthlyBudget / 4.3);
|
||||
|
||||
setBudgetData(prev => {
|
||||
const updatedBudgetData = {
|
||||
daily: {
|
||||
targetAmount: totalDailyBudget,
|
||||
spentAmount: prev.daily.spentAmount,
|
||||
remainingAmount: totalDailyBudget - prev.daily.spentAmount
|
||||
},
|
||||
weekly: {
|
||||
targetAmount: totalWeeklyBudget,
|
||||
spentAmount: prev.weekly.spentAmount,
|
||||
remainingAmount: totalWeeklyBudget - prev.weekly.spentAmount
|
||||
},
|
||||
monthly: {
|
||||
targetAmount: totalMonthlyBudget,
|
||||
spentAmount: prev.monthly.spentAmount,
|
||||
remainingAmount: totalMonthlyBudget - prev.monthly.spentAmount
|
||||
}
|
||||
};
|
||||
|
||||
saveBudgetDataToStorage(updatedBudgetData);
|
||||
return updatedBudgetData;
|
||||
});
|
||||
|
||||
saveCategoryBudgetsToStorage(categoryBudgets);
|
||||
}, [categoryBudgets]);
|
||||
|
||||
// 카테고리별 지출 계산
|
||||
const getCategorySpending = () => {
|
||||
return calculateCategorySpending(transactions, categoryBudgets);
|
||||
};
|
||||
|
||||
// 예산 목표 업데이트 함수
|
||||
const handleBudgetGoalUpdate = (type: BudgetPeriod, amount: number, newCategoryBudgets?: Record<string, number>) => {
|
||||
// 카테고리 예산이 직접 업데이트된 경우
|
||||
if (newCategoryBudgets) {
|
||||
setCategoryBudgets(newCategoryBudgets);
|
||||
return; // 카테고리 예산이 변경되면 useEffect에서 자동으로 budgetData가 업데이트됩니다
|
||||
}
|
||||
|
||||
// 월간 예산을 업데이트하고 일일, 주간도 자동 계산
|
||||
if (type === 'monthly') {
|
||||
const ratio = amount / budgetData.monthly.targetAmount;
|
||||
const updatedCategoryBudgets: Record<string, number> = {};
|
||||
|
||||
Object.keys(categoryBudgets).forEach(category => {
|
||||
updatedCategoryBudgets[category] = Math.round(categoryBudgets[category] * ratio);
|
||||
});
|
||||
|
||||
setCategoryBudgets(updatedCategoryBudgets);
|
||||
} else {
|
||||
// 일일이나 주간 예산이 직접 업데이트되는 경우
|
||||
const updatedBudgetData = calculateUpdatedBudgetData(budgetData, type, amount);
|
||||
setBudgetData(updatedBudgetData);
|
||||
saveBudgetDataToStorage(updatedBudgetData);
|
||||
}
|
||||
|
||||
toast({
|
||||
title: "목표 업데이트 완료",
|
||||
description: `${type === 'daily' ? '일일' : type === 'weekly' ? '주간' : '월간'} 목표가 ${amount.toLocaleString()}원으로 설정되었습니다.`
|
||||
});
|
||||
};
|
||||
|
||||
// 트랜잭션 업데이트 처리
|
||||
const updateTransaction = (updatedTransaction: Transaction) => {
|
||||
setTransactions(prev => {
|
||||
const updated = prev.map(transaction =>
|
||||
transaction.id === updatedTransaction.id ? updatedTransaction : transaction
|
||||
);
|
||||
saveTransactionsToStorage(updated);
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
transactions,
|
||||
categoryBudgets,
|
||||
budgetData,
|
||||
selectedTab,
|
||||
setSelectedTab,
|
||||
updateTransaction,
|
||||
handleBudgetGoalUpdate,
|
||||
getCategorySpending
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user