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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user