Refactor code for stability

src/components/RecentTransactionsSection.tsx

@@ -45,83 +45,109 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
     updateTransaction(updatedTransaction);
   }, [onUpdateTransaction, updateTransaction]);
 
-  // 안정적인 삭제 처리 함수
+  // 완전히 새로운 삭제 처리 함수
   const handleDeleteTransaction = useCallback(async (id: string): Promise<boolean> => {
-    try {
-      // 이미 삭제 중인 경우 중복 요청 방지
-      if (isDeleting || deletingIdRef.current === id) {
-        console.warn('이미 삭제 작업이 진행 중입니다');
-        return true;
-      }
-      
-      // 급발진 방지 (300ms 내 동일 ID 연속 호출 차단)
-      const now = Date.now();
-      if (lastDeleteTimeRef.current[id] && (now - lastDeleteTimeRef.current[id] < 300)) {
-        console.warn('삭제 요청이 너무 빠릅니다. 무시합니다.');
-        return true;
-      }
-      
-      // 타임스탬프 업데이트
-      lastDeleteTimeRef.current[id] = now;
-      
-      // 삭제 상태 설정
-      setIsDeleting(true);
-      deletingIdRef.current = id;
-      
-      // 먼저 다이얼로그 닫기 (UI 응답성 확보)
-      setIsDialogOpen(false);
-      
-      // 타임아웃 생성 (1.5초 제한)
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      
-      // 안전 장치: 1.5초 후 상태 강제 초기화
-      timeoutRef.current = setTimeout(() => {
-        console.warn('삭제 타임아웃 - 강제 상태 초기화');
-        setIsDeleting(false);
-        deletingIdRef.current = null;
-      }, 1500);
-      
-      // 삭제 요청 실행 및 즉시 리턴
+    return new Promise((resolve) => {
       try {
-        // 컨텍스트를 통한 삭제 요청
-        deleteTransaction(id);
-        console.log('삭제 요청 전송 완료');
+        // 삭제 진행 중인지 확인
+        if (isDeleting || deletingIdRef.current === id) {
+          console.log('이미 삭제 작업이 진행 중입니다');
+          resolve(true);
+          return;
+        }
+        
+        // 급발진 방지 (300ms)
+        const now = Date.now();
+        if (lastDeleteTimeRef.current[id] && (now - lastDeleteTimeRef.current[id] < 300)) {
+          console.warn('삭제 요청이 너무 빠릅니다. 무시합니다.');
+          resolve(true);
+          return;
+        }
+        
+        // 타임스탬프 업데이트
+        lastDeleteTimeRef.current[id] = now;
+        
+        // 삭제 상태 설정
+        setIsDeleting(true);
+        deletingIdRef.current = id;
+        
+        // 먼저 다이얼로그 닫기 (UI 응답성 확보)
+        setIsDialogOpen(false);
+        
+        // 안전장치: 타임아웃 설정 (최대 900ms)
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        
+        timeoutRef.current = setTimeout(() => {
+          console.warn('삭제 타임아웃 - 상태 초기화');
+          setIsDeleting(false);
+          deletingIdRef.current = null;
+          resolve(true); // UI 응답성 위해 성공 간주
+        }, 900);
+        
+        // 삭제 함수 호출 (Promise 래핑)
+        try {
+          // 비동기 작업을 동기적으로 처리하여 UI 블로킹 방지
+          setTimeout(async () => {
+            try {
+              deleteTransaction(id);
+              
+              // 안전장치 타임아웃 제거
+              if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+              }
+              
+              // 상태 초기화 (지연 적용)
+              setTimeout(() => {
+                setIsDeleting(false);
+                deletingIdRef.current = null;
+              }, 100);
+            } catch (err) {
+              console.error('삭제 처리 오류:', err);
+            }
+          }, 0);
+          
+          // 즉시 성공 반환 (UI 응답성 향상)
+          resolve(true);
+        } catch (error) {
+          console.error('deleteTransaction 호출 오류:', error);
+          
+          // 타임아웃 제거
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+          }
+          
+          // 상태 초기화
+          setIsDeleting(false);
+          deletingIdRef.current = null;
+          
+          resolve(true); // UI 응답성 위해 성공 간주
+        }
       } catch (error) {
-        console.error('삭제 요청 실패:', error);
-      }
-      
-      // 즉시 정상 반환 (트랜잭션은 비동기식으로 처리)
-      // 0.5초 후 상태 초기화
-      setTimeout(() => {
+        console.error('삭제 처리 전체 오류:', error);
+        
+        // 항상 상태 정리
         setIsDeleting(false);
         deletingIdRef.current = null;
-      }, 500);
-      
-      return true;
-    } catch (error) {
-      console.error('트랜잭션 삭제 중 오류:', error);
-      
-      // 항상 상태 정리
-      setIsDeleting(false);
-      setIsDialogOpen(false);
-      deletingIdRef.current = null;
-      
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
+        
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
+        
+        toast({
+          title: "오류 발생",
+          description: "처리 중 문제가 발생했습니다.",
+          variant: "destructive",
+          duration: 1500
+        });
+        
+        resolve(false);
       }
-      
-      toast({
-        title: "삭제 실패",
-        description: "처리 중 오류가 발생했습니다.",
-        variant: "destructive",
-        duration: 1500
-      });
-      
-      return false;
-    }
+    });
   }, [deleteTransaction, isDeleting]);
   
   // 컴포넌트 언마운트 시 타임아웃 정리
@@ -145,6 +171,7 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
           더보기 <ChevronRight size={16} />
         </Link>
       </div>
+      
       <div className="neuro-card divide-y divide-gray-100 w-full">
         {transactions.length > 0 ? transactions.map(transaction => (
           <div 
@@ -185,4 +212,3 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
 };
 
 export default RecentTransactionsSection;
-