Implement code changes

The prompt asked to implement code changes.

src/pages/Transactions.tsx

@@ -1,5 +1,5 @@
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import NavBar from '@/components/NavBar';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { useBudget } from '@/contexts/BudgetContext';
@@ -9,6 +9,9 @@ import TransactionsContent from '@/components/transactions/TransactionsContent';
 import { Transaction } from '@/components/TransactionCard';
 import { toast } from '@/hooks/useToast.wrapper';
 
+/**
+ * 거래내역 페이지 - 성능 및 안정성 개선 버전
+ */
 const Transactions = () => {
   const { 
     transactions, 
@@ -30,6 +33,16 @@ const Transactions = () => {
   
   // 더블 클릭 방지용 래퍼
   const deletionTimestampRef = useRef<Record<string, number>>({});
+  // 페이지 가시성 상태 추적
+  const isVisibleRef = useRef(true);
+  // 타임아웃 ID 관리
+  const timeoutIdsRef = useRef<Array<ReturnType<typeof setTimeout>>>([]);
+  
+  // 타임아웃 정리 함수
+  const clearAllTimeouts = useCallback(() => {
+    timeoutIdsRef.current.forEach(id => clearTimeout(id));
+    timeoutIdsRef.current = [];
+  }, []);
 
   // 데이터 로드 상태 관리
   useEffect(() => {
@@ -39,17 +52,17 @@ const Transactions = () => {
   }, [budgetData, isLoading]);
 
   // 트랜잭션 삭제 핸들러 - 완전히 개선된 버전
-  const handleTransactionDelete = async (id: string): Promise<boolean> => {
-    // 삭제 중인지 확인
+  const handleTransactionDelete = useCallback(async (id: string): Promise<boolean> => {
+    // 삭제 중 또는 다른 작업 중인지 확인
     if (isProcessing || deletingId) {
       console.log('이미 삭제 작업이 진행 중입니다:', deletingId);
       return true;
     }
     
-    // 더블 클릭 방지 - 최근 2초 이내 동일한 삭제 요청이 있었는지 확인
+    // 더블 클릭 방지 (2초 이내 동일 요청)
     const now = Date.now();
     const lastDeletionTime = deletionTimestampRef.current[id] || 0;
-    if (now - lastDeletionTime < 2000) { // 2초
+    if (now - lastDeletionTime < 2000) {
       console.log('중복 삭제 요청 무시:', id);
       return true;
     }
@@ -64,23 +77,22 @@ const Transactions = () => {
       
       console.log('트랜잭션 삭제 시작 (ID):', id);
       
-      // 안전한 타임아웃 설정 (최대 5초)
+      // 삭제 함수 호출 (Promise로 래핑)
+      const deletePromise = deleteTransaction(id);
+      
+      // 안전한 타임아웃 설정 (5초)
       const timeoutPromise = new Promise<boolean>((resolve) => {
-        setTimeout(() => {
-          console.warn('Transactions 페이지 삭제 타임아웃 - 강제 완료');
-          setIsProcessing(false);
-          setDeletingId(null);
+        const timeoutId = setTimeout(() => {
+          console.warn('삭제 타임아웃 - 강제 완료');
           resolve(true); // UI는 이미 업데이트되었으므로 성공으로 간주
         }, 5000);
+        
+        // 타임아웃 ID 관리
+        timeoutIdsRef.current.push(timeoutId);
       });
       
-      // 삭제 함수 호출
-      const deletePromise = deleteTransaction(id);
-      
       // 둘 중 하나가 먼저 완료되면 반환
       const result = await Promise.race([deletePromise, timeoutPromise]);
-      
-      console.log('삭제 작업 최종 결과:', result);
       return result;
     } catch (error) {
       console.error('삭제 처리 중 오류:', error);
@@ -92,30 +104,35 @@ const Transactions = () => {
       });
       return false;
     } finally {
-      // 상태 초기화 (즉시)
+      // 상태 초기화
       setIsProcessing(false);
       setDeletingId(null);
       
       // 새로고침 (약간 지연)
-      setTimeout(() => {
-        if (!isLoading) {
+      const refreshTimeoutId = setTimeout(() => {
+        if (!isLoading && isVisibleRef.current) {
           refreshTransactions();
         }
       }, 500);
+      
+      // 타임아웃 ID 관리
+      timeoutIdsRef.current.push(refreshTimeoutId);
     }
-  };
+  }, [isProcessing, deletingId, deleteTransaction, isLoading, refreshTransactions]);
 
-  // 페이지 포커스나 가시성 변경 시 데이터 새로고침
+  // 페이지 포커스/가시성 관리
   useEffect(() => {
     const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible' && !isProcessing) {
+      isVisibleRef.current = document.visibilityState === 'visible';
+      
+      if (isVisibleRef.current && !isProcessing) {
         console.log('거래내역 페이지 보임 - 데이터 새로고침');
         refreshTransactions();
       }
     };
 
     const handleFocus = () => {
-      if (!isProcessing) {
+      if (!isProcessing && isVisibleRef.current) {
         console.log('거래내역 페이지 포커스 - 데이터 새로고침');
         refreshTransactions();
       }
@@ -127,11 +144,12 @@ const Transactions = () => {
     return () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
       window.removeEventListener('focus', handleFocus);
+      clearAllTimeouts();
     };
-  }, [refreshTransactions, isProcessing]);
+  }, [refreshTransactions, isProcessing, clearAllTimeouts]);
 
   // 트랜잭션을 날짜별로 그룹화
-  const groupTransactionsByDate = (transactions: Transaction[]): Record<string, Transaction[]> => {
+  const groupTransactionsByDate = useCallback((transactions: Transaction[]): Record<string, Transaction[]> => {
     const grouped: Record<string, Transaction[]> = {};
     
     transactions.forEach(transaction => {
@@ -145,7 +163,7 @@ const Transactions = () => {
     });
     
     return grouped;
-  };
+  }, []);
 
   // 로딩이나 처리 중이면 비활성화된 UI 상태 표시
   const isDisabled = isLoading || isProcessing;