[FE] useError, useToast 테스트코드 작성

client/jest.config.ts

@@ -17,7 +17,7 @@ const config: Config = {
     '<rootDir>/src/request/',
     '<rootDir>/src/constants/',
     '<rootDir>/src/errors/',
-    '<rootDir>/src/ErrorProvider.tsx',
+    '<rootDir>/src/components/',
   ],
 
   verbose: true,
@@ -34,6 +34,7 @@ const config: Config = {
     '^@types/(.*)$': '<rootDir>/src/types/$1',
     '^@errors/(.*)$': '<rootDir>/src/errors/$1',
     '^@mocks/(.*)$': '<rootDir>/src/mocks/$1',
+    '\\.svg$': '<rootDir>/src/mocks/svg.ts',
   },
   testEnvironmentOptions: {
     customExportConditions: [''],

client/jest.setup.ts

@@ -1,5 +1,6 @@
 import {server} from './src/mocks/server';
 import * as router from 'react-router';
+import '@testing-library/jest-dom'; // toBeInTheDocument를 인식하기 위해 @testing-library/jest-dom/extend-expect추가
 
 beforeAll(() => {
   server.listen();

client/package.json

@@ -31,6 +31,7 @@
     "@types/react": "^18.3.3",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.3.0",
+    "@types/testing-library__jest-dom": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "cypress": "^13.13.2",

client/src/App.tsx

@@ -2,11 +2,11 @@ import {Outlet} from 'react-router-dom';
 import {HDesignProvider} from 'haengdong-design';
 import {Global} from '@emotion/react';
 
-import {ToastProvider} from '@components/Toast/ToastProvider';
+import {ToastProvider} from '@hooks/useToast/ToastProvider';
 
 import {GlobalStyle} from './GlobalStyle';
 // import toast from 'react-simple-toasts';
-import {ErrorProvider} from './ErrorProvider';
+import {ErrorProvider} from './hooks/useError/ErrorProvider';
 import UnhandledErrorBoundary from './UnhandledErrorBoundary';
 
 const App: React.FC = () => {

client/src/apis/fetcher.ts

@@ -1,4 +1,4 @@
-import {ServerError} from 'ErrorProvider';
+import {ErrorInfo} from '@hooks/useError/ErrorProvider';
 
 import objectToQueryString from '@utils/objectToQueryString';
 
@@ -96,23 +96,23 @@ const errorHandler = async ({url, options, body}: ErrorHandlerProps) => {
     const response: Response = await fetch(url, options);
 
     if (!response.ok) {
-      const serverErrorBody: ServerError = await response.json();
+      const serverErrorInfo: ErrorInfo = await response.json();
 
       throw new FetchError({
         status: response.status,
         requestBody: body,
         endpoint: response.url,
-        errorBody: serverErrorBody,
-        name: serverErrorBody.errorCode,
-        message: serverErrorBody.message || '',
+        errorInfo: serverErrorInfo,
+        name: serverErrorInfo.errorCode,
+        message: serverErrorInfo.message || '',
         method: options.method,
       });
     }
 
     return response;
   } catch (error) {
     if (error instanceof Error) {
-      throw error;
+      throw error; // 그대로 FetchError || Error 인스턴스를 던집니다.
     }
 
     throw new Error(UNKNOWN_ERROR);

client/src/components/Modal/SetActionModal/DeleteMemberActionModal/DeleteMemberActionModal.tsx

@@ -2,8 +2,8 @@ import type {MemberAction, MemberType} from 'types/serviceType';
 
 import {BottomSheet, Flex, Input, Text, IconButton, FixedButton, Icon} from 'haengdong-design';
 
-import {useToast} from '@components/Toast/ToastProvider';
 import useDeleteMemberAction from '@hooks/useDeleteMemberAction/useDeleteMemberAction';
+import {useToast} from '@hooks/useToast/useToast';
 
 import {bottomSheetHeaderStyle, bottomSheetStyle, inputGroupStyle} from './DeleteMemberActionModal.style';
 

client/src/components/Toast/Toast.tsx

@@ -51,7 +51,7 @@ const Toast = ({
   };
 
   return createPortal(
-    <div css={toastMarginStyle({...styleProps})} {...htmlProps} onClick={handleClickToClose}>
+    <div css={toastMarginStyle({...styleProps})} {...htmlProps} onClick={handleClickToClose} id="toast">
       <div css={toastStyle(isVisible)}>
         <Flex justifyContent="spaceBetween" alignItems="center">
           <Flex alignItems="center" gap="0.5rem">

client/src/errors/FetchError.ts

@@ -4,16 +4,16 @@ class FetchError extends Error {
   requestBody;
   status;
   endpoint;
-  errorBody;
+  errorInfo;
   method;
 
-  constructor({requestBody, status, endpoint, errorBody, method, name, message}: FetchErrorType) {
-    super(errorBody.errorCode);
+  constructor({requestBody, status, endpoint, errorInfo, method, name, message}: FetchErrorType) {
+    super(errorInfo.errorCode);
 
     this.requestBody = requestBody;
     this.status = status;
     this.endpoint = endpoint;
-    this.errorBody = errorBody;
+    this.errorInfo = errorInfo;
     this.method = method;
     this.name = name;
     this.message = message;

client/src/hooks/useAuth/useAuth.test.tsx

@@ -2,11 +2,13 @@ import {renderHook, waitFor} from '@testing-library/react';
 import {act} from 'react';
 import {MemoryRouter} from 'react-router-dom';
 
+import {useError} from '@hooks/useError/useError';
+
 import {PASSWORD_LENGTH} from '@constants/password';
 
 import {VALID_PASSWORD_FOR_TEST, VALID_TOKEN_FOR_TEST} from '@mocks/validValueForTest';
 
-import {ErrorProvider, useError} from '../../ErrorProvider';
+import {ErrorProvider} from '../useError/ErrorProvider';
 
 import useAuth from './useAuth';
 
@@ -34,7 +36,7 @@ describe('useAuth', () => {
       });
 
       await waitFor(() => {
-        expect(result.current.errorResult.error?.errorCode).toBe('TOKEN_NOT_FOUND');
+        expect(result.current.errorResult.errorInfo?.errorCode).toBe('TOKEN_NOT_FOUND');
       });
     });
 
@@ -48,7 +50,7 @@ describe('useAuth', () => {
       });
 
       await waitFor(() => {
-        expect(result.current.errorResult.error).toBe(null);
+        expect(result.current.errorResult.errorInfo).toBe(null);
       });
     });
 
@@ -62,7 +64,7 @@ describe('useAuth', () => {
       });
 
       await waitFor(() => {
-        expect(result.current.errorResult.error?.errorCode).toBe('TOKEN_INVALID');
+        expect(result.current.errorResult.errorInfo?.errorCode).toBe('TOKEN_INVALID');
       });
     });
 
@@ -76,7 +78,7 @@ describe('useAuth', () => {
       });
 
       await waitFor(() => {
-        expect(result.current.errorResult.error?.errorCode).toBe('TOKEN_EXPIRED');
+        expect(result.current.errorResult.errorInfo?.errorCode).toBe('TOKEN_EXPIRED');
       });
     });
 
@@ -90,7 +92,7 @@ describe('useAuth', () => {
       });
 
       await waitFor(() => {
-        expect(result.current.errorResult.error?.errorCode).toBe('FORBIDDEN');
+        expect(result.current.errorResult.errorInfo?.errorCode).toBe('FORBIDDEN');
       });
     });
   });
