Investigate budget display issue

Examine why budget data is not displaying correctly on the expense and analytics screens, despite being saved successfully.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-22 10:53:56 +00:00
parent c92d41e8f0
commit ab86d9b5f9
5 changed files with 223 additions and 75 deletions

View File

@@ -1,5 +1,5 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import BudgetTabContent from './BudgetTabContent';
import { BudgetPeriod } from '@/contexts/budget/BudgetContext';
@@ -31,21 +31,52 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
calculatePercentage,
onSaveBudget
}) => {
// 컴포넌트 마운트 시 예산 데이터 업데이트 이벤트 발생
// 데이터 상태 추적 (불일치 감지를 위한 로컬 상태)
const [localBudgetData, setLocalBudgetData] = useState(budgetData);
// 컴포넌트 마운트 및 budgetData 변경 시 업데이트
useEffect(() => {
console.log("BudgetProgressCard 마운트 - 예산 데이터:", budgetData);
console.log("BudgetProgressCard 데이터 업데이트 - 예산 데이터:", budgetData);
setLocalBudgetData(budgetData);
// 지연 작업으로 이벤트 발생 (컴포넌트 마운트 후 데이터 갱신)
const timeoutId = setTimeout(() => {
window.dispatchEvent(new Event('budgetDataUpdated'));
}, 500);
}, 300);
return () => clearTimeout(timeoutId);
}, [budgetData]);
// budgetDataUpdated 이벤트 감지
useEffect(() => {
const handleBudgetDataUpdated = () => {
console.log("BudgetProgressCard: 예산 데이터 업데이트 이벤트 감지");
};
window.addEventListener('budgetDataUpdated', handleBudgetDataUpdated);
return () => window.removeEventListener('budgetDataUpdated', handleBudgetDataUpdated);
}, []);
// 탭 변경 처리 - 예산 데이터 확인
const handleTabChange = (value: string) => {
console.log(`탭 변경: ${value}, 현재 예산 데이터:`, {
daily: budgetData.daily.targetAmount,
weekly: budgetData.weekly.targetAmount,
monthly: budgetData.monthly.targetAmount
});
setSelectedTab(value);
};
// 각 탭에 대한 현재 예산 설정 여부 계산
const isDailyBudgetSet = budgetData.daily.targetAmount > 0;
const isWeeklyBudgetSet = budgetData.weekly.targetAmount > 0;
const isMonthlyBudgetSet = budgetData.monthly.targetAmount > 0;
console.log(`BudgetProgressCard 상태: 일=${isDailyBudgetSet}, 주=${isWeeklyBudgetSet}, 월=${isMonthlyBudgetSet}`);
return (
<div className="neuro-card mb-6 overflow-hidden w-full">
<Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
<Tabs defaultValue="daily" value={selectedTab} onValueChange={handleTabChange} className="w-full">
<TabsList className="grid grid-cols-3 mb-4 bg-transparent">
<TabsTrigger
value="daily"