비행 시뮬레이션 페이지 로고(인천,웅진) 추가

Reviewed-on: #2

.env.development

@@ -1,3 +1,20 @@
-REACT_APP_HOST = http://localhost:8080/
-REACT_APP_WS_HOST = ws://localhost:8081/ws
+# REACT_APP_HOST = http://192.168.0.30:8080/
+# REACT_APP_WS_HOST = ws://192.168.0.30:8081/ws
+
+# REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/
+
+REACT_APP_HOST = http://pav.palntour.com:8080/
+REACT_APP_WS_HOST = ws://pav.palntour.com:8081/ws
 REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/
+
+# Naver Search API HOST
+NAVER_SEARCH_API_HOST = https://openapi.naver.com/v1/search/local.json
+
+#windy API KEY
+REACT_WINDY_KEY = wf6Lkn1MAtqcgyW78xbceFHBz6ccsUo8
+
+# API KEY
+NAVER_APP_CLIENT_KEY = WGEct3bJhQC0pyMsP_GK
+NAVER_APP_SECRET_KEY = Q4K4OtUYol
+
+REACT_APP_MAPBOX_TOKEN = pk.eyJ1IjoianVuaGVlZSIsImEiOiJjbGxnNWVhc3IweDJsM2dvYmI1ZXg2MGljIn0.EmSS1ocpPJv2ZaduQHmz_Q

.env.production

@@ -1,3 +1,14 @@
-REACT_APP_HOST = http://control-api.palntour.com/
-REACT_APP_WS_HOST = ws://control-websocket.palntour.com/ws
+REACT_APP_HOST = http://pav.palntour.com:8080/
+REACT_APP_WS_HOST = ws://pav.palntour.com:8081/ws
 REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/
+
+# Naver Search API HOST
+NAVER_SEARCH_API_HOST = https://openapi.naver.com/v1/search/local.json
+
+#windy API KEY
+REACT_WINDY_KEY = 8ynJ7tneZjmRxLmHQPGaDPGsGabgQhkC
+
+# API KEY
+NAVER_APP_CLIENT_KEY = WGEct3bJhQC0pyMsP_GK
+NAVER_APP_SECRET_KEY = Q4K4OtUYol
+

.gitignore

@@ -13,10 +13,13 @@
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+#.env.local
+#.env.development.local
+#.env.test.local
+#.env.production.local
+#.env
+#.env.development
+#.env.production
 
 npm-debug.log*
 yarn-debug.log*

.prettierignore

@@ -0,0 +1,2 @@
+custom.css
+reset.css

package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "@casl/ability": "5.2.2",
     "@casl/react": "2.1.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@fullcalendar/core": "5.7.2",
     "@fullcalendar/daygrid": "5.7.2",
     "@fullcalendar/interaction": "5.7.2",
@@ -13,9 +15,11 @@
     "@fullcalendar/timegrid": "5.7.2",
     "@fullcalendar/timeline": "5.7.2",
     "@hookform/resolvers": "1.3.4",
+    "@mui/material": "^5.14.17",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.5",
     "@stomp/stompjs": "^6.1.0",
     "@turf/buffer": "^6.5.0",
-    "@turf/turf": "^6.5.0",
+    "@turf/turf": "6.5.0",
     "@types/googlemaps": "^3.43.3",
     "@types/history": "^4.7.8",
     "@types/jest": "^26.0.23",
@@ -69,7 +73,7 @@
     "react-copy-to-clipboard": "5.0.2",
     "react-country-flag": "2.0.1",
     "react-csv": "^2.0.3",
-    "react-data-table-component": "6.11.2",
+    "react-data-table-component": "^7.5.3",
     "react-datepicker": "^4.2.1",
     "react-dom": "17.0.1",
     "react-draft-wysiwyg": "1.14.5",
@@ -92,6 +96,7 @@
     "react-scroll-up": "1.3.7",
     "react-select": "4.0.2",
     "react-shepherd": "3.3.0",
+    "react-slick": "^0.29.0",
     "react-slidedown": "2.4.5",
     "react-sortablejs": "6.0.0",
     "react-toastify": "7.0.3",
@@ -103,8 +108,9 @@
     "redux-thunk": "2.3.0",
     "sass": "1.26.8",
     "screenfull": "5.0.2",
+    "slick-carousel": "^1.8.1",
     "sortablejs": "1.12.0",
-    "styled-components": "5.1.1",
+    "styled-components": "^5.1.1",
     "sweetalert2": "10.14.0",
     "sweetalert2-react-content": "3.0.1",
     "swiper": "6.0.4",
@@ -146,10 +152,21 @@
     "sass-loader": "^8.0.2",
     "typescript": "^4.3.5"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
-  ],
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all",
+      "not safari < 10",
+      "not chrome < 51",
+      "not android < 5",
+      "not ie < 12"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "homepage": ""
 }

public/index.html

@@ -12,6 +12,14 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
+
+    <!-- <link
+      rel="stylesheet"
+      href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.css"
+      type="text/css"
+    />
+    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.js"></script> -->
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <script
       type="text/javascript"
@@ -22,6 +30,8 @@
       src="https://cdnjs.cloudflare.com/ajax/libs/jsts/2.0.3/jsts.min.js"
     ></script>
 
+    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
+    <script src="https://api.windy.com/assets/map-forecast/libBoot.js"></script>
     <!-- <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDKCsI8cbzgi4es3xCUIhElUm6NRM73QuI" ></script> -->
 
     <!-- <script
@@ -34,7 +44,7 @@
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKCsI8cbzgi4es3xCUIhElUm6NRM73QuI&callback=initMap"
     ></script> -->
 
-<!--   
+    <!--   
     <script
       type="text/javascript"
       src="http://maps.googleapis.com/maps/api/js"
@@ -61,7 +71,7 @@
       href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
       crossorigin=""
     />
-    <title>Dron Control System</title>
+    <title>PAV Monitoring System</title>
   </head>
   <body>
     <div id="root"></div>

src/@core/components/spinner/Loading-spinner.js

@@ -7,7 +7,7 @@ const ComponentSpinner = () => {
         <div className='effect-3 effects'></div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ComponentSpinner
+export default ComponentSpinner;

src/@core/layouts/HorizontalLayout.js

@@ -1,123 +1,129 @@
 // ** React Imports
-import { useState, useEffect } from 'react'
-import { Link } from 'react-router-dom'
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 
 // ** Store & Actions
-import { useSelector, useDispatch } from 'react-redux'
-import { handleMenuHidden, handleContentWidth } from '@store/actions/layout'
+import { useSelector, useDispatch } from 'react-redux';
+import { handleMenuHidden, handleContentWidth } from '@store/actions/layout';
 
 // ** Third Party Components
-import classnames from 'classnames'
-import { ArrowUp } from 'react-feather'
-import ScrollToTop from 'react-scroll-up'
-import { Navbar, NavItem, Button } from 'reactstrap'
+import classnames from 'classnames';
+import { ArrowUp } from 'react-feather';
+import ScrollToTop from 'react-scroll-up';
+import { Navbar, NavItem, Button } from 'reactstrap';
 
 // ** Configs
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 // ** Custom Components
-import Customizer from '@components/customizer'
-import NavbarComponent from './components/navbar'
-import FooterComponent from './components/footer'
-import MenuComponent from './components/menu/horizontal-menu'
+import Customizer from '@components/customizer';
+import NavbarComponent from './components/navbar';
+import FooterComponent from './components/footer';
+import MenuComponent from './components/menu/horizontal-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/horizontal-menu.scss'
+import '@styles/base/core/menu/menu-types/horizontal-menu.scss';
 
 const HorizontalLayout = props => {
   // ** Props
-  const { children, navbar, footer, menu, currentActiveItem, routerProps } = props
+  const { children, navbar, footer, menu, currentActiveItem, routerProps } =
+    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 [navbarScrolled, setNavbarScrolled] = useState(false)
+  const [isMounted, setIsMounted] = useState(false);
+  const [navbarScrolled, setNavbarScrolled] = useState(false);
 
   // ** Store Vars
-  const dispatch = useDispatch()
-  const layoutStore = useSelector(state => state.layout)
+  const dispatch = useDispatch();
+  const layoutStore = useSelector(state => state.layout);
+  const { user } = useSelector(state => state.authState);
 
   // ** Vars
-  const contentWidth = layoutStore.contentWidth
-  const isHidden = layoutStore.menuHidden
+  const contentWidth = layoutStore.contentWidth;
+  const isHidden = layoutStore.menuHidden;
 
   // ** 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));
 
   // ** UseEffect Cleanup
   const cleanup = () => {
-    setIsMounted(false)
-    setNavbarScrolled(false)
-  }
+    setIsMounted(false);
+    setNavbarScrolled(false);
+  };
 
   //** ComponentDidMount
   useEffect(() => {
-    setIsMounted(true)
+    setIsMounted(true);
     window.addEventListener('scroll', function () {
       if (window.pageYOffset > 65 && navbarScrolled === false) {
-        setNavbarScrolled(true)
+        setNavbarScrolled(true);
       }
       if (window.pageYOffset < 65) {
-        setNavbarScrolled(false)
+        setNavbarScrolled(false);
       }
-    })
-    return () => cleanup()
-  }, [])
+    });
+    return () => cleanup();
+  }, []);
 
   // ** Vars
   const footerClasses = {
     static: 'footer-static',
     sticky: 'footer-fixed',
     hidden: 'footer-hidden'
-  }
+  };
 
   const navbarWrapperClasses = {
     floating: 'navbar-floating',
     sticky: 'navbar-sticky',
     static: 'navbar-static'
-  }
+  };
 
   const navbarClasses = {
     floating: 'floating-nav',
     sticky: 'fixed-top'
-  }
+  };
 
-  const bgColorCondition = navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white'
+  const bgColorCondition =
+    navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white';
 
   if (!isMounted) {
-    return null
+    return null;
   }
 
   return (
     <div
       className={classnames(
-        `wrapper horizontal-layout horizontal-menu ${navbarWrapperClasses[navbarType] || 'navbar-floating'} ${
-          footerClasses[footerType] || 'footer-static'
-        } menu-expanded`
+        `wrapper horizontal-layout horizontal-menu ${
+          navbarWrapperClasses[navbarType] || 'navbar-floating'
+        } ${footerClasses[footerType] || 'footer-static'} menu-expanded`
       )}
       {...(isHidden ? { 'data-col': '1-column' } : {})}
     >
       <Navbar
         expand='lg'
-        className={classnames('header-navbar navbar-fixed align-items-center navbar-shadow navbar-brand-center', {
-          'navbar-scrolled': navbarScrolled
-        })}
+        className={classnames(
+          'header-navbar navbar-fixed align-items-center navbar-shadow navbar-brand-center',
+          {
+            'navbar-scrolled': navbarScrolled
+          }
+        )}
       >
         {!navbar && (
           <div className='navbar-header d-xl-block d-none'>
@@ -127,7 +133,9 @@ const HorizontalLayout = props => {
                   <span className='brand-logo'>
                     <img src={themeConfig.app.appLogoImage} alt='logo' />
                   </span>
-                  <h2 className='brand-text mb-0'>{themeConfig.app.appName}</h2>
+                  <h2 className='brand-text mb-0'>
+                    {user?.cstmrSno === 27 ? 'FLYTO' : themeConfig.app.appName}
+                  </h2>
                 </Link>
               </NavItem>
             </ul>
@@ -145,12 +153,24 @@ const HorizontalLayout = props => {
             expand='sm'
             light={skin !== 'dark'}
             dark={skin === 'dark' || bgColorCondition}
-            className={classnames(`header-navbar navbar-horizontal navbar-shadow menu-border`, {
-              [navbarClasses[navbarType]]: navbarType !== 'static',
-              'floating-nav': (!navbarClasses[navbarType] && navbarType !== 'static') || navbarType === 'floating'
-            })}
+            className={classnames(
+              `header-navbar navbar-horizontal navbar-shadow menu-border`,
+              {
+                [navbarClasses[navbarType]]: navbarType !== 'static',
+                'floating-nav':
+                  (!navbarClasses[navbarType] && navbarType !== 'static') ||
+                  navbarType === 'floating'
+              }
+            )}
           >
-            {menu ? menu : <MenuComponent routerProps={routerProps} currentActiveItem={currentActiveItem} />}
+            {menu ? (
+              menu
+            ) : (
+              <MenuComponent
+                routerProps={routerProps}
+                currentActiveItem={currentActiveItem}
+              />
+            )}
           </Navbar>
         </div>
       ) : null}
@@ -180,11 +200,21 @@ const HorizontalLayout = props => {
         />
       ) : null}
       <footer
-        className={classnames(`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, {
-          'd-none': footerType === 'hidden'
-        })}
+        className={classnames(
+          `footer footer-light ${footerClasses[footerType] || 'footer-static'}`,
+          {
+            'd-none': footerType === 'hidden'
+          }
+        )}
       >
-        {footer ? footer : <FooterComponent footerType={footerType} footerClasses={footerClasses} />}
+        {footer ? (
+          footer
+        ) : (
+          <FooterComponent
+            footerType={footerType}
+            footerClasses={footerClasses}
+          />
+        )}
       </footer>
 
       {themeConfig.layout.scrollTop === true ? (
@@ -197,6 +227,6 @@ const HorizontalLayout = props => {
         </div>
       ) : null}
     </div>
-  )
-}
-export default HorizontalLayout
+  );
+};
+export default HorizontalLayout;

src/@core/layouts/components/menu/vertical-menu/VerticalMenuHeader.js

@@ -1,21 +1,30 @@
 // ** React Imports
-import { useEffect } from 'react'
-import { NavLink } from 'react-router-dom'
+import { useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 
 // ** Third Party Components
-import { Disc, X, Circle } from 'react-feather'
+import { Disc, X, Circle } from 'react-feather';
 
 // ** Config
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 const VerticalMenuHeader = props => {
   // ** Props
-  const { menuCollapsed, setMenuCollapsed, setMenuVisibility, setGroupOpen, menuHover } = props
+  const {
+    menuCollapsed,
+    setMenuCollapsed,
+    setMenuVisibility,
+    setGroupOpen,
+    menuHover
+  } = props;
+
+  const { user } = useSelector(state => state.authState);
 
   // ** Reset open group
   useEffect(() => {
-    if (!menuHover && menuCollapsed) setGroupOpen([])
-  }, [menuHover, menuCollapsed])
+    if (!menuHover && menuCollapsed) setGroupOpen([]);
+  }, [menuHover, menuCollapsed]);
 
   // ** Menu toggler component
   const Toggler = () => {
@@ -27,7 +36,7 @@ const VerticalMenuHeader = props => {
           className='text-primary toggle-icon d-none d-xl-block'
           onClick={() => setMenuCollapsed(true)}
         />
-      )
+      );
     } else {
       return (
         <Circle
@@ -36,30 +45,46 @@ const VerticalMenuHeader = props => {
           className='text-primary toggle-icon d-none d-xl-block'
           onClick={() => setMenuCollapsed(false)}
         />
-      )
+      );
     }
-  }
+  };
 
   return (
     <div className='navbar-header'>
       <ul className='nav navbar-nav flex-row'>
         <li className='nav-item mr-auto'>
-          <NavLink to='/' className='navbar-brand'>
-            <span className='brand-logo'>
-              <img src={themeConfig.app.appLogoImage} alt='logo' />
-            </span>
-            <h2 className='brand-text mb-0'>{themeConfig.app.appName}</h2>
+          <NavLink to='/' className='navbar-brand' style={{ marginRight: 0 }}>
+            {/* <div className='brand-logo-box'>
+              <span className='brand-logo'>
+                <img src={themeConfig.app.appLogoImage} alt='logo' />
+              </span>
+              <h2 className='brand-text mb-0'>
+                {user?.cstmrSno === 27 ? 'FLYTO' : themeConfig.app.appName}
+              </h2>
+            </div> */}
+            <div className='brand-logo-box itp'>
+              <span className='brand-logo'>
+                <img src={themeConfig.app.appLogoImage} alt='logo' />
+              </span>
+              <h2 className='brand-text mb-0'>
+                {user?.cstmrSno === 27 ? 'FLYTO' : themeConfig.app.appName}
+              </h2>
+            </div>
           </NavLink>
         </li>
         <li className='nav-item nav-toggle'>
           <div className='nav-link modern-nav-toggle cursor-pointer'>
             <Toggler />
-            <X onClick={() => setMenuVisibility(false)} className='toggle-icon icon-x d-block d-xl-none' size={20} />
+            <X
+              onClick={() => setMenuVisibility(false)}
+              className='toggle-icon icon-x d-block d-xl-none'
+              size={20}
+            />
           </div>
         </li>
       </ul>
     </div>
-  )
-}
+  );
+};
 
-export default VerticalMenuHeader
+export default VerticalMenuHeader;

src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuItems.js

@@ -1,10 +1,10 @@
 // ** Vertical Menu Components
-import VerticalNavMenuLink from './VerticalNavMenuLink'
-import VerticalNavMenuGroup from './VerticalNavMenuGroup'
-import VerticalNavMenuSectionHeader from './VerticalNavMenuSectionHeader'
+import VerticalNavMenuLink from './VerticalNavMenuLink';
+import VerticalNavMenuGroup from './VerticalNavMenuGroup';
+import VerticalNavMenuSectionHeader from './VerticalNavMenuSectionHeader';
 
 // ** Utils
-import { resolveVerticalNavMenuItemComponent as resolveNavItemComponent } from '@layouts/utils'
+import { resolveVerticalNavMenuItemComponent as resolveNavItemComponent } from '@layouts/utils';
 
 const VerticalMenuNavItems = props => {
   // ** Components Object
@@ -12,16 +12,16 @@ const VerticalMenuNavItems = props => {
     VerticalNavMenuSectionHeader,
     VerticalNavMenuGroup,
     VerticalNavMenuLink
-  }
+  };
 
   // ** Render Nav Menu Items
   const RenderNavItems = props.items.map((item, index) => {
-    const TagName = Components[resolveNavItemComponent(item)]
+    const TagName = Components[resolveNavItemComponent(item)];
 
-    return <TagName key={item.id || item.header} item={item} {...props} />
-  })
+    return <TagName key={item.id || item.header} item={item} {...props} />;
+  });
 
-  return RenderNavItems
-}
+  return RenderNavItems;
+};
 
-export default VerticalMenuNavItems
+export default VerticalMenuNavItems;

src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js

@@ -34,8 +34,6 @@ const VerticalNavMenuLink = ({
 
   const naviData = [...basis, ...statics, ...system, ...analysis];
 
-  // console.log(naviData);
-
   // ** To match path
   const match = matchPath(currentURL, {
     path: `${item.navLink}/:param`,

src/@core/layouts/components/menu/vertical-menu/index.js

@@ -9,6 +9,8 @@ import basis from '@src/navigation/basis';
 import statics from '@src/navigation/statics';
 import system from '@src/navigation/system';
 import analysis from '@src/navigation/analysis';
+import flightPlan from '@src/navigation/flightPlan';
+import reservation from '@src/navigation/reservation';
 
 // ** Third Party Components
 import classnames from 'classnames';
@@ -19,23 +21,31 @@ import VerticalMenuHeader from './VerticalMenuHeader';
 import VerticalNavMenuItems from './VerticalNavMenuItems';
 import { useSelector } from 'react-redux';
 
+import finevt_logo from '../../../../../assets/images/finevt_logo.png';
+import nam_logo from '../../../../../assets/images/nam_logo.png';
+import future_logo from '../../../../../assets/images/future_logo.png';
+
 const Sidebar = props => {
   const { topMenuCd } = useSelector(state => state.menuState);
 
   useEffect(() => {
-    console.log('>>>>>>>>>>>>>>', topMenuCd);
     navData();
   }, [topMenuCd]);
 
   const navData = () => {
-    if (topMenuCd === 'basis') {
-      return basis;
-    } else if (topMenuCd === 'system') {
-      return system;
-    } else if (topMenuCd === 'statics') {
-      return statics;
-    } else if (topMenuCd === 'analysis') {
-      return analysis;
+    switch (topMenuCd) {
+      case 'basis':
+        return basis;
+      case 'system':
+        return system;
+      case 'statics':
+        return statics;
+      case 'analysis':
+        return analysis;
+      case 'flightPlan':
+        return flightPlan;
+      case 'reservation':
+        return reservation;
     }
   };
 
@@ -120,6 +130,17 @@ const Sidebar = props => {
                   currentActiveItem={currentActiveItem}
                 />
               </ul>
+              {/* {menuHover ? (
+                <ul
+                  style={{ position: 'absolute', bottom: 0, padding: '10px' }}
+                >
+                  <img src={future_logo} width='200' />
+                  <img src={nam_logo} width='200' />
+                  <img src={finevt_logo} width='200' />
+                </ul>
+              ) : (
+                <></>
+              )} */}
             </PerfectScrollbar>
           </Fragment>
         )}

src/@core/layouts/components/navbar/NavbarUser.js

@@ -13,6 +13,7 @@ const NavbarUser = props => {
   const dispatch = useDispatch();
 
   const { topMenuCd } = useSelector(state => state.menuState);
+  const { user } = useSelector(state => state.authState);
 
   // ** Function to toggle Theme (Light/Dark)
   const ThemeToggler = () => {
@@ -81,6 +82,17 @@ const NavbarUser = props => {
             비행 이력 시스템
           </NavLink>
         </NavItem>
+        <NavItem>
+          <NavLink
+            onClick={e => handlerTopMenu('flightPlan')}
+            active={topMenuCd === 'flightPlan'}
+            // onClick={() => {
+            //   toggle('3')
+            // }}
+          >
+            비행 계획 관리
+          </NavLink>
+        </NavItem>
         <NavItem>
           <NavLink
             onClick={() => window.open('/control', '_blank')}
@@ -89,20 +101,49 @@ const NavbarUser = props => {
             //   toggle('2')
             // }}
           >
-            드론 관제 시스템
+            {/* {user?.cstmrSno === 27 ? 'UAM 관제 시스템' : '드론 관제 시스템'} */}
+            PAV 모니터링 시스템
+          </NavLink>
+        </NavItem>
+        <NavItem>
+          <NavLink
+            onClick={() =>
+              window.open(
+                'https://aim.koca.go.kr/google/xNotamViewMap.jsp',
+                '_blank'
+              )
+            }
+            // active={active === '2'}
+            // onClick={() => {
+            //   toggle('2')
+            // }}
+          >
+            NOTAM 정보
           </NavLink>
         </NavItem>
         <NavItem>
           <NavLink
-            onClick={() => window.open('/testDraw', '_blank')}
+            onClick={() => window.open('/weather/info/index', '_blank')}
             // active={active === '2'}
             // onClick={() => {
             //   toggle('2')
             // }}
           >
-            버퍼 테스트
+            날씨 정보
           </NavLink>
         </NavItem>
+        {/* <NavItem>
+          <NavLink
+            onClick={e => handlerTopMenu('reservation')}
+            active={topMenuCd === 'reservation'}
+            // active={active === '2'}
+            // onClick={() => {
+            //   toggle('2')
+            // }}
+          >
+            도심항공교통(UAM) 예약
+          </NavLink>
+        </NavItem> */}
       </Nav>
       {/* <div className='bookmark-wrapper d-flex align-items-center'>
         <NavItem className='d-none d-lg-block'>

src/@core/layouts/components/navbar/UserDropdown.js

@@ -31,7 +31,6 @@ const UserDropdown = () => {
   };
 
   // useEffect(() => {
-  //   console.log('[ISLOGIN :::::: ] ', isLogin);
   //   if (isLogin === undefined) {
   //     return;
   //   }
@@ -55,6 +54,14 @@ const UserDropdown = () => {
   //** Vars
   const userAvatar = (userData && userData.avatar) || defaultAvatar;
 
+  const movePage = url => {
+    history.push(url);
+  };
+
+  const profileInfo = () => {
+    history.push('/mypage/myinfo/');
+  };
+
   return (
     <UncontrolledDropdown tag='li' className='dropdown-user nav-item'>
       <DropdownToggle
@@ -70,7 +77,12 @@ const UserDropdown = () => {
         <Avatar img={userAvatar} imgHeight='40' imgWidth='40' status='online' />
       </DropdownToggle>
       <DropdownMenu right>
-        <DropdownItem tag={Link} to='#' onClick={e => e.preventDefault()}>
+        <DropdownItem
+          onClick={profileInfo}
+          tag={Link}
+          // to='/login'
+          to='#'
+        >
           <User size={14} className='mr-75' />
           <span className='align-middle'>Profile</span>
         </DropdownItem>

src/App.js

@@ -1,6 +1,6 @@
 // ** Router Import
-import Router from './router/Router'
+import Router from './router/Router';
+if (process.env.NODE_ENV === 'production') console.log = function () {};
+const App = props => <Router />;
 
-const App = props => <Router />
-
-export default App
+export default App;

src/assets/css/custom.css

@@ -141,6 +141,7 @@ button{border:0;background:transparent;}
 /*레이어 상세정보-리스트*/
 .drone-list .layer-content-list{cursor: pointer;}
 .layer-content-list{background:#283046;border-radius: 5px;padding:10px;color:#bbb;border: 1px solid #404656;}
+.layer-content-list.on{border:2px solid #7367f0;}
 .layer-content-list + .layer-content-list{margin-top:14px;}
 .layer-content-list dl dt{display:flex;}
 .layer-content-list dl dt + dt{margin-top:14px;}
@@ -190,6 +191,7 @@ button{border:0;background:transparent;}
 .tab-menu ul li.active{border-bottom:2px solid #7367f0;}
 .tab-content{display:none;}
 .tab-content.active{display:block;}
+
 /*날씨상세정보*/
 .layer-weather-box{color:#bbb;}
 .layer-weather-box .layer-weather-table table{border:1px solid #404656;}
@@ -227,8 +229,9 @@ h1.logo img{width:100%;}
 h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;font-size:0.9375rem;}
 .left-menu{width:80px;height:100vh;background:#283046;padding-top:20px;position:fixed;}
 .left-menu-nav, .left-menu-footer{color:#bbb;}
-.left-menu-nav li, .left-menu-footer li{margin-top:20px;text-align:center;}
+.left-menu-nav li, .left-menu-footer li{margin-top:16px;text-align:center;}
 .left-menu-footer{position:absolute;bottom:20px;left:50%;transform: translateX(-50%);}
+.socket-wrap{display:flex;justify-content: center;margin-top:24px!important}
 .socket_on{display:block;width:32px;height:32px;border-radius:100%;background:#28C76F;position: relative;}
 .socket_on svg{color:#fff;margin-top:4px;}
 .socket_on::after{content:'';display:block;width:10px;height:10px;border:2px solid #ddd;border-radius:100%;background:#28C76F;position: absolute;right:0;bottom:0px;}
@@ -255,8 +258,6 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
 .buffer-input{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 70px; margin-left: 5px;}
 .buffer-btn{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 30px; margin-left: 5px;}
 
-
-
 /*메인-알림*/
 .notice{width:650px;height:45px;overflow:hidden;position:absolute;left:50%;top:20px;transform: translate(-50%,0px);background:#283046;display:flex;font-size:0.9375rem;color:#f4f4f4;padding:0px 20px;border-radius:30px;}
 .notice-icon{padding:10px 0;}
@@ -276,7 +277,7 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
 .login{display:flex;height:100vh;color:#bbb;position:relative;}
 .login-logo{position:absolute;top:80px;left:100px;color:#bbb;font-weight:bold;font-size:1.8rem;width: 100%;}
 .login-img, .login-form {display: flex;align-items: center;justify-content: center;}
-.login-img{flex:1.2;background:#161d31;}
+.login-img{flex:1.2;background:#161d31;cursor:inherit;user-select: none;}
 .login-form{background:#283046;width:100%;flex:0.8;flex-direction: column;}
 .login-form form{width:100%;padding:0 120px;}
 .login-form .form-control{background:transparent;border:1px solid #404656;}
@@ -286,8 +287,8 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
 .login-form .form-control::placeholder{color:#bbb;}
 .login-form .vx-checkbox-con .vx-checkbox{border-color: #404656;}
 .login-txt{width:100%;margin-bottom:20px;}
-.login-txt h2{color:#f4f4f4;font-family: "Montserrat", serif;font-size:1.8rem;font-weight:bold;text-align: center;}
-.login-txt p{color:#bbb;font-family: "Montserrat", serif;font-size:1.125rem;font-weight:normal;text-align: center;margin-top:20px;}
+.login-txt h2{color:#f4f4f4;font-family: "Montserrat",'NotoSansKR', serif;font-size:1.8rem;font-weight:bold;text-align: center;}
+.login-txt p{color:#bbb;font-family: "Montserrat",'NotoSansKR', serif;font-size:1.125rem;font-weight:normal;text-align: center;margin-top:20px;}
 .full-btn button{width:100%;margin-bottom:10px;}
 .login-link{margin-top:10px;}
 @media screen and (max-width:1280px){
@@ -404,13 +405,26 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
 	.search-list-cont .list-input + .list-input{margin-top:10px;}
 }
 .tooltip-test{position:absolute;left:500px;top:500px;}
-.tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width: 180px;}
-.tooltip-box div{text-align:left;font-size:13px;color:#bbb;}
-.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:4px;}
-.tooltip-ti span, .tooltip-txt .ti{color:#f4f4f4;font-weight:500;display:block;}
-.tooltip-txt{padding-top:4px;}
+.tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width:150px;word-break: break-all;}
+/* .tooltip-box div{text-align:left;font-size:13px;} */
+.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:2px;font-size:0.875rem;color:#f4f4f4}
+/* .tooltip-ti span, .tooltip-txt .ti{color:#f4f4f4;font-weight:400;} */
+.tooltip-txt{font-weight:400;font-size:12px;padding-top:4px;word-break: keep-all;}
 .tooltip-txt-list + .tooltip-txt-list{margin-top:4px;}
 .tooltip-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid  transparent;}
+.tooltip-txt-list .ti:before{content:'/';margin:0 2px;}
+.tooltip-txt-list .ti:first-child::before{display:none;}
+/* 데이터블록 */
+.dblock-box{background:#283046;padding:6px 8px;border-radius:6px;width:150px;word-break: break-all;position:absolute}
+.dblock-box div{text-align:left;font-size:11px;color:#bbb;}
+/* .dblock-ti{border-bottom:1px solid #bbb;padding-bottom:4px;} */
+.dblock-ti span, .dblock-txt .ti{color:#f4f4f4;font-weight:500;display:block;}
+.dblock-txt{line-height: 1.2;}
+.dblock-txt-list + .dblock-txt-list{margin-top:4px;}
+/* .dblock-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid  transparent;} */
+.dblock-txt-list span{font-size:10px;}
+.dblock-txt-list span::before{content:'/';margin:0 2px;}
+.dblock-txt-list span:first-child::before{display:none;}
 
 /*회원가입*/
 .pal-register .auth-wrapper.auth-v1 .auth-inner{max-width:1200px;}
@@ -525,8 +539,8 @@ input:-internal-autofill-selected {
 .count-box form + form{margin-top:1rem;}
 .count-box .sm-ti{margin-bottom:4px;display: inline-block;}
 .sm-ti{font-weight:500;font-size: 14px;}
-/*그리드*/
 
+/*그리드*/
 .react-dataTable.pal-dateTable{border-bottom:1px solid #3b4253;}
 .react-dataTable.pal-dateTable .rdt_TableHead .rdt_TableHeadRow .rdt_TableCol div[role='button'] div{font-size: 0.875rem;font-weight:500;}
 .react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow{min-height:40px;background: #242b3d !important;}
@@ -534,6 +548,33 @@ input:-internal-autofill-selected {
 .react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow .rdt_TableCell{font-size: 0.875rem;}
 .react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow .rdt_TableCell .badge.btn{font-size:85%!important;}
 .pal-dateTable a{color:#bbb;text-decoration: underline;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.primary{background: #7367f0 !important;color:#fff;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.secondary{background: #82868b !important;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.success{background: #28c76f !important;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.danger{background: #ea5455 !important;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.warning{background: #ff9f43 !important;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.info{background: #00cfe8 !important;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.dark{background: #4b4b4b !important;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.yellow{background: #fff600 !important;}
+
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.primary .rdt_TableCell, .rdt_TableRow.primary .rdt_TableCell a{color:#fff;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.secondary .rdt_TableCell, .rdt_TableRow.secondary .rdt_TableCell a{color:#fff;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.success .rdt_TableCell, .rdt_TableRow.success .rdt_TableCell a{color:#fff;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.danger .rdt_TableCell, .rdt_TableRow.danger .rdt_TableCell a{color:#fff;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.warning .rdt_TableCell, .rdt_TableRow.warning .rdt_TableCell a{color:#fff;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.info .rdt_TableCell, .rdt_TableRow.info .rdt_TableCell a{color:#fff;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.dark .rdt_TableCell, .rdt_TableRow.dark .rdt_TableCell a{color:#fff;}
+.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.yellow .rdt_TableCell, .rdt_TableRow.yellow .rdt_TableCell a{color:#000;}
+
+.rdt_TableRow.primary .rdt_TableCell a:hover{color:#7367f0;}
+.rdt_TableRow.secondary .rdt_TableCell a:hover{color:#7367f0;}
+.rdt_TableRow.success .rdt_TableCell a:hover{color:#7367f0;}
+.rdt_TableRow.danger .rdt_TableCell a:hover{color:#7367f0;}
+.rdt_TableRow.warning .rdt_TableCell a:hover{color:#7367f0;}
+.rdt_TableRow.info .rdt_TableCell a:hover{color:#7367f0;}
+.rdt_TableRow.dark .rdt_TableCell a:hover{color:#7367f0;}
+.rdt_TableRow.yellow .rdt_TableCell a:hover{color:#7367f0;}
+
 
 @media only screen and (min-width: 768px) and (max-width: 1024px){
 	.search-list-cont-btn button{font-size:12px;padding:10px 4px;}
@@ -704,7 +745,8 @@ background-size: 75% auto;
 }  */
 
 /*datepicker-custom*/
-.datepicker-custom {display: flex;align-items:center;}
+.datepicker-custom {display: flex;align-items:center;cursor: pointer;}
+.datepicker-custom input{cursor: pointer;}
 .datepicker-custom .react-datepicker{background:#161d31;border-color:#161d31;color:#b4b7bd;font-size:0.875rem;font-weight:400;}
 .datepicker-custom .react-datepicker__header{background:transparent;border-color:transparent;color:#b4b7bd;font-size: 1.1rem;font-weight:300;}
 .datepicker-custom .react-datepicker__year-read-view--down-arrow,
@@ -736,4 +778,207 @@ background-size: 75% auto;
 
 .m_ft{display:flex;align-items:flex-end;    justify-content: space-between;}
 .m_ft_box{flex:0 0 49%}
-.m_ft_box + .m_ft_box{margin-left:1%}
+.m_ft_box + .m_ft_box{margin-left:1%}
+
+.layer-content-box .history-btn{border-radius:4px;display:block;width:100%;height:45px;line-height:45px;text-align:center;font-size: 0.875rem;color:#ddd;font-weight:500;}
+.layer-content-box .history-btn:hover{border-radius:4px;background:#00cfe8;border-color:#00cfe8;transition: 0.3s ease;-webkit-transition: 0.3s ease;}
+.historyModal .drone-ti span{font-weight:500;margin-top:6px}
+.historyModal .drone-name{color:#00cfe8;margin:0 10px 0 0;}
+
+.search-info-box-del-btn{display: flex; align-items: center;}
+.search-info-box-del-btn button{cursor: pointer;margin-top:10px}
+@media (max-width: 992px){
+	.search-info-box-del-btn button {
+		margin-bottom:1rem;
+		margin-top:0px;
+	}
+}
+
+.login .info-search .pal-card{width:95%;}
+.login-form.info-search form{padding:0;}
+.info-search .input-btn button{width:100%; padding: 0.786rem 1.5rem;}
+.full-btn-2n{display:flex;justify-content:space-between;}
+.full-btn-2n button{width:49%;}
+.timeInput{position:relative;}
+.timeInput .time{position:absolute;right:16px;top:50%;transform: translateY(-50%);font-size:14px;}
+.user-search-id{font-weight:500;}
+.user-search-modal .modal-body{font-size:1.125rem;padding:30px 20px}
+.user-search-modal .modal-body .etc-txt{display:block;font-weight:500;margin-bottom:1rem}
+.user-search-link button{font-size:0.875rem;margin-top:20px}
+
+/* 지도 검색 */
+.search-comp{position:relative; z-index:100;margin:10px}
+.search-feather{width:400px;}
+.search-result-comp{background-color:#fff;}
+.search-result{padding:8px 10px}
+.search-result:hover{background-color:#e7e7e7}
+.search-result .title{font-size:0.9rem;color:#000;}
+.search-result .address{font-size:0.875rem;color:#343D55}
+
+.pal-modal-body{padding:0;}
+.pal-modal-body .pal-card-box + .pal-card-box{margin-top:0;}
+
+/*그리드 로딩*/
+.grid-loading{width:100%;height:100%;position: absolute;background:rgba(35, 41, 58, 0.7);z-index:999;display:flex;align-items:center;justify-content: center;text-align:center;}
+.grid-loading span{display:block;font-weight:500;margin-top:4px;}
+
+.pa-input-box{display:flex;}
+.pa-input{width:48px;margin-right:8px;}
+
+/*관제 메인 데이터들(날씨,비행정보)*/
+.notice{display:none;}
+.main-data-test{left:450px!important;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
+.main-data{position:absolute;z-index: 999;top:10px;left:150px;display:flex;font-size:0.875rem;}
+.main-data-box + .main-data-box{margin-left:20px;}
+.main-data-box .card{min-height:88px;margin:0;padding:10px 12px; background: #10163A;}
+.box-ti{color: #f4f4f4;font-weight: 500;}
+.data-box-header{display:flex;;align-items:center;justify-content: space-between;}
+.data-box-header svg{color:#fff;}
+.data-list-box{display:flex;margin:10px 0 4px 0;}
+.data-list{background: #7367f0;border-radius: 5px;border: 1px solid #7367f0;display:flex;align-items: center;padding:0.4rem;}
+.data-list + .data-list{margin-left:10px;}
+.data-list span{font-size:0.8rem;color: #ddd;font-weight:400;}
+.data-list span + span{margin-left:4px;}
+.data-list .navigation-icon{width:16px;margin-top:-5px;margin-left:2px;}
+
+.layer-weather-address{display:flex;align-items:center;justify-content:space-between;}
+.box_4n{display:flex;flex-wrap: wrap;}
+.box_4n div{width:50%;height:50vh;}
+
+.modal-video{display:flex;align-items: center;justify-content: center;}
+.modal-video>.modal-content{height:90vh;}
+
+.uam-reservation{min-width:1200px;position: relative;}
+.uam-reservation .nav-link{transition:0.3s ease;-webkit-transition:0.3s ease;}
+.uam-reservation .nav-link{border:0px;background-color:#242b3d}
+.uam-reservation .nav-link.active span{font-weight:500}
+.uam-reservation-header{display:flex;width:100%;align-items:center;justify-content:space-between;}
+.uam-reservation-header h5{font-weight:500;}
+.uam-reservation-header > div{width:100%}
+.uam-reservation-header .step{display:flex;width:100%;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1)}
+.uam-reservation-header .step li{font-size:0.875rem;display:flex;align-items:center;}
+.uam-reservation-header .step li + li{margin-left:0.5rem}
+.uam-reservation-header .step .num-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius: 0.357rem;background:#10163A;margin-right:10px;}
+.uam-reservation-header .step .ti{font-size:1rem}
+.uam-reservation-header .step .line{width:14px;color: rgba(255,255,255,0.4);margin:0 0.3rem 0 0.5rem}
+.uam-reservation-tab-list{display:flex;}
+.uam-reservation-tab-list .list{display: flex;justify-content:center;align-items:center;flex:1;background-color:#242b3d;padding:0.5rem;font-size:0.875rem;text-align:center;border-radius: 0.357rem;cursor:pointer;border:1px solid #404656;}
+.uam-reservation-tab-list .list + .list{margin-left:0.5rem}
+
+.uam-reservation-header .step .active-step .num-icon{background:#7367f0;font-weight:500;}
+.uam-reservation-header .step .active-step .ti{font-weight:500;}
+.active-step{color:rgba(255,255,255,0.8);font-weight:500;}
+.inactive-step{color:rgba(255,255,255,0.4);}
+.list.active {background-color: #7367f0;border-color:#7367f0;color:#fff;font-weight:500;}
+.finish.active{background-color: #ff9f43;border-color:#ff9f43;color: #fff;}
+
+.step-wrap{margin-top:1rem;border-radius: 0.357rem;}
+.step-box{padding:1rem;background-color:#242b3d;border-radius: 0.357rem;}
+.step-box + .step-box{margin-top:1rem}
+.step-box-ti{border-bottom:1px solid #404656;padding-bottom:0.5rem;margin-bottom:1rem;display:flex;align-items:center;justify-content: space-between;}
+.step-box-ti h5{font-weight:500;font-size:1rem}
+.step-box-city{display:flex;width:100%;}
+.step-box-city-list{flex:1;}
+.step-box-city-list .step-city-ti{background:#283046;border:1px solid #404656;padding:0.8rem 1.7rem;font-weight:500;text-align:center;}
+.step-box-city-list + .step-box-city-list{margin-left:1rem}
+.step-box-city-list ul li{padding:0.8rem 1.7rem;border:1px solid #404656;border-top:none;cursor: pointer;font-size:0.875rem}
+.step-box-city-list ul li:hover{background:#2a3247;transition: 0.3s ease;-webkit-transition: 0.3s ease;}
+.search-box-city{display:flex;width:100%;}
+.search-city{display:flex;flex:1;justify-content:space-between;align-items:center;background:#404656;padding:0.8rem;font-size:0.875rem;border-radius:0.357rem;}
+.search-city + .search-city{margin-left:1rem;}
+.search-city .arrow svg{width:18px;margin-top:-2px;margin-left:4px;margin-right:4px}
+.search-city .delete:hover svg{color:#ea5455;cursor: pointer;transition:0.3s ease;-webkit-transition:0.3s ease;}
+.step-wrap .calendar{display:flex;justify-content:center;}
+.step-wrap .calendar .dayContainer + .dayContainer{box-shadow:none;}
+.step-wrap .passengers ul{display:flex;}
+.step-wrap .passengers ul li{flex:1;}
+.step-wrap .passengers ul li + li{margin-left:1rem;}
+.step-wrap .passengers h6{font-size:0.875rem;font-weight:500;margin-bottom:0.5rem}
+.step-wrap .passengers .btn-icon svg{margin-top:4px;}
+.step-wrap .finish-btn{text-align:right;margin-top:1rem;}
+
+.step-reservation .uam-reservation-tab-list .btn{margin-left:1rem}
+.step-box{padding:1rem;background-color:#242b3d;}
+.step-reservation-header{text-align:center;}
+.step-reservation-header .place{margin:1rem 0;}
+.step-reservation-header .place span{font-size:1.5rem;font-weight:500;color:#fff}
+.step-reservation-header .arrow svg{width:22px;margin-top:-2px;margin-left:8px;margin-right:8px}
+
+.fsm-box{padding:1rem}
+.fsm-ti{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #404656;padding-bottom:0.5rem;margin-bottom:1rem}
+.fsm-ti h5{font-weight:500}
+.fsm-ti .btn-wrap button + button{margin-left:0.5rem}
+.fsm-box .list-input label{font-size:0.875rem}
+
+.reservation-date{margin-left:1.5rem;margin-right:1.5rem}
+.reservation-date .box{display:flex!important;flex-direction: column;align-items:center;justify-content:center;background:#404656;border:2px solid #404656;border-radius: 0.1rem;padding:0.5rem;cursor:pointer;min-height:80px}
+.reservation-date .box.active{border-color: #7367f0;background:#7367f0;}
+.reservation-date .box.active span{color:#fff;}
+.reservation-date .box .date{display:block;font-size:0.875rem}
+.reservation-date .box .state{font-size:1.25rem;font-weight:400;}
+.reservation-date .box .rate{font-size:0.875rem;margin-left:4px}
+.reservation-date .slick-slide{margin-left:1rem;max-width: 144px;}
+.reservation-date .slick-next{ right: -30px;}
+.reservation-date .slick-prev{left: -30px;}
+
+.reservation-table table{width:100%;margin:1rem auto}
+.reservation-table table tr th, .reservation-table table tr td{vertical-align:middle;text-align:center}
+.reservation-table table thead{background:#343d55;font-size:1rem;}
+.reservation-table table thead tr th{padding:0.8rem 0.4rem;font-weight:500;;}
+.reservation-table table tbody tr td{padding:0.8rem 0;}
+.reservation-table table tbody tr td:nth-child(4) .amount{border-left:0;border-right:0}
+.reservation-table table tbody tr td .amount{border:1px solid #404656;width:100%;height:60px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0px auto;line-height:1.2;cursor: pointer;}
+.reservation-table table tbody tr td .rate{font-size:0.875rem;font-weight:400;margin-left:4px}
+.reservation-table .state{font-size:1.125rem;font-weight:400}
+.reservation-table .flight span{display:block;}
+.reservation-table .seat{display:block;font-size:0.75rem;font-weight:400;}
+.reservation-table .alltime .start, .reservation-table .alltime .arrive{font-size:1.25rem;font-weight:400;color:#ddd;padding:0 0.7rem;}
+.reservation-table .alltime{display:flex;align-items: center;justify-content: center;width:100%;position: relative;}
+.reservation-table .alltime .time{position:absolute;left:50%;transform: translateX(-50%);top:-10px;font-size:0.75rem}
+.reservation-table .alltime .plus{position:absolute;left:50%;transform: translateX(-50%);bottom:-10px;font-size:0.75rem}
+.reservation-table .alltime .line{display:inline-block;width:55%;height:1px;background:#b4b7bd;position: relative;}
+.reservation-table .alltime .line::before{content:'';display:block;width:7px;height:7px;border-radius:100%;background:#b4b7bd;position:absolute;left:0;top:-3px;}
+.reservation-table .alltime .line::after{content:'';display:block;width:7px;height:7px;border-radius:100%;background:#b4b7bd;position:absolute;right:0;top:-3px;}
+.reservation-table .amount.active{background:#7367f0;color:#fff}
+
+.uam-reservation-quick{min-width:1200px}
+.uam-reservation-quick .modal-title{width:100%}
+.uam-reservation-quick .uam-reservation-tab-list .btn{margin-left:1rem}
+
+.uam-reservation-btn{display:flex;justify-content:space-between;margin-top:1rem}
+.uam-reservation-btn button{min-width:120px}
+
+.fare-wrap{display:flex;}
+.fare-wrap .fare{flex:1;background:#343d55;border:1px solid #343d55;border-radius:0.357rem;text-align: left;padding:2rem 1.5rem;}
+.fare-wrap .fare *{color:rgba(255, 255, 255, 0.1)}
+.fare-wrap .fare + .fare{margin-left:1rem}
+.fare-wrap .fare.active{border-color:#7367f0}
+.fare-wrap .fare.active *{color:rgba(255, 255, 255, 0.8)}
+.fare-wrap .fare ul li h6{font-weight:500;font-size:1.125rem}
+.fare-wrap .fare ul li .ti{display:block;}
+.fare-wrap .fare ul li span{font-size:0.875rem}
+.fare-wrap .list-txt > li:first-child{padding-left:0;}
+.fare-wrap .list-txt > li:first-child::before{display:none;}
+.fare-wrap .list-txt > li {position: relative;padding-left:14px;font-size:0.875rem;word-break: keep-all;}
+.fare-wrap .list-txt > li + li{margin-top:1rem}
+.fare-wrap .list-txt > li:before {content:'';display: inline-block;width:4px;height:4px;background:rgba(255, 255, 255, 0.1);border-radius:50%;position: absolute;top: 7px;left:4px;}
+.fare-wrap .fare.active .list-txt > li:before{background:rgba(255, 255, 255, 0.8)}
+
+.content.app-content{padding-bottom:5rem!important}/* 임시 css 추후삭제 */
+
+.uam-reservation-total{position:fixed;bottom:0;width:calc(100% - 260px);left:260px;}
+.uam-reservation-total .collapsing{position:absolute;bottom:56px;}
+.uam-reservation-total .collapse.show{position:absolute;bottom:56px;}
+.uam-reservation-total .app-collapse.card{background:#343D55}
+.uam-reservation-total [class*='collapse-'] .card .card-body{padding:0}
+.uam-reservation-total-wrap{background:#fff;}
+
+.main-menu .navbar-header .navbar-brand .brand-logo-box .brand-logo img{margin-top:-5px}
+.main-menu .navbar-header .navbar-brand .brand-logo-box .brand-text{padding-left:10px;}
+
+h1.logo.itp {margin: 10px auto;width:100%;}
+h1.logo.itp img{width:45px}
+h1.logo.itp span{font-size:0.6rem;font-weight:100;letter-spacing:0.3pt;margin-top:4px}
+.brand-logo-box{display:flex;}
+.main-menu .navbar-header .navbar-brand .brand-logo-box.itp .brand-logo img{margin-top:3px}
+.main-menu .navbar-header .navbar-brand .brand-logo-box.itp .brand-text{padding-left:10px;font-size:1.3rem;color:#fff}

src/assets/images/airplan_org.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="20px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve" style="fill: #E94390; transform: rotate(-45deg)">
+<path id="_x31_" d="M5.679,23.505l-4.944-1.974c-0.296-0.117-0.373-0.484-0.146-0.7l0.454-0.43c0.431-0.41,1.018-0.639,1.628-0.637
+	l4.522,0.016c0.358,0.001,0.697-0.155,0.917-0.422l1.517-1.834c1.083-1.31,2.247-2.556,3.487-3.732l0.946-0.898
+	C11.347,10.912,3.868,8.571,1.449,7.845c-0.332-0.1-0.419-0.507-0.154-0.722l0.513-0.417c0.791-0.642,1.829-0.94,2.861-0.821
+	c5.067,0.588,10.305,0.961,15.602,1.115l2.44-2.313c1.851-1.674,5.167-4.301,6.584-3.096c0.017,0.014,0.032,0.029,0.049,0.044
+	c1.61,1.528-2.764,5.766-3.268,6.244l-2.438,2.314c0.162,5.026,0.556,9.997,1.175,14.804c0.127,0.979-0.188,1.965-0.864,2.715
+	L23.509,28.2c-0.226,0.252-0.656,0.17-0.762-0.146c-0.764-2.295-3.232-9.392-5.32-11.968l-0.946,0.898
+	c-1.24,1.177-2.553,2.282-3.933,3.309l-1.933,1.438c-0.282,0.21-0.446,0.531-0.444,0.871l0.015,4.292
+	c0.003,0.578-0.239,1.135-0.67,1.545l-0.454,0.429c-0.227,0.217-0.613,0.145-0.738-0.136l-2.078-4.692L5.679,23.505z"/>
+</svg>

src/assets/images/airplan_pp.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="20px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve" style="fill: #7367f0; transform: rotate(-45deg)">
+<path id="_x31_" d="M5.679,23.505l-4.944-1.974c-0.296-0.117-0.373-0.484-0.146-0.7l0.454-0.43c0.431-0.41,1.018-0.639,1.628-0.637
+	l4.522,0.016c0.358,0.001,0.697-0.155,0.917-0.422l1.517-1.834c1.083-1.31,2.247-2.556,3.487-3.732l0.946-0.898
+	C11.347,10.912,3.868,8.571,1.449,7.845c-0.332-0.1-0.419-0.507-0.154-0.722l0.513-0.417c0.791-0.642,1.829-0.94,2.861-0.821
+	c5.067,0.588,10.305,0.961,15.602,1.115l2.44-2.313c1.851-1.674,5.167-4.301,6.584-3.096c0.017,0.014,0.032,0.029,0.049,0.044
+	c1.61,1.528-2.764,5.766-3.268,6.244l-2.438,2.314c0.162,5.026,0.556,9.997,1.175,14.804c0.127,0.979-0.188,1.965-0.864,2.715
+	L23.509,28.2c-0.226,0.252-0.656,0.17-0.762-0.146c-0.764-2.295-3.232-9.392-5.32-11.968l-0.946,0.898
+	c-1.24,1.177-2.553,2.282-3.933,3.309l-1.933,1.438c-0.282,0.21-0.446,0.531-0.444,0.871l0.015,4.292
+	c0.003,0.578-0.239,1.135-0.67,1.545l-0.454,0.429c-0.227,0.217-0.613,0.145-0.738-0.136l-2.078-4.692L5.679,23.505z"/>
+</svg>

src/assets/images/drone_bk.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="50px" height="30px" viewBox="0 0 50 30" enable-background="new 0 0 50 30" xml:space="preserve">
+<image overflow="visible" width="55" height="55" xlink:href="drone_black.png"  transform="matrix(0.9197 0 0 0.9407 -0.585 -11.5356)">
+</image>
+</svg>

src/assets/images/kiast_logo.svg

@@ -0,0 +1,279 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="220px" height="98.667px" viewBox="0 0 220 98.667" enable-background="new 0 0 220 98.667" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#00479D" d="M63.85,63.171V33.878h6.524v12.964l2.137-3.22l6.669-9.744h8.151L77.645,46.35l10.206,16.821h-7.757
+			l-7.19-12.639l-2.529,3.084v9.555H63.85z"/>
+		<path fill="#00479D" d="M89.429,33.878h6.668v29.293h-6.668V33.878z"/>
+		<path fill="#00479D" d="M115.95,55.651h-8.383l-2.083,7.52h-6.862l8.945-29.293h8.686l9.076,29.293h-7.121L115.95,55.651z
+			 M108.521,50.688h6.454l-1.819-6.206c-0.229-0.81-0.496-1.809-0.8-2.993c-0.304-1.187-0.527-2.068-0.671-2.647
+			c-0.231,0.753-0.479,1.692-0.737,2.821c-0.349,1.445-0.577,2.386-0.693,2.819L108.521,50.688z"/>
+		<path fill="#00479D" d="M126.988,61.775l1.377-5.414c1.012,0.508,2.144,0.93,3.401,1.267c1.256,0.337,2.563,0.508,3.921,0.508
+			c1.501,0,2.649-0.282,3.444-0.847c0.793-0.564,1.19-1.338,1.19-2.321c0-0.897-0.366-1.647-1.104-2.256
+			c-0.734-0.608-1.999-1.23-3.789-1.865c-2.543-0.896-4.479-2.01-5.807-3.34c-1.474-1.474-2.208-3.239-2.208-5.293
+			c0-2.544,0.997-4.641,2.994-6.291c1.996-1.646,4.688-2.472,8.073-2.472c1.619,0,3.009,0.125,4.166,0.37s2.257,0.6,3.3,1.065
+			l-1.477,5.354c-1.017-0.495-2.044-0.852-3.087-1.07c-1.044-0.219-2.06-0.328-3.044-0.328c-1.392,0-2.448,0.261-3.173,0.781
+			c-0.726,0.52-1.086,1.199-1.086,2.037c0,0.865,0.42,1.604,1.261,2.212c0.696,0.49,2.088,1.127,4.178,1.906
+			c2.609,0.954,4.53,2.132,5.764,3.533c1.231,1.401,1.847,3.13,1.847,5.181c0,2.602-0.956,4.726-2.869,6.373
+			c-2.119,1.82-5.106,2.73-8.963,2.73c-1.567,0-3.11-0.18-4.633-0.541C129.142,62.692,127.917,62.267,126.988,61.775z"/>
+		<path fill="#00479D" d="M156.163,63.171V39.409h-7.873v-5.531h22.556v5.531h-8.015v23.762H156.163z"/>
+	</g>
+	<g>
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M98.626,23.54c-18.409,2.146-38.616,4.723-51.451,12.286
+			l3.838,9.598C58.546,37.91,72.086,26.692,98.626,23.54"/>
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M100.497,28.751c-18.409,2.144-38.617,4.721-51.45,12.285
+			l3.837,9.596C60.417,43.12,73.956,31.902,100.497,28.751"/>
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#00479D" d="M98.293,25.654c-17.962,2.092-37.682,4.607-50.201,11.988
+			l8.047,5.876C63.49,36.188,76.902,30.297,98.293,25.654"/>
+	</g>
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#45B035" d="M149.097,19.618C101.091,16.895,45.294,22.545,6.556,6.747
+		L44.8,34.678c26.833-12.043,70.668-13.341,92.569-14.682"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#45B035" d="M131.676,12.552c2.833,0.075,2.34,0.317,5.167,0.391
+		c1.097,0.987,1.955,1.674,3.049,2.66c13.093-0.102,5.839-0.154,18.93-0.256c6.947-0.054,8.259-0.396,11.943,4.513l-35.744,0.215
+		C134.104,17.583,133.727,15.043,131.676,12.552"/>
+	<line fill="none" x1="5.156" y1="6.019" x2="61.359" y2="47.103"/>
+</g>
+<g>
+	<path fill="#00479D" d="M71.165,73.023c0.135,0.197,0.24,0.4,0.313,0.607c0.082,0.228,0.125,0.462,0.125,0.7
+		c0,0.935-0.379,1.703-1.137,2.306c-0.697,0.581-1.521,0.871-2.477,0.871s-1.785-0.29-2.492-0.871
+		c-0.746-0.613-1.121-1.382-1.121-2.306c0-0.229,0.037-0.456,0.109-0.685c0.072-0.197,0.176-0.405,0.313-0.623h-0.826v-1.729h2.865
+		V70.08h2.336v1.215h2.85v1.729H71.165z M66.93,73.428c-0.281,0.271-0.42,0.593-0.42,0.966c0,0.363,0.139,0.681,0.42,0.949
+		c0.291,0.271,0.639,0.405,1.043,0.405s0.752-0.135,1.043-0.405c0.301-0.269,0.451-0.586,0.451-0.949
+		c0-0.373-0.15-0.695-0.451-0.966c-0.291-0.26-0.639-0.389-1.043-0.389S67.221,73.168,66.93,73.428 M75.338,78.037
+		c0.934,0.799,1.4,1.791,1.4,2.975c0,1.193-0.467,2.185-1.4,2.974c-0.861,0.737-1.875,1.105-3.037,1.105
+		c-1.172,0-2.189-0.368-3.051-1.105c-0.904-0.789-1.355-1.78-1.355-2.974s0.451-2.186,1.355-2.975
+		c0.861-0.736,1.879-1.105,3.051-1.105C73.454,76.932,74.465,77.301,75.338,78.037 M70.792,79.517
+		c-0.447,0.405-0.67,0.903-0.67,1.495c0,0.591,0.223,1.09,0.67,1.494c0.436,0.395,0.949,0.592,1.541,0.592s1.096-0.197,1.512-0.592
+		c0.445-0.404,0.67-0.903,0.67-1.494c0-0.592-0.225-1.09-0.67-1.495c-0.426-0.385-0.93-0.576-1.512-0.576
+		C71.741,78.94,71.227,79.132,70.792,79.517 M76.739,74.829v2.211h-2.195v-6.244h2.195v2.088h1.775v1.945H76.739z"/>
+	<path fill="#00479D" d="M86.481,75.826h6.54v1.946H79.583v-1.946h4.701v-1.838h2.197V75.826z M90.171,77.009v-4.266H80.034v-1.947
+		h12.333v6.213H90.171z M89.548,77.29c1.111,0.83,1.666,1.858,1.666,3.083c0,1.308-0.523,2.398-1.572,3.271
+		c-0.977,0.809-2.108,1.214-3.395,1.214c-1.328,0-2.48-0.405-3.457-1.214c-1.039-0.872-1.557-1.963-1.557-3.271
+		c0-1.225,0.549-2.253,1.65-3.083c1.008-0.757,2.127-1.137,3.363-1.137C87.45,76.153,88.552,76.533,89.548,77.29 M84.377,78.566
+		c-0.52,0.498-0.779,1.101-0.779,1.807c0,0.695,0.26,1.292,0.779,1.791c0.52,0.487,1.133,0.731,1.838,0.731
+		c0.695,0,1.303-0.244,1.822-0.731c0.53-0.499,0.793-1.096,0.793-1.791c0-0.706-0.264-1.309-0.793-1.807
+		c-0.52-0.478-1.127-0.716-1.822-0.716C85.51,77.851,84.897,78.089,84.377,78.566"/>
+	<path fill="#00479D" d="M102.185,71.279c0.883,0.747,1.324,1.692,1.324,2.834c0,1.121-0.441,2.056-1.324,2.803
+		c-0.82,0.706-1.775,1.059-2.865,1.059c-1.111,0-2.076-0.353-2.896-1.059c-0.871-0.747-1.307-1.682-1.307-2.803
+		c0-1.142,0.436-2.087,1.307-2.834c0.82-0.706,1.785-1.059,2.896-1.059C100.409,70.221,101.364,70.573,102.185,71.279
+		 M96.392,79.174h2.195v2.912h9.516v1.946H97.45c-0.363,0-0.623-0.077-0.779-0.233c-0.186-0.187-0.279-0.498-0.279-0.935V79.174z
+		 M97.948,72.774c-0.404,0.363-0.607,0.81-0.607,1.339c0,0.52,0.203,0.955,0.607,1.308c0.385,0.343,0.842,0.514,1.371,0.514
+		c0.498,0,0.939-0.171,1.324-0.514c0.404-0.363,0.607-0.799,0.607-1.308c0-0.529-0.203-0.976-0.607-1.339
+		c-0.385-0.343-0.826-0.514-1.324-0.514C98.79,72.261,98.333,72.432,97.948,72.774 M107.993,76.075v3.831h-2.197v-9.11h2.197v3.317
+		h1.775v1.962H107.993z"/>
+	<path fill="#00479D" d="M119.118,70.796v1.947h-2.801c0.092,0.872,0.342,1.557,0.746,2.055c0.477,0.603,1.184,0.977,2.119,1.121
+		v2.087c-0.842-0.063-1.621-0.307-2.338-0.731c-0.736-0.437-1.291-1.007-1.666-1.713c-0.395,0.695-0.99,1.271-1.789,1.729
+		c-0.738,0.415-1.48,0.648-2.229,0.7v-2.071c0.924-0.145,1.621-0.519,2.086-1.121c0.375-0.498,0.613-1.183,0.717-2.055h-2.74v-1.947
+		H119.118z"/>
+	<path fill="#00479D" d="M112.019,79.205h2.195v2.881h9.514v1.946h-10.635c-0.363,0-0.629-0.078-0.793-0.233
+		c-0.188-0.187-0.281-0.498-0.281-0.935V79.205z"/>
+	<polygon fill="#00479D" points="121.423,73.226 121.423,70.796 123.618,70.796 123.618,79.906 121.423,79.906 121.423,75.172 
+		119.493,75.172 119.493,73.226 	"/>
+	<path fill="#00479D" d="M134.542,70.796v1.512c0,3.321-0.893,5.756-2.678,7.302c-1.277,1.101-2.928,1.697-4.951,1.792v-2.135
+		c1.836-0.062,3.213-0.689,4.125-1.884c0.852-1.1,1.277-2.646,1.277-4.64h-5.201v-1.947H134.542z M137.05,70.796h2.195v13.438
+		h-2.195V70.796z"/>
+	<path fill="#00479D" d="M147.616,78.364v-1.059h-5.527v-1.76h13.234v1.76h-5.527v1.059H147.616z M149.905,70.531
+		c0,0.842,0.467,1.47,1.4,1.885c0.83,0.363,2.02,0.565,3.566,0.607v1.837c-1.277-0.021-2.461-0.171-3.551-0.451
+		c-1.268-0.332-2.139-0.789-2.615-1.371c-0.488,0.582-1.365,1.039-2.633,1.371c-1.09,0.28-2.268,0.426-3.535,0.436v-1.821
+		c1.537-0.052,2.721-0.26,3.551-0.623c0.936-0.415,1.402-1.038,1.402-1.869H149.905z M152.677,79.609h-10.139v-1.712h12.334v3.814
+		h-10.137v0.545h10.137v1.775h-11.273c-0.365,0-0.629-0.078-0.795-0.233c-0.176-0.187-0.266-0.498-0.266-0.935v-2.74h10.139V79.609z
+		"/>
+	<path fill="#00479D" d="M164.585,71.343c0.855,0.726,1.283,1.642,1.283,2.749c0,1.088-0.428,1.994-1.283,2.719
+		c-0.797,0.686-1.723,1.027-2.779,1.027c-1.078,0-2.016-0.342-2.811-1.027c-0.846-0.725-1.268-1.631-1.268-2.719
+		c0-1.107,0.422-2.023,1.268-2.749c0.795-0.685,1.732-1.026,2.811-1.026C162.862,70.316,163.788,70.658,164.585,71.343"/>
+	<path fill="#00479D" d="M158.878,79.153h2.195v2.912h9.516v1.946h-10.652c-0.363,0-0.623-0.077-0.779-0.233
+		c-0.188-0.187-0.279-0.499-0.279-0.935V79.153z"/>
+	<path fill="#FFFFFF" d="M160.501,72.819c-0.385,0.345-0.576,0.77-0.576,1.272c0,0.493,0.191,0.908,0.576,1.243
+		c0.365,0.326,0.801,0.488,1.305,0.488c0.473,0,0.891-0.162,1.258-0.488c0.385-0.346,0.576-0.759,0.576-1.243
+		c0-0.503-0.191-0.928-0.576-1.272c-0.367-0.326-0.785-0.488-1.258-0.488C161.302,72.331,160.866,72.493,160.501,72.819"/>
+	<polygon fill="#00479D" points="166.312,78.058 166.312,76.11 168.241,76.11 168.241,70.807 170.438,70.807 170.438,80.486 
+		168.241,80.486 168.241,78.058 	"/>
+	<polygon fill="#00479D" points="161.946,78.055 157.687,78.055 157.687,76.109 165.995,76.109 165.995,78.055 164.142,78.055 
+		164.142,79.894 161.946,79.894 	"/>
+</g>
+<g>
+	<path fill="#00479D" d="M67.438,90.681h-0.832l-0.938-1.671l-0.473,0.566v1.104h-0.711v-3.67h0.711v1.591l1.287-1.591h0.867
+		l-1.211,1.459L67.438,90.681z"/>
+	<path fill="#00479D" d="M70.04,89.328c0,0.268-0.021,0.476-0.061,0.626c-0.043,0.15-0.123,0.289-0.242,0.416
+		c-0.092,0.1-0.207,0.179-0.344,0.238s-0.299,0.09-0.486,0.09c-0.186,0-0.346-0.03-0.482-0.09s-0.252-0.139-0.344-0.238
+		c-0.117-0.12-0.195-0.259-0.238-0.418c-0.043-0.16-0.064-0.367-0.064-0.624c0-0.263,0.02-0.47,0.061-0.62s0.121-0.289,0.242-0.416
+		c0.092-0.099,0.199-0.176,0.322-0.23c0.148-0.064,0.314-0.098,0.504-0.098c0.184,0,0.352,0.033,0.502,0.098
+		c0.127,0.055,0.236,0.132,0.328,0.23c0.117,0.12,0.195,0.259,0.238,0.418S70.04,89.075,70.04,89.328z M69.372,89.328
+		c0-0.175-0.008-0.31-0.025-0.404s-0.061-0.176-0.127-0.245c-0.08-0.078-0.184-0.118-0.313-0.118c-0.127,0-0.23,0.04-0.309,0.118
+		c-0.061,0.063-0.102,0.146-0.123,0.25c-0.02,0.105-0.029,0.238-0.029,0.399c0,0.217,0.012,0.366,0.035,0.449
+		c0.023,0.082,0.063,0.151,0.117,0.205c0.078,0.079,0.182,0.119,0.309,0.119c0.129,0,0.232-0.04,0.313-0.119
+		c0.061-0.062,0.102-0.145,0.121-0.249C69.362,89.628,69.372,89.493,69.372,89.328z"/>
+	<path fill="#00479D" d="M72.686,88.214l-0.504,0.507c-0.055-0.055-0.107-0.096-0.158-0.121c-0.051-0.026-0.117-0.039-0.195-0.039
+		c-0.115,0-0.217,0.042-0.303,0.126c-0.084,0.085-0.127,0.209-0.127,0.371v1.623h-0.668v-2.682h0.648v0.256
+		c0.068-0.079,0.162-0.147,0.285-0.205s0.254-0.086,0.391-0.086c0.133,0,0.248,0.019,0.346,0.057
+		C72.499,88.058,72.592,88.122,72.686,88.214z"/>
+	<path fill="#00479D" d="M75.311,89.54h-1.67c0,0.179,0.051,0.322,0.154,0.433c0.102,0.109,0.246,0.164,0.43,0.164
+		c0.137,0,0.25-0.02,0.338-0.058c0.086-0.038,0.176-0.105,0.268-0.2l0.406,0.401c-0.146,0.146-0.295,0.252-0.443,0.318
+		c-0.15,0.066-0.34,0.1-0.572,0.1c-0.367,0-0.652-0.093-0.857-0.277c-0.254-0.226-0.381-0.59-0.381-1.093
+		c0-0.428,0.105-0.762,0.316-1.002c0.213-0.241,0.494-0.362,0.848-0.362c0.361,0,0.648,0.122,0.861,0.364
+		c0.201,0.233,0.303,0.538,0.303,0.914V89.54z M74.657,89.086c0-0.093-0.02-0.187-0.059-0.28c-0.039-0.093-0.098-0.164-0.172-0.215
+		c-0.076-0.05-0.168-0.075-0.277-0.075s-0.201,0.025-0.277,0.075c-0.074,0.051-0.133,0.122-0.172,0.215
+		c-0.039,0.094-0.059,0.188-0.059,0.28H74.657z"/>
+	<path fill="#00479D" d="M77.991,90.672h-0.65v-0.232c-0.092,0.094-0.186,0.159-0.281,0.199c-0.096,0.039-0.221,0.06-0.375,0.06
+		c-0.297,0-0.521-0.078-0.674-0.233c-0.152-0.156-0.229-0.357-0.229-0.604c0-0.229,0.074-0.412,0.221-0.549
+		c0.16-0.151,0.391-0.227,0.691-0.227h0.629v-0.135c0-0.149-0.039-0.258-0.115-0.325s-0.203-0.101-0.381-0.101
+		c-0.129,0-0.229,0.016-0.297,0.046c-0.068,0.031-0.139,0.09-0.215,0.177l-0.426-0.417c0.131-0.14,0.266-0.235,0.406-0.288
+		s0.326-0.079,0.559-0.079c0.758,0,1.137,0.315,1.137,0.945V90.672z M77.323,89.685V89.54h-0.527c-0.248,0-0.371,0.103-0.371,0.305
+		c0,0.207,0.127,0.311,0.383,0.311c0.105,0,0.188-0.008,0.244-0.023c0.059-0.016,0.119-0.053,0.18-0.111
+		S77.323,89.851,77.323,89.685z"/>
+	<path fill="#00479D" d="M80.776,90.681h-0.713v-3.67h0.713V90.681z"/>
+	<path fill="#00479D" d="M83.844,90.681h-0.668v-1.629c0-0.169-0.045-0.296-0.139-0.383c-0.078-0.072-0.178-0.108-0.301-0.108
+		c-0.125,0-0.225,0.034-0.301,0.104c-0.094,0.086-0.143,0.216-0.143,0.388v1.629h-0.668v-2.682h0.65v0.246
+		c0.176-0.188,0.396-0.281,0.666-0.281c0.131,0,0.248,0.021,0.357,0.062c0.107,0.041,0.197,0.1,0.273,0.176
+		c0.1,0.1,0.168,0.212,0.211,0.338c0.039,0.125,0.061,0.267,0.061,0.425V90.681z"/>
+	<path fill="#00479D" d="M86.62,89.827c0,0.284-0.107,0.502-0.328,0.655c-0.201,0.144-0.469,0.216-0.805,0.216
+		c-0.256,0-0.455-0.021-0.6-0.062c-0.201-0.059-0.381-0.166-0.537-0.324l0.439-0.434c0.096,0.095,0.215,0.163,0.357,0.203
+		c0.109,0.031,0.227,0.046,0.354,0.046c0.129,0,0.24-0.022,0.332-0.066s0.139-0.114,0.139-0.21c0-0.068-0.021-0.124-0.064-0.167
+		c-0.043-0.042-0.115-0.069-0.219-0.08l-0.418-0.04c-0.252-0.024-0.443-0.093-0.568-0.206c-0.139-0.123-0.209-0.304-0.209-0.543
+		c0-0.267,0.1-0.476,0.299-0.626s0.441-0.226,0.729-0.226c0.232,0,0.428,0.022,0.59,0.067c0.16,0.045,0.303,0.127,0.43,0.247
+		l-0.41,0.418c-0.068-0.062-0.158-0.107-0.271-0.136c-0.111-0.03-0.229-0.045-0.348-0.045c-0.121,0-0.215,0.025-0.279,0.074
+		c-0.066,0.051-0.098,0.11-0.098,0.183c0,0.062,0.016,0.109,0.047,0.144c0.043,0.048,0.119,0.076,0.229,0.087l0.42,0.041
+		c0.258,0.023,0.455,0.103,0.59,0.238C86.553,89.417,86.62,89.599,86.62,89.827z"/>
+	<path fill="#00479D" d="M88.44,90.681h-0.366c-0.256,0-0.453-0.079-0.59-0.237c-0.123-0.14-0.184-0.317-0.184-0.529v-1.327h-0.283
+		V88.08h0.283v-0.793h0.668v0.793h0.471v0.507h-0.471v1.29c0,0.161,0.076,0.242,0.23,0.242h0.241V90.681z"/>
+	<path fill="#00479D" d="M89.755,87.545h-0.668v-0.543h0.668V87.545z M89.755,90.681h-0.668V88h0.668V90.681z"/>
+	<path fill="#00479D" d="M91.759,90.681h-0.365c-0.256,0-0.453-0.079-0.588-0.237c-0.125-0.14-0.186-0.317-0.186-0.529v-1.327
+		h-0.283V88.08h0.283v-0.793h0.668v0.793h0.471v0.507h-0.471v1.29c0,0.161,0.076,0.242,0.23,0.242h0.24V90.681z"/>
+	<path fill="#00479D" d="M94.597,90.672h-0.65v-0.25c-0.174,0.185-0.396,0.276-0.666,0.276c-0.129,0-0.248-0.021-0.355-0.062
+		c-0.107-0.042-0.199-0.1-0.273-0.175c-0.1-0.1-0.17-0.212-0.211-0.337c-0.041-0.124-0.063-0.266-0.063-0.424V87.99h0.668v1.622
+		c0,0.168,0.047,0.295,0.139,0.381c0.078,0.072,0.178,0.108,0.301,0.108c0.125,0,0.227-0.034,0.301-0.104
+		c0.094-0.085,0.143-0.214,0.143-0.386V87.99h0.668V90.672z"/>
+	<path fill="#00479D" d="M96.606,90.681h-0.365c-0.256,0-0.453-0.079-0.588-0.237c-0.123-0.14-0.186-0.317-0.186-0.529v-1.327
+		h-0.283V88.08h0.283v-0.793h0.668v0.793h0.471v0.507h-0.471v1.29c0,0.161,0.076,0.242,0.23,0.242h0.24V90.681z"/>
+	<path fill="#00479D" d="M99.458,89.54h-1.67c0,0.179,0.051,0.322,0.154,0.433c0.104,0.109,0.246,0.164,0.432,0.164
+		c0.135,0,0.248-0.02,0.336-0.058c0.086-0.038,0.176-0.105,0.268-0.2l0.406,0.401c-0.146,0.146-0.295,0.252-0.443,0.318
+		s-0.34,0.1-0.572,0.1c-0.365,0-0.652-0.093-0.857-0.277c-0.254-0.226-0.381-0.59-0.381-1.093c0-0.428,0.105-0.762,0.316-1.002
+		c0.213-0.241,0.496-0.362,0.848-0.362c0.361,0,0.65,0.122,0.861,0.364c0.203,0.233,0.303,0.538,0.303,0.914V89.54z M98.804,89.086
+		c0-0.093-0.02-0.187-0.059-0.28c-0.039-0.093-0.098-0.164-0.172-0.215c-0.076-0.05-0.168-0.075-0.277-0.075
+		s-0.201,0.025-0.277,0.075c-0.074,0.051-0.133,0.122-0.172,0.215c-0.039,0.094-0.059,0.188-0.059,0.28H98.804z"/>
+	<path fill="#00479D" d="M103.513,89.328c0,0.268-0.02,0.476-0.063,0.626c-0.039,0.15-0.121,0.289-0.24,0.416
+		c-0.092,0.1-0.207,0.179-0.344,0.238s-0.299,0.09-0.486,0.09c-0.186,0-0.346-0.03-0.482-0.09s-0.252-0.139-0.344-0.238
+		c-0.117-0.12-0.195-0.259-0.238-0.418c-0.043-0.16-0.064-0.367-0.064-0.624c0-0.263,0.02-0.47,0.061-0.62s0.123-0.289,0.242-0.416
+		c0.092-0.099,0.199-0.176,0.322-0.23c0.146-0.064,0.314-0.098,0.504-0.098c0.184,0,0.352,0.033,0.502,0.098
+		c0.127,0.055,0.236,0.132,0.328,0.23c0.117,0.12,0.195,0.259,0.238,0.418S103.513,89.075,103.513,89.328z M102.845,89.328
+		c0-0.175-0.008-0.31-0.025-0.404s-0.061-0.176-0.129-0.245c-0.078-0.078-0.182-0.118-0.311-0.118c-0.127,0-0.229,0.04-0.309,0.118
+		c-0.061,0.063-0.102,0.146-0.121,0.25c-0.021,0.105-0.031,0.238-0.031,0.399c0,0.217,0.012,0.366,0.035,0.449
+		c0.023,0.082,0.064,0.151,0.117,0.205c0.08,0.079,0.182,0.119,0.309,0.119c0.129,0,0.232-0.04,0.311-0.119
+		c0.063-0.062,0.104-0.145,0.123-0.249C102.835,89.628,102.845,89.493,102.845,89.328z"/>
+	<path fill="#00479D" d="M105.446,88.587h-0.494v2.094h-0.668v-2.094h-0.275V88.08h0.275v-0.336c0-0.209,0.061-0.386,0.186-0.526
+		c0.141-0.162,0.338-0.242,0.596-0.242h0.381v0.561h-0.264c-0.154,0-0.23,0.082-0.23,0.246v0.298h0.494V88.587z"/>
+	<path fill="#00479D" d="M110.124,90.681h-0.744l-0.215-0.659h-1.299l-0.221,0.659h-0.744l1.33-3.67h0.559L110.124,90.681z
+		 M108.978,89.425l-0.445-1.329l-0.463,1.329H108.978z"/>
+	<path fill="#00479D" d="M112.71,87.99l-0.98,2.69h-0.523l-0.984-2.69h0.703l0.543,1.666l0.539-1.666H112.71z"/>
+	<path fill="#00479D" d="M113.813,87.545h-0.668v-0.543h0.668V87.545z M113.813,90.681h-0.668V88h0.668V90.681z"/>
+	<path fill="#00479D" d="M116.63,90.672h-0.65v-0.232c-0.092,0.094-0.186,0.159-0.281,0.199c-0.096,0.039-0.221,0.06-0.375,0.06
+		c-0.297,0-0.521-0.078-0.674-0.233c-0.152-0.156-0.229-0.357-0.229-0.604c0-0.229,0.074-0.412,0.221-0.549
+		c0.16-0.151,0.391-0.227,0.691-0.227h0.629v-0.135c0-0.149-0.039-0.258-0.115-0.325s-0.203-0.101-0.381-0.101
+		c-0.129,0-0.229,0.016-0.297,0.046c-0.068,0.031-0.139,0.09-0.213,0.177l-0.428-0.417c0.131-0.14,0.266-0.235,0.406-0.288
+		s0.326-0.079,0.559-0.079c0.758,0,1.137,0.315,1.137,0.945V90.672z M115.962,89.685V89.54h-0.527c-0.248,0-0.371,0.103-0.371,0.305
+		c0,0.207,0.127,0.311,0.383,0.311c0.105,0,0.188-0.008,0.244-0.023c0.059-0.016,0.119-0.053,0.18-0.111
+		S115.962,89.851,115.962,89.685z"/>
+	<path fill="#00479D" d="M118.608,90.681h-0.363c-0.258,0-0.453-0.079-0.59-0.237c-0.123-0.14-0.186-0.317-0.186-0.529v-1.327
+		h-0.283V88.08h0.283v-0.793h0.668v0.793h0.471v0.507h-0.471v1.29c0,0.161,0.076,0.242,0.23,0.242h0.24V90.681z"/>
+	<path fill="#00479D" d="M119.923,87.545h-0.668v-0.543h0.668V87.545z M119.923,90.681h-0.668V88h0.668V90.681z"/>
+	<path fill="#00479D" d="M122.874,89.328c0,0.268-0.021,0.476-0.063,0.626s-0.121,0.289-0.24,0.416
+		c-0.094,0.1-0.207,0.179-0.344,0.238s-0.301,0.09-0.488,0.09c-0.186,0-0.346-0.03-0.482-0.09s-0.252-0.139-0.344-0.238
+		c-0.115-0.12-0.195-0.259-0.238-0.418c-0.043-0.16-0.064-0.367-0.064-0.624c0-0.263,0.021-0.47,0.063-0.62s0.121-0.289,0.24-0.416
+		c0.092-0.099,0.201-0.176,0.324-0.23c0.146-0.064,0.314-0.098,0.502-0.098c0.186,0,0.354,0.033,0.504,0.098
+		c0.125,0.055,0.234,0.132,0.328,0.23c0.115,0.12,0.195,0.259,0.238,0.418S122.874,89.075,122.874,89.328z M122.206,89.328
+		c0-0.175-0.01-0.31-0.025-0.404c-0.018-0.095-0.061-0.176-0.129-0.245c-0.078-0.078-0.182-0.118-0.313-0.118
+		c-0.125,0-0.229,0.04-0.307,0.118c-0.063,0.063-0.102,0.146-0.123,0.25c-0.02,0.105-0.031,0.238-0.031,0.399
+		c0,0.217,0.012,0.366,0.037,0.449c0.023,0.082,0.063,0.151,0.117,0.205c0.078,0.079,0.182,0.119,0.307,0.119
+		c0.131,0,0.234-0.04,0.313-0.119c0.063-0.062,0.102-0.145,0.123-0.249C122.194,89.628,122.206,89.493,122.206,89.328z"/>
+	<path fill="#00479D" d="M125.78,90.681h-0.668v-1.629c0-0.169-0.045-0.296-0.137-0.383c-0.078-0.072-0.178-0.108-0.301-0.108
+		c-0.125,0-0.227,0.034-0.301,0.104c-0.096,0.086-0.143,0.216-0.143,0.388v1.629h-0.668v-2.682h0.65v0.246
+		c0.174-0.188,0.396-0.281,0.666-0.281c0.129,0,0.248,0.021,0.355,0.062s0.199,0.1,0.273,0.176c0.1,0.1,0.17,0.212,0.211,0.338
+		c0.041,0.125,0.061,0.267,0.061,0.425V90.681z"/>
+	<path fill="#00479D" d="M130.21,89.591c0,0.346-0.131,0.619-0.391,0.82c-0.246,0.191-0.568,0.287-0.965,0.287
+		c-0.291,0-0.543-0.036-0.754-0.107c-0.213-0.071-0.406-0.195-0.58-0.372l0.459-0.465c0.109,0.111,0.24,0.191,0.389,0.239
+		c0.15,0.049,0.314,0.072,0.498,0.072c0.432,0,0.648-0.15,0.648-0.451c0-0.134-0.037-0.236-0.113-0.309
+		c-0.035-0.031-0.076-0.058-0.129-0.08c-0.051-0.022-0.117-0.038-0.195-0.048l-0.443-0.063c-0.311-0.044-0.549-0.145-0.709-0.303
+		c-0.176-0.175-0.262-0.414-0.262-0.719c0-0.332,0.113-0.601,0.34-0.804c0.229-0.204,0.541-0.306,0.934-0.306
+		c0.258,0,0.48,0.032,0.666,0.098c0.188,0.065,0.359,0.176,0.516,0.33l-0.451,0.445c-0.102-0.096-0.219-0.161-0.348-0.196
+		c-0.129-0.036-0.264-0.054-0.404-0.054c-0.186,0-0.326,0.043-0.424,0.128c-0.096,0.086-0.143,0.197-0.143,0.334
+		c0,0.055,0.008,0.103,0.023,0.144c0.014,0.04,0.043,0.08,0.084,0.117c0.082,0.075,0.195,0.123,0.34,0.144l0.432,0.062
+		c0.309,0.045,0.541,0.139,0.699,0.282c0.1,0.092,0.172,0.202,0.215,0.33C130.187,89.276,130.21,89.424,130.21,89.591z"/>
+	<path fill="#00479D" d="M132.892,90.672h-0.65v-0.232c-0.092,0.094-0.186,0.159-0.281,0.199c-0.096,0.039-0.221,0.06-0.375,0.06
+		c-0.297,0-0.521-0.078-0.674-0.233c-0.152-0.156-0.229-0.357-0.229-0.604c0-0.229,0.074-0.412,0.221-0.549
+		c0.16-0.151,0.391-0.227,0.691-0.227h0.629v-0.135c0-0.149-0.039-0.258-0.115-0.325s-0.203-0.101-0.381-0.101
+		c-0.129,0-0.229,0.016-0.297,0.046c-0.068,0.031-0.139,0.09-0.213,0.177l-0.428-0.417c0.131-0.14,0.266-0.235,0.406-0.288
+		s0.326-0.079,0.559-0.079c0.758,0,1.137,0.315,1.137,0.945V90.672z M132.224,89.685V89.54h-0.527c-0.248,0-0.371,0.103-0.371,0.305
+		c0,0.207,0.127,0.311,0.383,0.311c0.105,0,0.188-0.008,0.244-0.023c0.059-0.016,0.119-0.053,0.18-0.111
+		S132.224,89.851,132.224,89.685z"/>
+	<path fill="#00479D" d="M134.911,88.587h-0.492v2.094h-0.668v-2.094h-0.275V88.08h0.275v-0.336c0-0.209,0.061-0.386,0.184-0.526
+		c0.141-0.162,0.34-0.242,0.598-0.242h0.379v0.561h-0.262c-0.154,0-0.23,0.082-0.23,0.246v0.298h0.492V88.587z"/>
+	<path fill="#00479D" d="M137.671,89.54h-1.67c0,0.179,0.051,0.322,0.154,0.433c0.102,0.109,0.246,0.164,0.432,0.164
+		c0.135,0,0.248-0.02,0.334-0.058c0.088-0.038,0.178-0.105,0.27-0.2l0.406,0.401c-0.146,0.146-0.295,0.252-0.443,0.318
+		s-0.34,0.1-0.572,0.1c-0.365,0-0.652-0.093-0.857-0.277c-0.254-0.226-0.381-0.59-0.381-1.093c0-0.428,0.105-0.762,0.316-1.002
+		c0.213-0.241,0.494-0.362,0.848-0.362c0.361,0,0.648,0.122,0.861,0.364c0.203,0.233,0.303,0.538,0.303,0.914V89.54z
+		 M137.017,89.086c0-0.093-0.02-0.187-0.059-0.28c-0.041-0.093-0.098-0.164-0.172-0.215c-0.076-0.05-0.168-0.075-0.277-0.075
+		s-0.201,0.025-0.277,0.075c-0.074,0.051-0.131,0.122-0.172,0.215c-0.039,0.094-0.059,0.188-0.059,0.28H137.017z"/>
+	<path fill="#00479D" d="M139.538,90.681h-0.363c-0.256,0-0.453-0.079-0.59-0.237c-0.123-0.14-0.186-0.317-0.186-0.529v-1.327
+		h-0.281V88.08h0.281v-0.793h0.668v0.793h0.471v0.507h-0.471v1.29c0,0.161,0.078,0.242,0.23,0.242h0.24V90.681z"/>
+	<path fill="#00479D" d="M142.335,87.99l-1.145,3.111c-0.031,0.081-0.061,0.148-0.09,0.2c-0.029,0.051-0.066,0.1-0.109,0.144
+		c-0.072,0.072-0.158,0.125-0.254,0.157c-0.098,0.032-0.205,0.049-0.322,0.049h-0.262v-0.597h0.154c0.096,0,0.168-0.017,0.213-0.049
+		c0.047-0.033,0.086-0.098,0.121-0.193l0.113-0.33l-0.914-2.492h0.703l0.555,1.657l0.533-1.657H142.335z"/>
+	<path fill="#00479D" d="M146.417,87.644h-0.953v3.037h-0.711v-3.037H143.8v-0.633h2.617V87.644z"/>
+	<path fill="#00479D" d="M149.198,89.54h-1.67c0,0.179,0.051,0.322,0.154,0.433c0.102,0.109,0.246,0.164,0.43,0.164
+		c0.137,0,0.25-0.02,0.336-0.058c0.088-0.038,0.178-0.105,0.27-0.2l0.406,0.401c-0.148,0.146-0.295,0.252-0.443,0.318
+		c-0.15,0.066-0.34,0.1-0.572,0.1c-0.367,0-0.652-0.093-0.857-0.277c-0.256-0.226-0.383-0.59-0.383-1.093
+		c0-0.428,0.107-0.762,0.318-1.002c0.213-0.241,0.494-0.362,0.848-0.362c0.361,0,0.648,0.122,0.861,0.364
+		c0.201,0.233,0.303,0.538,0.303,0.914V89.54z M148.544,89.086c0-0.093-0.02-0.187-0.059-0.28c-0.041-0.093-0.098-0.164-0.174-0.215
+		c-0.074-0.05-0.166-0.075-0.275-0.075s-0.203,0.025-0.277,0.075c-0.076,0.051-0.133,0.122-0.172,0.215
+		c-0.039,0.094-0.059,0.188-0.059,0.28H148.544z"/>
+	<path fill="#00479D" d="M151.81,90.336c-0.232,0.241-0.527,0.362-0.883,0.362c-0.32,0-0.586-0.093-0.795-0.277
+		c-0.268-0.235-0.4-0.6-0.4-1.093c0-0.492,0.131-0.854,0.396-1.087c0.207-0.185,0.475-0.277,0.799-0.277
+		c0.359,0,0.654,0.119,0.883,0.356l-0.451,0.454c-0.068-0.076-0.137-0.131-0.203-0.164s-0.143-0.05-0.229-0.05
+		c-0.156,0-0.285,0.061-0.381,0.181c-0.098,0.12-0.146,0.316-0.146,0.587c0,0.275,0.049,0.473,0.146,0.593
+		c0.096,0.12,0.225,0.181,0.381,0.181c0.158,0,0.303-0.071,0.432-0.214L151.81,90.336z"/>
+	<path fill="#00479D" d="M154.579,90.681h-0.668v-1.645c0-0.165-0.047-0.289-0.139-0.372c-0.078-0.069-0.178-0.104-0.297-0.104
+		s-0.215,0.034-0.291,0.104c-0.092,0.083-0.139,0.207-0.139,0.372v1.645h-0.668v-3.67h0.668v1.234
+		c0.182-0.188,0.395-0.281,0.641-0.281c0.287,0,0.508,0.09,0.662,0.268c0.152,0.18,0.23,0.417,0.23,0.712V90.681z"/>
+	<path fill="#00479D" d="M157.567,90.681h-0.668v-1.629c0-0.169-0.047-0.296-0.139-0.383c-0.078-0.072-0.178-0.108-0.301-0.108
+		c-0.125,0-0.225,0.034-0.301,0.104c-0.096,0.086-0.143,0.216-0.143,0.388v1.629h-0.668v-2.682h0.65v0.246
+		c0.174-0.188,0.396-0.281,0.666-0.281c0.129,0,0.248,0.021,0.355,0.062s0.199,0.1,0.273,0.176c0.1,0.1,0.17,0.212,0.211,0.338
+		c0.041,0.125,0.063,0.267,0.063,0.425V90.681z"/>
+	<path fill="#00479D" d="M160.485,89.328c0,0.268-0.02,0.476-0.061,0.626s-0.121,0.289-0.242,0.416
+		c-0.092,0.1-0.207,0.179-0.342,0.238c-0.139,0.06-0.301,0.09-0.488,0.09c-0.184,0-0.346-0.03-0.482-0.09s-0.252-0.139-0.344-0.238
+		c-0.115-0.12-0.195-0.259-0.238-0.418c-0.043-0.16-0.064-0.367-0.064-0.624c0-0.263,0.021-0.47,0.061-0.62
+		c0.043-0.15,0.123-0.289,0.242-0.416c0.092-0.099,0.201-0.176,0.322-0.23c0.148-0.064,0.316-0.098,0.504-0.098
+		c0.184,0,0.352,0.033,0.502,0.098c0.127,0.055,0.236,0.132,0.328,0.23c0.117,0.12,0.197,0.259,0.24,0.418
+		S160.485,89.075,160.485,89.328z M159.817,89.328c0-0.175-0.008-0.31-0.025-0.404s-0.059-0.176-0.127-0.245
+		c-0.078-0.078-0.184-0.118-0.313-0.118c-0.127,0-0.229,0.04-0.307,0.118c-0.063,0.063-0.104,0.146-0.123,0.25
+		c-0.021,0.105-0.031,0.238-0.031,0.399c0,0.217,0.012,0.366,0.035,0.449c0.025,0.082,0.064,0.151,0.119,0.205
+		c0.078,0.079,0.18,0.119,0.307,0.119c0.129,0,0.234-0.04,0.313-0.119c0.061-0.062,0.102-0.145,0.123-0.249
+		C159.808,89.628,159.817,89.493,159.817,89.328z"/>
+	<path fill="#00479D" d="M162.312,90.681h-0.381c-0.258,0-0.455-0.079-0.596-0.237c-0.123-0.141-0.186-0.318-0.186-0.53v-2.902
+		h0.668v2.866c0,0.161,0.078,0.242,0.236,0.242h0.258V90.681z"/>
+	<path fill="#00479D" d="M167.573,90.571c0,0.324-0.107,0.59-0.32,0.797c-0.213,0.206-0.498,0.31-0.852,0.31
+		c-0.215,0-0.396-0.025-0.543-0.074c-0.148-0.049-0.289-0.14-0.426-0.272l0.416-0.419c0.139,0.136,0.313,0.205,0.52,0.205
+		c0.184,0,0.324-0.059,0.42-0.175c0.078-0.097,0.117-0.224,0.117-0.381v-0.273c-0.086,0.097-0.178,0.165-0.279,0.206
+		c-0.1,0.041-0.219,0.062-0.355,0.062c-0.266,0-0.477-0.078-0.635-0.236c-0.115-0.116-0.189-0.252-0.223-0.408
+		c-0.033-0.155-0.049-0.374-0.049-0.654c0-0.273,0.016-0.488,0.049-0.646c0.031-0.157,0.105-0.294,0.223-0.41
+		c0.156-0.158,0.369-0.236,0.639-0.236c0.143,0,0.264,0.021,0.363,0.065c0.098,0.043,0.193,0.116,0.285,0.22v-0.25h0.65V90.571z
+		 M166.905,89.262c0-0.215-0.023-0.374-0.07-0.477c-0.07-0.144-0.191-0.216-0.369-0.216c-0.176,0-0.297,0.07-0.361,0.21
+		c-0.049,0.104-0.072,0.264-0.072,0.482c0,0.283,0.039,0.474,0.117,0.569c0.068,0.085,0.174,0.128,0.316,0.128
+		c0.178,0,0.299-0.072,0.369-0.216C166.882,89.641,166.905,89.48,166.905,89.262z"/>
+	<path fill="#00479D" d="M170.519,87.99l-1.145,3.111c-0.031,0.081-0.061,0.148-0.09,0.2c-0.029,0.051-0.066,0.1-0.109,0.144
+		c-0.072,0.072-0.156,0.125-0.254,0.157s-0.205,0.049-0.32,0.049h-0.262v-0.597h0.152c0.096,0,0.168-0.017,0.213-0.049
+		c0.047-0.033,0.088-0.098,0.121-0.193l0.113-0.33l-0.914-2.492h0.703l0.555,1.657l0.533-1.657H170.519z"/>
+	<path fill="#00479D" d="M164.907,89.333c0,0.268-0.02,0.476-0.061,0.626s-0.121,0.289-0.242,0.416
+		c-0.092,0.1-0.207,0.179-0.342,0.238c-0.139,0.06-0.301,0.09-0.488,0.09c-0.184,0-0.346-0.03-0.482-0.09s-0.252-0.139-0.344-0.238
+		c-0.115-0.12-0.195-0.259-0.238-0.418c-0.043-0.16-0.064-0.367-0.064-0.624c0-0.263,0.021-0.47,0.061-0.62
+		c0.043-0.15,0.123-0.289,0.242-0.416c0.092-0.099,0.201-0.176,0.322-0.23c0.148-0.064,0.316-0.098,0.504-0.098
+		c0.184,0,0.352,0.033,0.502,0.098c0.127,0.055,0.236,0.132,0.328,0.23c0.117,0.12,0.197,0.259,0.24,0.418
+		S164.907,89.08,164.907,89.333z M164.239,89.333c0-0.175-0.008-0.31-0.025-0.404s-0.059-0.176-0.127-0.245
+		c-0.078-0.078-0.184-0.118-0.313-0.118c-0.127,0-0.229,0.04-0.307,0.118c-0.063,0.063-0.104,0.146-0.123,0.25
+		c-0.021,0.105-0.031,0.238-0.031,0.399c0,0.217,0.012,0.366,0.035,0.449c0.025,0.082,0.064,0.151,0.119,0.205
+		c0.078,0.079,0.18,0.119,0.307,0.119c0.129,0,0.234-0.04,0.313-0.119c0.061-0.062,0.102-0.145,0.123-0.249
+		C164.229,89.633,164.239,89.498,164.239,89.333z"/>
+</g>
+</svg>

src/assets/images/kiast_logo_wh.svg

@@ -0,0 +1,279 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="220px" height="98.667px" viewBox="0 0 220 98.667" enable-background="new 0 0 220 98.667" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#FFFFFF" d="M63.85,63.171V33.878h6.524v12.964l2.137-3.22l6.669-9.744h8.151L77.645,46.35l10.206,16.821h-7.757
+			l-7.19-12.639l-2.529,3.084v9.555H63.85z"/>
+		<path fill="#FFFFFF" d="M89.429,33.878h6.668v29.293h-6.668V33.878z"/>
+		<path fill="#FFFFFF" d="M115.95,55.651h-8.383l-2.083,7.52h-6.862l8.945-29.293h8.686l9.076,29.293h-7.121L115.95,55.651z
+			 M108.521,50.688h6.454l-1.819-6.206c-0.229-0.81-0.496-1.809-0.8-2.993c-0.304-1.187-0.527-2.068-0.671-2.647
+			c-0.231,0.753-0.479,1.692-0.737,2.821c-0.349,1.445-0.577,2.386-0.693,2.819L108.521,50.688z"/>
+		<path fill="#FFFFFF" d="M126.988,61.775l1.377-5.414c1.012,0.508,2.144,0.93,3.401,1.267c1.256,0.337,2.563,0.508,3.921,0.508
+			c1.501,0,2.649-0.282,3.444-0.847c0.793-0.564,1.19-1.338,1.19-2.321c0-0.897-0.366-1.647-1.104-2.256
+			c-0.734-0.608-1.999-1.23-3.789-1.865c-2.543-0.896-4.479-2.01-5.807-3.34c-1.474-1.474-2.208-3.239-2.208-5.293
+			c0-2.544,0.997-4.641,2.994-6.291c1.996-1.646,4.688-2.472,8.073-2.472c1.619,0,3.009,0.125,4.166,0.37s2.257,0.6,3.3,1.065
+			l-1.477,5.354c-1.017-0.495-2.044-0.852-3.087-1.07c-1.044-0.219-2.06-0.328-3.044-0.328c-1.392,0-2.448,0.261-3.173,0.781
+			c-0.726,0.52-1.086,1.199-1.086,2.037c0,0.865,0.42,1.604,1.261,2.212c0.696,0.49,2.088,1.127,4.178,1.906
+			c2.609,0.954,4.53,2.132,5.764,3.533c1.231,1.401,1.847,3.13,1.847,5.181c0,2.602-0.956,4.726-2.869,6.373
+			c-2.119,1.82-5.106,2.73-8.963,2.73c-1.567,0-3.11-0.18-4.633-0.541C129.142,62.692,127.917,62.267,126.988,61.775z"/>
+		<path fill="#FFFFFF" d="M156.163,63.171V39.409h-7.873v-5.531h22.556v5.531h-8.015v23.762H156.163z"/>
+	</g>
+	<g>
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M98.626,23.54c-18.409,2.146-38.616,4.723-51.451,12.286
+			l3.838,9.598C58.546,37.91,72.086,26.692,98.626,23.54"/>
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M100.497,28.751c-18.409,2.144-38.617,4.721-51.45,12.285
+			l3.837,9.596C60.417,43.12,73.956,31.902,100.497,28.751"/>
+		<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M98.293,25.654c-17.962,2.092-37.682,4.607-50.201,11.988
+			l8.047,5.876C63.49,36.188,76.902,30.297,98.293,25.654"/>
+	</g>
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M149.097,19.618C101.091,16.895,45.294,22.545,6.556,6.747
+		L44.8,34.678c26.833-12.043,70.668-13.341,92.569-14.682"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M131.676,12.552c2.833,0.075,2.34,0.317,5.167,0.391
+		c1.097,0.987,1.955,1.674,3.049,2.66c13.093-0.102,5.839-0.154,18.93-0.256c6.947-0.054,8.259-0.396,11.943,4.513l-35.744,0.215
+		C134.104,17.583,133.727,15.043,131.676,12.552"/>
+	<line fill="#FFFFFF" x1="5.156" y1="6.019" x2="61.359" y2="47.103"/>
+</g>
+<g>
+	<path fill="#FFFFFF" d="M71.165,73.023c0.135,0.197,0.24,0.4,0.313,0.607c0.082,0.228,0.125,0.462,0.125,0.7
+		c0,0.935-0.379,1.703-1.137,2.306c-0.697,0.581-1.521,0.871-2.477,0.871s-1.785-0.29-2.492-0.871
+		c-0.746-0.613-1.121-1.382-1.121-2.306c0-0.229,0.037-0.456,0.109-0.685c0.072-0.197,0.176-0.405,0.313-0.623h-0.826v-1.729h2.865
+		V70.08h2.336v1.215h2.85v1.729H71.165z M66.93,73.428c-0.281,0.271-0.42,0.593-0.42,0.966c0,0.363,0.139,0.681,0.42,0.949
+		c0.291,0.271,0.639,0.405,1.043,0.405s0.752-0.135,1.043-0.405c0.301-0.269,0.451-0.586,0.451-0.949
+		c0-0.373-0.15-0.695-0.451-0.966c-0.291-0.26-0.639-0.389-1.043-0.389S67.221,73.168,66.93,73.428 M75.338,78.037
+		c0.934,0.799,1.4,1.791,1.4,2.975c0,1.193-0.467,2.185-1.4,2.974c-0.861,0.737-1.875,1.105-3.037,1.105
+		c-1.172,0-2.189-0.368-3.051-1.105c-0.904-0.789-1.355-1.78-1.355-2.974s0.451-2.186,1.355-2.975
+		c0.861-0.736,1.879-1.105,3.051-1.105C73.454,76.932,74.465,77.301,75.338,78.037 M70.792,79.517
+		c-0.447,0.405-0.67,0.903-0.67,1.495c0,0.591,0.223,1.09,0.67,1.494c0.436,0.395,0.949,0.592,1.541,0.592s1.096-0.197,1.512-0.592
+		c0.445-0.404,0.67-0.903,0.67-1.494c0-0.592-0.225-1.09-0.67-1.495c-0.426-0.385-0.93-0.576-1.512-0.576
+		C71.741,78.94,71.227,79.132,70.792,79.517 M76.739,74.829v2.211h-2.195v-6.244h2.195v2.088h1.775v1.945H76.739z"/>
+	<path fill="#FFFFFF" d="M86.481,75.826h6.54v1.946H79.583v-1.946h4.701v-1.838h2.197V75.826z M90.171,77.009v-4.266H80.034v-1.947
+		h12.333v6.213H90.171z M89.548,77.29c1.111,0.83,1.666,1.858,1.666,3.083c0,1.308-0.523,2.398-1.572,3.271
+		c-0.977,0.809-2.108,1.214-3.395,1.214c-1.328,0-2.48-0.405-3.457-1.214c-1.039-0.872-1.557-1.963-1.557-3.271
+		c0-1.225,0.549-2.253,1.65-3.083c1.008-0.757,2.127-1.137,3.363-1.137C87.45,76.153,88.552,76.533,89.548,77.29 M84.377,78.566
+		c-0.52,0.498-0.779,1.101-0.779,1.807c0,0.695,0.26,1.292,0.779,1.791c0.52,0.487,1.133,0.731,1.838,0.731
+		c0.695,0,1.303-0.244,1.822-0.731c0.53-0.499,0.793-1.096,0.793-1.791c0-0.706-0.264-1.309-0.793-1.807
+		c-0.52-0.478-1.127-0.716-1.822-0.716C85.51,77.851,84.897,78.089,84.377,78.566"/>
+	<path fill="#FFFFFF" d="M102.185,71.279c0.883,0.747,1.324,1.692,1.324,2.834c0,1.121-0.441,2.056-1.324,2.803
+		c-0.82,0.706-1.775,1.059-2.865,1.059c-1.111,0-2.076-0.353-2.896-1.059c-0.871-0.747-1.307-1.682-1.307-2.803
+		c0-1.142,0.436-2.087,1.307-2.834c0.82-0.706,1.785-1.059,2.896-1.059C100.409,70.221,101.364,70.573,102.185,71.279
+		 M96.392,79.174h2.195v2.912h9.516v1.946H97.45c-0.363,0-0.623-0.077-0.779-0.233c-0.186-0.187-0.279-0.498-0.279-0.935V79.174z
+		 M97.948,72.774c-0.404,0.363-0.607,0.81-0.607,1.339c0,0.52,0.203,0.955,0.607,1.308c0.385,0.343,0.842,0.514,1.371,0.514
+		c0.498,0,0.939-0.171,1.324-0.514c0.404-0.363,0.607-0.799,0.607-1.308c0-0.529-0.203-0.976-0.607-1.339
+		c-0.385-0.343-0.826-0.514-1.324-0.514C98.79,72.261,98.333,72.432,97.948,72.774 M107.993,76.075v3.831h-2.197v-9.11h2.197v3.317
+		h1.775v1.962H107.993z"/>
+	<path fill="#FFFFFF" d="M119.118,70.796v1.947h-2.801c0.092,0.872,0.342,1.557,0.746,2.055c0.477,0.603,1.184,0.977,2.119,1.121
+		v2.087c-0.842-0.063-1.621-0.307-2.338-0.731c-0.736-0.437-1.291-1.007-1.666-1.713c-0.395,0.695-0.99,1.271-1.789,1.729
+		c-0.738,0.415-1.48,0.648-2.229,0.7v-2.071c0.924-0.145,1.621-0.519,2.086-1.121c0.375-0.498,0.613-1.183,0.717-2.055h-2.74v-1.947
+		H119.118z"/>
+	<path fill="#FFFFFF" d="M112.019,79.205h2.195v2.881h9.514v1.946h-10.635c-0.363,0-0.629-0.078-0.793-0.233
+		c-0.188-0.187-0.281-0.498-0.281-0.935V79.205z"/>
+	<polygon fill="#FFFFFF" points="121.423,73.226 121.423,70.796 123.618,70.796 123.618,79.906 121.423,79.906 121.423,75.172 
+		119.493,75.172 119.493,73.226 	"/>
+	<path fill="#FFFFFF" d="M134.542,70.796v1.512c0,3.321-0.893,5.756-2.678,7.302c-1.277,1.101-2.928,1.697-4.951,1.792v-2.135
+		c1.836-0.062,3.213-0.689,4.125-1.884c0.852-1.1,1.277-2.646,1.277-4.64h-5.201v-1.947H134.542z M137.05,70.796h2.195v13.438
+		h-2.195V70.796z"/>
+	<path fill="#FFFFFF" d="M147.616,78.364v-1.059h-5.527v-1.76h13.234v1.76h-5.527v1.059H147.616z M149.905,70.531
+		c0,0.842,0.467,1.47,1.4,1.885c0.83,0.363,2.02,0.565,3.566,0.607v1.837c-1.277-0.021-2.461-0.171-3.551-0.451
+		c-1.268-0.332-2.139-0.789-2.615-1.371c-0.488,0.582-1.365,1.039-2.633,1.371c-1.09,0.28-2.268,0.426-3.535,0.436v-1.821
+		c1.537-0.052,2.721-0.26,3.551-0.623c0.936-0.415,1.402-1.038,1.402-1.869H149.905z M152.677,79.609h-10.139v-1.712h12.334v3.814
+		h-10.137v0.545h10.137v1.775h-11.273c-0.365,0-0.629-0.078-0.795-0.233c-0.176-0.187-0.266-0.498-0.266-0.935v-2.74h10.139V79.609z
+		"/>
+	<path fill="#FFFFFF" d="M164.585,71.343c0.855,0.726,1.283,1.642,1.283,2.749c0,1.088-0.428,1.994-1.283,2.719
+		c-0.797,0.686-1.723,1.027-2.779,1.027c-1.078,0-2.016-0.342-2.811-1.027c-0.846-0.725-1.268-1.631-1.268-2.719
+		c0-1.107,0.422-2.023,1.268-2.749c0.795-0.685,1.732-1.026,2.811-1.026C162.862,70.316,163.788,70.658,164.585,71.343"/>
+	<path fill="#FFFFFF" d="M158.878,79.153h2.195v2.912h9.516v1.946h-10.652c-0.363,0-0.623-0.077-0.779-0.233
+		c-0.188-0.187-0.279-0.499-0.279-0.935V79.153z"/>
+	<path fill="#FFFFFF" d="M160.501,72.819c-0.385,0.345-0.576,0.77-0.576,1.272c0,0.493,0.191,0.908,0.576,1.243
+		c0.365,0.326,0.801,0.488,1.305,0.488c0.473,0,0.891-0.162,1.258-0.488c0.385-0.346,0.576-0.759,0.576-1.243
+		c0-0.503-0.191-0.928-0.576-1.272c-0.367-0.326-0.785-0.488-1.258-0.488C161.302,72.331,160.866,72.493,160.501,72.819"/>
+	<polygon fill="#FFFFFF" points="166.312,78.058 166.312,76.11 168.241,76.11 168.241,70.807 170.438,70.807 170.438,80.486 
+		168.241,80.486 168.241,78.058 	"/>
+	<polygon fill="#FFFFFF" points="161.946,78.055 157.687,78.055 157.687,76.109 165.995,76.109 165.995,78.055 164.142,78.055 
+		164.142,79.894 161.946,79.894 	"/>
+</g>
+<g>
+	<path fill="#FFFFFF" d="M67.438,90.681h-0.832l-0.938-1.671l-0.473,0.566v1.104h-0.711v-3.67h0.711v1.591l1.287-1.591h0.867
+		l-1.211,1.459L67.438,90.681z"/>
+	<path fill="#FFFFFF" d="M70.04,89.328c0,0.268-0.021,0.476-0.061,0.626c-0.043,0.15-0.123,0.289-0.242,0.416
+		c-0.092,0.1-0.207,0.179-0.344,0.238s-0.299,0.09-0.486,0.09c-0.186,0-0.346-0.03-0.482-0.09s-0.252-0.139-0.344-0.238
+		c-0.117-0.12-0.195-0.259-0.238-0.418c-0.043-0.16-0.064-0.367-0.064-0.624c0-0.263,0.02-0.47,0.061-0.62s0.121-0.289,0.242-0.416
+		c0.092-0.099,0.199-0.176,0.322-0.23c0.148-0.064,0.314-0.098,0.504-0.098c0.184,0,0.352,0.033,0.502,0.098
+		c0.127,0.055,0.236,0.132,0.328,0.23c0.117,0.12,0.195,0.259,0.238,0.418S70.04,89.075,70.04,89.328z M69.372,89.328
+		c0-0.175-0.008-0.31-0.025-0.404s-0.061-0.176-0.127-0.245c-0.08-0.078-0.184-0.118-0.313-0.118c-0.127,0-0.23,0.04-0.309,0.118
+		c-0.061,0.063-0.102,0.146-0.123,0.25c-0.02,0.105-0.029,0.238-0.029,0.399c0,0.217,0.012,0.366,0.035,0.449
+		c0.023,0.082,0.063,0.151,0.117,0.205c0.078,0.079,0.182,0.119,0.309,0.119c0.129,0,0.232-0.04,0.313-0.119
+		c0.061-0.062,0.102-0.145,0.121-0.249C69.362,89.628,69.372,89.493,69.372,89.328z"/>
+	<path fill="#FFFFFF" d="M72.686,88.214l-0.504,0.507c-0.055-0.055-0.107-0.096-0.158-0.121c-0.051-0.026-0.117-0.039-0.195-0.039
+		c-0.115,0-0.217,0.042-0.303,0.126c-0.084,0.085-0.127,0.209-0.127,0.371v1.623h-0.668v-2.682h0.648v0.256
+		c0.068-0.079,0.162-0.147,0.285-0.205s0.254-0.086,0.391-0.086c0.133,0,0.248,0.019,0.346,0.057
+		C72.499,88.058,72.592,88.122,72.686,88.214z"/>
+	<path fill="#FFFFFF" d="M75.311,89.54h-1.67c0,0.179,0.051,0.322,0.154,0.433c0.102,0.109,0.246,0.164,0.43,0.164
+		c0.137,0,0.25-0.02,0.338-0.058c0.086-0.038,0.176-0.105,0.268-0.2l0.406,0.401c-0.146,0.146-0.295,0.252-0.443,0.318
+		c-0.15,0.066-0.34,0.1-0.572,0.1c-0.367,0-0.652-0.093-0.857-0.277c-0.254-0.226-0.381-0.59-0.381-1.093
+		c0-0.428,0.105-0.762,0.316-1.002c0.213-0.241,0.494-0.362,0.848-0.362c0.361,0,0.648,0.122,0.861,0.364
+		c0.201,0.233,0.303,0.538,0.303,0.914V89.54z M74.657,89.086c0-0.093-0.02-0.187-0.059-0.28c-0.039-0.093-0.098-0.164-0.172-0.215
+		c-0.076-0.05-0.168-0.075-0.277-0.075s-0.201,0.025-0.277,0.075c-0.074,0.051-0.133,0.122-0.172,0.215
+		c-0.039,0.094-0.059,0.188-0.059,0.28H74.657z"/>
+	<path fill="#FFFFFF" d="M77.991,90.672h-0.65v-0.232c-0.092,0.094-0.186,0.159-0.281,0.199c-0.096,0.039-0.221,0.06-0.375,0.06
+		c-0.297,0-0.521-0.078-0.674-0.233c-0.152-0.156-0.229-0.357-0.229-0.604c0-0.229,0.074-0.412,0.221-0.549
+		c0.16-0.151,0.391-0.227,0.691-0.227h0.629v-0.135c0-0.149-0.039-0.258-0.115-0.325s-0.203-0.101-0.381-0.101
+		c-0.129,0-0.229,0.016-0.297,0.046c-0.068,0.031-0.139,0.09-0.215,0.177l-0.426-0.417c0.131-0.14,0.266-0.235,0.406-0.288
+		s0.326-0.079,0.559-0.079c0.758,0,1.137,0.315,1.137,0.945V90.672z M77.323,89.685V89.54h-0.527c-0.248,0-0.371,0.103-0.371,0.305
+		c0,0.207,0.127,0.311,0.383,0.311c0.105,0,0.188-0.008,0.244-0.023c0.059-0.016,0.119-0.053,0.18-0.111
+		S77.323,89.851,77.323,89.685z"/>
+	<path fill="#FFFFFF" d="M80.776,90.681h-0.713v-3.67h0.713V90.681z"/>
+	<path fill="#FFFFFF" d="M83.844,90.681h-0.668v-1.629c0-0.169-0.045-0.296-0.139-0.383c-0.078-0.072-0.178-0.108-0.301-0.108
+		c-0.125,0-0.225,0.034-0.301,0.104c-0.094,0.086-0.143,0.216-0.143,0.388v1.629h-0.668v-2.682h0.65v0.246
+		c0.176-0.188,0.396-0.281,0.666-0.281c0.131,0,0.248,0.021,0.357,0.062c0.107,0.041,0.197,0.1,0.273,0.176
+		c0.1,0.1,0.168,0.212,0.211,0.338c0.039,0.125,0.061,0.267,0.061,0.425V90.681z"/>
+	<path fill="#FFFFFF" d="M86.62,89.827c0,0.284-0.107,0.502-0.328,0.655c-0.201,0.144-0.469,0.216-0.805,0.216
+		c-0.256,0-0.455-0.021-0.6-0.062c-0.201-0.059-0.381-0.166-0.537-0.324l0.439-0.434c0.096,0.095,0.215,0.163,0.357,0.203
+		c0.109,0.031,0.227,0.046,0.354,0.046c0.129,0,0.24-0.022,0.332-0.066s0.139-0.114,0.139-0.21c0-0.068-0.021-0.124-0.064-0.167
+		c-0.043-0.042-0.115-0.069-0.219-0.08l-0.418-0.04c-0.252-0.024-0.443-0.093-0.568-0.206c-0.139-0.123-0.209-0.304-0.209-0.543
+		c0-0.267,0.1-0.476,0.299-0.626s0.441-0.226,0.729-0.226c0.232,0,0.428,0.022,0.59,0.067c0.16,0.045,0.303,0.127,0.43,0.247
+		l-0.41,0.418c-0.068-0.062-0.158-0.107-0.271-0.136c-0.111-0.03-0.229-0.045-0.348-0.045c-0.121,0-0.215,0.025-0.279,0.074
+		c-0.066,0.051-0.098,0.11-0.098,0.183c0,0.062,0.016,0.109,0.047,0.144c0.043,0.048,0.119,0.076,0.229,0.087l0.42,0.041
+		c0.258,0.023,0.455,0.103,0.59,0.238C86.553,89.417,86.62,89.599,86.62,89.827z"/>
+	<path fill="#FFFFFF" d="M88.44,90.681h-0.366c-0.256,0-0.453-0.079-0.59-0.237c-0.123-0.14-0.184-0.317-0.184-0.529v-1.327h-0.283
+		V88.08h0.283v-0.793h0.668v0.793h0.471v0.507h-0.471v1.29c0,0.161,0.076,0.242,0.23,0.242h0.241V90.681z"/>
+	<path fill="#FFFFFF" d="M89.755,87.545h-0.668v-0.543h0.668V87.545z M89.755,90.681h-0.668V88h0.668V90.681z"/>
+	<path fill="#FFFFFF" d="M91.759,90.681h-0.365c-0.256,0-0.453-0.079-0.588-0.237c-0.125-0.14-0.186-0.317-0.186-0.529v-1.327
+		h-0.283V88.08h0.283v-0.793h0.668v0.793h0.471v0.507h-0.471v1.29c0,0.161,0.076,0.242,0.23,0.242h0.24V90.681z"/>
+	<path fill="#FFFFFF" d="M94.597,90.672h-0.65v-0.25c-0.174,0.185-0.396,0.276-0.666,0.276c-0.129,0-0.248-0.021-0.355-0.062
+		c-0.107-0.042-0.199-0.1-0.273-0.175c-0.1-0.1-0.17-0.212-0.211-0.337c-0.041-0.124-0.063-0.266-0.063-0.424V87.99h0.668v1.622
+		c0,0.168,0.047,0.295,0.139,0.381c0.078,0.072,0.178,0.108,0.301,0.108c0.125,0,0.227-0.034,0.301-0.104
+		c0.094-0.085,0.143-0.214,0.143-0.386V87.99h0.668V90.672z"/>
+	<path fill="#FFFFFF" d="M96.606,90.681h-0.365c-0.256,0-0.453-0.079-0.588-0.237c-0.123-0.14-0.186-0.317-0.186-0.529v-1.327
+		h-0.283V88.08h0.283v-0.793h0.668v0.793h0.471v0.507h-0.471v1.29c0,0.161,0.076,0.242,0.23,0.242h0.24V90.681z"/>
+	<path fill="#FFFFFF" d="M99.458,89.54h-1.67c0,0.179,0.051,0.322,0.154,0.433c0.104,0.109,0.246,0.164,0.432,0.164
+		c0.135,0,0.248-0.02,0.336-0.058c0.086-0.038,0.176-0.105,0.268-0.2l0.406,0.401c-0.146,0.146-0.295,0.252-0.443,0.318
+		s-0.34,0.1-0.572,0.1c-0.365,0-0.652-0.093-0.857-0.277c-0.254-0.226-0.381-0.59-0.381-1.093c0-0.428,0.105-0.762,0.316-1.002
+		c0.213-0.241,0.496-0.362,0.848-0.362c0.361,0,0.65,0.122,0.861,0.364c0.203,0.233,0.303,0.538,0.303,0.914V89.54z M98.804,89.086
+		c0-0.093-0.02-0.187-0.059-0.28c-0.039-0.093-0.098-0.164-0.172-0.215c-0.076-0.05-0.168-0.075-0.277-0.075
+		s-0.201,0.025-0.277,0.075c-0.074,0.051-0.133,0.122-0.172,0.215c-0.039,0.094-0.059,0.188-0.059,0.28H98.804z"/>
+	<path fill="#FFFFFF" d="M103.513,89.328c0,0.268-0.02,0.476-0.063,0.626c-0.039,0.15-0.121,0.289-0.24,0.416
+		c-0.092,0.1-0.207,0.179-0.344,0.238s-0.299,0.09-0.486,0.09c-0.186,0-0.346-0.03-0.482-0.09s-0.252-0.139-0.344-0.238
+		c-0.117-0.12-0.195-0.259-0.238-0.418c-0.043-0.16-0.064-0.367-0.064-0.624c0-0.263,0.02-0.47,0.061-0.62s0.123-0.289,0.242-0.416
+		c0.092-0.099,0.199-0.176,0.322-0.23c0.146-0.064,0.314-0.098,0.504-0.098c0.184,0,0.352,0.033,0.502,0.098
+		c0.127,0.055,0.236,0.132,0.328,0.23c0.117,0.12,0.195,0.259,0.238,0.418S103.513,89.075,103.513,89.328z M102.845,89.328
+		c0-0.175-0.008-0.31-0.025-0.404s-0.061-0.176-0.129-0.245c-0.078-0.078-0.182-0.118-0.311-0.118c-0.127,0-0.229,0.04-0.309,0.118
+		c-0.061,0.063-0.102,0.146-0.121,0.25c-0.021,0.105-0.031,0.238-0.031,0.399c0,0.217,0.012,0.366,0.035,0.449
+		c0.023,0.082,0.064,0.151,0.117,0.205c0.08,0.079,0.182,0.119,0.309,0.119c0.129,0,0.232-0.04,0.311-0.119
+		c0.063-0.062,0.104-0.145,0.123-0.249C102.835,89.628,102.845,89.493,102.845,89.328z"/>
+	<path fill="#FFFFFF" d="M105.446,88.587h-0.494v2.094h-0.668v-2.094h-0.275V88.08h0.275v-0.336c0-0.209,0.061-0.386,0.186-0.526
+		c0.141-0.162,0.338-0.242,0.596-0.242h0.381v0.561h-0.264c-0.154,0-0.23,0.082-0.23,0.246v0.298h0.494V88.587z"/>
+	<path fill="#FFFFFF" d="M110.124,90.681h-0.744l-0.215-0.659h-1.299l-0.221,0.659h-0.744l1.33-3.67h0.559L110.124,90.681z
+		 M108.978,89.425l-0.445-1.329l-0.463,1.329H108.978z"/>
+	<path fill="#FFFFFF" d="M112.71,87.99l-0.98,2.69h-0.523l-0.984-2.69h0.703l0.543,1.666l0.539-1.666H112.71z"/>
+	<path fill="#FFFFFF" d="M113.813,87.545h-0.668v-0.543h0.668V87.545z M113.813,90.681h-0.668V88h0.668V90.681z"/>
+	<path fill="#FFFFFF" d="M116.63,90.672h-0.65v-0.232c-0.092,0.094-0.186,0.159-0.281,0.199c-0.096,0.039-0.221,0.06-0.375,0.06
+		c-0.297,0-0.521-0.078-0.674-0.233c-0.152-0.156-0.229-0.357-0.229-0.604c0-0.229,0.074-0.412,0.221-0.549
+		c0.16-0.151,0.391-0.227,0.691-0.227h0.629v-0.135c0-0.149-0.039-0.258-0.115-0.325s-0.203-0.101-0.381-0.101
+		c-0.129,0-0.229,0.016-0.297,0.046c-0.068,0.031-0.139,0.09-0.213,0.177l-0.428-0.417c0.131-0.14,0.266-0.235,0.406-0.288
+		s0.326-0.079,0.559-0.079c0.758,0,1.137,0.315,1.137,0.945V90.672z M115.962,89.685V89.54h-0.527c-0.248,0-0.371,0.103-0.371,0.305
+		c0,0.207,0.127,0.311,0.383,0.311c0.105,0,0.188-0.008,0.244-0.023c0.059-0.016,0.119-0.053,0.18-0.111
+		S115.962,89.851,115.962,89.685z"/>
+	<path fill="#FFFFFF" d="M118.608,90.681h-0.363c-0.258,0-0.453-0.079-0.59-0.237c-0.123-0.14-0.186-0.317-0.186-0.529v-1.327
+		h-0.283V88.08h0.283v-0.793h0.668v0.793h0.471v0.507h-0.471v1.29c0,0.161,0.076,0.242,0.23,0.242h0.24V90.681z"/>
+	<path fill="#FFFFFF" d="M119.923,87.545h-0.668v-0.543h0.668V87.545z M119.923,90.681h-0.668V88h0.668V90.681z"/>
+	<path fill="#FFFFFF" d="M122.874,89.328c0,0.268-0.021,0.476-0.063,0.626s-0.121,0.289-0.24,0.416
+		c-0.094,0.1-0.207,0.179-0.344,0.238s-0.301,0.09-0.488,0.09c-0.186,0-0.346-0.03-0.482-0.09s-0.252-0.139-0.344-0.238
+		c-0.115-0.12-0.195-0.259-0.238-0.418c-0.043-0.16-0.064-0.367-0.064-0.624c0-0.263,0.021-0.47,0.063-0.62s0.121-0.289,0.24-0.416
+		c0.092-0.099,0.201-0.176,0.324-0.23c0.146-0.064,0.314-0.098,0.502-0.098c0.186,0,0.354,0.033,0.504,0.098
+		c0.125,0.055,0.234,0.132,0.328,0.23c0.115,0.12,0.195,0.259,0.238,0.418S122.874,89.075,122.874,89.328z M122.206,89.328
+		c0-0.175-0.01-0.31-0.025-0.404c-0.018-0.095-0.061-0.176-0.129-0.245c-0.078-0.078-0.182-0.118-0.313-0.118
+		c-0.125,0-0.229,0.04-0.307,0.118c-0.063,0.063-0.102,0.146-0.123,0.25c-0.02,0.105-0.031,0.238-0.031,0.399
+		c0,0.217,0.012,0.366,0.037,0.449c0.023,0.082,0.063,0.151,0.117,0.205c0.078,0.079,0.182,0.119,0.307,0.119
+		c0.131,0,0.234-0.04,0.313-0.119c0.063-0.062,0.102-0.145,0.123-0.249C122.194,89.628,122.206,89.493,122.206,89.328z"/>
+	<path fill="#FFFFFF" d="M125.78,90.681h-0.668v-1.629c0-0.169-0.045-0.296-0.137-0.383c-0.078-0.072-0.178-0.108-0.301-0.108
+		c-0.125,0-0.227,0.034-0.301,0.104c-0.096,0.086-0.143,0.216-0.143,0.388v1.629h-0.668v-2.682h0.65v0.246
+		c0.174-0.188,0.396-0.281,0.666-0.281c0.129,0,0.248,0.021,0.355,0.062s0.199,0.1,0.273,0.176c0.1,0.1,0.17,0.212,0.211,0.338
+		c0.041,0.125,0.061,0.267,0.061,0.425V90.681z"/>
+	<path fill="#FFFFFF" d="M130.21,89.591c0,0.346-0.131,0.619-0.391,0.82c-0.246,0.191-0.568,0.287-0.965,0.287
+		c-0.291,0-0.543-0.036-0.754-0.107c-0.213-0.071-0.406-0.195-0.58-0.372l0.459-0.465c0.109,0.111,0.24,0.191,0.389,0.239
+		c0.15,0.049,0.314,0.072,0.498,0.072c0.432,0,0.648-0.15,0.648-0.451c0-0.134-0.037-0.236-0.113-0.309
+		c-0.035-0.031-0.076-0.058-0.129-0.08c-0.051-0.022-0.117-0.038-0.195-0.048l-0.443-0.063c-0.311-0.044-0.549-0.145-0.709-0.303
+		c-0.176-0.175-0.262-0.414-0.262-0.719c0-0.332,0.113-0.601,0.34-0.804c0.229-0.204,0.541-0.306,0.934-0.306
+		c0.258,0,0.48,0.032,0.666,0.098c0.188,0.065,0.359,0.176,0.516,0.33l-0.451,0.445c-0.102-0.096-0.219-0.161-0.348-0.196
+		c-0.129-0.036-0.264-0.054-0.404-0.054c-0.186,0-0.326,0.043-0.424,0.128c-0.096,0.086-0.143,0.197-0.143,0.334
+		c0,0.055,0.008,0.103,0.023,0.144c0.014,0.04,0.043,0.08,0.084,0.117c0.082,0.075,0.195,0.123,0.34,0.144l0.432,0.062
+		c0.309,0.045,0.541,0.139,0.699,0.282c0.1,0.092,0.172,0.202,0.215,0.33C130.187,89.276,130.21,89.424,130.21,89.591z"/>
+	<path fill="#FFFFFF" d="M132.892,90.672h-0.65v-0.232c-0.092,0.094-0.186,0.159-0.281,0.199c-0.096,0.039-0.221,0.06-0.375,0.06
+		c-0.297,0-0.521-0.078-0.674-0.233c-0.152-0.156-0.229-0.357-0.229-0.604c0-0.229,0.074-0.412,0.221-0.549
+		c0.16-0.151,0.391-0.227,0.691-0.227h0.629v-0.135c0-0.149-0.039-0.258-0.115-0.325s-0.203-0.101-0.381-0.101
+		c-0.129,0-0.229,0.016-0.297,0.046c-0.068,0.031-0.139,0.09-0.213,0.177l-0.428-0.417c0.131-0.14,0.266-0.235,0.406-0.288
+		s0.326-0.079,0.559-0.079c0.758,0,1.137,0.315,1.137,0.945V90.672z M132.224,89.685V89.54h-0.527c-0.248,0-0.371,0.103-0.371,0.305
+		c0,0.207,0.127,0.311,0.383,0.311c0.105,0,0.188-0.008,0.244-0.023c0.059-0.016,0.119-0.053,0.18-0.111
+		S132.224,89.851,132.224,89.685z"/>
+	<path fill="#FFFFFF" d="M134.911,88.587h-0.492v2.094h-0.668v-2.094h-0.275V88.08h0.275v-0.336c0-0.209,0.061-0.386,0.184-0.526
+		c0.141-0.162,0.34-0.242,0.598-0.242h0.379v0.561h-0.262c-0.154,0-0.23,0.082-0.23,0.246v0.298h0.492V88.587z"/>
+	<path fill="#FFFFFF" d="M137.671,89.54h-1.67c0,0.179,0.051,0.322,0.154,0.433c0.102,0.109,0.246,0.164,0.432,0.164
+		c0.135,0,0.248-0.02,0.334-0.058c0.088-0.038,0.178-0.105,0.27-0.2l0.406,0.401c-0.146,0.146-0.295,0.252-0.443,0.318
+		s-0.34,0.1-0.572,0.1c-0.365,0-0.652-0.093-0.857-0.277c-0.254-0.226-0.381-0.59-0.381-1.093c0-0.428,0.105-0.762,0.316-1.002
+		c0.213-0.241,0.494-0.362,0.848-0.362c0.361,0,0.648,0.122,0.861,0.364c0.203,0.233,0.303,0.538,0.303,0.914V89.54z
+		 M137.017,89.086c0-0.093-0.02-0.187-0.059-0.28c-0.041-0.093-0.098-0.164-0.172-0.215c-0.076-0.05-0.168-0.075-0.277-0.075
+		s-0.201,0.025-0.277,0.075c-0.074,0.051-0.131,0.122-0.172,0.215c-0.039,0.094-0.059,0.188-0.059,0.28H137.017z"/>
+	<path fill="#FFFFFF" d="M139.538,90.681h-0.363c-0.256,0-0.453-0.079-0.59-0.237c-0.123-0.14-0.186-0.317-0.186-0.529v-1.327
+		h-0.281V88.08h0.281v-0.793h0.668v0.793h0.471v0.507h-0.471v1.29c0,0.161,0.078,0.242,0.23,0.242h0.24V90.681z"/>
+	<path fill="#FFFFFF" d="M142.335,87.99l-1.145,3.111c-0.031,0.081-0.061,0.148-0.09,0.2c-0.029,0.051-0.066,0.1-0.109,0.144
+		c-0.072,0.072-0.158,0.125-0.254,0.157c-0.098,0.032-0.205,0.049-0.322,0.049h-0.262v-0.597h0.154c0.096,0,0.168-0.017,0.213-0.049
+		c0.047-0.033,0.086-0.098,0.121-0.193l0.113-0.33l-0.914-2.492h0.703l0.555,1.657l0.533-1.657H142.335z"/>
+	<path fill="#FFFFFF" d="M146.417,87.644h-0.953v3.037h-0.711v-3.037H143.8v-0.633h2.617V87.644z"/>
+	<path fill="#FFFFFF" d="M149.198,89.54h-1.67c0,0.179,0.051,0.322,0.154,0.433c0.102,0.109,0.246,0.164,0.43,0.164
+		c0.137,0,0.25-0.02,0.336-0.058c0.088-0.038,0.178-0.105,0.27-0.2l0.406,0.401c-0.148,0.146-0.295,0.252-0.443,0.318
+		c-0.15,0.066-0.34,0.1-0.572,0.1c-0.367,0-0.652-0.093-0.857-0.277c-0.256-0.226-0.383-0.59-0.383-1.093
+		c0-0.428,0.107-0.762,0.318-1.002c0.213-0.241,0.494-0.362,0.848-0.362c0.361,0,0.648,0.122,0.861,0.364
+		c0.201,0.233,0.303,0.538,0.303,0.914V89.54z M148.544,89.086c0-0.093-0.02-0.187-0.059-0.28c-0.041-0.093-0.098-0.164-0.174-0.215
+		c-0.074-0.05-0.166-0.075-0.275-0.075s-0.203,0.025-0.277,0.075c-0.076,0.051-0.133,0.122-0.172,0.215
+		c-0.039,0.094-0.059,0.188-0.059,0.28H148.544z"/>
+	<path fill="#FFFFFF" d="M151.81,90.336c-0.232,0.241-0.527,0.362-0.883,0.362c-0.32,0-0.586-0.093-0.795-0.277
+		c-0.268-0.235-0.4-0.6-0.4-1.093c0-0.492,0.131-0.854,0.396-1.087c0.207-0.185,0.475-0.277,0.799-0.277
+		c0.359,0,0.654,0.119,0.883,0.356l-0.451,0.454c-0.068-0.076-0.137-0.131-0.203-0.164s-0.143-0.05-0.229-0.05
+		c-0.156,0-0.285,0.061-0.381,0.181c-0.098,0.12-0.146,0.316-0.146,0.587c0,0.275,0.049,0.473,0.146,0.593
+		c0.096,0.12,0.225,0.181,0.381,0.181c0.158,0,0.303-0.071,0.432-0.214L151.81,90.336z"/>
+	<path fill="#FFFFFF" d="M154.579,90.681h-0.668v-1.645c0-0.165-0.047-0.289-0.139-0.372c-0.078-0.069-0.178-0.104-0.297-0.104
+		s-0.215,0.034-0.291,0.104c-0.092,0.083-0.139,0.207-0.139,0.372v1.645h-0.668v-3.67h0.668v1.234
+		c0.182-0.188,0.395-0.281,0.641-0.281c0.287,0,0.508,0.09,0.662,0.268c0.152,0.18,0.23,0.417,0.23,0.712V90.681z"/>
+	<path fill="#FFFFFF" d="M157.567,90.681h-0.668v-1.629c0-0.169-0.047-0.296-0.139-0.383c-0.078-0.072-0.178-0.108-0.301-0.108
+		c-0.125,0-0.225,0.034-0.301,0.104c-0.096,0.086-0.143,0.216-0.143,0.388v1.629h-0.668v-2.682h0.65v0.246
+		c0.174-0.188,0.396-0.281,0.666-0.281c0.129,0,0.248,0.021,0.355,0.062s0.199,0.1,0.273,0.176c0.1,0.1,0.17,0.212,0.211,0.338
+		c0.041,0.125,0.063,0.267,0.063,0.425V90.681z"/>
+	<path fill="#FFFFFF" d="M160.485,89.328c0,0.268-0.02,0.476-0.061,0.626s-0.121,0.289-0.242,0.416
+		c-0.092,0.1-0.207,0.179-0.342,0.238c-0.139,0.06-0.301,0.09-0.488,0.09c-0.184,0-0.346-0.03-0.482-0.09s-0.252-0.139-0.344-0.238
+		c-0.115-0.12-0.195-0.259-0.238-0.418c-0.043-0.16-0.064-0.367-0.064-0.624c0-0.263,0.021-0.47,0.061-0.62
+		c0.043-0.15,0.123-0.289,0.242-0.416c0.092-0.099,0.201-0.176,0.322-0.23c0.148-0.064,0.316-0.098,0.504-0.098
+		c0.184,0,0.352,0.033,0.502,0.098c0.127,0.055,0.236,0.132,0.328,0.23c0.117,0.12,0.197,0.259,0.24,0.418
+		S160.485,89.075,160.485,89.328z M159.817,89.328c0-0.175-0.008-0.31-0.025-0.404s-0.059-0.176-0.127-0.245
+		c-0.078-0.078-0.184-0.118-0.313-0.118c-0.127,0-0.229,0.04-0.307,0.118c-0.063,0.063-0.104,0.146-0.123,0.25
+		c-0.021,0.105-0.031,0.238-0.031,0.399c0,0.217,0.012,0.366,0.035,0.449c0.025,0.082,0.064,0.151,0.119,0.205
+		c0.078,0.079,0.18,0.119,0.307,0.119c0.129,0,0.234-0.04,0.313-0.119c0.061-0.062,0.102-0.145,0.123-0.249
+		C159.808,89.628,159.817,89.493,159.817,89.328z"/>
+	<path fill="#FFFFFF" d="M162.312,90.681h-0.381c-0.258,0-0.455-0.079-0.596-0.237c-0.123-0.141-0.186-0.318-0.186-0.53v-2.902
+		h0.668v2.866c0,0.161,0.078,0.242,0.236,0.242h0.258V90.681z"/>
+	<path fill="#FFFFFF" d="M167.573,90.571c0,0.324-0.107,0.59-0.32,0.797c-0.213,0.206-0.498,0.31-0.852,0.31
+		c-0.215,0-0.396-0.025-0.543-0.074c-0.148-0.049-0.289-0.14-0.426-0.272l0.416-0.419c0.139,0.136,0.313,0.205,0.52,0.205
+		c0.184,0,0.324-0.059,0.42-0.175c0.078-0.097,0.117-0.224,0.117-0.381v-0.273c-0.086,0.097-0.178,0.165-0.279,0.206
+		c-0.1,0.041-0.219,0.062-0.355,0.062c-0.266,0-0.477-0.078-0.635-0.236c-0.115-0.116-0.189-0.252-0.223-0.408
+		c-0.033-0.155-0.049-0.374-0.049-0.654c0-0.273,0.016-0.488,0.049-0.646c0.031-0.157,0.105-0.294,0.223-0.41
+		c0.156-0.158,0.369-0.236,0.639-0.236c0.143,0,0.264,0.021,0.363,0.065c0.098,0.043,0.193,0.116,0.285,0.22v-0.25h0.65V90.571z
+		 M166.905,89.262c0-0.215-0.023-0.374-0.07-0.477c-0.07-0.144-0.191-0.216-0.369-0.216c-0.176,0-0.297,0.07-0.361,0.21
+		c-0.049,0.104-0.072,0.264-0.072,0.482c0,0.283,0.039,0.474,0.117,0.569c0.068,0.085,0.174,0.128,0.316,0.128
+		c0.178,0,0.299-0.072,0.369-0.216C166.882,89.641,166.905,89.48,166.905,89.262z"/>
+	<path fill="#FFFFFF" d="M170.519,87.99l-1.145,3.111c-0.031,0.081-0.061,0.148-0.09,0.2c-0.029,0.051-0.066,0.1-0.109,0.144
+		c-0.072,0.072-0.156,0.125-0.254,0.157s-0.205,0.049-0.32,0.049h-0.262v-0.597h0.152c0.096,0,0.168-0.017,0.213-0.049
+		c0.047-0.033,0.088-0.098,0.121-0.193l0.113-0.33l-0.914-2.492h0.703l0.555,1.657l0.533-1.657H170.519z"/>
+	<path fill="#FFFFFF" d="M164.907,89.333c0,0.268-0.02,0.476-0.061,0.626s-0.121,0.289-0.242,0.416
+		c-0.092,0.1-0.207,0.179-0.342,0.238c-0.139,0.06-0.301,0.09-0.488,0.09c-0.184,0-0.346-0.03-0.482-0.09s-0.252-0.139-0.344-0.238
+		c-0.115-0.12-0.195-0.259-0.238-0.418c-0.043-0.16-0.064-0.367-0.064-0.624c0-0.263,0.021-0.47,0.061-0.62
+		c0.043-0.15,0.123-0.289,0.242-0.416c0.092-0.099,0.201-0.176,0.322-0.23c0.148-0.064,0.316-0.098,0.504-0.098
+		c0.184,0,0.352,0.033,0.502,0.098c0.127,0.055,0.236,0.132,0.328,0.23c0.117,0.12,0.197,0.259,0.24,0.418
+		S164.907,89.08,164.907,89.333z M164.239,89.333c0-0.175-0.008-0.31-0.025-0.404s-0.059-0.176-0.127-0.245
+		c-0.078-0.078-0.184-0.118-0.313-0.118c-0.127,0-0.229,0.04-0.307,0.118c-0.063,0.063-0.104,0.146-0.123,0.25
+		c-0.021,0.105-0.031,0.238-0.031,0.399c0,0.217,0.012,0.366,0.035,0.449c0.025,0.082,0.064,0.151,0.119,0.205
+		c0.078,0.079,0.18,0.119,0.307,0.119c0.129,0,0.234-0.04,0.313-0.119c0.061-0.062,0.102-0.145,0.123-0.249
+		C164.229,89.633,164.239,89.498,164.239,89.333z"/>
+</g>
+</svg>

src/assets/images/mi_logo.svg

@@ -0,0 +1,218 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="360px" height="396px" viewBox="0 0 360 396" enable-background="new 0 0 360 396" xml:space="preserve">
+<g>
+	<path fill="#003964" d="M229.294,102.004c-16.579-11.262-37.798-6.669-48.931,10.271c-9.31,14.146-23.354,15.904-28.799,15.904
+		c-17.722,0-29.855-12.468-33.449-25.372h-0.008c-0.034-0.127-0.063-0.233-0.097-0.359c-0.033-0.143-0.079-0.288-0.114-0.44
+		c-1.416-5.381-1.766-7.955-1.766-13.676c0-30.857,31.662-65.209,77.255-65.209c46.693,0,73.412,35.546,80.295,55.3
+		c-0.124-0.346-0.23-0.692-0.353-1.051c-13.246-38.637-49.89-66.418-93.022-66.418c-54.294,0-98.319,44.016-98.319,98.317
+		c0,48.534,35.013,90.083,83.57,90.083c38.726,0,64.755-21.716,76.695-51.639C248.809,131.349,244.163,112.111,229.294,102.004"/>
+	<path fill="#ED193A" d="M274.292,80.338c-5.742-19.27-32.661-57.214-80.906-57.214c-45.593,0-77.255,34.351-77.255,65.208
+		c0,5.722,0.35,8.296,1.766,13.677c-0.596-2.351-0.905-4.713-0.905-7.013c0-32.133,32.173-54.402,65.252-54.402
+		c44.773,0,81.063,36.298,81.063,81.061c0,35.099-20.19,65.472-49.542,80.068l0.01,0.023c37.831-13.699,64.842-49.927,64.842-92.475
+		C278.616,99.201,277.265,90.323,274.292,80.338"/>
+	<path fill="#58595B" d="M84.246,287.663v19.702h-7.033v-13.559H40.029v-6.144h18.937v-8.3H36.48v-6.144h51.947v6.144H65.935v8.3
+		H84.246z M84.246,251.87v16.851h-7.033V258.08H40.659v-6.21H84.246z"/>
+	<polygon fill="#58595B" points="143.476,286.65 125.103,286.65 125.103,296.911 147.594,296.911 147.594,303.058 95.647,303.058 
+		95.647,296.911 118.074,296.911 118.074,286.65 99.831,286.65 99.831,253.581 143.349,253.581 143.349,259.726 106.73,259.726 
+		106.73,267.074 143.349,267.074 143.349,273.093 106.73,273.093 106.73,280.505 143.476,280.505 	"/>
+	<path fill="#58595B" d="M167.165,296.911v-17.548h6.654v17.548h9.438v-17.548h6.713v17.548h16.788v6.146h-51.943v-6.146H167.165z
+		 M195.547,286.966v-27.115h-36.555v-6.269h43.59v33.384H195.547z"/>
+	<path fill="#58595B" d="M265.279,283.039h-51.948v-5.766h22.493v-3.673h-18.309v-22.237h43.519v5.764h-36.677v2.788h36.677v5.26
+		h-36.677v2.85h36.805v5.576h-18.437v3.673h22.554V283.039z M253.183,296.911c0,1.774-0.373,3.442-1.111,5.005
+		c-0.74,1.562-1.723,2.914-2.948,4.056c-1.267,1.182-2.726,2.121-4.367,2.82c-1.649,0.693-3.42,1.043-5.321,1.043
+		s-3.687-0.35-5.35-1.043c-1.671-0.699-3.142-1.639-4.408-2.82c-1.223-1.142-2.206-2.494-2.941-4.056
+		c-0.74-1.563-1.114-3.23-1.114-5.005s0.374-3.432,1.114-4.974c0.735-1.542,1.719-2.881,2.941-4.022
+		c1.267-1.182,2.737-2.121,4.408-2.818c1.663-0.695,3.448-1.044,5.35-1.044s3.672,0.349,5.321,1.044
+		c1.642,0.697,3.101,1.637,4.367,2.818c1.226,1.142,2.208,2.48,2.948,4.022C252.81,293.479,253.183,295.137,253.183,296.911
+		 M246.397,296.849c0-1.902-0.673-3.538-2.022-4.911c-1.35-1.371-2.999-2.059-4.94-2.059c-1.944,0-3.604,0.688-4.97,2.059
+		c-1.378,1.373-2.065,3.009-2.065,4.911c0,1.901,0.688,3.526,2.065,4.88c1.366,1.348,3.025,2.026,4.97,2.026
+		c1.941,0,3.591-0.679,4.94-2.026C245.725,300.375,246.397,298.75,246.397,296.849"/>
+	<path fill="#58595B" d="M272.182,286.421h51.945v6.208h-22.49V307.2h-7.032v-14.571h-22.423V286.421z M283.265,258.803h29.71
+		v-7.162h6.973v27.178H276.36v-27.178h6.904V258.803z M312.975,264.881h-29.71v7.795h29.71V264.881z"/>
+</g>
+<polygon fill="#58595B" points="94.755,328.068 94.755,346.673 91.766,346.673 91.766,331.698 86.909,346.673 84.024,346.673 
+	79.167,331.698 79.167,346.673 76.178,346.673 76.178,328.068 80.769,328.068 85.466,342.563 90.164,328.068 "/>
+<path fill="#58595B" d="M101.904,329.536c0,0.516-0.19,0.966-0.573,1.348c-0.383,0.383-0.84,0.575-1.374,0.575
+	c-0.535,0-0.992-0.192-1.375-0.575c-0.383-0.382-0.573-0.832-0.573-1.348c0-0.533,0.19-0.991,0.573-1.374
+	c0.383-0.383,0.84-0.574,1.375-0.574c0.533,0,0.99,0.191,1.374,0.574C101.713,328.545,101.904,329.003,101.904,329.536
+	 M98.463,333.3h3.041v13.373h-3.041V333.3z"/>
+<path fill="#58595B" d="M108.225,339.946v6.728h-3.016V333.3h2.911v1.788c0.354-0.622,0.871-1.129,1.547-1.521
+	s1.407-0.588,2.189-0.588c1.583,0,2.851,0.539,3.803,1.614c0.952,1.078,1.428,2.515,1.428,4.313v7.768h-3.042v-6.994
+	c0-1.423-0.233-2.478-0.695-3.163c-0.464-0.685-1.176-1.027-2.135-1.027c-0.5,0-0.985,0.164-1.457,0.493
+	c-0.471,0.33-0.831,0.778-1.08,1.35C108.377,337.989,108.225,338.861,108.225,339.946"/>
+<path fill="#58595B" d="M124.129,329.536c0,0.516-0.19,0.966-0.573,1.348c-0.383,0.383-0.84,0.575-1.374,0.575
+	c-0.535,0-0.992-0.192-1.375-0.575c-0.383-0.382-0.573-0.832-0.573-1.348c0-0.533,0.19-0.991,0.573-1.374s0.84-0.574,1.375-0.574
+	c0.533,0,0.99,0.191,1.374,0.574C123.939,328.545,124.129,329.003,124.129,329.536 M120.688,333.3h3.041v13.373h-3.041V333.3z"/>
+<path fill="#58595B" d="M126.207,344.19l1.895-1.947c0.535,0.729,1.121,1.298,1.764,1.707c0.621,0.374,1.29,0.561,2.001,0.561
+	c0.676,0,1.25-0.137,1.721-0.413c0.471-0.275,0.709-0.645,0.709-1.107s-0.229-0.823-0.681-1.082
+	c-0.455-0.257-0.993-0.502-1.616-0.733c-0.73-0.231-1.478-0.489-2.242-0.773c-1.033-0.374-1.79-0.854-2.271-1.442
+	c-0.48-0.587-0.721-1.255-0.721-2.002c0-1.103,0.516-2.042,1.549-2.816c1.033-0.773,2.251-1.161,3.658-1.161
+	c1.495,0,2.713,0.356,3.655,1.068c0.481,0.374,0.864,0.837,1.149,1.388l-1.868,1.815c-0.25-0.427-0.545-0.774-0.883-1.041
+	c-0.585-0.517-1.326-0.774-2.216-0.774c-0.516,0-0.964,0.13-1.347,0.387c-0.383,0.258-0.574,0.565-0.574,0.921
+	c0,0.392,0.214,0.721,0.64,0.987c0.426,0.268,1.059,0.526,1.895,0.774c0.302,0.09,0.649,0.197,1.042,0.32
+	c1.299,0.428,2.282,0.979,2.949,1.655c0.668,0.678,1.001,1.486,1.001,2.429c0,1.104-0.533,2.06-1.602,2.87
+	c-1.068,0.81-2.43,1.215-4.083,1.215c-1.388,0-2.616-0.321-3.684-0.961C127.337,345.605,126.724,344.991,126.207,344.19"/>
+<path fill="#58595B" d="M143.713,329.003v4.297h2.911v2.456h-2.911v6.808c0,0.64,0.155,1.08,0.466,1.32
+	c0.312,0.24,0.752,0.36,1.323,0.36h1.121v2.429h-1.842c-1.442,0-2.492-0.32-3.151-0.96c-0.659-0.642-0.987-1.592-0.987-2.855v-7.102
+	h-2.297V333.3h2.297v-4.297H143.713z"/>
+<path fill="#58595B" d="M149.154,346.673V333.3h2.856v2.002c0.445-0.658,0.987-1.165,1.627-1.521
+	c0.767-0.462,1.664-0.693,2.697-0.693h0.214v2.722h-0.321c-1.264,0-2.268,0.384-3.015,1.148c-0.695,0.747-1.042,1.914-1.042,3.497
+	v6.219H149.154z"/>
+<polygon fill="#58595B" points="162.95,346.166 157.69,333.3 160.841,333.3 164.471,342.43 168.076,333.3 171.198,333.3 
+	163.752,351.852 160.653,351.852 "/>
+<path fill="#58595B" d="M186.003,346.994c-1.958,0-3.627-0.672-5.005-2.016c-1.38-1.344-2.07-3.003-2.07-4.979
+	s0.69-3.639,2.07-4.992c1.378-1.352,3.046-2.028,5.005-2.028c1.975,0,3.649,0.677,5.017,2.028c1.37,1.354,2.056,3.017,2.056,4.992
+	s-0.686,3.635-2.056,4.979C189.652,346.322,187.979,346.994,186.003,346.994 M186.003,344.484c1.102,0,2.049-0.422,2.841-1.269
+	c0.793-0.845,1.188-1.916,1.188-3.216c0-1.281-0.395-2.353-1.188-3.217c-0.792-0.862-1.739-1.294-2.841-1.294
+	c-1.085,0-2.025,0.432-2.818,1.294c-0.79,0.864-1.188,1.936-1.188,3.217c0,1.3,0.397,2.371,1.188,3.216
+	C183.979,344.063,184.918,344.484,186.003,344.484"/>
+<path fill="#58595B" d="M196.355,331.886c0-1.246,0.351-2.194,1.055-2.844c0.702-0.648,1.775-0.974,3.215-0.974h1.469v2.429h-0.881
+	c-0.568,0-1.009,0.12-1.32,0.36s-0.467,0.681-0.467,1.321v1.121h2.668v2.456h-2.668v10.917h-3.07v-10.917h-2.296V333.3h2.296
+	V331.886z"/>
+<polygon fill="#58595B" points="223.731,346.673 212.653,346.673 212.653,328.068 215.778,328.068 215.778,344.059 223.731,344.059 
+	"/>
+<path fill="#58595B" d="M231.735,338.052h3.151c0-0.872-0.338-1.526-1.014-1.962c-0.679-0.437-1.656-0.654-2.938-0.654h-0.08
+	c-1.212,0-2.492,0.285-3.844,0.855l-0.773-2.378c1.404-0.604,2.953-0.916,4.643-0.934h0.055c2.242,0,3.963,0.432,5.165,1.295
+	c1.201,0.863,1.801,2.238,1.801,4.124v8.274h-2.882v-1.467c-0.571,0.568-1.269,1.009-2.097,1.32
+	c-0.825,0.313-1.668,0.468-2.522,0.468c-1.602,0-2.896-0.424-3.884-1.269c-0.988-0.845-1.48-1.881-1.48-3.109
+	c0-1.37,0.613-2.5,1.842-3.39C228.016,338.443,229.637,338.052,231.735,338.052 M230.907,344.592c0.783,0,1.559-0.191,2.323-0.574
+	c0.766-0.383,1.318-0.821,1.656-1.321v-2.27h-2.696c-1.53,0-2.599,0.196-3.203,0.588c-0.588,0.445-0.881,0.979-0.881,1.602
+	c0,0.569,0.247,1.042,0.747,1.415C229.351,344.405,230.036,344.592,230.907,344.592"/>
+<path fill="#58595B" d="M244.437,339.946v6.728h-3.018V333.3h2.911v1.788c0.356-0.622,0.871-1.129,1.549-1.521
+	c0.676-0.392,1.404-0.588,2.188-0.588c1.585,0,2.854,0.539,3.806,1.614c0.951,1.078,1.428,2.515,1.428,4.313v7.768h-3.044v-6.994
+	c0-1.423-0.231-2.478-0.695-3.163c-0.462-0.685-1.173-1.027-2.135-1.027c-0.497,0-0.982,0.164-1.454,0.493
+	c-0.471,0.33-0.833,0.778-1.08,1.35C244.587,337.989,244.437,338.861,244.437,339.946"/>
+<path fill="#58595B" d="M262.45,332.979c1.585,0,2.946,0.642,4.084,1.922v-6.833h3.044v18.604h-2.938v-1.68
+	c-1.12,1.334-2.518,2.001-4.19,2.001c-1.959,0-3.541-0.694-4.753-2.082c-1.209-1.389-1.813-3.025-1.813-4.912
+	c0-1.886,0.604-3.527,1.813-4.925C258.909,333.678,260.491,332.979,262.45,332.979 M266.508,340.854
+	c0.053-0.587,0.053-1.157,0-1.709c-0.107-1.014-0.48-1.858-1.121-2.536c-0.712-0.747-1.592-1.12-2.644-1.12
+	c-1.174,0-2.1,0.432-2.775,1.294c-0.676,0.864-1.014,1.936-1.014,3.217c0,1.3,0.338,2.371,1.014,3.216
+	c0.676,0.847,1.602,1.268,2.775,1.268c1.052,0,1.932-0.372,2.644-1.119C266.027,342.688,266.4,341.852,266.508,340.854"/>
+<path fill="#58595B" d="M275.044,347.849h-0.133c-0.533,0-0.997-0.188-1.388-0.562c-0.393-0.374-0.585-0.827-0.585-1.361
+	c0-0.551,0.192-1.014,0.585-1.388c0.391-0.373,0.854-0.561,1.388-0.561c0.552,0,1.014,0.178,1.388,0.533
+	c0.447,0.428,0.668,1.023,0.668,1.789c0,1.299-0.321,2.376-0.961,3.23c-0.624,0.801-1.335,1.361-2.137,1.682l-0.8-0.881
+	c0.728-0.463,1.271-0.997,1.628-1.602C274.856,348.462,274.973,348.169,275.044,347.849"/>
+<g>
+	<rect x="6.214" y="360.68" fill="#58595B" width="3.123" height="18.604"/>
+	<path fill="#58595B" d="M16.085,372.558v6.728h-3.018v-13.374h2.911v1.788c0.357-0.622,0.871-1.129,1.549-1.521
+		c0.676-0.392,1.404-0.588,2.187-0.588c1.585,0,2.854,0.539,3.805,1.614c0.952,1.078,1.428,2.515,1.428,4.313v7.768h-3.044v-6.994
+		c0-1.423-0.231-2.478-0.695-3.163c-0.462-0.686-1.173-1.027-2.135-1.027c-0.498,0-0.983,0.164-1.454,0.493
+		c-0.471,0.33-0.833,0.778-1.081,1.35C16.235,370.601,16.085,371.473,16.085,372.558"/>
+	<path fill="#58595B" d="M28.973,364.497c0-1.246,0.352-2.194,1.054-2.844c0.702-0.648,1.775-0.974,3.217-0.974h1.469v2.429h-0.881
+		c-0.571,0-1.011,0.12-1.323,0.36c-0.312,0.24-0.466,0.681-0.466,1.321v1.121h2.67v2.455h-2.67v10.918h-3.07v-10.918h-2.297v-2.455
+		h2.297V364.497z"/>
+	<path fill="#58595B" d="M37.19,379.284v-13.373h2.856v2.002c0.445-0.658,0.988-1.165,1.628-1.521
+		c0.766-0.462,1.664-0.694,2.697-0.694h0.214v2.723h-0.321c-1.264,0-2.269,0.384-3.016,1.148c-0.695,0.747-1.042,1.913-1.042,3.497
+		v6.219H37.19z"/>
+	<path fill="#58595B" d="M52.348,370.663h3.148c0-0.872-0.338-1.526-1.014-1.962c-0.676-0.437-1.654-0.654-2.937-0.654h-0.078
+		c-1.211,0-2.492,0.285-3.846,0.855l-0.773-2.378c1.407-0.604,2.954-0.916,4.646-0.934h0.052c2.242,0,3.965,0.432,5.167,1.294
+		c1.199,0.864,1.801,2.238,1.801,4.125v8.274H55.63v-1.467c-0.569,0.568-1.266,1.009-2.094,1.32
+		c-0.828,0.313-1.668,0.468-2.522,0.468c-1.602,0-2.896-0.424-3.884-1.269c-0.987-0.845-1.482-1.881-1.482-3.109
+		c0-1.37,0.614-2.5,1.842-3.39C48.628,371.055,50.247,370.663,52.348,370.663 M51.52,377.203c0.783,0,1.556-0.191,2.323-0.575
+		c0.764-0.382,1.316-0.82,1.654-1.32v-2.27H52.8c-1.53,0-2.596,0.196-3.203,0.588c-0.585,0.445-0.881,0.979-0.881,1.602
+		c0,0.569,0.25,1.041,0.748,1.415C49.963,377.017,50.649,377.203,51.52,377.203"/>
+	<path fill="#58595B" d="M60.804,376.802l1.895-1.947c0.535,0.729,1.121,1.298,1.763,1.707c0.621,0.374,1.292,0.561,2.004,0.561
+		c0.674,0,1.247-0.137,1.718-0.413c0.471-0.275,0.709-0.645,0.709-1.107s-0.229-0.823-0.681-1.082
+		c-0.455-0.257-0.993-0.502-1.616-0.733c-0.73-0.231-1.478-0.489-2.242-0.774c-1.033-0.373-1.79-0.854-2.271-1.441
+		c-0.48-0.587-0.721-1.255-0.721-2.002c0-1.103,0.517-2.042,1.549-2.816c1.033-0.773,2.251-1.161,3.658-1.161
+		c1.495,0,2.713,0.356,3.655,1.068c0.481,0.374,0.864,0.837,1.149,1.388l-1.868,1.815c-0.25-0.427-0.545-0.774-0.883-1.041
+		c-0.585-0.517-1.326-0.774-2.216-0.774c-0.516,0-0.964,0.13-1.347,0.387c-0.383,0.258-0.574,0.565-0.574,0.921
+		c0,0.392,0.214,0.721,0.64,0.987c0.426,0.268,1.059,0.526,1.897,0.774c0.3,0.09,0.647,0.196,1.04,0.32
+		c1.299,0.428,2.282,0.979,2.948,1.655c0.669,0.677,1.002,1.486,1.002,2.429c0,1.104-0.533,2.06-1.602,2.87
+		c-1.068,0.81-2.43,1.215-4.084,1.215c-1.387,0-2.615-0.321-3.684-0.961C61.934,378.217,61.32,377.603,60.804,376.802"/>
+	<path fill="#58595B" d="M78.31,361.614v4.297h2.911v2.455H78.31v6.808c0,0.641,0.155,1.081,0.466,1.321
+		c0.312,0.24,0.752,0.36,1.323,0.36h1.121v2.429h-1.842c-1.442,0-2.492-0.32-3.151-0.96c-0.659-0.642-0.987-1.593-0.987-2.856
+		v-7.102h-2.297v-2.455h2.297v-4.297H78.31z"/>
+	<path fill="#58595B" d="M83.75,379.284v-13.373h2.856v2.002c0.445-0.658,0.987-1.165,1.627-1.521
+		c0.767-0.462,1.664-0.694,2.697-0.694h0.214v2.723h-0.321c-1.264,0-2.268,0.384-3.015,1.148c-0.695,0.747-1.042,1.913-1.042,3.497
+		v6.219H83.75z"/>
+	<path fill="#58595B" d="M102.111,372.639v-6.727h3.042v13.372h-2.908v-1.761c-0.374,0.658-0.873,1.156-1.494,1.494
+		c-0.731,0.392-1.488,0.588-2.271,0.588c-1.566,0-2.825-0.534-3.777-1.602c-0.952-1.068-1.428-2.51-1.428-4.324v-7.768h3.016v7.02
+		c0,1.406,0.235,2.452,0.709,3.137c0.471,0.685,1.188,1.027,2.149,1.027c0.479,0,0.959-0.164,1.44-0.493
+		c0.481-0.33,0.845-0.771,1.095-1.322C101.968,374.622,102.111,373.741,102.111,372.639"/>
+	<path fill="#58595B" d="M107.737,372.611c0-1.922,0.726-3.572,2.175-4.951c1.452-1.38,3.289-2.069,5.514-2.069
+		c1.742,0,3.379,0.561,4.912,1.683l-0.988,2.375c-1.335-1.032-2.644-1.548-3.924-1.548c-1.371,0-2.482,0.437-3.336,1.308
+		c-0.854,0.872-1.283,1.939-1.283,3.203s0.428,2.327,1.283,3.19s1.966,1.294,3.336,1.294c1.297,0,2.625-0.507,3.977-1.521
+		l0.987,2.376c-1.478,1.104-3.132,1.655-4.964,1.655c-2.225,0-4.063-0.686-5.514-2.056
+		C108.463,376.18,107.737,374.533,107.737,372.611"/>
+	<path fill="#58595B" d="M127.007,361.614v4.297h2.908v2.455h-2.908v6.808c0,0.641,0.155,1.081,0.466,1.321
+		c0.312,0.24,0.752,0.36,1.321,0.36h1.121v2.429h-1.842c-1.442,0-2.492-0.32-3.148-0.96c-0.659-0.642-0.988-1.593-0.988-2.856
+		v-7.102h-2.296v-2.455h2.296v-4.297H127.007z"/>
+	<path fill="#58595B" d="M141.281,372.639v-6.727h3.044v13.372h-2.911v-1.761c-0.374,0.658-0.871,1.156-1.495,1.494
+		c-0.73,0.392-1.485,0.588-2.268,0.588c-1.566,0-2.827-0.534-3.779-1.602c-0.952-1.068-1.428-2.51-1.428-4.324v-7.768h3.018v7.02
+		c0,1.406,0.236,2.452,0.707,3.137s1.188,1.027,2.149,1.027c0.48,0,0.961-0.164,1.442-0.493c0.481-0.33,0.845-0.771,1.095-1.322
+		C141.138,374.622,141.281,373.741,141.281,372.639"/>
+	<path fill="#58595B" d="M147.842,379.284v-13.373h2.858v2.002c0.443-0.658,0.988-1.165,1.628-1.521
+		c0.764-0.462,1.664-0.694,2.696-0.694h0.212v2.723h-0.319c-1.264,0-2.271,0.384-3.018,1.148c-0.692,0.747-1.04,1.913-1.04,3.497
+		v6.219H147.842z"/>
+	<path fill="#58595B" d="M159.344,373.946c0.176,0.82,0.56,1.486,1.147,2.002c0.854,0.783,1.985,1.174,3.389,1.174
+		c1.478,0,2.858-0.543,4.139-1.628l0.907,2.242c-1.44,1.246-3.148,1.869-5.124,1.869c-2.261,0-4.098-0.642-5.512-1.923
+		c-1.416-1.28-2.123-2.963-2.123-5.044c0-2.047,0.626-3.733,1.883-5.059c1.254-1.325,2.896-1.989,4.924-1.989
+		c1.992,0,3.627,0.659,4.898,1.975c1.273,1.317,1.909,2.946,1.909,4.887c0,0.532-0.043,1.031-0.133,1.494H159.344z M159.29,371.544
+		h7.42c-0.036-0.872-0.4-1.668-1.095-2.39c-0.692-0.721-1.573-1.08-2.642-1.08c-1.104,0-2.011,0.392-2.723,1.174
+		C159.734,369.835,159.414,370.601,159.29,371.544"/>
+</g>
+<path fill="#58595B" d="M188.101,370.805h3.15c0-0.872-0.338-1.526-1.014-1.962c-0.679-0.437-1.656-0.654-2.937-0.654h-0.081
+	c-1.211,0-2.492,0.285-3.844,0.855l-0.773-2.378c1.404-0.604,2.954-0.916,4.644-0.934h0.055c2.241,0,3.962,0.432,5.164,1.294
+	c1.202,0.864,1.802,2.238,1.802,4.125v8.274h-2.882v-1.467c-0.571,0.568-1.269,1.009-2.097,1.32
+	c-0.826,0.312-1.669,0.468-2.523,0.468c-1.601,0-2.896-0.424-3.883-1.269c-0.988-0.845-1.48-1.881-1.48-3.109
+	c0-1.37,0.614-2.5,1.842-3.39C184.38,371.196,186.001,370.805,188.101,370.805 M187.272,377.345c0.782,0,1.559-0.191,2.322-0.575
+	c0.767-0.382,1.318-0.82,1.656-1.32v-2.27h-2.696c-1.53,0-2.599,0.196-3.203,0.588c-0.588,0.445-0.881,0.979-0.881,1.602
+	c0,0.569,0.248,1.042,0.748,1.415C185.716,377.158,186.401,377.345,187.272,377.345"/>
+<path fill="#58595B" d="M200.802,372.699v6.728h-3.018v-13.374h2.91v1.788c0.357-0.622,0.871-1.129,1.55-1.521
+	c0.676-0.392,1.403-0.588,2.187-0.588c1.585,0,2.854,0.539,3.806,1.614c0.952,1.078,1.428,2.515,1.428,4.313v7.768h-3.044v-6.994
+	c0-1.423-0.23-2.478-0.694-3.163c-0.462-0.686-1.174-1.027-2.135-1.027c-0.498,0-0.983,0.164-1.454,0.493
+	c-0.472,0.33-0.833,0.778-1.081,1.35C200.951,370.742,200.802,371.614,200.802,372.699"/>
+<path fill="#58595B" d="M218.814,365.732c1.585,0,2.946,0.642,4.084,1.922v-6.833h3.045v18.604h-2.938v-1.68
+	c-1.121,1.334-2.519,2.001-4.191,2.001c-1.958,0-3.541-0.694-4.75-2.082c-1.211-1.389-1.815-3.025-1.815-4.912
+	c0-1.886,0.604-3.527,1.815-4.925C215.273,366.431,216.856,365.732,218.814,365.732 M222.872,373.607
+	c0.053-0.587,0.053-1.157,0-1.709c-0.106-1.014-0.48-1.858-1.12-2.536c-0.712-0.747-1.593-1.12-2.645-1.12
+	c-1.173,0-2.099,0.432-2.775,1.294c-0.676,0.864-1.014,1.936-1.014,3.217c0,1.299,0.338,2.371,1.014,3.216
+	c0.677,0.847,1.603,1.269,2.775,1.269c1.052,0,1.933-0.373,2.645-1.12C222.392,375.44,222.766,374.604,222.872,373.607"/>
+<polygon fill="#58595B" points="244.352,363.437 244.352,379.426 241.229,379.426 241.229,363.437 235.543,363.437 235.543,360.821 
+	250.037,360.821 250.037,363.437 "/>
+<path fill="#58595B" d="M250.646,379.426v-13.373h2.856v2.002c0.445-0.658,0.987-1.165,1.628-1.521
+	c0.766-0.462,1.663-0.694,2.696-0.694h0.214v2.723h-0.321c-1.264,0-2.268,0.384-3.015,1.148c-0.695,0.747-1.043,1.914-1.043,3.497
+	v6.219H250.646z"/>
+<path fill="#58595B" d="M265.804,370.805h3.148c0-0.872-0.338-1.526-1.014-1.962c-0.677-0.437-1.654-0.654-2.938-0.654h-0.078
+	c-1.212,0-2.492,0.285-3.846,0.855l-0.773-2.378c1.406-0.604,2.953-0.916,4.647-0.934h0.05c2.242,0,3.965,0.432,5.167,1.294
+	c1.199,0.864,1.802,2.238,1.802,4.125v8.274h-2.885v-1.467c-0.568,0.568-1.266,1.009-2.094,1.32s-1.669,0.468-2.523,0.468
+	c-1.602,0-2.896-0.424-3.884-1.269c-0.987-0.845-1.482-1.881-1.482-3.109c0-1.37,0.614-2.5,1.842-3.39
+	C262.084,371.196,263.702,370.805,265.804,370.805 M264.976,377.345c0.782,0,1.556-0.191,2.322-0.575
+	c0.764-0.382,1.316-0.82,1.654-1.32v-2.27h-2.696c-1.53,0-2.597,0.196-3.204,0.588c-0.585,0.445-0.88,0.979-0.88,1.602
+	c0,0.569,0.25,1.042,0.747,1.415C263.419,377.158,264.104,377.345,264.976,377.345"/>
+<path fill="#58595B" d="M278.505,372.699v6.728h-3.018v-13.374h2.91v1.788c0.357-0.622,0.871-1.129,1.55-1.521
+	c0.676-0.392,1.403-0.588,2.187-0.588c1.585,0,2.854,0.539,3.806,1.614c0.952,1.078,1.428,2.515,1.428,4.313v7.768h-3.044v-6.994
+	c0-1.423-0.23-2.478-0.694-3.163c-0.462-0.686-1.174-1.027-2.135-1.027c-0.498,0-0.983,0.164-1.454,0.493
+	c-0.472,0.33-0.833,0.778-1.081,1.35C278.654,370.742,278.505,371.614,278.505,372.699"/>
+<path fill="#58595B" d="M289.656,376.943l1.895-1.947c0.536,0.729,1.121,1.298,1.764,1.707c0.621,0.374,1.292,0.561,2.004,0.561
+	c0.674,0,1.247-0.137,1.719-0.413c0.471-0.275,0.709-0.644,0.709-1.107c0-0.463-0.229-0.823-0.681-1.082
+	c-0.455-0.257-0.993-0.502-1.616-0.734c-0.73-0.23-1.478-0.488-2.242-0.773c-1.032-0.373-1.789-0.854-2.27-1.441
+	c-0.481-0.587-0.722-1.255-0.722-2.002c0-1.103,0.517-2.042,1.55-2.816c1.032-0.773,2.251-1.161,3.657-1.161
+	c1.495,0,2.713,0.356,3.655,1.068c0.481,0.374,0.864,0.837,1.15,1.388l-1.869,1.815c-0.249-0.427-0.545-0.774-0.883-1.041
+	c-0.585-0.517-1.325-0.774-2.215-0.774c-0.517,0-0.964,0.13-1.348,0.387c-0.383,0.258-0.573,0.565-0.573,0.921
+	c0,0.392,0.214,0.721,0.64,0.987c0.427,0.268,1.06,0.526,1.897,0.774c0.3,0.09,0.647,0.196,1.04,0.32
+	c1.299,0.428,2.282,0.979,2.948,1.655c0.669,0.677,1.002,1.486,1.002,2.429c0,1.104-0.533,2.06-1.602,2.87
+	c-1.068,0.81-2.43,1.215-4.084,1.215c-1.388,0-2.615-0.321-3.684-0.961C290.787,378.358,290.173,377.744,289.656,376.943"/>
+<path fill="#58595B" d="M310.393,379.747c-1.638,0-3.008-0.631-4.107-1.896v6.753h-3.021v-18.552h2.911v1.708
+	c1.156-1.352,2.563-2.028,4.217-2.028c1.939,0,3.52,0.698,4.738,2.096s1.827,3.039,1.827,4.925c0,1.887-0.608,3.523-1.827,4.912
+	C313.912,379.053,312.332,379.747,310.393,379.747 M306.309,373.607c0.107,0.997,0.483,1.833,1.121,2.51
+	c0.711,0.747,1.602,1.12,2.67,1.12c1.156,0,2.078-0.422,2.763-1.269c0.686-0.845,1.028-1.917,1.028-3.216
+	c0-1.281-0.343-2.353-1.028-3.217c-0.685-0.862-1.606-1.294-2.763-1.294c-1.068,0-1.959,0.373-2.67,1.12
+	c-0.638,0.678-1.014,1.522-1.121,2.536C306.256,372.45,306.256,373.021,306.309,373.607"/>
+<path fill="#58595B" d="M325.657,379.747c-1.959,0-3.627-0.672-5.005-2.016c-1.381-1.344-2.07-3.003-2.07-4.979
+	s0.689-3.639,2.07-4.992c1.378-1.352,3.046-2.028,5.005-2.028c1.975,0,3.647,0.677,5.017,2.028c1.37,1.354,2.056,3.017,2.056,4.992
+	s-0.686,3.635-2.056,4.979C329.305,379.075,327.632,379.747,325.657,379.747 M325.657,377.237c1.102,0,2.049-0.422,2.841-1.269
+	c0.793-0.845,1.188-1.917,1.188-3.216c0-1.281-0.395-2.353-1.188-3.217c-0.792-0.862-1.739-1.294-2.841-1.294
+	c-1.086,0-2.025,0.432-2.818,1.294c-0.79,0.864-1.188,1.936-1.188,3.217c0,1.299,0.397,2.371,1.188,3.216
+	C323.632,376.815,324.571,377.237,325.657,377.237"/>
+<path fill="#58595B" d="M335.341,379.426v-13.373h2.858v2.002c0.442-0.658,0.987-1.165,1.627-1.521
+	c0.765-0.462,1.664-0.694,2.697-0.694h0.211v2.723h-0.318c-1.264,0-2.271,0.384-3.018,1.148c-0.692,0.747-1.04,1.914-1.04,3.497
+	v6.219H335.341z"/>
+<path fill="#58595B" d="M349.698,361.756v4.297h2.908v2.456h-2.908v6.807c0,0.641,0.154,1.081,0.467,1.321
+	c0.312,0.24,0.752,0.36,1.32,0.36h1.121v2.429h-1.842c-1.442,0-2.492-0.32-3.148-0.96c-0.659-0.642-0.988-1.593-0.988-2.856v-7.101
+	h-2.296v-2.456h2.296v-4.297H349.698z"/>
+</svg>

src/assets/images/mi_logo_wh.svg

@@ -0,0 +1,218 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="360px" height="396px" viewBox="0 0 360 396" enable-background="new 0 0 360 396" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M229.294,102.004c-16.579-11.262-37.798-6.669-48.931,10.271c-9.31,14.146-23.354,15.904-28.799,15.904
+		c-17.722,0-29.855-12.468-33.449-25.372h-0.008c-0.034-0.127-0.063-0.233-0.097-0.359c-0.033-0.143-0.079-0.288-0.114-0.44
+		c-1.416-5.381-1.766-7.955-1.766-13.676c0-30.857,31.662-65.209,77.255-65.209c46.693,0,73.412,35.546,80.295,55.3
+		c-0.124-0.346-0.23-0.692-0.353-1.051c-13.246-38.637-49.89-66.418-93.022-66.418c-54.294,0-98.319,44.016-98.319,98.317
+		c0,48.534,35.013,90.083,83.57,90.083c38.726,0,64.755-21.716,76.695-51.639C248.809,131.349,244.163,112.111,229.294,102.004"/>
+	<path fill="#FFFFFF" d="M274.292,80.338c-5.742-19.27-32.661-57.214-80.906-57.214c-45.593,0-77.255,34.351-77.255,65.208
+		c0,5.722,0.35,8.296,1.766,13.677c-0.596-2.351-0.905-4.713-0.905-7.013c0-32.133,32.173-54.402,65.252-54.402
+		c44.773,0,81.063,36.298,81.063,81.061c0,35.099-20.19,65.472-49.542,80.068l0.01,0.023c37.831-13.699,64.842-49.927,64.842-92.475
+		C278.616,99.201,277.265,90.323,274.292,80.338"/>
+	<path fill="#FFFFFF" d="M84.246,287.663v19.702h-7.033v-13.559H40.029v-6.144h18.937v-8.3H36.48v-6.144h51.947v6.144H65.935v8.3
+		H84.246z M84.246,251.87v16.851h-7.033V258.08H40.659v-6.21H84.246z"/>
+	<polygon fill="#FFFFFF" points="143.476,286.65 125.103,286.65 125.103,296.911 147.594,296.911 147.594,303.058 95.647,303.058 
+		95.647,296.911 118.074,296.911 118.074,286.65 99.831,286.65 99.831,253.581 143.349,253.581 143.349,259.726 106.73,259.726 
+		106.73,267.074 143.349,267.074 143.349,273.093 106.73,273.093 106.73,280.505 143.476,280.505 	"/>
+	<path fill="#FFFFFF" d="M167.165,296.911v-17.548h6.654v17.548h9.438v-17.548h6.713v17.548h16.788v6.146h-51.943v-6.146H167.165z
+		 M195.547,286.966v-27.115h-36.555v-6.269h43.59v33.384H195.547z"/>
+	<path fill="#FFFFFF" d="M265.279,283.039h-51.948v-5.766h22.493v-3.673h-18.309v-22.237h43.519v5.764h-36.677v2.788h36.677v5.26
+		h-36.677v2.85h36.805v5.576h-18.437v3.673h22.554V283.039z M253.183,296.911c0,1.774-0.373,3.442-1.111,5.005
+		c-0.74,1.562-1.723,2.914-2.948,4.056c-1.267,1.182-2.726,2.121-4.367,2.82c-1.649,0.693-3.42,1.043-5.321,1.043
+		s-3.687-0.35-5.35-1.043c-1.671-0.699-3.142-1.639-4.408-2.82c-1.223-1.142-2.206-2.494-2.941-4.056
+		c-0.74-1.563-1.114-3.23-1.114-5.005s0.374-3.432,1.114-4.974c0.735-1.542,1.719-2.881,2.941-4.022
+		c1.267-1.182,2.737-2.121,4.408-2.818c1.663-0.695,3.448-1.044,5.35-1.044s3.672,0.349,5.321,1.044
+		c1.642,0.697,3.101,1.637,4.367,2.818c1.226,1.142,2.208,2.48,2.948,4.022C252.81,293.479,253.183,295.137,253.183,296.911
+		 M246.397,296.849c0-1.902-0.673-3.538-2.022-4.911c-1.35-1.371-2.999-2.059-4.94-2.059c-1.944,0-3.604,0.688-4.97,2.059
+		c-1.378,1.373-2.065,3.009-2.065,4.911c0,1.901,0.688,3.526,2.065,4.88c1.366,1.348,3.025,2.026,4.97,2.026
+		c1.941,0,3.591-0.679,4.94-2.026C245.725,300.375,246.397,298.75,246.397,296.849"/>
+	<path fill="#FFFFFF" d="M272.182,286.421h51.945v6.208h-22.49V307.2h-7.032v-14.571h-22.423V286.421z M283.265,258.803h29.71
+		v-7.162h6.973v27.178H276.36v-27.178h6.904V258.803z M312.975,264.881h-29.71v7.795h29.71V264.881z"/>
+</g>
+<polygon fill="#FFFFFF" points="94.755,328.068 94.755,346.673 91.766,346.673 91.766,331.698 86.909,346.673 84.024,346.673 
+	79.167,331.698 79.167,346.673 76.178,346.673 76.178,328.068 80.769,328.068 85.466,342.563 90.164,328.068 "/>
+<path fill="#FFFFFF" d="M101.904,329.536c0,0.516-0.19,0.966-0.573,1.348c-0.383,0.383-0.84,0.575-1.374,0.575
+	c-0.535,0-0.992-0.192-1.375-0.575c-0.383-0.382-0.573-0.832-0.573-1.348c0-0.533,0.19-0.991,0.573-1.374
+	c0.383-0.383,0.84-0.574,1.375-0.574c0.533,0,0.99,0.191,1.374,0.574C101.713,328.545,101.904,329.003,101.904,329.536
+	 M98.463,333.3h3.041v13.373h-3.041V333.3z"/>
+<path fill="#FFFFFF" d="M108.225,339.946v6.728h-3.016V333.3h2.911v1.788c0.354-0.622,0.871-1.129,1.547-1.521
+	s1.407-0.588,2.189-0.588c1.583,0,2.851,0.539,3.803,1.614c0.952,1.078,1.428,2.515,1.428,4.313v7.768h-3.042v-6.994
+	c0-1.423-0.233-2.478-0.695-3.163c-0.464-0.685-1.176-1.027-2.135-1.027c-0.5,0-0.985,0.164-1.457,0.493
+	c-0.471,0.33-0.831,0.778-1.08,1.35C108.377,337.989,108.225,338.861,108.225,339.946"/>
+<path fill="#FFFFFF" d="M124.129,329.536c0,0.516-0.19,0.966-0.573,1.348c-0.383,0.383-0.84,0.575-1.374,0.575
+	c-0.535,0-0.992-0.192-1.375-0.575c-0.383-0.382-0.573-0.832-0.573-1.348c0-0.533,0.19-0.991,0.573-1.374s0.84-0.574,1.375-0.574
+	c0.533,0,0.99,0.191,1.374,0.574C123.939,328.545,124.129,329.003,124.129,329.536 M120.688,333.3h3.041v13.373h-3.041V333.3z"/>
+<path fill="#FFFFFF" d="M126.207,344.19l1.895-1.947c0.535,0.729,1.121,1.298,1.764,1.707c0.621,0.374,1.29,0.561,2.001,0.561
+	c0.676,0,1.25-0.137,1.721-0.413c0.471-0.275,0.709-0.645,0.709-1.107s-0.229-0.823-0.681-1.082
+	c-0.455-0.257-0.993-0.502-1.616-0.733c-0.73-0.231-1.478-0.489-2.242-0.773c-1.033-0.374-1.79-0.854-2.271-1.442
+	c-0.48-0.587-0.721-1.255-0.721-2.002c0-1.103,0.516-2.042,1.549-2.816c1.033-0.773,2.251-1.161,3.658-1.161
+	c1.495,0,2.713,0.356,3.655,1.068c0.481,0.374,0.864,0.837,1.149,1.388l-1.868,1.815c-0.25-0.427-0.545-0.774-0.883-1.041
+	c-0.585-0.517-1.326-0.774-2.216-0.774c-0.516,0-0.964,0.13-1.347,0.387c-0.383,0.258-0.574,0.565-0.574,0.921
+	c0,0.392,0.214,0.721,0.64,0.987c0.426,0.268,1.059,0.526,1.895,0.774c0.302,0.09,0.649,0.197,1.042,0.32
+	c1.299,0.428,2.282,0.979,2.949,1.655c0.668,0.678,1.001,1.486,1.001,2.429c0,1.104-0.533,2.06-1.602,2.87
+	c-1.068,0.81-2.43,1.215-4.083,1.215c-1.388,0-2.616-0.321-3.684-0.961C127.337,345.605,126.724,344.991,126.207,344.19"/>
+<path fill="#FFFFFF" d="M143.713,329.003v4.297h2.911v2.456h-2.911v6.808c0,0.64,0.155,1.08,0.466,1.32
+	c0.312,0.24,0.752,0.36,1.323,0.36h1.121v2.429h-1.842c-1.442,0-2.492-0.32-3.151-0.96c-0.659-0.642-0.987-1.592-0.987-2.855v-7.102
+	h-2.297V333.3h2.297v-4.297H143.713z"/>
+<path fill="#FFFFFF" d="M149.154,346.673V333.3h2.856v2.002c0.445-0.658,0.987-1.165,1.627-1.521
+	c0.767-0.462,1.664-0.693,2.697-0.693h0.214v2.722h-0.321c-1.264,0-2.268,0.384-3.015,1.148c-0.695,0.747-1.042,1.914-1.042,3.497
+	v6.219H149.154z"/>
+<polygon fill="#FFFFFF" points="162.95,346.166 157.69,333.3 160.841,333.3 164.471,342.43 168.076,333.3 171.198,333.3 
+	163.752,351.852 160.653,351.852 "/>
+<path fill="#FFFFFF" d="M186.003,346.994c-1.958,0-3.627-0.672-5.005-2.016c-1.38-1.344-2.07-3.003-2.07-4.979
+	s0.69-3.639,2.07-4.992c1.378-1.352,3.046-2.028,5.005-2.028c1.975,0,3.649,0.677,5.017,2.028c1.37,1.354,2.056,3.017,2.056,4.992
+	s-0.686,3.635-2.056,4.979C189.652,346.322,187.979,346.994,186.003,346.994 M186.003,344.484c1.102,0,2.049-0.422,2.841-1.269
+	c0.793-0.845,1.188-1.916,1.188-3.216c0-1.281-0.395-2.353-1.188-3.217c-0.792-0.862-1.739-1.294-2.841-1.294
+	c-1.085,0-2.025,0.432-2.818,1.294c-0.79,0.864-1.188,1.936-1.188,3.217c0,1.3,0.397,2.371,1.188,3.216
+	C183.979,344.063,184.918,344.484,186.003,344.484"/>
+<path fill="#FFFFFF" d="M196.355,331.886c0-1.246,0.351-2.194,1.055-2.844c0.702-0.648,1.775-0.974,3.215-0.974h1.469v2.429h-0.881
+	c-0.568,0-1.009,0.12-1.32,0.36s-0.467,0.681-0.467,1.321v1.121h2.668v2.456h-2.668v10.917h-3.07v-10.917h-2.296V333.3h2.296
+	V331.886z"/>
+<polygon fill="#FFFFFF" points="223.731,346.673 212.653,346.673 212.653,328.068 215.778,328.068 215.778,344.059 223.731,344.059 
+	"/>
+<path fill="#FFFFFF" d="M231.735,338.052h3.151c0-0.872-0.338-1.526-1.014-1.962c-0.679-0.437-1.656-0.654-2.938-0.654h-0.08
+	c-1.212,0-2.492,0.285-3.844,0.855l-0.773-2.378c1.404-0.604,2.953-0.916,4.643-0.934h0.055c2.242,0,3.963,0.432,5.165,1.295
+	c1.201,0.863,1.801,2.238,1.801,4.124v8.274h-2.882v-1.467c-0.571,0.568-1.269,1.009-2.097,1.32
+	c-0.825,0.313-1.668,0.468-2.522,0.468c-1.602,0-2.896-0.424-3.884-1.269c-0.988-0.845-1.48-1.881-1.48-3.109
+	c0-1.37,0.613-2.5,1.842-3.39C228.016,338.443,229.637,338.052,231.735,338.052 M230.907,344.592c0.783,0,1.559-0.191,2.323-0.574
+	c0.766-0.383,1.318-0.821,1.656-1.321v-2.27h-2.696c-1.53,0-2.599,0.196-3.203,0.588c-0.588,0.445-0.881,0.979-0.881,1.602
+	c0,0.569,0.247,1.042,0.747,1.415C229.351,344.405,230.036,344.592,230.907,344.592"/>
+<path fill="#FFFFFF" d="M244.437,339.946v6.728h-3.018V333.3h2.911v1.788c0.356-0.622,0.871-1.129,1.549-1.521
+	c0.676-0.392,1.404-0.588,2.188-0.588c1.585,0,2.854,0.539,3.806,1.614c0.951,1.078,1.428,2.515,1.428,4.313v7.768h-3.044v-6.994
+	c0-1.423-0.231-2.478-0.695-3.163c-0.462-0.685-1.173-1.027-2.135-1.027c-0.497,0-0.982,0.164-1.454,0.493
+	c-0.471,0.33-0.833,0.778-1.08,1.35C244.587,337.989,244.437,338.861,244.437,339.946"/>
+<path fill="#FFFFFF" d="M262.45,332.979c1.585,0,2.946,0.642,4.084,1.922v-6.833h3.044v18.604h-2.938v-1.68
+	c-1.12,1.334-2.518,2.001-4.19,2.001c-1.959,0-3.541-0.694-4.753-2.082c-1.209-1.389-1.813-3.025-1.813-4.912
+	c0-1.886,0.604-3.527,1.813-4.925C258.909,333.678,260.491,332.979,262.45,332.979 M266.508,340.854
+	c0.053-0.587,0.053-1.157,0-1.709c-0.107-1.014-0.48-1.858-1.121-2.536c-0.712-0.747-1.592-1.12-2.644-1.12
+	c-1.174,0-2.1,0.432-2.775,1.294c-0.676,0.864-1.014,1.936-1.014,3.217c0,1.3,0.338,2.371,1.014,3.216
+	c0.676,0.847,1.602,1.268,2.775,1.268c1.052,0,1.932-0.372,2.644-1.119C266.027,342.688,266.4,341.852,266.508,340.854"/>
+<path fill="#FFFFFF" d="M275.044,347.849h-0.133c-0.533,0-0.997-0.188-1.388-0.562c-0.393-0.374-0.585-0.827-0.585-1.361
+	c0-0.551,0.192-1.014,0.585-1.388c0.391-0.373,0.854-0.561,1.388-0.561c0.552,0,1.014,0.178,1.388,0.533
+	c0.447,0.428,0.668,1.023,0.668,1.789c0,1.299-0.321,2.376-0.961,3.23c-0.624,0.801-1.335,1.361-2.137,1.682l-0.8-0.881
+	c0.728-0.463,1.271-0.997,1.628-1.602C274.856,348.462,274.973,348.169,275.044,347.849"/>
+<g>
+	<rect x="6.214" y="360.68" fill="#FFFFFF" width="3.123" height="18.604"/>
+	<path fill="#FFFFFF" d="M16.085,372.558v6.728h-3.018v-13.374h2.911v1.788c0.357-0.622,0.871-1.129,1.549-1.521
+		c0.676-0.392,1.404-0.588,2.187-0.588c1.585,0,2.854,0.539,3.805,1.614c0.952,1.078,1.428,2.515,1.428,4.313v7.768h-3.044v-6.994
+		c0-1.423-0.231-2.478-0.695-3.163c-0.462-0.686-1.173-1.027-2.135-1.027c-0.498,0-0.983,0.164-1.454,0.493
+		c-0.471,0.33-0.833,0.778-1.081,1.35C16.235,370.601,16.085,371.473,16.085,372.558"/>
+	<path fill="#FFFFFF" d="M28.973,364.497c0-1.246,0.352-2.194,1.054-2.844c0.702-0.648,1.775-0.974,3.217-0.974h1.469v2.429h-0.881
+		c-0.571,0-1.011,0.12-1.323,0.36c-0.312,0.24-0.466,0.681-0.466,1.321v1.121h2.67v2.455h-2.67v10.918h-3.07v-10.918h-2.297v-2.455
+		h2.297V364.497z"/>
+	<path fill="#FFFFFF" d="M37.19,379.284v-13.373h2.856v2.002c0.445-0.658,0.988-1.165,1.628-1.521
+		c0.766-0.462,1.664-0.694,2.697-0.694h0.214v2.723h-0.321c-1.264,0-2.269,0.384-3.016,1.148c-0.695,0.747-1.042,1.913-1.042,3.497
+		v6.219H37.19z"/>
+	<path fill="#FFFFFF" d="M52.348,370.663h3.148c0-0.872-0.338-1.526-1.014-1.962c-0.676-0.437-1.654-0.654-2.937-0.654h-0.078
+		c-1.211,0-2.492,0.285-3.846,0.855l-0.773-2.378c1.407-0.604,2.954-0.916,4.646-0.934h0.052c2.242,0,3.965,0.432,5.167,1.294
+		c1.199,0.864,1.801,2.238,1.801,4.125v8.274H55.63v-1.467c-0.569,0.568-1.266,1.009-2.094,1.32
+		c-0.828,0.313-1.668,0.468-2.522,0.468c-1.602,0-2.896-0.424-3.884-1.269c-0.987-0.845-1.482-1.881-1.482-3.109
+		c0-1.37,0.614-2.5,1.842-3.39C48.628,371.055,50.247,370.663,52.348,370.663 M51.52,377.203c0.783,0,1.556-0.191,2.323-0.575
+		c0.764-0.382,1.316-0.82,1.654-1.32v-2.27H52.8c-1.53,0-2.596,0.196-3.203,0.588c-0.585,0.445-0.881,0.979-0.881,1.602
+		c0,0.569,0.25,1.041,0.748,1.415C49.963,377.017,50.649,377.203,51.52,377.203"/>
+	<path fill="#FFFFFF" d="M60.804,376.802l1.895-1.947c0.535,0.729,1.121,1.298,1.763,1.707c0.621,0.374,1.292,0.561,2.004,0.561
+		c0.674,0,1.247-0.137,1.718-0.413c0.471-0.275,0.709-0.645,0.709-1.107s-0.229-0.823-0.681-1.082
+		c-0.455-0.257-0.993-0.502-1.616-0.733c-0.73-0.231-1.478-0.489-2.242-0.774c-1.033-0.373-1.79-0.854-2.271-1.441
+		c-0.48-0.587-0.721-1.255-0.721-2.002c0-1.103,0.517-2.042,1.549-2.816c1.033-0.773,2.251-1.161,3.658-1.161
+		c1.495,0,2.713,0.356,3.655,1.068c0.481,0.374,0.864,0.837,1.149,1.388l-1.868,1.815c-0.25-0.427-0.545-0.774-0.883-1.041
+		c-0.585-0.517-1.326-0.774-2.216-0.774c-0.516,0-0.964,0.13-1.347,0.387c-0.383,0.258-0.574,0.565-0.574,0.921
+		c0,0.392,0.214,0.721,0.64,0.987c0.426,0.268,1.059,0.526,1.897,0.774c0.3,0.09,0.647,0.196,1.04,0.32
+		c1.299,0.428,2.282,0.979,2.948,1.655c0.669,0.677,1.002,1.486,1.002,2.429c0,1.104-0.533,2.06-1.602,2.87
+		c-1.068,0.81-2.43,1.215-4.084,1.215c-1.387,0-2.615-0.321-3.684-0.961C61.934,378.217,61.32,377.603,60.804,376.802"/>
+	<path fill="#FFFFFF" d="M78.31,361.614v4.297h2.911v2.455H78.31v6.808c0,0.641,0.155,1.081,0.466,1.321
+		c0.312,0.24,0.752,0.36,1.323,0.36h1.121v2.429h-1.842c-1.442,0-2.492-0.32-3.151-0.96c-0.659-0.642-0.987-1.593-0.987-2.856
+		v-7.102h-2.297v-2.455h2.297v-4.297H78.31z"/>
+	<path fill="#FFFFFF" d="M83.75,379.284v-13.373h2.856v2.002c0.445-0.658,0.987-1.165,1.627-1.521
+		c0.767-0.462,1.664-0.694,2.697-0.694h0.214v2.723h-0.321c-1.264,0-2.268,0.384-3.015,1.148c-0.695,0.747-1.042,1.913-1.042,3.497
+		v6.219H83.75z"/>
+	<path fill="#FFFFFF" d="M102.111,372.639v-6.727h3.042v13.372h-2.908v-1.761c-0.374,0.658-0.873,1.156-1.494,1.494
+		c-0.731,0.392-1.488,0.588-2.271,0.588c-1.566,0-2.825-0.534-3.777-1.602c-0.952-1.068-1.428-2.51-1.428-4.324v-7.768h3.016v7.02
+		c0,1.406,0.235,2.452,0.709,3.137c0.471,0.685,1.188,1.027,2.149,1.027c0.479,0,0.959-0.164,1.44-0.493
+		c0.481-0.33,0.845-0.771,1.095-1.322C101.968,374.622,102.111,373.741,102.111,372.639"/>
+	<path fill="#FFFFFF" d="M107.737,372.611c0-1.922,0.726-3.572,2.175-4.951c1.452-1.38,3.289-2.069,5.514-2.069
+		c1.742,0,3.379,0.561,4.912,1.683l-0.988,2.375c-1.335-1.032-2.644-1.548-3.924-1.548c-1.371,0-2.482,0.437-3.336,1.308
+		c-0.854,0.872-1.283,1.939-1.283,3.203s0.428,2.327,1.283,3.19s1.966,1.294,3.336,1.294c1.297,0,2.625-0.507,3.977-1.521
+		l0.987,2.376c-1.478,1.104-3.132,1.655-4.964,1.655c-2.225,0-4.063-0.686-5.514-2.056
+		C108.463,376.18,107.737,374.533,107.737,372.611"/>
+	<path fill="#FFFFFF" d="M127.007,361.614v4.297h2.908v2.455h-2.908v6.808c0,0.641,0.155,1.081,0.466,1.321
+		c0.312,0.24,0.752,0.36,1.321,0.36h1.121v2.429h-1.842c-1.442,0-2.492-0.32-3.148-0.96c-0.659-0.642-0.988-1.593-0.988-2.856
+		v-7.102h-2.296v-2.455h2.296v-4.297H127.007z"/>
+	<path fill="#FFFFFF" d="M141.281,372.639v-6.727h3.044v13.372h-2.911v-1.761c-0.374,0.658-0.871,1.156-1.495,1.494
+		c-0.73,0.392-1.485,0.588-2.268,0.588c-1.566,0-2.827-0.534-3.779-1.602c-0.952-1.068-1.428-2.51-1.428-4.324v-7.768h3.018v7.02
+		c0,1.406,0.236,2.452,0.707,3.137s1.188,1.027,2.149,1.027c0.48,0,0.961-0.164,1.442-0.493c0.481-0.33,0.845-0.771,1.095-1.322
+		C141.138,374.622,141.281,373.741,141.281,372.639"/>
+	<path fill="#FFFFFF" d="M147.842,379.284v-13.373h2.858v2.002c0.443-0.658,0.988-1.165,1.628-1.521
+		c0.764-0.462,1.664-0.694,2.696-0.694h0.212v2.723h-0.319c-1.264,0-2.271,0.384-3.018,1.148c-0.692,0.747-1.04,1.913-1.04,3.497
+		v6.219H147.842z"/>
+	<path fill="#FFFFFF" d="M159.344,373.946c0.176,0.82,0.56,1.486,1.147,2.002c0.854,0.783,1.985,1.174,3.389,1.174
+		c1.478,0,2.858-0.543,4.139-1.628l0.907,2.242c-1.44,1.246-3.148,1.869-5.124,1.869c-2.261,0-4.098-0.642-5.512-1.923
+		c-1.416-1.28-2.123-2.963-2.123-5.044c0-2.047,0.626-3.733,1.883-5.059c1.254-1.325,2.896-1.989,4.924-1.989
+		c1.992,0,3.627,0.659,4.898,1.975c1.273,1.317,1.909,2.946,1.909,4.887c0,0.532-0.043,1.031-0.133,1.494H159.344z M159.29,371.544
+		h7.42c-0.036-0.872-0.4-1.668-1.095-2.39c-0.692-0.721-1.573-1.08-2.642-1.08c-1.104,0-2.011,0.392-2.723,1.174
+		C159.734,369.835,159.414,370.601,159.29,371.544"/>
+</g>
+<path fill="#FFFFFF" d="M188.101,370.805h3.15c0-0.872-0.338-1.526-1.014-1.962c-0.679-0.437-1.656-0.654-2.937-0.654h-0.081
+	c-1.211,0-2.492,0.285-3.844,0.855l-0.773-2.378c1.404-0.604,2.954-0.916,4.644-0.934h0.055c2.241,0,3.962,0.432,5.164,1.294
+	c1.202,0.864,1.802,2.238,1.802,4.125v8.274h-2.882v-1.467c-0.571,0.568-1.269,1.009-2.097,1.32
+	c-0.826,0.312-1.669,0.468-2.523,0.468c-1.601,0-2.896-0.424-3.883-1.269c-0.988-0.845-1.48-1.881-1.48-3.109
+	c0-1.37,0.614-2.5,1.842-3.39C184.38,371.196,186.001,370.805,188.101,370.805 M187.272,377.345c0.782,0,1.559-0.191,2.322-0.575
+	c0.767-0.382,1.318-0.82,1.656-1.32v-2.27h-2.696c-1.53,0-2.599,0.196-3.203,0.588c-0.588,0.445-0.881,0.979-0.881,1.602
+	c0,0.569,0.248,1.042,0.748,1.415C185.716,377.158,186.401,377.345,187.272,377.345"/>
+<path fill="#FFFFFF" d="M200.802,372.699v6.728h-3.018v-13.374h2.91v1.788c0.357-0.622,0.871-1.129,1.55-1.521
+	c0.676-0.392,1.403-0.588,2.187-0.588c1.585,0,2.854,0.539,3.806,1.614c0.952,1.078,1.428,2.515,1.428,4.313v7.768h-3.044v-6.994
+	c0-1.423-0.23-2.478-0.694-3.163c-0.462-0.686-1.174-1.027-2.135-1.027c-0.498,0-0.983,0.164-1.454,0.493
+	c-0.472,0.33-0.833,0.778-1.081,1.35C200.951,370.742,200.802,371.614,200.802,372.699"/>
+<path fill="#FFFFFF" d="M218.814,365.732c1.585,0,2.946,0.642,4.084,1.922v-6.833h3.045v18.604h-2.938v-1.68
+	c-1.121,1.334-2.519,2.001-4.191,2.001c-1.958,0-3.541-0.694-4.75-2.082c-1.211-1.389-1.815-3.025-1.815-4.912
+	c0-1.886,0.604-3.527,1.815-4.925C215.273,366.431,216.856,365.732,218.814,365.732 M222.872,373.607
+	c0.053-0.587,0.053-1.157,0-1.709c-0.106-1.014-0.48-1.858-1.12-2.536c-0.712-0.747-1.593-1.12-2.645-1.12
+	c-1.173,0-2.099,0.432-2.775,1.294c-0.676,0.864-1.014,1.936-1.014,3.217c0,1.299,0.338,2.371,1.014,3.216
+	c0.677,0.847,1.603,1.269,2.775,1.269c1.052,0,1.933-0.373,2.645-1.12C222.392,375.44,222.766,374.604,222.872,373.607"/>
+<polygon fill="#FFFFFF" points="244.352,363.437 244.352,379.426 241.229,379.426 241.229,363.437 235.543,363.437 235.543,360.821 
+	250.037,360.821 250.037,363.437 "/>
+<path fill="#FFFFFF" d="M250.646,379.426v-13.373h2.856v2.002c0.445-0.658,0.987-1.165,1.628-1.521
+	c0.766-0.462,1.663-0.694,2.696-0.694h0.214v2.723h-0.321c-1.264,0-2.268,0.384-3.015,1.148c-0.695,0.747-1.043,1.914-1.043,3.497
+	v6.219H250.646z"/>
+<path fill="#FFFFFF" d="M265.804,370.805h3.148c0-0.872-0.338-1.526-1.014-1.962c-0.677-0.437-1.654-0.654-2.938-0.654h-0.078
+	c-1.212,0-2.492,0.285-3.846,0.855l-0.773-2.378c1.406-0.604,2.953-0.916,4.647-0.934h0.05c2.242,0,3.965,0.432,5.167,1.294
+	c1.199,0.864,1.802,2.238,1.802,4.125v8.274h-2.885v-1.467c-0.568,0.568-1.266,1.009-2.094,1.32s-1.669,0.468-2.523,0.468
+	c-1.602,0-2.896-0.424-3.884-1.269c-0.987-0.845-1.482-1.881-1.482-3.109c0-1.37,0.614-2.5,1.842-3.39
+	C262.084,371.196,263.702,370.805,265.804,370.805 M264.976,377.345c0.782,0,1.556-0.191,2.322-0.575
+	c0.764-0.382,1.316-0.82,1.654-1.32v-2.27h-2.696c-1.53,0-2.597,0.196-3.204,0.588c-0.585,0.445-0.88,0.979-0.88,1.602
+	c0,0.569,0.25,1.042,0.747,1.415C263.419,377.158,264.104,377.345,264.976,377.345"/>
+<path fill="#FFFFFF" d="M278.505,372.699v6.728h-3.018v-13.374h2.91v1.788c0.357-0.622,0.871-1.129,1.55-1.521
+	c0.676-0.392,1.403-0.588,2.187-0.588c1.585,0,2.854,0.539,3.806,1.614c0.952,1.078,1.428,2.515,1.428,4.313v7.768h-3.044v-6.994
+	c0-1.423-0.23-2.478-0.694-3.163c-0.462-0.686-1.174-1.027-2.135-1.027c-0.498,0-0.983,0.164-1.454,0.493
+	c-0.472,0.33-0.833,0.778-1.081,1.35C278.654,370.742,278.505,371.614,278.505,372.699"/>
+<path fill="#FFFFFF" d="M289.656,376.943l1.895-1.947c0.536,0.729,1.121,1.298,1.764,1.707c0.621,0.374,1.292,0.561,2.004,0.561
+	c0.674,0,1.247-0.137,1.719-0.413c0.471-0.275,0.709-0.644,0.709-1.107c0-0.463-0.229-0.823-0.681-1.082
+	c-0.455-0.257-0.993-0.502-1.616-0.734c-0.73-0.23-1.478-0.488-2.242-0.773c-1.032-0.373-1.789-0.854-2.27-1.441
+	c-0.481-0.587-0.722-1.255-0.722-2.002c0-1.103,0.517-2.042,1.55-2.816c1.032-0.773,2.251-1.161,3.657-1.161
+	c1.495,0,2.713,0.356,3.655,1.068c0.481,0.374,0.864,0.837,1.15,1.388l-1.869,1.815c-0.249-0.427-0.545-0.774-0.883-1.041
+	c-0.585-0.517-1.325-0.774-2.215-0.774c-0.517,0-0.964,0.13-1.348,0.387c-0.383,0.258-0.573,0.565-0.573,0.921
+	c0,0.392,0.214,0.721,0.64,0.987c0.427,0.268,1.06,0.526,1.897,0.774c0.3,0.09,0.647,0.196,1.04,0.32
+	c1.299,0.428,2.282,0.979,2.948,1.655c0.669,0.677,1.002,1.486,1.002,2.429c0,1.104-0.533,2.06-1.602,2.87
+	c-1.068,0.81-2.43,1.215-4.084,1.215c-1.388,0-2.615-0.321-3.684-0.961C290.787,378.358,290.173,377.744,289.656,376.943"/>
+<path fill="#FFFFFF" d="M310.393,379.747c-1.638,0-3.008-0.631-4.107-1.896v6.753h-3.021v-18.552h2.911v1.708
+	c1.156-1.352,2.563-2.028,4.217-2.028c1.939,0,3.52,0.698,4.738,2.096s1.827,3.039,1.827,4.925c0,1.887-0.608,3.523-1.827,4.912
+	C313.912,379.053,312.332,379.747,310.393,379.747 M306.309,373.607c0.107,0.997,0.483,1.833,1.121,2.51
+	c0.711,0.747,1.602,1.12,2.67,1.12c1.156,0,2.078-0.422,2.763-1.269c0.686-0.845,1.028-1.917,1.028-3.216
+	c0-1.281-0.343-2.353-1.028-3.217c-0.685-0.862-1.606-1.294-2.763-1.294c-1.068,0-1.959,0.373-2.67,1.12
+	c-0.638,0.678-1.014,1.522-1.121,2.536C306.256,372.45,306.256,373.021,306.309,373.607"/>
+<path fill="#FFFFFF" d="M325.657,379.747c-1.959,0-3.627-0.672-5.005-2.016c-1.381-1.344-2.07-3.003-2.07-4.979
+	s0.689-3.639,2.07-4.992c1.378-1.352,3.046-2.028,5.005-2.028c1.975,0,3.647,0.677,5.017,2.028c1.37,1.354,2.056,3.017,2.056,4.992
+	s-0.686,3.635-2.056,4.979C329.305,379.075,327.632,379.747,325.657,379.747 M325.657,377.237c1.102,0,2.049-0.422,2.841-1.269
+	c0.793-0.845,1.188-1.917,1.188-3.216c0-1.281-0.395-2.353-1.188-3.217c-0.792-0.862-1.739-1.294-2.841-1.294
+	c-1.086,0-2.025,0.432-2.818,1.294c-0.79,0.864-1.188,1.936-1.188,3.217c0,1.299,0.397,2.371,1.188,3.216
+	C323.632,376.815,324.571,377.237,325.657,377.237"/>
+<path fill="#FFFFFF" d="M335.341,379.426v-13.373h2.858v2.002c0.442-0.658,0.987-1.165,1.627-1.521
+	c0.765-0.462,1.664-0.694,2.697-0.694h0.211v2.723h-0.318c-1.264,0-2.271,0.384-3.018,1.148c-0.692,0.747-1.04,1.914-1.04,3.497
+	v6.219H335.341z"/>
+<path fill="#FFFFFF" d="M349.698,361.756v4.297h2.908v2.456h-2.908v6.807c0,0.641,0.154,1.081,0.467,1.321
+	c0.312,0.24,0.752,0.36,1.32,0.36h1.121v2.429h-1.842c-1.442,0-2.492-0.32-3.148-0.96c-0.659-0.642-0.988-1.593-0.988-2.856v-7.101
+	h-2.296v-2.456h2.296v-4.297H349.698z"/>
+</svg>

src/assets/images/new_drone_icon_org.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="50px" height="30px" viewBox="0 0 30 15" enable-background="new 0 0 30 15" xml:space="preserve" style="fill: #ff9f43;">
+<g>
+	<g>
+		<path d="M14.938,7.417c-0.443,0-0.825,0.133-1.143,0.396c-0.314,0.262-0.476,0.578-0.476,0.946c0,0.371,0.16,0.688,0.476,0.951
+			c0.315,0.261,0.697,0.394,1.143,0.394s0.829-0.133,1.145-0.396c0.315-0.262,0.475-0.58,0.475-0.951
+			c0-0.368-0.156-0.686-0.475-0.946C15.765,7.55,15.383,7.417,14.938,7.417z M16.244,4.276h0.077
+			c0.587,0.012,1.099,0.09,1.533,0.233c0.442,0.148,0.81,0.369,1.097,0.658h5.151V3.931c-0.631-0.011-1.213-0.033-1.748-0.07
+			c-0.379-0.027-0.733-0.063-1.063-0.104c-0.943-0.114-1.418-0.256-1.418-0.418s0.474-0.3,1.418-0.415
+			c0.797-0.096,1.733-0.15,2.813-0.166V2.698c-0.002-0.068,0.01-0.131,0.037-0.191c0.028-0.082,0.088-0.158,0.166-0.227
+			c0.137-0.113,0.305-0.17,0.498-0.168c0.194,0,0.364,0.055,0.506,0.168c0.133,0.113,0.203,0.246,0.211,0.4c0,0.006,0,0.012,0,0.018
+			v0.059c0.365,0.008,0.715,0.021,1.049,0.041c0.568,0.027,1.089,0.068,1.562,0.125c0.027,0.004,0.053,0.008,0.08,0.016
+			c0.893,0.111,1.342,0.246,1.344,0.402c-0.002,0.158-0.451,0.293-1.344,0.406c-0.027,0.004-0.053,0.008-0.08,0.012
+			c-0.748,0.094-1.617,0.148-2.609,0.168v1.244h0.619c0.195,0,0.363,0.061,0.502,0.174c0.139,0.115,0.209,0.254,0.209,0.414
+			c0,0.115-0.035,0.221-0.105,0.313c-0.121,0.133-0.297,0.227-0.524,0.28c-1.943,0.388-3.89,0.773-5.83,1.16l2.228,3.875
+			c0.014,0.021,0.024,0.037,0.037,0.06c0.532,1.245,0.161,2.243-1.115,2.993c-0.16,0.097-0.338,0.132-0.529,0.104
+			c-0.189-0.026-0.342-0.108-0.453-0.246c-0.115-0.133-0.156-0.278-0.125-0.438c0.031-0.159,0.129-0.284,0.289-0.379
+			c0.686-0.409,0.885-0.953,0.596-1.631l-2.34-4.057l-0.609,0.125V9.94c0,0.145-0.043,0.276-0.129,0.401v0.002
+			c-0.088,0.125-0.207,0.226-0.356,0.294l-2.458,1.174v0.004c-0.157,0.07-0.319,0.107-0.49,0.107
+			c-0.173-0.002-0.335-0.039-0.484-0.111L12,10.634l-0.006-0.004c-0.147-0.07-0.266-0.17-0.351-0.295
+			c-0.086-0.125-0.13-0.258-0.129-0.398v-2.02l-0.612-0.123l-2.34,4.055c-0.292,0.678-0.094,1.221,0.594,1.631
+			c0.16,0.095,0.256,0.22,0.29,0.379c0.031,0.158-0.012,0.306-0.127,0.438c-0.111,0.136-0.263,0.218-0.453,0.248
+			c-0.192,0.024-0.368-0.01-0.529-0.104c-1.276-0.75-1.648-1.748-1.114-2.994c0.011-0.021,0.022-0.039,0.036-0.059l2.228-3.875
+			C7.542,7.125,5.6,6.739,3.655,6.353C3.425,6.297,3.25,6.204,3.129,6.071C3.061,5.979,3.024,5.876,3.024,5.758
+			c0-0.159,0.069-0.299,0.209-0.414C3.373,5.231,3.541,5.17,3.736,5.17h0.619V3.926c-0.993-0.02-1.863-0.073-2.609-0.168
+			c-0.027-0.002-0.054-0.006-0.08-0.01C0.772,3.633,0.325,3.5,0.321,3.34c0.003-0.153,0.451-0.291,1.345-0.401
+			c0.026-0.006,0.053-0.01,0.08-0.015c0.472-0.057,0.992-0.098,1.562-0.125c0.333-0.021,0.683-0.032,1.048-0.043V2.698
+			c0-0.006,0-0.012,0-0.018c0.007-0.154,0.077-0.289,0.21-0.4c0.14-0.113,0.309-0.17,0.506-0.168c0.195,0,0.362,0.055,0.499,0.168
+			c0.076,0.068,0.131,0.143,0.164,0.227C5.761,2.567,5.773,2.63,5.772,2.698v0.059c1.077,0.016,2.014,0.07,2.813,0.166
+			c0.944,0.117,1.417,0.256,1.418,0.418c-0.001,0.162-0.474,0.301-1.418,0.416C8.253,3.798,7.898,3.833,7.521,3.86
+			c-0.535,0.037-1.117,0.062-1.748,0.07v1.238h5.151c0.286-0.289,0.651-0.51,1.096-0.658c0.436-0.145,0.945-0.223,1.535-0.234h0.074
+			c0.067-0.002,0.138-0.002,0.207,0h2.203C16.108,4.274,16.177,4.274,16.244,4.276z"/>
+	</g>
+	<g>
+		<path d="M14.934,8.089c0.225,0,0.415,0.066,0.57,0.199c0.158,0.131,0.236,0.287,0.236,0.473c0,0.187-0.078,0.344-0.236,0.477
+			c-0.155,0.131-0.346,0.195-0.57,0.195c-0.223,0-0.411-0.063-0.568-0.195c-0.158-0.133-0.238-0.29-0.238-0.477
+			c0-0.186,0.08-0.342,0.238-0.473C14.521,8.155,14.711,8.089,14.934,8.089z"/>
+	</g>
+</g>
+</svg>

src/assets/images/new_drone_icon_pp.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="50px" height="30px" viewBox="0 0 30 15" enable-background="new 0 0 30 15" xml:space="preserve" style="fill: #7367f0;">
+<g>
+	<g>
+		<path d="M14.938,7.417c-0.443,0-0.825,0.133-1.143,0.396c-0.314,0.262-0.476,0.578-0.476,0.946c0,0.371,0.16,0.688,0.476,0.951
+			c0.315,0.261,0.697,0.394,1.143,0.394s0.829-0.133,1.145-0.396c0.315-0.262,0.475-0.58,0.475-0.951
+			c0-0.368-0.156-0.686-0.475-0.946C15.765,7.55,15.383,7.417,14.938,7.417z M16.244,4.276h0.077
+			c0.587,0.012,1.099,0.09,1.533,0.233c0.442,0.148,0.81,0.369,1.097,0.658h5.151V3.931c-0.631-0.011-1.213-0.033-1.748-0.07
+			c-0.379-0.027-0.733-0.063-1.063-0.104c-0.943-0.114-1.418-0.256-1.418-0.418s0.474-0.3,1.418-0.415
+			c0.797-0.096,1.733-0.15,2.813-0.166V2.698c-0.002-0.068,0.01-0.131,0.037-0.191c0.028-0.082,0.088-0.158,0.166-0.227
+			c0.137-0.113,0.305-0.17,0.498-0.168c0.194,0,0.364,0.055,0.506,0.168c0.133,0.113,0.203,0.246,0.211,0.4c0,0.006,0,0.012,0,0.018
+			v0.059c0.365,0.008,0.715,0.021,1.049,0.041c0.568,0.027,1.089,0.068,1.562,0.125c0.027,0.004,0.053,0.008,0.08,0.016
+			c0.893,0.111,1.342,0.246,1.344,0.402c-0.002,0.158-0.451,0.293-1.344,0.406c-0.027,0.004-0.053,0.008-0.08,0.012
+			c-0.748,0.094-1.617,0.148-2.609,0.168v1.244h0.619c0.195,0,0.363,0.061,0.502,0.174c0.139,0.115,0.209,0.254,0.209,0.414
+			c0,0.115-0.035,0.221-0.105,0.313c-0.121,0.133-0.297,0.227-0.524,0.28c-1.943,0.388-3.89,0.773-5.83,1.16l2.228,3.875
+			c0.014,0.021,0.024,0.037,0.037,0.06c0.532,1.245,0.161,2.243-1.115,2.993c-0.16,0.097-0.338,0.132-0.529,0.104
+			c-0.189-0.026-0.342-0.108-0.453-0.246c-0.115-0.133-0.156-0.278-0.125-0.438c0.031-0.159,0.129-0.284,0.289-0.379
+			c0.686-0.409,0.885-0.953,0.596-1.631l-2.34-4.057l-0.609,0.125V9.94c0,0.145-0.043,0.276-0.129,0.401v0.002
+			c-0.088,0.125-0.207,0.226-0.356,0.294l-2.458,1.174v0.004c-0.157,0.07-0.319,0.107-0.49,0.107
+			c-0.173-0.002-0.335-0.039-0.484-0.111L12,10.634l-0.006-0.004c-0.147-0.07-0.266-0.17-0.351-0.295
+			c-0.086-0.125-0.13-0.258-0.129-0.398v-2.02l-0.612-0.123l-2.34,4.055c-0.292,0.678-0.094,1.221,0.594,1.631
+			c0.16,0.095,0.256,0.22,0.29,0.379c0.031,0.158-0.012,0.306-0.127,0.438c-0.111,0.136-0.263,0.218-0.453,0.248
+			c-0.192,0.024-0.368-0.01-0.529-0.104c-1.276-0.75-1.648-1.748-1.114-2.994c0.011-0.021,0.022-0.039,0.036-0.059l2.228-3.875
+			C7.542,7.125,5.6,6.739,3.655,6.353C3.425,6.297,3.25,6.204,3.129,6.071C3.061,5.979,3.024,5.876,3.024,5.758
+			c0-0.159,0.069-0.299,0.209-0.414C3.373,5.231,3.541,5.17,3.736,5.17h0.619V3.926c-0.993-0.02-1.863-0.073-2.609-0.168
+			c-0.027-0.002-0.054-0.006-0.08-0.01C0.772,3.633,0.325,3.5,0.321,3.34c0.003-0.153,0.451-0.291,1.345-0.401
+			c0.026-0.006,0.053-0.01,0.08-0.015c0.472-0.057,0.992-0.098,1.562-0.125c0.333-0.021,0.683-0.032,1.048-0.043V2.698
+			c0-0.006,0-0.012,0-0.018c0.007-0.154,0.077-0.289,0.21-0.4c0.14-0.113,0.309-0.17,0.506-0.168c0.195,0,0.362,0.055,0.499,0.168
+			c0.076,0.068,0.131,0.143,0.164,0.227C5.761,2.567,5.773,2.63,5.772,2.698v0.059c1.077,0.016,2.014,0.07,2.813,0.166
+			c0.944,0.117,1.417,0.256,1.418,0.418c-0.001,0.162-0.474,0.301-1.418,0.416C8.253,3.798,7.898,3.833,7.521,3.86
+			c-0.535,0.037-1.117,0.062-1.748,0.07v1.238h5.151c0.286-0.289,0.651-0.51,1.096-0.658c0.436-0.145,0.945-0.223,1.535-0.234h0.074
+			c0.067-0.002,0.138-0.002,0.207,0h2.203C16.108,4.274,16.177,4.274,16.244,4.276z"/>
+	</g>
+	<g>
+		<path d="M14.934,8.089c0.225,0,0.415,0.066,0.57,0.199c0.158,0.131,0.236,0.287,0.236,0.473c0,0.187-0.078,0.344-0.236,0.477
+			c-0.155,0.131-0.346,0.195-0.57,0.195c-0.223,0-0.411-0.063-0.568-0.195c-0.158-0.133-0.238-0.29-0.238-0.477
+			c0-0.186,0.08-0.342,0.238-0.473C14.521,8.155,14.711,8.089,14.934,8.089z"/>
+	</g>
+</g>
+</svg>

src/components/account/find/AccountFindPassword.js

@@ -0,0 +1,512 @@
+import { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupText,
+  Col,
+  TabPane,
+  FormGroup,
+  Input,
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from 'reactstrap';
+import { User, Lock } from 'react-feather';
+import '../../../assets/css/custom.css';
+import { findAPI } from '../../../modules/account/find/apis/findApi';
+import { accountApi } from '../../../modules/account/register/apis/accountApi';
+import { updatePwAction } from '../../../modules/account/find/actions/findAction';
+
+export const AccountFindPassword = props => {
+  const dispatch = useDispatch();
+  const [activeTab, setActiveTab] = useState('2');
+
+  // ** Function to toggle tabs
+  const toggle = tab => setActiveTab(tab);
+  //modal
+  const [confirmModal, setConfirmModal] = useState(false);
+  const [saveModal, setSaveModal] = useState(false);
+  const [modal, setModal] = useState({
+    isOpen: false,
+    title: '',
+    desc: '',
+    color: ''
+  });
+
+  //state값
+  const { idResult, userId, pwResult, udResult } = useSelector(
+    state => state.findState
+  );
+
+  //param으로 넘기기 위한 값
+  const [inputId, setInputId] = useState('');
+  const [inputHpno, setInputHpno] = useState('');
+  const [inputCrtfy, setInputCrtfy] = useState('');
+  const [inputNewPw, setInputNewPw] = useState('');
+  const [inputNewPwCk, setInputNewPwCk] = useState('');
+
+  //3분 시간 및 인증
+  const [minutes_Counter, setMinutes_Counter] = useState('03');
+  const [seconds_Counter, setSeconds_Counter] = useState('00');
+  const [timer, setTimer] = useState(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const [sendCount, setSendCount] = useState(0);
+  const [isCrtfy, setIsCrtfy] = useState(false);
+
+  useEffect(() => {
+    setIsRunning(true);
+    if (isRunning) clearInterval(timer);
+    return () => {
+      clearInterval(timer);
+      setIsRunning(false);
+    };
+  }, []);
+
+  const handlerSend = async () => {
+    if (!inputId) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '아이디를 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    if (!inputHpno) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '휴대폰 번호를 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    if (sendCount >= 3) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '인증번호가 발송은 3회까지만 가능합니다.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+    if (inputHpno.length < 11) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '올바른 번호를 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    const res = await findAPI.sendForPw({ userId: inputId, hpno: inputHpno });
+    if (res?.data.code === -1) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '가입되지 않은 회원정보입니다. 다시 확인해 주세요.',
+        color: 'modal-danger'
+      });
+    } else if (res?.data.code === 0) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '인증번호가 발송되었습니다.',
+        color: 'modal-primary'
+      });
+      timeStart();
+    }
+  };
+
+  const timeStart = () => {
+    if (isRunning) {
+      clearInterval(timer);
+    }
+
+    setIsRunning(true);
+    setIsCrtfy(false);
+
+    setSendCount(sendCount + 1);
+    timerStart(180);
+  };
+
+  const timerStart = count => {
+    let minutes, seconds;
+
+    const timer = setInterval(() => {
+      setIsRunning(true);
+      minutes = parseInt(count / 60, 10);
+      seconds = parseInt(count % 60, 10);
+      minutes = minutes < 10 ? '0' + minutes : minutes;
+      seconds = seconds < 10 ? '0' + seconds : seconds;
+      setMinutes_Counter(minutes);
+      setSeconds_Counter(seconds);
+
+      //타이머 끝
+      if (--count < 0) {
+        clearInterval(timer);
+        setIsRunning(false);
+        // setValue('crtfyNo', '');
+        // setCrtfyNo('');
+        setModal({
+          isOpen: true,
+          title: '인증번호 만료',
+          desc: '인증번호가 만료되었습니다.',
+          color: 'modal-danger'
+        });
+      }
+    }, 1000);
+
+    setTimer(timer);
+
+    return () => {
+      clearInterval(timer);
+    };
+  };
+
+  const handlerConfirm = async () => {
+    if (!inputId) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '아이디를 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    if (!inputHpno) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '휴대폰 번호를 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    if (!inputCrtfy) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 인증',
+        desc: '인증번호를 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy);
+    if (!res.data.result) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 인증',
+        desc: '인증번호가 잘못되었습니다.',
+        color: 'modal-danger'
+      });
+      return;
+    } else {
+      setModal({
+        isOpen: true,
+        title: '인증번호 인증',
+        desc: '인증되었습니다.',
+        color: 'modal-primary'
+      });
+      setIsCrtfy(true);
+      setIsRunning(false);
+    }
+  };
+
+  const handlerUpdatePw = async () => {
+    if (!inputNewPw || !inputNewPwCk) {
+      setModal({
+        isOpen: true,
+        title: '비밀번호 변경',
+        desc: '비밀번호를 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    const reg =
+      /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/;
+    if (!reg.test(inputNewPw) || !reg.test(inputNewPwCk)) {
+      setModal({
+        isOpen: true,
+        title: '비밀번호 변경',
+        desc: '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    if (inputNewPw !== inputNewPwCk) {
+      setModal({
+        isOpen: true,
+        title: '비밀번호 변경',
+        desc: '비밀번호가 일치하지 않습니다.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    if (inputNewPw === inputNewPwCk && inputNewPw && inputNewPwCk) {
+      dispatch(
+        updatePwAction.request({
+          userId: inputId,
+          hpno: inputHpno,
+          newPw: inputNewPw
+        })
+      );
+      setSaveModal(!saveModal);
+    }
+  };
+
+  let id = '';
+  let hpno = '';
+  let crtfyhp = '';
+  let newpw = '';
+  let newpwck = '';
+  const handlerChange = e => {
+    const { name, value } = e.target;
+
+    if (name == 'userId') {
+      id = value;
+      setInputId(id);
+    } else if (name == 'hpno') {
+      const regex = /^[0-9]{0,11}$/;
+      if (regex.test(value)) {
+        hpno = value;
+        setInputHpno(hpno);
+      }
+    } else if (name == 'crtfyhpNo') {
+      const regex = /^[0-9]{0,6}$/;
+      if (regex.test(value)) {
+        crtfyhp = value;
+        setInputCrtfy(crtfyhp);
+      }
+    } else if (name == 'newPw') {
+      const regex = /^[A-Za-z0-9@$!%*#?&]{0,20}$/;
+      if (regex.test(value)) {
+        newpw = value;
+        setInputNewPw(newpw);
+      }
+    } else if (name == 'newPwCk') {
+      const regex = /^[A-Za-z0-9@$!%*#?&]{0,20}$/;
+      if (regex.test(value)) {
+        newpwck = value;
+        setInputNewPwCk(newpwck);
+      }
+    }
+  };
+
+  // const handlerClose = () => {
+  //   setModal({ ...modal, isOpen: !modal.isOpen });
+  //   setConfirmModal({ ...confirmModal, isOpen: !confirmModal.isOpen});
+  //   props.handlerClose();
+  // }
+
+  return (
+    <>
+      <TabPane tabId='2'>
+        <FormGroup className='form-label-group position-relative has-icon-left'>
+          <InputGroup className=''>
+            <InputGroupAddon addonType='prepend'>
+              <InputGroupText>
+                <User size={14} />
+              </InputGroupText>
+            </InputGroupAddon>
+            <Input
+              type='text'
+              id='userId'
+              name='userId'
+              placeholder='아이디'
+              value={inputId}
+              onChange={handlerChange}
+            />
+          </InputGroup>
+        </FormGroup>
+        <FormGroup>
+          <div className='input-btn'>
+            <Col md='3' xs='12'>
+              <Input type='select' placeholder='+(국가번호)'>
+                {/* <option>+82</option> */}
+                <option value={'+82'}>대한민국(+82)</option>
+                <option value={'+81'}>일본(+81)</option>
+                <option value={'+86'}>중국(+86)</option>
+              </Input>
+            </Col>
+            <Col md='6' xs='12'>
+              <Input
+                type='number'
+                id='hpno'
+                name='hpno'
+                placeholder='01012345678'
+                value={inputHpno}
+                onChange={handlerChange}
+              />
+            </Col>
+            <Col md='3' xs='12'>
+              <Button color='primary' type='button' onClick={handlerSend}>
+                인증번호 발송
+              </Button>
+            </Col>
+          </div>
+        </FormGroup>
+        <FormGroup>
+          <div className='input-btn time-span'>
+            <Col md='9' xs='12' className='timeInput'>
+              <Input
+                type='number'
+                id='crtfyhpNo'
+                name='crtfyhpNo'
+                placeholder='인증번호 입력'
+                value={inputCrtfy}
+                onChange={handlerChange}
+                {...(sendCount > 0 ? {} : { disabled: true })}
+              />
+              {/* <span className='time'>남은시간 : 3:00</span> */}
+              <span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}>
+                남은시간 {minutes_Counter}:{seconds_Counter}
+              </span>
+            </Col>
+            <Col md='3' xs='12'>
+              <Button
+                color='primary'
+                type='button'
+                onClick={handlerConfirm}
+                {...(isRunning ? {} : { disabled: true })}
+              >
+                인증번호 확인
+              </Button>
+            </Col>
+          </div>
+        </FormGroup>
+        <FormGroup>
+          <div className='full-btn-2n vertically-centered-modal'>
+            {/* <div className='full-btn-2n vertically-centered-confirmModal'> */}
+            <Button
+              color='secondary'
+              type='button'
+              onClick={props.handlerClose}
+            >
+              취소
+            </Button>
+            <Button
+              color='primary'
+              type='button'
+              onClick={() => setConfirmModal(!confirmModal)}
+              {...(isCrtfy ? {} : { disabled: true })}
+            >
+              확인
+            </Button>
+
+            <Modal
+              isOpen={confirmModal}
+              toggle={() => setConfirmModal(!confirmModal)}
+              className='modal-dialog-centered user-search-modal'
+            >
+              <ModalHeader toggle={() => setConfirmModal(!confirmModal)}>
+                비밀번호 확인
+              </ModalHeader>
+              <ModalBody>
+                <span className='etc-txt'>
+                  새로운 비밀번호로 변경해 주세요.
+                </span>
+                <FormGroup className='form-label-group position-relative has-icon-left'>
+                  <InputGroup>
+                    <InputGroupAddon addonType='prepend'>
+                      <InputGroupText>
+                        <Lock size={14} />
+                      </InputGroupText>
+                    </InputGroupAddon>
+                    <Input
+                      type='password'
+                      id='newPw'
+                      name='newPw'
+                      placeholder='새로운 비밀번호'
+                      value={inputNewPw}
+                      onChange={handlerChange}
+                    />
+                  </InputGroup>
+                </FormGroup>
+                <FormGroup className='form-label-group position-relative has-icon-left mb-0'>
+                  <InputGroup>
+                    <InputGroupAddon addonType='prepend'>
+                      <InputGroupText>
+                        <Lock size={14} />
+                      </InputGroupText>
+                    </InputGroupAddon>
+                    <Input
+                      type='password'
+                      id='newPwCk'
+                      name='newPwCk'
+                      placeholder='새로운 비밀번호 확인'
+                      value={inputNewPwCk}
+                      onChange={handlerChange}
+                    />
+                  </InputGroup>
+                </FormGroup>
+              </ModalBody>
+              <ModalFooter>
+                <Button color='primary' type='button' onClick={handlerUpdatePw}>
+                  저장
+                </Button>
+
+                <div className='vertically-centered-modal'>
+                  <Modal
+                    isOpen={saveModal}
+                    toggle={() => setSaveModal(!saveModal)}
+                    modalClassName='modal-primary'
+                    className='modal-dialog-centered'
+                  >
+                    <ModalHeader toggle={() => setSaveModal(!saveModal)}>
+                      비밀번호 변경
+                    </ModalHeader>
+                    <ModalBody>
+                      변경이 완료되었습니다. 다시 로그인해 주세요.
+                    </ModalBody>
+                    <ModalFooter>
+                      <Button color='primary' onClick={props.handlerClose}>
+                        로그인
+                      </Button>{' '}
+                    </ModalFooter>
+                  </Modal>
+                </div>
+              </ModalFooter>
+            </Modal>
+          </div>
+        </FormGroup>
+
+        <div className='vertically-centered-modal'>
+          <Modal
+            isOpen={modal.isOpen}
+            toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+            modalClassName={modal.color}
+            className='modal-dialog-centered'
+          >
+            <ModalHeader
+              toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+            >
+              {modal.title}
+            </ModalHeader>
+            <ModalBody>{modal.desc}</ModalBody>
+            <ModalFooter>
+              <Button
+                color='danger'
+                onClick={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+              >
+                확인
+              </Button>
+            </ModalFooter>
+          </Modal>
+        </div>
+      </TabPane>
+    </>
+  );
+};

src/components/account/find/AccountFindTab.js

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button,
+  Modal, ModalHeader, ModalBody, ModalFooter  } from 'reactstrap'
+import classnames from 'classnames';
+import {
+  User,
+  Info,
+  Share,
+  X,
+  Lock,
+  Edit,
+  Trash2,
+  Image,
+  UserCheck,
+  Clipboard,
+  Settings,
+  AlertTriangle
+} from 'react-feather';
+import { AccountFindUserId } from "./AccountFindUserId";
+import { AccountFindPassword } from "./AccountFindPassword";
+import { AccountFindUserIdContainer } from "../../../containers/account/find/AccountFindUserIdContainer";
+import { AccountFindPasswordContainer } from "../../../containers/account/find/AccountFindPasswordContainer";
+import { useHistory } from 'react-router-dom'
+
+export const AccountFindTab = props => {
+  const [activeTab, setActiveTab] = useState('2');
+  const history = useHistory();
+
+  const toggle = tab => setActiveTab(tab)
+
+  // const toggle = tab => {
+  //   if (activeTab !== tab) setActiveTab(tab);
+  // };
+
+  const handlerClose = () => {
+    history.push(`/account/login`)
+  }
+
+  return(
+    <>
+      <div className='card-body-tab-menu'>
+        <Nav pills>
+          <NavItem>
+            {/* <NavLink active={activeTab === '1'} onClick={() => toggle('1')}> */}
+            <NavLink
+              className={classnames({ active: activeTab === '1' })}
+              onClick={() => {
+                toggle('1');
+              }}
+            >
+              <User size={14} />
+              <span className='align-middle d-none d-sm-block'>아이디 찾기</span>
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            {/* <NavLink active={activeTab === '2'} onClick={() => toggle('2')}> */}
+            <NavLink
+              className={classnames({active: activeTab === '2'})}
+              onClick={() => {
+                toggle('2');
+              }}
+            >
+              <Lock size={14} />
+              <span className='align-middle d-none d-sm-block'>비밀번호 찾기</span>
+            </NavLink>
+          </NavItem>
+        </Nav>            
+      </div>
+      <Row className='app-user-edit'>
+        <Col sm='12'>
+          <Card>
+            <CardBody className='card-body-tab-cont'>
+              <TabContent activeTab={activeTab}>
+                <AccountFindUserIdContainer
+                  handlerClose={handlerClose}
+                />
+                <AccountFindPasswordContainer 
+                  handlerClose={handlerClose}
+                />
+              </TabContent>
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+    </>
+  )
+
+}

src/components/account/find/AccountFindUserId.js

@@ -0,0 +1,420 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+  Form,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupText,
+  Col,
+  TabPane,
+  FormGroup,
+  Input,
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  FormFeedback
+} from 'reactstrap';
+import { User } from 'react-feather';
+
+import '../../../assets/css/custom.css';
+import {
+  findUserIdAction,
+  sendForIdAction
+} from '../../../modules/account/find/actions/findAction';
+import { accountApi } from '../../../modules/account/register/apis/accountApi';
+import { findAPI } from '../../../modules/account/find/apis/findApi';
+
+export const AccountFindUserId = props => {
+  const dispatch = useDispatch();
+  const [activeTab, setActiveTab] = useState('2');
+
+  // ** Function to toggle tabs
+  const toggle = tab => setActiveTab(tab);
+
+  //modal
+  const [confirmModal, setConfirmModal] = useState(false);
+  const [modal, setModal] = useState({
+    isOpen: false,
+    title: '',
+    desc: '',
+    color: ''
+  });
+
+  //state값
+  const { idResult, userId, pwResult, udResult } = useSelector(
+    state => state.findState
+  );
+
+  //param으로 넘기기 위한 값
+  const [inputName, setInputName] = useState('');
+  const [inputHpno, setInputHpno] = useState('');
+  const [inputCrtfy, setInputCrtfy] = useState('');
+
+  //3분 시간 및 인증
+  const [minutes_Counter, setMinutes_Counter] = useState('03');
+  const [seconds_Counter, setSeconds_Counter] = useState('00');
+  const [timer, setTimer] = useState(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const [sendCount, setSendCount] = useState(0);
+  const [isCrtfy, setIsCrtfy] = useState(false);
+
+  useEffect(() => {
+    setIsRunning(true);
+    if (isRunning) clearInterval(timer);
+    return () => {
+      clearInterval(timer);
+      setIsRunning(false);
+    };
+  }, []);
+
+  const handlerSend = async () => {
+    if (!inputName) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '이름을 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    if (!inputHpno) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '휴대폰 번호를 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    if (sendCount >= 3) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '인증번호가 발송은 3회까지만 가능합니다.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+    if (inputHpno.length < 11) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '올바른 번호를 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    const res = await findAPI.sendForId({
+      memberName: inputName,
+      hpno: inputHpno
+    });
+    if (res?.data.code === -1) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '가입되지 않은 회원정보입니다. 다시 확인해 주세요.',
+        color: 'modal-danger'
+      });
+    } else if (res?.data.code === 0) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '인증번호가 발송되었습니다.',
+        color: 'modal-primary'
+      });
+      timeStart();
+    }
+  };
+
+  const timeStart = () => {
+    if (isRunning) {
+      clearInterval(timer);
+    }
+
+    setIsRunning(true);
+    setIsCrtfy(false);
+
+    setSendCount(sendCount + 1);
+    timerStart(180);
+  };
+
+  const timerStart = count => {
+    let minutes, seconds;
+
+    const timer = setInterval(() => {
+      setIsRunning(true);
+      minutes = parseInt(count / 60, 10);
+      seconds = parseInt(count % 60, 10);
+      minutes = minutes < 10 ? '0' + minutes : minutes;
+      seconds = seconds < 10 ? '0' + seconds : seconds;
+      setMinutes_Counter(minutes);
+      setSeconds_Counter(seconds);
+
+      //타이머 끝
+      if (--count < 0) {
+        clearInterval(timer);
+        setIsRunning(false);
+        // setValue('crtfyNo', '');
+        // setCrtfyNo('');
+        setModal({
+          isOpen: true,
+          title: '인증번호 만료',
+          desc: '인증번호가 만료되었습니다.',
+          color: 'modal-danger'
+        });
+      }
+    }, 1000);
+
+    setTimer(timer);
+
+    return () => {
+      clearInterval(timer);
+    };
+  };
+
+  const handlerConfirm = async () => {
+    if (!inputHpno) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 인증',
+        desc: '휴대폰 번호를 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    if (!inputName) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 인증',
+        desc: '이름을 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    if (!inputCrtfy) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 인증',
+        desc: '인증번호를 입력해 주세요.',
+        color: 'modal-danger'
+      });
+      return;
+    }
+
+    const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy);
+    if (!res.data.result) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 인증',
+        desc: '인증번호가 잘못되었습니다.',
+        color: 'modal-danger'
+      });
+      return;
+    } else {
+      setModal({
+        isOpen: true,
+        title: '인증번호 인증',
+        desc: '인증되었습니다.',
+        color: 'modal-primary'
+      });
+      setIsCrtfy(true);
+      setIsRunning(false);
+    }
+  };
+
+  let memberName = '';
+  let hpno = '';
+  let crtfyhp = '';
+  const handlerChange = e => {
+    const { name, value } = e.target;
+
+    if (name == 'memberName') {
+      const regex = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]{0,10}$/;
+      if (regex.test(value)) {
+        memberName = value;
+        setInputName(memberName);
+      }
+    } else if (name == 'hpno') {
+      const regex = /^[0-9]{0,11}$/;
+      if (regex.test(value)) {
+        hpno = value;
+        setInputHpno(hpno);
+      }
+    } else if (name == 'crtfyhpNo') {
+      const regex = /^[0-9]{0,6}$/;
+      if (regex.test(value)) {
+        crtfyhp = value;
+        setInputCrtfy(crtfyhp);
+      }
+    }
+  };
+
+  //모든 인증 완료 후 확인버튼
+  const handlerFindId = () => {
+    dispatch(
+      findUserIdAction.request({ memberName: inputName, hpno: inputHpno })
+    );
+    setConfirmModal(!confirmModal);
+  };
+
+  return (
+    <>
+      <TabPane tabId='1'>
+        <FormGroup className='form-label-group position-relative has-icon-left'>
+          <InputGroup className=''>
+            <InputGroupAddon addonType='prepend'>
+              <InputGroupText>
+                <User size={14} />
+              </InputGroupText>
+            </InputGroupAddon>
+            <Input
+              type='text'
+              id='memberName'
+              name='memberName'
+              placeholder='이름'
+              value={inputName}
+              onChange={handlerChange}
+            />
+          </InputGroup>
+        </FormGroup>
+        <FormGroup>
+          <div className='input-btn'>
+            <Col md='3' xs='12'>
+              <Input
+                type='select'
+                id='cntryCd'
+                name='cntryCd'
+                placeholder='+(국가번호)'
+              >
+                {/* <option>+82</option> */}
+                <option value={'+82'}>대한민국(+82)</option>
+                <option value={'+81'}>일본(+81)</option>
+                <option value={'+86'}>중국(+86)</option>
+              </Input>
+            </Col>
+            <Col md='6' xs='12'>
+              <Input
+                type='number'
+                id='hpno'
+                name='hpno'
+                placeholder='01012345678'
+                value={inputHpno}
+                onChange={handlerChange}
+              />
+            </Col>
+            <Col md='3' xs='12'>
+              <Button color='primary' type='button' onClick={handlerSend}>
+                인증번호 발송
+              </Button>
+            </Col>
+          </div>
+        </FormGroup>
+
+        <FormGroup>
+          <div className='input-btn'>
+            <Col md='9' xs='12' className='timeInput'>
+              <Input
+                type='number'
+                id='crtfyhpNo'
+                name='crtfyhpNo'
+                placeholder='인증번호 입력'
+                value={inputCrtfy}
+                onChange={handlerChange}
+                {...(sendCount > 0 ? {} : { disabled: true })}
+              />
+              <span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}>
+                남은시간 {minutes_Counter}:{seconds_Counter}
+              </span>
+            </Col>
+            <Col md='3' xs='12'>
+              <Button
+                color='primary'
+                type='button'
+                onClick={handlerConfirm}
+                {...(isRunning ? {} : { disabled: true })}
+              >
+                인증번호 확인
+              </Button>
+            </Col>
+          </div>
+        </FormGroup>
+        <FormGroup>
+          <div className='full-btn-2n vertically-centered-confirmModal'>
+            <Button
+              color='secondary'
+              type='button'
+              onClick={props.handlerClose}
+            >
+              취소
+            </Button>
+            <Button
+              color='primary'
+              type='button'
+              onClick={handlerFindId}
+              {...(isCrtfy ? {} : { disabled: true })}
+            >
+              확인
+            </Button>
+
+            <Modal
+              isOpen={confirmModal}
+              toggle={() => setConfirmModal(!confirmModal)}
+              modalClassName='modal-primary'
+              className='modal-dialog-centered'
+            >
+              <ModalHeader toggle={() => setConfirmModal(!confirmModal)}>
+                아이디 확인
+              </ModalHeader>
+              <ModalBody>
+                회원님의 아이디는
+                <br />
+                <span className='user-search-id'>
+                  {userId?.data.userId}
+                </span>{' '}
+                입니다.
+                {/* 회원님의 아이디는<br/><span className='user-search-id'>{result?.data.userId}</span> 입니다. */}
+              </ModalBody>
+              <ModalFooter>
+                <Button color='primary' onClick={props.handlerClose}>
+                  로그인
+                </Button>{' '}
+              </ModalFooter>
+            </Modal>
+          </div>
+        </FormGroup>
+
+        <div className='vertically-centered-modal'>
+          <Modal
+            isOpen={modal.isOpen}
+            toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+            modalClassName={modal.color}
+            className='modal-dialog-centered'
+          >
+            <ModalHeader
+              toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+            >
+              {modal.title}
+            </ModalHeader>
+            <ModalBody>{modal.desc}</ModalBody>
+            <ModalFooter>
+              <Button
+                color='danger'
+                onClick={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+              >
+                확인
+              </Button>{' '}
+            </ModalFooter>
+          </Modal>
+        </div>
+      </TabPane>
+    </>
+  );
+};

src/components/account/login/AccountLogin.js

@@ -14,7 +14,7 @@ import {
 } from 'reactstrap';
 import { Mail, Lock, Check, Facebook, Twitter, GitHub } from 'react-feather';
 
-import loginImg from '../../../assets/images/login01.png';
+import loginImg from '../../../assets/images/login_img.png';
 import { Link } from 'react-router-dom';
 
 import '../../../assets/css/custom.css';
@@ -28,8 +28,9 @@ export const AccountLogin = ({ props }) => {
   const { isLogin, message } = useSelector(state => state.authState);
 
   const [loginForm, setLoginForm] = useState({
-    userId: 'lyhand',
-    userPswd: 'palnet!234'
+    userId: '',
+    userPswd: ''
+    // userPswd: 'palnet5909!'
   });
 
   //모달 관련 설정
@@ -41,7 +42,6 @@ export const AccountLogin = ({ props }) => {
 
   const handelrChange = e => {
     const { name, value } = e.target;
-    console.log(name);
     setLoginForm({
       ...loginForm,
       [name]: value
@@ -59,14 +59,14 @@ export const AccountLogin = ({ props }) => {
       setModal({
         isOpen: true,
         title: '필수값 입력 오류',
-        desc: '아이디를 입력해주세요'
+        desc: '아이디를 입력해 주세요'
       });
       return;
     } else if (!loginForm.userPswd) {
       setModal({
         isOpen: true,
         title: '필수값 입력 오류',
-        desc: '비밀번호를 입력해주세요'
+        desc: '비밀번호를 입력해 주세요'
       });
       return;
     }
@@ -92,17 +92,20 @@ export const AccountLogin = ({ props }) => {
   return (
     <>
       <div className='login'>
-        <div className='login-logo'>Drone Control System</div>
+        {/* <div className='login-logo'>Drone Control System</div> */}
+        <div className='login-logo'>PAV 모니터링 시스템</div>
         <div className='login-img'>
           <img src={loginImg} />
         </div>
         <div className='login-form'>
           <div className='login-txt'>
-            <h2>Welcome to Drone Control System</h2>
+            {/* <h2>Welcome to Drone Control System</h2> */}
+            <h2>PAV 모니터링 시스템</h2>
             <p>
               control system is a web system that provides
               <br />
-              convenient control and monitoring of drones!
+              {/* convenient control and monitoring of drones! */}
+              convenient control and monitoring of PAV!
             </p>
           </div>
           <Form>
@@ -117,6 +120,7 @@ export const AccountLogin = ({ props }) => {
                   placeholder='ID'
                   name='userId'
                   value={loginForm.userId}
+                  onKeyPress={onKeyPress}
                   onChange={handelrChange}
                 />
               </InputGroup>
@@ -153,7 +157,8 @@ export const AccountLogin = ({ props }) => {
             <div className='d-flex justify-content-between align-items-center login-link'>
               <div>비밀번호를 잊으셨나요?</div>
               <div className='float-right'>
-                <a href='#'>비밀번호찾기</a>
+                <Link to='/account/find'>비밀번호찾기</Link>
+                {/* <a href='#'>비밀번호찾기</a> */}
               </div>
             </div>
           </Form>

src/components/account/mypage/AccountMypageForm.js

@@ -0,0 +1,324 @@
+// ** React Imports
+import { useState, useEffect } from 'react';
+
+import {
+  Card,
+  CardBody,
+  Row,
+  Col,
+  Nav,
+  NavItem,
+  NavLink,
+  TabContent,
+  TabPane,
+  Alert,
+  FormGroup,
+  Form,
+  Input,
+  Label,
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from 'reactstrap';
+
+// ** Styles
+import '../../../assets/css/custom.css';
+//import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel';
+//const [detailData, setDetailData] = useState(userPage.UserPageData);
+import { useHistory } from 'react-router-dom';
+
+const AccountMypageForm = ({
+  userInfo,
+  handlerSmsSend,
+  isCrtfy,
+  seconds_Counter,
+  handler,
+  minutes_Counter,
+  isRunning,
+  formModal,
+  handlerUpdate,
+  modal,
+  handlerSmsConfirm,
+  handlerChange,
+  handlerInput,
+  inputHpno,
+  inputCrtfy,
+  okinput,
+
+  handlerWidthrow
+}) => {
+  const history = useHistory();
+
+  function handleUseHitory() {
+    history.push('/');
+  }
+
+  return (
+    <Row className='app-user-edit'>
+      <Col sm='12'>
+        <Card>
+          <CardBody className='card-body-tab-cont'>
+            <TabPane tabId='1'>
+              <div className='search-info-box'>
+                {userInfo ? (
+                  <Row>
+                    <Col className='list-input' md='3' sm='12'>
+                      <FormGroup>
+                        <Label for='memberName'>이름</Label>
+                        <Input
+                          type='text'
+                          id='memberName'
+                          bsSize='sm'
+                          placeholder=''
+                          value={userInfo.memberName || ''}
+                          disabled
+                        />
+                      </FormGroup>
+                    </Col>
+                    <Col className='list-input' md='3' sm='12'>
+                      <FormGroup>
+                        <Label for='brithdyDate'>생년월일</Label>
+                        <Input
+                          type='text'
+                          id='brithdyDate'
+                          bsSize='sm'
+                          placeholder=''
+                          value={userInfo.brthdyDate || ''}
+                          disabled
+                        />
+                      </FormGroup>
+                    </Col>
+                    <Col className='list-input' md='3' sm='12'>
+                      <FormGroup>
+                        <Label for='cenderCD'>성별</Label>
+                        <Input
+                          type='select'
+                          name='select'
+                          bsSize='sm'
+                          id='cenderCD'
+                          value={userInfo.genderCd || ''}
+                          disabled
+                        >
+                          <option>남자</option>
+                          <option>여자</option>
+                        </Input>
+                      </FormGroup>
+                    </Col>
+                    <Col className='list-input' md='3' sm='12'>
+                      <FormGroup>
+                        <Label for='cntryCD'>국가코드</Label>
+                        <Input
+                          type='select'
+                          name='select'
+                          bsSize='sm'
+                          id='cntryCD'
+                        >
+                          <option>대한민국</option>
+                        </Input>
+                      </FormGroup>
+                    </Col>
+                    <Col className='list-input' md='3' sm='12'>
+                      <FormGroup>
+                        <Label for='userId'>ID</Label>
+                        <Input
+                          type='text'
+                          id='userId'
+                          bsSize='sm'
+                          placeholder=''
+                          value={userInfo.userId || ''}
+                          disabled
+                        />
+                      </FormGroup>
+                    </Col>
+                    <Col className='list-input' md='3' sm='12'>
+                      <FormGroup>
+                        <Label for='email'>E-mail</Label>
+                        <Input
+                          type='text'
+                          id='email'
+                          name='email'
+                          bsSize='sm'
+                          placeholder=''
+                          defaultValue={userInfo.email}
+                          onChange={e => handlerInput(e)}
+                        />
+                      </FormGroup>
+                    </Col>
+                    <Col className='list-input' md='3' sm='12'>
+                      <FormGroup>
+                        <Label className='form-label' for='clncd'>
+                          휴대폰 번호
+                        </Label>
+                        <div className='user-phone-btn'>
+                          <Button.Ripple
+                            type='button'
+                            color='primary'
+                            onClick={handler}
+                          >
+                            <span className='d-sm-inline-block'>변경</span>
+                          </Button.Ripple>
+                        </div>
+                        <Input
+                          type='number'
+                          name='clncd'
+                          id='hpno'
+                          bsSize='sm'
+                          placeholder=''
+                          disabled
+                          value={!okinput ? userInfo.hpno || '' : inputHpno}
+                        />
+                        <div>
+                          <Modal
+                            isOpen={formModal}
+                            toggle={handler}
+                            className='modal-dialog-centered'
+                          >
+                            <ModalHeader toggle={handler}>
+                              휴대폰번호 변경
+                            </ModalHeader>
+                            <ModalBody>
+                              <div className='modal-box'>
+                                <p className='ti'>휴대폰 번호 변경</p>
+                                <p className='txt'>
+                                  변경할 휴대폰 번호로 인증을 완료해 주세요.
+                                </p>
+                              </div>
+                              <Row>
+                                <Col className='list-input' md='12'>
+                                  <FormGroup>
+                                    <Row className='input-inline-btn'>
+                                      <Col md='8'>
+                                        <Label
+                                          className='form-label'
+                                          for='hpno'
+                                        >
+                                          휴대폰 번호
+                                        </Label>
+                                        <Input
+                                          type='number'
+                                          name='hpno'
+                                          id='hpno'
+                                          bsSize='sm'
+                                          value={inputHpno}
+                                          onChange={handlerChange}
+                                          placeholder='01012345678'
+                                        />
+                                      </Col>
+                                      <Col md='4' xs='12'>
+                                        {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}
+                                        <span
+                                          className={
+                                            !isRunning || isCrtfy
+                                              ? 'time d-none'
+                                              : 'time'
+                                          }
+                                        >
+                                          남은시간 {minutes_Counter}:
+                                          {seconds_Counter}
+                                        </span>
+                                        <Button.Ripple
+                                          type='button'
+                                          color='secondary'
+                                          onClick={handlerSmsSend}
+                                        >
+                                          <span className='d-sm-inline-block'>
+                                            인증번호 발송
+                                          </span>
+                                        </Button.Ripple>
+                                      </Col>
+                                    </Row>
+                                  </FormGroup>
+                                </Col>
+                                <Col className='list-input' md='12'>
+                                  <FormGroup>
+                                    <Row className='input-inline-btn'>
+                                      <Col md='8'>
+                                        <Label
+                                          className='form-label'
+                                          for='crtfyNo'
+                                        >
+                                          인증번호
+                                        </Label>
+                                        <Input
+                                          type='number'
+                                          name='crtfyhpNo'
+                                          id='crtfyhpNo'
+                                          bsSize='sm'
+                                          value={inputCrtfy}
+                                          onChange={handlerChange}
+                                          {...(isRunning
+                                            ? {}
+                                            : { disabled: true })}
+                                        />
+                                      </Col>
+                                      <Col md='4' xs='12'>
+                                        <Button.Ripple
+                                          type='button'
+                                          color='secondary'
+                                          onClick={handlerSmsConfirm}
+                                          {...(isRunning
+                                            ? {}
+                                            : { disabled: true })}
+                                        >
+                                          <span className='d-sm-inline-block'>
+                                            인증하기
+                                          </span>
+                                        </Button.Ripple>
+                                      </Col>
+                                    </Row>
+                                  </FormGroup>
+                                </Col>
+                              </Row>
+                            </ModalBody>
+                            <ModalFooter>
+                              <Button color='primary' onClick={handler}>
+                                확인
+                              </Button>
+                            </ModalFooter>
+                          </Modal>
+                        </div>
+                      </FormGroup>
+                    </Col>
+                  </Row>
+                ) : (
+                  <></>
+                )}
+              </div>
+              <div className='d-flex justify-content-between'>
+                <div>
+                  <Button.Ripple
+                    className='mr-1'
+                    color='primary'
+                    size='sm'
+                    onClick={handlerUpdate}
+                  >
+                    저장
+                  </Button.Ripple>
+                  <Button.Ripple
+                    color='danger'
+                    size='sm'
+                    onClick={handleUseHitory}
+                  >
+                    취소
+                  </Button.Ripple>
+                </div>
+                <div>
+                  <Button.Ripple
+                    color='danger'
+                    size='sm'
+                    onClick={() => handlerWidthrow()}
+                  >
+                    회원탈퇴
+                  </Button.Ripple>
+                </div>
+              </div>
+            </TabPane>
+          </CardBody>
+        </Card>
+      </Col>
+    </Row>
+  );
+};
+export default AccountMypageForm;

src/components/account/mypage/AccountMypagePwForm.js

@@ -0,0 +1,143 @@
+// ** React Imports
+import { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+    Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, FormFeedback, Form, Input, Label, Button,
+    Modal, ModalHeader, ModalBody, ModalFooter
+} from 'reactstrap'
+// ** Styles
+import '../../../assets/css/custom.css';
+import { pwUpdateAction, pwCheckAction } from '../../../modules/account/login/actions/authAction';
+import { useHistory } from 'react-router-dom';
+import { ErrorModal } from '../../modal/ErrorModal';
+
+
+const AccountMypagePwForm = ({ activeTab }) => {
+    const { result } = useSelector(state => state.UserPageState)
+    const [userPswd, setuserPswd] = useState('');
+    const [inputs, setInputs] = useState({
+        newPswd: '',
+        newPswdConfirm: ''
+    });
+    const { newPswd, newPswdConfirm } = inputs;
+
+    const [resultOk, setresultOk] = useState(true);
+    const [btnOk, setbtnOk] = useState(false);
+    const [modal, setModal] = useState({
+        isOpen: false,
+        title: '',
+        desc: ''
+    });
+
+    useEffect(() => {
+        if (result) {
+            if (result.errorCode) {
+                setresultOk(true)
+                setbtnOk(false)
+            } else {
+                setresultOk(false)
+                setbtnOk(true)
+            }
+        }
+    }, [result])
+
+    useEffect(() => {
+        setresultOk(true)
+        setbtnOk(false)
+    }, [activeTab])
+
+
+    const dispatch = useDispatch();
+
+    const history = useHistory();
+
+    const onChange = (e) => {
+        setuserPswd(e.target.value);
+    };
+
+    const onKeyPress = e => {
+        if (e.key == 'Enter') {
+            pwok();
+        }
+    };
+    const onChanges = (e) => {
+        const { value, name } = e.target;
+        setInputs({
+            ...inputs,
+            [name]: value
+        });
+    };
+
+    function handleUseHitory() {
+        history.push('/');
+    }
+
+    function pwSubmit() {
+        const reg_pw =
+            /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/;
+        if (!reg_pw.test(inputs.newPswd && inputs.newPswdConfirm)) {
+            setModal({
+                isOpen: true,
+                title: '필수값 입력 오류',
+                desc: '8 자 이상, 20 자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.',
+            });
+        }
+        else if (inputs.newPswd != inputs.newPswdConfirm) {
+            setModal({
+                isOpen: true,
+                title: '필수값 입력 오류',
+                desc: '비밀번호가 일치하지 않습니다.',
+            });
+        }
+        else {
+            dispatch(pwUpdateAction.request(inputs));
+        }
+    }
+
+    function pwok() {
+        dispatch(pwCheckAction.request(userPswd));
+    }
+
+    return (
+        <Card>
+            <CardBody className='card-body-tab-cont'>
+                <TabPane tabId='2'>
+                    <div className='search-info-box'>
+                        <Row>
+                            <Col className='list-input' md='3' sm='12'>
+                                <FormGroup>
+                                    <Label for='userPswd'>기존 비밀번호</Label>
+                                    <Input type='password' readOnly={btnOk} onKeyPress={onKeyPress} id='userPswd' onChange={onChange} value={userPswd} name="userPswd" bsSize='sm' autoComplete='off' placeholder='' />
+                                </FormGroup>
+                            </Col>
+                            <div className='d-flex align-items-center'>
+                                <Button.Ripple className='mr-1' color='primary' onClick={pwok} size='sm'>확인</Button.Ripple>
+                            </div>
+
+                            <Col className='list-input' md='3' sm='12' style={{ display: resultOk ? 'none' : 'inline' }} >
+                                <FormGroup>
+                                    <Label for='newPswd' >새로운 비밀번호</Label>
+                                    <Input type='password' id='newPswd' onChange={onChanges} value={newPswd} name="newPswd" bsSize='sm' autoComplete='off' placeholder='' />
+                                </FormGroup>
+                            </Col>
+                            <Col className='list-input' md='3' sm='12' style={{ display: resultOk ? 'none' : 'inline' }}>
+                                <FormGroup>
+                                    <Label for='newPswdConfirm'>새로운 비밀번호 확인</Label>
+                                    <Input type='password' id='newPswdConfirm' onChange={onChanges} value={newPswdConfirm} name="newPswdConfirm" bsSize='sm' autoComplete='off' placeholder='' />
+                                </FormGroup>
+                            </Col>
+                        </Row>
+                    </div>
+                    <div className='d-flex align-items-center'>
+                        <Button.Ripple className='mr-1' color='primary' onClick={pwSubmit} disabled={resultOk} size='sm'>저장</Button.Ripple>
+                        <Button.Ripple color='danger' size='sm' onClick={handleUseHitory}>취소</Button.Ripple>
+                    </div>
+                </TabPane>
+            </CardBody>
+            <ErrorModal modal={modal} setModal={setModal} />
+        </Card >
+    )
+}
+
+export default AccountMypagePwForm;
+

src/components/account/register/AccountRegister.js

@@ -8,9 +8,9 @@ import { AccountRegisterComplete } from './AccountRegisterComplete';
 
 export const AccountRegister = ({ props }) => {
   const [stepper, setStepper] = useState(null);
+  const [memberName, setMemberName] = useState();
   const ref = useRef(null);
 
-  // console.log(props);
   const movePage = url => {
     props.history.push(url);
   };
@@ -36,6 +36,8 @@ export const AccountRegister = ({ props }) => {
           stepper={stepper}
           type='wizard-horizontal'
           movePage={movePage}
+          memberName={memberName}
+          setMemberName={setMemberName}
         />
       )
     },
@@ -48,6 +50,7 @@ export const AccountRegister = ({ props }) => {
           stepper={stepper}
           type='wizard-horizontal'
           movePage={movePage}
+          memberName={memberName}
         />
       )
     }

src/components/account/register/AccountRegisterComplete.js

@@ -20,8 +20,9 @@ import {
 import AppCollapse from '@components/app-collapse';
 import Select from 'react-select';
 import { selectThemeColors } from '@utils';
+import { useSelector } from 'react-redux';
 
-export const AccountRegisterComplete = ({ stepper, type, movePage }) => {
+export const AccountRegisterComplete = ({ stepper, type, movePage, memberName}) => {
   const handlerLogin = () => {
     movePage('/account/login');
   };
@@ -30,9 +31,9 @@ export const AccountRegisterComplete = ({ stepper, type, movePage }) => {
     <Fragment>
       <div className='complete-txt'>
         <img src={completeImg} />
-        <span className='big-txt'>환영합니다. 홍길동 님</span>
+        <span className='big-txt'>환영합니다. {memberName}님</span>
         <span className='d-block'>
-          모든 회원가입절차가 완료되었습니다. 로그인 후 사용해주세요.
+          모든 회원가입 절차가 완료되었습니다. 로그인 후 사용해 주세요.
         </span>
         <Button.Ripple type='submit' color='primary' onClick={handlerLogin}>
           <span className='align-middle d-block'>로그인</span>

src/components/account/register/AccountRegisterForm.js

@@ -25,7 +25,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import { accountApi } from '../../../modules/account/register/apis/accountApi';
 import * as Actions from '../../../modules/account/register/actions/accountAction';
 
-export const AccountRegisterForm = ({ stepper, type, movePage }) => {
+export const AccountRegisterForm = ({
+  stepper,
+  type,
+  movePage,
+  testName,
+  setMemberName
+}) => {
   const { agreeTerms } = useSelector(state => state.accountState);
   const [minutes_Counter, setMinutes_Counter] = useState('03');
   const [seconds_Counter, setSeconds_Counter] = useState('00');
@@ -75,7 +81,7 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
       setModal({
         isOpen: true,
         title: '인증번호 발송',
-        desc: '휴대폰 번호를 입력 해주세요.'
+        desc: '휴대폰 번호를 입력해 주세요.'
       });
       return;
     }
@@ -84,7 +90,16 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
       setModal({
         isOpen: true,
         title: '인증번호 발송',
-        desc: '인증번호 발송은 3회 까지만 가능합니다.'
+        desc: '인증번호 발송은 3회까지만 가능합니다.'
+      });
+      return;
+    }
+    if (vData.hpno.length < 11) {
+      setModal({
+        isOpen: true,
+        title: '인증번호 발송',
+        desc: '올바른 번호를 입력해 주세요.',
+        color: 'modal-danger'
       });
       return;
     }
@@ -96,7 +111,7 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
         setModal({
           isOpen: true,
           title: '인증번호 발송',
-          desc: '이미 가입된 휴대폰 입니다. 비밀번호 찾기를 이용해주세요.'
+          desc: '이미 가입된 휴대폰입니다. 비밀번호 찾기를 이용해 주세요.'
         });
       } else {
         setModal({
@@ -109,8 +124,6 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
       return;
     }
 
-    // console.log(res);
-
     if (isRunning) {
       clearInterval(timer);
     }
@@ -124,7 +137,6 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
   };
 
   useEffect(() => {
-    // console.log('isRunning>>>', isRunning);
     if (isRunning) {
       clearInterval(timer);
     } else {
@@ -137,29 +149,41 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
   }, []);
 
   const SignupSchema = yup.object().shape({
-    userId: yup.string().trim().required('ID 를 입력해 주세요.'),
+    userId: yup.string().trim().required('ID를 입력해 주세요.'),
     // .matches(
     //   /^[a-z]+[a-z0-9]{5,19}$/g,
-    //   '4자 이상, 20자 미만 영문자 또는 숫자로 입력해주세요.'
+    //   '4자 이상, 20자 미만 영문자 또는 숫자로 입력해 주세요.'
     // ),
-    userPswd: yup.string().required('비밀번호 를 입력해 주세요.'),
+    userPswd: yup.string().required('비밀번호를 입력해 주세요.'),
     genderCd: yup.string().required('성별을 선택해 주세요.'),
-    brthdyDate: yup.string().required('생년월일 을 입력해 주세요.'),
+    brthdyDate: yup
+      .string()
+      .required('생년월일을 입력해 주세요.')
+      .matches(
+        /^(19[0-9][0-9]|20\d{2})(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])$/,
+        '올바른 생년월일을 입력해 주세요.'
+      ),
     memberName: yup
       .string()
-      .required('이름 을 입력해 주세요.')
+      .required('이름을 입력해 주세요.')
       .min(3, '최소 2 자 이상 입력 부탁드립니다.')
       .max(20, '최대 10 자 이하 입력 부탁드립니다.'),
-    email: yup.string().required('이메일 을 입력해 주세요.'),
-    hpno: yup.string().required('휴대폰번호를 입력해주세요.'),
-    cntryCd: yup.string().required('국가를 선택해주세요.'),
-    clncd: yup.string().required('국가번호를 선택해주세요.'),
+    email: yup.string().required('이메일을 입력해 주세요.'),
+    hpno: yup
+      .string()
+      .required('휴대폰번호를 입력해 주세요.')
+      .matches(
+        /^(01[0-1])([1-9][0-9]{3})([0-9]{4})$/,
+        '올바른 휴대폰번호를 입력해 주세요.'
+      ),
+    cntryCd: yup.string().required('국가를 선택해 주세요.'),
+    clncd: yup.string().required('국가번호를 선택해 주세요.'),
     userPswd: yup
       .string()
-      .required('비밀번호를 입력주세요.')
+      .required('비밀번호를 입력해 주세요.')
       .matches(
         /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/,
-        '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해주세요.'
+        '8 자 이상, 20 자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.'
       ),
     confirmUserPaswd: yup
       .string()
@@ -179,7 +203,9 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
       email: '',
       hpno: '',
       clncd: '+82',
-      crtfyNo: ''
+      crtfyNo: '',
+      company: '팔네트웍스',
+      trmnlId: 'SANDBOX-001'
     },
     resolver: yupResolver(SignupSchema)
   });
@@ -206,25 +232,22 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
         agreeTerms: agreeTerms
       });
 
-      // console.log(res);
-
-      if (res.data?.errCode == -1) {
+      if (res.data?.errCode === -1) {
         setModal({
           isOpen: true,
           title: '회원가입 실패',
-          desc: '동일한 아이디가 존재 합니다. 다른 아이디로 가입 신청을 해주세요'
+          desc: '동일한 아이디가 존재합니다. 다른 아이디로 가입 신청해 주세요'
         });
         return;
       }
-      // console.log('res>>>', res.data?.err);
 
-      if (res.data?.errCode == 1) {
+      if (res.data?.errCode === 1) {
         stepper.next();
       } else {
         setModal({
           isOpen: true,
           title: '회원가입 실패',
-          desc: '회원 가입에 실패 하였습니다.'
+          desc: '회원 가입에 실패하였습니다.'
         });
         return;
       }
@@ -238,7 +261,7 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
       setModal({
         isOpen: true,
         title: '인증번호 인증',
-        desc: '휴대폰 번호를 입력 해주세요.'
+        desc: '휴대폰 번호를 입력해 주세요.'
       });
 
       return false;
@@ -247,7 +270,7 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
       setModal({
         isOpen: true,
         title: '인증번호 인증',
-        desc: '인증번호 를 입력 해주세요.'
+        desc: '인증번호를 입력해 주세요.'
       });
       return false;
     }
@@ -258,7 +281,7 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
       setModal({
         isOpen: true,
         title: '인증번호 인증',
-        desc: '인증번호 가 잘못 되었습니다.'
+        desc: '인증번호가 잘못되었습니다.'
       });
       return;
     }
@@ -268,11 +291,20 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
 
   let hpno = '';
   let brthdyDate = '';
+  let trmnlId = '';
   const onChangeHandler = e => {
-    // console.log(register);
     const { name, value } = e.target;
 
-    if (name == 'brthdyDate') {
+    if (name === 'company') {
+      trmnlId = value;
+      setValue('trmnlId', trmnlId);
+    }
+
+    if (name === 'memberName') {
+      setMemberName(value);
+    }
+
+    if (name === 'brthdyDate') {
       const regex = /^[0-9\b]{0,8}$/;
 
       if (regex.test(value)) {
@@ -281,7 +313,7 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
       } else {
         setValue(name, brthdyDate);
       }
-    } else if (name == 'hpno') {
+    } else if (name === 'hpno') {
       const regex = /^[0-9\b]{0,11}$/;
 
       if (regex.test(value)) {
@@ -417,6 +449,8 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
                   })}
                 >
                   <option value={'+82'}>대한민국(+82)</option>
+                  <option value={'+81'}>일본(+81)</option>
+                  <option value={'+86'}>중국(+86)</option>
                 </Input>
                 {errors && errors.clncd && (
                   <FormFeedback>{errors.clncd.message}</FormFeedback>
@@ -479,13 +513,14 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
               ) : (
                 <Input
                   className='font-sm'
-                  value='휴대폰 인증을 완료 하였습니다.'
+                  defaultValue='휴대폰 인증을 완료하였습니다.'
                 />
               )
             ) : (
               <Input
                 className='font-sm'
-                value='인증번호 발송을 진행해주세요.'
+                // defaultValue='인증번호 발송을 진행해 주세요.'
+                placeholder='인증번호 발송을 진행해 주세요.'
               />
             )}
             <div className='user-phone-btn'>
@@ -551,7 +586,7 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
               </Button.Ripple> */}
             </div>
           </FormGroup>
-          <div className='form-group form-password-toggle col-md-6'>
+          <FormGroup tag={Col} md='6'>
             <Label className='form-label' for='userPswd'>
               <span className='necessary'>*</span>비밀번호
             </Label>
@@ -570,8 +605,51 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
             {errors && errors.userPswd && (
               <FormFeedback>{errors.userPswd.message}</FormFeedback>
             )}
-          </div>
-          <div className='form-group form-password-toggle col-md-6'>
+          </FormGroup>
+
+          <FormGroup tag={Col} md='6'>
+            <Label className='form-label' for='company'>
+              <span className='necessary'>*</span>소속회사
+            </Label>
+            <div className='input-btn'>
+              <Col md='5' xs='12'>
+                <Input
+                  type='select'
+                  name='company'
+                  id='company'
+                  onChange={onChangeHandler}
+                  // innerRef={register}
+                  className={classnames({
+                    'is-invalid': errors.company
+                  })}
+                >
+                  <option value={'SANDBOX-001'}>팔네트웍스</option>
+                  <option value={'ANTOS-001'}>ANTOS</option>
+                  <option value={'JAR-001'}>진에어</option>
+                </Input>
+                {errors && errors.company && (
+                  <FormFeedback>{errors.company.message}</FormFeedback>
+                )}
+              </Col>
+              <Col md='7' xs='12'>
+                <Input
+                  name='trmnlId'
+                  id='trmnlId'
+                  readOnly={true}
+                  onChange={onChangeHandler}
+                  innerRef={register}
+                  className={classnames({
+                    'is-invalid': errors.trmnlId
+                  })}
+                />
+                {errors && errors.trmnlId && (
+                  <FormFeedback>{errors.trmnlId.message}</FormFeedback>
+                )}
+              </Col>
+            </div>
+          </FormGroup>
+
+          <FormGroup tag={Col} md='6'>
             <Label className='form-label' for='confirmUserPaswd'>
               <span className='necessary'>*</span>비밀번호 확인
             </Label>
@@ -590,7 +668,7 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
             {errors && errors.confirmUserPaswd && (
               <FormFeedback>{errors.confirmUserPaswd.message}</FormFeedback>
             )}
-          </div>
+          </FormGroup>
         </Row>
         <div className='d-flex justify-content-between'>
           <Button.Ripple
@@ -605,7 +683,6 @@ export const AccountRegisterForm = ({ stepper, type, movePage }) => {
           </Button.Ripple>
         </div>
       </Form>
-
       <div className='vertically-centered-modal'>
         <Modal
           isOpen={modal.isOpen}

src/components/account/register/AccountRegisterTerm.js

@@ -52,7 +52,6 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => {
   }, []);
 
   useEffect(() => {
-    console.log('>>>>', termsList?.length);
     if (termsList?.length > 0) {
       let termObject = {
         termServiceId: 0,
@@ -64,7 +63,6 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => {
       };
 
       termsList.map(item => {
-        console.log('>>>>', item);
         if (item.termsCtgryCd === 'TERMS_SERVICE') {
           (termObject.termServiceId = item.termsSno),
             (termObject.termServiceTitle = item.termsTitleNm),
@@ -81,7 +79,7 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => {
 
   const handlerNext = () => {
     let agreeTerms = [];
-    if (!termChecked.privacy && !termChecked.service) {
+    if (!termChecked.privacy || !termChecked.service) {
       setOpenModal(true);
       return;
     }
@@ -140,8 +138,6 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => {
       }
     }
 
-    // console.log(termChecked);
-    // console.log(!termAll);
     // setTermPrivacy(!termAll);
     // setTermService(!termAll);
     // setTermAll(!termAll);
@@ -167,6 +163,7 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => {
               className='custom-control-Primary'
               id='termAll'
               checked={termChecked.all}
+              readOnly
               onClick={e => handlerChecked('all')}
               label='전체 이용약관에 모두 동의합니다.'
             />
@@ -178,6 +175,7 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => {
               className='custom-control-Primary'
               id='termService'
               checked={termChecked.service}
+              readOnly
               onClick={e => handlerChecked('service')}
               label={terms.termServiceTitle}
             />
@@ -189,6 +187,7 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => {
               className='custom-control-Primary'
               id='termPrivacy'
               checked={termChecked.privacy}
+              readOnly
               onClick={e => handlerChecked('privacy')}
               label={terms.termPrivacyTitle}
             />

src/components/analysis/history/AnalysisHistoryDetailStatic.js

@@ -29,7 +29,6 @@ export const AnalysisHistoryDetailStatic = props => {
       arrElev.push(item.elev);
       arrSpeed.push(item.speed);
     });
-    console.log(arrSpeed);
     setChartData({
       labels: [10, 20, 30, 5000],
 

src/components/analysis/history/AnalysisHistoryGrid.js

@@ -1,62 +1,61 @@
 import { GridDatabase } from '../../../components/crud/grid/GridDatatable';
-import {
-  Row,
-  Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
-  Button,
-  Input,
-  CustomInput,
-  FormGroup
-} from 'reactstrap';
+import { Card, Spinner } from 'reactstrap';
 import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
+import { useSelector } from 'react-redux';
 
 export const AnalysisHistoryGrid = props => {
+  const { loading } = useSelector(state => state.loadingReducer);
   return (
-    <div className='pal-card-box'>
-      <Row>
-        <Col>
-          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
-            <div>
-              <h4>{props.title} 목록</h4>
-              <span className='search-case'>검색결과 총 {props.count}건</span>
-            </div>
-            <div className='d-flex align-items-center'>
-              <ExcelExportButton
-                filename={'비행이력.csv'}
-                data={props.data ? props.data : []}
-                headers={props.excelHeaders}
-              />
-            </div>
-          </div>
-          <div className='invoice-list-wrapper'>
-            <Card>
-              <div className='invoice-list-dataTable'>
-                {/* <div className='no-dataTable'>
+    // <div className='pal-card-box'>
+    // <Row>
+    // <Col>
+    <>
+      <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+        <div>
+          <h4>{props.title} 목록</h4>
+          <span className='search-case'>검색결과 총 {props.total}건</span>
+        </div>
+        <div className='d-flex align-items-center'>
+          <ExcelExportButton
+            filename={'비행이력.csv'}
+            data={props.data ? props.data : []}
+            headers={props.excelHeaders}
+          />
+        </div>
+      </div>
+      <div className='invoice-list-wrapper'>
+        <Card>
+          <div className='invoice-list-dataTable'>
+            {/* <div className='no-dataTable'>
                  표시할 데이터가 없습니다.
                 </div> */}
-                <GridDatabase
-                  title={'비행이력'}
-                  data={props.data}
-                  count={props.count}
-                  columns={props.columns}
-                  pagination={props.pagination}
-                />
+            {loading ? (
+              <div className='grid-loading'>
+                <div>
+                  <Spinner color='primary' />
+                  <span>Loading...</span>
+                </div>
               </div>
-            </Card>
+            ) : null}
+
+            <GridDatabase
+              title={'비행이력'}
+              data={props.data}
+              count={props.count}
+              total={props.total}
+              columns={props.columns}
+              pagination={props.pagination}
+              handlerPageChange={props.handlerPageChange}
+              paginationPerPage={props.paginationPerPage}
+              paginationRowsPerPageOptions={props.paginationRowsPerPageOptions}
+              page={props.page}
+            />
           </div>
-        </Col>
-      </Row>
-    </div>
+        </Card>
+      </div>
+    </>
+    // </Col>
+    // </Row>
+    // </div>
   );
 };

src/components/analysis/history/AnalysisHistorySearch.js

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Calendar, Search } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
 import {
@@ -13,25 +13,29 @@ import {
 } from 'reactstrap';
 
 export const AnalysisHistorySearch = props => {
-  const [isClick, setIsClick] = useState(1);
-  const [dateType, setDateType] = useState(1);
-
-  useEffect(() => {
-    props.setParams({
-      ...props.params,
-      stDate: moment().subtract(dateType, 'day').format('YYYY-MM-DD')
-    });
-  }, [dateType]);
+  // useEffect(() => {
+  //   if (props.isClick != -1) {
+  //     props.setParams({
+  //       ...props.params,
+  //       stDate: moment().subtract(props.dateType, 'day').format('YYYY-MM-DD'),
+  //       endDate: moment().subtract(0, 'day').format('YYYY-MM-DD'),
+  //       groupId: props.searchData.groupId
+  //     });
+  //   }
+  // }, [props.dateType, props.isClick]);
+  const [diffDay, setDiffDay] = useState(
+    moment(props.searchData.endDate).diff(
+      moment(props.searchData.stDate),
+      'days'
+    )
+  );
 
-  const handlerClickDate = val => {
-    setDateType(val);
-    setIsClick(val);
-  };
   return (
-    <div className='pal-card-box'>
+    // <div className='pal-card-box'>
+    <div>
       <Row>
         <Col>
-          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+          <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
             <div>
               <h4>검색조건</h4>
             </div>
@@ -59,6 +63,7 @@ export const AnalysisHistorySearch = props => {
                             <Col className='list-input' xl='4' md='6' sm='12'>
                               <div className='d-flex align-items-center calendar-flat'>
                                 <Flatpickr
+                                  placeholder='날짜를 선택해주세요'
                                   id='searchDate'
                                   value={[
                                     props.params.stDate,
@@ -85,32 +90,44 @@ export const AnalysisHistorySearch = props => {
                                 <Button
                                   outline
                                   size='sm'
-                                  className={isClick == 1 ? 'active' : ''}
-                                  onClick={e => handlerClickDate(1)}
+                                  className={diffDay == 1 ? 'active' : ''}
+                                  onClick={e => {
+                                    setDiffDay(1);
+                                    props.handlerClickDate(1);
+                                  }}
                                 >
                                   최근1일
                                 </Button>
                                 <Button
                                   outline
-                                  className={isClick == 7 ? 'active' : ''}
+                                  className={diffDay == 7 ? 'active' : ''}
                                   size='sm'
-                                  onClick={e => handlerClickDate(7)}
+                                  onClick={e => {
+                                    setDiffDay(7);
+                                    props.handlerClickDate(7);
+                                  }}
                                 >
                                   최근7일
                                 </Button>
                                 <Button
                                   outline
-                                  className={isClick == 15 ? 'active' : ''}
+                                  className={diffDay == 15 ? 'active' : ''}
                                   size='sm'
-                                  onClick={e => handlerClickDate(15)}
+                                  onClick={e => {
+                                    setDiffDay(15);
+                                    props.handlerClickDate(15);
+                                  }}
                                 >
                                   최근 15일
                                 </Button>
                                 <Button
                                   outline
-                                  className={isClick == 30 ? 'active' : ''}
+                                  className={diffDay == 30 ? 'active' : ''}
                                   size='sm'
-                                  onClick={e => handlerClickDate(30)}
+                                  onClick={e => {
+                                    setDiffDay(30);
+                                    props.handlerClickDate(30);
+                                  }}
                                 >
                                   최근 30일
                                 </Button>
@@ -175,10 +192,10 @@ export const AnalysisHistorySearch = props => {
                           <Row>
                             <Col className='list-input' xl='4' md='6' sm='12'>
                               <Input
-                                value={props.params.search1}
+                                value={props.params.search1 || ''}
                                 type='email'
                                 id='search1'
-                                size='sm'
+                                bsSize='sm'
                                 onKeyPress={props.onKeyPress}
                                 onChange={e =>
                                   props.handlerInput('search1', e.target.value)

src/components/analysis/simulation/AnalysimuationInfo.js

@@ -0,0 +1,123 @@
+import moment from 'moment';
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { Spinner } from 'reactstrap';
+
+export const AnalysimuationInfo = props => {
+  const [target, setTarget] = useState(null);
+
+  const { loading } = useSelector(state => state.loadingReducer);
+
+  const onIntersect = useCallback(
+    ([entry], observer) => {
+      if (entry.isIntersecting) {
+        if (props.data?.filter(i => i === undefined).length <= 0) {
+          props.handlerPageList();
+        }
+      }
+    },
+    [props.handlerPageList]
+  );
+
+  useEffect(() => {
+    let observer;
+    if (target) {
+      observer = new IntersectionObserver(onIntersect, {
+        threshold: 0.4
+      });
+      observer.observe(target);
+    }
+    return () => observer && observer.disconnect();
+  }, [target, props.handlerPageList]);
+
+  return (
+    <div className='layer-content drone-list'>
+      {!props.data ? (
+        <>
+          <div className='no-dataTable'>표시할 데이터가 없습니다.</div>
+          {loading && (
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                alignItems: 'center'
+              }}
+            >
+              <Spinner color='primary' />
+              <span>Loading...</span>
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          {props.data
+            ?.filter(i => i !== undefined)
+            .map(item => {
+              //   item.idntfNum,
+              //   ':::',
+              //   item.idntfNum.indexOf(props.filterId)
+              // );
+
+              if (item.idntfNum) {
+                return (
+                  <div
+                    className={`layer-content-list ${
+                      item.cntrlId === props.cntrlId ? 'on' : ''
+                    }`}
+                    onClick={() => {
+                      props.handlerDetail(item.cntrlId);
+                    }}
+                    key={Math.random()}
+                  >
+                    <dl>
+                      <dt>
+                        <div className='list-left-txt'>식별번호</div>
+                        <div className='list-right-txt'>{item.idntfNum}</div>
+                      </dt>
+                      <dt>
+                        <div className='list-left-txt'>일자</div>
+                        <div className='list-right-txt'>
+                          {moment(item.cntrlStDt).format('YYYY년MM월DD일')}
+                        </div>
+                      </dt>
+                      <dt>
+                        <div className='list-left-txt'>시작 위치</div>
+                        <div className='list-right-txt'>{item.stArea}</div>
+                      </dt>
+                      <dt>
+                        <div className='list-left-txt'>시작/종료 시간</div>
+                        <div className='list-right-txt'>
+                          {moment(item.cntrlStDt).format('HH:mm')}
+                          {'  '}/{'  '}
+                          {moment(item.cntrlEndDt).format('HH:mm')}
+                        </div>
+                      </dt>
+                      {/* <dt>
+                    <div className='list-left-txt'>총 비행거리/시간</div>
+                    <div className='list-right-txt'>ddd</div>
+                  </dt> */}
+                    </dl>
+                  </div>
+                );
+              }
+            })}
+          {loading && (
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                alignItems: 'center'
+              }}
+            >
+              <Spinner color='primary' />
+              <span>Loading...</span>
+            </div>
+          )}
+          <div ref={setTarget} />
+        </>
+      )}
+    </div>
+  );
+};

src/components/analysis/simulation/AnalysisSimulationDetail.js

@@ -15,7 +15,7 @@ export const AnalysisSimulationDetail = props => {
 
   return (
     <div>
-      {/* 상세메뉴 닫을때 simulation-wrap에 full 클래스추가해주세요! */}
+      {/* 상세메뉴 닫을때 simulation-wrap에 full 클래스 추가해 주세요! */}
       <div
         className={
           props.oepnReportList ? 'simulation-wrap' : 'simulation-wrap full'
@@ -211,6 +211,7 @@ export const AnalysisSimulationDetail = props => {
                 {props.stcsList?.map(item => {
                   return (
                     <div
+                      key={item.timeCd}
                       className={
                         props.timeCd === item.timeCd
                           ? 'simulation-date-num date-num-focus'

src/components/analysis/simulation/AnalysisSimulationMenu.js

@@ -2,14 +2,16 @@ import { AiOutlinePoweroff } from 'react-icons/ai';
 import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
 import { useDispatch, useSelector } from 'react-redux';
 import { Sun, Map, Bell } from 'react-feather';
-import logo from '../../../assets/images/pal_logo.png';
+import itp_logo from '../../../assets/images/itp_logo_wh_icon.png';
+import ongjin_logo from '../../../assets/images/ongjin_logo_wh.png';
+import incheon_logo from '../../../assets/images/incheon_logo_wh.png';
 
 export const AnalysisSimulationMenu = props => {
   return (
     <div className='left-menu'>
-      <h1 className='logo'>
-        <img src={logo} width='80' />
-        <span>PAL</span>
+      <h1 className='logo itp'>
+        <img src={itp_logo} width='80' />
+        <span>인천테크노파크</span>
       </h1>
       <ul className='left-menu-nav'>
         <li>
@@ -18,22 +20,28 @@ export const AnalysisSimulationMenu = props => {
           </button>
         </li>
         {/* <li>
-          <button onClick={() => console.log(2222)}>
+          <button onClick={() => {}}>
             <Sun size={25} />
           </button>
         </li>
         <li>
-          <button onClick={() => console.log(333)}>
+          <button onClick={() => {}}>
             <Bell size={25} />
           </button>
         </li> */}
       </ul>
       <ul className='left-menu-footer'>
+        <li>
+          <img src={incheon_logo} width='60' />
+        </li>
+        <li>
+          <img src={ongjin_logo} width='60' />
+        </li>
         <li>
           <AiOutlinePoweroff
             size={25}
             className='logout-btn'
-            onClick={() => console.log(333)}
+            onClick={props.handlerLogout}
           />
         </li>
 

src/components/analysis/simulation/AnalysisSimulationReport.js

@@ -1,111 +1,61 @@
 import moment from 'moment';
-import React from 'react';
+import { useState } from 'react';
 import { Calendar, X } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
 import { Button, Input, InputGroup } from 'reactstrap';
 
 export const AnalysisSimulationReport = props => {
-  // console.log(props.params);
-  console.log(11111111111111);
+  const [filterId, setFilterId] = useState('');
+
   return (
-    <div className='left-layer'>
-      <div className='layer-content'>
-        <div className='layer-ti'>
-          <h4>비행 Simulation</h4>
-          <button
-            className='btn-icon'
-            color='primary'
-            onClick={() => props.setOpenReportList(false)}
-          >
-            <X size={20} />
-          </button>
+    <div className='layer-content'>
+      <div className='layer-ti'>
+        <h4>비행 Simulation</h4>
+        <button
+          className='btn-icon'
+          color='primary'
+          onClick={() => props.handlerOpenReportList(false)}
+        >
+          <X size={20} />
+        </button>
+      </div>
+      <div className='layer-search layer-search-form'>
+        <div className='sm-txt'>
+          검색하실 날짜 정보 또는 기체 식별번호를 입력해 주세요.
         </div>
-        <div className='layer-search layer-search-form'>
-          <div className='sm-txt'>
-            검색하실 날짜 정보 또는 드론 식별번호를 입력해주세요.
-          </div>
-          <div>
-            <div className='d-flex align-items-center calendar-flat'>
-              <Flatpickr
-                options={{
-                  mode: 'range',
-                  defaultDate: [props.params.stDate, props.params.endDate]
-                }}
-                onChange={val => props.handlerInput('searchDate', val)}
-                className='form-control flat-picker bg-transparent border-0 shadow-none'
-              />
-              <Calendar size={14} />
-            </div>
-          </div>
-          <div>
-            <InputGroup>
-              <Input
-                type='text'
-                placeholder='식별번호를 입력하세요'
-                value={props.filterId}
-                onChange={e => props.setFilterId(`${e.target.value}`)}
-              />
-            </InputGroup>
-          </div>
-          <div>
-            <Button color='primary' onClick={props.handlerSearch} size='sm'>
-              검색
-            </Button>
+        <div>
+          <div className='d-flex align-items-center calendar-flat'>
+            <Flatpickr
+              placeholder='날짜를 선택해주세요'
+              options={{
+                mode: 'range',
+                defaultDate: [props.params.stDate, props.params.endDate]
+              }}
+              onChange={val => props.handlerInput('searchDate', val)}
+              className='form-control flat-picker bg-transparent border-0 shadow-none'
+            />
+            <Calendar size={14} />
           </div>
         </div>
-      </div>
-      <div className='layer-content drone-list'>
-        {props.count === 0 ? (
-          <div className='no-dataTable'>표시할 데이터가 없습니다.</div>
-        ) : (
-          props.data?.map(item => {
-            // console.log(item);
-            // console.log(
-            //   item.idntfNum,
-            //   ':::',
-            //   item.idntfNum.indexOf(props.filterId)
-            // );
-            // console.log(item.idntfNum.indexOf(props.filterId));
-            if (item.idntfNum && item.idntfNum.indexOf(props.filterId) != -1) {
-              return (
-                <div
-                  className='layer-content-list'
-                  onClick={() => props.handlerDetail(item.cntrlId)}
-                  key={item.cntrlId}
-                >
-                  <dl>
-                    <dt>
-                      <div className='list-left-txt'>식별번호</div>
-                      <div className='list-right-txt'>{item.idntfNum}</div>
-                    </dt>
-                    <dt>
-                      <div className='list-left-txt'>일자</div>
-                      <div className='list-right-txt'>
-                        {moment(item.cntrlStDt).format('YYYY년MM월DD일')}
-                      </div>
-                    </dt>
-                    <dt>
-                      <div className='list-left-txt'>시작 위치</div>
-                      <div className='list-right-txt'>{item.stArea}</div>
-                    </dt>
-                    <dt>
-                      <div className='list-left-txt'>시작/종료 시간</div>
-                      <div className='list-right-txt'>
-                        {moment(item.cntrlStDt).format('HH:mm')}
-                        {'  '}/{'  '}
-                        {moment(item.cntrlEndDt).format('HH:mm')}
-                      </div>
-                    </dt>
-                    {/* <dt>
-                    <div className='list-left-txt'>총 비행거리/시간</div>
-                    <div className='list-right-txt'>ddd</div>
-                  </dt> */}
-                  </dl>
-                </div>
-              );
-            }
-          })
-        )}
+        <div>
+          <InputGroup>
+            <Input
+              type='text'
+              placeholder='식별번호를 입력하세요'
+              value={filterId}
+              onChange={e => setFilterId(`${e.target.value}`)}
+            />
+          </InputGroup>
+        </div>
+        <div>
+          <Button
+            color='primary'
+            onClick={() => props.handlerSearch(filterId)}
+            size='sm'
+          >
+            검색
+          </Button>
+        </div>
       </div>
     </div>
   );

src/components/analysis/simulation/AnalysisSimulatorSlider.js

@@ -39,13 +39,12 @@ const AnalysisSimulatorSlider = ({
     direction
   };
 
-  useEffect(() => {
-    console.log(playCount);
-  }, [playCount]);
+  useEffect(() => {}, [playCount]);
   return (
     <div className='simulation-slider'>
       {/* <h5 className='my-2'>Default / Primary Color Slider</h5> */}
       {/* <Nouislider className='mt-md-1 mt-3 mb-4' {...colorOptions} behaviour={'tap'}/> */}
+
       <Nouislider
         className='mt-md-1 mt-3 mb-1'
         {...colorOptions}

src/components/basis/dron/BasisDronForm.js

@@ -34,7 +34,7 @@ export const BasisDronForm = props => {
               <dl>
                 <dt>
                   <div className='search-info-ti d-flex justify-content-between'>
-                    <h4 className='ti'>그룹정보 정보</h4>
+                    <h4 className='ti'>그룹정보</h4>
                   </div>
                   <div className='search-info-box'>
                     <Row>
@@ -45,7 +45,7 @@ export const BasisDronForm = props => {
                             type='text'
                             id='groupNm'
                             name='groupNm'
-                            size='sm'
+                            bsSize='sm'
                             innerRef={props.data}
                             readOnly
                             placeholder=''
@@ -59,7 +59,7 @@ export const BasisDronForm = props => {
                             type='text'
                             id='groupId'
                             name='groupId'
-                            size='sm'
+                            bsSize='sm'
                             readOnly
                             innerRef={props.data}
                             placeholder=''
@@ -86,11 +86,12 @@ export const BasisDronForm = props => {
                             id='prdctNum'
                             name='prdctNum'
                             innerRef={props.data}
-                            size='sm'
+                            bsSize='sm'
                             placeholder=''
                             className={classnames({
                               'is-invalid': props.errors.prdctNum
                             })}
+                            disabled={props.isDisabled}
                           />
                           {props.errors && props.errors.prdctNum && (
                             <FormFeedback>
@@ -109,11 +110,12 @@ export const BasisDronForm = props => {
                             id='arcrftModelNm'
                             name='arcrftModelNm'
                             innerRef={props.data}
-                            size='sm'
+                            bsSize='sm'
                             placeholder=''
                             className={classnames({
                               'is-invalid': props.errors.arcrftModelNm
                             })}
+                            disabled={props.isDisabled}
                           />
                           {props.errors && props.errors.arcrftModelNm && (
                             <FormFeedback>
@@ -131,11 +133,12 @@ export const BasisDronForm = props => {
                             type='select'
                             name='arcrftTypeCd'
                             id='arcrftTypeCd'
-                            size='sm'
-                            innerRef={props.data}                            
+                            bsSize='sm'
+                            innerRef={props.data}
                             className={classnames({
                               'is-invalid': props.errors.arcrftTypeCd
                             })}
+                            disabled={props.isDisabled}
                           >
                             <option value=''>= 선택 =</option>
                             {/* CDNOT 코드연동 필요 */}
@@ -143,11 +146,12 @@ export const BasisDronForm = props => {
                               return (
                                 <option
                                   value={item.code}
-                                  selected={
-                                    props.data.arcrftTypeCd === item.code
-                                      ? true
-                                      : false
-                                  }
+                                  key={item.code}
+                                  // selected={
+                                  //   props.data.arcrftTypeCd === item.code
+                                  //     ? true
+                                  //     : false
+                                  // }
                                 >
                                   {item.codeNm}
                                 </option>
@@ -171,10 +175,11 @@ export const BasisDronForm = props => {
                             name='wghtTypeCd'
                             id='wghtTypeCd'
                             innerRef={props.data}
-                            size='sm'
+                            bsSize='sm'
                             className={classnames({
                               'is-invalid': props.errors.wghtTypeCd
                             })}
+                            disabled={props.isDisabled}
                           >
                             {/* CDNOT 코드연동 필요 */}
                             <option value=''>= 선택 =</option>
@@ -182,11 +187,12 @@ export const BasisDronForm = props => {
                               return (
                                 <option
                                   value={item.code}
-                                  selected={
-                                    props.data.wghtTypeCd === item.code
-                                      ? true
-                                      : false
-                                  }
+                                  key={item.code}
+                                  // selected={
+                                  //   props.data.wghtTypeCd === item.code
+                                  //     ? true
+                                  //     : false
+                                  // }
                                 >
                                   {item.codeNm}
                                 </option>
@@ -209,26 +215,28 @@ export const BasisDronForm = props => {
                           <Input
                             type='select'
                             name='cameraYn'
-                            size='sm'
+                            bsSize='sm'
                             innerRef={props.data}
                             id='cameraYn'
                             className={classnames({
                               'is-invalid': props.errors.cameraYn
                             })}
+                            disabled={props.isDisabled}
                           >
                             <option
                               value={'Y'}
-                              selected={
-                                props.data.cameraYn === 'Y' ? true : false
-                              }
+
+                              // selected={
+                              //   props.data.cameraYn === 'Y' ? true : false
+                              // }
                             >
                               탑재
                             </option>
                             <option
                               value={'N'}
-                              selected={
-                                props.data.cameraYn === 'N' ? true : false
-                              }
+                              // selected={
+                              //   props.data.cameraYn === 'N' ? true : false
+                              // }
                             >
                               미탑재
                             </option>
@@ -248,26 +256,27 @@ export const BasisDronForm = props => {
                           <Input
                             type='select'
                             name='insrncYn'
-                            size='sm'
+                            bsSize='sm'
                             innerRef={props.data}
                             id='insrncYn'
                             className={classnames({
                               'is-invalid': props.errors.insrncYn
                             })}
+                            disabled={props.isDisabled}
                           >
                             <option
                               value={'Y'}
-                              selected={
-                                props.data.insrncYn === 'Y' ? true : false
-                              }
+                              // selected={
+                              //   props.data.insrncYn === 'Y' ? true : false
+                              // }
                             >
                               가입
                             </option>
                             <option
                               value={'N'}
-                              selected={
-                                props.data.insrncYn === 'N' ? true : false
-                              }
+                              // selected={
+                              //   props.data.insrncYn === 'N' ? true : false
+                              // }
                             >
                               미가입
                             </option>
@@ -290,11 +299,12 @@ export const BasisDronForm = props => {
                             id='prdctCmpnNm'
                             name='prdctCmpnNm'
                             innerRef={props.data}
-                            size='sm'
+                            bsSize='sm'
                             placeholder=''
                             className={classnames({
                               'is-invalid': props.errors.prdctCmpnNm
                             })}
+                            disabled={props.isDisabled}
                           />
                           {props.errors && props.errors.prdctCmpnNm && (
                             <FormFeedback>

src/components/basis/dron/BasisDronGrid.js

@@ -1,39 +1,21 @@
 import { GridDatabase } from '../../crud/grid/GridDatatable';
-import {
-  Row,
-  Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
-  Button,
-  Input,
-  CustomInput,
-  FormGroup
-} from 'reactstrap';
-import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
+import { Card, Button } from 'reactstrap';
 
 export const BasisDronGrid = props => {
+  // console.log(props.isMyGroup);
   return (
     <>
-      <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+      <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
         <div>
           <h4>{props.subTitle} 기체목록</h4>
-          <span className='search-case'>검색결과 총 {props.count}건</span>
+          <span className='search-case'>검색결과 총 {props.total}건</span>
         </div>
         <div className='d-flex align-items-center'>
           <Button.Ripple
             color='primary'
             size='sm'
             onClick={props.handlerGroupCreate}
+            {...(props?.isMyGroup ? {} : { disabled: true })}
           >
             기체등록
           </Button.Ripple>
@@ -45,8 +27,12 @@ export const BasisDronGrid = props => {
             <GridDatabase
               title={'비행이력'}
               data={props.data}
-              count={props.count}
+              total={props.total}
               columns={props.columns}
+              pagination={props.pagination}
+              paginationPerPage={props.paginationPerPage}
+              paginationRowsPerPageOptions={props.paginationRowsPerPageOptions}
+              handlerPageChange={props.handlerPageChange}
             />
           </div>
         </Card>

src/components/basis/dron/BasisDronImage.js

@@ -1,6 +1,14 @@
 import React from 'react';
 import { Edit, Image, Trash2 } from 'react-feather';
-import { Button, Label, Media } from 'reactstrap';
+import {
+  Button,
+  Label,
+  Media,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from 'reactstrap';
 
 export const BasisDronImage = props => {
   return (
@@ -24,6 +32,7 @@ export const BasisDronImage = props => {
             tag={Label}
             className='mr-1'
             color='primary'
+            disabled={props.isDisabled}
           >
             <span className='d-none d-sm-block'>업로드</span>
             <span className='d-block d-sm-none'>
@@ -39,8 +48,9 @@ export const BasisDronImage = props => {
             />
           </Button.Ripple>
           <Button.Ripple
-            color='secondary'
+            color={!props.img ? 'secondary' : 'danger'}
             onClick={props.handlerImageDelete}
+            disabled={!props.img || props.isDisabled}
             outline
           >
             <span className='d-none d-sm-block'>삭제</span>
@@ -49,6 +59,38 @@ export const BasisDronImage = props => {
             </span>
           </Button.Ripple>
         </div>
+        <div className='vertically-centered-modal'>
+          <Modal
+            isOpen={props.modal.isOpen}
+            toggle={() =>
+              props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
+            }
+            modalClassName={props.modal.color}
+            className='modal-dialog-centered'
+          >
+            <ModalHeader
+              toggle={() =>
+                props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
+              }
+            >
+              {props.modal.title}
+            </ModalHeader>
+            <ModalBody>{props.modal.desc}</ModalBody>
+            <ModalFooter>
+              <Button
+                color='danger'
+                onClick={() =>
+                  props.setModal({
+                    ...props.modal,
+                    isOpen: !props.modal.isOpen
+                  })
+                }
+              >
+                확인
+              </Button>
+            </ModalFooter>
+          </Modal>
+        </div>
         {/* <div className='sm-txt mt-1'>이미지 최적 크기 300*300</div> */}
       </Media>
     </Media>

src/components/basis/dron/BasisDronTab.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Card,
   CardBody,
@@ -8,42 +8,20 @@ import {
   NavItem,
   NavLink,
   TabContent,
-  CardTitle,
-  CardText,
-  Button,
-  TabPane,
-  Form,
-  FormGroup,
-  Label,
-  Input,
-  Media
+  TabPane
 } from 'reactstrap';
 import classnames from 'classnames';
-import {
-  User,
-  Info,
-  Share,
-  X,
-  Lock,
-  Edit,
-  Trash2,
-  Image,
-  UserCheck,
-  Clipboard,
-  Settings,
-  AlertTriangle
-} from 'react-feather';
-import { BasisDronForm } from './BasisDronForm';
-import Repeater from '@components/repeater';
-import Avatar from '@components/avatar';
-import drone_img from '../../../assets/images/drone.jpg';
-import { BasisDronImage } from './BasisDronImage';
-import { BasisIdntfForm } from './BasisIdntform';
+import { Settings, AlertTriangle } from 'react-feather';
 import { BasisDronDetailContainer } from '../../../containers/basis/dron/BasisDronDetailContainer';
 import { BasisIdntfContainer } from '../../../containers/basis/dron/BasisIdntfContainer';
 export const BasisDronTab = props => {
   const [activeTab, setActiveTab] = useState('1');
 
+  //내가 등록한 기체인가
+  const [isDisabled, setIsDisabled] = useState(false);
+  //내가 소속된 그룹의 기체인가
+  const [isMyGroup, setIsMyGroup] = useState(false);
+
   const toggle = tab => {
     if (activeTab !== tab) setActiveTab(tab);
   };
@@ -80,10 +58,20 @@ export const BasisDronTab = props => {
             </Nav>
             <TabContent activeTab={activeTab}>
               <TabPane tabId='1'>
-                <BasisDronDetailContainer id={props.id} />
+                <BasisDronDetailContainer
+                  id={props.id}
+                  isDisabled={isDisabled}
+                  setIsDisabled={setIsDisabled}
+                  isMyGroup={isMyGroup}
+                  setIsMyGroup={setIsMyGroup}
+                />
               </TabPane>
               <TabPane tabId='2'>
-                <BasisIdntfContainer id={props.id} />
+                <BasisIdntfContainer
+                  id={props.id}
+                  isMyGroup={isMyGroup}
+                  setIsMyGroup={setIsMyGroup}
+                />
               </TabPane>
             </TabContent>
           </CardBody>

src/components/basis/dron/BasisGroupDronGrid.js

@@ -1,25 +1,5 @@
 import { GridDatabase } from '../../crud/grid/GridDatatable';
-import {
-  Row,
-  Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
-  Button,
-  Input,
-  CustomInput,
-  FormGroup
-} from 'reactstrap';
-import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
+import { Card } from 'reactstrap';
 
 export const BasisGroupDronGrid = props => {
   return (
@@ -39,6 +19,9 @@ export const BasisGroupDronGrid = props => {
               data={props.data}
               count={props.count}
               columns={props.columns}
+              pagination={props.pagination}
+              paginationPerPage={props.paginationPerPage}
+              paginationRowsPerPageOptions={props.paginationRowsPerPageOptions}
             />
           </div>
         </Card>

src/components/basis/dron/BasisIdntform.js

@@ -4,48 +4,20 @@ import moment from 'moment';
 import {
   Row,
   Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
   Card,
-  FormFeedback,
-  CardHeader,
   CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
   Button,
   Input,
   Form,
-  CustomInput,
   FormGroup,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
   Label
 } from 'reactstrap';
-import {
-  User,
-  Info,
-  Share,
-  X,
-  Lock,
-  Edit,
-  Trash2,
-  Image,
-  UserCheck,
-  Clipboard,
-  Settings,
-  AlertTriangle
-} from 'react-feather';
+import { X } from 'react-feather';
 
 import Repeater from '@components/repeater';
 
 export const BasisIdntfForm = props => {
+
   return (
     <Row>
       <Col>
@@ -63,39 +35,46 @@ export const BasisIdntfForm = props => {
                   <div className='search-info-box count-box'>
                     <CardBody className='pd-0'>
                       <Row>
-                        <Col xs={3} md={3} xl={2}>
+                        <Col xs={2} md={2}>
                           <span className='sm-ti'>
                             <span className='necessary'>*</span>식별번호
                           </span>
                         </Col>
-                        <Col xs={3} md={3} xl={2}>
+                        <Col xs={2} md={2}>
                           <span className='sm-ti'>
                             <span className='necessary'>*</span>장비타입
                           </span>
                         </Col>
-                        <Col xs={3} md={3} xl={2}>
+                        <Col xs={2} md={2}>
                           <span className='sm-ti'>
                             <span className='necessary'>*</span>수정일자
                           </span>
                         </Col>
-                        <Col xs={3} md={3} xl={2}>
+                        <Col xs={2} md={2}>
                           <span className='sm-ti'>
                             <span className='necessary'>*</span>소유자명
                           </span>
                         </Col>
-                        <Col xs={3} md={3} xl={2}>
+                        <Col xs={2} md={2}>
                           <span className='sm-ti'>
                             <span className='necessary'>*</span>연락처
                           </span>
                         </Col>
                       </Row>
-                      <Repeater count={props.count}>
+                      <Repeater count={props.count ? props.count : 0}>
                         {i => (
                           <Form key={i}>
                             <Row className='justify-content-between align-items-center'>
-                            <Col xs={3} md={3} xl={2}>
-                                <FormGroup className='form-label-group'>
+                              <Col xs={2} md={2}>
+                                <FormGroup className='form-label-group pa-input-box'>
                                   <Label for={`idntfNum.${i}`}>식별번호</Label>
+                                  <Input
+                                    className='pa-input'
+                                    value={'PA'}
+                                    type='text'
+                                    readOnly
+                                    bsSize='sm'
+                                  ></Input>
                                   <Input
                                     type='text'
                                     // innerRef={props.data}
@@ -104,11 +83,11 @@ export const BasisIdntfForm = props => {
                                     onChange={e => props.handlerInput(e, i)}
                                     value={props.data[i].idntfNum}
                                     readOnly={props.data[i].isSave}
-                                    size='sm'
+                                    bsSize='sm'
                                   ></Input>
                                 </FormGroup>
                               </Col>
-                              <Col xs={3} md={3} xl={2}>
+                              <Col xs={2} md={2}>
                                 <FormGroup className='form-label-group'>
                                   <Label for={'idntfTypeCd'}>장비타입</Label>
                                   <Input
@@ -118,11 +97,11 @@ export const BasisIdntfForm = props => {
                                     id={'idntfTypeCd'}
                                     name={'idntfTypeCd'}
                                     value={props.data[i].idntfTypeCd}
-                                    size='sm'
+                                    bsSize='sm'
                                   ></Input>
                                 </FormGroup>
                               </Col>
-                              <Col xs={3} md={3} xl={2}>
+                              <Col xs={2} md={2}>
                                 <FormGroup className='form-label-group'>
                                   <Label for={'updateDt'}>수정일자</Label>
                                   <Input
@@ -131,11 +110,11 @@ export const BasisIdntfForm = props => {
                                     value={moment(
                                       props.data[i].updateDt
                                     ).format('YY년 MM월DD일 HH:mm')}
-                                    size='sm'
+                                    bsSize='sm'
                                   ></Input>
                                 </FormGroup>
                               </Col>
-                              <Col xs={3} md={3} xl={2}>
+                              <Col xs={2} md={2}>
                                 <FormGroup className='form-label-group'>
                                   <Label for={`userName`}>소유자명</Label>
                                   <Input
@@ -147,11 +126,11 @@ export const BasisIdntfForm = props => {
                                     onChange={e => props.handlerInput(e, i)}
                                     value={props.data[i].ownerNm}
                                     readOnly={props.data[i].isSave}
-                                    size='sm'
+                                    bsSize='sm'
                                   ></Input>
                                 </FormGroup>
                               </Col>
-                              <Col xs={3} md={3} xl={2}>
+                              <Col xs={2} md={2}>
                                 <FormGroup className='form-label-group'>
                                   <Label for={`phoneNumber`}>연락처</Label>
                                   <Input
@@ -162,16 +141,12 @@ export const BasisIdntfForm = props => {
                                     onChange={e => props.handlerInput(e, i)}
                                     value={props.data[i].hpno}
                                     readOnly={props.data[i].isSave}
-                                    size='sm'
+                                    bsSize='sm'
+                                    maxLength='11'
                                   ></Input>
                                 </FormGroup>
                               </Col>
-                              <Col
-                                xs={12}
-                                md={2}
-                                xl={2}
-                                className='count-del-btn'
-                              >
+                              <Col xs={2} md={2} className='count-del-btn'>
                                 <Button.Ripple
                                   color='danger'
                                   className='text-nowrap px-1'
@@ -182,6 +157,11 @@ export const BasisIdntfForm = props => {
                                     )
                                   }
                                   outline
+                                  {...(props.data[i].disabled === undefined
+                                    ? { disabled: false }
+                                    : props.data[i].disabled
+                                      ? { disabled: true }
+                                      : { disabled: false })}
                                 >
                                   <X size={14} className='mr-50' />
                                   <span>삭제</span>
@@ -201,6 +181,8 @@ export const BasisIdntfForm = props => {
                   color='primary'
                   size='sm'
                   onClick={props.addData}
+                  disabled={!props.isMyGroup}
+                // disabled={props.isDisabled}
                 >
                   + 추가
                 </Button.Ripple>
@@ -209,6 +191,8 @@ export const BasisIdntfForm = props => {
                   color='primary'
                   size='sm'
                   onClick={props.handlerSave}
+                  disabled={!props.isMyGroup}
+                // disabled={props.isDisabled}
                 >
                   저장
                 </Button.Ripple>

src/components/basis/flight/aprv/FlightPlanAprvGrid.js

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Card, Col, Row, Spinner } from 'reactstrap';
+import { GridDatabase } from '../../../crud/grid/GridDatatable';
+import { Link } from 'react-router-dom';
+import { selectableRowsComponent } from '../../../crud/grid/selectableRowsComponent';
+import { useSelector } from 'react-redux';
+
+const FlightPlanAprvGrid = ({
+  data,
+  handleChangeSelected,
+  handleClickAprv,
+  paginationPerPage,
+  pagination,
+  paginationRowsPerPageOptions,
+  handlerPageChange,
+  total,
+  isMyGroup
+}) => {
+  const { loading } = useSelector(state => state.loadingReducer);
+
+  const columns = [
+    {
+      id: 'planSno',
+      name: '번호',
+      cell: (row, i) => <div>{i + 1}</div>
+    },
+    {
+      id: 'fltPurpose',
+      name: '비행목적',
+      minWidth: '150px',
+      cell: (row, i) => <div>{row.fltPurpose}</div>
+    },
+    {
+      id: 'fltMethod',
+      name: '비행방식',
+      minWidth: '200px',
+      cell: row => {
+        const displayName =
+          (row.areaList &&
+            row.areaList.length > 0 &&
+            row.areaList[0].fltMethod) ||
+          '-';
+        return <div>{displayName}</div>;
+      }
+    },
+    {
+      id: 'schFltStDt',
+      name: '출발일',
+      minWidth: '200px',
+      cell: row => <div>{row.schFltStDt}</div>
+    },
+    { id: 'aprvlYn', name: '승인여부', cell: row => <div>{row.aprvlYn}</div> },
+    {
+      id: 'moveDetail',
+      name: '상세보기',
+      cell: row => {
+        return (
+          <Link
+            to={`/basis/flight/plan/detail/${row.planSno}?type=aprv`}
+            size='sm'
+          >
+            상세보기
+          </Link>
+        );
+      }
+    }
+  ];
+
+  return (
+    <>
+      <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+        <div>
+          <h4>비행계획서 신청 목록</h4>
+          <span className='search-case'>
+            검색결과 총 {!!data ? data.length : 0}건
+          </span>
+        </div>
+        <div className='d-flex align-items-center'>
+          <Button.Ripple
+            color='primary'
+            size='sm'
+            onClick={handleClickAprv('aprv')}
+            {...(isMyGroup ? {} : { disabled: true })}
+          >
+            승인
+          </Button.Ripple>
+          <Button.Ripple
+            color='primary'
+            size='sm'
+            style={{ marginLeft: 10 }}
+            onClick={handleClickAprv('notAprov')}
+            {...(isMyGroup ? {} : { disabled: true })}
+          >
+            미승인
+          </Button.Ripple>
+        </div>
+      </div>
+      <div className='invoice-list-wrapper'>
+        <Card>
+          <div className='invoice-list-dataTable'>
+            {loading ? (
+              <div className='grid-loading'>
+                <div>
+                  <Spinner color='primary' />
+                  <span>Loading...</span>
+                </div>
+              </div>
+            ) : null}
+            <GridDatabase
+              title={'비행이력'}
+              data={data}
+              columns={columns}
+              count={!!data ? data.length : 0}
+              // pagination={props.pagination}
+              selectableRows
+              selectableRowsComponent={selectableRowsComponent}
+              onSelectedRowsChange={handleChangeSelected}
+              pagination={pagination}
+              paginationPerPage={paginationPerPage}
+              paginationRowsPerPageOptions={paginationRowsPerPageOptions}
+              handlerPageChange={handlerPageChange}
+              total={total}
+            />
+            {/* 검색된 데이터가 없습니다. */}
+          </div>
+        </Card>
+      </div>
+    </>
+  );
+};
+
+export default FlightPlanAprvGrid;

src/components/basis/flight/aprv/FlightPlanAprvGroupGrid.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { GridDatabase } from '../../../crud/grid/GridDatatable';
+import { Card, Button } from 'reactstrap';
+
+const FlightPlanAprvGroupGrid = ({ data, count, columns, pagination, paginationPerPage, paginationRowsPerPageOptions }) => {
+  return (
+    <>
+      <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+        <div>
+          <h4>그룹 목록</h4>
+          <span className='search-case'>검색결과 총 {count}건</span>
+        </div>
+        <div className='d-flex align-items-center'></div>
+      </div>
+      <div className='invoice-list-wrapper'>
+        <Card>
+          <div className='invoice-list-dataTable'>
+            <GridDatabase data={data} count={count} columns={columns}
+              pagination={pagination} paginationPerPage={paginationPerPage} paginationRowsPerPageOptions={paginationRowsPerPageOptions} />
+          </div>
+        </Card>
+      </div>
+    </>
+  );
+};
+
+export default FlightPlanAprvGroupGrid;

src/components/basis/flight/aprv/FlightPlanAprvSearch.js

@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import { Button, Card, CardBody, Col, CustomInput, Row } from 'reactstrap';
+import { Search } from 'react-feather';
+import Flatpickr from 'react-flatpickr';
+import moment from 'moment';
+
+const FlightPlanAprvSearch = ({
+  searchData,
+  handleChangeSearchData,
+  handleSearch
+}) => {
+  const { schFltStDt, schFltEndDt, aprvlYn } = searchData;
+  const initCheckState = {
+    all: aprvlYn == 'A',
+    yes: aprvlYn == 'Y' || aprvlYn == 'A',
+    no: aprvlYn == 'N' || aprvlYn == 'A'
+  };
+  const [checkState, setCheckState] = useState(initCheckState);
+  const handleClickSearch = e => {
+    handleSearch(searchData);
+  };
+  const handleChangeInput = (dates, value, config) => {
+    if (dates.length === 2) {
+      const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss');
+      const schFltEndDt = moment(dates[1])
+        .set({ h: 23, m: 59, s: 59 })
+        .format('YYYY-MM-DD HH:mm:ss');
+      handleChangeSearchData({ schFltStDt, schFltEndDt });
+    }
+  };
+  const handleChangeCheckbox = e => {
+    const { name, value, checked } = e.target;
+    let val;
+    switch (value) {
+      case 'A':
+        val = checked ? 'A' : '';
+        handleChangeSearchData({ [name]: val });
+        setCheckState({
+          all: checked,
+          yes: checked,
+          no: checked
+        });
+        break;
+      case 'Y':
+        if (checked && checkState.no) val = 'A';
+        else if (checked && !checkState.no) val = 'Y';
+        else if (!checked && checkState.no) val = 'N';
+        else if (!checked && !checkState.no) val = '';
+        handleChangeSearchData({ [name]: val });
+        setCheckState(prevState => ({
+          all: prevState.no && checked,
+          yes: checked,
+          no: prevState.no
+        }));
+        break;
+      case 'N':
+        if (checked && checkState.yes) val = 'A';
+        else if (checked && !checkState.yes) val = 'N';
+        else if (!checked && checkState.yes) val = 'Y';
+        else if (!checked && !checkState.yes) val = '';
+        handleChangeSearchData({ [name]: val });
+        setCheckState(prevState => ({
+          all: prevState.yes && checked,
+          yes: prevState.yes,
+          no: checked
+        }));
+        break;
+      default:
+        break;
+    }
+  };
+  return (
+    <div>
+      <Row>
+        <Col>
+          <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+            <div>
+              <h4>검색조건</h4>
+            </div>
+            <div className='d-flex align-items-center'>
+              <Button.Ripple
+                color='primary'
+                size='sm'
+                onClick={handleClickSearch}
+              >
+                <Search size={16} />
+                검색
+              </Button.Ripple>
+            </div>
+          </div>
+          <Card>
+            <CardBody className='pal-card-body'>
+              <div className='search-cont'>
+                <dl>
+                  <dt>
+                    <div className='search-box'>
+                      <div className='search-list-ti'>신청일</div>
+                      <div className='search-list'>
+                        <div className='search-list-cont'>
+                          <Row>
+                            <Col className='list-input' xl='4' md='6' sm='12'>
+                              <div className='d-flex align-items-center calendar-flat'>
+                                <Flatpickr
+                                  id='searchDate'
+                                  value={[schFltStDt, schFltEndDt]}
+                                  options={{
+                                    mode: 'range'
+                                    // defaultDate: [
+                                    //   props.params.stDate,
+                                    //   props.params.endDate
+                                    // ]
+                                  }}
+                                  onChange={handleChangeInput}
+                                  className='form-control flat-picker bg-transparent border-0 shadow-none'
+                                />
+                              </div>
+                            </Col>
+                          </Row>
+                        </div>
+                      </div>
+                    </div>
+                  </dt>
+
+                  <dt>
+                    <div className='search-box'>
+                      <div className='search-list-ti'>승인여부</div>
+                      <div className='search-list'>
+                        <div className='search-list-cont'>
+                          <CustomInput
+                            inline
+                            type='checkbox'
+                            id='exampleCustomCheckbox'
+                            label='전체'
+                            name='aprvlYn'
+                            value='A'
+                            // checked={true}
+                            checked={checkState.all}
+                            onChange={handleChangeCheckbox}
+                          />
+                          <CustomInput
+                            inline
+                            type='checkbox'
+                            id='exampleCustomCheckbox2'
+                            label='승인'
+                            name='aprvlYn'
+                            value='Y'
+                            checked={checkState.yes}
+                            onChange={handleChangeCheckbox}
+                          />
+                          <CustomInput
+                            inline
+                            type='checkbox'
+                            id='exampleCustomCheckbox3'
+                            label='미승인'
+                            name='aprvlYn'
+                            value='N'
+                            checked={checkState.no}
+                            onChange={handleChangeCheckbox}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </dt>
+                </dl>
+              </div>
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default FlightPlanAprvSearch;

src/components/basis/flight/plan/FlightPlanArcrft.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import {Button, Card, CardBody, Col, CustomInput, Row, FormGroup, Input, Label} from 'reactstrap';
+import {Search} from 'react-feather';
+import {GridDatabase} from '../../../crud/grid/GridDatatable';
+import '../../../../assets/css/custom.css';
+import '@styles/react/libs/tables/react-dataTable-component.scss';
+
+const FlightPlanArcrft = ({ arcrftList, handleSelectArcrft, onClickEvent, name, returnArcrft,onChange }) => {
+    const columns = [
+        {id: 'groupNm', name: '그룹 명', cell: row => (<div>{row.groupNm}</div>)},
+        {id: 'arcrftModelNm', name: '모델 명', cell: row => (<div>{row.arcrftModelNm}</div>)},
+        {id: 'idntfTypeCd', name: '종류', cell: row => (<div>{row.arcrftTypeCd}</div>)},        
+        {id: 'ownerNm', name: '소유자 명', cell: row => (<div>{row.ownerNm}</div>)},   
+        {id: 'idntfNum', name: '식별코드', cell: row => (<div>{row.idntfNum}</div>)},        
+        {
+            id: 'selectPilot', name: '선택', cell: row => {
+                return <Button.Ripple color='primary' size='sm' onClick={() => {
+                    handleSelectArcrft(row.idntfNum) 
+                }
+                }>선택</Button.Ripple>;
+            } 
+        }
+    ];
+
+    return (
+        <>
+        <div className='pal-card-box'>
+            <Row>
+                <Col>
+                    <div
+                        className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                        <div>
+                            <h4>검색조건</h4>
+                        </div>
+                        {arcrftList?(
+                        <div className='d-flex align-items-center'>
+                            <Button.Ripple
+                                color='primary'
+                                size='sm'
+                                onClick={onClickEvent}
+                            >
+                                <Search size={16}/>
+                                검색
+                            </Button.Ripple>
+                        </div>
+                        )
+                    :
+                        (
+                            <div className='d-flex align-items-center'>
+                            <Button.Ripple
+                                color='primary'
+                                size='sm'
+                                onClick={onClickEvent}
+                                disabled
+                            >
+                                <Search size={16}/>
+                                검색
+                            </Button.Ripple>
+                        </div>
+                        )
+                         }
+                    </div>
+                    <Card>
+                        <CardBody className='pal-card-body'>
+                            <div className='search-cont'>
+                                <dl>                                    
+                                    <dt>                                        
+                                        <div className='search-box'>
+                                            <div className='search-list-ti'>소유자 명</div>       
+                                            <div className='search-list'>
+                                                <div className='search-list-cont'>
+                                                    <Row>
+                                                        <Col className='list-input' xl='4' md='4' sm='12'>
+                                                        <FormGroup className='form-label-group'>
+                                                            <Input
+                                                            type='text'
+                                                            id='ownerNm'
+                                                            name='ownerNm'
+                                                            value={name}
+                                                            onChange={onChange}
+                                                            bsSize='sm'
+                                                            // onKeyPress={props.onKeyPress}
+                                                            placeholder='소유자 명을 입력하세요'
+                                                            />
+                                                            <Label for='test'>소유자 명</Label>
+                                                        </FormGroup>
+                                                        </Col>
+                                                    </Row>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </dt>
+                                </dl>
+                            </div>
+                        </CardBody>
+                    </Card>
+
+                </Col>
+            </Row>
+        </div>
+        <div className='pal-card-box'>
+            <Row>
+                <Col>
+                    <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                        <div>
+                            <h4>기체 목록</h4>
+                            <span className='search-case'>검색결과 총 {!!returnArcrft ? returnArcrft.length : 0}건</span>
+                        </div>                        
+                    </div>
+                    <div className='invoice-list-wrapper'>
+                        <Card>
+                            <div className='invoice-list-dataTable'>
+                                <GridDatabase                                    
+                                    data={returnArcrft}
+                                    count={returnArcrft ? returnArcrft.length : 0}
+                                    columns={columns}
+                                    // pagination={props.pagination}
+                                />
+                                {/* 검색된 데이터가 없습니다. */}
+                            </div>
+                        </Card>
+                    </div>
+                </Col>
+            </Row>
+        </div>
+      </>
+    )
+
+}
+
+export default FlightPlanArcrft;

src/components/basis/flight/plan/FlightPlanAreaDetailForm.js

@@ -0,0 +1,266 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { object } from 'prop-types';
+import {
+  Card,
+  CardBody,
+  Col,
+  FormGroup,
+  Label,
+  Row,
+  Button,
+  InputGroupAddon,
+  InputGroup,
+  Input,
+  Table
+} from 'reactstrap';
+const FlightPlanAreaDetailForm = ({
+  handleSave,
+  handleClose,
+  handleChange,
+  handleBufferList,
+  data,
+  mapControl,
+  isDone,
+  isDisabled
+}) => {
+  const coordList = data ? data[0].coordList : null;
+  const dispatch = useDispatch();
+
+
+
+  return (
+    <Card className='mb-0'>
+      <CardBody>
+        <Row>
+          <Col>
+            <Card>
+              <CardBody className='pal-card-body'>
+                <div className='search-cont search-info pd-0'>
+                  <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                    <div>
+                      <h4>비행 구역 상세 정보</h4>
+                    </div>
+                  </div>
+
+                  <dl>
+                    <dt>
+                      <div className='search-info-ti d-flex justify-content-between'>
+                        <h4 className='ti'>좌표 정보</h4>
+                      </div>
+
+                      <div className='search-info-box'>
+                        <Row>
+                          {coordList ? (
+                            coordList.map((coord, idx) => {
+                              const latlon = coord.lat + ' / ' + coord.lon;
+
+                              return (
+                                <Col
+                                  key={idx}
+                                  className='list-input'
+                                  lg={6}
+                                  md={6}
+                                  sm={12}
+                                >
+                                  <FormGroup>
+                                    <Label for='test'>
+                                      <span className='necessary'>*</span>좌표{' '}
+                                      {idx + 1}{' '}
+                                    </Label>
+                                    <Input
+                                      type='text'
+                                      name='coord'
+                                      bsSize='sm'
+                                      placeholdeer=''
+                                      readOnly
+                                      value={latlon}
+                                    />
+                                  </FormGroup>
+                                </Col>
+                              );
+                            })
+                          ) : (
+                            <Col className='list-input' lg={6} md={6} sm={12}>
+                              <FormGroup>
+                                <Label for='test'>
+                                  <span className='necessary'>*</span>좌표 1
+                                </Label>
+                                <Input
+                                  type='text'
+                                  name='coord'
+                                  bsSize='sm'
+                                  placeholdeer=''
+                                  readOnly
+                                />
+                              </FormGroup>
+                            </Col>
+                          )}
+                        </Row>
+                      </div>
+                    </dt>
+
+                    <dt>
+                      <div className='search-info-ti d-flex justify-content-between'>
+                        <h4 className='ti'>기타 정보</h4>
+                      </div>
+
+                      <div className='search-info-box'>
+                        <Row>
+                          <Col className='list-input' lg={6} md={6} sm={12}>
+                            <FormGroup className='m_ft'>
+                              <div className='m_ft_box'>
+                                <Label for='test'>
+                                  <span className='necessary'>*</span>반경(m)
+                                </Label>
+                                <Input
+                                  type='text'
+                                  id='bufferZone'
+                                  name='bufferZone'
+                                  bsSize='sm'
+                                  disabled={
+                                    isDisabled || isDone
+                                      ? true
+                                      : coordList[0].lat &&
+                                        data[0].areaType &&
+                                        data[0].areaType !== 'POLYGON'
+                                        ? false
+                                        : true
+                                  }
+                                  placeholder='반경'
+                                  value={
+                                    data[0].bufferZone ? data[0].bufferZone : ''
+                                  }
+                                  onChange={e => {
+                                    const { name, value } = e.target;
+                                    handleChange({
+                                      name,
+                                      value
+                                    });
+                                  }}
+                                />
+                              </div>
+                              <div className='m_ft_box'>
+                                <Button.Ripple
+                                  className='mr-1'
+                                  color='primary'
+                                  size='sm'
+                                  disabled={
+                                    isDisabled || isDone
+                                      ? true
+                                      : coordList[0].lat &&
+                                        data[0].areaType &&
+                                        data[0].areaType !== 'POLYGON'
+                                        ? false
+                                        : true
+                                  }
+                                  onClick={() => handleBufferList()}
+                                >
+                                  적용
+                                </Button.Ripple>
+                              </div>
+                            </FormGroup>
+                          </Col>
+                        </Row>
+                      </div>
+                      <div className='search-info-box'>
+                        <Row>
+                          <Col className='list-input' lg={6} md={6} sm={12}>
+                            <FormGroup>
+                              <Label for='test'>
+                                <span className='necessary'>*</span>고도(ft)
+                              </Label>
+
+                              <Input
+                                type='text'
+                                id='fltElev'
+                                name='fltElev'
+                                bsSize='sm'
+                                placeholder='고도'
+                                value={data[0].fltElev ? data[0].fltElev : ''}
+                                onChange={e => {
+                                  const { name, value } = e.target;
+                                  handleChange({
+                                    name,
+                                    value
+                                  });
+                                }}
+                                disabled={isDisabled || isDone}
+                              />
+                            </FormGroup>
+                          </Col>
+                        </Row>
+                      </div>
+                      <div className='search-info-box'>
+                        <Row>
+                          <Col className='list-input' lg={6} md={6} sm={12}>
+                            <FormGroup>
+                              <Label for='test'>
+                                <span className='necessary'>*</span>비행 방식
+                              </Label>
+                              <Input
+                                type='text'
+                                id='fltMethod'
+                                name='fltMethod'
+                                bsSize='sm'
+                                placeholder='비행 방식'
+                                value={
+                                  data[0].fltMethod ? data[0].fltMethod : ''
+                                }
+                                onChange={e => {
+                                  const { name, value } = e.target;
+                                  handleChange({
+                                    name,
+                                    value
+                                  });
+                                }}
+                                disabled={isDisabled || isDone}
+                              />
+                            </FormGroup>
+                          </Col>
+                        </Row>
+                      </div>
+                    </dt>
+                  </dl>
+                </div>
+
+                <div className='d-flex align-items-center mt-2'>
+                  {isDisabled || isDone ? (
+                    <Button.Ripple
+                      type='submit'
+                      className='mr-1'
+                      color='primary'
+                      onClick={e => handleSave()}
+                      disabled={isDisabled || isDone}
+                    >
+                      등록
+                    </Button.Ripple>
+                  ) : (
+                    <Button.Ripple
+                      type='submit'
+                      className='mr-1'
+                      color='primary'
+                      onClick={e => handleSave()}
+                      disabled={!coordList[0].lat ? true : false}
+                    >
+                      등록
+                    </Button.Ripple>
+                  )}
+                  <Button.Ripple
+                    className='mr-1'
+                    color='primary'
+                    onClick={e => handleClose()}
+                  >
+                    닫기
+                  </Button.Ripple>
+                </div>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </CardBody>
+    </Card>
+  );
+}
+
+export default FlightPlanAreaDetailForm;

src/components/basis/flight/plan/FlightPlanAreaForm.js

@@ -1,115 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import classnames from 'classnames';
-import {
-    Card,
-    CardBody,
-    Col,    
-    FormGroup,
-    FormFeedback,
-    Input,
-    Label,
-    Row,  
-    Button,
-    Form
-} from 'reactstrap';
-
-
-const FlightPlanAreaForm = (props) => {    
-
-    return (        
-      <Card>
-        <CardBody>                        
-          <div className='search-cont search-info pd-0'>
-            <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
-              <div>
-                <h4>상세 정보</h4>
-              </div>
-              <div className='final'>
-              {/* {props.type === 'update' ? (
-                  <span>최종 수정일자 : {props.updateDt}</span>
-              ) : null} */}
-              </div>
-            </div>
-              
-            <dl>
-              <dt>                                                                                    
-                <div className='search-info-box'>
-                  <Row>
-                    <Col className='list-input' lg={6} md={6} sm={12}>
-                      <FormGroup>
-                        <Label for='test'>
-                          <span className='necessary'></span>반경(m)
-                        </Label>
-                        <Input
-                          type='text'
-                          id='radius'
-                          name='radius'                                                    
-                          size='sm'
-                          placeholder='' 
-                          innerRef={props.data}                                                                                      
-                        />                                            
-                      </FormGroup>
-                    </Col>   
-                  </Row>
-                </div> 
-                <div className='search-info-box'>
-                  <Row>
-                    <Col className='list-input' lg={6} md={6} sm={12}>
-                      <FormGroup className='m_ft'>
-                        <div className='m_ft_box'>
-                          <Label for='test'>
-                            <span className='necessary'></span>고도(m/ft)
-                          </Label>
-                          <Input
-                            type='text'
-                            id='altitude_m'
-                            name='altitude_m'                                                    
-                            size='sm'
-                            placeholder='m'       
-                            innerRef={props.data}                                                     
-                            />        
-                        </div>         
-                        <div className='m_ft_box'>                              
-                          <Input
-                            type='text'
-                            id='altitude'
-                            name='altitude'                                                    
-                            size='sm'
-                            placeholder='ft'     
-                            innerRef={props.data}                                                
-                          />
-                        </div>                                                
-                      </FormGroup>                                                
-                    </Col>    
-                  </Row>
-                </div>  
-
-                <Button.Ripple
-                  className='mr-1'
-                  color='primary'
-                  size='sm'
-                  onClick={
-                    props.submit
-                  }
-                >
-                  확인
-                </Button.Ripple>
-                <Button.Ripple
-                  className='mr-1'
-                  color='danger'
-                  size='sm'
-                  onClick={() => 
-                      props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
-                  }
-                >
-                  취소
-                </Button.Ripple>
-              </dt>
-            </dl>
-          </div>                                                
-        </CardBody>
-      </Card>
-    )
-}
-
-export default FlightPlanAreaForm;

src/components/basis/flight/plan/FlightPlanAreaMap.js

@@ -1,78 +1,443 @@
 import React, { useEffect, useState } from 'react';
 import {
-    Card,
-    CardBody,
-    Button
+  Card,
+  CardBody,
+  Button,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupText,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
 } from 'reactstrap';
+import { Search } from 'react-feather';
+import { useDispatch, useSelector } from 'react-redux';
 import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone';
+import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
+import { FlightPlanDraw_init } from '../../../map/naver/draw/FlightPlanDraw';
+import { initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel';
+import {
+  AREA_COORDINATE_LIST_SAVE,
+  AREA_DETAIL_INIT
+} from '../../../../modules/basis/flight/actions/basisFlightAction';
+import { flightPlanAPI } from '../../../../modules/basis/flight/apis/basisFlightApi';
+import { WeatherContainer } from '../../../../containers/basis/flight/plan/WeatherContainer';
+import gimpo from '../../../map/geojson/airportAirArea.json';
+const FlightPlanAreaMap = props => {
+  const dispatch = useDispatch();
+  const naver = window.naver;
+  const airArea = props.airArea;
+  const mapControl = useSelector(state => state.controlMapReducer);
+  const { areaCoordList } = useSelector(state => state.flightState);
+
+  const [map, setMap] = useState();
+  const [isMapLoad, setIsMapLoad] = useState(false);
+  const [mode, setMode] = useState();
+  const [mapAreaCoordList, setMapAreaCoordList] = useState(
+    initFlightBas.initDetail.areaList
+  );
+
+  const [query, setQuery] = useState('');
+  const [searchRes, setSearchRes] = useState([]);
+  const [isSearch, setIsSearch] = useState(false);
+
+  const [dragSize, setDragSize] = useState(70);
+  const [pastDragCircle, setDragCircle] = useState([]);
+
+  const [number, setNumber] = useState(0);
+
+  const [formModal, setFormModal] = useState(false);
+
+  const [coordCenter, setCoordCenter] = useState([]); // 격자 센터값
+
+  let gimPofeatures = gimpo.features;
+
+  useEffect(() => {
+    NaverMapInit();
+
+    const coords = [];
+    gimPofeatures.map(air => {
+      coords.push({
+        lat:
+          (Math.max(
+            air.geometry.coordinates[0][0][1],
+            air.geometry.coordinates[0][1][1],
+            air.geometry.coordinates[0][2][1],
+            air.geometry.coordinates[0][3][1]
+          ) +
+            Math.min(
+              air.geometry.coordinates[0][0][1],
+              air.geometry.coordinates[0][1][1],
+              air.geometry.coordinates[0][2][1],
+              air.geometry.coordinates[0][3][1]
+            )) /
+          2,
+        lng:
+          (Math.max(
+            air.geometry.coordinates[0][0][0],
+            air.geometry.coordinates[0][1][0],
+            air.geometry.coordinates[0][2][0],
+            air.geometry.coordinates[0][3][0]
+          ) +
+            Math.min(
+              air.geometry.coordinates[0][0][0],
+              air.geometry.coordinates[0][1][0],
+              air.geometry.coordinates[0][2][0],
+              air.geometry.coordinates[0][3][0]
+            )) /
+          2,
+        airspace: air.properties.airspace
+      });
+    });
+    setCoordCenter(coords);
 
-const FlightPlanAreaMap = (props) => {
-    const naver = window.naver;
-    const airArea = props.airArea;
-
-    const [map, setMap] = useState();
-    const [isMapLoad, setIsMapLoad] = useState(false);
-
-    useEffect(() => {
-        NaverMapInit();
-    }, []);
-    useEffect(() => {                
-        setIsMapLoad(true);
-    }, [airArea]);
-
-    const NaverMapInit = () => {
-        const mapOptions = {
-            center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
-            zoom: 10,
-            zoomControl: true,
-            mapTypeId: naver.maps.MapTypeId.HYBRID,
-            zoomControlOptions: {
-            position: naver.maps.Position.TOP_LEFT,
-
-            style: naver.maps.ZoomControlStyle.SMALL
-            }
-        };    
-        
-        setMap(new naver.maps.Map('map', mapOptions));             
+    return () => {
+      dispatch(AREA_DETAIL_INIT());
     };
+  }, []);
 
+  useEffect(() => {
+    pastDragCircle.forEach(c => c.setRadius(dragSize));
+  }, [dragSize]);
 
-    return (
-        <Card className='mb-0'>
-            <CardBody>                
-                <div className='search-cont search-info pd-0'>
-                    <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
-                        <div>
-                            <h4>지도 영역</h4>
-                        </div>                        
-                    </div>
-                </div>
+  useEffect(() => {
+    setIsMapLoad(true);
+  }, [airArea]);
+
+  useEffect(() => {
+    coordCenter.map((val, idx) => {
+      const position = new naver.maps.LatLng(
+        val.lat.toFixed(6),
+        val.lng.toFixed(6)
+      );
+      const marker = new naver.maps.Marker({
+        position: position,
+        map: map,
+        icon: {
+          content: `<div style="color:#000000;font-size:10px;">${val.airspace}</div>`,
+          size: new naver.maps.Size(0, 0),
+          origin: new naver.maps.Point(0, 0),
+          anchor: new naver.maps.Point(7, 5),
+          align: 'center'
+        }
+      });
+    });
+  }, [coordCenter]);
+  useEffect(() => {
+    ModeInit();
+  }, [mapControl.drawType]);
+
+  useEffect(() => {
+    if (areaCoordList) {
+      if (
+        areaCoordList[0].coordList[0].lat !== 0 &&
+        areaCoordList[0].coordList[0].lon !== 0
+      ) {
+        if (number === 0) {
+          if (map) {
+            map.setCenter(
+              new naver.maps.LatLng(
+                areaCoordList[0].coordList[0].lat,
+                areaCoordList[0].coordList[0].lon
+              )
+            );
+            setNumber(number + 1);
+          }
+        }
+        setMapAreaCoordList(areaCoordList);
+      }
+    }
+  }, [areaCoordList, map, number]);
+
+  const ModeInit = () => {
+    setMode(mapControl.drawType);
+  };
+
+  const NaverMapInit = () => {
+    const bufferzoom = {};
+    if (areaCoordList) {
+      if (
+        areaCoordList[0].bufferZone >= 0 &&
+        areaCoordList[0].bufferZone < 2000
+      ) {
+        bufferzoom.bufferzoom = 13;
+      } else if (
+        areaCoordList[0].bufferZone >= 2000 &&
+        areaCoordList[0].bufferZone < 5000
+      ) {
+        bufferzoom.bufferzoom = 12;
+      } else if (
+        areaCoordList[0].bufferZone >= 5000 &&
+        areaCoordList[0].bufferZone <= 9000
+      ) {
+        bufferzoom.bufferzoom = 11;
+      } else {
+        bufferzoom.bufferzoom = 10;
+      }
+    }
+    const mapOptions = {
+      // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
+      center: new naver.maps.LatLng(37.558522, 126.793722),
+      zoom: !areaCoordList ? 11 : bufferzoom.bufferzoom,
+      zoomControl: true,
+      mapTypeId: naver.maps.MapTypeId.NORMAL,
+      zoomControlOptions: {
+        position: naver.maps.Position.RIGHT_CENTER,
+        style: naver.maps.ZoomControlStyle.SMALL
+      }
+    };
+    const mapp = new naver.maps.Map('map', mapOptions);
+    // naver.maps.Event.addListener(mapp, 'idle', function () {
+    //   // console.log(dragSize);
+    // });
+    naver.maps.Event.addListener(mapp, 'zoom_changed', function () {
+      let radius = 17920;
+      for (let i = 6; i < 22; i++) {
+        if (i == mapp.zoom) {
+          setDragSize(radius);
+        }
+        radius = radius / 2;
+      }
+    });
+    setMap(mapp);
+  };
+
+  const handlerDrawType = val => {
+    dispatch(drawTypeChangeAction(val));
+  };
+
+  const handleInitCoordinates = () => {
+    const init = initFlightBas.initDetail.areaList.concat();
+    dispatch(AREA_COORDINATE_LIST_SAVE(init));
+  };
+
+  const handleCoordinates = areaInfo => {
+    const initAreaList = initFlightBas.initDetail.areaList.concat();
 
-                <div id="map" style={{ width: '100%', height: '50vh'}}></div>
-                
-                
-                {isMapLoad ? (                    
-                    <FeatureAirZone map={map} naver={naver} features={airArea.features} />                    
-                ) : null}
-                
-                
-
-                <div className='d-flex align-items-center mt-2'>
-                    <Button.Ripple
-                        className='mr-1'
-                        color='primary'                       
-                    >
-                        Line
-                    </Button.Ripple>
-                    <Button.Ripple 
-                        color='primary'                         
-                    >
-                        Circle
-                    </Button.Ripple>
+    const coordList = [];
+
+    // radius = 10;
+    areaInfo.coordinates.forEach((c, i) => {
+      const coord = Object.assign({}, initFlightBas['coord']);
+      coord.lat = c.lat;
+      coord.lon = c.lon;
+
+      coordList.push(coord);
+    });
+
+    // initAreaList[0].bufferZone = areaInfo.bufferZone;
+    // initAreaList[0].areaType = areaInfo.areaType;
+
+    const areaList = initAreaList.map((area, i) => {
+      return {
+        ...area,
+        bufferZone: areaInfo.bufferZone,
+        areaType: areaInfo.areaType,
+        coordList: coordList
+      };
+    });
+
+    // dispatch(AREA_COORDINATE_LIST_SAVE(areaList))
+    setMapAreaCoordList(areaList);
+  };
+
+  const handleSearch = async () => {
+    const res = await flightPlanAPI.searchArea({ query: query });
+    setIsSearch(true);
+    setSearchRes(res.data.items);
+  };
+
+  const handleChange = e => {
+    const { name, value } = e.target;
+
+    if (name == 'searchInput') {
+      setQuery(value);
+    }
+  };
+
+  const handleCoord = (mapx, mapy) => {
+    let utmk = naver.maps.TransCoord.fromTM128ToUTMK(
+      naver.maps.Point(mapx, mapy)
+    );
+    let latlng = naver.maps.TransCoord.fromUTMKToLatLng(utmk);
+
+    setIsSearch(false);
+
+    let options = {
+      duration: 800,
+      easing: 'easeOutCubic'
+    };
+    map.morph(latlng, 16, options);
+  };
+
+  const handleEnter = e => {
+    if (e.key == 'Enter') {
+      handleSearch();
+    }
+  };
+  const handler = () => {
+    setFormModal(!formModal);
+  };
+  return (
+    <Card className='mb-0'>
+      <CardBody>
+        <div className='search-cont search-info pd-0'>
+          <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+            <div>
+              <h4>지도 영역</h4>
+            </div>
+          </div>
+        </div>
+
+        <div style={{ position: 'relative' }}>
+          <div id='map' style={{ width: '100%', height: '60vh' }}>
+            {map ? (
+              <FlightPlanDraw_init
+                map={map}
+                naver={naver}
+                mode={mode}
+                areaCoordList={mapAreaCoordList}
+                // areaCoordList={areaCoordList}
+                handleCoordinates={handleCoordinates}
+                handleInitCoordinates={handleInitCoordinates}
+                handleConfirm={props.handleConfirm}
+                isDone={props.isDone}
+                isDisabled={props.isDisabled}
+                dragSize={dragSize}
+                pastDragCircle={pastDragCircle}
+                setDragCircle={setDragCircle}
+              />
+            ) : null}
+
+            <div className='d-flex search-comp'>
+              <div className=''>
+                <InputGroup className='search-feather'>
+                  <InputGroupAddon addonType='prepend'>
+                    <InputGroupText>
+                      <Search size={14} onClick={handleSearch} />
+                    </InputGroupText>
+                  </InputGroupAddon>
+                  <Input
+                    type='text'
+                    id='searchInput'
+                    name='searchInput'
+                    bsSize='sm'
+                    autoComplete='off'
+                    placeholder='검색명을 입력하세요.'
+                    onChange={handleChange}
+                    onKeyPress={handleEnter}
+                  />
+                </InputGroup>
+                <div className='search-result-comp'>
+                  <ul>
+                    {searchRes?.length !== 0 && isSearch ? (
+                      searchRes?.map((prev, idx) => {
+                        let title = prev.title.replaceAll('<b>', '');
+                        title = title.replaceAll('</b>', '');
+
+                        return (
+                          <li
+                            key={prev.mapx + prev.mapy}
+                            onClick={() => handleCoord(prev.mapx, prev.mapy)}
+                          >
+                            <a>
+                              <div className='search-result'>
+                                <div className='title'>
+                                  <span>
+                                    <strong>{title}</strong>
+                                  </span>
+                                </div>
+                                <div className='address'>
+                                  {/* <span>{prev.address}</span> */}
+                                  <span>{prev.roadAddress}</span>
+                                </div>
+                              </div>
+                            </a>
+                          </li>
+                        );
+                      })
+                    ) : (
+                      <></>
+                    )}
+                  </ul>
                 </div>
-            </CardBody>
-        </Card>
-    )
-}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {isMapLoad ? (
+          <FeatureAirZone map={map} naver={naver} features={airArea.features} />
+        ) : null}
+
+        <div className='d-flex align-items-center mt-2'>
+          <Button.Ripple
+            className='mr-1'
+            color='primary'
+            onClick={e => handlerDrawType('LINE')}
+            disabled={props.isDisabled || props.isDone}
+          >
+            WayPoint
+          </Button.Ripple>
+          <Button.Ripple
+            className='mr-1'
+            color='primary'
+            onClick={e => handlerDrawType('CIRCLE')}
+            disabled={props.isDisabled || props.isDone}
+          >
+            Circle
+          </Button.Ripple>
+          <Button.Ripple
+            className='mr-1'
+            color='primary'
+            onClick={e => handlerDrawType('POLYGON')}
+            disabled={props.isDisabled || props.isDone}
+          >
+            Polygon
+          </Button.Ripple>
+          <Button.Ripple
+            color='primary'
+            className='mr-1'
+            onClick={e => handlerDrawType('RESET')}
+            // {...props.test? (
+            //   {}
+            //   ):(
+            //   {disabled:false}
+            // )}
+            disabled={props.isDisabled || props.isDone}
+          >
+            초기화
+          </Button.Ripple>
+          {areaCoordList ? (
+            areaCoordList[0].coordList[0].lat ? (
+              <Button.Ripple color='primary' onClick={handler}>
+                날씨
+              </Button.Ripple>
+            ) : null
+          ) : (
+            <></>
+          )}
+        </div>
+        <Modal
+          isOpen={formModal}
+          toggle={handler}
+          className='modal-dialog-centered'
+        >
+          <ModalHeader toggle={handler}>날씨 정보</ModalHeader>
+          <ModalBody>
+            <WeatherContainer mapAreaCoordList={mapAreaCoordList} />
+          </ModalBody>
+          <ModalFooter>
+            <Button color='primary' onClick={handler}>
+              확인
+            </Button>
+          </ModalFooter>
+        </Modal>
+      </CardBody>
+    </Card>
+  );
+};
 
-export default FlightPlanAreaMap;
+export default FlightPlanAreaMap;

src/components/basis/flight/plan/FlightPlanAreaModal.js

@@ -1,49 +0,0 @@
-import { useState } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer';
-
-export const FlightPlanAreaModal = props => {   
-
-  const [onSubmit, setOnSubmit] = useState(false);
-
-  return (
-    <div className='vertically-centered-modal'>
-      <Modal
-        isOpen={props.modal.isOpen}
-        toggle={() =>
-          props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
-        }        
-        className='modal-dialog-centered modal-xl'
-      >
-        <ModalHeader
-          toggle={() =>
-            props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
-          }
-        >
-          {props.modal.title}
-        </ModalHeader>
-        <ModalBody>
-          <FlightPlanAreaContainer
-            modal={props.modal}
-            setModal={props.setModal}   
-            onSubmit={onSubmit} 
-            setOnSubmit={setOnSubmit}        
-          />
-        </ModalBody>
-        {/* <ModalFooter>
-          <Button
-            type="submit"
-            color='primary'
-            // onClick={() =>
-            //   // props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
-            //   setOnSubmit(true)
-            // }
-            outline
-          >
-            저장
-          </Button>
-        </ModalFooter> */}
-      </Modal>
-    </div>
-  );
-};

src/components/basis/flight/plan/FlightPlanGrid.js

@@ -1,66 +1,143 @@
 import React from 'react';
-import {
-    Row,
-    Col,
-    Table,
-    Badge,
-    UncontrolledDropdown,
-    DropdownMenu,
-    DropdownItem,
-    DropdownToggle,
-    Card,
-    CardHeader,
-    CardBody,
-    CardTitle,
-    CardSubtitle,
-    ButtonGroup,
-    Button,
-    Input,
-    CustomInput,
-    FormGroup
-  } from 'reactstrap';
+import { Button, Card, Col, Row, Spinner } from 'reactstrap';
 import { GridDatabase } from '../../../crud/grid/GridDatatable';
+import { Redirect } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+
+const FlightPlanGrid = ({
+  movePage,
+  planListData,
+  pagination,
+  paginationPerPage,
+  paginationRowsPerPageOptions,
+  isMyGroup,
+  user,
+  handlerPageChange,
+  total
+}) => {
+  const { loading } = useSelector(state => state.loadingReducer);
+  const columns = [
+    // { id: 'planSno', name: '번호', cell: (row, i) => <div>{i + 1}</div> },
+    {
+      id: 'fltPurpose',
+      name: '비행목적',
+      cell: row => <div>{row.fltPurpose}</div>
+    },
+    {
+      id: 'fltMethod',
+      name: '비행방식',
+      minWidth: '150px',
+      cell: row => {
+        const displayName =
+          (row.areaList &&
+            row.areaList.length > 0 &&
+            row.areaList[0].fltMethod) ||
+          '-';
+        return <div>{displayName}</div>;
+      }
+    },
+    {
+      id: 'schFltStDt',
+      name: '출발일',
+      minWidth: '200px',
+      cell: row => <div>{row.schFltStDt}</div>
+    },
+    { id: 'aprvlYn', name: '승인여부', cell: row => <div>{row.aprvlYn}</div> },
+    {
+      id: 'moveDetail',
+      name: '상세보기',
+      cell: row => {
+        return (
+          <Link
+            to={`/basis/flight/plan/detail/${row.planSno}?type=plan`}
+            size='sm'
+          >
+            상세보기
+          </Link>
+        );
+      }
+    },
+    {
+      id: 'ORG',
+      name: 'ORG',
+      cell: row => <div>zzzz</div>
+    },
+    {
+      id: 'ETD',
+      name: 'ETD',
+      cell: row => <div>zzzz</div>
+    },
+    {
+      id: 'ATD',
+      name: 'ATD',
+      cell: row => <div>zzzz</div>
+    },
+    {
+      id: 'DES',
+      name: 'DES',
+      cell: row => <div>zzzz</div>
+    },
+    {
+      id: 'ETA',
+      name: 'ETA',
+      cell: row => <div>zzzz</div>
+    },
+    {
+      id: 'ATA',
+      name: 'ATA',
+      cell: row => <div>zzzz</div>
+    }
+  ];
 
-const FlightPlanGrid = (props) => {
   return (
-    <div className='pal-card-box'>
-      <Row>
-        <Col>
-          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
-            <div>
-              {/* <h4>{"비행 계획"} 목록</h4> */}
-              <h4>{"비행계획서 신청"} 목록</h4>
-              <span className='search-case'>검색결과 총 0건</span>
-            </div>
-            <div className='d-flex align-items-center'>
-              <Button.Ripple
-                  color='primary'
-                  size='sm'
-                  onClick={props.moveFlightPlan}
-              >
-                  {/* 계획서 생성 */}
-                  비행계획서 신청
-              </Button.Ripple>
-            </div>
-          </div>
-          <div className='invoice-list-wrapper'>
-            <Card>
-            <div className='invoice-list-dataTable'>
-              <GridDatabase
+    <>
+      <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+        <div>
+          <h4>비행계획서 신청 목록</h4>
+          <span className='search-case'>
+            검색결과 총 {!!planListData ? planListData.length : 0}건
+          </span>
+        </div>
+        <div className='d-flex align-items-center'>
+          <Button.Ripple
+            color='primary'
+            size='sm'
+            onClick={movePage}
+            {...(isMyGroup ? {} : { disabled: true })}
+          >
+            비행계획서 신청
+          </Button.Ripple>
+        </div>
+      </div>
+      <div className='invoice-list-wrapper'>
+        <Card>
+          <div className='invoice-list-dataTable'>
+            {loading ? (
+              <div className='grid-loading'>
+                <div>
+                  <Spinner color='primary' />
+                  <span>Loading...</span>
+                </div>
+              </div>
+            ) : null}
+            <GridDatabase
               title={'비행이력'}
-              // data={props.data}
-              count={0}
-              // columns={props.columns}
-              // pagination={props.pagination}
-              />
-              {/* 검색된 데이터가 없습니다. */}
-            </div>
-            </Card>
+              data={planListData}
+              columns={columns}
+              count={!!planListData ? planListData.length : 0}
+              pagination={pagination}
+              paginationPerPage={paginationPerPage}
+              paginationRowsPerPageOptions={paginationRowsPerPageOptions}
+              handlerPageChange={handlerPageChange}
+              total={total}
+            />
+            {/* 검색된 데이터가 없습니다. */}
           </div>
-        </Col>
-      </Row>
-    </div>
-  )
-}
+        </Card>
+      </div>
+    </>
+  );
+};
 
-export default FlightPlanGrid;
+export default FlightPlanGrid;

src/components/basis/flight/plan/FlightPlanGroupGrid.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { GridDatabase } from '../../../crud/grid/GridDatatable';
+import { Card, Button } from 'reactstrap';
+
+const FlightPlanGroupGrid = ({
+  data,
+  count,
+  selectGroup,
+  handlerGroupCancel,
+  handleGroupSelect,
+  paginationRowsPerPageOptions,
+  pagination
+}) => {
+  const columns = [
+    {
+      // id: 'groupNm',
+      name: '그룹 명',
+      selector: row => row.groupNm,
+      minWidth: '102px',
+      sortable: true,
+      cell: row => <div>{row.groupNm}</div>
+    },
+    {
+      // id: 'groupId',
+      name: '그룹 코드',
+      selector: row => row.groupId,
+      minWidth: '102px',
+      sortable: true,
+      cell: row => <div>{row.groupId}</div>
+    },
+    {
+      name: '생성일시',
+      selector: row => row?.createDt,
+      sortable: true,
+      cell: row => {
+        return row?.createDt ? row.createDt : '-';
+      }
+    },
+    {
+      name: '가입일시',
+      selector: row => row?.joinDt,
+      sortable: true,
+      cell: row => {
+        return row?.joinDt ? row.joinDt : '-';
+      }
+    },
+    {
+      sortable: true,
+      cell: row => {
+        return selectGroup?.groupId === row?.groupId ? (
+          <Button.Ripple
+            color='danger'
+            className='badge badge-danger'
+            onClick={() => handlerGroupCancel()}
+          >
+            선택취소
+          </Button.Ripple>
+        ) : (
+          <Button.Ripple
+            color='primary'
+            className='badge badge-primary'
+            onClick={() => {
+              handleGroupSelect({
+                groupId: row?.groupId,
+                groupNm: row?.groupNm,
+                groupAuthCd: row?.groupAuthCd,
+                myGroupAuthCd: row?.myGroupAuthCd
+              });
+            }}
+          >
+            상세보기
+          </Button.Ripple>
+        );
+      }
+    }
+  ];
+
+  return (
+    <>
+      <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+        <div>
+          <h4>그룹 목록</h4>
+          <span className='search-case'>검색결과 총 {count}건</span>
+        </div>
+        <div className='d-flex align-items-center'></div>
+      </div>
+      <div className='invoice-list-wrapper'>
+        <Card>
+          <div className='invoice-list-dataTable'>
+            <GridDatabase
+              data={data}
+              count={count}
+              columns={columns}
+              pagination={pagination}
+              paginationPerPage={5}
+              paginationRowsPerPageOptions={paginationRowsPerPageOptions}
+            />
+          </div>
+        </Card>
+      </div>
+    </>
+  );
+};
+
+export default FlightPlanGroupGrid;

src/components/basis/flight/plan/FlightPlanModal.js

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer';
+
+export const FlightPlanModal = ({isOpen, title, description, type, handleModal}) => {     
+
+  return (
+    <div className='vertically-centered-modal'>
+      <Modal
+        isOpen={isOpen}
+        toggle={() =>
+            handleModal(({target: type, isOpen: false}))
+        }        
+        className='modal-dialog-centered modal-xl'
+      >
+        <ModalHeader
+          toggle={() =>
+            handleModal(({target: type, isOpen: false}))
+          }
+        >
+          {title}
+        </ModalHeader>
+        <ModalBody className='pal-modal-body'>
+          {description}
+        </ModalBody>        
+      </Modal>
+    </div>
+  );
+};

src/components/basis/flight/plan/FlightPlanPilot.js

@@ -0,0 +1,157 @@
+import React from 'react';
+import {Button, Card, CardBody, Col, CustomInput, Row, FormGroup, Input, Label} from 'reactstrap';
+import {Search} from 'react-feather';
+import {GridDatabase} from '../../../crud/grid/GridDatatable';
+import { AiOutlineSearch } from 'react-icons/ai';
+import '../../../../assets/css/custom.css';
+import '@styles/react/libs/tables/react-dataTable-component.scss';
+
+const FlightPlanPilot = ({ handleSelectPilot, returnPilot, onClickEvent, onChange,name}) => {
+    
+    const columns = [
+        {id: 'groupNm', name: '그룹 명', cell: row => (<div>{row.groupNm}</div>)},
+        {id: 'memberName', name: '성명', cell: row => (<div>{row.memberName}</div>)},
+        {id: 'hpno', name: '핸드폰 번호', cell: row => (<div>{row.hpno}</div>)},        
+        {id: 'email', name: '이메일', cell: row => (<div>{row.email}</div>)},        
+        {
+            id: 'selectPilot', name: '선택', cell: row => {
+                return <Button.Ripple color='primary' size='sm' onClick={() => { 
+                    handleSelectPilot(row.cstmrSno) 
+                }
+                }>선택</Button.Ripple>;
+            } 
+        }
+    ];
+    return (
+        <>
+        <div className='pal-card-box'>
+            <Row>
+                <Col>
+                    <div
+                        className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                        <div>
+                            <h4>검색조건</h4>
+                        </div>
+                        <div className='d-flex align-items-center'>
+                            <Button.Ripple
+                                color='primary'
+                                size='sm'
+                                onClick={onClickEvent}
+                            >
+                                <Search size={16}/>
+                                검색
+                            </Button.Ripple>
+                        </div>
+                    </div>
+                    <Card>
+                        <CardBody className='pal-card-body'>
+                            <div className='search-cont'>
+                                <dl>                                    
+                                    <dt>                                        
+                                        <div className='search-box'>
+                                            <div className='search-list-ti'>성명</div>       
+                                            <div className='search-list'>
+                                                <div className='search-list-cont'>
+                                                    <Row>
+                                                        <Col className='list-input' xl='4' md='4' sm='12'>
+                                                        <FormGroup className='form-label-group' >
+                                                            <Input
+                                                            type='text'
+                                                            id='memberName'
+                                                            name='memberName'
+                                                            value = {name}
+                                                            onChange = {onChange}
+                                                            bsSize='sm'
+                                                            // onKeyPress={props.onKeyPress}
+                                                            placeholder='성명을 입력하세요'
+                                                            />
+                                                            <Label for='test'>성명</Label>
+                                                        </FormGroup>
+                                                        </Col>
+                                                    </Row>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </dt>
+                                </dl>
+                            </div>
+                        </CardBody>
+                    </Card>
+
+                </Col>
+            </Row>
+        </div>
+        <div className='pal-card-box'>            
+            <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                <div>
+                    <h4>조종사 목록</h4>
+                    <span className='search-case'>검색결과 총 {!!returnPilot ? returnPilot.length : 0}건</span>
+                </div>      
+                <div className='d-flex align-items-center'></div>                  
+            </div>
+            <div className='invoice-list-wrapper'>
+                <Card>
+                    <div className='invoice-list-dataTable'>
+                        <GridDatabase                            
+                            data={returnPilot}
+                            count={returnPilot ? returnPilot.length : 0}
+                            columns={columns}
+                            // pagination={props.pagination}
+                        />                                
+                    </div>
+                </Card>
+            </div>              
+        </div>
+
+
+        {/* {inputVal !== '' ?  (
+        <div className='pal-card-box'>            
+            <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                <div>
+                    <h4>조종사 목록</h4>
+                    <span className='search-case'>검색결과 총 {!!returnPilot ? [returnPilot].length : 0}건</span>
+                </div>      
+                <div className='d-flex align-items-center'></div>                  
+            </div>
+            <div className='invoice-list-wrapper'>
+                <Card>
+                    <div className='invoice-list-dataTable'>
+                        <GridDatabase                            
+                            data={[returnPilot]}
+                            count={returnPilot ? [returnPilot].length : 0}
+                            columns={columns}
+                            // pagination={props.pagination}
+                        />                                
+                    </div>
+                </Card>
+            </div>              
+        </div>
+        ):(
+            <div className='pal-card-box'>            
+            <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                <div>
+                    <h4>조종사 목록</h4>
+                    <span className='search-case'>검색결과 총 {!!pilotList ? pilotList.length : 0}건</span>
+                </div>      
+                <div className='d-flex align-items-center'></div>                  
+            </div>
+            <div className='invoice-list-wrapper'>
+                <Card>
+                    <div className='invoice-list-dataTable'>
+                        <GridDatabase                            
+                            data={pilotList}
+                            count={pilotList ? pilotList.length : 0}
+                            columns={columns}
+                            // pagination={props.pagination}
+                        />                                
+                    </div>
+                </Card>
+            </div>              
+        </div>
+        )} */}
+      </>
+    )
+
+}
+
+export default FlightPlanPilot;

src/components/basis/flight/plan/FlightPlanSearch.js

@@ -1,60 +1,79 @@
-import React, { useEffect, useState } from 'react';
-import {
-    Row,
-    Col,
-    Table,
-    Badge,
-    UncontrolledDropdown,
-    DropdownMenu,
-    DropdownItem,
-    DropdownToggle,
-    Card,
-    CardHeader,
-    CardBody,
-    CardTitle,
-    CardSubtitle,
-    ButtonGroup,
-    Button,
-    Input,
-    CustomInput,
-    FormGroup
-  } from 'reactstrap';
-import { Calendar, Search } from 'react-feather';
+import React, { useState } from 'react';
+import { Button, Card, CardBody, Col, CustomInput, Row } from 'reactstrap';
+import { Search } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
+import moment from 'moment';
 
-
-const FlightPlanSearch = (props) => {
-
-  const [isCheck, setIsCheck] = useState({
-    all: true,
-    yes: false,
-    no: false
-  });
-
-  useEffect(() => {
-    let aprvYn = '';
-
-    if (!isCheck.all) {
-      if (isCheck.yes) {
-        aprvYn = 'Y';
-      } else if (isCheck.no) {
-        aprvYn = 'N';
-      } else {
-        aprvYn = '-';
-      }
+const FlightPlanSearch = ({
+  searchData,
+  handleChangeSearchData,
+  handleSearch
+}) => {
+  const { schFltStDt, schFltEndDt, aprvlYn } = searchData;
+  const initCheckState = {
+    all: aprvlYn == 'A',
+    yes: aprvlYn == 'Y' || aprvlYn == 'A',
+    no: aprvlYn == 'N' || aprvlYn == 'A'
+  };
+  const [checkState, setCheckState] = useState(initCheckState);
+  const handleClickSearch = e => {
+    handleSearch(searchData);
+  };
+  const handleChangeInput = (dates, value, config) => {
+    if (dates.length === 2) {
+      const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss');
+      const schFltEndDt = moment(dates[1])
+        .set({ h: 23, m: 59, s: 59 })
+        .format('YYYY-MM-DD HH:mm:ss');
+      handleChangeSearchData({ schFltStDt, schFltEndDt });
     }
-
-    // props.setParams({
-    //   ...props.params,
-    //   aprvYn: aprvYn
-    // });
-  }, [isCheck]);
-
+  };
+  const handleChangeCheckbox = e => {
+    const { name, value, checked } = e.target;
+    let val;
+    switch (value) {
+      case 'A':
+        val = checked ? 'A' : '';
+        handleChangeSearchData({ [name]: val });
+        setCheckState({
+          all: checked,
+          yes: checked,
+          no: checked
+        });
+        break;
+      case 'Y':
+        if (checked && checkState.no) val = 'A';
+        else if (checked && !checkState.no) val = 'Y';
+        else if (!checked && checkState.no) val = 'N';
+        else if (!checked && !checkState.no) val = '';
+        handleChangeSearchData({ [name]: val });
+        setCheckState(prevState => ({
+          all: prevState.no && checked,
+          yes: checked,
+          no: prevState.no
+        }));
+        break;
+      case 'N':
+        if (checked && checkState.yes) val = 'A';
+        else if (checked && !checkState.yes) val = 'N';
+        else if (!checked && checkState.yes) val = 'Y';
+        else if (!checked && !checkState.yes) val = '';
+        handleChangeSearchData({ [name]: val });
+        setCheckState(prevState => ({
+          all: prevState.yes && checked,
+          yes: prevState.yes,
+          no: checked
+        }));
+        break;
+      default:
+        break;
+    }
+  };
   return (
-    <div className='pal-card-box'>
+    <div>
       <Row>
         <Col>
-          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+          <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
             <div>
               <h4>검색조건</h4>
             </div>
@@ -62,7 +81,7 @@ const FlightPlanSearch = (props) => {
               <Button.Ripple
                 color='primary'
                 size='sm'
-                onClick={e => props.handlerSearch()}
+                onClick={handleClickSearch}
               >
                 <Search size={16} />
                 검색
@@ -70,105 +89,83 @@ const FlightPlanSearch = (props) => {
             </div>
           </div>
           <Card>
-            <CardBody className='pal-card-body'>
-              <div className='search-cont'>
-                <dl>
-                  <dt>
-                    <div className='search-box'>
-                      <div className='search-list-ti'>신청일</div>
-                      <div className='search-list'>
-                        <div className='search-list-cont'>
-                          <Row>
-                            <Col className='list-input' xl='4' md='6' sm='12'>
-                              <div className='d-flex align-items-center calendar-flat'>
-                                <Flatpickr
-                                  id='searchDate'
-                                  value={[
-                                    props.params.stDate,
-                                    props.params.endDate
-                                  ]}
-                                  options={{
-                                    mode: 'range',
-                                    defaultDate: [
-                                      props.params.stDate,
-                                      props.params.endDate
-                                    ]
-                                  }}
-                                  onChange={val =>
-                                    props.handlerInput('searchDate', val)
-                                  }
-                                  onKeyPress={props.onKeyPress}
-                                  className='form-control flat-picker bg-transparent border-0 shadow-none'
-                                />
-                              </div>
-                            </Col>
-                          </Row>
-                        </div>
+            <div className='search-cont'>
+              <dl>
+                <dt>
+                  <div className='search-box'>
+                    <div className='search-list-ti'>신청일</div>
+                    <div className='search-list'>
+                      <div className='search-list-cont'>
+                        <Row>
+                          <Col className='list-input' xl='4' md='6' sm='12'>
+                            <div className='d-flex align-items-center calendar-flat'>
+                              <Flatpickr
+                                id='searchDate'
+                                value={[schFltStDt, schFltEndDt]}
+                                options={{
+                                  mode: 'range'
+                                  // defaultDate: [
+                                  //   props.params.stDate,
+                                  //   props.params.endDate
+                                  // ]
+                                }}
+                                onChange={handleChangeInput}
+                                className='form-control flat-picker bg-transparent border-0 shadow-none'
+                              />
+                            </div>
+                          </Col>
+                        </Row>
                       </div>
                     </div>
-                  </dt>
-
-                  <dt>
-                    <div className='search-box'>
-                      <div className='search-list-ti'>승인여부</div>
-                      <div className='search-list'>
-                        {/* <div className="search-list-cont">
-                            <Input size='sm'/>
-                          </div> */}
-                        <div className='search-list-cont'>
-                          <CustomInput
-                            inline
-                            type='checkbox'
-                            id='exampleCustomCheckbox'
-                            label='전체'
-                            checked={isCheck.all}
-                            onClick={() =>
-                              setIsCheckBox({
-                                all: !isCheck.all,
-                                yes: !isCheck.all,
-                                no: !isCheck.all
-                              })
-                            }
-                          />
-                          <CustomInput
-                            inline
-                            type='checkbox'
-                            id='exampleCustomCheckbox2'
-                            label='승인'
-                            checked={isCheck.yes || isCheck.all}
-                            onClick={() =>
-                              setIsCheckBox({
-                                all: false,
-                                yes: !isCheck.yes
-                              })
-                            }
-                          />
-                          <CustomInput
-                            inline
-                            type='checkbox'
-                            id='exampleCustomCheckbox3'
-                            label='미승인'
-                            checked={isCheck.no || isCheck.all}
-                            onClick={() =>
-                              setIsCheckBox({
-                                all: false,
-                                no: !isCheck.no
-                              })
-                            }
-                          />
-                        </div>
+                  </div>
+                </dt>
+                <dt>
+                  <div className='search-box'>
+                    <div className='search-list-ti'>승인여부</div>
+                    <div className='search-list'>
+                      <div className='search-list-cont'>
+                        <CustomInput
+                          inline
+                          type='checkbox'
+                          id='exampleCustomCheckbox'
+                          label='전체'
+                          name='aprvlYn'
+                          value='A'
+                          // checked={true}
+                          checked={checkState.all}
+                          onChange={handleChangeCheckbox}
+                        />
+                        <CustomInput
+                          inline
+                          type='checkbox'
+                          id='exampleCustomCheckbox2'
+                          label='승인'
+                          name='aprvlYn'
+                          value='Y'
+                          checked={checkState.yes}
+                          onChange={handleChangeCheckbox}
+                        />
+                        <CustomInput
+                          inline
+                          type='checkbox'
+                          id='exampleCustomCheckbox3'
+                          label='미승인'
+                          name='aprvlYn'
+                          value='N'
+                          checked={checkState.no}
+                          onChange={handleChangeCheckbox}
+                        />
                       </div>
                     </div>
-                  </dt>
-                </dl>
-              </div>
-            </CardBody>
+                  </div>
+                </dt>
+              </dl>
+            </div>
           </Card>
-          
         </Col>
       </Row>
     </div>
-  )
-}
+  );
+};
 
-export default FlightPlanSearch;
+export default FlightPlanSearch;

src/components/basis/flight/plan/TodayWeather.js

@@ -0,0 +1,408 @@
+import {
+    Table
+} from 'reactstrap';
+import {
+    Search,
+    Compass,
+    Sun,
+    CloudLightning,
+    Cloud,
+    CloudRain,
+    CloudDrizzle,
+    CloudSnow,
+    Navigation2
+} from 'react-feather';
+
+
+export function TodayWeather({ todayData }) {
+    todayData?.fcstTime?.sort([compareFunction]);
+    const dayres = todayData?.filter(dayData => {
+        switch (dayData?.fcstTime) {
+            case "0200":
+            case "0500":
+            case "0500":
+            case "0800":
+            case "1100":
+            case "1400":
+            case "1700":
+            case "2000":
+            case "2300":
+                return { ...dayData?.todayData }
+        }
+    });
+    // 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);
+    const groupValues = dayres.reduce((acc, current) => {
+        acc[current.fcstTime] = acc[current.fcstTime] || [];
+        acc[current.fcstTime].push({ category: current.category, fcstValue: current.fcstValue });
+        return acc;
+    }, {});
+    // 위에서 만든 객체를 key로 돌려서 새로운 객체 return
+    const groups = Object.keys(groupValues).map((key) => {
+        return { fcstTime: key, category: groupValues[key] };
+    });
+
+    return (
+        <>
+            {dayres.length > 0 ? (
+
+                <Table responsive>
+                    <thead>
+                        <tr>
+                            <th>시각</th>
+                            <th>날씨</th>
+                            <th>기온</th>
+                            <th>풍향</th>
+                            <th>풍속</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {groups.map((i, index) => {
+                            return (
+                                <tr key={index}>
+                                    <td >{i.fcstTime.substring(0, 2)}시</td>
+                                    {i.category[4].fcstValue == "0" ?
+                                        <td>
+                                            {i.category[3].fcstValue == "1" ? <Sun /> : <Cloud />}
+                                        </td>
+                                        : <td>
+                                            {i.category[4].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                                        </td>
+                                    }
+                                    <td>{i.category[0].fcstValue}℃</td>
+                                    <td>
+                                        <Navigation2 style={{ transform: `rotate(${i.category[1]?.fcstValue}deg)` }} />
+                                    </td>
+                                    <td>{i.category[2].fcstValue} m/s</td>
+                                </tr>
+                            )
+                        })}
+                    </tbody>
+                </Table>
+            ) :
+                null}
+        </>
+    )
+}
+
+
+export function TomorrowWeahter({ tomorrowData }) {
+    tomorrowData?.fcstTime?.sort([compareFunction]);
+    const dayres = tomorrowData?.filter(dayData => {
+        switch (dayData?.fcstTime) {
+            case "0200":
+            case "0500":
+            case "0500":
+            case "0800":
+            case "1100":
+            case "1400":
+            case "1700":
+            case "2000":
+            case "2300":
+                return { ...dayData?.tomorrowData }
+        }
+    });
+    return (
+        <Table responsive>
+            <thead>
+                <tr>
+                    <th>시각</th>
+                    <th>날씨</th>
+                    <th>기온</th>
+                    <th>풍향</th>
+                    <th>풍속</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>{dayres[0]?.fcstTime.substring(0, 2)}시</td>
+                    {dayres[3].fcstValue != "0" ?
+                        <td>
+                            {dayres[3].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[4].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[0].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[1]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[2].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[5].fcstTime.substring(0, 2)}시</td>
+                    {dayres[8].fcstValue != "0" ?
+                        <td>
+                            {dayres[8].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[9].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[5].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[6]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[7].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[10].fcstTime.substring(0, 2)}시</td>
+                    {dayres[13].fcstValue != "0" ?
+                        <td>
+                            {dayres[13].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[14].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[10].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[11]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[12].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[15].fcstTime.substring(0, 2)}시</td>
+                    {dayres[18].fcstValue != "0" ?
+                        <td>
+                            {dayres[18].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[19].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[15].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[16]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[17].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[20].fcstTime.substring(0, 2)}시</td>
+                    {dayres[23].fcstValue != "0" ?
+                        <td>
+                            {dayres[23].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[24].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[20].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[21]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[22].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[25].fcstTime.substring(0, 2)}시</td>
+                    {dayres[28].fcstValue != "0" ?
+                        <td>
+                            {dayres[28].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[29].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[25].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[26]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[27].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[30].fcstTime.substring(0, 2)}시</td>
+                    {dayres[33].fcstValue != "0" ?
+                        <td>
+                            {dayres[33].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[34].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[30].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[31]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[32].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[35].fcstTime.substring(0, 2)}시</td>
+                    {dayres[38].fcstValue != "0" ?
+                        <td>
+                            {dayres[38].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[39].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[35].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[36]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[37].fcstValue} m/s</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+export function AfterTomorrowWeahter({ afterData }) {
+    afterData?.fcstTime?.sort([compareFunction]);
+    const dayres = afterData?.filter(dayData => {
+        switch (dayData?.fcstTime) {
+            case "0200":
+            case "0500":
+            case "0500":
+            case "0800":
+            case "1100":
+            case "1400":
+            case "1700":
+            case "2000":
+            case "2300":
+                return { ...dayData?.afterData }
+        }
+    });
+
+    return (
+        <Table responsive>
+            <thead>
+                <tr>
+                    <th>시각</th>
+                    <th>날씨</th>
+                    <th>기온</th>
+                    <th>풍향</th>
+                    <th>풍속</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>{dayres[0].fcstTime.substring(0, 2)}시</td>
+                    {dayres[3].fcstValue != "0" ?
+                        <td>
+                            {dayres[3].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[4].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[0].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[1]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[2].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[5].fcstTime.substring(0, 2)}시</td>
+                    {dayres[8].fcstValue != "0" ?
+                        <td>
+                            {dayres[8].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[9].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[5].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[6]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[7].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[10].fcstTime.substring(0, 2)}시</td>
+                    {dayres[13].fcstValue != "0" ?
+                        <td>
+                            {dayres[13].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[14].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[10].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[11]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[12].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[15].fcstTime.substring(0, 2)}시</td>
+                    {dayres[18].fcstValue != "0" ?
+                        <td>
+                            {dayres[18].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[19].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[15].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[16]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[17].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[20].fcstTime.substring(0, 2)}시</td>
+                    {dayres[23].fcstValue != "0" ?
+                        <td>
+                            {dayres[23].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[24].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[20].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[21]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[22].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[25].fcstTime.substring(0, 2)}시</td>
+                    {dayres[28].fcstValue != "0" ?
+                        <td>
+                            {dayres[28].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[29].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[25].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[26]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[27].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[30].fcstTime.substring(0, 2)}시</td>
+                    {dayres[33].fcstValue != "0" ?
+                        <td>
+                            {dayres[33].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[34].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[30].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[31]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[32].fcstValue} m/s</td>
+                </tr>
+                <tr>
+                    <td>{dayres[35].fcstTime.substring(0, 2)}시</td>
+                    {dayres[38].fcstValue != "0" ?
+                        <td>
+                            {dayres[38].fcstValue == "1" ? <Sun /> : <Cloud />}
+                        </td>
+                        : <td>
+                            {dayres[39].fcstValue == "3" ? <CloudSnow /> : <CloudRain />}
+                        </td>
+                    }
+                    <td>{dayres[35].fcstValue}℃</td>
+                    <td>
+                        <Navigation2 style={{ transform: `rotate(${dayres[36]?.fcstValue}deg)` }} />
+                    </td>
+                    <td>{dayres[37].fcstValue} m/s</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}

src/components/basis/flight/schedule/FlightScheduleGrid.js

@@ -0,0 +1,344 @@
+import { useRef, useState } from 'react';
+import { GridDatabase } from '@src/components/crud/grid/GridDatatable';
+import { Row, Col, Card, Spinner } from 'reactstrap';
+import FlightScheduleRealTime from './FlightScheduleRealTime';
+import { useSelector } from 'react-redux';
+import moment from 'moment';
+
+/**
+ * 비행 전 : B
+ * 비행 중 : F
+ * 비행 완료 : S
+ */
+function FlightScheduleGrid() {
+  const timeRef = useRef(null);
+
+  const { scheduleList } = useSelector(state => state.flightState);
+  const { loading } = useSelector(state => state.loadingReducer);
+
+  const fillZero = (width, str) => {
+    return str.length >= width
+      ? str
+      : new Array(width - str.length + 1).join('0') + str; //남는 길이만큼 0으로 채움
+  };
+
+  const columns = [
+    {
+      name: '그룹 명',
+      selector: row => row.groupNm,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return row.groupNm;
+      }
+    },
+    {
+      name: '기체 소유자',
+      selector: row => row.ownerNm,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return row.ownerNm;
+      }
+    },
+    {
+      name: '기체 식별번호',
+      selector: row => row.idntfNum,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return row.idntfNum;
+      }
+    },
+    {
+      name: '출발지',
+      selector: row => row.startAddress,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return row.startAddress;
+      }
+    },
+    {
+      name: '비행 시작 시간',
+      selector: row => row.schFltStDt,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return moment(row.schFltStDt).format('YYYY-MM-DD HH:mm');
+      }
+    },
+    {
+      name: '도착지',
+      selector: row => row.endAddress,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return row.endAddress;
+      }
+    },
+    {
+      name: '비행 종료 시간',
+      selector: row => row.schFltEndDt,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return moment(row.schFltEndDt).format('YYYY-MM-DD HH:mm');
+      }
+    },
+    {
+      name: '총 예상 비행시간',
+      selector: row => row.groupNm,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        const endDate = moment(row.schFltEndDt);
+        const startDate = moment(row.schFltStDt);
+
+        const hours = Math.floor(
+          moment.duration(endDate.diff(startDate)).asHours()
+        );
+
+        const minute =
+          moment.duration(endDate.diff(startDate)).asMinutes() % 60;
+
+        return `${fillZero(2, String(hours))} : ${fillZero(2, String(minute))}`;
+      }
+    },
+    {
+      name: '상태',
+      selector: row => row.statusCd,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        switch (row.statusCd) {
+          case 'B':
+            return '비행전';
+          case 'F':
+            return '비행중';
+          default:
+            return '비행완료';
+        }
+      }
+    }
+  ];
+
+  const conditionalRowStyles = [
+    {
+      when: row => row.statusCd === 'S',
+      classNames: ['secondary']
+    },
+    {
+      when: row => {
+        if (row.statusCd !== 'S') {
+          // 현재시간
+          const currTime =
+            timeRef?.current?.lastChild?.data
+              .replace(/\:/g, '')
+              .substring(0, 4) || '';
+
+          // 현재날짜
+          const currDay = Number(moment().format('YYYYMMDD'));
+          const currDateTime = moment();
+
+          // 데이터 시작날짜
+          // const itemStartDay = Number(moment(row.schFltStDt).format('YYYYMMDD'));
+          // 데이터 종료날짜
+          const itemEndDay = Number(moment(row.schFltEndDt).format('YYYYMMDD'));
+
+          const itemStartTime = moment(row.schFltStDt).format('HHmm');
+          const itemEndTime = moment(row.schFltEndDt);
+          const diffTime =
+            moment.duration(currDateTime.diff(itemEndTime)).asMinutes() % 60 >
+            -0
+              ? moment.duration(currDateTime.diff(itemEndTime)).asMinutes() % 60
+              : Math.ceil(
+                  moment.duration(currDateTime.diff(itemEndTime)).asMinutes() %
+                    60
+                );
+
+          // 현재날짜 - 종료날짜
+          if (currDay - itemEndDay > 0) {
+            return false;
+          }
+          if (row.statusCd === 'B') {
+            if (
+              currTime - itemStartTime >= 10 &&
+              currTime - itemStartTime <= 19
+            ) {
+              return true;
+            }
+            return false;
+          }
+          if (row.statusCd === 'F') {
+            if (diffTime >= 10 && diffTime <= 19) {
+              return true;
+            }
+            return false;
+          }
+          return false;
+        }
+        return false;
+      },
+      classNames: ['yellow']
+    },
+    {
+      when: row => {
+        if (row.statusCd !== 'S') {
+          // 현재시간
+          const currTime = timeRef.current.lastChild.data
+            .replace(/\:/g, '')
+            .substring(0, 4);
+          // 현재날짜
+          const currDay = Number(moment().format('YYYYMMDD'));
+          const currDateTime = moment();
+
+          // 데이터 시작날짜
+          // const itemStartDay = Number(moment(row.schFltStDt).format('YYYYMMDD'));
+          // 데이터 종료날짜
+          const itemEndDay = Number(moment(row.schFltEndDt).format('YYYYMMDD'));
+
+          const itemStartTime = moment(row.schFltStDt).format('HHmm');
+          const itemEndTime = moment(row.schFltEndDt);
+          const diffTime =
+            moment.duration(currDateTime.diff(itemEndTime)).asMinutes() % 60 >
+            -0
+              ? moment.duration(currDateTime.diff(itemEndTime)).asMinutes() % 60
+              : Math.ceil(
+                  moment.duration(currDateTime.diff(itemEndTime)).asMinutes() %
+                    60
+                );
+
+          // 현재날짜 - 종료날짜
+          if (currDay - itemEndDay > 0) {
+            return false;
+          }
+          // 비행전 체크
+          if (row.statusCd === 'B') {
+            if (
+              currTime - itemStartTime >= 20 &&
+              currTime - itemStartTime <= 29
+            ) {
+              return true;
+            }
+            return false;
+          }
+          // 비행중 체크
+          if (row.statusCd === 'F') {
+            if (diffTime >= 20 && diffTime <= 29) {
+              return true;
+            }
+            return false;
+          }
+          return false;
+        }
+        return false;
+      },
+      classNames: ['warning']
+    },
+    {
+      when: row => {
+        if (row.statusCd !== 'S') {
+          // 현재시간
+          const currTime = timeRef.current.lastChild.data
+            .replace(/\:/g, '')
+            .substring(0, 4);
+          // 현재날짜
+          const currDay = Number(moment().format('YYYYMMDD'));
+          const currDateTime = moment();
+          // 데이터 시작날짜
+          // const itemStartDay = Number(moment(row.schFltStDt).format('YYYYMMDD'));
+          // 데이터 종료날짜
+          const itemEndDay = Number(moment(row.schFltEndDt).format('YYYYMMDD'));
+
+          const itemStartTime = moment(row.schFltStDt).format('HHmm');
+          const itemEndTime = moment(row.schFltEndDt);
+          const diffTime =
+            moment.duration(currDateTime.diff(itemEndTime)).asMinutes() % 60 >
+            -0
+              ? moment.duration(currDateTime.diff(itemEndTime)).asMinutes() % 60
+              : Math.ceil(
+                  moment.duration(currDateTime.diff(itemEndTime)).asMinutes() %
+                    60
+                );
+
+          // 현재날짜 - 종료날짜
+          if (currDay - itemEndDay > 0) {
+            return true;
+          }
+          // 비행전 체크
+          if (row.statusCd === 'B') {
+            if (currTime - itemStartTime >= 30) {
+              return true;
+            }
+            return false;
+          }
+          // 비행중 체크
+          if (row.statusCd === 'F') {
+            if (currDay - itemEndDay < 0) {
+              return false;
+            }
+            if (diffTime > 30) {
+              return true;
+            }
+            return false;
+          }
+          return false;
+        }
+        return false;
+      },
+      classNames: ['danger']
+    }
+  ];
+
+  return (
+    <div className='pal-card-box'>
+      <Row>
+        <Col>
+          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                width: '100%'
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <h4>비행운항 스케줄 목록</h4>
+                <span className='search-case'>
+                  검색결과 총 {scheduleList.length}건
+                </span>
+              </div>
+              <FlightScheduleRealTime ref={timeRef} />
+            </div>
+          </div>
+          <div className='invoice-list-wrapper'>
+            <Card>
+              <div className='invoice-list-dataTable'>
+                {loading ? (
+                  <div className='grid-loading'>
+                    <div>
+                      <Spinner color='primary' />
+                      <span>Loading...</span>
+                    </div>
+                  </div>
+                ) : null}
+                <GridDatabase
+                  title={'비행이력'}
+                  data={scheduleList}
+                  count={scheduleList.length}
+                  columns={columns}
+                  pagination={false}
+                  conditionalRowStyles={conditionalRowStyles}
+                />
+              </div>
+            </Card>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+export default FlightScheduleGrid;

src/components/basis/flight/schedule/FlightScheduleRealTime.js

@@ -0,0 +1,22 @@
+import { useState, forwardRef } from 'react';
+import moment from 'moment';
+import useInterval from '@src/utility/hooks/useInterval';
+
+const KR_TIME_DIFF = 9 * 60 * 60 * 1000;
+
+const FlightScheduleRealTime = forwardRef(({}, ref) => {
+  const [currTime, setCurrTime] = useState(new Date());
+  const utc = currTime.getTime() + currTime.getTimezoneOffset() * 60 * 1000;
+  const kr_curr = new Date(utc + KR_TIME_DIFF);
+
+  useInterval(() => {
+    setCurrTime(new Date());
+    setTime(moment(new Date()).format('HH:mm:ss'));
+  }, [1000]);
+
+  const [time, setTime] = useState(moment(kr_curr).format('HH:mm:ss'));
+
+  return <div ref={ref}>현재시간 : {time.toString()}</div>;
+});
+
+export default FlightScheduleRealTime;

src/components/basis/flight/schedule/FlightScheduleSearch.js

@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'react';
+import { Row, Col, Button, Card, CardBody } from 'reactstrap';
+import { Search, Calendar } from 'react-feather';
+import moment from 'moment';
+import Flatpickr from 'react-flatpickr';
+import { FLIGHT_SCHEDULE_LIST } from '@src/modules/basis/flight/actions/basisFlightAction';
+import { useDispatch } from 'react-redux';
+import useInterval from '@src/utility/hooks/useInterval';
+
+function FlightScheduleSearch() {
+  const dispatch = useDispatch();
+
+  const [date, setDate] = useState(
+    moment().subtract('day').format('YYYY-MM-DD')
+  );
+  const [isSearch, setIsSearch] = useState(false);
+
+  useEffect(() => {
+    setIsSearch(false);
+  }, [date]);
+
+  useInterval(() => {
+    if (isSearch) {
+      dispatch(FLIGHT_SCHEDULE_LIST.request(date));
+    }
+  }, [10000]);
+
+  const handlerChangeDate = val => {
+    setDate(moment(val[0]).format('YYYY-MM-DD'));
+  };
+
+  const handlerSearch = () => {
+    setIsSearch(true);
+    dispatch(FLIGHT_SCHEDULE_LIST.request(date));
+  };
+
+  return (
+    <div className='pal-card-box'>
+      <Row>
+        <Col>
+          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+            <div>
+              <h4>검색조건</h4>
+            </div>
+            <div className='d-flex align-items-center'>
+              <Button.Ripple color='primary' size='sm' onClick={handlerSearch}>
+                <Search size={16} />
+                검색
+              </Button.Ripple>
+            </div>
+          </div>
+          <Card>
+            <CardBody className='pal-card-body'>
+              <div className='search-cont'>
+                <dl>
+                  <dt>
+                    <div className='search-box'>
+                      <div className='search-list-ti'>일자</div>
+                      <div className='search-list'>
+                        <div className='search-list-cont'>
+                          <Row>
+                            <Col className='list-input' xl='4' md='6' sm='12'>
+                              <div className='d-flex align-items-center calendar-flat'>
+                                <Flatpickr
+                                  placeholder='날짜를 선택해주세요'
+                                  id='searchDate'
+                                  value={date}
+                                  options={{
+                                    mode: 'single'
+                                  }}
+                                  onChange={handlerChangeDate}
+                                  className='form-control flat-picker bg-transparent border-0 shadow-none'
+                                />
+                                <Calendar size={14} />
+                              </div>
+                            </Col>
+                          </Row>
+                        </div>
+                      </div>
+                    </div>
+                  </dt>
+                </dl>
+              </div>
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+export default FlightScheduleSearch;

src/components/basis/group/BaisGroupForm.js

@@ -1,87 +1,139 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import * as yup from 'yup';
+import { useForm } from 'react-hook-form';
+import classnames from 'classnames';
 import {
   Row,
   Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
   Card,
-  CardHeader,
   CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
   Button,
   Input,
-  CustomInput,
   FormGroup,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  Label
+  Label,
+  FormFeedback,
+  Form
 } from 'reactstrap';
-import { Link, useHistory } from 'react-router-dom';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 export const BasisGroupForm = props => {
+  useEffect(() => {
+    if (props.groupData?.groupId) {
+      setValue('groupNm', props.groupData?.groupNm);
+    }
+  }, [props.groupData]);
+
+  const Schema = yup.object().shape({
+    groupNm: yup
+      .string()
+      .required('그룹명을 입력해 주세요')
+      .matches(
+        /^[ㄱ-힣A-Za-z0-9]{2,12}$/,
+        '2 자 이상, 12 자 이하 영문자/숫자만 입력 가능합니다.'
+      )
+  });
+
+  const { register, getValues, setValue, errors, handleSubmit } = useForm({
+    defaultValues: {
+      groupNm: ''
+    },
+    resolver: yupResolver(Schema)
+  });
+
+  const onSumbit = async data => {
+    props.handlerSave(data);
+  };
+
   return (
-    <Row>
-      <Col>
-        <Card>
-          <CardBody className='pal-card-body'>
-            <div className='search-cont search-info'>
-              <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
-                <div>
-                  <h4>{props.title} 상세정보</h4>
-                </div>
-                <div className='final'>
-                  {props.groupData.type === 'update' ? (
-                    <span>최종 수정일자 : {props.groupData.updateDt}</span>
-                  ) : null}
+    <Form onSubmit={handleSubmit(onSumbit)}>
+      <Row>
+        <Col>
+          <Card>
+            <CardBody className='pal-card-body'>
+              <div className='search-cont search-info'>
+                <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                  <div>
+                    <h4>{props.title} 상세정보</h4>
+                  </div>
+                  <div className='final'>
+                    {props.groupData.type === 'update' ? (
+                      <span>최종 수정일자 : {props.groupData.updateDt}</span>
+                    ) : null}
+                  </div>
                 </div>
-              </div>
 
-              <dl>
-                <dt>
-                  <div className='search-info-box'>
-                    <Row>
-                      <Col className='list-input' md='4' sm='12'>
-                        <FormGroup>
-                          <Label for='groupcode'>
-                            <span className='necessary'>*</span>그룹 코드
-                          </Label>
-                          <Input
-                            type='text'
-                            id='groupId'
-                            name='groupId'
-                            size='sm'
-                            readOnly={true}
-                            value={props.groupData.groupId}
-                            placeholder=''
-                          />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>
-                        <FormGroup>
-                          <Label for='groupname'>
-                            <span className='necessary'>*</span>그룹명
-                          </Label>
-                          <Input
-                            type='text'
-                            id='groupNm'
-                            name='groupNm'
-                            size='sm'
-                            onChange={props.handlerInput}
-                            value={props.groupData.groupNm}
-                            placeholder=''
-                          />
-                        </FormGroup>
-                      </Col>
+                <dl>
+                  <dt>
+                    <div className='search-info-box'>
+                      <Row>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='groupId'>
+                              <span className='necessary'>*</span>그룹 코드
+                            </Label>
+                            <Input
+                              type='text'
+                              id='groupId'
+                              name='groupId'
+                              bsSize='sm'
+                              readOnly={true}
+                              defaultValue={props.groupData.groupId || ''}
+                              placeholder=''
+                            />
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='groupNm'>
+                              <span className='necessary'>*</span>그룹명
+                            </Label>
+                            <Input
+                              type='text'
+                              id='groupNm'
+                              name='groupNm'
+                              bsSize='sm'
+                              innerRef={register}
+                              // value={props.groupData.groupNm || ''}
+                              placeholder=''
+                              className={classnames({
+                                'is-invalid': errors.groupNm
+                              })}
+                            />
+                            {errors && errors.groupNm && (
+                              <FormFeedback>
+                                {errors.groupNm.message}
+                              </FormFeedback>
+                            )}
+                          </FormGroup>
+                        </Col>
+
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='trmnlId'>
+                              <span className='necessary'>*</span>터미널 ID
+                            </Label>
+                            <Input
+                              type='text'
+                              id='trmnlId'
+                              name='trmnlId'
+                              bsSize='sm'
+                              readOnly={true}
+                              // innerRef={register}
+                              defaultValue={props.groupData.trmnlId || ''}
+                              placeholder=''
+                              className={classnames({
+                                'is-invalid': errors.trmnlId
+                              })}
+                            />
+                            {errors && errors.trmnlId && (
+                              <FormFeedback>
+                                {errors.trmnlId.message}
+                              </FormFeedback>
+                            )}
+                          </FormGroup>
+                        </Col>
 
-                      {/* <Col className='list-input' md='4' sm='12'>
+                        {/* <Col className='list-input' md='4' sm='12'>
                         <FormGroup>
                           <Label for='groupauthority'>그룹 구분 코드</Label>
                           <Input
@@ -95,35 +147,41 @@ export const BasisGroupForm = props => {
                           </Input>
                         </FormGroup>
                       </Col> */}
-                    </Row>
-                  </div>
-                </dt>
-              </dl>
+                      </Row>
+                    </div>
+                  </dt>
+                </dl>
 
-              <div className='d-flex align-items-center'>
-                <Button.Ripple
-                  className='mr-1'
-                  color='primary'
-                  size='sm'
-                  onClick={props.handlerSave}
-                >
-                  저장
-                </Button.Ripple>
-                {/* <Button.Ripple className='mr-1' color='secondary' size='sm'>
+                <div className='d-flex align-items-center'>
+                  <Button.Ripple
+                    className='mr-1'
+                    color='primary'
+                    size='sm'
+                    // onClick={props.handlerSave}
+                    type='submit'
+                  >
+                    저장
+                  </Button.Ripple>
+                  {/* <Button.Ripple className='mr-1' color='secondary' size='sm'>
                   목록
                 </Button.Ripple> */}
-                <Button.Ripple
-                  color='danger'
-                  size='sm'
-                  onClick={props.handlerDelete}
-                >
-                  삭제
-                </Button.Ripple>
+                  {props.groupData.type != 'create' ? (
+                    <Button.Ripple
+                      color='danger'
+                      size='sm'
+                      onClick={() => props.handlerWidthrow()}
+                    >
+                      삭제
+                    </Button.Ripple>
+                  ) : (
+                    <></>
+                  )}
+                </div>
               </div>
-            </div>
-          </CardBody>
-        </Card>
-      </Col>
-    </Row>
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+    </Form>
   );
 };

src/components/basis/group/BasisGroupApprovalGrid.js

@@ -1,61 +1,33 @@
 import { GridDatabase } from '../../crud/grid/GridDatatable';
-import {
-  Row,
-  Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
-  Button,
-  Input,
-  CustomInput,
-  FormGroup
-} from 'reactstrap';
+import { Card } from 'reactstrap';
 import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
 
 export const BasisGroupApprovalGrid = props => {
   return (
-    <div className='pal-card-box'>
-      <Row>
-        <Col>
-          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
-            <div>
-              <h4>{props.title} 목록</h4>
-              <span className='search-case'>검색결과 총 {props.count}건</span>
-            </div>
-            {/* <div className='d-flex align-items-center'>
-              <Button.Ripple
-                color='primary'
-                size='sm'
-                onClick={props.handlerGroupCreate}
-              >
-                그룹생성
-              </Button.Ripple>
-            </div> */}
+    <>
+      <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+        <div>
+          <h4>{props.title} 목록</h4>
+          <span className='search-case'>검색결과 총 {props.total}건</span>
+        </div>
+      </div>
+      <div className='invoice-list-wrapper'>
+        <Card>
+          <div className='invoice-list-dataTable'>
+            <GridDatabase
+              title={'비행이력'}
+              data={props.data}
+              count={props.count}
+              columns={props.columns}
+              pagination={props.pagination}
+              paginationPerPage={props.paginationPerPage}
+              paginationRowsPerPageOptions={props.paginationRowsPerPageOptions}
+              handlerPageChange={props.handlerPageChange}
+              total={props.total}
+            />
           </div>
-          <div className='invoice-list-wrapper'>
-            <Card>
-              <div className='invoice-list-dataTable'>
-                <GridDatabase
-                  title={'비행이력'}
-                  data={props.data}
-                  count={props.count}
-                  columns={props.columns}
-                  pagination={props.pagination}
-                />
-              </div>
-            </Card>
-          </div>
-        </Col>
-      </Row>
-    </div>
+        </Card>
+      </div>
+    </>
   );
 };

src/components/basis/group/BasisGroupApprovalSearch.js

@@ -26,35 +26,94 @@ import { useEffect, useState } from 'react';
 import moment from 'moment';
 
 export const BasisGroupApprovalSearch = props => {
-  const [isCheckBox, setIsCheckBox] = useState({
-    all: true,
-    yes: false,
-    no: false
-  });
+  // const [isCheckBox, setIsCheckBox] = useState({
+  //   all: true,
+  //   yes: false,
+  //   no: false
+  // });
 
-  useEffect(() => {
-    let aprvYn = '';
+  // useEffect(() => {
+  //   let aprvYn = '';
 
-    if (!isCheckBox.all) {
-      if (isCheckBox.yes) {
-        aprvYn = 'Y';
-      } else if (isCheckBox.no) {
-        aprvYn = 'N';
-      } else {
-        aprvYn = '-';
-      }
+  //   if (!isCheckBox.all) {
+  //     if (isCheckBox.yes) {
+  //       aprvYn = 'Y';
+  //     } else if (isCheckBox.no) {
+  //       aprvYn = 'N';
+  //     } else {
+  //       aprvYn = '-';
+  //     }
+  //   }
+  //   props.setParams({
+  //     ...props.params,
+  //     aprvYn: aprvYn
+  //   });
+  // }, [isCheckBox]);
+  let aprvYn = 'A';
+
+  const initCheckState = {
+    all: aprvYn == 'A',
+    yes: aprvYn == 'Y' || aprvYn == 'A',
+    no: aprvYn == 'N' || aprvYn == 'A'
+  };
+  const [checkState, setCheckState] = useState(initCheckState);
+
+  const handleChangeCheckbox = e => {
+    const { name, value, checked } = e.target;
+    let val;
+    switch (value) {
+      case 'A':
+        val = checked ? '' : '-';
+        props.setParams({
+          ...props.params,
+          aprvYn: val
+        });
+        setCheckState({
+          all: checked,
+          yes: checked,
+          no: checked
+        });
+        break;
+      case 'Y':
+        if (checked && checkState.no) val = '';
+        else if (checked && !checkState.no) val = 'Y';
+        else if (!checked && checkState.no) val = 'N';
+        else if (!checked && !checkState.no) val = '-';
+        props.setParams({
+          ...props.params,
+          aprvYn: val
+        });
+        setCheckState(prevState => ({
+          all: prevState.no && checked,
+          yes: checked,
+          no: prevState.no
+        }));
+        break;
+      case 'N':
+        if (checked && checkState.yes) val = '';
+        else if (checked && !checkState.yes) val = 'N';
+        else if (!checked && checkState.yes) val = 'Y';
+        else if (!checked && !checkState.yes) val = '-';
+        props.setParams({
+          ...props.params,
+          aprvYn: val
+        });
+        setCheckState(prevState => ({
+          all: prevState.yes && checked,
+          yes: prevState.yes,
+          no: checked
+        }));
+        break;
+      default:
+        break;
     }
+  };
 
-    props.setParams({
-      ...props.params,
-      aprvYn: aprvYn
-    });
-  }, [isCheckBox]);
   return (
-    <div className='pal-card-box'>
+    <div>
       <Row>
         <Col>
-          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+          <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
             <div>
               <h4>검색조건</h4>
             </div>
@@ -73,32 +132,6 @@ export const BasisGroupApprovalSearch = props => {
             <CardBody className='pal-card-body'>
               <div className='search-cont'>
                 <dl>
-                  <dt>
-                    <div className='search-box'>
-                      <div className='search-list-ti'>그룹명</div>
-                      <div className='search-list'>
-                        <div className='search-list-cont'>
-                          <Row>
-                            <Col className='list-input' xl='4' md='4' sm='12'>
-                              <FormGroup className='form-label-group'>
-                                <Input
-                                  type='text'
-                                  id='groupNm'
-                                  name='groupNm'
-                                  value={props.params.groupNm}
-                                  onChange={props.handlerInput}
-                                  size='sm'
-                                  onKeyPress={props.onKeyPress}
-                                  placeholder='그룹명을 입력하세요'
-                                />
-                                <Label for='test'>그룹명</Label>
-                              </FormGroup>
-                            </Col>
-                          </Row>
-                        </div>
-                      </div>
-                    </div>
-                  </dt>
                   <dt>
                     <div className='search-box'>
                       <div className='search-list-ti'>신청자 명</div>
@@ -111,10 +144,10 @@ export const BasisGroupApprovalSearch = props => {
                                   type='text'
                                   id='memberName'
                                   name='memberName'
-                                  value={props.params.memberName}
+                                  value={props.params.memberName || ''}
                                   onChange={props.handlerInput}
                                   onKeyPress={props.onKeyPress}
-                                  size='sm'
+                                  bsSize='sm'
                                   placeholder='신청자 명을 입력하세요'
                                 />
                                 <Label for='test'>신청자 명</Label>
@@ -138,40 +171,52 @@ export const BasisGroupApprovalSearch = props => {
                             type='checkbox'
                             id='exampleCustomCheckbox'
                             label='전체'
-                            checked={isCheckBox.all}
-                            onClick={() =>
-                              setIsCheckBox({
-                                all: !isCheckBox.all,
-                                yes: !isCheckBox.all,
-                                no: !isCheckBox.all
-                              })
-                            }
+                            name='aprvlYn'
+                            value='A'
+                            checked={checkState.all}
+                            onChange={handleChangeCheckbox}
+                            // defaultChecked={isCheckBox.all}
+                            // onClick={() =>
+                            //   setIsCheckBox({
+                            //     all: !isCheckBox.all,
+                            //     yes: !isCheckBox.all,
+                            //     no: !isCheckBox.all
+                            //   })
+                            // }
                           />
                           <CustomInput
                             inline
                             type='checkbox'
                             id='exampleCustomCheckbox2'
                             label='승인'
-                            checked={isCheckBox.yes || isCheckBox.all}
-                            onClick={() =>
-                              setIsCheckBox({
-                                all: false,
-                                yes: !isCheckBox.yes
-                              })
-                            }
+                            name='aprvlYn'
+                            value='Y'
+                            checked={checkState.yes}
+                            onChange={handleChangeCheckbox}
+                            // defaultChecked={isCheckBox.yes || isCheckBox.all}
+                            // onClick={() =>
+                            //   setIsCheckBox({
+                            //     all: false,
+                            //     yes: !isCheckBox.yes
+                            //   })
+                            // }
                           />
                           <CustomInput
                             inline
                             type='checkbox'
                             id='exampleCustomCheckbox3'
                             label='미승인'
-                            checked={isCheckBox.no || isCheckBox.all}
-                            onClick={() =>
-                              setIsCheckBox({
-                                all: false,
-                                no: !isCheckBox.no
-                              })
-                            }
+                            name='aprvlYn'
+                            value='N'
+                            checked={checkState.no}
+                            onChange={handleChangeCheckbox}
+                            // defaultChecked={isCheckBox.no || isCheckBox.all}
+                            // onClick={() =>
+                            //   setIsCheckBox({
+                            //     all: false,
+                            //     no: !isCheckBox.no
+                            //   })
+                            // }
                           />
                         </div>
                       </div>

src/components/basis/group/BasisGroupDetailJoinSearch.js

@@ -61,9 +61,9 @@ export const BasisGroupDetailJoinSearch = props => {
                                   type='text'
                                   id='groupNm'
                                   name='groupNm'
-                                  value={props.params.groupNm}
+                                  value={props.params.groupNm || ''}
                                   onChange={props.handlerInput}
-                                  size='sm'
+                                  bsSize='sm'
                                   placeholder='그룹명을 입력하세요'
                                   onKeyPress={props.onKeyPress}
                                 />
@@ -84,9 +84,9 @@ export const BasisGroupDetailJoinSearch = props => {
                                   id='groupId'
                                   name='groupId'
                                   onChange={props.handlerInput}
-                                  value={props.params.groupId}
+                                  value={props.params.groupId || ''}
                                   onKeyPress={props.onKeyPress}
-                                  size='sm'
+                                  bsSize='sm'
                                   placeholder='그룹코드를 입력하세요'
                                 />
                                 <Label for='test'>그룹코드</Label>

src/components/basis/group/BasisGroupGrid.js

@@ -1,61 +1,30 @@
 import { GridDatabase } from '../../crud/grid/GridDatatable';
-import {
-  Row,
-  Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
-  Button,
-  Input,
-  CustomInput,
-  FormGroup
-} from 'reactstrap';
-import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
+import { Card, Row, Col, Button } from 'reactstrap';
 
 export const BasisGroupGrid = props => {
   return (
-    <div className='pal-card-box'>
-      <Row>
-        <Col>
-          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
-            <div>
-              <h4>{props.title} 목록</h4>
-              <span className='search-case'>검색결과 총 {props.count}건</span>
-            </div>
-            <div className='d-flex align-items-center'>
-              <Button.Ripple
-                color='primary'
-                size='sm'
-                onClick={props.handlerGroupCreate}
-              >
-                그룹생성
-              </Button.Ripple>
-            </div>
+    <>
+      <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+        <div>
+          <h4>{props.title} 목록</h4>
+          <span className='search-case'>검색결과 총 {props.count}건</span>
+        </div>
+      </div>
+      <div className='invoice-list-wrapper'>
+        <Card>
+          <div className='invoice-list-dataTable'>
+            <GridDatabase
+              title={'비행이력'}
+              data={props.data}
+              count={props.count}
+              columns={props.columns}
+              pagination={props.pagination}
+              paginationPerPage={props.paginationPerPage}
+              paginationRowsPerPageOptions={props.paginationRowsPerPageOptions}
+            />
           </div>
-          <div className='invoice-list-wrapper'>
-            <Card>
-              <div className='invoice-list-dataTable'>
-                <GridDatabase
-                  title={'비행이력'}
-                  data={props.data}
-                  count={props.count}
-                  columns={props.columns}
-                  pagination={props.pagination}
-                />
-              </div>
-            </Card>
-          </div>
-        </Col>
-      </Row>
-    </div>
+        </Card>
+      </div>
+    </>
   );
 };

src/components/basis/group/BasisGroupMyGrid.js

@@ -0,0 +1,46 @@
+import { GridDatabase } from '../../crud/grid/GridDatatable';
+import { Card, Row, Col, Button } from 'reactstrap';
+
+export const BasisGroupMyGrid = props => {
+  return (
+    <div className='pal-card-box'>
+      <Row>
+        <Col>
+          <>
+            <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+              <div>
+                <h4>{props.title} 목록</h4>
+                <span className='search-case'>검색결과 총 {props.count}건</span>
+              </div>
+              <div className='d-flex align-items-center'>
+                <Button.Ripple
+                  color='primary'
+                  size='sm'
+                  onClick={props.handlerGroupCreate}
+                >
+                  그룹생성
+                </Button.Ripple>
+              </div>
+            </div>
+            <div className='invoice-list-wrapper'>
+              <Card>
+                {/* <div className='grid-loading'>
+                <div><Spinner color='primary' /><span>Loading...</span></div>
+              </div> */}
+                <div className='invoice-list-dataTable'>
+                  <GridDatabase
+                    title={'비행이력'}
+                    data={props.data}
+                    count={props.count}
+                    columns={props.columns}
+                    pagination={props.pagination}
+                  />
+                </div>
+              </Card>
+            </div>
+          </>
+        </Col>
+      </Row>
+    </div>
+  );
+};

src/components/basis/group/BasisGroupUsersGrid.js

@@ -1,37 +1,18 @@
 import { GridDatabase } from '../../crud/grid/GridDatatable';
-import {
-  Row,
-  Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
-  Button,
-  Input,
-  CustomInput,
-  FormGroup
-} from 'reactstrap';
-import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
+import { Row, Col, Card } from 'reactstrap';
 
 export const BasisGroupUsersGrid = props => {
   return (
-    <div className='pal-card-box'>
-      <Row>
-        <Col>
-          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
-            <div>
-              <h4>{props.title} 목록</h4>
-              <span className='search-case'>검색결과 총 {props.count}건</span>
-            </div>
-            {/* <div className='d-flex align-items-center'>
+    // <div className='pal-card-box'>
+    //   <Row>
+    //     <Col>
+    <>
+      <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+        <div>
+          <h4>{props.title} 목록</h4>
+          <span className='search-case'>검색결과 총 {props.total}건</span>
+        </div>
+        {/* <div className='d-flex align-items-center'>
               <Button.Ripple
                 color='primary'
                 size='sm'
@@ -40,22 +21,27 @@ export const BasisGroupUsersGrid = props => {
                 그룹생성
               </Button.Ripple>
             </div> */}
+      </div>
+      <div className='invoice-list-wrapper'>
+        <Card>
+          <div className='invoice-list-dataTable'>
+            <GridDatabase
+              title={'비행이력'}
+              data={props.data}
+              count={props.count}
+              total={props.total}
+              columns={props.columns}
+              pagination={props.pagination}
+              handlerPageChange={props.handlerPageChange}
+              paginationPerPage={props.paginationPerPage}
+              paginationRowsPerPageOptions={props.paginationRowsPerPageOptions}
+            />
           </div>
-          <div className='invoice-list-wrapper'>
-            <Card>
-              <div className='invoice-list-dataTable'>
-                <GridDatabase
-                  title={'비행이력'}
-                  data={props.data}
-                  count={props.count}
-                  columns={props.columns}
-                  pagination={props.pagination}
-                />
-              </div>
-            </Card>
-          </div>
-        </Col>
+        </Card>
+      </div>
+      {/* </Col>
       </Row>
-    </div>
+    </div> */}
+    </>
   );
 };

src/components/basis/group/BasisGroupUsersSearch.js

@@ -27,10 +27,11 @@ import moment from 'moment';
 
 export const BasisGroupUsersSearch = props => {
   return (
-    <div className='pal-card-box'>
+    // <div className='pal-card-box'>
+    <div>
       <Row>
         <Col>
-          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+          <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
             <div>
               <h4>검색조건</h4>
             </div>
@@ -49,7 +50,7 @@ export const BasisGroupUsersSearch = props => {
             <CardBody className='pal-card-body'>
               <div className='search-cont'>
                 <dl>
-                  <dt>
+                  {/* <dt>
                     <div className='search-box'>
                       <div className='search-list-ti'>그룹명</div>
                       <div className='search-list'>
@@ -61,10 +62,10 @@ export const BasisGroupUsersSearch = props => {
                                   type='text'
                                   id='groupNm'
                                   name='groupNm'
-                                  value={props.params.groupNm}
+                                  value={props.params.groupNm || ''}
                                   onChange={props.handlerInput}
                                   onKeyPress={props.onKeyPress}
-                                  size='sm'
+                                  bsSize='sm'
                                   placeholder='그룹명을 입력하세요'
                                 />
                                 <Label for='test'>그룹명</Label>
@@ -74,7 +75,7 @@ export const BasisGroupUsersSearch = props => {
                         </div>
                       </div>
                     </div>
-                  </dt>
+                  </dt> */}
                   <dt>
                     <div className='search-box'>
                       <div className='search-list-ti'>사용자 명</div>
@@ -87,10 +88,10 @@ export const BasisGroupUsersSearch = props => {
                                   type='text'
                                   id='memberName'
                                   name='memberName'
-                                  value={props.params.memberName}
+                                  value={props.params.memberName || ''}
                                   onChange={props.handlerInput}
                                   onKeyPress={props.onKeyPress}
-                                  size='sm'
+                                  bsSize='sm'
                                   placeholder='사용자 명을 입력하세요'
                                 />
                                 <Label for='test'>사용자 명</Label>

src/components/crud/excel/ExcelExportButton.js

@@ -3,7 +3,6 @@ import { CSVLink, CSVDownload } from 'react-csv';
 import { Button } from 'reactstrap';
 import { File } from 'react-feather';
 export const ExcelExportButton = props => {
-  // console.log(props);
   return (
     <CSVLink
       headers={props.headers}

src/components/crud/grid/GridDatatable.js

@@ -7,24 +7,46 @@ import {
   File,
   ChevronDown
 } from 'react-feather';
+import { selectableRowsComponent } from './selectableRowsComponent';
+
 export const GridDatabase = props => {
-  return props.count <= 0 ? (
+  return props[`${props.handlerPageChange ? 'total' : 'count'}`] <= 0 ? (
     <div className='no-dataTable'>표시할 데이터가 없습니다.</div>
   ) : (
-    <DataTable
-      noHeader
-      pagination={props.pagination}
-      paginationTotalRows={props.count}
-      // paginationServer
-      subHeader={false}
-      columns={props.columns}
-      responsive={true}
-      sortIcon={<ChevronDown />}
-      className='react-dataTable pal-dateTable'
-      // defaultSortField='invoiceId'
-      // paginationDefaultPage={currentPage}
-      // paginationComponent={CustomPagination}
-      data={props.data}
-    />
+    <>
+      <div>
+        <DataTable
+          noHeader
+          pagination={props.pagination}
+          paginationTotalRows={props.total}
+          paginationPerPage={props.paginationPerPage}
+          paginationRowsPerPageOptions={props.paginationRowsPerPageOptions}
+          // paginationServer
+          subHeader={false}
+          columns={props.columns}
+          responsive={true}
+          sortIcon={<ChevronDown />}
+          className='react-dataTable pal-dateTable'
+          paginationDefaultPage={props.page || 1}
+          // defaultSortField='invoiceId'
+          // paginationDefaultPage={currentPage}
+          // paginationComponent={CustomPagination}
+          data={props.data}
+          paginationServer={
+            props.pagination && props.handlerPageChange ? true : false
+          }
+          onChangePage={props.pagination ? props.handlerPageChange : null}
+          paginationComponentOptions={{
+            noRowsPerPage: props.handlerPageChange ? true : false
+          }}
+          selectableRows={props.selectableRows}
+          selectableRowsComponent={props.selectableRowsComponent}
+          {...(props.onSelectedRowsChange
+            ? { onSelectedRowsChange: props.onSelectedRowsChange }
+            : {})}
+          conditionalRowStyles={props.conditionalRowStyles}
+        />
+      </div>
+    </>
   );
 };

src/components/crud/grid/selectableRowsComponent.js

@@ -0,0 +1,24 @@
+import { CustomInput, Input } from 'reactstrap';
+import React from 'react';
+
+export const selectableRowsComponent = React.forwardRef(
+  ({ onClick, ...rest }, ref) => {
+    let c = new Date().getTime() + Math.random();
+    return (
+      <div
+        className='custom-checkbox custom-control'
+        style={{ paddingLeft: 0 }}
+      >
+        <input
+          className='custom-control-input'
+          id={c}
+          type='checkbox'
+          ref={ref}
+          onClick={onClick}
+          {...rest}
+        />
+        <label className='custom-control-label' htmlFor={c} />
+      </div>
+    );
+  }
+);

src/components/dashboard/DashboardDronList.js

@@ -5,7 +5,7 @@ export const DashboardDronList = props => {
   return (
     <Card>
       <CardHeader className=''>
-        <CardTitle tag='h4'>내 기체 정보</CardTitle>
+        <CardTitle tag='h4'>기체 정보</CardTitle>
         <button onClick={e => props.pageMove()}>
           <Plus />
         </button>
@@ -23,7 +23,7 @@ export const DashboardDronList = props => {
               return (
                 <tr key={index}>
                   <td>{item.prdctNum}</td>
-                  <td>{item.createDt}</td>
+                  <td>{item.groupNm}</td>
                 </tr>
               );
             })}

src/components/dashboard/DashboardGroupList.js

@@ -5,7 +5,7 @@ export const DashboardGroupList = props => {
   return (
     <Card>
       <CardHeader className=''>
-        <CardTitle tag='h4'>내 그룹 정보</CardTitle>
+        <CardTitle tag='h4'>그룹 정보</CardTitle>
         <button onClick={e => props.pageMove()}>
           <Plus />
         </button>
@@ -21,10 +21,10 @@ export const DashboardGroupList = props => {
           <tbody>
             {props.data?.map((item, index) => {
               return (
-                  <tr key={index}>
-                    <td>{item.groupNm}</td>
-                    <td>{item.createDt}</td>
-                  </tr>
+                <tr key={index}>
+                  <td>{item.groupNm}</td>
+                  <td>{item.createDt}</td>
+                </tr>
               );
             })}
           </tbody>