100 lines
2.6 KiB
TypeScript
100 lines
2.6 KiB
TypeScript
|
|
import React from 'react';
|
|
import { useBudgetTabContent } from '@/hooks/budget/useBudgetTabContent';
|
|
import BudgetHeader from './budget/BudgetHeader';
|
|
import BudgetProgressBar from './budget/BudgetProgressBar';
|
|
import BudgetStatusDisplay from './budget/BudgetStatusDisplay';
|
|
import BudgetInputButton from './budget/BudgetInputButton';
|
|
import BudgetInputForm from './budget/BudgetInputForm';
|
|
|
|
interface BudgetData {
|
|
targetAmount: number;
|
|
spentAmount: number;
|
|
remainingAmount: number;
|
|
}
|
|
|
|
interface BudgetTabContentProps {
|
|
data: BudgetData;
|
|
formatCurrency: (amount: number) => string;
|
|
calculatePercentage: (spent: number, target: number) => number;
|
|
onSaveBudget: (amount: number, categoryBudgets?: Record<string, number>) => void;
|
|
}
|
|
|
|
const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
|
data,
|
|
formatCurrency,
|
|
calculatePercentage,
|
|
onSaveBudget
|
|
}) => {
|
|
const {
|
|
categoryBudgets,
|
|
showBudgetInput,
|
|
toggleBudgetInput,
|
|
handleCategoryInputChange,
|
|
handleSaveCategoryBudgets,
|
|
isBudgetSet,
|
|
actualPercentage,
|
|
percentage,
|
|
isOverBudget,
|
|
isLowBudget,
|
|
progressBarColor,
|
|
budgetStatusText,
|
|
budgetAmount,
|
|
budgetButtonText,
|
|
calculateTotalBudget
|
|
} = useBudgetTabContent({
|
|
data,
|
|
calculatePercentage,
|
|
onSaveBudget
|
|
});
|
|
|
|
// 월간 예산 모드 로깅
|
|
React.useEffect(() => {
|
|
console.log('BudgetTabContent 렌더링: 월간 예산');
|
|
console.log('현재 예산 데이터:', data);
|
|
}, [data]);
|
|
|
|
return (
|
|
<div className="px-3 pb-3">
|
|
{isBudgetSet ? (
|
|
<>
|
|
<BudgetHeader
|
|
spentAmount={data.spentAmount}
|
|
targetAmount={data.targetAmount}
|
|
formatCurrency={formatCurrency}
|
|
/>
|
|
|
|
<BudgetProgressBar
|
|
percentage={percentage}
|
|
progressBarColor={progressBarColor}
|
|
/>
|
|
|
|
<BudgetStatusDisplay
|
|
budgetStatusText={budgetStatusText}
|
|
budgetAmount={budgetAmount}
|
|
actualPercentage={actualPercentage}
|
|
isOverBudget={isOverBudget}
|
|
/>
|
|
</>
|
|
) : null}
|
|
|
|
<BudgetInputButton
|
|
isBudgetSet={isBudgetSet}
|
|
budgetButtonText={budgetButtonText}
|
|
toggleBudgetInput={toggleBudgetInput}
|
|
/>
|
|
|
|
<BudgetInputForm
|
|
showBudgetInput={showBudgetInput}
|
|
categoryBudgets={categoryBudgets}
|
|
handleCategoryInputChange={handleCategoryInputChange}
|
|
handleSaveCategoryBudgets={handleSaveCategoryBudgets}
|
|
calculateTotalBudget={calculateTotalBudget}
|
|
formatCurrency={formatCurrency}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BudgetTabContent;
|