수정

src/widgets/error-boundaries/common-error-boundary.tsx

@@ -11,8 +11,9 @@ export const CommonErrorBoundary = (props: Props) => {
   const { reset } = useQueryErrorResetBoundary();
 
   return (
-    <ErrorBoundary FallbackComponent={FallbackComponent} onReset={reset}>
-      {children}
-    </ErrorBoundary>
+    <ErrorBoundary
+      FallbackComponent={ FallbackComponent } 
+      onReset={ reset }
+    >{ children }</ErrorBoundary>
   );
 };

src/widgets/error-boundaries/global-api-error-boundary.tsx

@@ -2,7 +2,6 @@ import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { PropsWithChildren } from 'react';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { useLocation } from 'react-router-dom';
-
 import { APIError } from '@/widgets/fallbacks/api-error';
 import { KickOutError } from '@/widgets/fallbacks/kick-out-error';
 import { checkIsAxiosError, checkIsKickOutError } from '@/shared/lib/error';
@@ -15,17 +14,26 @@ import { checkIsAxiosError, checkIsKickOutError } from '@/shared/lib/error';
  * - network
  * - common
  */
-function FallbackComponent({ error, resetErrorBoundary }: FallbackProps) {
+function FallbackComponent({ 
+  error, 
+  resetErrorBoundary 
+}: FallbackProps) {
   // api 에러가 아닌 경우 상위 에러 바운더리로 위임
-  if (!checkIsAxiosError(error)) {
+  if(!checkIsAxiosError(error)){
     throw error;
   }
 
-  if (checkIsKickOutError(error)) {
-    return <KickOutError error={error} />;
-  }
-
-  return <APIError error={error} resetErrorBoundary={resetErrorBoundary} />;
+  if(checkIsKickOutError(error)){
+    return (
+      <KickOutError error={ error } />
+    );
+  } 
+  return (
+    <APIError 
+      error={ error } 
+      resetErrorBoundary={ resetErrorBoundary } 
+    />
+  );
 }
 
 type Props = PropsWithChildren;
@@ -34,8 +42,10 @@ export const GlobalAPIErrorBoundary = ({ children }: Props) => {
   const { reset } = useQueryErrorResetBoundary();
   const { key } = useLocation();
   return (
-    <ErrorBoundary onReset={reset} resetKeys={[key]} FallbackComponent={FallbackComponent}>
-      {children}
-    </ErrorBoundary>
+    <ErrorBoundary 
+      onReset={ reset } 
+      resetKeys={ [key] } 
+      FallbackComponent={ FallbackComponent }
+    >{ children }</ErrorBoundary>
   );
 };

src/widgets/error-boundaries/global-error-boundary.tsx

@@ -6,5 +6,7 @@ import { CommonError } from '@/widgets/fallbacks/common-error';
 type Props = PropsWithChildren;
 
 export const GlobalErrorBoundary = ({ children }: Props) => {
-  return <CommonErrorBoundary FallbackComponent={CommonError}>{children}</CommonErrorBoundary>;
+  return (
+    <CommonErrorBoundary FallbackComponent={ CommonError }>{ children }</CommonErrorBoundary>
+  );
 };

src/widgets/fallbacks/api-error.tsx

@@ -7,14 +7,19 @@ import { Dialog, DialogProps } from '@/shared/ui/dialogs/dialog';
 type CommonErrorProps = FallbackProps & {
   height?: number;
 };
-export const APIError = ({ error, resetErrorBoundary }: CommonErrorProps) => {
+export const APIError = ({ 
+  error, 
+  resetErrorBoundary 
+}: CommonErrorProps) => {
+  console.log('APIError --> ', error);
+  
   const { navigateBack } = useNavigate();
   const msg = useMemo(() => {
     let message: Partial<DialogProps> = {
       title: '일시적인 오류가 발생하였습니다.',
       message: '잠시 후 다시 시도해주세요.',
     };
-    if (error?.response?.data?.message) {
+    if(error?.response?.data?.message){
       message = { message: error.response.data.message };
     }
     return message;
@@ -27,13 +32,13 @@ export const APIError = ({ error, resetErrorBoundary }: CommonErrorProps) => {
 
   return (
     <Dialog
-      afterLeave={() => null}
-      open={true}
-      onClose={() => null}
+      afterLeave={ () => null }
+      open={ true }
+      onClose={ () => null }
       onConfirmClick={ resetErrorBoundary }
       onCancelClick={ handleCancel }
-      message={msg.message}
-      buttonLabel={['취소', '재시도']}
+      message={ msg.message }
+      buttonLabel={ ['취소', '재시도'] }
     />
   );
 };

src/widgets/fallbacks/common-error.tsx

@@ -6,30 +6,35 @@ import { Dialog, DialogProps } from '@/shared/ui/dialogs/dialog';
 type CommonErrorProps = FallbackProps & {
   height?: number;
 };
-export const CommonError = ({ error, resetErrorBoundary }: CommonErrorProps) => {
+export const CommonError = ({ 
+  error, 
+  resetErrorBoundary 
+}: CommonErrorProps) => {
+  console.log('CommonError --> ', error);
+
   const [isOpen, setIsOpen] = useState(true);
   const msg = useMemo(() => {
     let message: Partial<DialogProps> = {
       title: '일시적인 오류가 발생하였습니다.',
-      message: '잠시 후 다시 시도해주세요.',
+      message: '잠시 후 다시 시도해주세요.'
     };
-    if (error?.response?.data?.message) {
+    if(error?.response?.data?.message){
       message = { message: error.response.data.message };
     }
-    return message;
+    return message; 
   }, [error]);
 
   return (
     <Dialog
-      afterLeave={() => null}
-      open={isOpen}
-      onClose={() => setIsOpen(false)}
-      onConfirmClick={resetErrorBoundary}
+      afterLeave={ () => null }
+      open={ isOpen }
+      onClose={ () => setIsOpen(false) }
+      onConfirmClick={ resetErrorBoundary }
       onCancelClick={() => {
         location.href = '/';
       }}
-      message={msg.message}
-      buttonLabel={['취소', '재시도']}
+      message={ msg.message }
+      buttonLabel={ ['취소', '재시도'] }
     />
   );
 };

src/widgets/fallbacks/kick-out-error.tsx

@@ -3,7 +3,10 @@ import { useEffect, useMemo } from 'react';
 import { NiceAxiosFallbackProps } from '@/shared/@types/error';
 import { Dialog, DialogProps } from '@/shared/ui/dialogs/dialog';
 
-export const KickOutError = ({ error, resetErrorBoundary }: NiceAxiosFallbackProps) => {
+export const KickOutError = ({ 
+  error, 
+  resetErrorBoundary 
+}: NiceAxiosFallbackProps) => {
   useEffect(() => {
     console.error('[ErrorBoundary] Kickout Error', JSON.stringify(error.response?.data));
     // clearAuthData();
@@ -14,8 +17,10 @@ export const KickOutError = ({ error, resetErrorBoundary }: NiceAxiosFallbackPro
       title: '일시적인 오류가 발생하였습니다.',
       message: '잠시 후 다시 시도해주세요.',
     };
-    if (error?.response?.data?.message) {
-      message = { message: error.response.data.message };
+    if(error?.response?.data?.message){
+      message = { 
+        message: error.response.data.message 
+      };
     }
     return message;
   }, [error]);
@@ -23,7 +28,7 @@ export const KickOutError = ({ error, resetErrorBoundary }: NiceAxiosFallbackPro
   const handleCancel = () => {
     resetErrorBoundary?.();
   };
-
+ 
   const handleConfirm = () => {
     resetErrorBoundary?.();
     // kickOut();
@@ -31,12 +36,13 @@ export const KickOutError = ({ error, resetErrorBoundary }: NiceAxiosFallbackPro
 
   return (
     <Dialog
-      afterLeave={() => null}
-      open={true}
-      onClose={() => null}
-      onConfirmClick={handleConfirm}
-      onCancelClick={handleCancel}
-      message={msg.message}
+      afterLeave={ () => null }
+      open={ true }
+      onClose={ () => null }
+      onConfirmClick={ handleConfirm }
+      onCancelClick={ handleCancel }
+      message={ msg.message }
+      buttonLabel={ ['취소', '재시도'] }
     />
   );
 };

src/widgets/loadable/index.tsx

@@ -1,17 +0,0 @@
-import { Suspense } from 'react';
-
-import { Loading } from '@/widgets/loading/loading';
-
-export const Loadable = (Component: React.ComponentType<any>) => {
-  const LoadableComponent = (props: any) => {
-    return (
-      <Suspense fallback={<Loading />}>
-        <Component {...props} />
-      </Suspense>
-    );
-  };
-
-  LoadableComponent.displayName = `Loadable(${Component.displayName || Component.name || 'Component'})`;
-
-  return LoadableComponent;
-};