Create new Flutter app

The prompt requests the creation of a new app with a neumorphic design, similar to a household account book, using Flutter.

src/pages/Transactions.tsx

@@ -0,0 +1,146 @@
+
+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월');
+  
+  // Sample data - in a real app, this would come from a data source
+  const transactions: Transaction[] = [
+    { 
+      id: '1', 
+      title: '식료품 구매', 
+      amount: 25000, 
+      date: '8월 25일, 12:30 PM', 
+      category: 'shopping',
+      type: 'expense' 
+    },
+    { 
+      id: '2', 
+      title: '주유소', 
+      amount: 50000, 
+      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: '아마존 프라임', 
+      amount: 9900, 
+      date: '8월 18일, 6:00 AM', 
+      category: 'entertainment',
+      type: 'expense' 
+    },
+    { 
+      id: '5', 
+      title: '집세', 
+      amount: 650000, 
+      date: '8월 15일, 10:00 AM', 
+      category: 'housing',
+      type: 'expense' 
+    },
+    { 
+      id: '6', 
+      title: '카페', 
+      amount: 5500, 
+      date: '8월 12일, 2:15 PM', 
+      category: 'food',
+      type: 'expense' 
+    },
+  ];
+
+  // Group transactions by date
+  const groupedTransactions: Record<string, Transaction[]> = {};
+  
+  transactions.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 */}
+        <header className="py-8">
+          <h1 className="text-2xl font-bold neuro-text mb-5">거래 내역</h1>
+          
+          {/* Search */}
+          <div className="neuro-pressed mb-5 flex items-center px-4 py-3 rounded-xl">
+            <Search size={18} className="text-gray-500 mr-2" />
+            <input 
+              type="text"
+              placeholder="거래 검색..."
+              className="bg-transparent flex-1 outline-none text-sm"
+            />
+          </div>
+          
+          {/* Month Selector */}
+          <div className="flex items-center justify-between mb-5">
+            <button className="neuro-flat p-2 rounded-full">
+              <ChevronLeft size={20} />
+            </button>
+            
+            <div className="flex items-center gap-2">
+              <Calendar size={18} className="text-neuro-accent" />
+              <span className="font-medium text-lg">{selectedMonth}</span>
+            </div>
+            
+            <button className="neuro-flat p-2 rounded-full">
+              <ChevronRight size={20} />
+            </button>
+          </div>
+          
+          {/* 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>
+            </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>
+            </div>
+          </div>
+        </header>
+
+        {/* Transactions By Date */}
+        <div className="space-y-6">
+          {Object.entries(groupedTransactions).map(([date, transactions]) => (
+            <div key={date}>
+              <div className="flex items-center gap-2 mb-3">
+                <div className="h-1 flex-1 neuro-pressed"></div>
+                <h2 className="text-sm font-medium text-gray-500">{date}</h2>
+                <div className="h-1 flex-1 neuro-pressed"></div>
+              </div>
+              
+              <div className="grid gap-3">
+                {transactions.map(transaction => (
+                  <TransactionCard key={transaction.id} transaction={transaction} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <AddTransactionButton />
+      <NavBar />
+    </div>
+  );
+};
+
+export default Transactions;