Fix data reset and deletion issues

- Ensure complete cloud data deletion during data reset.
- Resolve app freeze issue when deleting transactions on the transaction history page.

src/pages/Transactions.tsx

@@ -23,6 +23,7 @@ const Transactions = () => {
 
   const { budgetData } = useBudget();
   const [isDataLoaded, setIsDataLoaded] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
 
   // 데이터 로드 상태 관리
   useEffect(() => {
@@ -42,6 +43,28 @@ const Transactions = () => {
     groupedTransactions[datePart].push(transaction);
   });
 
+  // 트랜잭션 삭제 핸들러 (예외 처리 개선)
+  const handleTransactionDelete = (id: string) => {
+    try {
+      console.log('Transactions 페이지에서 트랜잭션 삭제:', id);
+      // 삭제 중임을 표시
+      setIsProcessing(true);
+      
+      // 1초 후 처리 완료 상태로 변경 (비동기 작업 완료 보장)
+      setTimeout(() => {
+        setIsProcessing(false);
+      }, 1000);
+      
+      // 트랜잭션 목록 새로고침 (지연시켜 처리)
+      setTimeout(() => {
+        refreshTransactions();
+      }, 300);
+    } catch (error) {
+      console.error('트랜잭션 삭제 처리 중 오류:', error);
+      setIsProcessing(false);
+    }
+  };
+
   // 페이지 포커스나 가시성 변경 시 데이터 새로고침
   useEffect(() => {
     const handleVisibilityChange = () => {
@@ -65,6 +88,9 @@ const Transactions = () => {
     };
   }, [refreshTransactions]);
 
+  // 로딩이나 처리 중이면 비활성화된 UI 상태 표시
+  const isDisabled = isLoading || isProcessing;
+
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
@@ -81,6 +107,7 @@ const Transactions = () => {
               className="bg-transparent flex-1 outline-none text-sm"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
+              disabled={isDisabled}
             />
           </div>
           
@@ -89,6 +116,7 @@ const Transactions = () => {
             <button 
               className="neuro-flat p-2 rounded-full"
               onClick={handlePrevMonth}
+              disabled={isDisabled}
             >
               <ChevronLeft size={20} />
             </button>
@@ -101,6 +129,7 @@ const Transactions = () => {
             <button 
               className="neuro-flat p-2 rounded-full"
               onClick={handleNextMonth}
+              disabled={isDisabled}
             >
               <ChevronRight size={20} />
             </button>
@@ -123,16 +152,16 @@ const Transactions = () => {
           </div>
         </header>
 
-        {/* Loading State */}
-        {isLoading && (
+        {/* Loading or Processing State */}
+        {(isLoading || isProcessing) && (
           <div className="flex justify-center items-center py-10">
             <Loader2 className="h-8 w-8 animate-spin text-neuro-income" />
-            <span className="ml-2 text-gray-500">로딩 중...</span>
+            <span className="ml-2 text-gray-500">{isProcessing ? '처리 중...' : '로딩 중...'}</span>
           </div>
         )}
 
         {/* Empty State */}
-        {!isLoading && transactions.length === 0 && (
+        {!isLoading && !isProcessing && transactions.length === 0 && (
           <div className="text-center py-10">
             <p className="text-gray-500 mb-3">
               {searchQuery.trim() 
@@ -143,6 +172,7 @@ const Transactions = () => {
               <button 
                 className="text-neuro-income"
                 onClick={() => setSearchQuery('')}
+                disabled={isDisabled}
               >
                 검색 초기화
               </button>
@@ -151,9 +181,9 @@ const Transactions = () => {
         )}
 
         {/* Transactions By Date */}
-        {!isLoading && transactions.length > 0 && (
+        {!isLoading && !isProcessing && transactions.length > 0 && (
           <div className="space-y-6 mb-[50px]">
-            {Object.entries(groupedTransactions).map(([date, transactions]) => (
+            {Object.entries(groupedTransactions).map(([date, dateTransactions]) => (
               <div key={date}>
                 <div className="flex items-center gap-2 mb-3">
                   <div className="h-1 flex-1 neuro-pressed"></div>
@@ -162,10 +192,11 @@ const Transactions = () => {
                 </div>
                 
                 <div className="grid gap-3">
-                  {transactions.map(transaction => (
+                  {dateTransactions.map(transaction => (
                     <TransactionCard 
                       key={transaction.id} 
                       transaction={transaction}
+                      onDelete={handleTransactionDelete}
                     />
                   ))}
                 </div>