From 888d45683fce0e6216e2929d7bb5f264e123351e Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 5 Apr 2025 06:30:24 +0000
Subject: [PATCH] Visual edit in Lovable

Edited UI in Lovable
---
 src/components/analytics/SummaryCards.tsx | 87 +++++++++--------------
 1 file changed, 33 insertions(+), 54 deletions(-)

diff --git a/src/components/analytics/SummaryCards.tsx b/src/components/analytics/SummaryCards.tsx
index 5c0286d..a88fa92 100644
--- a/src/components/analytics/SummaryCards.tsx
+++ b/src/components/analytics/SummaryCards.tsx
@@ -1,32 +1,27 @@
-
 import React from 'react';
 import { Wallet, CreditCard, Coins } from 'lucide-react';
 import { formatCurrency } from '@/utils/formatters';
 import { useIsMobile } from '@/hooks/use-mobile';
-
 interface SummaryCardsProps {
   totalBudget: number;
   totalExpense: number;
   savingsPercentage: number;
 }
-
 const SummaryCards: React.FC<SummaryCardsProps> = ({
   totalBudget,
   totalExpense,
   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`}>
+  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">
-        {isMobile ? (
-          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
-          <div className="flex items-center justify-between px-3 py-[5px]">
+        {isMobile ?
+      // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
+      <div className="flex items-center justify-between px-3 py-[5px]">
             <div className="flex items-center gap-2">
               <Wallet size={24} className="text-gray-500" />
               <p className="text-gray-500 text-base">예산</p>
@@ -34,24 +29,22 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
             <p className="text-sm font-bold text-neuro-income">
               {formatCurrency(totalBudget)}
             </p>
-          </div>
-        ) : (
-          // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
-          <>
+          </div> :
+      // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
+      <>
             <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 mt-3">
+            <p className="font-bold text-neuro-income text-center mt-3 text-xs">
               {formatCurrency(totalBudget)}
             </p>
-          </>
-        )}
+          </>}
       </div>
       <div className="neuro-card w-full">
-        {isMobile ? (
-          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
-          <div className="flex items-center justify-between px-3 py-[5px]">
+        {isMobile ?
+      // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
+      <div className="flex items-center justify-between px-3 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>
@@ -59,59 +52,45 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
             <p className="text-sm font-bold text-neuro-income">
               {formatCurrency(totalExpense)}
             </p>
-          </div>
-        ) : (
-          // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
-          <>
+          </div> :
+      // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
+      <>
             <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 mt-3">
+            <p className="font-bold text-neuro-income text-center mt-3 text-xs">
               {formatCurrency(totalExpense)}
             </p>
-          </>
-        )}
+          </>}
       </div>
       <div className="neuro-card w-full">
-        {isMobile ? (
-          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
-          <div className="flex items-center justify-between px-3 py-[5px]">
+        {isMobile ?
+      // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
+      <div className="flex items-center justify-between px-3 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">
+            {isOverBudget ? <p className="text-sm font-bold text-red-500">
                 초과액: {formatCurrency(Math.abs(remainingBudget))}
-              </p>
-            ) : (
-              <p className="text-sm font-bold text-neuro-income">
+              </p> : <p className="text-sm font-bold text-neuro-income">
                 {formatCurrency(remainingBudget)}
-              </p>
-            )}
-          </div>
-        ) : (
-          // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
-          <>
+              </p>}
+          </div> :
+      // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
+      <>
             <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 mt-3">
+            {isOverBudget ? <p className="text-sm font-bold text-red-500 text-center mt-3">
                 초과액: {formatCurrency(Math.abs(remainingBudget))}
-              </p>
-            ) : (
-              <p className="text-sm font-bold text-neuro-income text-center mt-3">
+              </p> : <p className="font-bold text-neuro-income text-center mt-3 text-xs">
                 {formatCurrency(remainingBudget)}
-              </p>
-            )}
-          </>
-        )}
+              </p>}
+          </>}
       </div>
-    </div>
-  );
+    </div>;
 };
-
-export default SummaryCards;
+export default SummaryCards;
\ No newline at end of file