diff --git a/src/components/BudgetCategoriesSection.tsx b/src/components/BudgetCategoriesSection.tsx index 97f3570..52e1bb1 100644 --- a/src/components/BudgetCategoriesSection.tsx +++ b/src/components/BudgetCategoriesSection.tsx @@ -1,8 +1,6 @@ - import React from 'react'; import { categoryIcons } from '@/constants/categoryIcons'; import { formatCurrency } from '@/utils/formatters'; - interface BudgetCategoriesSectionProps { categories: { title: string; @@ -10,7 +8,6 @@ interface BudgetCategoriesSectionProps { total: number; }[]; } - const BudgetCategoriesSection: React.FC = ({ categories }) => { @@ -21,33 +18,20 @@ const BudgetCategoriesSection: React.FC = ({ // 예산 초과 여부 확인 const isOverBudget = category.current > category.total && category.total > 0; // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시) - const actualPercentage = category.total > 0 - ? Math.round((category.current / category.total) * 100) - : 0; + const actualPercentage = category.total > 0 ? Math.round(category.current / category.total * 100) : 0; // 프로그레스 바용 퍼센트 - 제한 없이 실제 퍼센트 표시 const displayPercentage = actualPercentage; - + // 예산이 얼마 남지 않은 경우 (10% 미만) const isLowBudget = category.total > 0 && actualPercentage >= 90 && actualPercentage < 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 - ? Math.abs(category.total - category.current) - : Math.max(0, category.total - category.current); - - return ( -
+ const budgetStatusText = isOverBudget ? '예산 초과: ' : '남은 예산: '; + const budgetAmount = isOverBudget ? Math.abs(category.total - category.current) : Math.max(0, category.total - category.current); + return
{categoryIcons[category.title]} @@ -56,15 +40,14 @@ const BudgetCategoriesSection: React.FC = ({
-

{formatCurrency(category.current)}

+

{formatCurrency(category.current)}

/ {formatCurrency(category.total)}

-
+
@@ -75,11 +58,9 @@ const BudgetCategoriesSection: React.FC = ({ {displayPercentage}%
-
- ); +
; })}
; }; - -export default BudgetCategoriesSection; +export default BudgetCategoriesSection; \ No newline at end of file