diff --git a/package-lock.json b/package-lock.json index c2d70aa..a3de847 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 9109bfb..af65893 100644 --- a/package.json +++ b/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", diff --git a/src/@core/layouts/VerticalLayout.js b/src/@core/layouts/VerticalLayout.js index 4e990e6..43145f8 100644 --- a/src/@core/layouts/VerticalLayout.js +++ b/src/@core/layouts/VerticalLayout.js @@ -1,136 +1,129 @@ // ** React Imports -import { useState, useEffect } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useState, useEffect } from 'react' +import { useLocation } from 'react-router-dom' // ** Store & Actions -import { useSelector, useDispatch } from 'react-redux'; -import { - handleMenuCollapsed, - handleContentWidth, - handleMenuHidden -} from '@store/actions/layout'; +import { useSelector, useDispatch } from 'react-redux' +import { handleMenuCollapsed, handleContentWidth, handleMenuHidden } from '@store/actions/layout' // ** Third Party Components -import classnames from 'classnames'; -import { ArrowUp } from 'react-feather'; -import ScrollToTop from 'react-scroll-up'; -import { Navbar, Button } from 'reactstrap'; +import classnames from 'classnames' +import { ArrowUp } from 'react-feather' +import ScrollToTop from 'react-scroll-up' +import { Navbar, Button } from 'reactstrap' // ** Configs -import themeConfig from '@configs/themeConfig'; +import themeConfig from '@configs/themeConfig' // ** Custom Components -import Customizer from '@components/customizer'; -import FooterComponent from './components/footer'; -import NavbarComponent from './components/navbar'; -import SidebarComponent from './components/menu/vertical-menu'; +import Customizer from '@components/customizer' +import FooterComponent from './components/footer' +import NavbarComponent from './components/navbar' +import SidebarComponent from './components/menu/vertical-menu' // ** Custom Hooks -import { useRTL } from '@hooks/useRTL'; -import { useSkin } from '@hooks/useSkin'; -import { useNavbarType } from '@hooks/useNavbarType'; -import { useFooterType } from '@hooks/useFooterType'; -import { useNavbarColor } from '@hooks/useNavbarColor'; +import { useRTL } from '@hooks/useRTL' +import { useSkin } from '@hooks/useSkin' +import { useNavbarType } from '@hooks/useNavbarType' +import { useFooterType } from '@hooks/useFooterType' +import { useNavbarColor } from '@hooks/useNavbarColor' // ** Styles -import '@styles/base/core/menu/menu-types/vertical-menu.scss'; -import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss'; +import '@styles/base/core/menu/menu-types/vertical-menu.scss' +import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss' const VerticalLayout = props => { // ** Props - const { children, navbar, footer, menu, routerProps, currentActiveItem } = - props; + const { children, navbar, footer, menu, routerProps, currentActiveItem } = props // ** Hooks - const [skin, setSkin] = useSkin(); - const [isRtl, setIsRtl] = useRTL(); - const [navbarType, setNavbarType] = useNavbarType(); - const [footerType, setFooterType] = useFooterType(); - const [navbarColor, setNavbarColor] = useNavbarColor(); + const [skin, setSkin] = useSkin() + const [isRtl, setIsRtl] = useRTL() + const [navbarType, setNavbarType] = useNavbarType() + const [footerType, setFooterType] = useFooterType() + const [navbarColor, setNavbarColor] = useNavbarColor() // ** States - const [isMounted, setIsMounted] = useState(false); - const [menuVisibility, setMenuVisibility] = useState(false); - const [windowWidth, setWindowWidth] = useState(window.innerWidth); + const [isMounted, setIsMounted] = useState(false) + const [menuVisibility, setMenuVisibility] = useState(false) + const [windowWidth, setWindowWidth] = useState(window.innerWidth) // ** Store Vars - const dispatch = useDispatch(); - const layoutStore = useSelector(state => state.layout); + const dispatch = useDispatch() + const layoutStore = useSelector(state => state.layout) // ** Update Window Width const handleWindowWidth = () => { - setWindowWidth(window.innerWidth); - }; + setWindowWidth(window.innerWidth) + } // ** Vars - const location = useLocation(); - const contentWidth = layoutStore.contentWidth; - const menuCollapsed = layoutStore.menuCollapsed; - const isHidden = layoutStore.menuHidden; + const location = useLocation() + const contentWidth = layoutStore.contentWidth + const menuCollapsed = layoutStore.menuCollapsed + const isHidden = layoutStore.menuHidden // ** Toggles Menu Collapsed - const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val)); + const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val)) // ** Handles Content Width - const setContentWidth = val => dispatch(handleContentWidth(val)); + const setContentWidth = val => dispatch(handleContentWidth(val)) // ** Handles Content Width - const setIsHidden = val => dispatch(handleMenuHidden(val)); + const setIsHidden = val => dispatch(handleMenuHidden(val)) //** This function will detect the Route Change and will hide the menu on menu item click useEffect(() => { if (menuVisibility && windowWidth < 1200) { - setMenuVisibility(false); + setMenuVisibility(false) } - }, [location]); + }, [location]) //** Sets Window Size & Layout Props useEffect(() => { if (window !== undefined) { - window.addEventListener('resize', handleWindowWidth); + window.addEventListener('resize', handleWindowWidth) } - }, [windowWidth]); + }, [windowWidth]) //** ComponentDidMount useEffect(() => { - setIsMounted(true); - return () => setIsMounted(false); - }, []); + setIsMounted(true) + return () => setIsMounted(false) + }, []) // ** Vars const footerClasses = { static: 'footer-static', sticky: 'footer-fixed', hidden: 'footer-hidden' - }; + } const navbarWrapperClasses = { floating: 'navbar-floating', sticky: 'navbar-sticky', static: 'navbar-static', hidden: 'navbar-hidden' - }; + } const navbarClasses = { floating: 'floating-nav', sticky: 'fixed-top', static: 'navbar-static-top', hidden: 'd-none' - }; + } - const bgColorCondition = - navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white'; + const bgColorCondition = navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white' if (!isMounted) { - return null; + return null } return (
= 1200, @@ -164,21 +157,11 @@ const VerticalLayout = props => { dark={skin === 'dark' || bgColorCondition} color={bgColorCondition ? navbarColor : undefined} className={classnames( - `header-navbar navbar align-items-center ${ - navbarClasses[navbarType] || 'floating-nav' - } navbar-shadow` + `header-navbar navbar align-items-center ${navbarClasses[navbarType] || 'floating-nav'} navbar-shadow` )} >
- {navbar ? ( - navbar - ) : ( - - )} + {navbar ? navbar : }
{children} @@ -218,21 +201,11 @@ const VerticalLayout = props => { /> ) : null} {themeConfig.layout.scrollTop === true ? ( @@ -245,7 +218,7 @@ const VerticalLayout = props => {
) : null} - ); -}; + ) +} -export default VerticalLayout; +export default VerticalLayout diff --git a/src/components/vertiport/VertiportRightMenu.js b/src/components/vertiport/VertiportRightMenu.js deleted file mode 100644 index 40736be..0000000 --- a/src/components/vertiport/VertiportRightMenu.js +++ /dev/null @@ -1,29 +0,0 @@ -import { Map } from 'react-feather'; - -export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => { - return ( - <> - {openSetting ? ( -
- -
test
-
- ) : ( -
- -
-
- )} - - ); -}; diff --git a/src/views/vertiport/VertiportView.js b/src/views/vertiport/VertiportView.js index 5a4b5c0..ed207c1 100644 --- a/src/views/vertiport/VertiportView.js +++ b/src/views/vertiport/VertiportView.js @@ -1,22 +1,57 @@ import '@styles/react/libs/flatpickr/flatpickr.scss'; import '@styles/react/libs/tables/react-dataTable-component.scss'; import '../../assets/css/custom.css'; -import { createPortal } from 'react-dom'; + import { useState } from 'react'; -import { VertiportRightMenu } from '../../components/vertiport/VertiportRightMenu'; +import { Map } from 'react-feather'; export default function VertiportView() { - const [openSetting, setOpenSetting] = useState(false); + // 오른쪽 사이드 메뉴 표출 여부 + const [openSetting, setOpenSetting] = useState(true); return ( <> -
test
- {createPortal( - , - document.getElementById('vertical') +
+ test +
+ {openSetting ? ( +
+ +
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+
+
+ ) : ( +
+ +
+
)} );