Visual edit in Lovable

Edited UI in Lovable

src/pages/Index.tsx

@@ -7,35 +7,32 @@ import AddTransactionButton from '@/components/AddTransactionButton';
 import { Wallet, TrendingUp, Bell } from 'lucide-react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { toast } from '@/components/ui/use-toast';
-
 const Index = () => {
   const [selectedTab, setSelectedTab] = useState("daily");
 
   // Sample data - in a real app, this would come from a data source
-  const transactions: Transaction[] = [
+  const transactions: Transaction[] = [{
-    {
+    id: '1',
-      id: '1',
+    title: '식료품 구매',
-      title: '식료품 구매',
+    amount: 25000,
-      amount: 25000,
+    date: '오늘, 12:30 PM',
-      date: '오늘, 12:30 PM',
+    category: 'shopping',
-      category: 'shopping',
+    type: 'expense'
-      type: 'expense'
+  }, {
-    }, {
+    id: '2',
-      id: '2',
+    title: '주유소',
-      title: '주유소',
+    amount: 50000,
-      amount: 50000,
+    date: '어제, 3:45 PM',
-      date: '어제, 3:45 PM',
+    category: 'transportation',
-      category: 'transportation',
+    type: 'expense'
-      type: 'expense'
+  }, {
-    }, {
+    id: '3',
-      id: '3',
+    title: '월급',
-      title: '월급',
+    amount: 2500000,
-      amount: 2500000,
+    date: '2일전, 9:00 AM',
-      date: '2일전, 9:00 AM',
+    category: 'income',
-      category: 'income',
+    type: 'income'
-      type: 'income'
+  }];
-    }
-  ];
 
   // 예산 데이터 - 실제 앱에서는 백엔드에서 가져와야 함
   const [budgetData, setBudgetData] = useState({
@@ -55,7 +52,6 @@ const Index = () => {
       remainingAmount: 450000
     }
   });
-
   const formatCurrency = (amount: number) => {
     return new Intl.NumberFormat('ko-KR', {
       style: 'currency',
@@ -73,7 +69,6 @@ const Index = () => {
   const handleBudgetGoalUpdate = (type: 'daily' | 'weekly' | 'monthly', amount: number) => {
     setBudgetData(prev => {
       const remainingAmount = Math.max(0, amount - prev[type].spentAmount);
-      
       return {
         ...prev,
         [type]: {
@@ -83,13 +78,11 @@ const Index = () => {
         }
       };
     });
-    
     toast({
       title: "목표 업데이트 완료",
       description: `${type === 'daily' ? '일일' : type === 'weekly' ? '주간' : '월간'} 목표가 ${amount.toLocaleString()}원으로 설정되었습니다.`
     });
   };
-
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -135,7 +128,7 @@ const Index = () => {
                   <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
                     <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-300" />
+                  }} className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-income" />
                   </div>
                   
                   <div className="mt-2 flex justify-end">
@@ -212,14 +205,11 @@ const Index = () => {
 
         {/* 목표 입력 */}
         <h2 className="text-lg font-semibold mb-3 mt-8">목표 입력</h2>
-        <BudgetInputCard 
+        <BudgetInputCard initialBudgets={{
-          initialBudgets={{
+        daily: budgetData.daily.targetAmount,
-            daily: budgetData.daily.targetAmount,
+        weekly: budgetData.weekly.targetAmount,
-            weekly: budgetData.weekly.targetAmount,
+        monthly: budgetData.monthly.targetAmount
-            monthly: budgetData.monthly.targetAmount
+      }} onSave={handleBudgetGoalUpdate} />
-          }}
-          onSave={handleBudgetGoalUpdate}
-        />
 
         {/* Budget Progress */}
         <h2 className="text-lg font-semibold mb-3 mt-8">예산 현황</h2>
@@ -244,4 +234,4 @@ const Index = () => {
       <NavBar />
     </div>;
 };
-export default Index;
+export default Index;