트랜잭션 삭제 안정성 개선 및 앱 버전 정보 UI 개선

1. 트랜잭션 삭제 기능 안정성 개선:
   - 비동기 작업 최적화로 UI 응답성 향상
   - 메모리 누수 방지를 위한 취소 메커니즘 구현
   - 오류 처리 강화 및 UI 상태 복원 메커니즘 추가

2. 앱 버전 정보 표시 개선:
   - AppVersionInfo 컴포넌트 UI 디자인 개선
   - 설정 페이지 버전 정보 영역 스타일링 개선
   - 빌드 정보 즉시 로딩 구현

* 참고: UI 변경 사항이 포함되어 있으므로 Lovable 팀 리뷰 필요

src/hooks/transactions/useTransactionsOperations.ts

@@ -1,5 +1,5 @@
 
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { Transaction } from '@/components/TransactionCard';
 import { useAuth } from '@/contexts/auth/AuthProvider';
 import { toast } from '@/hooks/useToast.wrapper';
@@ -15,8 +15,10 @@ import {
  */
 export const useTransactionsOperations = (
   transactions: Transaction[],
-  setTransactions: (transactions: Transaction[]) => void
+  setTransactions: React.Dispatch<React.SetStateAction<Transaction[]>>
 ) => {
+  // 현재 진행 중인 삭제 작업 추적을 위한 ref
+  const pendingDeletionRef = useRef<Set<string>>(new Set());
   const { user } = useAuth();
 
   // 트랜잭션 업데이트
@@ -49,32 +51,160 @@ export const useTransactionsOperations = (
     }, 100);
   }, [transactions, setTransactions, user]);
 
