[FE] api에러 등의 에러를 잡아 핸들링

client/src/App.tsx

@@ -1,16 +1,23 @@
 import {Outlet} from 'react-router-dom';
-import {HDesignProvider, ToastProvider} from 'haengdong-design';
+import {HDesignProvider} from 'haengdong-design';
 import {Global} from '@emotion/react';
 
 import {GlobalStyle} from './GlobalStyle';
+import {toastConfig} from 'react-simple-toasts';
+import {ErrorProvider} from './ErrorProvider';
+import {ToastProvider} from '@components/Toast/ToastProvider';
+
+toastConfig({theme: 'dark'});
 
 const App: React.FC = () => {
   return (
     <HDesignProvider>
       <Global styles={GlobalStyle} />
-      <ToastProvider>
-        <Outlet />
-      </ToastProvider>
+      <ErrorProvider>
+        <ToastProvider>
+          <Outlet />
+        </ToastProvider>
+      </ErrorProvider>
     </HDesignProvider>
   );
 };

client/src/ErrorProvider.tsx

@@ -0,0 +1,55 @@
+import ERROR_MESSAGES from '@constants/errorMessage';
+import React, {createContext, useState, useContext, ReactNode} from 'react';
+
+// 에러 컨텍스트 생성
+interface ErrorContextType {
+  hasError: boolean;
+  errorMessage: string;
+  setError: (error: ServerError) => void;
+  clearError: () => void;
+}
+
+const ErrorContext = createContext<ErrorContextType | undefined>(undefined);
+
+// 에러 컨텍스트를 제공하는 프로바이더 컴포넌트
+interface ErrorProviderProps {
+  children: ReactNode;
+}
+
+type ServerError = {
+  code: string;
+  message: string;
+};
+
+export const ErrorProvider: React.FC<ErrorProviderProps> = ({children}) => {
+  const [hasError, setHasError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const setError = (error: ServerError) => {
+    setHasError(false);
+    setErrorMessage('');
+
+    setTimeout(() => {
+      setHasError(true);
+      setErrorMessage(ERROR_MESSAGES[error.code] ?? '지금은 에러 코드가 안바뀌어서 에러 메세지가 없어요.');
+    }, 0);
+  };
+
+  const clearError = () => {
+    setHasError(false);
+    setErrorMessage('');
+  };
+
+  return (
+    <ErrorContext.Provider value={{hasError, errorMessage, setError, clearError}}>{children}</ErrorContext.Provider>
+  );
+};
+
+// 에러 컨텍스트를 사용하는 커스텀 훅
+export const useError = (): ErrorContextType => {
+  const context = useContext(ErrorContext);
+  if (!context) {
+    throw new Error('useError must be used within an ErrorProvider');
+  }
+  return context;
+};

client/src/apis/request/event.ts

@@ -6,7 +6,7 @@ type RequestPostNewEvent = {
   eventName: string;
 };
 
-type ResponsePostNewEvent = {
+export type ResponsePostNewEvent = {
   eventId: string;
 };
 

client/src/apis/useFetch.tsx

@@ -0,0 +1,35 @@
+import {useError} from '../ErrorProvider';
+import {useState} from 'react';
+
+interface FetchOptions<T> {
+  queryFn: () => Promise<T>;
+}
+
+export const useFetch = () => {
+  const {setError, clearError} = useError();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<any>(null);
+
+  const request = async <T,>({queryFn}: FetchOptions<T>): Promise<T | null> => {
+    setLoading(true);
+    clearError();
+    try {
+      const result = await queryFn();
+      setData(result);
+      return result;
+    } catch (error) {
+      if (error instanceof Error) {
+        const errorBody = await JSON.parse(error.message);
+        setError(errorBody);
+        console.log(error);
+      } else {
+        setError(new Error('An unknown error occurred'));
+      }
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {data, loading, request};
+};

client/src/components/Toast/Toast.style.ts

@@ -0,0 +1,67 @@
+import {css, keyframes} from '@emotion/react';
+import {ToastPosition} from './Toast.type';
+
+type ToastMarginStyle = {
+  position?: ToastPosition;
+  bottom?: string;
+  top?: string;
+};
+
+// 애니메이션 키프레임 정의
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const fadeOut = keyframes`
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+`;
+
+export const toastMarginStyle = ({position, bottom, top}: ToastMarginStyle) =>
+  css({
+    position: 'absolute',
+    bottom: position === 'bottom' ? `${bottom}` : 'auto',
+    top: position === 'top' ? `${top}` : 'auto',
+    left: '50%',
+    transform: 'translate(-50%)',
+
+    width: '100%',
+    maxWidth: '48rem',
+    paddingInline: '1rem',
+  });
+
+export const toastStyle = (isVisible: boolean) =>
+  css({
+    width: '100%',
+    padding: '0.625rem 1rem',
+
+    backgroundColor: 'gray',
+    boxShadow: '0 8px 12px rgba(0, 0, 0, 0.16);',
+
+    borderRadius: '1.25rem',
+
+    // 애니메이션 추가
+    animation: `${isVisible ? fadeIn : fadeOut} 0.5s forwards`,
+  });
+
+export const textStyle = () =>
+  css({
+    width: '100%',
+
+    color: 'white',
+
+    whiteSpace: 'pre-line',
+  });

client/src/components/Toast/Toast.tsx

@@ -0,0 +1,79 @@
+/** @jsxImportSource @emotion/react */
+import {createPortal} from 'react-dom';
+import {useState, useEffect} from 'react';
+import {toastStyle, textStyle, toastMarginStyle} from './Toast.style';
+import {ToastProps, ToastType} from './Toast.type';
+import {Button, Flex, Icon, Text} from 'haengdong-design';
+
+const renderIcon = (type: ToastType) => {
+  switch (type) {
+    case 'error':
+      return <Icon iconType="error" />;
+    case 'confirm':
+      return <Icon iconType="confirm" />;
+    case 'none':
+      return null;
+    default:
+      return null;
+  }
+};
+
+const Toast = ({
+  type = 'confirm',
+  top = '0px',
+  bottom = '0px',
+  isClickToClose = true,
+  position = 'bottom',
+  message,
+  onUndo,
+  onClose,
+  ...htmlProps
+}: ToastProps) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const styleProps = {position, top, bottom};
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+      setTimeout(() => {
+        if (onClose) onClose();
+      }, 500); // fadeOut 애니메이션 시간과 동일하게 설정
+    }, 3000); // 토스트가 화면에 보이는 시간 설정
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [onClose]);
+
+  const handleClickToClose = () => {
+    if (!isClickToClose || !onClose) return;
+
+    setIsVisible(false);
+    setTimeout(() => {
+      onClose();
+    }, 500); // fadeOut 애니메이션 시간과 동일하게 설정
+  };
+
+  return createPortal(
+    <div css={toastMarginStyle({...styleProps})} {...htmlProps} onClick={handleClickToClose}>
+      <div css={toastStyle(isVisible)}>
+        <Flex justifyContent="spaceBetween" alignItems="center">
+          <Flex alignItems="center" gap="0.5rem">
+            {renderIcon(type)}
+            <Text size="smallBodyBold" css={textStyle()}>
+              {message}
+            </Text>
+          </Flex>
+          {onUndo && (
+            <Button variants="tertiary" size="small" onClick={onUndo}>
+              되돌리기
+            </Button>
+          )}
+        </Flex>
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+export default Toast;

client/src/components/Toast/Toast.type.ts

@@ -0,0 +1,21 @@
+export type ToastPosition = 'bottom' | 'top';
+export type ToastType = 'error' | 'confirm' | 'none';
+
+export interface ToastStyleProps {
+  bottom?: string;
+  top?: string;
+}
+
+export interface ToastOptionProps {
+  position?: ToastPosition;
+  type?: ToastType;
+  onUndo?: () => void;
+  isClickToClose?: boolean;
+  onClose?: () => void;
+}
+
+export interface ToastRequiredProps {
+  message: string;
+}
+
+export type ToastProps = React.ComponentProps<'div'> & ToastStyleProps & ToastOptionProps & ToastRequiredProps;

client/src/components/Toast/ToastProvider.tsx

@@ -0,0 +1,82 @@
+/** @jsxImportSource @emotion/react */
+import {createContext, useCallback, useContext, useEffect, useState} from 'react';
+import {ToastProps} from './Toast.type';
+import Toast from './Toast';
+import {useError} from '../../ErrorProvider';
+
+export const ToastContext = createContext<ToastContextProps | null>(null);
+
+interface ToastContextProps {
+  showToast: (args: ShowToast) => void;
+}
+
+type ShowToast = ToastProps & {
+  showingTime?: number;
+  isAlwaysOn?: boolean;
+};
+
+const ToastProvider = ({children}: React.PropsWithChildren) => {
+  const [currentToast, setCurrentToast] = useState<ShowToast | null>(null);
+  const {hasError, errorMessage, clearError} = useError();
+
+  const showToast = useCallback(({showingTime = 3000, isAlwaysOn = false, ...toastProps}: ShowToast) => {
+    setCurrentToast({showingTime, isAlwaysOn, ...toastProps});
+  }, []);
+
+  const closeToast = () => {
+    setCurrentToast(null);
+  };
+
+  useEffect(() => {
+    if (hasError) {
+      showToast({
+        message: errorMessage || 'An error occurred',
+        showingTime: 5000, // 필요에 따라 시간 설정
+        isAlwaysOn: false,
+        position: 'bottom',
+        bottom: '100px',
+      });
+
+      const timer = setTimeout(() => {
+        clearError();
+      }, 5000); // 토스트가 표시되는 시간과 동일하게 설정
+
+      return () => clearTimeout(timer);
+    }
+
+    return;
+  }, [hasError, errorMessage, showToast, clearError]);
+
+  useEffect(() => {
+    if (!currentToast) return;
+
+    if (!currentToast.isAlwaysOn) {
+      const timer = setTimeout(() => {
+        setCurrentToast(null);
+      }, currentToast.showingTime);
+
+      return () => clearTimeout(timer);
+    }
+
+    return;
+  }, [currentToast]);
+
+  return (
+    <ToastContext.Provider value={{showToast}}>
+      {currentToast && <Toast onClose={closeToast} {...currentToast} />}
+      {children}
+    </ToastContext.Provider>
+  );
+};
+
+const useToast = () => {
+  const context = useContext(ToastContext);
+
+  if (!context) {
+    throw new Error('useToast는 ToastProvider 내에서 사용되어야 합니다.');
+  }
+
+  return context;
+};
+
+export {ToastProvider, useToast};