diff --git a/src/components/BudgetTabContent.tsx b/src/components/BudgetTabContent.tsx index 3a4981f..35db633 100644 --- a/src/components/BudgetTabContent.tsx +++ b/src/components/BudgetTabContent.tsx @@ -1,23 +1,19 @@ - import React, { useState, useEffect } from 'react'; import { Plus, Wallet } from 'lucide-react'; import BudgetInputCard from './BudgetInputCard'; import { Button } from '@/components/ui/button'; import CategoryBudgetInputs from './CategoryBudgetInputs'; - 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) => void; } - const BudgetTabContent: React.FC = ({ data, formatCurrency, @@ -26,37 +22,24 @@ const BudgetTabContent: React.FC = ({ }) => { const [categoryBudgets, setCategoryBudgets] = useState>({}); const [showBudgetInput, setShowBudgetInput] = useState(false); - const spentAmount = data.spentAmount; const targetAmount = data.targetAmount; // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시) - const actualPercentage = targetAmount > 0 - ? Math.round((spentAmount / targetAmount) * 100) - : 0; + const actualPercentage = targetAmount > 0 ? Math.round(spentAmount / targetAmount * 100) : 0; const percentage = actualPercentage; const isFirstBudget = targetAmount === 0; - + // 예산 초과 여부 계산 const isOverBudget = spentAmount > targetAmount; // 예산이 얼마 남지 않은 경우 (10% 미만) const isLowBudget = targetAmount > 0 && percentage >= 90 && percentage < 100; - + // 프로그레스 바 색상 결정 - const progressBarColor = isOverBudget - ? 'bg-red-500' - : isLowBudget - ? 'bg-yellow-400' - : 'bg-neuro-income'; - + const progressBarColor = isOverBudget ? 'bg-red-500' : isLowBudget ? 'bg-yellow-400' : 'bg-neuro-income'; + // 남은 예산 또는 초과 예산 텍스트 및 금액 - const budgetStatusText = isOverBudget - ? '예산 초과: ' - : '남은 예산: '; - - const budgetAmount = isOverBudget - ? formatCurrency(Math.abs(targetAmount - spentAmount)) - : formatCurrency(Math.max(0, targetAmount - spentAmount)); - + const budgetStatusText = isOverBudget ? '예산 초과: ' : '남은 예산: '; + const budgetAmount = isOverBudget ? formatCurrency(Math.abs(targetAmount - spentAmount)) : formatCurrency(Math.max(0, targetAmount - spentAmount)); const handleCategoryInputChange = (value: string, category: string) => { const numValue = parseInt(value, 10) || 0; setCategoryBudgets(prev => ({ @@ -64,21 +47,17 @@ const BudgetTabContent: React.FC = ({ [category]: numValue })); }; - - return ( -
- {targetAmount > 0 ? ( - <> + return
+ {targetAmount > 0 ? <>
{formatCurrency(spentAmount)}
/ {formatCurrency(targetAmount)}
-
+
@@ -91,52 +70,31 @@ const BudgetTabContent: React.FC = ({
-
- - ) : ( -
+ :
아직 예산이 설정되지 않았습니다
- -
- )} +
} - {showBudgetInput && ( -
+ {showBudgetInput &&

전체 예산 설정

- 0 ? targetAmount : ''} - onChange={(e) => { - const value = e.target.value.replace(/[^0-9]/g, ''); - if (value) { - const amount = parseInt(value, 10); - onSaveBudget(amount, categoryBudgets); - } - }} - /> -
@@ -144,16 +102,10 @@ const BudgetTabContent: React.FC = ({

카테고리별 예산 설정

- +
-
- )} -
- ); +
} +
; }; - -export default BudgetTabContent; +export default BudgetTabContent; \ No newline at end of file