From 3ba935151faf106420df26ce9f8e50edff5e1ed4 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:43:11 +0000
Subject: [PATCH] Display remaining budget

Replaced savings with remaining budget and indicated budget overruns.
---
 src/components/analytics/SummaryCards.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/analytics/SummaryCards.tsx b/src/components/analytics/SummaryCards.tsx
index 9045046..6d39183 100644
--- a/src/components/analytics/SummaryCards.tsx
+++ b/src/components/analytics/SummaryCards.tsx
@@ -16,6 +16,10 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
   savingsPercentage
 }) => {
   const isMobile = useIsMobile();
+  
+  // 남은 예산 계산
+  const remainingBudget = totalBudget - totalExpense;
+  const isOverBudget = remainingBudget < 0;
 
   return (
     <div className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-3'} gap-3 mb-8 w-full desktop-card`}>
@@ -40,11 +44,17 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
       <div className="neuro-card w-full">
         <div className="flex items-center gap-2 mb-1 py-[5px]">
           <PiggyBank size={24} className="text-gray-500" />
-          <p className="text-gray-500 text-base">저축</p>
+          <p className="text-gray-500 text-base">남은 예산</p>
         </div>
-        <p className="text-sm font-bold text-neuro-income">
-          {savingsPercentage}%
-        </p>
+        {isOverBudget ? (
+          <p className="text-sm font-bold text-red-500">
+            예산 초과: {formatCurrency(Math.abs(remainingBudget))}
+          </p>
+        ) : (
+          <p className="text-sm font-bold text-neuro-income">
+            {formatCurrency(remainingBudget)}
+          </p>
+        )}
       </div>
     </div>
   );