Visual edit in Lovable

Edited UI in Lovable

src/pages/Index.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import NavBar from '@/components/NavBar';
 import BudgetCard from '@/components/BudgetCard';
@@ -6,57 +5,51 @@ 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[] = [
+  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',
-    { 
+    title: '주유소',
-      id: '2', 
+    amount: 50000,
-      title: '주유소', 
+    date: '어제, 3:45 PM',
-      amount: 50000, 
+    category: 'transportation',
-      date: '어제, 3:45 PM', 
+    type: 'expense'
-      category: 'transportation',
+  }, {
-      type: 'expense' 
+    id: '3',
-    },
+    title: '월급',
-    { 
+    amount: 2500000,
-      id: '3', 
+    date: '2일전, 9:00 AM',
-      title: '월급', 
+    category: 'income',
-      amount: 2500000, 
+    type: 'income'
-      date: '2일전, 9:00 AM', 
+  }];
-      category: 'income',
-      type: 'income' 
-    },
-  ];
 
   // 예산 데이터 - 실제 앱에서는 백엔드에서 가져와야 함
   const budgetData = {
     daily: {
       targetAmount: 30000,
       spentAmount: 15000,
-      remainingAmount: 15000,
+      remainingAmount: 15000
     },
     weekly: {
       targetAmount: 200000,
       spentAmount: 120000,
-      remainingAmount: 80000,
+      remainingAmount: 80000
     },
     monthly: {
       targetAmount: 1200000,
       spentAmount: 750000,
-      remainingAmount: 450000,
+      remainingAmount: 450000
     }
   };
-
   const formatCurrency = (amount: number) => {
     return new Intl.NumberFormat('ko-KR', {
       style: 'currency',
@@ -64,16 +57,14 @@ const Index = () => {
       maximumFractionDigits: 0
     }).format(amount);
   };
-
+  return <div className="min-h-screen bg-neuro-background pb-24">
-  return (
-    <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
         <header className="py-8">
           <div className="flex justify-between items-center">
             <div>
               <h1 className="text-2xl font-bold neuro-text">반갑습니다</h1>
-              <p className="text-gray-500">오늘의 재정 현황</p>
+              <p className="text-gray-500">적자 탈출 계획</p>
             </div>
             <button className="neuro-flat p-2.5 rounded-full">
               <Bell size={20} className="text-gray-600" />
@@ -85,19 +76,13 @@ const Index = () => {
         <div className="neuro-card mb-6 overflow-hidden">
           <Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
             <TabsList className="grid grid-cols-3 mb-4 bg-transparent">
-              <TabsTrigger 
+              <TabsTrigger value="daily" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
-                value="daily" 
-                className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
                 오늘
               </TabsTrigger>
-              <TabsTrigger 
+              <TabsTrigger value="weekly" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
-                value="weekly" 
-                className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
                 주간
               </TabsTrigger>
-              <TabsTrigger 
+              <TabsTrigger value="monthly" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
-                value="monthly"
-                className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
                 월간
               </TabsTrigger>
             </TabsList>
@@ -158,31 +143,15 @@ const Index = () => {
         {/* Budget Progress */}
         <h2 className="text-lg font-semibold mb-3 mt-8">예산 현황</h2>
         <div className="grid gap-4 mb-8">
-          <BudgetCard
+          <BudgetCard title="이번 달 총 예산" current={850000} total={1500000} />
-            title="이번 달 총 예산"
+          <BudgetCard title="식비" current={240000} total={400000} color="neuro-accent-light" />
-            current={850000}
+          <BudgetCard title="교통비" current={190000} total={200000} color="neuro-expense" />
-            total={1500000}
-          />
-          <BudgetCard
-            title="식비"
-            current={240000}
-            total={400000}
-            color="neuro-accent-light"
-          />
-          <BudgetCard
-            title="교통비"
-            current={190000}
-            total={200000}
-            color="neuro-expense"
-          />
         </div>
 
         {/* Recent Transactions */}
         <h2 className="text-lg font-semibold mb-3">최근 거래</h2>
         <div className="grid gap-3 mb-6">
-          {transactions.map(transaction => (
+          {transactions.map(transaction => <TransactionCard key={transaction.id} transaction={transaction} />)}
-            <TransactionCard key={transaction.id} transaction={transaction} />
-          ))}
         </div>
         
         <div className="flex justify-center mb-6">
@@ -192,8 +161,6 @@ const Index = () => {
 
       <AddTransactionButton />
       <NavBar />
-    </div>
+    </div>;
-  );
 };
-
 export default Index;