Router.tsx -> index.tsx 변경 및 코드 스플리팅

src/App.js

@@ -2,7 +2,7 @@ import '@styles/react/libs/flatpickr/flatpickr.scss';
 import '@styles/react/libs/tables/react-dataTable-component.scss';
 import './assets/css/custom.css';
 // ** Router Import
-import Router from './router/Router';
+import Router from './router';
 if (process.env.NODE_ENV === 'production') console.log = function () {};
 const App = props => <Router />;
 

src/router/Router.tsx

@@ -1,194 +0,0 @@
-import { useCallback, lazy, Suspense, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import {
-  BrowserRouter as AppRouter,
-  Redirect,
-  Route,
-  Switch,
-  RouteComponentProps
-} from 'react-router-dom';
-import { useLayout } from '@hooks/useLayout';
-import { useRouterTransition } from '@hooks/useRouterTransition';
-import LayoutWrapper from '@layouts/components/layout-wrapper';
-import BlankLayout from '@layouts/BlankLayout';
-import HeaderLayout from '@layouts/HeaderLayout';
-import HorizontalLayout from '@src/layouts/HorizontalLayout';
-import VerticalLayout from '@src/layouts/VerticalLayout';
-import * as Actions from '../modules/account/auth/actions';
-import { Routes } from './routes';
-import { useSelector } from '@store/storeConfig/store';
-import { IRoute } from './routes/type';
-
-const NotAuthorized = lazy(() => import('@src/views/NotAuthorized'));
-const Error = lazy(() => import('@src/views/Error'));
-
-interface IFinalRoute extends RouteComponentProps {
-  route: IRoute;
-}
-
-const Router = () => {
-  const [layout, setLayout] = useLayout();
-  const [transition, setTransition] = useRouterTransition();
-  const { isLogin } = useSelector(state => state.authState);
-  // const isLogin = true;
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (!isLogin) {
-      dispatch(Actions.check.request());
-    }
-  }, [isLogin]);
-
-  const DefaultLayout =
-    layout === 'horizontal' ? 'HorizontalLayout' : 'VerticalLayout';
-
-  const Layouts = {
-    BlankLayout,
-    VerticalLayout,
-    HorizontalLayout,
-    HeaderLayout
-  };
-
-  const currentActiveItem = null;
-
-  const LayoutRoutesAndPaths = (layout: string) => {
-    const LayoutRoutes: IRoute[] = [];
-    const LayoutPaths: string[] = [];
-
-    if (Routes) {
-      Routes.filter(route => {
-        if (
-          route.layout === layout ||
-          (route.layout === undefined && DefaultLayout === layout)
-        ) {
-          LayoutRoutes.push(route);
-          LayoutPaths.push(route.path);
-        }
-      });
-    }
-
-    return { LayoutRoutes, LayoutPaths };
-  };
-
-  const FinalRoute = (props: IFinalRoute) => {
-    const route = props.route;
-    // let action, resource;
-
-    // if (route.meta) {
-    //   action = route.meta.action ? route.meta.action : null;
-    //   resource = route.meta.resource ? route.meta.resource : null;
-    // }
-
-    if (isLogin === false && !route.meta?.authRoute) {
-      return <Redirect to='/account/login' />;
-    } else {
-      const Component: (props: IFinalRoute) => JSX.Element =
-        route.component as (props: IFinalRoute) => JSX.Element;
-      // switch (props.route.path) {
-      //   case '/account/register':
-      //   case '/account/find':
-      //     return <Redirect to='/main/dashboard' />;
-      //   default:
-      //     return <route.component {...props} />;
-      // }
-
-      return <Component {...props} />;
-    }
-  };
-
-  const ResolveRoutes = useCallback(() => {
-    return Object.keys(Layouts).map((layout, index) => {
-      const LayoutTag = Layouts[layout];
-
-      const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout);
-      const routerProps = {};
-
-      return (
-        <Route path={LayoutPaths} key={index}>
-          <LayoutTag
-            routerProps={routerProps}
-            layout={layout}
-            setLayout={setLayout}
-            transition={transition}
-            setTransition={setTransition}
-            currentActiveItem={currentActiveItem}
-          >
-            <Switch>
-              {LayoutRoutes.map(route => {
-                return (
-                  <Route
-                    key={route.path}
-                    path={route.path}
-                    exact={route.exact === true}
-                    render={props => {
-                      Object.assign(routerProps, {
-                        ...props,
-                        meta: route.meta
-                      });
-
-                      return (
-                        <Suspense fallback={null}>
-                          <LayoutWrapper
-                            layout={DefaultLayout}
-                            transition={transition}
-                            setTransition={setTransition}
-                            {...(route.appLayout
-                              ? {
-                                  appLayout: route.appLayout
-                                }
-                              : {})}
-                            {...(route.meta
-                              ? {
-                                  routeMeta: route.meta
-                                }
-                              : {})}
-                            {...(route.className
-                              ? {
-                                  wrapperClass: route.className
-                                }
-                              : {})}
-                          >
-                            <FinalRoute route={route} {...props} />
-                          </LayoutWrapper>
-                        </Suspense>
-                      );
-                    }}
-                  />
-                );
-              })}
-            </Switch>
-          </LayoutTag>
-        </Route>
-      );
-    });
-  }, [Layouts]);
-
-  return (
-    <AppRouter basename={process.env.REACT_APP_BASENAME}>
-      <Switch>
-        <Route
-          exact
-          path='/'
-          render={() => {
-            return <Redirect to='/main/dashboard' />;
-          }}
-        />
-
-        <Route
-          exact
-          path='/not-authorized'
-          render={props => (
-            <Layouts.BlankLayout>
-              <NotAuthorized />
-            </Layouts.BlankLayout>
-          )}
-        />
-        {ResolveRoutes()}
-
-        <Route path='*' component={Error} />
-      </Switch>
-    </AppRouter>
-  );
-};
-
-export default Router;

