Fix NaN percentage display

Ensure percentage displays 0 instead of NaN when budget target is zero.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 23:11:27 +00:00
parent d798632d05
commit a0866492ac
2 changed files with 8 additions and 3 deletions

View File

@@ -14,6 +14,9 @@ const BudgetProgress: React.FC<BudgetProgressProps> = ({
percentage,
formatCurrency
}) => {
// NaN 값을 방지하기 위해 percentage가 숫자가 아닌 경우 0으로 표시
const displayPercentage = isNaN(percentage) ? 0 : percentage;
return (
<div>
<div className="flex items-center justify-between mb-2">
@@ -23,14 +26,14 @@ const BudgetProgress: React.FC<BudgetProgressProps> = ({
<div className="relative h-3 neuro-pressed overflow-hidden mt-2">
<div
style={{ width: `${percentage}%` }}
className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${percentage >= 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"}`}
/>
</div>
<div className="mt-2 flex justify-end">
<span className="text-xs font-medium text-gray-500">
{percentage}%
{displayPercentage}%
</span>
</div>
</div>

View File

@@ -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);
};