Visual edit in Lovable

Edited UI in Lovable

src/components/RecentTransactionsSection.tsx

@@ -6,12 +6,10 @@ import { useBudget } from '@/contexts/BudgetContext';
 import { Link } from 'react-router-dom';
 import { categoryIcons } from '@/constants/categoryIcons';
 import TransactionIcon from './transaction/TransactionIcon';
-
 interface RecentTransactionsSectionProps {
   transactions: Transaction[];
   onUpdateTransaction?: (transaction: Transaction) => void;
 }
-
 const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
   transactions,
   onUpdateTransaction
@@ -22,12 +20,10 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
     updateTransaction,
     deleteTransaction
   } = useBudget();
-  
   const handleTransactionClick = (transaction: Transaction) => {
     setSelectedTransaction(transaction);
     setIsDialogOpen(true);
   };
-
   const handleUpdateTransaction = (updatedTransaction: Transaction) => {
     if (onUpdateTransaction) {
       onUpdateTransaction(updatedTransaction);
@@ -35,16 +31,13 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
     // 직접 컨텍스트를 통해 업데이트
     updateTransaction(updatedTransaction);
   };
-
   const handleDeleteTransaction = (id: string) => {
     // 직접 컨텍스트를 통해 삭제
     deleteTransaction(id);
   };
-  
   const formatCurrency = (amount: number) => {
     return amount.toLocaleString('ko-KR') + '원';
   };
-
   return <div className="mt-6 mb-[50px]">
       <div className="flex justify-between items-center mb-3">
         <h2 className="text-lg font-semibold">최근 지출</h2>
@@ -53,7 +46,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} onClick={() => handleTransactionClick(transaction)} className="flex justify-between py-3 px-4 cursor-pointer hover:bg-gray-50">
+        {transactions.length > 0 ? transactions.map(transaction => <div key={transaction.id} onClick={() => handleTransactionClick(transaction)} className="flex justify-between py-3 cursor-pointer hover:bg-gray-50 px-[5px]">
               <div className="flex items-center">
                 <TransactionIcon category={transaction.category} />
                 <div className="ml-3">
@@ -73,5 +66,4 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
       {selectedTransaction && <TransactionEditDialog transaction={selectedTransaction} open={isDialogOpen} onOpenChange={setIsDialogOpen} onSave={handleUpdateTransaction} onDelete={handleDeleteTransaction} />}
     </div>;
 };
-
-export default RecentTransactionsSection;
+export default RecentTransactionsSection;