Fix category budget update

The category budget was not being updated correctly after setting the budget. This commit fixes the issue.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 04:55:09 +00:00
parent 6d1e1f91f4
commit df257a948b
3 changed files with 51 additions and 13 deletions

View File

@@ -9,6 +9,12 @@ interface BudgetData {
remainingAmount: number; remainingAmount: number;
} }
interface CategoryBudget {
식비: number;
생활비: number;
교통비: number;
}
interface BudgetProgressCardProps { interface BudgetProgressCardProps {
budgetData: { budgetData: {
daily: BudgetData; daily: BudgetData;
@@ -19,7 +25,7 @@ interface BudgetProgressCardProps {
setSelectedTab: (value: string) => void; setSelectedTab: (value: string) => void;
formatCurrency: (amount: number) => string; formatCurrency: (amount: number) => string;
calculatePercentage: (spent: number, target: number) => number; calculatePercentage: (spent: number, target: number) => number;
onSaveBudget: (type: 'daily' | 'weekly' | 'monthly', amount: number) => void; onSaveBudget: (type: 'daily' | 'weekly' | 'monthly', amount: number, categoryBudgets?: CategoryBudget) => void;
} }
const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
@@ -52,7 +58,7 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
data={budgetData.daily} data={budgetData.daily}
formatCurrency={formatCurrency} formatCurrency={formatCurrency}
calculatePercentage={calculatePercentage} calculatePercentage={calculatePercentage}
onSaveBudget={amount => onSaveBudget('daily', amount)} onSaveBudget={(amount, categoryBudgets) => onSaveBudget('daily', amount, categoryBudgets)}
/> />
</TabsContent> </TabsContent>
@@ -61,7 +67,7 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
data={budgetData.weekly} data={budgetData.weekly}
formatCurrency={formatCurrency} formatCurrency={formatCurrency}
calculatePercentage={calculatePercentage} calculatePercentage={calculatePercentage}
onSaveBudget={amount => onSaveBudget('weekly', amount)} onSaveBudget={(amount, categoryBudgets) => onSaveBudget('weekly', amount, categoryBudgets)}
/> />
</TabsContent> </TabsContent>
@@ -70,7 +76,7 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
data={budgetData.monthly} data={budgetData.monthly}
formatCurrency={formatCurrency} formatCurrency={formatCurrency}
calculatePercentage={calculatePercentage} calculatePercentage={calculatePercentage}
onSaveBudget={amount => onSaveBudget('monthly', amount)} onSaveBudget={(amount, categoryBudgets) => onSaveBudget('monthly', amount, categoryBudgets)}
/> />
</TabsContent> </TabsContent>
</Tabs> </Tabs>

View File

@@ -1,25 +1,31 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Check, ChevronDown, ChevronUp, Calculator } from 'lucide-react'; import { Check, ChevronDown, ChevronUp, Calculator } from 'lucide-react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import BudgetProgress from './BudgetProgress'; import BudgetProgress from './BudgetProgress';
import CategoryBudgetInputs from './CategoryBudgetInputs'; import CategoryBudgetInputs from './CategoryBudgetInputs';
import { toast } from '@/components/ui/use-toast';
interface BudgetData { interface BudgetData {
targetAmount: number; targetAmount: number;
spentAmount: number; spentAmount: number;
remainingAmount: number; remainingAmount: number;
} }
interface CategoryBudget { interface CategoryBudget {
식비: number; 식비: number;
생활비: number; 생활비: number;
교통비: number; 교통비: number;
} }
interface BudgetTabContentProps { interface BudgetTabContentProps {
data: BudgetData; data: BudgetData;
formatCurrency: (amount: number) => string; formatCurrency: (amount: number) => string;
calculatePercentage: (spent: number, target: number) => number; calculatePercentage: (spent: number, target: number) => number;
onSaveBudget: (amount: number) => void; onSaveBudget: (amount: number, categoryBudgets?: CategoryBudget) => void;
} }
const BudgetTabContent: React.FC<BudgetTabContentProps> = ({ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
data, data,
formatCurrency, formatCurrency,
@@ -29,16 +35,25 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
const percentage = calculatePercentage(data.spentAmount, data.targetAmount); const percentage = calculatePercentage(data.spentAmount, data.targetAmount);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [budgetInput, setBudgetInput] = useState(data.targetAmount.toString()); const [budgetInput, setBudgetInput] = useState(data.targetAmount.toString());
const [categoryBudgets, setCategoryBudgets] = useState<CategoryBudget>({
식비: Math.round(data.targetAmount * 0.4), // 저장된 카테고리 예산을 불러옵니다
생활비: Math.round(data.targetAmount * 0.4), const savedCategoryBudgets = localStorage.getItem('categoryBudgets');
교통비: Math.round(data.targetAmount * 0.2) const initialCategoryBudgets = savedCategoryBudgets
}); ? JSON.parse(savedCategoryBudgets)
: {
식비: Math.round(data.targetAmount * 0.4),
생활비: Math.round(data.targetAmount * 0.4),
교통비: Math.round(data.targetAmount * 0.2)
};
const [categoryBudgets, setCategoryBudgets] = useState<CategoryBudget>(initialCategoryBudgets);
const handleInputChange = (value: string) => { const handleInputChange = (value: string) => {
// Remove all non-numeric characters // Remove all non-numeric characters
const numericValue = value.replace(/[^0-9]/g, ''); const numericValue = value.replace(/[^0-9]/g, '');
setBudgetInput(numericValue); setBudgetInput(numericValue);
}; };
const handleCategoryInputChange = (value: string, category: keyof CategoryBudget) => { const handleCategoryInputChange = (value: string, category: keyof CategoryBudget) => {
// Remove all non-numeric characters // Remove all non-numeric characters
const numericValue = value.replace(/[^0-9]/g, ''); const numericValue = value.replace(/[^0-9]/g, '');
@@ -47,10 +62,19 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
[category]: parseInt(numericValue) || 0 [category]: parseInt(numericValue) || 0
})); }));
}; };
const handleSave = () => { const handleSave = () => {
// Calculate total from all categories // Calculate total from all categories
const totalAmount = Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0); const totalAmount = Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0);
onSaveBudget(totalAmount);
// 카테고리 예산도 함께 전달합니다
onSaveBudget(totalAmount, categoryBudgets);
toast({
title: "예산 설정 완료",
description: "카테고리별 예산이 성공적으로 저장되었습니다.",
});
setIsOpen(false); setIsOpen(false);
}; };
@@ -58,6 +82,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
const formatWithCommas = (amount: string) => { const formatWithCommas = (amount: string) => {
return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ','); return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}; };
return <div className="space-y-4"> return <div className="space-y-4">
<BudgetProgress spentAmount={data.spentAmount} targetAmount={data.targetAmount} percentage={percentage} formatCurrency={formatCurrency} /> <BudgetProgress spentAmount={data.spentAmount} targetAmount={data.targetAmount} percentage={percentage} formatCurrency={formatCurrency} />
@@ -97,4 +122,5 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
</div> </div>
</div>; </div>;
}; };
export default BudgetTabContent;
export default BudgetTabContent;

View File

@@ -194,7 +194,13 @@ const Index = () => {
}; };
// 예산 목표 업데이트 함수 // 예산 목표 업데이트 함수
const handleBudgetGoalUpdate = (type: 'daily' | 'weekly' | 'monthly', amount: number) => { const handleBudgetGoalUpdate = (type: 'daily' | 'weekly' | 'monthly', amount: number, newCategoryBudgets?: typeof categoryBudgets) => {
// 카테고리 예산이 직접 업데이트된 경우
if (newCategoryBudgets) {
setCategoryBudgets(newCategoryBudgets);
return; // 카테고리 예산이 변경되면 useEffect에서 자동으로 budgetData가 업데이트됩니다
}
// 월간 예산을 업데이트하고 일일, 주간도 자동 계산 // 월간 예산을 업데이트하고 일일, 주간도 자동 계산
if (type === 'monthly') { if (type === 'monthly') {
const dailyAmount = Math.round(amount / 30); const dailyAmount = Math.round(amount / 30);