From bd5ba8f397b4c2edc4a798df54d8c9b43a115a3e 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:44:53 +0000
Subject: [PATCH] Refactor summary cards layout

Moves amount to same line as icon and title in summary cards, and aligns amount to the right.
---
 src/components/analytics/SummaryCards.tsx | 54 +++++++++++++----------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/components/analytics/SummaryCards.tsx b/src/components/analytics/SummaryCards.tsx
index e51fbfe..9a5a5b4 100644
--- a/src/components/analytics/SummaryCards.tsx
+++ b/src/components/analytics/SummaryCards.tsx
@@ -24,37 +24,43 @@ 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 gap-2 mb-1 py-[5px]">
-          <Wallet size={24} className="text-gray-500" />
-          <p className="text-gray-500 text-base">예산</p>
+        <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>
-        <p className="text-sm font-bold text-neuro-income">
-          {formatCurrency(totalBudget)}
-        </p>
       </div>
       <div className="neuro-card w-full">
-        <div className="flex items-center gap-2 mb-1 py-[5px]">
-          <CreditCard size={24} className="text-gray-500" />
-          <p className="text-gray-500 font-medium text-base">지출</p>
+        <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>
-        <p className="text-sm font-bold text-neuro-income">
-          {formatCurrency(totalExpense)}
-        </p>
       </div>
       <div className="neuro-card w-full">
-        <div className="flex items-center gap-2 mb-1 py-[5px]">
-          <Coins size={24} className="text-gray-500" />
-          <p className="text-gray-500 text-base">잔액</p>
+        <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>
-        {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>
   );