-  // 트랜잭션 삭제
-  const deleteTransaction = useCallback((id: string) => {
-    const updatedTransactions = transactions.filter(transaction => transaction.id !== id);
-    
-    // 로컬 스토리지 업데이트
-    saveTransactionsToStorage(updatedTransactions);
-    
-    // 상태 업데이트
-    setTransactions(updatedTransactions);
-    
-    // Supabase 삭제 시도
-    if (user) {
-      deleteTransactionFromSupabase(user, id);
+  // 트랜잭션 삭제 - 안정성과 성능 개선 버전 (버그 수정 및 메모리 누수 방지)
+  const deleteTransaction = useCallback((id: string): Promise<boolean> => {
+    // pendingDeletionRef 초기화 확인
+    if (!pendingDeletionRef.current) {
+      pendingDeletionRef.current = new Set<string>();
     }
+
+    // 기존 promise를 변수로 저장해서 참조 가능하게 함
+    const promiseObj = new Promise<boolean>((resolve, reject) => {
+      // 삭제 작업 취소 플래그 초기화
+      let isCanceled = false;
+      let timeoutId: ReturnType<typeof setTimeout> | null = null;
+      
+      try {
+        console.log('트랜잭션 삭제 작업 시작 - ID:', id);
+        
+        // 이미 삭제 중인 트랜잭션인지 확인
+        if (pendingDeletionRef.current.has(id)) {
+          console.warn('이미 삭제 중인 트랜잭션입니다:', id);
+          reject(new Error('이미 삭제 중인 트랜잭션입니다'));
+          return;
+        }
+        
+        // 삭제할 트랜잭션이 존재하는지 확인 및 데이터 복사 보관
+        const transactionToDelete = transactions.find(t => t.id === id);
+        if (!transactionToDelete) {
+          console.warn('삭제할 트랜잭션이 존재하지 않음:', id);
+          reject(new Error('트랜잭션이 존재하지 않습니다'));
+          return;
+        }
+        
+        // 삭제 중인 상태로 표시
+        pendingDeletionRef.current.add(id);
+        
+        // 즉시 상태 업데이트 (현재 상태 복사를 통한 안전한 처리)
+        const originalTransactions = [...transactions]; // 복구를 위한 상태 복사
+        const updatedTransactions = transactions.filter(transaction => transaction.id !== id);
+        
+        // UI 업데이트 - 동기식 처리
+        setTransactions(updatedTransactions);
+        
+        // 사용자 인터페이스 응답성 감소 전에 이벤트 발생 처리
+        try {
+          window.dispatchEvent(new Event('transactionUpdated'));
+        } catch (eventError) {
+          console.warn('이벤트 발생 중 비치명적 오류:', eventError);
+        }
+        
+        // UI 스레드 블록하지 않는 너비로 requestAnimationFrame 사용
+        requestAnimationFrame(() => {
+          if (isCanceled) {
+            console.log('작업이 취소되었습니다.');
+            return;
+          }
+          
+          // 백그라운드 작업은 너비로 처리
+          timeoutId = setTimeout(() => {
+            try {
+              if (isCanceled) {
+                console.log('백그라운드 작업이 취소되었습니다.');
+                return;
+              }
+              
+              // 로컬 스토리지 업데이트
+              saveTransactionsToStorage(updatedTransactions);
+              
+              // Supabase 업데이트
+              if (user) {
+                deleteTransactionFromSupabase(user, id)
+                  .then(() => {
+                    if (!isCanceled) {
+                      console.log('Supabase 트랜잭션 삭제 성공');
+                      // 성공 로그만 추가, UI 업데이트는 이미 수행됨
+                    }
+                  })
+                  .catch(error => {
+                    console.error('Supabase 삭제 오류:', error);
+                    
+                    // 비동기 작업 실패 시 새로운 상태를 확인하여 상태 복원 로직 실행
+                    if (!isCanceled) {
+                      // 현재 상태에 해당 트랜잭션이 이미 있는지 확인
+                      const currentTransactions = [...transactions];
+                      const exists = currentTransactions.some(t => t.id === id);
+                      
+                      if (!exists) {
+                        console.log('서버 삭제 실패, 상태 복원 시도...');
+                        // 현재 상태에 없을 경우에만 상태 복원 시도
+                        setTransactions(prevState => {
+                          // 동일 트랜잭션이 없을 경우에만 추가
+                          const hasDuplicate = prevState.some(t => t.id === id);
+                          if (hasDuplicate) return prevState;
+                          
+                          // 삭제되었던 트랜잭션 다시 추가
+                          const newState = [...prevState, transactionToDelete];
+                          
+                          // 날짜 기준 정렬
+                          return newState.sort((a, b) => {
+                            return new Date(b.date).getTime() - new Date(a.date).getTime();
+                          });
+                        });
+                      }
+                    }
+                  })
+                  .finally(() => {
+                    if (!isCanceled) {
+                      // 작업 완료 후 보류 중인 삭제 목록에서 제거
+                      pendingDeletionRef.current?.delete(id);
+                    }
+                  });
+              } else {
+                // 사용자 정보 없을 경우 목록에서 제거
+                pendingDeletionRef.current?.delete(id);
+              }
+            } catch (storageError) {
+              console.error('스토리지 작업 중 오류:', storageError);
+              pendingDeletionRef.current?.delete(id);
+            }
+          }, 0); // 흥미로운 사실: setTimeout(fn, 0)은 requestAnimationFrame 이후에 실행되어 UI 업데이트 완료 후 처리됨
+        });
+        
+        // 상태 업데이트가 이미 수행되었으므로 즉시 성공 반환
+        console.log('트랜잭션 삭제 UI 업데이트 완료');
+        resolve(true);
+        
+        // 취소 기능을 가진 Promise 객체 생성
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (promiseObj as any).cancel = () => {
+          isCanceled = true;
+          
+          if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+          }
+          
+          pendingDeletionRef.current?.delete(id);
+          console.log('트랜잭션 삭제 작업 취소 완료');
+        };
+      } catch (error) {
+        console.error('트랜잭션 삭제 초기화 중 오류:', error);
+        
+        // 오류 발생 시 토스트 표시
+        toast({
+          title: "시스템 오류",
+          description: "지출 삭제 중 오류가 발생했습니다.",
+          duration: 2000,
+          variant: "destructive"
+        });
+        
+        // 캣치된 모든 오류에서 보류 삭제 표시 제거
+        pendingDeletionRef.current?.delete(id);
+        reject(error);
+      }
+    });
     
-    // 이벤트 발생
-    window.dispatchEvent(new Event('transactionUpdated'));
-    
-    // 약간의 지연을 두고 토스트 표시
-    setTimeout(() => {
-      toast({
-        title: "지출이 삭제되었습니다",
-        description: "선택한 지출 항목이 삭제되었습니다.",
-        duration: 3000
-      });
-    }, 100);
+    return promiseObj;
   }, [transactions, setTransactions, user]);
 
   return {