143 lines
4.8 KiB
TypeScript
143 lines
4.8 KiB
TypeScript
|
|
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 - updated to use only the three specified categories
|
|
const transactions: Transaction[] = [{
|
|
id: '1',
|
|
title: '식료품 구매',
|
|
amount: 25000,
|
|
date: '8월 25일, 12:30 PM',
|
|
category: '식비',
|
|
type: 'expense'
|
|
}, {
|
|
id: '2',
|
|
title: '주유소',
|
|
amount: 50000,
|
|
date: '8월 24일, 3:45 PM',
|
|
category: '교통비',
|
|
type: 'expense'
|
|
}, {
|
|
id: '4',
|
|
title: '생필품 구매',
|
|
amount: 35000,
|
|
date: '8월 18일, 6:00 AM',
|
|
category: '생활비',
|
|
type: 'expense'
|
|
}, {
|
|
id: '5',
|
|
title: '월세',
|
|
amount: 650000,
|
|
date: '8월 15일, 10:00 AM',
|
|
category: '생활비',
|
|
type: 'expense'
|
|
}, {
|
|
id: '6',
|
|
title: '식당',
|
|
amount: 15500,
|
|
date: '8월 12일, 2:15 PM',
|
|
category: '식비',
|
|
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[]> = {};
|
|
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 */}
|
|
<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-income" />
|
|
<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">
|
|
{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-income">
|
|
{new Intl.NumberFormat('ko-KR', {
|
|
style: 'currency',
|
|
currency: 'KRW',
|
|
maximumFractionDigits: 0
|
|
}).format(totalExpenses)}
|
|
</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;
|