Refactor budget display

Refactor the budget display to show "목표 진행 상황" in a single line, with the spent amount on the left and the target amount on the right.

src/pages/Index.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import NavBar from '@/components/NavBar';
 import BudgetCard from '@/components/BudgetCard';
@@ -6,32 +5,35 @@ 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 = {
@@ -51,6 +53,7 @@ const Index = () => {
       remainingAmount: 450000
     }
   };
+  
   const formatCurrency = (amount: number) => {
     return new Intl.NumberFormat('ko-KR', {
       style: 'currency',
@@ -97,13 +100,11 @@ const Index = () => {
             <TabsContent value="daily" className="space-y-4 mt-0">
               <div className="space-y-4">
                 <div>
-                  <div className="flex justify-between items-center mb-1">
-                    <span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
-                    <span className="text-sm">{formatCurrency(budgetData.daily.targetAmount)}</span>
-                  </div>
-                  <div className="flex justify-between items-center mb-1">
-                    <span className="text-sm font-medium text-gray-600">지출 금액</span>
-                    <span className="text-sm text-neuro-expense">{formatCurrency(budgetData.daily.spentAmount)}</span>
+                  <h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
+                  
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="text-lg font-semibold">{formatCurrency(budgetData.daily.spentAmount)}</p>
+                    <p className="text-sm text-gray-500">/ {formatCurrency(budgetData.daily.targetAmount)}</p>
                   </div>
                   
                   <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
@@ -134,13 +135,11 @@ const Index = () => {
             <TabsContent value="weekly" className="space-y-4 mt-0">
               <div className="space-y-4">
                 <div>
-                  <div className="flex justify-between items-center mb-1">
-                    <span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
-                    <span className="text-sm">{formatCurrency(budgetData.weekly.targetAmount)}</span>
-                  </div>
-                  <div className="flex justify-between items-center mb-1">
-                    <span className="text-sm font-medium text-gray-600">지출 금액</span>
-                    <span className="text-sm text-neuro-expense">{formatCurrency(budgetData.weekly.spentAmount)}</span>
+                  <h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
+                  
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="text-lg font-semibold">{formatCurrency(budgetData.weekly.spentAmount)}</p>
+                    <p className="text-sm text-gray-500">/ {formatCurrency(budgetData.weekly.targetAmount)}</p>
                   </div>
                   
                   <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
@@ -171,13 +170,11 @@ const Index = () => {
             <TabsContent value="monthly" className="space-y-4 mt-0">
               <div className="space-y-4">
                 <div>
-                  <div className="flex justify-between items-center mb-1">
-                    <span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
-                    <span className="text-sm">{formatCurrency(budgetData.monthly.targetAmount)}</span>
-                  </div>
-                  <div className="flex justify-between items-center mb-1">
-                    <span className="text-sm font-medium text-gray-600">지출 금액</span>
-                    <span className="text-sm text-neuro-expense">{formatCurrency(budgetData.monthly.spentAmount)}</span>
+                  <h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
+                  
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="text-lg font-semibold">{formatCurrency(budgetData.monthly.spentAmount)}</p>
+                    <p className="text-sm text-gray-500">/ {formatCurrency(budgetData.monthly.targetAmount)}</p>
                   </div>
                   
                   <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
@@ -230,4 +227,5 @@ const Index = () => {
       <NavBar />
     </div>;
 };
+
 export default Index;