Fix recent transactions deletion

Fixes an issue where deleting transactions from the recent expenses section of the homepage resulted in a malfunction.

src/components/RecentTransactionsSection.tsx

@@ -1,5 +1,5 @@
 
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Transaction } from './TransactionCard';
 import TransactionEditDialog from './TransactionEditDialog';
 import { ChevronRight } from 'lucide-react';
@@ -7,6 +7,7 @@ import { useBudget } from '@/contexts/BudgetContext';
 import { Link } from 'react-router-dom';
 import { categoryIcons } from '@/constants/categoryIcons';
 import TransactionIcon from './transaction/TransactionIcon';
+import { toast } from '@/hooks/useToast.wrapper';
 
 interface RecentTransactionsSectionProps {
   transactions: Transaction[];
@@ -19,41 +20,87 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
 }) => {
   const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const {
-    updateTransaction,
-    deleteTransaction
-  } = useBudget();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { updateTransaction, deleteTransaction } = useBudget();
 
   const handleTransactionClick = (transaction: Transaction) => {
     setSelectedTransaction(transaction);
     setIsDialogOpen(true);
   };
 
-  const handleUpdateTransaction = (updatedTransaction: Transaction) => {
+  const handleUpdateTransaction = useCallback((updatedTransaction: Transaction) => {
     if (onUpdateTransaction) {
       onUpdateTransaction(updatedTransaction);
     }
     // 직접 컨텍스트를 통해 업데이트
     updateTransaction(updatedTransaction);
-  };
+  }, [onUpdateTransaction, updateTransaction]);
 
-  // 타입 불일치 해결: boolean 또는 Promise<boolean> 반환하도록 수정
-  const handleDeleteTransaction = async (id: string): Promise<boolean> => {
+  // 안정적인 삭제 처리 함수
+  const handleDeleteTransaction = useCallback(async (id: string): Promise<boolean> => {
     try {
-      // 직접 컨텍스트를 통해 삭제
-      deleteTransaction(id);
-      return true; // 삭제 성공 시 true 반환
+      // 이미 삭제 중인 경우 중복 요청 방지
+      if (isDeleting) {
+        console.warn('이미 삭제 작업이 진행 중입니다');
+        return true;
+      }
+      
+      setIsDeleting(true);
+      
+      // 먼저 다이얼로그 닫기 (UI 응답성 확보)
+      setIsDialogOpen(false);
+      
+      // 3초 타임아웃 설정 (UI 멈춤 방지)
+      const timeoutPromise = new Promise<boolean>(resolve => {
+        const timeout = setTimeout(() => {
+          console.warn('삭제 타임아웃 - 강제 완료');
+          setIsDeleting(false);
+          resolve(true);
+        }, 3000);
+        
+        return () => clearTimeout(timeout);
+      });
+      
+      // 실제 삭제 요청
+      const deletePromise = (async () => {
+        try {
+          deleteTransaction(id);
+          return true;
+        } catch (error) {
+          console.error('삭제 요청 실패:', error);
+          return false;
+        }
+      })();
+      
+      // 둘 중 먼저 완료되는 것으로 처리
+      await Promise.race([deletePromise, timeoutPromise]);
+      
+      setIsDeleting(false);
+      return true;
     } catch (error) {
       console.error('트랜잭션 삭제 중 오류:', error);
-      return false; // 삭제 실패 시 false 반환
+      
+      // 항상 상태 정리
+      setIsDeleting(false);
+      setIsDialogOpen(false);
+      
+      toast({
+        title: "삭제 실패",
+        description: "처리 중 오류가 발생했습니다.",
+        variant: "destructive",
+        duration: 1500
+      });
+      
+      return false;
     }
-  };
+  }, [deleteTransaction, isDeleting]);
 
   const formatCurrency = (amount: number) => {
     return amount.toLocaleString('ko-KR') + '원';
   };
 
-  return <div className="mt-6 mb-[50px]">
+  return (
+    <div className="mt-6 mb-[50px]">
       <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">
@@ -61,25 +108,42 @@ 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 cursor-pointer hover:bg-gray-50 px-[5px]">
-              <div className="flex items-center">
-                <TransactionIcon category={transaction.category} />
-                <div className="ml-3">
-                  <h3 className="font-medium text-black text-left">{transaction.title}</h3>
-                  <p className="text-xs text-gray-500">{transaction.date}</p>
-                </div>
+        {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">
+                <h3 className="font-medium text-black text-left">{transaction.title}</h3>
+                <p className="text-xs text-gray-500">{transaction.date}</p>
               </div>
-              <div className="text-right">
-                <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="text-right">
+              <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>
+        )}
       </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;