ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual edit in Lovable

Browse Source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot]
2025-03-16 11:25:23 +00:00
parent b6bcdedc39
commit 24b10301ab
1 changed files with 14 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/RecentTransactionsSection.tsx
View File

@@ -1,29 +1,27 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Transaction } from './TransactionCard'; import { Transaction } from './TransactionCard';
import TransactionEditDialog from './TransactionEditDialog'; import TransactionEditDialog from './TransactionEditDialog';
import { ChevronRight } from 'lucide-react'; import { ChevronRight } from 'lucide-react';
import { useBudget } from '@/contexts/BudgetContext'; import { useBudget } from '@/contexts/BudgetContext';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
interface RecentTransactionsSectionProps { interface RecentTransactionsSectionProps {
transactions: Transaction[]; transactions: Transaction[];
onUpdateTransaction?: (transaction: Transaction) => void; onUpdateTransaction?: (transaction: Transaction) => void;
} }
const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
transactions, transactions,
onUpdateTransaction onUpdateTransaction
}) => { }) => {
const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(null); const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(null);
const [isDialogOpen, setIsDialogOpen] = useState(false); const [isDialogOpen, setIsDialogOpen] = useState(false);
const { updateTransaction, deleteTransaction } = useBudget(); const {
updateTransaction,
deleteTransaction
} = useBudget();
const handleTransactionClick = (transaction: Transaction) => { const handleTransactionClick = (transaction: Transaction) => {
setSelectedTransaction(transaction); setSelectedTransaction(transaction);
setIsDialogOpen(true); setIsDialogOpen(true);
}; };
const handleUpdateTransaction = (updatedTransaction: Transaction) => { const handleUpdateTransaction = (updatedTransaction: Transaction) => {
if (onUpdateTransaction) { if (onUpdateTransaction) {
onUpdateTransaction(updatedTransaction); onUpdateTransaction(updatedTransaction);
@@ -31,16 +29,13 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
// 직접 컨텍스트를 통해 업데이트 // 직접 컨텍스트를 통해 업데이트
updateTransaction(updatedTransaction); updateTransaction(updatedTransaction);
}; };
const handleDeleteTransaction = (id: string) => { const handleDeleteTransaction = (id: string) => {
// 직접 컨텍스트를 통해 삭제 // 직접 컨텍스트를 통해 삭제
deleteTransaction(id); deleteTransaction(id);
}; };
const formatCurrency = (amount: number) => { const formatCurrency = (amount: number) => {
return amount.toLocaleString('ko-KR') + '원'; return amount.toLocaleString('ko-KR') + '원';
}; };
const getCategoryIcon = (category: string) => { const getCategoryIcon = (category: string) => {
switch (category) { switch (category) {
case '식비': case '식비':
@@ -61,9 +56,7 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
return '💰'; return '💰';
} }
}; };
return <div className="mt-6">
return (
<div className="mt-6">
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-center mb-3">
<h2 className="text-lg font-semibold">최근 지출</h2> <h2 className="text-lg font-semibold">최근 지출</h2>
<Link to="/transactions" className="text-sm text-neuro-income flex items-center"> <Link to="/transactions" className="text-sm text-neuro-income flex items-center">
@@ -71,13 +64,7 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
</Link> </Link>
</div> </div>
<div className="neuro-card divide-y divide-gray-100 w-full"> <div className="neuro-card divide-y divide-gray-100 w-full">
{transactions.length > 0 ? ( {transactions.length > 0 ? transactions.map(transaction => <div key={transaction.id} className="flex justify-between py-3 px-4 cursor-pointer hover:bg-gray-50" onClick={() => handleTransactionClick(transaction)}>
transactions.map((transaction) => (
<div
key={transaction.id}
className="flex justify-between py-3 px-4 cursor-pointer hover:bg-gray-50"
onClick={() => handleTransactionClick(transaction)}
>
<div className="flex items-center"> <div className="flex items-center">
<span className="text-xl mr-3">{getCategoryIcon(transaction.category)}</span> <span className="text-xl mr-3">{getCategoryIcon(transaction.category)}</span>
<div> <div>
@@ -86,29 +73,15 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
</div> </div>
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="font-semibold text-red-500">-{formatCurrency(transaction.amount)}</p> <p className="font-semibold text-neuro-income">-{formatCurrency(transaction.amount)}</p>
<p className="text-xs text-gray-500">{transaction.category}</p> <p className="text-xs text-gray-500">{transaction.category}</p>
</div> </div>
</div> </div>) : <div className="py-4 text-center text-gray-500">
))
) : (
<div className="py-4 text-center text-gray-500">
지출 내역이 없습니다 지출 내역이 없습니다
</div> </div>}
)}
</div> </div>
{selectedTransaction && ( {selectedTransaction && <TransactionEditDialog transaction={selectedTransaction} open={isDialogOpen} onOpenChange={setIsDialogOpen} onSave={handleUpdateTransaction} onDelete={handleDeleteTransaction} />}
<TransactionEditDialog </div>;
transaction={selectedTransaction}
open={isDialogOpen}
onOpenChange={setIsDialogOpen}
onSave={handleUpdateTransaction}
onDelete={handleDeleteTransaction}
/>
)}
</div>
);
}; };
export default RecentTransactionsSection;
export default RecentTransactionsSection;