-
Welcome to Your Blank App
-
Start building your amazing project here!
+
+
+ {/* Header */}
+
+
+ {/* Balance Card */}
+
+
+
+
+ ₩2,580,000
+
+
+ 지난 달보다 12% 증가
+
+
+
+ {/* Budget Progress */}
+
예산 현황
+
+
+
+
+
+
+ {/* Recent Transactions */}
+
최근 거래
+
+ {transactions.map(transaction => (
+
+ ))}
+
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
new file mode 100644
index 0000000..89349d5
--- /dev/null
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,113 @@
+
+import React from 'react';
+import NavBar from '@/components/NavBar';
+import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const SettingsOption = ({
+ icon: Icon,
+ label,
+ description,
+ onClick,
+ color = "text-gray-700"
+}: {
+ icon: React.ElementType;
+ label: string;
+ description?: string;
+ onClick?: () => void;
+ color?: string;
+}) => {
+ return (
+
+
+
+
+
+
+
{label}
+ {description &&
{description}
}
+
+
+
+
+ );
+};
+
+const Settings = () => {
+ return (
+
+
+ {/* Header */}
+
+ 설정
+
+ {/* User Profile */}
+
+
+
+
+
+
홍길동
+
honggildong@example.com
+
+
+
+ {/* Settings Options */}
+
+
계정
+
+
+
+
+
+
+
앱 설정
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Settings;
diff --git a/src/pages/Transactions.tsx b/src/pages/Transactions.tsx
new file mode 100644
index 0000000..64019cd
--- /dev/null
+++ b/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
= {};
+
+ transactions.forEach(transaction => {
+ const datePart = transaction.date.split(',')[0];
+ if (!groupedTransactions[datePart]) {
+ groupedTransactions[datePart] = [];
+ }
+ groupedTransactions[datePart].push(transaction);
+ });
+
+ return (
+
+
+ {/* Header */}
+
+ 거래 내역
+
+ {/* Search */}
+
+
+
+
+
+ {/* Month Selector */}
+
+
+
+
+
+ {selectedMonth}
+
+
+
+
+
+ {/* Transactions By Date */}
+
+ {Object.entries(groupedTransactions).map(([date, transactions]) => (
+
+
+
+
+ {transactions.map(transaction => (
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+