src/router/hoc/AuthRoutes.tsx

@@ -0,0 +1,28 @@
+import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { useSelector } from '@store/storeConfig/store';
+import { IRoute } from '../routes/type';
+
+interface IFinalRoute extends RouteComponentProps {
+  route: IRoute;
+}
+
+export default function AuthRoutes(props: IFinalRoute) {
+  const { isLogin } = useSelector(state => state.authState);
+  const a = useSelector(state => state);
+
+  if (isLogin === false && !props.route.meta?.authRoute) {
+    return <Redirect to='/account/login' />;
+  } else {
+    const Component: (props: IFinalRoute) => JSX.Element = props.route
+      .component as (props: IFinalRoute) => JSX.Element;
+    // switch (props.route.path) {
+    //   case '/account/register':
+    //   case '/account/find':
+    //     return <Redirect to='/main/dashboard' />;
+    //   default:
+    //     return <route.component {...props} />;
+    // }
+
+    return <Component {...props} />;
+  }
+}

src/router/hoc/ResolveRoutes.tsx

@@ -0,0 +1,121 @@
+import { Suspense, useEffect } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import BlankLayout from '@layouts/BlankLayout';
+import HeaderLayout from '@layouts/HeaderLayout';
+import HorizontalLayout from '@src/layouts/HorizontalLayout';
+import VerticalLayout from '@src/layouts/VerticalLayout';
+import { useLayout } from '@hooks/useLayout';
+import { useRouterTransition } from '@hooks/useRouterTransition';
+import LayoutWrapper from '@layouts/components/layout-wrapper';
+import { IRoute } from '../routes/type';
+import { Routes } from '../routes';
+import AuthRoutes from './AuthRoutes';
+import * as Actions from '../../modules/account/auth/actions';
+
+export default function ResolveRoutes() {
+  const [layout, setLayout] = useLayout();
+  const [transition, setTransition] = useRouterTransition();
+
+  const dispatch = useDispatch();
+
+  // useEffect(() => {
+  //   if (!isLogin) {
+  //     dispatch(Actions.check.request());
+  //   }
+  // }, [isLogin]);
+
+  const DefaultLayout =
+    layout === 'horizontal' ? 'HorizontalLayout' : 'VerticalLayout';
+
+  const Layouts = {
+    BlankLayout,
+    VerticalLayout,
+    HorizontalLayout,
+    HeaderLayout
+  };
+
+  const LayoutRoutesAndPaths = (layout: string) => {
+    const LayoutRoutes: IRoute[] = [];
+    const LayoutPaths: string[] = [];
+
+    if (Routes) {
+      Routes.filter(route => {
+        if (
+          route.layout === layout ||
+          (route.layout === undefined && DefaultLayout === layout)
+        ) {
+          LayoutRoutes.push(route);
+          LayoutPaths.push(route.path);
+        }
+      });
+    }
+
+    return { LayoutRoutes, LayoutPaths };
+  };
+
+  return Object.keys(Layouts).map((layout, index) => {
+    const LayoutTag = Layouts[layout];
+
+    const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout);
+    const routerProps = {};
+
+    return (
+      <Route path={LayoutPaths} key={index}>
+        <LayoutTag
+          routerProps={routerProps}
+          layout={layout}
+          setLayout={setLayout}
+          transition={transition}
+          setTransition={setTransition}
+          currentActiveItem={null}
+        >
+          <Switch>
+            {LayoutRoutes.map(route => {
+              return (
+                <Route
+                  key={route.path}
+                  path={route.path}
+                  exact={route.exact === true}
+                  render={props => {
+                    Object.assign(routerProps, {
+                      ...props,
+                      meta: route.meta
+                    });
+
+                    return (
+                      <Suspense fallback={null}>
+                        <LayoutWrapper
+                          layout={DefaultLayout}
+                          transition={transition}
+                          setTransition={setTransition}
+                          {...(route.appLayout
+                            ? {
+                                appLayout: route.appLayout
+                              }
+                            : {})}
+                          {...(route.meta
+                            ? {
+                                routeMeta: route.meta
+                              }
+                            : {})}
+                          {...(route.className
+                            ? {
+                                wrapperClass: route.className
+                              }
+                            : {})}
+                        >
+                          <AuthRoutes route={route} {...props} />
+                        </LayoutWrapper>
+                      </Suspense>
+                    );
+                  }}
+                />
+              );
+            })}
+          </Switch>
+        </LayoutTag>
+      </Route>
+    );
+  });
+}

src/router/index.tsx

@@ -0,0 +1,40 @@
+import { lazy } from 'react';
+import {
+  BrowserRouter as AppRouter,
+  Redirect,
+  Route,
+  Switch
+} from 'react-router-dom';
+import BlankLayout from '@layouts/BlankLayout';
+import ResolveRoutes from './hoc/ResolveRoutes';
+
+const NotAuthorized = lazy(() => import('@src/views/NotAuthorized'));
+const Error = lazy(() => import('@src/views/Error'));
+
+export default function Router() {
+  return (
+    <AppRouter basename={process.env.REACT_APP_BASENAME}>
+      <Switch>
+        <Route
+          exact
+          path='/'
+          render={() => {
+            return <Redirect to='/main/dashboard' />;
+          }}
+        />
+
+        <Route
+          exact
+          path='/not-authorized'
+          render={props => (
+            <BlankLayout>
+              <NotAuthorized />
+            </BlankLayout>
+          )}
+        />
+        {ResolveRoutes()}
+        <Route path='*' component={Error} />
+      </Switch>
+    </AppRouter>
+  );
+}