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

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

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

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

src/components/AppVersionInfo.tsx

@@ -0,0 +1,125 @@
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import { getAppVersionInfo, isAndroidPlatform } from '@/utils/platform';
+
+interface AppVersionInfoProps {
+  className?: string;
+  showDevInfo?: boolean; // 개발자 정보 표시 여부
+}
+
+const AppVersionInfo: React.FC<AppVersionInfoProps> = ({ 
+  className,
+  showDevInfo = true 
+}) => {
+  const [versionInfo, setVersionInfo] = useState<{
+    versionName: string;
+    buildNumber: number;
+    versionCode?: number;
+  }>({
+    versionName: '1.0.0',
+    buildNumber: 1
+  });
+  
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [retries, setRetries] = useState(0);
+  
+  // 버전 정보 가져오기
+  const fetchVersionInfo = useCallback(async () => {
+    setLoading(true);
+    setError(false);
+    
+    try {
+      console.log('앱 버전 정보 요청 시작... (retries:', retries, ')');
+      console.log('현재 플랫폼은', isAndroidPlatform() ? 'Android' : '기타');
+      
+      // 재시도를 하는 경우 짤은 지연 추가
+      if (retries > 0) {
+        await new Promise(resolve => setTimeout(resolve, 300));
+      }
+      
+      const info = await getAppVersionInfo();
+      console.log('받은 앱 버전 정보:', info);
+      
+      // 데이터 검증 - 유효한 버전 정보인지 확인
+      if (!info || typeof info !== 'object') {
+        throw new Error('유효하지 않은 응답 형식');
+      }
+      
+      setVersionInfo({
+        versionName: info.versionName,
+        buildNumber: info.buildNumber,
+        versionCode: info.versionCode
+      });
+      
+      setLoading(false);
+      console.log('앱 버전 정보 표시 준비 완료');
+    } catch (error) {
+      console.error('버전 정보 가져오기 실패:', error);
+      setError(true);
+      setLoading(false);
+    }
+  }, [retries]);
+  
+  // 재시도 처리
+  const handleRetry = useCallback(() => {
+    setRetries(prev => prev + 1);
+    fetchVersionInfo();
+  }, [fetchVersionInfo]);
+  
+  // 초기화 완료 후 한번 더 시도하도록 설정
+  const initialLoadAttemptedRef = useRef(false);
+  
+  // 컴포넌트 마운트 시 즉시 실행 (IIFE)
+  useEffect(() => {
+    (async () => {
+      // 즉시 버전 정보 가져오기 시도
+      await fetchVersionInfo();
+      
+      // 300ms 후에 한번 더 시도 (네이티브 플러그인이 완전히 로드되지 않았을 경우 대비)
+      setTimeout(() => {
+        if (error || loading) {
+          fetchVersionInfo();
+          initialLoadAttemptedRef.current = true;
+        }
+      }, 1000);
+    })();
+    
+    // 개발 모드에서는 버전 정보 변경을 쉽게 확인하기 위해 주기적 갱신
+    if (process.env.NODE_ENV === 'development') {
+      const interval = setInterval(() => {
+        fetchVersionInfo();
+      }, 30000); // 30초마다 새로 가져오기
+      
+      return () => clearInterval(interval);
+    }
+  }, [fetchVersionInfo, error, loading]);
+  
+  return (
+    <div className={className}>
+      {loading ? (
+        <div className="py-1 text-center">
+          <p className="text-sm text-gray-400 animate-pulse">버전 정보 로딩 중...</p>
+        </div>
+      ) : error ? (
+        <div className="py-1 text-center">
+          <p className="text-sm text-red-500">빌드 정보 로딩 오류</p>
+          <button 
+            onClick={handleRetry}
+            className="text-xs text-blue-500 underline mt-1 px-2 py-0.5 rounded hover:bg-blue-50"
+          >
+            재시도
+          </button>
+        </div>
+      ) : (
+        <div className="py-1 text-center">
+          <p className="text-sm">앱 버전 {versionInfo.versionName} <span className="font-mono">(빌드 {versionInfo.buildNumber})</span></p>
+          {showDevInfo && versionInfo.versionCode && (
+            <p className="text-xs text-gray-400 mt-1 font-mono">versionCode: {versionInfo.versionCode}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AppVersionInfo;