config override alias 설정 수정

config-overrides.js

@@ -1,6 +1,6 @@
 const SassRuleRewire = require('react-app-rewire-sass-rule');
+const { alias, configPaths } = require('react-app-rewire-alias');
 const path = require('path');
-const rewireAliases = require('react-app-rewire-aliases');
 
 module.exports = function override(config, env) {
   require('react-app-rewire-postcss')(config, {
@@ -15,18 +15,6 @@ module.exports = function override(config, env) {
     chunks: 'all'
   };
 
-  config = rewireAliases.aliasesOptions({
-    '@src': path.resolve(__dirname, 'src'),
-    '@assets': path.resolve(__dirname, 'src/@core/assets'),
-    '@components': path.resolve(__dirname, 'src/@core/components'),
-    '@layouts': path.resolve(__dirname, 'src/@core/layouts'),
-    '@store': path.resolve(__dirname, 'src/redux'),
-    '@styles': path.resolve(__dirname, 'src/@core/scss'),
-    '@configs': path.resolve(__dirname, 'src/configs'),
-    '@utils': path.resolve(__dirname, 'src/utility/Utils'),
-    '@hooks': path.resolve(__dirname, 'src/utility/hooks')
-  })(config, env);
-
   config = new SassRuleRewire()
     .withRuleOptions({
       test: /\.s[ac]ss$/i,
@@ -42,5 +30,9 @@ module.exports = function override(config, env) {
       ]
     })
     .rewire(config, env);
+
+  // Alias
+  config = alias(configPaths('./tsconfig.paths.json'))(config);
+
   return config;
 };

package-lock.json

@@ -4023,9 +4023,9 @@
       "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA=="
     },
     "@types/node": {
-      "version": "15.14.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.14.1.tgz",
-      "integrity": "sha512-wF6hazbsnwaW3GhK4jFuw5NaLDQVRQ6pWQUGAUrJzxixFkTaODSiAKMPXuHwPEPkAKQWHAzj6uJ5h+3zU9gQxg=="
+      "version": "15.14.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.14.9.tgz",
+      "integrity": "sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A=="
     },
     "@types/normalize-package-data": {
       "version": "2.4.0",
@@ -13239,11 +13239,6 @@
         "verror": "1.10.0"
       }
     },
-    "jsts": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/jsts/-/jsts-2.9.0.tgz",
-      "integrity": "sha512-QU9aQ+qZOSkMcX+ZZQevW0nswoKGAVoFfDycmAQeeHNYMnB4PoopiCXMKE2t93mEZeM82ikUA+eGdJjfJN5AkA=="
-    },
     "jsx-ast-utils": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz",

package.json

@@ -20,7 +20,6 @@
     "@types/googlemaps": "^3.43.3",
     "@types/history": "^4.7.8",
     "@types/jest": "^26.0.23",
-    "@types/node": "^15.12.2",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.7",
     "@types/react-redux": "^7.1.16",

src/router/Router.js

@@ -17,6 +17,9 @@ import * as Actions from '../modules/account/login/actions/authAction';
 import { Routes } from './routes';
 import { useCallback } from 'react';
 
