Visual edit in Lovable

Edited UI in Lovable

src/components/RecentTransactionsSection.tsx

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