From c48118c4374f5b4b3b14a9115dddaf74f4bccc75 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 8 Mar 2025 08:19:28 +0000
Subject: [PATCH] Visual edit in Lovable

Edited UI in Lovable
---
 src/pages/Index.tsx | 96 +++++++++++++++++----------------------------
 1 file changed, 37 insertions(+), 59 deletions(-)

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index d60fea9..31f18a7 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import NavBar from '@/components/NavBar';
 import BudgetCard from '@/components/BudgetCard';
@@ -6,35 +5,32 @@ import TransactionCard, { Transaction } from '@/components/TransactionCard';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { Wallet, TrendingUp, Bell } from 'lucide-react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-
 const Index = () => {
   const [selectedTab, setSelectedTab] = useState("daily");
 
   // Sample data - in a real app, this would come from a data source
-  const transactions: Transaction[] = [
-    {
-      id: '1',
-      title: '식료품 구매',
-      amount: 25000,
-      date: '오늘, 12:30 PM',
-      category: 'shopping',
-      type: 'expense'
-    }, {
-      id: '2',
-      title: '주유소',
-      amount: 50000,
-      date: '어제, 3:45 PM',
-      category: 'transportation',
-      type: 'expense'
-    }, {
-      id: '3',
-      title: '월급',
-      amount: 2500000,
-      date: '2일전, 9:00 AM',
-      category: 'income',
-      type: 'income'
-    }
-  ];
+  const transactions: Transaction[] = [{
+    id: '1',
+    title: '식료품 구매',
+    amount: 25000,
+    date: '오늘, 12:30 PM',
+    category: 'shopping',
+    type: 'expense'
+  }, {
+    id: '2',
+    title: '주유소',
+    amount: 50000,
+    date: '어제, 3:45 PM',
+    category: 'transportation',
+    type: 'expense'
+  }, {
+    id: '3',
+    title: '월급',
+    amount: 2500000,
+    date: '2일전, 9:00 AM',
+    category: 'income',
+    type: 'income'
+  }];
 
   // 예산 데이터 - 실제 앱에서는 백엔드에서 가져와야 함
   const budgetData = {
@@ -54,7 +50,6 @@ const Index = () => {
       remainingAmount: 450000
     }
   };
-  
   const formatCurrency = (amount: number) => {
     return new Intl.NumberFormat('ko-KR', {
       style: 'currency',
@@ -62,12 +57,11 @@ const Index = () => {
       maximumFractionDigits: 0
     }).format(amount);
   };
-  
+
   // 퍼센트 계산 함수
   const calculatePercentage = (spent: number, target: number) => {
-    return Math.min(Math.round((spent / target) * 100), 100);
+    return Math.min(Math.round(spent / target * 100), 100);
   };
-  
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -111,18 +105,13 @@ const Index = () => {
                   </div>
                   
                   <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
-                    <div 
-                      className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent"
-                      style={{ width: `${calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount)}%` }}
-                    />
+                    <div style={{
+                    width: `${calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount)}%`
+                  }} className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-emerald-400" />
                   </div>
                   
                   <div className="mt-2 flex justify-end">
-                    <span className={`text-xs font-medium ${
-                      calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount) >= 90 
-                        ? "text-neuro-expense" 
-                        : "text-gray-500"
-                    }`}>
+                    <span className={`text-xs font-medium ${calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount) >= 90 ? "text-neuro-expense" : "text-gray-500"}`}>
                       {calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount)}%
                     </span>
                   </div>
@@ -144,18 +133,13 @@ const Index = () => {
                   </div>
                   
                   <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
-                    <div 
-                      className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent"
-                      style={{ width: `${calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount)}%` }}
-                    />
+                    <div className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent" style={{
+                    width: `${calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount)}%`
+                  }} />
                   </div>
                   
                   <div className="mt-2 flex justify-end">
-                    <span className={`text-xs font-medium ${
-                      calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount) >= 90 
-                        ? "text-neuro-expense" 
-                        : "text-gray-500"
-                    }`}>
+                    <span className={`text-xs font-medium ${calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount) >= 90 ? "text-neuro-expense" : "text-gray-500"}`}>
                       {calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount)}%
                     </span>
                   </div>
@@ -177,18 +161,13 @@ const Index = () => {
                   </div>
                   
                   <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
-                    <div 
-                      className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent"
-                      style={{ width: `${calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount)}%` }}
-                    />
+                    <div className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent" style={{
+                    width: `${calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount)}%`
+                  }} />
                   </div>
                   
                   <div className="mt-2 flex justify-end">
-                    <span className={`text-xs font-medium ${
-                      calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount) >= 90 
-                        ? "text-neuro-expense" 
-                        : "text-gray-500"
-                    }`}>
+                    <span className={`text-xs font-medium ${calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount) >= 90 ? "text-neuro-expense" : "text-gray-500"}`}>
                       {calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount)}%
                     </span>
                   </div>
@@ -226,5 +205,4 @@ const Index = () => {
       <NavBar />
     </div>;
 };
-
-export default Index;
+export default Index;
\ No newline at end of file