optimize boot sequnse

src/contexts/budget/hooks/useTransactionState.ts

@@ -16,39 +16,46 @@ export const useTransactionState = () => {
 
   // 초기 트랜잭션 로드 및 이벤트 리스너 설정
   useEffect(() => {
-    const loadTransactions = () => {
-      console.log('트랜잭션 로드 시도 중...');
-      const storedTransactions = loadTransactionsFromStorage();
-      console.log('트랜잭션 로드됨:', storedTransactions.length, '개');
-      setTransactions(storedTransactions);
+    // 트랜잭션 로드 함수 - 비동기 처리로 변경
+    const loadTransactions = async () => {
+      try {
+        console.log('트랜잭션 로드 시도 중...');
+        
+        // 비동기 작업을 마이크로태스크로 지연
+        await new Promise<void>(resolve => queueMicrotask(() => resolve()));
+        
+        const storedTransactions = loadTransactionsFromStorage();
+        console.log('트랜잭션 로드됨:', storedTransactions.length, '개');
+        
+        // 상태 업데이트를 마이크로태스크로 지연
+        queueMicrotask(() => {
+          setTransactions(storedTransactions);
+        });
+      } catch (error) {
+        console.error('트랜잭션 로드 오류:', error);
+      }
     };
 
-    // 초기 로드
-    loadTransactions();
+    // 초기 로드 - 지연 시간 추가
+    setTimeout(() => {
+      loadTransactions();
+    }, 100); // 지연된 초기 로드
 
-    // 이벤트 리스너 추가
+    // 이벤트 리스너 추가 - 최소한으로 유지
     const handleTransactionUpdate = (e?: StorageEvent) => {
-      console.log('트랜잭션 업데이트 이벤트 감지:', e?.key);
       if (!e || e.key === 'transactions' || e.key === null) {
         loadTransactions();
       }
     };
     
-    window.addEventListener('transactionUpdated', () => handleTransactionUpdate());
-    window.addEventListener('transactionDeleted', () => handleTransactionUpdate());
-    window.addEventListener('transactionAdded', () => handleTransactionUpdate());
+    // 필수 이벤트만 등록
+    const transactionUpdateHandler = () => handleTransactionUpdate();
+    window.addEventListener('transactionUpdated', transactionUpdateHandler);
     window.addEventListener('storage', handleTransactionUpdate);
-    window.addEventListener('focus', () => {
-      console.log('창 포커스: 트랜잭션 새로고침');
-      loadTransactions();
-    });
     
     return () => {
-      window.removeEventListener('transactionUpdated', () => handleTransactionUpdate());
-      window.removeEventListener('transactionDeleted', () => handleTransactionUpdate());
-      window.removeEventListener('transactionAdded', () => handleTransactionUpdate());
+      window.removeEventListener('transactionUpdated', transactionUpdateHandler);
       window.removeEventListener('storage', handleTransactionUpdate);
-      window.removeEventListener('focus', () => loadTransactions());
     };
   }, []);
 
@@ -74,7 +81,7 @@ export const useTransactionState = () => {
     });
   }, []);
 
-  // 트랜잭션 삭제 함수 - 안정성 개선
+  // 트랜잭션 삭제 함수 - 성능 최적화 및 안정성 개선
   const deleteTransaction = useCallback((transactionId: string) => {
     // 이미 삭제 중이면 중복 삭제 방지
     if (isDeleting) {
@@ -82,57 +89,59 @@ export const useTransactionState = () => {
       return;
     }
     
-    console.log('트랜잭션 삭제 시작:', transactionId);
-    
     // 중복 삭제 방지
     if (lastDeletedId === transactionId) {
       console.log('중복 삭제 요청 무시:', transactionId);
       return;
     }
     
-    setIsDeleting(true);
-    setLastDeletedId(transactionId);
-    
-    try {
-      setTransactions(prev => {
-        // 기존 트랜잭션 목록 백업 (문제 발생 시 복원용)
-        const originalTransactions = [...prev];
-        
-        // 삭제할 항목 필터링
-        const updated = prev.filter(transaction => transaction.id !== transactionId);
-        
-        // 항목이 실제로 삭제되었는지 확인
-        if (updated.length === originalTransactions.length) {
-          console.log('삭제할 트랜잭션을 찾을 수 없음:', transactionId);
-          setIsDeleting(false);
-          return originalTransactions;
+    // 삭제 상태 설정 - 마이크로태스크로 지연
+    queueMicrotask(() => {
+      setIsDeleting(true);
+      setLastDeletedId(transactionId);
+      
+      // 삭제 작업을 마이크로태스크로 진행하여 UI 차단 방지
+      queueMicrotask(() => {
+        try {
+          setTransactions(prev => {
+            // 삭제할 항목 필터링 - 성능 최적화
+            const updated = prev.filter(transaction => transaction.id !== transactionId);
+            
+            // 항목이 실제로 삭제되었는지 확인
+            if (updated.length === prev.length) {
+              console.log('삭제할 트랜잭션을 찾을 수 없음:', transactionId);
+              return prev; // 변경 없음
+            }
+            
+            // 저장소 업데이트를 마이크로태스크로 진행
+            queueMicrotask(() => {
+              saveTransactionsToStorage(updated);
+              
+              // 토스트 메시지 표시
+              toast({
+                title: "지출이 삭제되었습니다",
+                description: "지출 항목이 성공적으로 삭제되었습니다.",
+              });
+            });
+            
+            return updated;
+          });
+        } catch (error) {
+          console.error('트랜잭션 삭제 중 오류 발생:', error);
+          toast({
+            title: "삭제 실패",
+            description: "지출 항목 삭제 중 오류가 발생했습니다.",
+            variant: "destructive"
+          });
+        } finally {
+          // 삭제 상태 초기화 (500ms 후) - 시간 단축
+          setTimeout(() => {
+            setIsDeleting(false);
+            setLastDeletedId(null);
+          }, 500);
         }
-        
-        // 저장소에 업데이트된 목록 저장
-        saveTransactionsToStorage(updated);
-        
-        // 토스트 메시지 표시
-        toast({
-          title: "지출이 삭제되었습니다",
-          description: "지출 항목이 성공적으로 삭제되었습니다.",
-        });
-        
-        return updated;
       });
-    } catch (error) {
-      console.error('트랜잭션 삭제 중 오류 발생:', error);
-      toast({
-        title: "삭제 실패",
-        description: "지출 항목 삭제 중 오류가 발생했습니다.",
-        variant: "destructive"
-      });
-    } finally {
-      // 삭제 상태 초기화 (1초 후)
-      setTimeout(() => {
-        setIsDeleting(false);
-        setLastDeletedId(null);
-      }, 1000);
-    }
+    });
   }, [lastDeletedId, isDeleting]);
 
   // 트랜잭션 초기화 함수