feat: 네트워크 상태가 오프라인일 경우 토스트로 안내하는 기능 (#568)

* feat: 네트워크가 오프라인 상태가 되었을 때 토스트로 오프라인 상태임을 알리는 컴포넌트 구현

* feat: 외부에서 토스트를 닫기 위한 함수를 ToastProvider에서 return에 추가

* rename: NetworkCatcher -> NetworkStateCatcher로 직관적인 이름으로 변경

* feat: 네트워크 상태를 감지하기 위한 컴포넌트를 App에서 호출

client/src/App.tsx

@@ -9,6 +9,8 @@ import KakaoInitializer from '@components/KakaoInitializer/KakaoInitializer';
 
 import {HDesignProvider} from '@HDesign/index';
 
+import NetworkStateCatcher from '@utils/NetworkStateCatcher';
+
 import {GlobalStyle} from './GlobalStyle';
 import UnhandledErrorBoundary from './UnhandledErrorBoundary';
 
@@ -21,6 +23,7 @@ const App: React.FC = () => {
           <ErrorCatcher>
             <QueryClientBoundary>
               <ReactQueryDevtools initialIsOpen={false} />
+              <NetworkStateCatcher />
               <KakaoInitializer>
                 <Outlet />
               </KakaoInitializer>

client/src/hooks/useToast/ToastProvider.tsx

@@ -10,6 +10,7 @@ const DEFAULT_TIME = 3000;
 
 interface ToastContextProps {
   showToast: (args: ShowToast) => void;
+  closeToast: () => void;
 }
 
 type ShowToast = ToastProps & {
@@ -39,7 +40,7 @@ export const ToastProvider = ({children}: React.PropsWithChildren) => {
   }, [currentToast]);
 
   return (
-    <ToastContext.Provider value={{showToast}}>
+    <ToastContext.Provider value={{showToast, closeToast}}>
       {currentToast && <Toast onClose={closeToast} {...currentToast} />}
       {children}
     </ToastContext.Provider>

client/src/utils/NetworkStateCatcher.tsx

@@ -0,0 +1,42 @@
+import {useEffect} from 'react';
+
+import {useToast} from '@hooks/useToast/useToast';
+
+const NetworkStateCatcher = () => {
+  const {showToast, closeToast} = useToast();
+
+  const handleNetworkOnline = () => {
+    closeToast();
+  };
+
+  const handleNetworkOffline = () => {
+    // TODO: (@weadie) 토스트 높이는 z-index 이슈가 해결되면 반영할 예정입니다.
+    showToast({
+      message: '네트워크 연결 상태를 확인해주세요.',
+      isAlwaysOn: true,
+      type: 'error',
+      position: 'bottom',
+      bottom: '6rem',
+    });
+  };
+
+  const addNetworkStateEventListener = () => {
+    window.addEventListener('online', handleNetworkOnline);
+    window.addEventListener('offline', handleNetworkOffline);
+  };
+
+  const removeNetworkStateEventListener = () => {
+    window.removeEventListener('online', handleNetworkOnline);
+    window.removeEventListener('offline', handleNetworkOffline);
+  };
+
+  useEffect(() => {
+    addNetworkStateEventListener();
+
+    return removeNetworkStateEventListener;
+  }, []);
+
+  return null;
+};
+
+export default NetworkStateCatcher;