Refactor transaction display

Modify transaction page to display total budget instead of total income and only show expense transactions. Update color scheme to use neuro-income color.

src/pages/Transactions.tsx

@@ -1,8 +1,10 @@
+
 import React, { useState } from 'react';
 import NavBar from '@/components/NavBar';
 import TransactionCard, { Transaction } from '@/components/TransactionCard';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
+
 const Transactions = () => {
   const [selectedMonth, setSelectedMonth] = useState('8월');
 
@@ -21,13 +23,6 @@ const Transactions = () => {
     date: '8월 24일, 3:45 PM',
     category: 'transportation',
     type: 'expense'
-  }, {
-    id: '3',
-    title: '월급',
-    amount: 2500000,
-    date: '8월 20일, 9:00 AM',
-    category: 'income',
-    type: 'income'
   }, {
     id: '4',
     title: '아마존 프라임',
@@ -51,15 +46,25 @@ const Transactions = () => {
     type: 'expense'
   }];
 
+  // Filter only expense transactions
+  const expenseTransactions = transactions.filter(t => t.type === 'expense');
+  
+  // Calculate total expenses
+  const totalExpenses = expenseTransactions.reduce((sum, transaction) => sum + transaction.amount, 0);
+  
+  // Set budget (for demo purposes - in a real app this would come from user settings)
+  const totalBudget = 1000000;
+
   // Group transactions by date
   const groupedTransactions: Record<string, Transaction[]> = {};
-  transactions.forEach(transaction => {
+  expenseTransactions.forEach(transaction => {
     const datePart = transaction.date.split(',')[0];
     if (!groupedTransactions[datePart]) {
       groupedTransactions[datePart] = [];
     }
     groupedTransactions[datePart].push(transaction);
   });
+
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -91,12 +96,24 @@ const Transactions = () => {
           {/* Summary */}
           <div className="grid grid-cols-2 gap-4 mb-8">
             <div className="neuro-card">
-              <p className="text-sm text-gray-500 mb-1">총 수입</p>
-              <p className="text-lg font-bold text-neuro-income">₩2,500,000</p>
+              <p className="text-sm text-gray-500 mb-1">총 예산</p>
+              <p className="text-lg font-bold text-neuro-income">
+                {new Intl.NumberFormat('ko-KR', {
+                  style: 'currency',
+                  currency: 'KRW',
+                  maximumFractionDigits: 0
+                }).format(totalBudget)}
+              </p>
             </div>
             <div className="neuro-card">
               <p className="text-sm text-gray-500 mb-1">총 지출</p>
-              <p className="text-lg font-bold text-neuro-expense">₩740,400</p>
+              <p className="text-lg font-bold text-neuro-income">
+                {new Intl.NumberFormat('ko-KR', {
+                  style: 'currency',
+                  currency: 'KRW',
+                  maximumFractionDigits: 0
+                }).format(totalExpenses)}
+              </p>
             </div>
           </div>
         </header>
@@ -121,4 +138,5 @@ const Transactions = () => {
       <NavBar />
     </div>;
 };
-export default Transactions;
+
+export default Transactions;