동기화 로직 최적화 및 타입 오류 수정

- SyncState 인터페이스 개선 및 타입 오류 해결
- withRetry 함수를 네트워크 유틸리티에서 재사용하여 코드 중복 제거
- 오류 처리 및 로깅 개선
- 트랜잭션 다운로드/업로드 로직 최적화

src/utils/syncUtils.ts

@@ -1,60 +1,47 @@
-import { isSyncEnabled, setSyncEnabled, getLastSyncTime, setLastSyncTime, initSyncSettings } from './sync/syncSettings';
-import { uploadTransactions, downloadTransactions, deleteTransactionFromServer } from './sync/transactionSync';
-import { uploadBudgets, downloadBudgets } from './sync/budget';
-import { clearCloudData } from './sync/clearCloudData';
+import { downloadTransactions, uploadTransactions } from './sync/transaction';
+import { downloadBudgets, uploadBudgets } from './sync/budget';
+import { isSyncEnabled, getLastSyncTime, setLastSyncTime } from './sync/syncSettings';
+import { RetryOptions } from './network/types';
+import { withRetry } from './network/retry';
 import { 
-  checkNetworkStatus, 
   getNetworkStatus, 
   setNetworkStatus, 
   startNetworkMonitoring, 
   stopNetworkMonitoring,
-  withRetry,
-  addToSyncQueue,
-  processPendingSyncQueue,
   onNetworkStatusChange,
   NetworkStatus,
-  RetryOptions
+  addToSyncQueue,
+  processPendingSyncQueue
 } from './networkUtils';
 
 // Export all utility functions to maintain the same public API
 export {
   isSyncEnabled,
-  setSyncEnabled,
-  uploadTransactions,
-  downloadTransactions,
-  deleteTransactionFromServer,
-  uploadBudgets,
-  downloadBudgets,
-  getLastSyncTime,
-  setLastSyncTime,
-  initSyncSettings,
-  clearCloudData,
-  // 네트워크 관련 함수 추가 내보내기
-  checkNetworkStatus,
   getNetworkStatus,
+  setNetworkStatus,
   startNetworkMonitoring,
   stopNetworkMonitoring,
-  onNetworkStatusChange
+  onNetworkStatusChange,
+  addToSyncQueue,
+  processPendingSyncQueue,
+  getLastSyncTime,
+  setLastSyncTime
 };
 
 /**
  * 동기화 상태 인터페이스
  */
 export interface SyncState {
-  isEnabled: boolean;
-  lastSyncTime: string | null;
-  networkStatus: NetworkStatus;
-  isSyncing: boolean;
-  error: string | null;
+  status: 'idle' | 'syncing' | 'success' | 'error' | 'partial';
+  message?: string;
+  lastSyncTime?: string;
 }
 
 // 현재 동기화 상태
 let syncState: SyncState = {
-  isEnabled: false,
-  lastSyncTime: null,
-  networkStatus: 'online',
-  isSyncing: false,
-  error: null
+  status: 'idle',
+  message: undefined,
+  lastSyncTime: getLastSyncTime()
 };
 
 /**
@@ -62,11 +49,9 @@ let syncState: SyncState = {
  */
 export const initSyncState = async (): Promise<void> => {
   syncState = {
-    isEnabled: isSyncEnabled(),
-    lastSyncTime: getLastSyncTime(),
-    networkStatus: getNetworkStatus(),
-    isSyncing: false,
-    error: null
+    status: 'idle',
+    message: undefined,
+    lastSyncTime: getLastSyncTime()
   };
   
   // 네트워크 모니터링 시작
@@ -74,7 +59,7 @@ export const initSyncState = async (): Promise<void> => {
   
   // 네트워크 상태 변경 리스너 등록
   onNetworkStatusChange((status) => {
-    syncState.networkStatus = status;
+    syncState.status = status === 'online' ? 'idle' : 'error';
     // 상태 변경 이벤트 발생
     window.dispatchEvent(new CustomEvent('syncStateChange', { detail: { ...syncState } }));
     
@@ -124,188 +109,155 @@ export const onSyncStateChange = (callback: (state: SyncState) => void): () => v
 };
 
 /**
- * Synchronize all data with Supabase
+ * 데이터 동기화를 위한 재시도 로직이 포함된 유틸리티 함수
+ * @param fn 실행할 함수
+ * @param options 재시도 옵션
  */
-export const syncAllData = async (userId: string): Promise<void> => {
-  if (!userId || !isSyncEnabled()) return;
+// export const withRetry = async <T>(
+//   fn: () => Promise<T>,
+//   options: RetryOptions
+// ): Promise<T> => {
+//   const { entityType, maxRetries = 3, retryDelay = 1500 } = options;
+//   let lastError: Error | unknown = null;
   
-  // 네트워크 상태 확인
-  const isOnline = await checkNetworkStatus();
-  if (!isOnline) {
-    const error = new Error('오프라인 상태에서 동기화할 수 없습니다.');
-    console.error('[동기화] 오류:', error);
-    updateSyncState({ error: error.message });
-    throw error;
-  }
+//   for (let attempt = 1; attempt <= maxRetries; attempt++) {
+//     try {
+//       if (attempt > 1) {
+//         console.log(`[동기화] ${entityType} 재시도 중... (${attempt}/${maxRetries})`);
+//       }
+      
+//       const result = await fn();
+//       if (attempt > 1) {
+//         console.log(`[동기화] ${entityType} 재시도 성공! (${attempt}/${maxRetries})`);
+//       }
+//       return result;
+//     } catch (error) {
+//       lastError = error;
+//       console.error(`[동기화] ${entityType} 실패 (시도 ${attempt}/${maxRetries}):`, error);
+      
+//       // 자세한 오류 정보 로깅
+//       try {
+//         console.error(`[동기화] 오류 상세 정보:`, JSON.stringify(error, null, 2));
+//       } catch (jsonError) {
+//         console.error(`[동기화] 오류 객체를 JSON으로 변환할 수 없음:`, error);
+//       }
+      
+//       if (attempt < maxRetries) {
+//         console.log(`[동기화] ${retryDelay}ms 후 재시도...`);
+//         await new Promise(resolve => setTimeout(resolve, retryDelay));
+//       }
+//     }
+//   }
   
-  // 동기화 상태 업데이트
-  updateSyncState({ isSyncing: true, error: null });
-  
-  try {
-    console.log('[동기화] 데이터 동기화 시작...');
-    
-    // 기존 동기화 순서: 서버에서 먼저 다운로드 후, 로컬 데이터 업로드
-    // 이 순서를 유지하여 서버에 저장된 데이터를 먼저 가져온 후, 로컬 변경사항을 반영
-    
-    // 1. 서버에서 데이터 다운로드 (기존 데이터 불러오기)
-    await withRetry(
-      () => downloadTransactions(userId),
-      { entityType: '트랜잭션 다운로드' }
-    );
-    
-    await withRetry(
-      () => downloadBudgets(userId),
-      { entityType: '예산 다운로드' }
-    );
-    
-    // 약간의 딜레이를 추가하여 다운로드된 데이터가 처리될 시간을 줌
-    await new Promise(resolve => setTimeout(resolve, 500));
-    
-    // 2. 로컬 데이터를 서버에 업로드 (변경사항 반영)
-    await withRetry(
-      () => uploadTransactions(userId),
-      { entityType: '트랜잭션 업로드' }
-    );
-    
-    await withRetry(
-      () => uploadBudgets(userId),
-      { entityType: '예산 업로드' }
-    );
-    
-    // 동기화 시간 업데이트
-    setLastSyncTime();
-    updateSyncState({ 
-      lastSyncTime: getLastSyncTime(),
-      isSyncing: false
-    });
-    
-    console.log('[동기화] 데이터 동기화 완료!');
-  } catch (error) {
-    console.error('[동기화] 오류 발생:', error);
-    updateSyncState({ 
-      isSyncing: false, 
-      error: error instanceof Error ? error.message : '알 수 없는 오류'
-    });
-    throw error; // 오류를 상위 호출자에게 전달하여 적절히 처리하도록 함
-  }
-};
+//   console.error(`[동기화] ${entityType} 최대 재시도 횟수(${maxRetries}) 초과, 실패`);
+//   throw lastError;
+// };
 
-// 동기화 결과를 위한 인터페이스 정의
-export interface SyncResult {
-  success: boolean;
-  partial?: boolean;
-  downloadSuccess?: boolean;
-  uploadSuccess?: boolean;
-  error?: Error | string | unknown;
-}
-
-// 안전하게 동기화 시도하는 함수 개선
-export const trySyncAllData = async (userId: string): Promise<SyncResult> => {
-  if (!userId || !isSyncEnabled()) return { success: true };
-  
-  // 네트워크 상태 확인
-  const isOnline = await checkNetworkStatus();
-  if (!isOnline) {
-    const errorMsg = '오프라인 상태에서 동기화할 수 없습니다.';
-    console.log('[동기화] 경고:', errorMsg);
-    updateSyncState({ error: errorMsg });
-    return { 
-      success: false, 
-      error: errorMsg 
-    };
+/**
+ * 모든 데이터를 동기화하는 함수
+ * 다운로드 및 업로드 작업을 순차적으로 수행
+ */
+export const trySyncAllData = async (
+  userId: string,
+  setSyncState: (state: SyncState) => void
+): Promise<void> => {
+  if (!userId) {
+    console.error('[동기화] 사용자 ID가 없어 동기화를 진행할 수 없습니다.');
+    return;
   }
-  
-  // 동기화 상태 업데이트
-  updateSyncState({ isSyncing: true, error: null });
-  
-  let downloadSuccess = false;
-  let uploadSuccess = false;
-  let error = null;
-  
+
   try {
-    console.log('[동기화] 안전한 데이터 동기화 시도...');
+    setSyncState({ status: 'syncing', message: '동기화 중...' });
     
+    // 네트워크 연결 확인
+    if (!navigator.onLine) {
+      setSyncState({ status: 'error', message: '네트워크 연결이 없습니다.' });
+      return;
+    }
+    
+    console.log('[동기화] 데이터 동기화 시작');
+    const startTime = Date.now();
+    
+    // 1. 다운로드 작업 (서버 → 로컬)
     try {
-      // 1단계: 서버에서 데이터 다운로드
+      console.log('[동기화] 다운로드 작업 시작');
+      
+      // 트랜잭션 다운로드
       await withRetry(
         () => downloadTransactions(userId),
-        { entityType: '트랜잭션 다운로드', maxRetries: 2 }
+        { entityType: '트랜잭션 다운로드', maxRetries: 3, retryDelay: 1500 }
       );
       
+      // 예산 다운로드
       await withRetry(
         () => downloadBudgets(userId),
-        { entityType: '예산 다운로드', maxRetries: 2 }
+        { entityType: '예산 다운로드', maxRetries: 3, retryDelay: 1500 }
       );
       
-      console.log('[동기화] 서버 데이터 다운로드 성공');
-      downloadSuccess = true;
-      
-      // 다운로드 단계가 성공적으로 완료되면 부분 동기화 마킹
-      setLastSyncTime('부분-다운로드');
-      updateSyncState({ lastSyncTime: getLastSyncTime() });
+      console.log('[동기화] 다운로드 작업 완료');
     } catch (downloadError) {
-      console.error('[동기화] 다운로드 오류:', downloadError);
-      error = downloadError;
-      // 다운로드 실패해도 업로드는 시도 - 부분 동기화
+      console.error('[동기화] 다운로드 작업 실패:', downloadError);
+      setSyncState({ 
+        status: 'error', 
+        message: `다운로드 중 오류가 발생했습니다: ${downloadError instanceof Error ? downloadError.message : '알 수 없는 오류'}` 
+      });
+      return; // 다운로드 실패 시 업로드 작업 진행하지 않음
     }
     
-    // 다운로드 후 약간의 지연을 추가하여 로컬 상태가 업데이트될 시간을 줌
-    await new Promise(resolve => setTimeout(resolve, 500));
-    
+    // 2. 업로드 작업 (로컬 → 서버)
     try {
-      // 2단계: 로컬 데이터를 서버에 업로드
+      console.log('[동기화] 업로드 작업 시작');
+      
+      // 트랜잭션 업로드
       await withRetry(
         () => uploadTransactions(userId),
-        { entityType: '트랜잭션 업로드', maxRetries: 2 }
+        { entityType: '트랜잭션 업로드', maxRetries: 3, retryDelay: 1500 }
       );
       
+      // 예산 업로드
       await withRetry(
         () => uploadBudgets(userId),
-        { entityType: '예산 업로드', maxRetries: 2 }
+        { entityType: '예산 업로드', maxRetries: 3, retryDelay: 1500 }
       );
       
-      console.log('[동기화] 로컬 데이터 업로드 성공');
-      uploadSuccess = true;
-      
-      // 업로드까지 성공적으로 완료되면 동기화 시간 업데이트
-      setLastSyncTime();
-      updateSyncState({ lastSyncTime: getLastSyncTime() });
+      console.log('[동기화] 업로드 작업 완료');
     } catch (uploadError) {
-      console.error('[동기화] 업로드 오류:', uploadError);
-      if (!error) error = uploadError; // 다운로드에서 오류가 없었을 경우에만 설정
-    }
-    
-    // 동기화 상태 업데이트
-    updateSyncState({ isSyncing: false });
-    
-    // 결과 반환
-    const success = downloadSuccess && uploadSuccess;
-    const partial = (downloadSuccess || uploadSuccess) && !(downloadSuccess && uploadSuccess);
-    
-    if (!success && error) {
-      updateSyncState({ 
-        error: error instanceof Error ? error.message : '알 수 없는 오류'
+      console.error('[동기화] 업로드 작업 실패:', uploadError);
+      // 업로드 실패 시에도 일부 데이터는 동기화되었을 수 있으므로 부분 성공으로 처리
+      setSyncState({ 
+        status: 'partial', 
+        message: `일부 데이터 동기화 중 오류가 발생했습니다: ${uploadError instanceof Error ? uploadError.message : '알 수 없는 오류'}` 
       });
+      return;
     }
     
-    return {
-      success,
-      partial,
-      downloadSuccess,
-      uploadSuccess,
-      error: error ? (error instanceof Error ? error.message : error) : undefined
-    };
-  } catch (generalError) {
-    console.error('[동기화] 일반 오류:', generalError);
-    updateSyncState({ 
-      isSyncing: false, 
-      error: generalError instanceof Error ? generalError.message : '알 수 없는 오류'
+    // 동기화 완료 시간 기록
+    const endTime = Date.now();
+    const syncDuration = (endTime - startTime) / 1000; // 초 단위
+    
+    console.log(`[동기화] 모든 데이터 동기화 완료 (${syncDuration.toFixed(2)}초 소요)`);
+    setSyncState({ 
+      status: 'success', 
+      message: `동기화 완료 (${syncDuration.toFixed(1)}초)` 
     });
     
-    return {
-      success: false,
-      error: generalError
-    };
+    // 동기화 완료 시간 저장
+    setLastSyncTime(new Date().toISOString());
+    
+  } catch (error) {
+    console.error('[동기화] 동기화 중 예상치 못한 오류:', error);
+    
+    // 자세한 오류 정보 로깅
+    try {
+      console.error('[동기화] 오류 상세 정보:', JSON.stringify(error, null, 2));
+    } catch (jsonError) {
+      console.error('[동기화] 오류 객체를 JSON으로 변환할 수 없음:', error);
+    }
+    
+    setSyncState({ 
+      status: 'error', 
+      message: `동기화 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}` 
+    });
   }
 };