수정

src/entities/home/ui/favorite-wrapper.tsx

@@ -5,7 +5,6 @@ import 'swiper/css';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { UserFavorite } from '@/entities/user/model/types';
 import { useStore } from '@/shared/model/store';
-import { useLocation } from 'react-router';
 import { useTranslation } from 'react-i18next';
 
 /*

src/entities/menu/ui/menu-category.tsx

@@ -1,9 +1,7 @@
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useStore } from '@/shared/model/store';
-import { IMAGE_ROOT } from '@/shared/constants/common';
 import { UserFavorite } from '@/entities/user/model/types';
 import { RefObject, useEffect, useState } from 'react';
-import { useLocation } from 'react-router';
 import { MenuItem } from '../model/types';
 import { useTranslation } from 'react-i18next';
 import { MenuItems } from '@/entities/common/model/constant';
@@ -35,7 +33,6 @@ export const MenuCategory = ({
 }: MenuCategoryProps) => {
   const { navigate } = useNavigate();
   const { i18n } = useTranslation();
-  // const location = useLocation();
   
   const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
   const [menuIds, setMenuIds] = useState<Array<number | undefined>>([]);
@@ -85,9 +82,7 @@ export const MenuCategory = ({
     useStore.getState().UserStore.setUserFavorite(userFavorite);
     setChangeMenuId(`${menuId}-${checked}`);
     callFavoiteItems();
-    // if(location.pathname === PATHS.home){
     
-    // }
   };
 
   const callFavoiteItems = () => {

src/shared/configs/axios/index.ts

@@ -6,7 +6,6 @@ import {
   getLocalStorage, 
   setLocalStorage
 } from '@/shared/lib';
-import { finalizeConfig } from './utils';
 import { appBridge } from '@/utils/appBridge';
 import { LoginResponse } from '@/entities/user/model/types';
 import { getHeaderUserAgent } from '@/shared/constants/url';
@@ -14,7 +13,16 @@ import { useAppBridge } from '@/hooks';
 import { useUserInfo } from '@/entities/user/lib/use-user-info';
 import { useStore } from '@/shared/model/store';
 import { login } from '@/entities/user/api/use-login-mutation';
-import { useNavigate } from 'react-router';
+import { useNavigate } from '@/shared/lib/hooks';
+
+const finalizeConfig = (config: InternalAxiosRequestConfig) => {
+  const { params, data } = config;
+  return {
+    ...config,
+    params,
+    data,
+  };
+};
 
 const onRequestFulfilled = (config: InternalAxiosRequestConfig) => {
   config.headers['Content-Type'] = 'application/json;charset=UTF-8';
@@ -37,6 +45,7 @@ const onRequestFulfilled = (config: InternalAxiosRequestConfig) => {
 };
 
 const onRequestRejected = (error: any) => {
+  console.log('onRequestRejected --> ', error);
   return Promise.reject(error);
 };
 
@@ -47,14 +56,11 @@ const onResponseFulfilled = (response: AxiosResponse) => {
   };
 };
 
-export const onResponseRejected = (error: AxiosError) => {
+const onResponseRejected = (error: AxiosError) => {
-  
   console.log('onResponseRejected --> ', error);
-  console.log('error?.status -> ', error?.status, error?.status === 401)
-  
   if(error?.status === 401){
     if(appBridge.isNativeEnvironment()){
-      appBridge.safeCall(() => appBridge.requestRefreshToken()).then((token: LoginResponse) => {
+      return appBridge.safeCall(() => appBridge.requestRefreshToken()).then((token: LoginResponse) => {
         setLocalStorage(StorageKeys.TokenType, token.tokenType);
         setLocalStorage(StorageKeys.AccessToken, token.accessToken);
         setLocalStorage(StorageKeys.RefreshToken, token.refreshToken);
@@ -81,9 +87,7 @@ export const onResponseRejected = (error: AxiosError) => {
         id: 'woowahan5',
         password: 'nictest00'
       };
-      login(params).then((result: LoginResponse) => {
+      return login(params).then((result: LoginResponse) => {
-        result.usrid = params.id;
-
         setLocalStorage(StorageKeys.TokenType, result.tokenType);
         setLocalStorage(StorageKeys.AccessToken, result.accessToken);
         setLocalStorage(StorageKeys.RefreshToken, result.refreshToken);
@@ -92,7 +96,7 @@ export const onResponseRejected = (error: AxiosError) => {
         setLocalStorage(StorageKeys.MenuGrants, result.menuGrants);
         setLocalStorage(StorageKeys.ClientAddressIP, result.clientAddressIP);
         setLocalStorage(StorageKeys.Requires2FA, result.requires2FA);
-        setLocalStorage(StorageKeys.Usrid, result.usrid);
+        setLocalStorage(StorageKeys.Usrid, params.id);
       
         if(appBridge.isNativeEnvironment()){
           setLocalStorage(StorageKeys.DeviceId, result.deviceId);
@@ -102,12 +106,13 @@ export const onResponseRejected = (error: AxiosError) => {
         useStore.getState().UserStore.setUserInfo({
           ...result
         }); 
-        location.reload();
+        return error.config? axios.request(error.config): null;
       });
       
     }
     
   }
+  
   return new Promise((_resolve, reject) => {
     if(checkIsAxiosError(error)){
       // iOS의 경우 window에서 unload event가 일어날때 네트워크 에러가 발생하곤 해서 이런 케이스를 방지하기 위해 지연시킴

src/shared/configs/axios/utils.ts

@@ -1,10 +0,0 @@
-import { InternalAxiosRequestConfig } from 'axios';
-
-export const finalizeConfig = (config: InternalAxiosRequestConfig) => {
-  const { params, data } = config;
-  return {
-    ...config,
-    params,
-    data,
-  };
-};

src/shared/configs/query.ts

@@ -9,6 +9,7 @@ const globalQueryClient = new QueryClient({
       throwOnError: true,
       // suspense: true,
       networkMode: 'always',
+      
     },
     mutations: {
       throwOnError: true,

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}>
+    <ErrorBoundary
-      {children}
+      FallbackComponent={ FallbackComponent } 
-    </ErrorBoundary>
+      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)){
     throw error;
   }
 
   if(checkIsKickOutError(error)){
-    return <KickOutError error={error} />;
+    return (
+      <KickOutError error={ error } />
+    );
   } 
-
+  return (
-  return <APIError error={error} resetErrorBoundary={resetErrorBoundary} />;
+    <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}>
+    <ErrorBoundary 
-      {children}
+      onReset={ reset } 
-    </ErrorBoundary>
+      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,7 +7,12 @@ 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> = {

src/widgets/fallbacks/common-error.tsx

@@ -6,12 +6,17 @@ 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){
       message = { message: error.response.data.message };

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();
@@ -15,7 +18,9 @@ export const KickOutError = ({ error, resetErrorBoundary }: NiceAxiosFallbackPro
       message: '잠시 후 다시 시도해주세요.',
     };
     if(error?.response?.data?.message){
-      message = { message: error.response.data.message };
+      message = { 
+        message: error.response.data.message 
+      };
     }
     return message;
   }, [error]);
@@ -37,6 +42,7 @@ export const KickOutError = ({ error, resetErrorBoundary }: NiceAxiosFallbackPro
       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;
-};