Update budget display and input
- Allow budget progress bar to exceed 100% when over budget. - Streamline budget input by directly displaying category budgets.
This commit is contained in:
@@ -1,9 +1,8 @@
|
||||
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import React from 'react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
|
||||
import { useIsMobile } from '@/hooks/use-mobile';
|
||||
import { toast } from '@/components/ui/use-toast';
|
||||
|
||||
interface CategoryBudgetInputsProps {
|
||||
categoryBudgets: Record<string, number>;
|
||||
@@ -15,7 +14,6 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
|
||||
handleCategoryInputChange
|
||||
}) => {
|
||||
const isMobile = useIsMobile();
|
||||
const previousBudgetsRef = useRef<Record<string, number>>({});
|
||||
|
||||
// Format number with commas for display
|
||||
const formatWithCommas = (value: number): string => {
|
||||
@@ -36,40 +34,6 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// 컴포넌트가 마운트될 때 categoryBudgets가 로컬 스토리지에서 다시 로드되도록 이벤트 리스너 설정
|
||||
useEffect(() => {
|
||||
const handleStorageChange = () => {
|
||||
// 부모 컴포넌트에서 데이터가 업데이트되므로 별도 처리 필요 없음
|
||||
console.log('카테고리 예산 데이터 변경 감지됨');
|
||||
};
|
||||
|
||||
window.addEventListener('categoryBudgetsUpdated', handleStorageChange);
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('categoryBudgetsUpdated', handleStorageChange);
|
||||
window.removeEventListener('storage', handleStorageChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 값이 변경될 때마다 토스트 메시지 표시
|
||||
useEffect(() => {
|
||||
const hasChanges = Object.keys(categoryBudgets).some(
|
||||
category => categoryBudgets[category] !== previousBudgetsRef.current[category]
|
||||
);
|
||||
|
||||
const totalBudget = Object.values(categoryBudgets).reduce((sum, val) => sum + val, 0);
|
||||
const previousTotal = Object.values(previousBudgetsRef.current).reduce((sum, val) => sum + val, 0);
|
||||
|
||||
// 이전 값과 다르고, 총 예산이 있는 경우 토스트 표시
|
||||
if (hasChanges && totalBudget > 0 && totalBudget !== previousTotal) {
|
||||
// 토스트 메시지는 storage에서 처리
|
||||
}
|
||||
|
||||
// 현재 값을 이전 값으로 업데이트
|
||||
previousBudgetsRef.current = { ...categoryBudgets };
|
||||
}, [categoryBudgets]);
|
||||
|
||||
return (
|
||||
<div className="space-y-2 w-full">
|
||||
{EXPENSE_CATEGORIES.map(category => (
|
||||
|
||||
Reference in New Issue
Block a user