diff --git a/src/pages/Transactions.tsx b/src/pages/Transactions.tsx index 64019cd..df8b4a2 100644 --- a/src/pages/Transactions.tsx +++ b/src/pages/Transactions.tsx @@ -1,68 +1,58 @@ - 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' - }, - ]; + 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 = {}; - transactions.forEach(transaction => { const datePart = transaction.date.split(',')[0]; if (!groupedTransactions[datePart]) { @@ -70,22 +60,16 @@ const Transactions = () => { } groupedTransactions[datePart].push(transaction); }); - - return ( -
+ return
{/* Header */}
-

거래 내역

+

지출 내역

{/* Search */}
- +
{/* Month Selector */} @@ -119,8 +103,7 @@ const Transactions = () => { {/* Transactions By Date */}
- {Object.entries(groupedTransactions).map(([date, transactions]) => ( -
+ {Object.entries(groupedTransactions).map(([date, transactions]) =>

{date}

@@ -128,19 +111,14 @@ const Transactions = () => {
- {transactions.map(transaction => ( - - ))} + {transactions.map(transaction => )}
-
- ))} +
)}
-
- ); +
; }; - -export default Transactions; +export default Transactions; \ No newline at end of file