Refactor RecentTransactionsSection

Further refactors RecentTransactionsSection to separate remaining logic. Creates additional hooks and utility files as needed.

src/hooks/transactions/useRecentTransactions.ts

@@ -4,7 +4,7 @@ import { toast } from '@/hooks/useToast.wrapper';
 
 /**
  * 최근 거래내역 관련 로직을 처리하는 커스텀 훅
- * 삭제 로직과 상태 관리 등을 담당
+ * 삭제 로직과 상태 관리를 담당
  */
 export const useRecentTransactions = (
   deleteTransaction: (id: string) => void
@@ -58,8 +58,9 @@ export const useRecentTransactions = (
         }, 900);
 
         // 비동기 작업을 동기적으로 처리하여 UI 블로킹 방지
-        setTimeout(async () => {
+        setTimeout(() => {
           try {
+            // BudgetContext의 deleteTransaction 함수 호출
             deleteTransaction(id);
 
             // 안전장치 타임아웃 제거
@@ -73,8 +74,23 @@ export const useRecentTransactions = (
               setIsDeleting(false);
               deletingIdRef.current = null;
             }, 100);
+            
+            // 성공 메시지 표시
+            toast({
+              title: "항목이 삭제되었습니다",
+              description: "지출 내역이 성공적으로 삭제되었습니다.",
+              duration: 1500
+            });
           } catch (err) {
             console.error('삭제 처리 오류:', err);
+            
+            // 에러 메시지 표시
+            toast({
+              title: "삭제 실패",
+              description: "항목을 삭제하는 중 오류가 발생했습니다.",
+              variant: "destructive",
+              duration: 1500
+            });
           }
         }, 0);
 

src/hooks/transactions/useRecentTransactionsDialog.ts

@@ -0,0 +1,32 @@
+
+import { useState } from 'react';
+import { Transaction } from '@/contexts/budget/types';
+
+/**
+ * 최근 거래내역의 다이얼로그 상태를 관리하는 커스텀 훅
+ */
+export const useRecentTransactionsDialog = () => {
+  const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(null);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const handleTransactionClick = (transaction: Transaction) => {
+    setSelectedTransaction(transaction);
+    setIsDialogOpen(true);
+  };
+
+  const handleCloseDialog = () => {
+    setIsDialogOpen(false);
+    // 약간의 딜레이 후 선택된 트랜잭션 초기화 (애니메이션 완료 후)
+    setTimeout(() => {
+      setSelectedTransaction(null);
+    }, 300);
+  };
+
+  return {
+    selectedTransaction,
+    isDialogOpen,
+    handleTransactionClick,
+    handleCloseDialog,
+    setIsDialogOpen
+  };
+};