Visual edit in Lovable

Edited UI in Lovable

src/components/analytics/SummaryCards.tsx

@@ -1,15 +1,12 @@
-
 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,
@@ -20,13 +17,11 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
   // 남은 예산 계산
   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 ? (
+        {isMobile ?
-          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
+      // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
-          <div className="flex items-center justify-between px-3 py-[5px]">
+      <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>
+          </div> :
-        ) : (
+      // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
-          // 데스크탑 레이아웃 (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 ? (
+        {isMobile ?
-          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
+      // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
-          <div className="flex items-center justify-between px-3 py-[5px]">
+      <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>
+          </div> :
-        ) : (
+      // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
-          // 데스크탑 레이아웃 (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 ? (
+        {isMobile ?
-          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
+      // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
-          <div className="flex items-center justify-between px-3 py-[5px]">
+      <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 ? (
+            {isOverBudget ? <p className="text-sm font-bold text-red-500">
-              <p className="text-sm font-bold text-red-500">
                 초과액: {formatCurrency(Math.abs(remainingBudget))}
-              </p>
+              </p> : <p className="text-sm font-bold text-neuro-income">
-            ) : (
-              <p className="text-sm font-bold text-neuro-income">
                 {formatCurrency(remainingBudget)}
-              </p>
+              </p>}
-            )}
+          </div> :
-          </div>
+      // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
-        ) : (
+      <>
-          // 데스크탑 레이아웃 (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 ? (
+            {isOverBudget ? <p className="text-sm font-bold text-red-500 text-center mt-3">
-              <p className="text-sm font-bold text-red-500 text-center mt-3">
                 초과액: {formatCurrency(Math.abs(remainingBudget))}
-              </p>
+              </p> : <p className="font-bold text-neuro-income text-center mt-3 text-xs">
-            ) : (
-              <p className="text-sm font-bold text-neuro-income text-center mt-3">
                 {formatCurrency(remainingBudget)}
-              </p>
+              </p>}
-            )}
+          </>}
-          </>
-        )}
       </div>
-    </div>
+    </div>;
-  );
 };
-
 export default SummaryCards;