From b3cc189493187fac9febddbad9c7b2c74e7d4df4 Mon Sep 17 00:00:00 2001 From: hansoo Date: Fri, 21 Mar 2025 17:09:26 +0900 Subject: [PATCH] =?UTF-8?q?=EB=84=A4=ED=8A=B8=EC=9B=8C=ED=81=AC=20?= =?UTF-8?q?=EC=95=8C=EB=A6=BC=20OFF=20=EB=B0=8F=20ts=20=EC=98=A4=EB=A5=98?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 - src/components/NetworkStatusIndicator.tsx | 151 ---------------------- src/utils/network/retry.ts | 3 +- src/utils/network/types.ts | 1 + src/utils/networkUtils.ts | 22 ++++ src/utils/syncUtils.ts | 6 +- 6 files changed, 30 insertions(+), 155 deletions(-) delete mode 100644 src/components/NetworkStatusIndicator.tsx diff --git a/src/App.tsx b/src/App.tsx index 125329a..bddd2cc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,7 +20,6 @@ import PaymentMethods from './pages/PaymentMethods'; import Settings from './pages/Settings'; import { BudgetProvider } from './contexts/BudgetContext'; import PrivateRoute from './components/auth/PrivateRoute'; -import NetworkStatusIndicator from './components/NetworkStatusIndicator'; import { initSyncState, startNetworkMonitoring } from './utils/syncUtils'; // 전역 오류 핸들러 @@ -152,7 +151,6 @@ function App() { - diff --git a/src/components/NetworkStatusIndicator.tsx b/src/components/NetworkStatusIndicator.tsx deleted file mode 100644 index c7318cc..0000000 --- a/src/components/NetworkStatusIndicator.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { getNetworkStatus, onNetworkStatusChange, NetworkStatus } from '../utils/networkUtils'; -import { getSyncState, onSyncStateChange, SyncState } from '../utils/syncUtils'; -import { toast } from '../hooks/toast'; - -/** - * 네트워크 상태 표시기 컴포넌트 속성 - */ -interface NetworkStatusIndicatorProps { - showToast?: boolean; - showIndicator?: boolean; -} - -/** - * 네트워크 상태 및 동기화 상태를 표시하는 컴포넌트 - */ -const NetworkStatusIndicator: React.FC = ({ - showToast = true, - showIndicator = true -}) => { - // 네트워크 상태 - const [networkStatus, setNetworkStatus] = useState(getNetworkStatus()); - // 동기화 상태 - const [syncState, setSyncState] = useState(getSyncState()); - - useEffect(() => { - // 네트워크 상태 변경 감지 - const unsubscribeNetwork = onNetworkStatusChange((status) => { - setNetworkStatus(status); - - // 오프라인 상태가 되면 토스트 표시 - if (status === 'offline' && showToast) { - toast({ - title: '네트워크 연결 끊김', - description: '네트워크 연결이 끊겼습니다. 오프라인 모드로 전환됩니다.', - variant: 'destructive', - }); - } - - // 온라인 상태로 돌아오면 토스트 표시 - if (status === 'online' && showToast) { - toast({ - title: '네트워크 연결 복구', - description: '네트워크 연결이 복구되었습니다. 데이터 동기화가 재개됩니다.', - variant: 'default', - }); - } - }); - - // 동기화 상태 변경 감지 - const unsubscribeSync = onSyncStateChange((state) => { - setSyncState(state); - - // 동기화 오류가 발생하면 토스트 표시 - if (state.error && showToast) { - toast({ - title: '동기화 오류', - description: `동기화 중 오류가 발생했습니다: ${state.error}`, - variant: 'destructive', - }); - } - }); - - return () => { - // 구독 해제 - unsubscribeNetwork(); - unsubscribeSync(); - }; - }, [showToast]); - - // 네트워크 상태에 따른 스타일 및 메시지 - const getNetworkStatusStyle = () => { - switch (networkStatus) { - case 'online': - return { color: '#4caf50', message: '온라인' }; - case 'offline': - return { color: '#f44336', message: '오프라인' }; - case 'reconnecting': - return { color: '#ff9800', message: '재연결 중' }; - default: - return { color: '#9e9e9e', message: '알 수 없음' }; - } - }; - - // 동기화 상태에 따른 스타일 및 메시지 - const getSyncStatusStyle = () => { - if (syncState.isSyncing) { - return { color: '#2196f3', message: '동기화 중...' }; - } - - if (syncState.error) { - return { color: '#f44336', message: '동기화 오류' }; - } - - if (!syncState.isEnabled) { - return { color: '#9e9e9e', message: '동기화 비활성화' }; - } - - return { color: '#4caf50', message: '동기화됨' }; - }; - - // 인디케이터 스타일 - const networkStyle = getNetworkStatusStyle(); - const syncStyle = getSyncStatusStyle(); - - // 인디케이터 컴포넌트 - const indicatorStyle = { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - padding: '4px 8px', - borderRadius: '4px', - fontSize: '12px', - fontWeight: 'bold', - margin: '0 4px' - }; - - if (!showIndicator) { - return null; - } - - return ( -
-
- {networkStyle.message} -
- -
- {syncStyle.message} -
-
- ); -}; - -export default NetworkStatusIndicator; diff --git a/src/utils/network/retry.ts b/src/utils/network/retry.ts index 91b78be..0c0967f 100644 --- a/src/utils/network/retry.ts +++ b/src/utils/network/retry.ts @@ -18,7 +18,8 @@ export const withRetry = async ( maxRetries = MAX_RETRY_COUNT, retryDelay = INITIAL_RETRY_DELAY, onRetry = () => {}, - shouldRetry = () => true + shouldRetry = () => true, + entityType } = options; let lastError: Error | unknown; diff --git a/src/utils/network/types.ts b/src/utils/network/types.ts index 11f7da5..beb20bc 100644 --- a/src/utils/network/types.ts +++ b/src/utils/network/types.ts @@ -32,4 +32,5 @@ export interface RetryOptions { retryDelay?: number; onRetry?: (attempt: number, error: Error | unknown) => void; shouldRetry?: (error: Error | unknown) => boolean; + entityType?: string; // 동기화 작업 유형 (예: '트랜잭션 업로드', '예산 다운로드' 등) } diff --git a/src/utils/networkUtils.ts b/src/utils/networkUtils.ts index 6cbe0d5..756a791 100644 --- a/src/utils/networkUtils.ts +++ b/src/utils/networkUtils.ts @@ -1,3 +1,13 @@ +/** + * 네트워크 유틸리티 모듈 + * + * 이 파일은 하위 모듈로 리팩토링되었습니다. + * 기존 코드와의 호환성을 위해 새 모듈에서 모든 기능을 재내보냅니다. + */ + +// 모든 네트워크 유틸리티 기능을 새 모듈에서 가져와 재내보내기 +export * from './network'; + /** * 네트워크 상태 관리 및 오류 처리를 위한 유틸리티 */ @@ -457,6 +467,7 @@ export const withRetry = async ( retryDelay?: number; onRetry?: (attempt: number, error: Error | unknown) => void; shouldRetry?: (error: Error | unknown) => boolean; + entityType?: string; // 동기화 작업 유형 (예: '트랜잭션 업로드', '예산 다운로드' 등) } = {} ): Promise => { const { @@ -536,3 +547,14 @@ export const onNetworkStatusChange = (callback: (status: NetworkStatus) => void) window.removeEventListener('networkStatusChange', handler); }; }; + +/** + * 재시도 옵션 타입 + */ +export type RetryOptions = { + maxRetries?: number; + retryDelay?: number; + onRetry?: (attempt: number, error: Error | unknown) => void; + shouldRetry?: (error: Error | unknown) => boolean; + entityType?: string; // 동기화 작업 유형 (예: '트랜잭션 업로드', '예산 다운로드' 등) +}; diff --git a/src/utils/syncUtils.ts b/src/utils/syncUtils.ts index 5838b9b..afbe881 100644 --- a/src/utils/syncUtils.ts +++ b/src/utils/syncUtils.ts @@ -12,7 +12,8 @@ import { addToSyncQueue, processPendingSyncQueue, onNetworkStatusChange, - NetworkStatus + NetworkStatus, + RetryOptions } from './networkUtils'; // Export all utility functions to maintain the same public API @@ -80,6 +81,9 @@ export const initSyncState = async (): Promise => { // 온라인 상태로 변경되면 보류 중인 동기화 작업 처리 if (status === 'online') { processPendingSyncQueue(); + console.log('[네트워크 상태 변경] 온라인 상태로 변경되었습니다.'); + } else { + console.log('[네트워크 상태 변경] 오프라인 상태로 변경되었습니다.'); } });