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