@@ -104,7 +106,7 @@ describe('useAuth', () => {
       });
 
       await waitFor(() => {
-        expect(result.current.errorResult.error).toBe(null);
+        expect(result.current.errorResult.errorInfo).toBe(null);
       });
     });
 
@@ -116,7 +118,7 @@ describe('useAuth', () => {
       });
 
       await waitFor(() => {
-        expect(result.current.errorResult.error?.errorCode).toBe('EVENT_PASSWORD_FORMAT_INVALID');
+        expect(result.current.errorResult.errorInfo?.errorCode).toBe('EVENT_PASSWORD_FORMAT_INVALID');
       });
     });
 
@@ -128,7 +130,7 @@ describe('useAuth', () => {
       });
 
       await waitFor(() => {
-        expect(result.current.errorResult.error?.errorCode).toBe('PASSWORD_INVALID');
+        expect(result.current.errorResult.errorInfo?.errorCode).toBe('PASSWORD_INVALID');
       });
     });
   });

client/src/hooks/useDeleteMemberAction/useDeleteMemberAction.test.tsx

@@ -6,7 +6,7 @@ import {BillStep, MemberAction, MemberStep} from 'types/serviceType';
 
 import stepListJson from '../../mocks/stepList.json';
 import StepListProvider, {useStepList} from '../useStepList/useStepList';
-import {ErrorProvider} from '../../ErrorProvider';
+import {ErrorProvider} from '../useError/ErrorProvider';
 import invalidMemberStepListJson from '../../mocks/invalidMemberStepList.json';
 
 import useDeleteMemberAction from './useDeleteMemberAction';

client/src/hooks/useError/ErrorProvider.tsx

@@ -0,0 +1,69 @@
+import {createContext, useState, useEffect, ReactNode} from 'react';
+
+import {SERVER_ERROR_MESSAGES} from '@constants/errorMessage';
+
+// 에러 컨텍스트 생성
+export interface ErrorContextType {
+  clientErrorMessage: string;
+  setErrorInfo: (error: ErrorInfo) => void;
+  clearError: (ms?: number) => void;
+  errorInfo: ErrorInfo | null;
+}
+
+export const ErrorContext = createContext<ErrorContextType | undefined>(undefined);
+
+// 에러 컨텍스트를 제공하는 프로바이더 컴포넌트
+interface ErrorProviderProps {
+  children: ReactNode;
+  callback?: (message: string) => void;
+}
+
+export type ErrorInfo = {
+  errorCode: string;
+  message: string;
+};
+
+export const ErrorProvider = ({children, callback}: ErrorProviderProps) => {
+  const [clientErrorMessage, setClientErrorMessage] = useState('');
+  const [errorInfo, setErrorState] = useState<ErrorInfo | null>(null);
+
+  useEffect(() => {
+    if (errorInfo) {
+      if (isUnhandledError(errorInfo.errorCode)) {
+        // 에러바운더리로 보내기
+
+        throw errorInfo;
+      }
+
+      const message = SERVER_ERROR_MESSAGES[errorInfo.errorCode];
+      setClientErrorMessage(message);
+      // callback(message);
+    }
+  }, [errorInfo, callback]);
+
+  const setErrorInfo = (error: ErrorInfo) => {
+    setClientErrorMessage('');
+    setErrorState(error);
+  };
+
+  const clearError = (ms: number = 0) => {
+    if (errorInfo === null) return;
+
+    setTimeout(() => {
+      setClientErrorMessage('');
+      setErrorState(null);
+    }, ms);
+  };
+
+  return (
+    <ErrorContext.Provider value={{errorInfo, clientErrorMessage, setErrorInfo, clearError}}>
+      {children}
+    </ErrorContext.Provider>
+  );
+};
+
+const isUnhandledError = (errorCode: string) => {
+  if (errorCode === 'INTERNAL_SERVER_ERROR') return true;
+
+  return SERVER_ERROR_MESSAGES[errorCode] === undefined;
+};