+const NotAuthorized = lazy(() => import('@src/views/NotAuthorized'));
+const Error = lazy(() => import('@src/views/Error'));
+
 const Router = () => {
   const [layout, setLayout] = useLayout();
   const [transition, setTransition] = useRouterTransition();
@@ -61,10 +64,6 @@ const Router = () => {
     return { LayoutRoutes, LayoutPaths };
   };
 
-  const NotAuthorized = lazy(() => import('@src/views/NotAuthorized'));
-
-  const Error = lazy(() => import('@src/views/Error'));
-
   const FinalRoute = props => {
     const route = props.route;
     let action, resource;

src/views/Error.js

@@ -1,28 +1,33 @@
-import { Button } from 'reactstrap'
-import { Link } from 'react-router-dom'
-import errorImg from '@src/assets/images/pages/error.svg'
+import { Button } from 'reactstrap';
+import { Link } from 'react-router-dom';
+import errorImg from '@src/assets/images/pages/error.svg';
+import kacLogo from '../assets/images/logo/kac_logo.svg';
+import '@styles/base/pages/page-misc.scss';
 
-import '@styles/base/pages/page-misc.scss'
-
-import logoImg from '@src/assets/images/pal_logo.png'
 const Error = () => {
   return (
     <div className='misc-wrapper'>
-      <a className='brand-logo' href='/'>
-        <img src={logoImg} width="50"/>
-        <h2 className='brand-text text-primary ml-1'>Drone Control System</h2>
-      </a>
+      <div className='login-logo'>
+        <img src={kacLogo} />
+      </div>
       <div className='misc-inner p-2 p-sm-3'>
         <div className='w-100 text-center'>
           <h2 className='mb-1'>Page Not Found 🕵🏻‍♀️</h2>
-          <p className='mb-2'>Oops! 😖 The requested URL was not found on this server.</p>
-          <Button.Ripple tag={Link} to='/' color='primary' className='btn-sm-block mb-2'>
+          <p className='mb-2'>
+            Oops! 😖 The requested URL was not found on this server.
+          </p>
+          <Button.Ripple
+            tag={Link}
+            to='/'
+            color='primary'
+            className='btn-sm-block mb-2'
+          >
             Back to home
           </Button.Ripple>
           <img className='img-fluid' src={errorImg} alt='Not authorized page' />
         </div>
       </div>
     </div>
-  )
-}
-export default Error
+  );
+};
+export default Error;

src/views/NotAuthorized.js

@@ -1,30 +1,38 @@
-import { Button } from 'reactstrap'
-import { Link } from 'react-router-dom'
-import notAuthImg from '@src/assets/images/pages/not-authorized.svg'
-
-import '@styles/base/pages/page-misc.scss'
+import { Button } from 'reactstrap';
+import { Link } from 'react-router-dom';
+import notAuthImg from '@src/assets/images/pages/not-authorized.svg';
+import kacLogo from '../assets/images/logo/kac_logo.svg';
+import '@styles/base/pages/page-misc.scss';
 
 const NotAuthorized = () => {
   return (
     <div className='misc-wrapper'>
-      <a className='brand-logo' href='/'>
-        <img src={logoImg} width="50"/>
-        <h2 className='brand-text text-primary ml-1'>Drone Control System</h2>
-      </a>
+      <div className='login-logo'>
+        <img src={kacLogo} />
+      </div>
       <div className='misc-inner p-2 p-sm-3'>
         <div className='w-100 text-center'>
           <h2 className='mb-1'>You are not authorized! 🔐</h2>
           <p className='mb-2'>
-            The Webtrends Marketing Lab website in IIS uses the default IUSR account credentials to access the web pages
-            it serves.
+            The Webtrends Marketing Lab website in IIS uses the default IUSR
+            account credentials to access the web pages it serves.
           </p>
-          <Button.Ripple tag={Link} to='/pages/login-v2' color='primary' className='btn-sm-block mb-1'>
+          <Button.Ripple
+            tag={Link}
+            to='/'
+            color='primary'
+            className='btn-sm-block mb-1'
+          >
             Back to login
           </Button.Ripple>
-          <img className='img-fluid' src={notAuthImg} alt='Not authorized page' />
+          <img
+            className='img-fluid'
+            src={notAuthImg}
+            alt='Not authorized page'
+          />
         </div>
       </div>
     </div>
-  )
-}
-export default NotAuthorized
+  );
+};
+export default NotAuthorized;

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "noImplicitAny": false,
     "allowJs": true,
     "skipLibCheck": true,
@@ -21,7 +17,6 @@
     "jsx": "react-jsx",
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "extends": "./tsconfig.paths.json"
 }

tsconfig.paths.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@src/*": ["src/*"],
+      "@assets/*": ["src/@core/assets/*"],
+      "@components/*": ["src/@core/components/*"],
+      "@layouts/*": ["src/@core/layouts/*"],
+      "@store/*": ["src/redux/*"],
+      "@styles/*": ["src/@core/scss/*"],
+      "@configs/*": ["src/configs/*"],
+      "@utils/*": ["src/utility/Utils/*"],
+      "@hooks/*": ["src/utility/hooks/*"]
+    }
+  }
+}