From 8858bbca9e06ccd74f2d108d8e724591f897de9e Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 21 Mar 2025 09:47:20 +0000
Subject: [PATCH] Refactor SummaryCards component

Modify SummaryCards to display icon and title in one line with the amount below, centered.
---
 src/components/analytics/SummaryCards.tsx | 54 ++++++++++-------------
 1 file changed, 24 insertions(+), 30 deletions(-)

diff --git a/src/components/analytics/SummaryCards.tsx b/src/components/analytics/SummaryCards.tsx
index 9a5a5b4..0c3d5d1 100644
--- a/src/components/analytics/SummaryCards.tsx
+++ b/src/components/analytics/SummaryCards.tsx
@@ -24,43 +24,37 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
   return (
     <div className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-3'} gap-3 mb-8 w-full desktop-card`}>
       <div className="neuro-card w-full">
-        <div className="flex items-center justify-between py-[5px]">
-          <div className="flex items-center gap-2">
-            <Wallet size={24} className="text-gray-500" />
-            <p className="text-gray-500 text-base">예산</p>
-          </div>
-          <p className="text-sm font-bold text-neuro-income text-right">
-            {formatCurrency(totalBudget)}
-          </p>
+        <div className="flex items-center justify-center gap-2 py-[5px]">
+          <Wallet size={24} className="text-gray-500" />
+          <p className="text-gray-500 text-base">예산</p>
         </div>
+        <p className="text-sm font-bold text-neuro-income text-center">
+          {formatCurrency(totalBudget)}
+        </p>
       </div>
       <div className="neuro-card w-full">
-        <div className="flex items-center justify-between py-[5px]">
-          <div className="flex items-center gap-2">
-            <CreditCard size={24} className="text-gray-500" />
-            <p className="text-gray-500 font-medium text-base">지출</p>
-          </div>
-          <p className="text-sm font-bold text-neuro-income text-right">
-            {formatCurrency(totalExpense)}
-          </p>
+        <div className="flex items-center justify-center gap-2 py-[5px]">
+          <CreditCard size={24} className="text-gray-500" />
+          <p className="text-gray-500 font-medium text-base">지출</p>
         </div>
+        <p className="text-sm font-bold text-neuro-income text-center">
+          {formatCurrency(totalExpense)}
+        </p>
       </div>
       <div className="neuro-card w-full">
-        <div className="flex items-center justify-between py-[5px]">
-          <div className="flex items-center gap-2">
-            <Coins size={24} className="text-gray-500" />
-            <p className="text-gray-500 text-base">잔액</p>
-          </div>
-          {isOverBudget ? (
-            <p className="text-sm font-bold text-red-500 text-right">
-              초과액: {formatCurrency(Math.abs(remainingBudget))}
-            </p>
-          ) : (
-            <p className="text-sm font-bold text-neuro-income text-right">
-              {formatCurrency(remainingBudget)}
-            </p>
-          )}
+        <div className="flex items-center justify-center gap-2 py-[5px]">
+          <Coins size={24} className="text-gray-500" />
+          <p className="text-gray-500 text-base">잔액</p>
         </div>
+        {isOverBudget ? (
+          <p className="text-sm font-bold text-red-500 text-center">
+            초과액: {formatCurrency(Math.abs(remainingBudget))}
+          </p>
+        ) : (
+          <p className="text-sm font-bold text-neuro-income text-center">
+            {formatCurrency(remainingBudget)}
+          </p>
+        )}
       </div>
     </div>
   );