78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
|
|
import React, { useEffect, useState } from 'react';
|
|
import BudgetTabContent from './BudgetTabContent';
|
|
import { BudgetPeriod, BudgetData } from '@/contexts/budget/types';
|
|
|
|
interface BudgetProgressCardProps {
|
|
budgetData: BudgetData;
|
|
selectedTab: string;
|
|
setSelectedTab: (value: string) => void;
|
|
formatCurrency: (amount: number) => string;
|
|
calculatePercentage: (spent: number, target: number) => number;
|
|
onSaveBudget: (type: BudgetPeriod, amount: number, newCategoryBudgets?: Record<string, number>) => void;
|
|
}
|
|
|
|
const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
|
|
budgetData,
|
|
selectedTab,
|
|
setSelectedTab,
|
|
formatCurrency,
|
|
calculatePercentage,
|
|
onSaveBudget
|
|
}) => {
|
|
// 데이터 상태 추적 (불일치 감지를 위한 로컬 상태)
|
|
const [localBudgetData, setLocalBudgetData] = useState(budgetData);
|
|
|
|
// 컴포넌트 마운트 및 budgetData 변경 시 업데이트
|
|
useEffect(() => {
|
|
console.log("BudgetProgressCard 데이터 업데이트 - 예산 데이터:", budgetData);
|
|
console.log("월간 예산:", budgetData.monthly.targetAmount);
|
|
setLocalBudgetData(budgetData);
|
|
|
|
// 지연 작업으로 이벤트 발생 (컴포넌트 마운트 후 데이터 갱신)
|
|
const timeoutId = setTimeout(() => {
|
|
window.dispatchEvent(new Event('budgetDataUpdated'));
|
|
}, 300);
|
|
|
|
return () => clearTimeout(timeoutId);
|
|
}, [budgetData]);
|
|
|
|
// 초기 탭 설정을 위한 효과
|
|
useEffect(() => {
|
|
if (!selectedTab || selectedTab !== "monthly") {
|
|
console.log("초기 탭 설정: monthly");
|
|
setSelectedTab('monthly');
|
|
}
|
|
}, []);
|
|
|
|
// budgetDataUpdated 이벤트 감지
|
|
useEffect(() => {
|
|
const handleBudgetDataUpdated = () => {
|
|
console.log("BudgetProgressCard: 예산 데이터 업데이트 이벤트 감지");
|
|
};
|
|
|
|
window.addEventListener('budgetDataUpdated', handleBudgetDataUpdated);
|
|
return () => window.removeEventListener('budgetDataUpdated', handleBudgetDataUpdated);
|
|
}, []);
|
|
|
|
// 월간 예산 설정 여부 계산
|
|
const isMonthlyBudgetSet = budgetData.monthly.targetAmount > 0;
|
|
|
|
console.log(`BudgetProgressCard 상태: 월=${isMonthlyBudgetSet}`);
|
|
|
|
return (
|
|
<div className="neuro-card mb-6 overflow-hidden w-full">
|
|
<div className="text-sm text-gray-600 mb-2 px-3 pt-3">지출 / 예산</div>
|
|
|
|
<BudgetTabContent
|
|
data={budgetData.monthly}
|
|
formatCurrency={formatCurrency}
|
|
calculatePercentage={calculatePercentage}
|
|
onSaveBudget={(amount, categoryBudgets) => onSaveBudget('monthly', amount, categoryBudgets)}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BudgetProgressCard;
|