react-portal 삭제

package-lock.json

@@ -21968,14 +21968,6 @@
         }
       }
     },
-    "react-portal": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/react-portal/-/react-portal-4.2.2.tgz",
-      "integrity": "sha512-vS18idTmevQxyQpnde0Td6ZcUlv+pD8GTyR42n3CHUQq9OHi1C4jDE4ZWEbEsrbrLRhSECYiao58cvocwMtP7Q==",
-      "requires": {
-        "prop-types": "^15.5.8"
-      }
-    },
     "react-rating": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/react-rating/-/react-rating-2.0.5.tgz",

package.json

@@ -92,7 +92,6 @@
     "react-pdf": "5.3.2",
     "react-perfect-scrollbar": "1.5.5",
     "react-player": "2.6.2",
-    "react-portal": "^4.2.2",
     "react-rating": "2.0.5",
     "react-redux": "7.2.2",
     "react-router-dom": "5.2.0",

src/@core/layouts/VerticalLayout.js

@@ -126,7 +126,6 @@ const VerticalLayout = props => {
   }
   return (
     <div
-      id='vertical'
       className={classnames(
         `wrapper vertical-layout ${
           navbarWrapperClasses[navbarType] || 'navbar-floating'

src/@core/layouts/components/layout-wrapper/index.js

@@ -1,62 +1,68 @@
 // ** React Imports
-import { Fragment, useEffect } from 'react'
+import { Fragment, useEffect } from 'react';
 
 // ** Third Party Components
-import classnames from 'classnames'
+import classnames from 'classnames';
 
 // ** Store & Actions
-import { useSelector, useDispatch } from 'react-redux'
-import { handleContentWidth, handleMenuCollapsed, handleMenuHidden } from '@store/actions/layout'
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  handleContentWidth,
+  handleMenuCollapsed,
+  handleMenuHidden
+} from '@store/actions/layout';
 
 // ** Styles
-import 'animate.css/animate.css'
+import 'animate.css/animate.css';
 
 const LayoutWrapper = props => {
   // ** Props
-  const { layout, children, appLayout, wrapperClass, transition, routeMeta } = props
+  const { layout, children, appLayout, wrapperClass, transition, routeMeta } =
+    props;
 
   // ** Store Vars
-  const dispatch = useDispatch()
-  const store = useSelector(state => state)
-  const navbarStore = store.navbar
-  const contentWidth = store.layout.contentWidth
+  const dispatch = useDispatch();
+  const store = useSelector(state => state);
+  const navbarStore = store.navbar;
+  const contentWidth = store.layout.contentWidth;
 
   //** Vars
-  const Tag = layout === 'HorizontalLayout' && !appLayout ? 'div' : Fragment
+  const Tag = layout === 'HorizontalLayout' && !appLayout ? 'div' : Fragment;
 
   // ** Clean Up Function
   const cleanUp = () => {
     if (routeMeta) {
       if (routeMeta.contentWidth) {
-        dispatch(handleContentWidth('full'))
+        dispatch(handleContentWidth('full'));
       }
       if (routeMeta.menuCollapsed) {
-        dispatch(handleMenuCollapsed(!routeMeta.menuCollapsed))
+        dispatch(handleMenuCollapsed(!routeMeta.menuCollapsed));
       }
       if (routeMeta.menuHidden) {
-        dispatch(handleMenuHidden(!routeMeta.menuHidden))
-      }
+        dispatch(handleMenuHidden(!routeMeta.menuHidden));
       }
     }
+  };
 
   // ** ComponentDidMount
   useEffect(() => {
     if (routeMeta) {
       if (routeMeta.contentWidth) {
-        dispatch(handleContentWidth(routeMeta.contentWidth))
+        dispatch(handleContentWidth(routeMeta.contentWidth));
       }
       if (routeMeta.menuCollapsed) {
-        dispatch(handleMenuCollapsed(routeMeta.menuCollapsed))
+        dispatch(handleMenuCollapsed(routeMeta.menuCollapsed));
       }
       if (routeMeta.menuHidden) {
-        dispatch(handleMenuHidden(routeMeta.menuHidden))
+        dispatch(handleMenuHidden(routeMeta.menuHidden));
       }
     }
-    return () => cleanUp()
-  }, [])
+    return () => cleanUp();
+  }, []);
 
   return (
     <div
+      id='app-content'
       className={classnames('app-content content overflow-hidden', {
         [wrapperClass]: wrapperClass,
         'show-overlay': navbarStore.query.length
@@ -69,7 +75,8 @@ const LayoutWrapper = props => {
           'content-wrapper': !appLayout,
           'content-area-wrapper': appLayout,
           'container p-0': contentWidth === 'boxed',
-          [`animate__animated animate__${transition}`]: transition !== 'none' && transition.length
+          [`animate__animated animate__${transition}`]:
+            transition !== 'none' && transition.length
         })}
       >
         <Tag
@@ -83,7 +90,7 @@ const LayoutWrapper = props => {
         </Tag>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default LayoutWrapper
+export default LayoutWrapper;

src/views/vertiport/VertiportView.js

@@ -20,7 +20,7 @@ export default function VertiportView() {
           openSetting={openSetting}
           setOpenSetting={setOpenSetting}
         />,
-        document.getElementById('vertical')
+        document.getElementById('app-content')
       )}
     </>
   );