From a0866492acdf41b145e2feae90620c869e84e10a Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 23:11:27 +0000
Subject: [PATCH] Fix NaN percentage display

Ensure percentage displays 0 instead of NaN when budget target is zero.
---
 src/components/BudgetProgress.tsx | 9 ++++++---
 src/utils/formatters.ts           | 2 ++
 2 files changed, 8 insertions(+), 3 deletions(-)

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