diff --git a/src/components/BudgetProgress.tsx b/src/components/BudgetProgress.tsx index 43ab720..faf0ca0 100644 --- a/src/components/BudgetProgress.tsx +++ b/src/components/BudgetProgress.tsx @@ -14,6 +14,9 @@ const BudgetProgress: React.FC = ({ percentage, formatCurrency }) => { + // NaN 값을 방지하기 위해 percentage가 숫자가 아닌 경우 0으로 표시 + const displayPercentage = isNaN(percentage) ? 0 : percentage; + return (
@@ -23,14 +26,14 @@ const BudgetProgress: React.FC = ({
= 90 ? "bg-yellow-400" : "bg-neuro-income"}`} + style={{ width: `${displayPercentage}%` }} + className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${displayPercentage >= 90 ? "bg-yellow-400" : "bg-neuro-income"}`} />
- {percentage}% + {displayPercentage}%
diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts index 0b23e28..27c80f2 100644 --- a/src/utils/formatters.ts +++ b/src/utils/formatters.ts @@ -8,5 +8,7 @@ export const formatCurrency = (amount: number): string => { }; export const calculatePercentage = (spent: number, target: number): number => { + // 타겟이 0이면 0%를 반환하도록 수정 + if (target === 0 || isNaN(target)) return 0; return Math.min(Math.round(spent / target * 100), 100); };