From f9fb5364bb0d6da21bbed3bd34c158ce89f2197b Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 17 Mar 2025 12:06:19 +0000
Subject: [PATCH] Enhance budget display and alerts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increase font size of "예산 목표 설정하기" text.
- Change budget bar color to yellow if remaining budget is less than 10%, and to red if over budget.
- Display "예산 초과" and the exceeded amount when the budget is exceeded.
---
 src/components/BudgetCategoriesSection.tsx | 30 +++++++++++++++++-----
 src/components/BudgetTabContent.tsx        | 29 ++++++++++++++++++---
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/components/BudgetCategoriesSection.tsx b/src/components/BudgetCategoriesSection.tsx
index 834380b..83c0e5f 100644
--- a/src/components/BudgetCategoriesSection.tsx
+++ b/src/components/BudgetCategoriesSection.tsx
@@ -18,9 +18,27 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
     <h2 className="text-lg font-semibold mb-3 mt-8">지출 그래프</h2>
     <div className="neuro-card mb-8">
       {categories.map((category, index) => {
-        // 남은 예산 계산 (음수가 되지 않도록)
-        const remaining = Math.max(0, category.total - category.current);
-        const percentage = Math.min(Math.round((category.current / category.total) * 100), 100);
+        // 예산 초과 여부 확인
+        const isOverBudget = category.current > category.total && category.total > 0;
+        // 예산이 얼마 남지 않은 경우 (10% 미만)
+        const percentage = Math.min(Math.round((category.current / (category.total || 1)) * 100), 100);
+        const isLowBudget = category.total > 0 && percentage >= 90 && percentage < 100;
+        
+        // 프로그레스 바 색상 결정
+        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 (
           <div key={index} className={`${index !== 0 ? 'mt-4 pt-4 border-t border-gray-100' : ''}`}>
@@ -38,14 +56,14 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
             
             <div className="relative h-3 neuro-pressed overflow-hidden">
               <div 
-                className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-income`}
+                className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${progressBarColor}`}
                 style={{ width: `${percentage}%` }}
               />
             </div>
             
             <div className="mt-2 flex justify-between items-center">
-              <span className="text-xs text-neuro-income font-medium">
-                남은 예산: {formatCurrency(remaining)}
+              <span className={`text-xs font-medium ${isOverBudget ? 'text-red-500' : 'text-neuro-income'}`}>
+                {budgetStatusText}{formatCurrency(budgetAmount)}
               </span>
               <span className="text-xs font-medium text-gray-500">
                 {percentage}%
diff --git a/src/components/BudgetTabContent.tsx b/src/components/BudgetTabContent.tsx
index 0c8bfca..b5f86e2 100644
--- a/src/components/BudgetTabContent.tsx
+++ b/src/components/BudgetTabContent.tsx
@@ -30,6 +30,27 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   const percentage = calculatePercentage(spentAmount, targetAmount);
   const isFirstBudget = targetAmount === 0;
   
+  // 예산 초과 여부 계산
+  const isOverBudget = spentAmount > targetAmount;
+  // 예산이 얼마 남지 않은 경우 (10% 미만)
+  const isLowBudget = targetAmount > 0 && percentage >= 90 && percentage < 100;
+  
+  // 프로그레스 바 색상 결정
+  const progressBarColor = isOverBudget 
+    ? 'bg-red-500' 
+    : isLowBudget 
+      ? 'bg-yellow-400' 
+      : 'bg-neuro-income';
+  
+  // 남은 예산 또는 초과 예산 텍스트 및 금액
+  const budgetStatusText = isOverBudget 
+    ? '예산 초과: ' 
+    : '남은 예산: ';
+  
+  const budgetAmount = isOverBudget 
+    ? formatCurrency(Math.abs(targetAmount - spentAmount))
+    : formatCurrency(Math.max(0, targetAmount - spentAmount));
+  
   return (
     <div>
       {targetAmount > 0 ? (
@@ -41,14 +62,14 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           
           <div className="w-full h-2 neuro-pressed overflow-hidden mb-3">
             <div 
-              className="h-full bg-neuro-income transition-all duration-700 ease-out"
+              className={`h-full ${progressBarColor} transition-all duration-700 ease-out`}
               style={{ width: `${percentage}%` }}
             />
           </div>
           
           <div className="flex justify-between items-center">
-            <div className="text-sm font-medium text-gray-500">
-              남은 예산: {formatCurrency(Math.max(0, targetAmount - spentAmount))}
+            <div className={`text-sm font-medium ${isOverBudget ? 'text-red-500' : 'text-gray-500'}`}>
+              {budgetStatusText}{budgetAmount}
             </div>
             <div className="text-sm font-medium text-gray-500">
               {percentage}%
@@ -58,7 +79,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           <div className="mt-6">
             <button 
               onClick={() => setShowBudgetInput(!showBudgetInput)}
-              className="text-neuro-income text-sm font-medium hover:underline flex items-center"
+              className="text-neuro-income text-sm font-medium hover:underline flex items-center text-[15px]"
             >
               <Plus size={16} className="mr-1" /> 예산 수정하기
             </button>