Fix NaN percentage display
Ensure percentage displays 0 instead of NaN when budget target is zero.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user