Improve sync logging

Add more detailed logging for sync functionality to improve issue tracking.

src/contexts/budget/hooks/useTransactionState.ts

@@ -7,6 +7,7 @@ import {
   clearAllTransactions 
 } from '../storage';
 import { toast } from '@/hooks/useToast.wrapper'; // 래퍼 사용
+import { addToDeletedTransactions } from '@/utils/sync/transaction/deletedTransactionsTracker';
 
 // 트랜잭션 상태 관리 훅
 export const useTransactionState = () => {
@@ -19,20 +20,20 @@ export const useTransactionState = () => {
     // 트랜잭션 로드 함수 - 비동기 처리로 변경
     const loadTransactions = async () => {
       try {
-        console.log('트랜잭션 로드 시도 중...');
+        console.log('[트랜잭션 상태] 트랜잭션 로드 시도 중...');
         
         // 비동기 작업을 마이크로태스크로 지연
         await new Promise<void>(resolve => queueMicrotask(() => resolve()));
         
         const storedTransactions = loadTransactionsFromStorage();
-        console.log('트랜잭션 로드됨:', storedTransactions.length, '개');
+        console.log('[트랜잭션 상태] 트랜잭션 로드됨:', storedTransactions.length, '개');
         
         // 상태 업데이트를 마이크로태스크로 지연
         queueMicrotask(() => {
           setTransactions(storedTransactions);
         });
       } catch (error) {
-        console.error('트랜잭션 로드 오류:', error);
+        console.error('[트랜잭션 상태] 트랜잭션 로드 오류:', error);
       }
     };
 
@@ -61,9 +62,16 @@ export const useTransactionState = () => {
 
   // 트랜잭션 추가 함수
   const addTransaction = useCallback((newTransaction: Transaction) => {
-    console.log('새 트랜잭션 추가:', newTransaction);
+    console.log('[트랜잭션 상태] 새 트랜잭션 추가:', newTransaction);
+    
+    // 현재 시간을 타임스탬프로 추가
+    const transactionWithTimestamp = {
+      ...newTransaction,
+      localTimestamp: new Date().toISOString()
+    };
+    
     setTransactions(prev => {
-      const updated = [newTransaction, ...prev];
+      const updated = [transactionWithTimestamp, ...prev];
       saveTransactionsToStorage(updated);
       return updated;
     });
@@ -71,10 +79,17 @@ export const useTransactionState = () => {
 
   // 트랜잭션 업데이트 함수
   const updateTransaction = useCallback((updatedTransaction: Transaction) => {
-    console.log('트랜잭션 업데이트:', updatedTransaction);
+    console.log('[트랜잭션 상태] 트랜잭션 업데이트:', updatedTransaction);
+    
+    // 현재 시간을 타임스탬프로 업데이트
+    const transactionWithTimestamp = {
+      ...updatedTransaction,
+      localTimestamp: new Date().toISOString()
+    };
+    
     setTransactions(prev => {
       const updated = prev.map(transaction => 
-        transaction.id === updatedTransaction.id ? updatedTransaction : transaction
+        transaction.id === updatedTransaction.id ? transactionWithTimestamp : transaction
       );
       saveTransactionsToStorage(updated);
       return updated;
@@ -85,13 +100,13 @@ export const useTransactionState = () => {
   const deleteTransaction = useCallback((transactionId: string) => {
     // 이미 삭제 중이면 중복 삭제 방지
     if (isDeleting) {
-      console.log('이미 삭제 작업이 진행 중입니다.');
+      console.log('[트랜잭션 상태] 이미 삭제 작업이 진행 중입니다.');
       return;
     }
     
     // 중복 삭제 방지
     if (lastDeletedId === transactionId) {
-      console.log('중복 삭제 요청 무시:', transactionId);
+      console.log('[트랜잭션 상태] 중복 삭제 요청 무시:', transactionId);
       return;
     }
     
@@ -103,19 +118,35 @@ export const useTransactionState = () => {
       // 삭제 작업을 마이크로태스크로 진행하여 UI 차단 방지
       queueMicrotask(() => {
         try {
+          console.log(`[트랜잭션 상태] 삭제 시작: ${transactionId}`);
+          
           setTransactions(prev => {
+            // 삭제할 트랜잭션 찾기
+            const transactionToDelete = prev.find(t => t.id === transactionId);
+            if (!transactionToDelete) {
+              console.log('[트랜잭션 상태] 삭제할 트랜잭션을 찾을 수 없음:', transactionId);
+              return prev; // 변경 없음
+            }
+            
+            console.log(`[트랜잭션 상태] 삭제할 트랜잭션: "${transactionToDelete.title}", 금액: ${transactionToDelete.amount}원`);
+            
             // 삭제할 항목 필터링 - 성능 최적화
             const updated = prev.filter(transaction => transaction.id !== transactionId);
             
             // 항목이 실제로 삭제되었는지 확인
             if (updated.length === prev.length) {
-              console.log('삭제할 트랜잭션을 찾을 수 없음:', transactionId);
+              console.log('[트랜잭션 상태] 삭제할 트랜잭션을 찾을 수 없음:', transactionId);
               return prev; // 변경 없음
             }
             
+            // 클라우드 동기화를 위해 삭제된 트랜잭션 ID 추적
+            addToDeletedTransactions(transactionId);
+            console.log(`[트랜잭션 상태] 삭제 트랜잭션 추적 목록에 추가: ${transactionId}`);
+            
             // 저장소 업데이트를 마이크로태스크로 진행
             queueMicrotask(() => {
               saveTransactionsToStorage(updated);
+              console.log(`[트랜잭션 상태] 로컬 저장소 업데이트 완료`);
               
               // 토스트 메시지 표시
               toast({
@@ -127,7 +158,7 @@ export const useTransactionState = () => {
             return updated;
           });
         } catch (error) {
-          console.error('트랜잭션 삭제 중 오류 발생:', error);
+          console.error('[트랜잭션 상태] 트랜잭션 삭제 중 오류 발생:', error);
           toast({
             title: "삭제 실패",
             description: "지출 항목 삭제 중 오류가 발생했습니다.",
@@ -138,6 +169,7 @@ export const useTransactionState = () => {
           setTimeout(() => {
             setIsDeleting(false);
             setLastDeletedId(null);
+            console.log('[트랜잭션 상태] 삭제 상태 초기화 완료');
           }, 500);
         }
       });
@@ -146,14 +178,14 @@ export const useTransactionState = () => {
 
   // 트랜잭션 초기화 함수
   const resetTransactions = useCallback(() => {
-    console.log('모든 트랜잭션 초기화');
+    console.log('[트랜잭션 상태] 모든 트랜잭션 초기화');
     clearAllTransactions();
     setTransactions([]);
   }, []);
 
   // 트랜잭션 개수가 변경될 때 로그 기록
   useEffect(() => {
-    console.log('현재 트랜잭션 개수:', transactions.length);
+    console.log('[트랜잭션 상태] 현재 트랜잭션 개수:', transactions.length);
   }, [transactions.length]);
 
   return {