From df257a948b63ca1d8eaba83355506341fc9c3701 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sat, 15 Mar 2025 04:55:09 +0000 Subject: [PATCH] Fix category budget update The category budget was not being updated correctly after setting the budget. This commit fixes the issue. --- src/components/BudgetProgressCard.tsx | 14 ++++++--- src/components/BudgetTabContent.tsx | 42 ++++++++++++++++++++++----- src/pages/Index.tsx | 8 ++++- 3 files changed, 51 insertions(+), 13 deletions(-) diff --git a/src/components/BudgetProgressCard.tsx b/src/components/BudgetProgressCard.tsx index bee5023..e39b481 100644 --- a/src/components/BudgetProgressCard.tsx +++ b/src/components/BudgetProgressCard.tsx @@ -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 = ({ @@ -52,7 +58,7 @@ const BudgetProgressCard: React.FC = ({ data={budgetData.daily} formatCurrency={formatCurrency} calculatePercentage={calculatePercentage} - onSaveBudget={amount => onSaveBudget('daily', amount)} + onSaveBudget={(amount, categoryBudgets) => onSaveBudget('daily', amount, categoryBudgets)} /> @@ -61,7 +67,7 @@ const BudgetProgressCard: React.FC = ({ data={budgetData.weekly} formatCurrency={formatCurrency} calculatePercentage={calculatePercentage} - onSaveBudget={amount => onSaveBudget('weekly', amount)} + onSaveBudget={(amount, categoryBudgets) => onSaveBudget('weekly', amount, categoryBudgets)} /> @@ -70,7 +76,7 @@ const BudgetProgressCard: React.FC = ({ data={budgetData.monthly} formatCurrency={formatCurrency} calculatePercentage={calculatePercentage} - onSaveBudget={amount => onSaveBudget('monthly', amount)} + onSaveBudget={(amount, categoryBudgets) => onSaveBudget('monthly', amount, categoryBudgets)} /> diff --git a/src/components/BudgetTabContent.tsx b/src/components/BudgetTabContent.tsx index 4c9f8a4..e557276 100644 --- a/src/components/BudgetTabContent.tsx +++ b/src/components/BudgetTabContent.tsx @@ -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 = ({ data, formatCurrency, @@ -29,16 +35,25 @@ const BudgetTabContent: React.FC = ({ const percentage = calculatePercentage(data.spentAmount, data.targetAmount); const [isOpen, setIsOpen] = useState(false); const [budgetInput, setBudgetInput] = useState(data.targetAmount.toString()); - const [categoryBudgets, setCategoryBudgets] = useState({ - 식비: 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(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 = ({ [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 = ({ const formatWithCommas = (amount: string) => { return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ','); }; + return
@@ -97,4 +122,5 @@ const BudgetTabContent: React.FC = ({
; }; -export default BudgetTabContent; \ No newline at end of file + +export default BudgetTabContent; diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index e37cf81..010add2 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -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);