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:
gpt-engineer-app[bot]
2025-03-17 12:10:59 +00:00
parent f9fb5364bb
commit edeb9f8ffb
3 changed files with 64 additions and 57 deletions

View File

@@ -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 => (