diff --git a/src/@core/components/avatar-group/index.js b/src/@core/components/avatar-group/index.js
index e445689d..12a9f1ef 100644
--- a/src/@core/components/avatar-group/index.js
+++ b/src/@core/components/avatar-group/index.js
@@ -1,29 +1,32 @@
 // ** React Imports
-import { Fragment } from 'react'
+import { Fragment } from 'react';
 
 // ** Third Party Components
-import Proptypes from 'prop-types'
-import classnames from 'classnames'
-import { UncontrolledTooltip } from 'reactstrap'
+import Proptypes from 'prop-types';
+import classnames from 'classnames';
+import { UncontrolledTooltip } from 'reactstrap';
 
 // ** Custom Components
-import Avatar from '@components/avatar'
+import Avatar from '@core@components/avatar';
 
 const AvatarGroup = props => {
   // ** Props
-  const { data, tag, className } = props
+  const { data, tag, className } = props;
 
   // ** Conditional Tag
-  const Tag = tag ? tag : 'div'
+  const Tag = tag ? tag : 'div';
 
   // ** Render Data
   const renderData = () => {
     return data.map((item, i) => {
-      const ItemTag = item.tag ? item.tag : 'div'
+      const ItemTag = item.tag ? item.tag : 'div';
       return (
         <Fragment key={i}>
           {item.title ? (
-            <UncontrolledTooltip placement={item.placement} target={item.title.split(' ').join('-')}>
+            <UncontrolledTooltip
+              placement={item.placement}
+              target={item.title.split(' ').join('-')}
+            >
               {item.title}
             </UncontrolledTooltip>
           ) : null}
@@ -39,11 +42,15 @@ const AvatarGroup = props => {
               {...item}
             />
           ) : null}
-          {item.meta ? <ItemTag className='d-flex align-items-center pl-1'>{item.meta}</ItemTag> : null}
+          {item.meta ? (
+            <ItemTag className='d-flex align-items-center pl-1'>
+              {item.meta}
+            </ItemTag>
+          ) : null}
         </Fragment>
-      )
-    })
-  }
+      );
+    });
+  };
 
   return (
     <Tag
@@ -53,13 +60,13 @@ const AvatarGroup = props => {
     >
       {renderData()}
     </Tag>
-  )
-}
+  );
+};
 
-export default AvatarGroup
+export default AvatarGroup;
 
 // ** PropTypes
 AvatarGroup.propTypes = {
   data: Proptypes.array.isRequired,
   tag: Proptypes.oneOfType([Proptypes.func, Proptypes.string])
-}
+};
diff --git a/src/@core/components/card-actions/index.js b/src/@core/components/card-actions/index.js
index 8ab73b67..d247c41c 100644
--- a/src/@core/components/card-actions/index.js
+++ b/src/@core/components/card-actions/index.js
@@ -1,21 +1,29 @@
 // ** React Imports
-import { Fragment, useState, useEffect } from 'react'
+import { Fragment, useState, useEffect } from 'react';
 
 // ** Third Party Components
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import UiLoader from '@components/ui-loader'
-import { ChevronDown, RotateCw, X } from 'react-feather'
-import { Card, CardHeader, CardTitle, Collapse, Spinner } from 'reactstrap'
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import UiLoader from '@core@components/ui-loader';
+import { ChevronDown, RotateCw, X } from 'react-feather';
+import { Card, CardHeader, CardTitle, Collapse, Spinner } from 'reactstrap';
 
 const CardActions = props => {
   // ** Props
-  const { title, actions, children, collapseIcon, reloadIcon, removeIcon, endReload } = props
+  const {
+    title,
+    actions,
+    children,
+    collapseIcon,
+    reloadIcon,
+    removeIcon,
+    endReload
+  } = props;
 
   // ** States
-  const [reload, setReload] = useState(false)
-  const [collapse, setCollapse] = useState(true)
-  const [visibility, setVisibility] = useState(true)
+  const [reload, setReload] = useState(false);
+  const [collapse, setCollapse] = useState(true);
+  const [visibility, setVisibility] = useState(true);
 
   /**
    ** If custom icon is defined then consider that else default icons
@@ -24,20 +32,20 @@ const CardActions = props => {
     collapse: collapseIcon ? collapseIcon : ChevronDown,
     remove: removeIcon ? removeIcon : X,
     reload: reloadIcon ? reloadIcon : RotateCw
-  }
+  };
 
   // ** Action to call
   const callAction = action => {
     switch (action) {
       case 'collapse':
-        return setCollapse(!collapse)
+        return setCollapse(!collapse);
       case 'remove':
-        return setVisibility(false)
+        return setVisibility(false);
       case 'reload':
-        return setReload(true)
+        return setReload(true);
       default:
     }
-  }
+  };
 
   // ** Renders card actions
   const renderIcons = () => {
@@ -48,7 +56,7 @@ const CardActions = props => {
 
     if (Array.isArray(actions)) {
       return actions.map((action, i) => {
-        const Tag = Icons[action]
+        const Tag = Icons[action];
         return (
           <Tag
             key={i}
@@ -58,31 +66,41 @@ const CardActions = props => {
             size={15}
             onClick={() => callAction(action)}
           />
-        )
-      })
+        );
+      });
     } else {
-      const Tag = Icons[actions]
-      return <Tag className='cursor-pointer' size={15} onClick={() => callAction(actions)} />
+      const Tag = Icons[actions];
+      return (
+        <Tag
+          className='cursor-pointer'
+          size={15}
+          onClick={() => callAction(actions)}
+        />
+      );
     }
-  }
+  };
 
   // ** Ends reload
   const removeReload = () => {
-    setReload(false)
-  }
+    setReload(false);
+  };
 
   // ** If user passes endReload function call it.
   useEffect(() => {
     if (reload) {
-      endReload(removeReload)
+      endReload(removeReload);
     }
-  })
+  });
 
   // ** If user passes collapse action then return <Collapse> as Wrapper else return <Fragment>
-  const CollapseWrapper = actions === 'collapse' || actions.includes('collapse') ? Collapse : Fragment
+  const CollapseWrapper =
+    actions === 'collapse' || actions.includes('collapse')
+      ? Collapse
+      : Fragment;
 
   // ** If user passes reload action then return <BlockUi> as Wrapper else return <Fragment>
-  const BlockUiWrapper = actions === 'reload' || actions.includes('reload') ? UiLoader : Fragment
+  const BlockUiWrapper =
+    actions === 'reload' || actions.includes('reload') ? UiLoader : Fragment;
 
   return (
     <BlockUiWrapper
@@ -103,15 +121,19 @@ const CardActions = props => {
           <CardTitle tag='h4'>{title}</CardTitle>
           <div className='action-icons'>{renderIcons()}</div>
         </CardHeader>
-        <CollapseWrapper {...(actions === 'collapse' || actions.includes('collapse') ? { isOpen: collapse } : {})}>
+        <CollapseWrapper
+          {...(actions === 'collapse' || actions.includes('collapse')
+            ? { isOpen: collapse }
+            : {})}
+        >
           {children}
         </CollapseWrapper>
       </Card>
     </BlockUiWrapper>
-  )
-}
+  );
+};
 
-export default CardActions
+export default CardActions;
 
 // ** PropTypes
 CardActions.propTypes = {
@@ -119,14 +141,17 @@ CardActions.propTypes = {
   collapseIcon: PropTypes.any,
   removeIcon: PropTypes.any,
   reloadIcon: PropTypes.any,
-  actions: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
+  actions: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]).isRequired,
   endReload(props) {
     // ** User passes reload action and doesn't pass endReload then return Error
     if (
       (props['actions'] === 'reload' && props['endReload'] === undefined) ||
       (props['actions'].includes('reload') && props['endReload'] === undefined)
     ) {
-      return new Error('Please provide a function to end reload!')
+      return new Error('Please provide a function to end reload!');
     }
   }
-}
+};
diff --git a/src/@core/components/widgets/stats/StatsWithAreaChart.js b/src/@core/components/widgets/stats/StatsWithAreaChart.js
index 08639455..c5d63091 100644
--- a/src/@core/components/widgets/stats/StatsWithAreaChart.js
+++ b/src/@core/components/widgets/stats/StatsWithAreaChart.js
@@ -1,18 +1,29 @@
 // ** Custom Components
-import Avatar from '@components/avatar'
+import Avatar from '@core@components/avatar';
 
 // ** Third Party Components
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Chart from 'react-apexcharts'
-import { Card, CardBody } from 'reactstrap'
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Chart from 'react-apexcharts';
+import { Card, CardBody } from 'reactstrap';
 
 // ** Default Options
-import { areaChartOptions } from './ChartOptions'
+import { areaChartOptions } from './ChartOptions';
 
 const StatsWithAreaChart = props => {
   // ** Props
-  const { icon, color, stats, statTitle, series, options, type, height, className, ...rest } = props
+  const {
+    icon,
+    color,
+    stats,
+    statTitle,
+    series,
+    options,
+    type,
+    height,
+    className,
+    ...rest
+  } = props;
   return (
     <Card {...rest}>
       <CardBody
@@ -20,16 +31,25 @@ const StatsWithAreaChart = props => {
           [className]: className
         })}
       >
-        <Avatar className='avatar-stats p-50 m-0' color={`light-${color}`} icon={icon} />
+        <Avatar
+          className='avatar-stats p-50 m-0'
+          color={`light-${color}`}
+          icon={icon}
+        />
         <h2 className='font-weight-bolder mt-1'>{stats}</h2>
         <p className='card-text'>{statTitle}</p>
       </CardBody>
-      <Chart options={options} series={series} type={type} height={height ? height : 100} />
+      <Chart
+        options={options}
+        series={series}
+        type={type}
+        height={height ? height : 100}
+      />
     </Card>
-  )
-}
+  );
+};
 
-export default StatsWithAreaChart
+export default StatsWithAreaChart;
 
 // ** PropTypes
 StatsWithAreaChart.propTypes = {
@@ -42,10 +62,10 @@ StatsWithAreaChart.propTypes = {
   type: PropTypes.string,
   height: PropTypes.string,
   className: PropTypes.string
-}
+};
 
 // ** Default Props
 StatsWithAreaChart.defaultProps = {
   options: areaChartOptions,
   color: 'primary'
-}
+};
diff --git a/src/@core/components/widgets/stats/StatsWithLineChart.js b/src/@core/components/widgets/stats/StatsWithLineChart.js
index d54ff898..5639abcb 100644
--- a/src/@core/components/widgets/stats/StatsWithLineChart.js
+++ b/src/@core/components/widgets/stats/StatsWithLineChart.js
@@ -1,15 +1,25 @@
 // ** Custom Components
-import Avatar from '@components/avatar'
+import Avatar from '@core@components/avatar';
 
 // ** Third Party Components
-import PropTypes from 'prop-types'
-import Chart from 'react-apexcharts'
-import { Card, CardHeader, CardText } from 'reactstrap'
+import PropTypes from 'prop-types';
+import Chart from 'react-apexcharts';
+import { Card, CardHeader, CardText } from 'reactstrap';
 
 // ** Default Options
-import { lineChartOptions } from './ChartOptions'
+import { lineChartOptions } from './ChartOptions';
 
-const StatsWithLineChart = ({ icon, color, stats, statTitle, series, options, type, height, ...rest }) => {
+const StatsWithLineChart = ({
+  icon,
+  color,
+  stats,
+  statTitle,
+  series,
+  options,
+  type,
+  height,
+  ...rest
+}) => {
   return (
     <Card {...rest}>
       <CardHeader className='align-items-start pb-0'>
@@ -17,14 +27,23 @@ const StatsWithLineChart = ({ icon, color, stats, statTitle, series, options, ty
           <h2 className='font-weight-bolder'>{stats}</h2>
           <CardText>{statTitle}</CardText>
         </div>
-        <Avatar className='avatar-stats p-50 m-0' color={`light-${color}`} icon={icon} />
+        <Avatar
+          className='avatar-stats p-50 m-0'
+          color={`light-${color}`}
+          icon={icon}
+        />
       </CardHeader>
-      <Chart options={options} series={series} type={type} height={height ? height : 100} />
+      <Chart
+        options={options}
+        series={series}
+        type={type}
+        height={height ? height : 100}
+      />
     </Card>
-  )
-}
+  );
+};
 
-export default StatsWithLineChart
+export default StatsWithLineChart;
 
 // ** PropTypes
 StatsWithLineChart.propTypes = {
@@ -36,10 +55,10 @@ StatsWithLineChart.propTypes = {
   series: PropTypes.array.isRequired,
   type: PropTypes.string,
   height: PropTypes.string
-}
+};
 
 // ** Default Props
 StatsWithLineChart.defaultProps = {
   options: lineChartOptions,
   color: 'primary'
-}
+};
diff --git a/src/@core/layouts/HeaderLayout.js b/src/@core/layouts/HeaderLayout.js
index b914eaa3..da55d096 100644
--- a/src/@core/layouts/HeaderLayout.js
+++ b/src/@core/layouts/HeaderLayout.js
@@ -14,13 +14,13 @@ import {
 import classnames from 'classnames';
 import { ArrowUp } from 'react-feather';
 import ScrollToTop from 'react-scroll-up';
-import { Navbar, Button } from '../../components/ui/index';
+import { Navbar, Button } from '@component/ui';
 
 // ** Configs
 import themeConfig from '@configs/themeConfig';
 
 // ** Custom Components
-import Customizer from '@components/customizer';
+import Customizer from '@core@components/customizer';
 import FooterComponent from './components/footer';
 import NavbarComponent from './components/navbar';
 import SidebarComponent from './components/menu/vertical-menu';
diff --git a/src/@core/layouts/HorizontalLayout.js b/src/@core/layouts/HorizontalLayout.js
index 80116494..0db3a189 100644
--- a/src/@core/layouts/HorizontalLayout.js
+++ b/src/@core/layouts/HorizontalLayout.js
@@ -10,13 +10,13 @@ import { handleMenuHidden, handleContentWidth } from '@store/actions/layout';
 import classnames from 'classnames';
 import { ArrowUp } from 'react-feather';
 import ScrollToTop from 'react-scroll-up';
-import { Navbar, NavItem, Button } from '../../components/ui/index';
+import { Navbar, NavItem, Button } from '@component/ui';
 
 // ** Configs
 import themeConfig from '@configs/themeConfig';
 
 // ** Custom Components
-import Customizer from '@components/customizer';
+import Customizer from '@core@components/customizer';
 import NavbarComponent from './components/navbar';
 import FooterComponent from './components/footer';
 import MenuComponent from './components/menu/horizontal-menu';
diff --git a/src/@core/layouts/VerticalLayout.js b/src/@core/layouts/VerticalLayout.js
index 55ba971d..680c8049 100644
--- a/src/@core/layouts/VerticalLayout.js
+++ b/src/@core/layouts/VerticalLayout.js
@@ -14,13 +14,13 @@ import {
 import classnames from 'classnames';
 import { ArrowUp } from 'react-feather';
 import ScrollToTop from 'react-scroll-up';
-import { Navbar, Button } from '../../components/ui/index';
+import { Navbar, Button } from '@component/ui';
 
 // ** Configs
 import themeConfig from '@configs/themeConfig';
 
 // ** Custom Components
-import Customizer from '@components/customizer';
+import Customizer from '@core@components/customizer';
 import FooterComponent from './components/footer';
 import NavbarComponent from './components/navbar';
 import SidebarComponent from './components/menu/vertical-menu';
diff --git a/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuGroup.js b/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuGroup.js
index 049df68b..9cf2944e 100644
--- a/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuGroup.js
+++ b/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuGroup.js
@@ -4,7 +4,7 @@ import { Link, useLocation } from 'react-router-dom';
 
 // ** Third Party Components
 import classnames from 'classnames';
-import { Collapse, Badge } from '../../../../../components/ui/index';
+import { Collapse, Badge } from '@component/ui';
 
 // ** Vertical Menu Items Component
 import VerticalNavMenuItems from './VerticalNavMenuItems';
diff --git a/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js b/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js
index 43a5f810..3501985c 100644
--- a/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js
+++ b/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { useEffect } from 'react';
 import { matchPath, NavLink, useLocation } from 'react-router-dom';
 // ** Third Party Components
-import { Badge } from '../../../../../components/ui/index';
+import { Badge } from '@component/ui';
 
 const VerticalNavMenuLink = ({
   item,
diff --git a/src/@core/layouts/components/navbar/UserDropdown.js b/src/@core/layouts/components/navbar/UserDropdown.js
index 4f7fe917..1d776a76 100644
--- a/src/@core/layouts/components/navbar/UserDropdown.js
+++ b/src/@core/layouts/components/navbar/UserDropdown.js
@@ -1,6 +1,6 @@
 // ** React Imports
 // ** Custom Components
-import Avatar from '@components/avatar';
+import Avatar from '@core@components/avatar';
 // ** Default Avatar Image
 import defaultAvatar from '@src/assets/images/portrait/small/kac_Porty02.jpg';
 // ** Utils
diff --git a/src/components/account/find/AccountFindPassword.js b/src/components/account/find/AccountFindPassword.js
index 7cf7f431..d91074f7 100644
--- a/src/components/account/find/AccountFindPassword.js
+++ b/src/components/account/find/AccountFindPassword.js
@@ -13,7 +13,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../../ui/index';
+} from '@component/ui';
 import { User, Lock } from 'react-feather';
 import '../../../assets/css/custom.css';
 import { accountAPI } from '../../../modules/account/register';
diff --git a/src/components/account/find/AccountFindTab.js b/src/components/account/find/AccountFindTab.js
index a5b953f9..396e082c 100644
--- a/src/components/account/find/AccountFindTab.js
+++ b/src/components/account/find/AccountFindTab.js
@@ -8,7 +8,7 @@ import {
   NavItem,
   NavLink,
   TabContent
-} from '../../ui/index';
+} from '@component/ui';
 import classnames from 'classnames';
 import { User, Lock } from 'react-feather';
 import { AccountFindUserIdContainer } from '../../../containers/account/find/AccountFindUserIdContainer';
diff --git a/src/components/account/find/AccountFindUserId.js b/src/components/account/find/AccountFindUserId.js
index 81629834..d51a1487 100644
--- a/src/components/account/find/AccountFindUserId.js
+++ b/src/components/account/find/AccountFindUserId.js
@@ -13,7 +13,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../../ui/index';
+} from '@component/ui';
 import { User } from 'react-feather';
 
 import '../../../assets/css/custom.css';
diff --git a/src/components/account/login/AccountLogin.js b/src/components/account/login/AccountLogin.js
index 4271d8f1..937562ff 100644
--- a/src/components/account/login/AccountLogin.js
+++ b/src/components/account/login/AccountLogin.js
@@ -6,7 +6,7 @@ import {
   InputGroup,
   InputGroupAddon,
   InputGroupText
-} from '../../ui/index';
+} from '@component/ui';
 import { Mail, Lock } from 'react-feather';
 import { Link } from 'react-router-dom';
 import { useEffect, useState } from 'react';
diff --git a/src/components/account/mypage/AccountMypageForm.js b/src/components/account/mypage/AccountMypageForm.js
index c90c65d9..3740b2d0 100644
--- a/src/components/account/mypage/AccountMypageForm.js
+++ b/src/components/account/mypage/AccountMypageForm.js
@@ -11,9 +11,9 @@ import {
   Modal,
   ModalHeader,
   ModalBody,
-  ModalFooter
-} from '../../../components/ui/index';
-import { Button } from 'reactstrap';
+  ModalFooter,
+  Button
+} from '@component/ui';
 // ** Styles
 import '../../../assets/css/custom.css';
 import { useHistory } from 'react-router-dom';
@@ -142,13 +142,14 @@ const AccountMypageForm = ({
                           휴대폰 번호
                         </Label>
                         <div className='user-phone-btn'>
-                          <Button.Ripple
+                          <Button
+                            ripple
                             type='button'
                             color='primary'
                             onClick={handler}
                           >
                             <span className='d-sm-inline-block'>변경</span>
-                          </Button.Ripple>
+                          </Button>
                         </div>
                         <Input
                           type='number'
@@ -208,7 +209,8 @@ const AccountMypageForm = ({
                                           남은시간 {minutes_Counter}:
                                           {seconds_Counter}
                                         </span>
-                                        <Button.Ripple
+                                        <Button
+                                          ripple
                                           type='button'
                                           color='secondary'
                                           onClick={handlerSmsSend}
@@ -216,7 +218,7 @@ const AccountMypageForm = ({
                                           <span className='d-sm-inline-block'>
                                             인증번호 발송
                                           </span>
-                                        </Button.Ripple>
+                                        </Button>
                                       </Col>
                                     </Row>
                                   </FormGroup>
@@ -244,7 +246,8 @@ const AccountMypageForm = ({
                                         />
                                       </Col>
                                       <Col md='4' xs='12'>
-                                        <Button.Ripple
+                                        <Button
+                                          ripple
                                           type='button'
                                           color='secondary'
                                           onClick={handlerSmsConfirm}
@@ -255,7 +258,7 @@ const AccountMypageForm = ({
                                           <span className='d-sm-inline-block'>
                                             인증하기
                                           </span>
-                                        </Button.Ripple>
+                                        </Button>
                                       </Col>
                                     </Row>
                                   </FormGroup>
@@ -278,30 +281,33 @@ const AccountMypageForm = ({
               </div>
               <div className='d-flex justify-content-between'>
                 <div>
-                  <Button.Ripple
+                  <Button
+                    ripple
                     className='mr-1'
                     color='primary'
                     size='sm'
                     onClick={handlerUpdate}
                   >
                     저장
-                  </Button.Ripple>
-                  <Button.Ripple
+                  </Button>
+                  <Button
+                    ripple
                     color='danger'
                     size='sm'
                     onClick={handleUseHitory}
                   >
                     취소
-                  </Button.Ripple>
+                  </Button>
                 </div>
                 <div>
-                  <Button.Ripple
+                  <Button
+                    ripple
                     color='danger'
                     size='sm'
                     onClick={() => handlerWidthrow()}
                   >
                     회원탈퇴
-                  </Button.Ripple>
+                  </Button>
                 </div>
               </div>
             </TabPane>
diff --git a/src/components/account/mypage/AccountMypagePwForm.js b/src/components/account/mypage/AccountMypagePwForm.js
index 70407ac6..1fe6e124 100644
--- a/src/components/account/mypage/AccountMypagePwForm.js
+++ b/src/components/account/mypage/AccountMypagePwForm.js
@@ -9,9 +9,9 @@ import {
   TabPane,
   FormGroup,
   Input,
-  Label
-} from '../../ui/index';
-import { Button } from 'reactstrap';
+  Label,
+  Button
+} from '@component/ui';
 // ** Styles
 import '../../../assets/css/custom.css';
 import {
@@ -143,14 +143,15 @@ const AccountMypagePwForm = ({ activeTab }) => {
                 </FormGroup>
               </Col>
               <div className='d-flex align-items-center'>
-                <Button.Ripple
+                <Button
                   className='mr-1'
                   color='primary'
                   onClick={pwok}
                   size='sm'
+                  ripple
                 >
                   확인
-                </Button.Ripple>
+                </Button>
               </div>
 
               <Col
@@ -196,18 +197,19 @@ const AccountMypagePwForm = ({ activeTab }) => {
             </Row>
           </div>
           <div className='d-flex align-items-center'>
-            <Button.Ripple
+            <Button
               className='mr-1'
               color='primary'
               onClick={pwSubmit}
               disabled={resultOk}
               size='sm'
+              ripple
             >
               저장
-            </Button.Ripple>
-            <Button.Ripple color='danger' size='sm' onClick={handleUseHitory}>
+            </Button>
+            <Button color='danger' size='sm' onClick={handleUseHitory} ripple>
               취소
-            </Button.Ripple>
+            </Button>
           </div>
         </TabPane>
       </CardBody>
diff --git a/src/components/account/register/AccountRegister.js b/src/components/account/register/AccountRegister.js
index 96c9c80f..39f89d84 100644
--- a/src/components/account/register/AccountRegister.js
+++ b/src/components/account/register/AccountRegister.js
@@ -1,7 +1,7 @@
 import { AccountRegisterForm } from './AccountRegisterForm';
 import { AccountRegisterTerm } from './AccountRegisterTerm';
 import { useRef, useState } from 'react';
-import Wizard from '@components/wizard';
+import Wizard from '@core@components/wizard';
 import '@styles/base/pages/page-auth.scss';
 import '../../../assets/css/custom.css';
 import { AccountRegisterComplete } from './AccountRegisterComplete';
diff --git a/src/components/account/register/AccountRegisterComplete.js b/src/components/account/register/AccountRegisterComplete.js
index 167b11a6..76b7fef5 100644
--- a/src/components/account/register/AccountRegisterComplete.js
+++ b/src/components/account/register/AccountRegisterComplete.js
@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import completeImg from '../../../assets/images/complete_img.svg';
-import { Button } from '../../ui/index';
+import { Button } from '@component/ui';
 
 export const AccountRegisterComplete = ({
   stepper,
diff --git a/src/components/account/register/AccountRegisterForm.js b/src/components/account/register/AccountRegisterForm.js
index 9fa9b9d9..1e712655 100644
--- a/src/components/account/register/AccountRegisterForm.js
+++ b/src/components/account/register/AccountRegisterForm.js
@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import { isObjEmpty } from '@utils';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Button, FormGroup } from 'reactstrap';
 import {
   Form,
   Label,
@@ -15,8 +14,10 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter,
-  FormFeedback
-} from '../../ui/index';
+  FormFeedback,
+  Button,
+  FormGroup
+} from '@component/ui';
 import { useDispatch, useSelector } from 'react-redux';
 import { accountAPI } from '../../../modules/account/register';
 
@@ -492,13 +493,14 @@ export const AccountRegisterForm = ({
               <span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}>
                 남은시간 {minutes_Counter}:{seconds_Counter}
               </span>
-              <Button.Ripple
+              <Button
+                ripple
                 type='button'
                 color='secondary'
                 onClick={handlerSmsSend}
               >
                 <span className='d-sm-inline-block'>인증번호 발송</span>
-              </Button.Ripple>
+              </Button>
             </div>
           </FormGroup>
           <FormGroup tag={Col} md='6'>
@@ -536,13 +538,14 @@ export const AccountRegisterForm = ({
               />
             )}
             <div className='user-phone-btn'>
-              <Button.Ripple
+              <Button
+                ripple
                 type='button'
                 color='secondary'
                 onClick={handlerSmsConfirm}
               >
                 <span className='d-sm-inline-block'>인증하기</span>
-              </Button.Ripple>
+              </Button>
             </div>
           </FormGroup>
           <FormGroup tag={Col} md='6'>
@@ -683,17 +686,18 @@ export const AccountRegisterForm = ({
           </FormGroup>
         </Row>
         <div className='d-flex justify-content-between'>
-          <Button.Ripple
+          <Button
+            ripple
             color='dark'
             className='btn-prev'
             onClick={handlerCancel}
             outline
           >
             <span className='align-middle d-sm-inline-block'> 취소</span>
-          </Button.Ripple>
-          <Button.Ripple type='submit' color='primary' className='btn-next'>
+          </Button>
+          <Button ripple type='submit' color='primary' className='btn-next'>
             <span className='align-middle d-sm-inline-block'>완료</span>
-          </Button.Ripple>
+          </Button>
         </div>
       </Form>
       <div className='vertically-centered-modal'>
diff --git a/src/components/account/register/AccountRegisterTerm.js b/src/components/account/register/AccountRegisterTerm.js
index 8e06c137..fd9a0b8a 100644
--- a/src/components/account/register/AccountRegisterTerm.js
+++ b/src/components/account/register/AccountRegisterTerm.js
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { Button, FormGroup } from 'reactstrap';
 import {
   Row,
   Col,
@@ -7,8 +6,10 @@ import {
   Modal,
   ModalHeader,
   ModalBody,
-  ModalFooter
-} from '../../ui/index';
+  ModalFooter,
+  Button,
+  FormGroup
+} from '@component/ui';
 import { useDispatch, useSelector } from 'react-redux';
 import * as Actions from '../../../modules/account/register';
 
@@ -216,22 +217,24 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => {
       </Row>
 
       <div className='d-flex justify-content-between'>
-        <Button.Ripple
+        <Button
+          ripple
           color='dark'
           className='btn-prev'
           onClick={handlerCancel}
           outline
         >
           <span className='align-middle d-sm-inline-block'> 취소</span>
-        </Button.Ripple>
-        <Button.Ripple
+        </Button>
+        <Button
+          ripple
           type='submit'
           color='primary'
           className='btn-next'
           onClick={handlerNext}
         >
           <span className='align-middle d-sm-inline-block'>다음</span>
-        </Button.Ripple>
+        </Button>
       </div>
     </>
   );
diff --git a/src/components/analysis/history/AnalysisHistoryDetailGrid.js b/src/components/analysis/history/AnalysisHistoryDetailGrid.js
index 92ec61f9..3b8e34d3 100644
--- a/src/components/analysis/history/AnalysisHistoryDetailGrid.js
+++ b/src/components/analysis/history/AnalysisHistoryDetailGrid.js
@@ -1,4 +1,4 @@
-import { Row, Col, Card } from '../../ui/index';
+import { Row, Col, Card } from '@component/ui';
 import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
 
 import { GridDatabase } from '../../crud/grid/GridDatatable';
diff --git a/src/components/analysis/history/AnalysisHistoryDetailSearch.js b/src/components/analysis/history/AnalysisHistoryDetailSearch.js
index df51cdf5..9f6e1e31 100644
--- a/src/components/analysis/history/AnalysisHistoryDetailSearch.js
+++ b/src/components/analysis/history/AnalysisHistoryDetailSearch.js
@@ -1,11 +1,7 @@
-import { Row, Col, Card, CardBody, CustomInput } from '../../ui/index';
-import { Button } from 'reactstrap';
+import { Row, Card, Col, CardBody, CustomInput, Button } from '@component/ui';
 import { Calendar } from 'react-feather';
-import Flatpickr from 'react-flatpickr';
-import { MoreVertical, Edit, Trash, Search, File } from 'react-feather';
+import { Search } from 'react-feather';
 import '@styles/react/libs/flatpickr/flatpickr.scss';
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 
 export const AnalysisHistoryDetailSearch = props => {
   // const { log } = useSelector(state => state.analysisHistoryState);
@@ -22,10 +18,10 @@ export const AnalysisHistoryDetailSearch = props => {
               <h4>검색조건</h4>
             </div>
             <div className='d-flex align-items-center'>
-              <Button.Ripple color='primary' size='sm'>
+              <Button ripple color='primary' size='sm'>
                 <Search size={16} />
                 검색
-              </Button.Ripple>
+              </Button>
             </div>
           </div>
           <Card>
diff --git a/src/components/analysis/history/AnalysisHistoryDetailStatic.js b/src/components/analysis/history/AnalysisHistoryDetailStatic.js
index d202cb37..7e1f9db9 100644
--- a/src/components/analysis/history/AnalysisHistoryDetailStatic.js
+++ b/src/components/analysis/history/AnalysisHistoryDetailStatic.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Card, CardBody, Row, Col } from '../../ui/index';
+import { Card, CardBody, Row, Col } from '@component/ui';
 import ChartjsLineChart from '../../charts/chart-js/ChartjsLineChart';
 export const AnalysisHistoryDetailStatic = props => {
   const [chartData, setChartData] = useState({});
diff --git a/src/components/analysis/history/AnalysisHistoryGrid.js b/src/components/analysis/history/AnalysisHistoryGrid.js
index f1566567..0002e684 100644
--- a/src/components/analysis/history/AnalysisHistoryGrid.js
+++ b/src/components/analysis/history/AnalysisHistoryGrid.js
@@ -1,5 +1,5 @@
 import { GridDatabase } from '../../../components/crud/grid/GridDatatable';
-import { Card, Spinner } from '../../ui/index';
+import { Card, Spinner } from '@component/ui';
 import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
 import { useSelector } from 'react-redux';
 
diff --git a/src/components/analysis/history/AnalysisHistorySearch.js b/src/components/analysis/history/AnalysisHistorySearch.js
index 0140f41d..ae5625cd 100644
--- a/src/components/analysis/history/AnalysisHistorySearch.js
+++ b/src/components/analysis/history/AnalysisHistorySearch.js
@@ -10,7 +10,7 @@ import {
   Col,
   Input,
   Row
-} from 'reactstrap';
+} from '@component/ui';
 
 export const AnalysisHistorySearch = props => {
   // useEffect(() => {
@@ -36,14 +36,15 @@ export const AnalysisHistorySearch = props => {
               <h4>검색조건</h4>
             </div>
             <div className='d-flex align-items-center'>
-              <Button.Ripple
+              <Button
+                ripple
                 color='primary'
                 size='sm'
                 onClick={e => props.handlerSearch()}
               >
                 <Search size={16} />
                 검색
-              </Button.Ripple>
+              </Button>
             </div>
           </div>
           <Card>
diff --git a/src/components/analysis/simulation/AnalysisSimuationInfo.js b/src/components/analysis/simulation/AnalysisSimuationInfo.js
index 08ced85b..2a5a93bc 100644
--- a/src/components/analysis/simulation/AnalysisSimuationInfo.js
+++ b/src/components/analysis/simulation/AnalysisSimuationInfo.js
@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { Spinner } from '../../ui/index';
+import { Spinner } from '@component/ui';
 
 export const AnalysisSimulationInfo = props => {
   const [target, setTarget] = useState(null);
diff --git a/src/components/analysis/simulation/AnalysisSimulationDetail.js b/src/components/analysis/simulation/AnalysisSimulationDetail.js
index e1a87e2e..56f93e5c 100644
--- a/src/components/analysis/simulation/AnalysisSimulationDetail.js
+++ b/src/components/analysis/simulation/AnalysisSimulationDetail.js
@@ -7,13 +7,13 @@ import { AiFillCaretRight, AiOutlinePause } from 'react-icons/ai';
 import { IoSettings } from 'react-icons/io5';
 import ScrollContainer from 'react-indiana-drag-scroll';
 import {
+  Badge,
   UncontrolledDropdown,
   DropdownToggle,
   DropdownMenu,
   DropdownItem,
   Button
-} from 'reactstrap';
-import { Badge } from '../../ui/index';
+} from '@component/ui';
 import drone_img from '../../../assets/images/drone.jpg';
 import { ReactComponent as Simulation_icon } from '../../../assets/images/simulation_arrow.svg';
 import { IMG_PATH } from '../../../configs/constants';
@@ -177,7 +177,8 @@ export const AnalysisSimulationDetail = props => {
           </ScrollContainer>
         </div>
         <div className='simulation-slider-time'>
-          <Button.Ripple
+          <Button
+            ripple
             className='btn-icon'
             color='primary'
             onClick={() => props.setIsPlay(!props.isPlay)}
@@ -189,7 +190,7 @@ export const AnalysisSimulationDetail = props => {
             ) : (
               <AiOutlinePause size={16} className='' />
             )}
-          </Button.Ripple>
+          </Button>
 
           <UncontrolledDropdown direction='up' className='btn-icon'>
             <DropdownToggle color='primary'>
diff --git a/src/components/analysis/simulation/AnalysisSimulationReport.js b/src/components/analysis/simulation/AnalysisSimulationReport.js
index db0594ef..7ee37532 100644
--- a/src/components/analysis/simulation/AnalysisSimulationReport.js
+++ b/src/components/analysis/simulation/AnalysisSimulationReport.js
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Calendar, X } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
-import { Button, Input, InputGroup } from '../../ui/index';
+import { Button, Input, InputGroup } from '@component/ui';
 
 export const AnalysisSimulationReport = props => {
   // 식별번호
diff --git a/src/components/basis/BasisDataGrid.js b/src/components/basis/BasisDataGrid.js
index cfdc9a06..b3b07e58 100644
--- a/src/components/basis/BasisDataGrid.js
+++ b/src/components/basis/BasisDataGrid.js
@@ -1,4 +1,4 @@
-import { Row, Col, Card } from '../ui/index';
+import { Row, Col, Card } from '@component/ui';
 import { GridDatabase } from '../crud/grid/GridDatatable';
 
 export const BasisDataGrid = props => {
diff --git a/src/components/basis/BasisGroupGrid.js b/src/components/basis/BasisGroupGrid.js
index 209b8383..59bd74fa 100644
--- a/src/components/basis/BasisGroupGrid.js
+++ b/src/components/basis/BasisGroupGrid.js
@@ -1,5 +1,5 @@
 import { GridDatabase } from '../crud/grid/GridDatatable';
-import { Card, Row, Col } from '../ui/index';
+import { Card, Row, Col } from '@component/ui';
 
 export const BasisGroupGrid = props => {
   return (
diff --git a/src/components/basis/BasisSearch.js b/src/components/basis/BasisSearch.js
index 8facea50..669ec5e2 100644
--- a/src/components/basis/BasisSearch.js
+++ b/src/components/basis/BasisSearch.js
@@ -1,5 +1,4 @@
-import { Row, Col, Card, CardBody } from '../ui/index';
-import { Button } from 'reactstrap';
+import { Row, Col, Card, CardBody, Button } from '@component/ui';
 import { Search } from 'react-feather';
 
 export const BasisSearch = ({ children, ...props }) => {
@@ -12,14 +11,15 @@ export const BasisSearch = ({ children, ...props }) => {
               <h4>검색조건</h4>
             </div>
             <div className='d-flex align-items-center'>
-              <Button.Ripple
+              <Button
+                ripple
                 color='primary'
                 size='sm'
                 onClick={e => props.handlerSearch()}
               >
                 <Search size={16} />
                 검색
-              </Button.Ripple>
+              </Button>
             </div>
           </div>
           <Card>
diff --git a/src/components/basis/dron/BasisDronForm.js b/src/components/basis/dron/BasisDronForm.js
index 334d7c16..b9a46f76 100644
--- a/src/components/basis/dron/BasisDronForm.js
+++ b/src/components/basis/dron/BasisDronForm.js
@@ -10,7 +10,7 @@ import {
   Label,
   Row,
   Button
-} from '../../ui/index';
+} from '@component/ui';
 import { ARCTFT_TYPE_CD, WGHT_TYPE_CD } from '../../../configs/constants';
 
 export const BasisDronForm = props => {
diff --git a/src/components/basis/dron/BasisDronImage.js b/src/components/basis/dron/BasisDronImage.js
index 419c9aa4..44d81385 100644
--- a/src/components/basis/dron/BasisDronImage.js
+++ b/src/components/basis/dron/BasisDronImage.js
@@ -6,9 +6,9 @@ import {
   Modal,
   ModalHeader,
   ModalBody,
-  ModalFooter
-} from '../../ui/index';
-import { Button } from 'reactstrap';
+  ModalFooter,
+  Button
+} from '@component/ui';
 export const BasisDronImage = props => {
   return (
     <Media className='pal-media'>
@@ -26,7 +26,8 @@ export const BasisDronImage = props => {
           )}
         </div>
         <div className='d-flex flex-wrap mt-1 px-0 media-btn-2n'>
-          <Button.Ripple
+          <Button
+            ripple
             id='change-img'
             tag={Label}
             className='mr-1'
@@ -45,8 +46,9 @@ export const BasisDronImage = props => {
               onChange={props.handlerImageChange}
               accept='image/*'
             />
-          </Button.Ripple>
-          <Button.Ripple
+          </Button>
+          <Button
+            ripple
             color={!props.img ? 'secondary' : 'danger'}
             onClick={props.handlerImageDelete}
             disabled={!props.img || props.isDisabled}
@@ -56,7 +58,7 @@ export const BasisDronImage = props => {
             <span className='d-block d-sm-none'>
               <Trash2 size={14} />
             </span>
-          </Button.Ripple>
+          </Button>
         </div>
         <div className='vertically-centered-modal'>
           <Modal
diff --git a/src/components/basis/dron/BasisDronTab.js b/src/components/basis/dron/BasisDronTab.js
index 210191dd..be61711a 100644
--- a/src/components/basis/dron/BasisDronTab.js
+++ b/src/components/basis/dron/BasisDronTab.js
@@ -9,7 +9,7 @@ import {
   NavLink,
   TabContent,
   TabPane
-} from '../../ui/index';
+} from '@component/ui';
 import classnames from 'classnames';
 import { Settings, AlertTriangle } from 'react-feather';
 import { BasisDronDetailContainer } from '../../../containers/basis/dron/BasisDronDetailContainer';
diff --git a/src/components/basis/dron/BasisIdntform.js b/src/components/basis/dron/BasisIdntform.js
index 0a249d63..0af18506 100644
--- a/src/components/basis/dron/BasisIdntform.js
+++ b/src/components/basis/dron/BasisIdntform.js
@@ -8,12 +8,12 @@ import {
   Input,
   Form,
   FormGroup,
-  Label
-} from '../../ui/index';
-import { Button } from 'reactstrap';
+  Label,
+  Button
+} from '@component/ui';
 import { X } from 'react-feather';
 
-import Repeater from '@components/repeater';
+import Repeater from '@core@components/repeater';
 
 export const BasisIdntfForm = props => {
   console.log(props.data);
@@ -150,7 +150,8 @@ export const BasisIdntfForm = props => {
                                 </FormGroup>
                               </Col>
                               <Col xs={1} md={1} className='count-del-btn'>
-                                <Button.Ripple
+                                <Button
+                                  ripple
                                   color='danger'
                                   className='text-nowrap px-1'
                                   onClick={() =>
@@ -168,11 +169,12 @@ export const BasisIdntfForm = props => {
                                 >
                                   <X size={14} className='mr-50' />
                                   <span>삭제</span>
-                                </Button.Ripple>
+                                </Button>
                               </Col>
                               <Col xs={1} md={1} className='count-del-btn'>
                                 {props.data[i].isSave && (
-                                  <Button.Ripple
+                                  <Button
+                                    ripple
                                     color='primary'
                                     className='text-nowrap px-1'
                                     onClick={() => {
@@ -186,7 +188,7 @@ export const BasisIdntfForm = props => {
                                       : { disabled: false })}
                                   >
                                     <span>수정</span>
-                                  </Button.Ripple>
+                                  </Button>
                                 )}
                               </Col>
                             </Row>
@@ -198,7 +200,8 @@ export const BasisIdntfForm = props => {
                 </dt>
               </dl>
               <div className='d-flex align-items-center'>
-                <Button.Ripple
+                <Button
+                  ripple
                   className='mr-1'
                   color='primary'
                   size='sm'
@@ -207,8 +210,9 @@ export const BasisIdntfForm = props => {
                   // disabled={props.isDisabled}
                 >
                   + 추가
-                </Button.Ripple>
-                <Button.Ripple
+                </Button>
+                <Button
+                  ripple
                   className='mr-1'
                   color='primary'
                   size='sm'
@@ -217,7 +221,7 @@ export const BasisIdntfForm = props => {
                   // disabled={props.isDisabled}
                 >
                   저장
-                </Button.Ripple>
+                </Button>
               </div>
             </div>
           </CardBody>
diff --git a/src/components/basis/flight/plan/FlightPlanGroupGrid.js b/src/components/basis/flight/plan/FlightPlanGroupGrid.js
index 1a52ceff..c400beaf 100644
--- a/src/components/basis/flight/plan/FlightPlanGroupGrid.js
+++ b/src/components/basis/flight/plan/FlightPlanGroupGrid.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { GridDatabase } from '../../../crud/grid/GridDatatable';
-import { Button } from 'reactstrap';
-import { Card } from '../../../ui/index';
+import { Card, Button } from '@component/ui';
 const FlightPlanGroupGrid = ({
   data,
   count,
@@ -48,15 +47,17 @@ const FlightPlanGroupGrid = ({
       sortable: true,
       cell: row => {
         return selectGroup?.groupId === row?.groupId ? (
-          <Button.Ripple
+          <Button
+            ripple
             color='danger'
             className='badge badge-danger'
             onClick={() => handlerGroupCancel()}
           >
             선택취소
-          </Button.Ripple>
+          </Button>
         ) : (
-          <Button.Ripple
+          <Button
+            ripple
             color='primary'
             className='badge badge-primary'
             onClick={() => {
@@ -69,7 +70,7 @@ const FlightPlanGroupGrid = ({
             }}
           >
             상세보기
-          </Button.Ripple>
+          </Button>
         );
       }
     }
diff --git a/src/components/basis/flight/schedule/FlightScheduleGrid.js b/src/components/basis/flight/schedule/FlightScheduleGrid.js
index 59007bcd..afabafe5 100644
--- a/src/components/basis/flight/schedule/FlightScheduleGrid.js
+++ b/src/components/basis/flight/schedule/FlightScheduleGrid.js
@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { GridDatabase } from '@src/components/crud/grid/GridDatatable';
-import { Row, Col, Card, Spinner } from '../../../ui/index';
+import { Row, Col, Card, Spinner } from '@component/ui';
 import FlightScheduleRealTime from './FlightScheduleRealTime';
 import { useSelector } from 'react-redux';
 import dayjs from 'dayjs';
diff --git a/src/components/basis/flight/schedule/FlightScheduleSearch.js b/src/components/basis/flight/schedule/FlightScheduleSearch.js
index 9695d3dd..f1dce5f2 100644
--- a/src/components/basis/flight/schedule/FlightScheduleSearch.js
+++ b/src/components/basis/flight/schedule/FlightScheduleSearch.js
@@ -1,7 +1,6 @@
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
-import { Row, Col, Card, CardBody } from '../../../ui/index';
-import { Button } from 'reactstrap';
+import { Row, Col, Card, CardBody, Button } from '@component/ui';
 import { Search, Calendar } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
 import { FLIGHT_SCHEDULE_LIST } from '@src/modules/laanc/actions/laancActions';
@@ -44,10 +43,10 @@ function FlightScheduleSearch() {
               <h4>검색조건</h4>
             </div>
             <div className='d-flex align-items-center'>
-              <Button.Ripple color='primary' size='sm' onClick={handlerSearch}>
+              <Button ripple color='primary' size='sm' onClick={handlerSearch}>
                 <Search size={16} />
                 검색
-              </Button.Ripple>
+              </Button>
             </div>
           </div>
           <Card>
diff --git a/src/components/basis/group/BaisGroupForm.js b/src/components/basis/group/BaisGroupForm.js
index 95b5ac65..2fbba786 100644
--- a/src/components/basis/group/BaisGroupForm.js
+++ b/src/components/basis/group/BaisGroupForm.js
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import * as yup from 'yup';
 import { useForm } from 'react-hook-form';
 import classnames from 'classnames';
-import { Button } from 'reactstrap';
 import {
   Row,
   Col,
@@ -12,8 +11,9 @@ import {
   FormGroup,
   Label,
   FormFeedback,
-  Form
-} from '../../ui/index';
+  Form,
+  Button
+} from '@component/ui';
 import { yupResolver } from '@hookform/resolvers/yup';
 
 export const BasisGroupForm = props => {
@@ -142,7 +142,8 @@ export const BasisGroupForm = props => {
                 </dl>
 
                 <div className='d-flex align-items-center'>
-                  <Button.Ripple
+                  <Button
+                    ripple
                     className='mr-1'
                     color='primary'
                     size='sm'
@@ -150,15 +151,16 @@ export const BasisGroupForm = props => {
                     type='submit'
                   >
                     저장
-                  </Button.Ripple>
+                  </Button>
                   {props.groupData.type != 'create' ? (
-                    <Button.Ripple
+                    <Button
+                      ripple
                       color='danger'
                       size='sm'
                       onClick={() => props.handlerWithDrawal()}
                     >
                       삭제
-                    </Button.Ripple>
+                    </Button>
                   ) : (
                     <></>
                   )}
diff --git a/src/components/basis/group/BasisGroupApprovalSearch.js b/src/components/basis/group/BasisGroupApprovalSearch.js
index 1abd6d0b..69bd67cd 100644
--- a/src/components/basis/group/BasisGroupApprovalSearch.js
+++ b/src/components/basis/group/BasisGroupApprovalSearch.js
@@ -1,4 +1,4 @@
-import { Row, Col, Input, CustomInput, Label, FormGroup } from '../../ui/index';
+import { Row, Col, Input, CustomInput, Label, FormGroup } from '@component/ui';
 import { useEffect, useState } from 'react';
 import { BasisSearch } from '../BasisSearch';
 
diff --git a/src/components/basis/group/BasisGroupDetailJoinSearch.js b/src/components/basis/group/BasisGroupDetailJoinSearch.js
index 766916a9..5316c852 100644
--- a/src/components/basis/group/BasisGroupDetailJoinSearch.js
+++ b/src/components/basis/group/BasisGroupDetailJoinSearch.js
@@ -1,4 +1,4 @@
-import { Row, Col, Input, Label, FormGroup } from '../../ui/index';
+import { Row, Col, Input, Label, FormGroup } from '@component/ui';
 import { BasisSearch } from '../BasisSearch';
 
 export const BasisGroupDetailJoinSearch = props => {
diff --git a/src/components/basis/group/BasisGroupUsersSearch.js b/src/components/basis/group/BasisGroupUsersSearch.js
index db424085..c1e3f21d 100644
--- a/src/components/basis/group/BasisGroupUsersSearch.js
+++ b/src/components/basis/group/BasisGroupUsersSearch.js
@@ -1,4 +1,4 @@
-import { Row, Col, Input, Label, FormGroup } from '../../ui/index';
+import { Row, Col, Input, Label, FormGroup } from '@component/ui';
 import { BasisSearch } from '../BasisSearch';
 
 export const BasisGroupUsersSearch = props => {
diff --git a/src/components/charts/apex/ApexAreaCharts.js b/src/components/charts/apex/ApexAreaCharts.js
index d9fff2fa..d83782ff 100644
--- a/src/components/charts/apex/ApexAreaCharts.js
+++ b/src/components/charts/apex/ApexAreaCharts.js
@@ -7,7 +7,7 @@ import {
   CardTitle,
   CardBody,
   CardSubtitle
-} from '../../ui/index';
+} from '@component/ui';
 
 const areaColors = {
   series3: '#a4f8cd',
diff --git a/src/components/charts/apex/index.js b/src/components/charts/apex/index.js
index 3e461d81..cb3fcc6b 100644
--- a/src/components/charts/apex/index.js
+++ b/src/components/charts/apex/index.js
@@ -2,13 +2,13 @@
 import { Fragment, useContext } from 'react';
 
 // ** Third Party Components
-import { Row, Col } from '../../ui/index';
+import { Row, Col } from '@component/ui';
 
 // ** Custom Hooks
 import { useRTL } from '@hooks/useRTL';
 
 // ** Custom Components
-import Breadcrumbs from '@components/breadcrumbs';
+import Breadcrumbs from '@core@components/breadcrumbs';
 
 // ** Context
 import { ThemeColors } from '@src/utility/context/ThemeColors';
diff --git a/src/components/charts/chart-js/index.js b/src/components/charts/chart-js/index.js
index b500e353..e2401d40 100644
--- a/src/components/charts/chart-js/index.js
+++ b/src/components/charts/chart-js/index.js
@@ -1,32 +1,32 @@
 // ** React Imports
-import { Fragment, useContext, useEffect } from 'react'
+import { Fragment, useContext, useEffect } from 'react';
 
 // ** Custom Components
-import Breadcrumbs from '@components/breadcrumbs'
+import Breadcrumbs from '@core@components/breadcrumbs';
 
 // ** Third Party Components
-import { Row, Col } from 'reactstrap'
-import { Chart } from 'react-chartjs-2'
+import { Row, Col } from 'reactstrap';
+import { Chart } from 'react-chartjs-2';
 
 // ** Charts
-import BarChart from './ChartjsBarChart'
-import LineChart from './ChartjsLineChart'
-import AreaChart from './ChartjsAreaChart'
-import RadarChart from './ChartjsRadarChart'
-import BubbleChart from './ChartjsBubbleChart'
-import ScatterChart from './ChartjsScatterChart'
-import DoughnutChart from './ChartjsDoughnutChart'
-import PolarAreaChart from './ChartjsPolarAreaChart'
-import HorizontalBarChart from './ChartjsHorizontalBar'
+import BarChart from './ChartjsBarChart';
+import LineChart from './ChartjsLineChart';
+import AreaChart from './ChartjsAreaChart';
+import RadarChart from './ChartjsRadarChart';
+import BubbleChart from './ChartjsBubbleChart';
+import ScatterChart from './ChartjsScatterChart';
+import DoughnutChart from './ChartjsDoughnutChart';
+import PolarAreaChart from './ChartjsPolarAreaChart';
+import HorizontalBarChart from './ChartjsHorizontalBar';
 
 // ** Custom Hooks
-import { useSkin } from '@hooks/useSkin'
+import { useSkin } from '@hooks/useSkin';
 
 // ** Context
-import { ThemeColors } from '@src/utility/context/ThemeColors'
+import { ThemeColors } from '@src/utility/context/ThemeColors';
 
 // ** Styles
-import '@styles/react/libs/flatpickr/flatpickr.scss'
+import '@styles/react/libs/flatpickr/flatpickr.scss';
 
 const ChartJS = () => {
   // ** Context, Hooks & Vars
@@ -46,138 +46,155 @@ const ChartJS = () => {
     greyColor = '#4F5D70',
     blueColor = '#2c9aff',
     blueLightColor = '#84D0FF',
-    greyLightColor = '#EDF1F4'
+    greyLightColor = '#EDF1F4';
 
   // ** To Set Border Radius On Mount
   useEffect(() => {
     /*eslint-disable */
     Chart.elements.Rectangle.prototype.draw = function () {
-      let ctx = this._chart.ctx
-      let viewVar = this._view
-      let left, right, top, bottom, signX, signY, borderSkipped, radius
-      let borderWidth = viewVar.borderWidth
-      let cornerRadius = 20
+      let ctx = this._chart.ctx;
+      let viewVar = this._view;
+      let left, right, top, bottom, signX, signY, borderSkipped, radius;
+      let borderWidth = viewVar.borderWidth;
+      let cornerRadius = 20;
       if (!viewVar.horizontal) {
-        left = viewVar.x - viewVar.width / 2
-        right = viewVar.x + viewVar.width / 2
-        top = viewVar.y
-        bottom = viewVar.base
-        signX = 1
-        signY = top > bottom ? 1 : -1
-        borderSkipped = viewVar.borderSkipped || 'bottom'
+        left = viewVar.x - viewVar.width / 2;
+        right = viewVar.x + viewVar.width / 2;
+        top = viewVar.y;
+        bottom = viewVar.base;
+        signX = 1;
+        signY = top > bottom ? 1 : -1;
+        borderSkipped = viewVar.borderSkipped || 'bottom';
       } else {
-        left = viewVar.base
-        right = viewVar.x
-        top = viewVar.y - viewVar.height / 2
-        bottom = viewVar.y + viewVar.height / 2
-        signX = right > left ? 1 : -1
-        signY = 1
-        borderSkipped = viewVar.borderSkipped || 'left'
+        left = viewVar.base;
+        right = viewVar.x;
+        top = viewVar.y - viewVar.height / 2;
+        bottom = viewVar.y + viewVar.height / 2;
+        signX = right > left ? 1 : -1;
+        signY = 1;
+        borderSkipped = viewVar.borderSkipped || 'left';
       }
 
       if (borderWidth) {
-        let barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom))
-        borderWidth = borderWidth > barSize ? barSize : borderWidth
-        let halfStroke = borderWidth / 2
-        let borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0)
-        let borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0)
-        let borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0)
-        let borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0)
+        let barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
+        borderWidth = borderWidth > barSize ? barSize : borderWidth;
+        let halfStroke = borderWidth / 2;
+        let borderLeft =
+          left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
+        let borderRight =
+          right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
+        let borderTop =
+          top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
+        let borderBottom =
+          bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
         if (borderLeft !== borderRight) {
-          top = borderTop
-          bottom = borderBottom
+          top = borderTop;
+          bottom = borderBottom;
         }
         if (borderTop !== borderBottom) {
-          left = borderLeft
-          right = borderRight
+          left = borderLeft;
+          right = borderRight;
         }
       }
 
-      ctx.beginPath()
-      ctx.fillStyle = viewVar.backgroundColor
-      ctx.strokeStyle = viewVar.borderColor
-      ctx.lineWidth = borderWidth
+      ctx.beginPath();
+      ctx.fillStyle = viewVar.backgroundColor;
+      ctx.strokeStyle = viewVar.borderColor;
+      ctx.lineWidth = borderWidth;
       let corners = [
         [left, bottom],
         [left, top],
         [right, top],
         [right, bottom]
-      ]
+      ];
 
-      let borders = ['bottom', 'left', 'top', 'right']
-      let startCorner = borders.indexOf(borderSkipped, 0)
+      let borders = ['bottom', 'left', 'top', 'right'];
+      let startCorner = borders.indexOf(borderSkipped, 0);
       if (startCorner === -1) {
-        startCorner = 0
+        startCorner = 0;
       }
 
       function cornerAt(index) {
-        return corners[(startCorner + index) % 4]
+        return corners[(startCorner + index) % 4];
       }
 
-      let corner = cornerAt(0)
-      ctx.moveTo(corner[0], corner[1])
+      let corner = cornerAt(0);
+      ctx.moveTo(corner[0], corner[1]);
 
       for (let i = 1; i < 4; i++) {
-        corner = cornerAt(i)
-        let nextCornerId = i + 1
+        corner = cornerAt(i);
+        let nextCornerId = i + 1;
         if (nextCornerId == 4) {
-          nextCornerId = 0
+          nextCornerId = 0;
         }
 
-        let nextCorner = cornerAt(nextCornerId)
+        let nextCorner = cornerAt(nextCornerId);
 
         let width = corners[2][0] - corners[1][0],
           height = corners[0][1] - corners[1][1],
           x = corners[1][0],
-          y = corners[1][1]
+          y = corners[1][1];
 
-        let radius = cornerRadius
+        let radius = cornerRadius;
 
         if (radius > height / 2) {
-          radius = height / 2
+          radius = height / 2;
         }
         if (radius > width / 2) {
-          radius = width / 2
+          radius = width / 2;
         }
 
         if (!viewVar.horizontal) {
-          ctx.moveTo(x + radius, y)
-          ctx.lineTo(x + width - radius, y)
-          ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
-          ctx.lineTo(x + width, y + height - radius)
-          ctx.quadraticCurveTo(x + width, y + height, x + width, y + height)
-          ctx.lineTo(x + radius, y + height)
-          ctx.quadraticCurveTo(x, y + height, x, y + height)
-          ctx.lineTo(x, y + radius)
-          ctx.quadraticCurveTo(x, y, x + radius, y)
+          ctx.moveTo(x + radius, y);
+          ctx.lineTo(x + width - radius, y);
+          ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+          ctx.lineTo(x + width, y + height - radius);
+          ctx.quadraticCurveTo(x + width, y + height, x + width, y + height);
+          ctx.lineTo(x + radius, y + height);
+          ctx.quadraticCurveTo(x, y + height, x, y + height);
+          ctx.lineTo(x, y + radius);
+          ctx.quadraticCurveTo(x, y, x + radius, y);
         } else {
-          ctx.moveTo(x + radius, y)
-          ctx.lineTo(x + width - radius, y)
-          ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
-          ctx.lineTo(x + width, y + height - radius)
-          ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
-          ctx.lineTo(x + radius, y + height)
-          ctx.quadraticCurveTo(x, y + height, x, y + height)
-          ctx.lineTo(x, y + radius)
-          ctx.quadraticCurveTo(x, y, x, y)
+          ctx.moveTo(x + radius, y);
+          ctx.lineTo(x + width - radius, y);
+          ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+          ctx.lineTo(x + width, y + height - radius);
+          ctx.quadraticCurveTo(
+            x + width,
+            y + height,
+            x + width - radius,
+            y + height
+          );
+          ctx.lineTo(x + radius, y + height);
+          ctx.quadraticCurveTo(x, y + height, x, y + height);
+          ctx.lineTo(x, y + radius);
+          ctx.quadraticCurveTo(x, y, x, y);
         }
       }
 
-      ctx.fill()
+      ctx.fill();
       if (borderWidth) {
-        ctx.stroke()
+        ctx.stroke();
       }
-    }
-  }, [])
+    };
+  }, []);
 
   return (
     <Fragment>
-      <Breadcrumbs breadCrumbTitle='React ChartJS 2' breadCrumbParent='Charts' breadCrumbActive='ChartJS' />
+      <Breadcrumbs
+        breadCrumbTitle='React ChartJS 2'
+        breadCrumbParent='Charts'
+        breadCrumbActive='ChartJS'
+      />
       <Row className='match-height'>
         <Col sm='12'>
           <p>
             React wrapper for Chart.js. Click{' '}
-            <a href='https://github.com/jerairrest/react-chartjs-2' target='_blank' rel='noopener noreferrer'>
+            <a
+              href='https://github.com/jerairrest/react-chartjs-2'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
               here
             </a>{' '}
             for github repo.
@@ -210,7 +227,11 @@ const ChartJS = () => {
           />
         </Col>
         <Col lg='6' sm='12'>
-          <RadarChart labelColor={labelColor} tooltipShadow={tooltipShadow} gridLineColor={gridLineColor} />
+          <RadarChart
+            labelColor={labelColor}
+            tooltipShadow={tooltipShadow}
+            gridLineColor={gridLineColor}
+          />
         </Col>
         <Col lg='6' sm='12'>
           <PolarAreaChart
@@ -263,7 +284,7 @@ const ChartJS = () => {
         </Col>
       </Row>
     </Fragment>
-  )
-}
+  );
+};
 
-export default ChartJS
+export default ChartJS;
diff --git a/src/components/charts/recharts/index.js b/src/components/charts/recharts/index.js
index 9201f1bd..ac6d3cd8 100644
--- a/src/components/charts/recharts/index.js
+++ b/src/components/charts/recharts/index.js
@@ -1,30 +1,30 @@
 // ** React Imports
-import { Fragment, useContext } from 'react'
+import { Fragment, useContext } from 'react';
 
 // ** Third Party Components
-import { Row, Col } from 'reactstrap'
+import { Row, Col } from 'reactstrap';
 
 // ** Custom Components
-import Breadcrumbs from '@components/breadcrumbs'
+import Breadcrumbs from '@core@components/breadcrumbs';
 
 // ** Charts
-import PieChart from './PieChart'
-import BarChart from './BarChart'
-import LineChart from './LineChart'
-import AreaChart from './AreaChart'
-import RadarChart from './RadarChart'
-import ScatterChart from './ScatterChart'
+import PieChart from './PieChart';
+import BarChart from './BarChart';
+import LineChart from './LineChart';
+import AreaChart from './AreaChart';
+import RadarChart from './RadarChart';
+import ScatterChart from './ScatterChart';
 
 // ** Context
-import { ThemeColors } from '@src/utility/context/ThemeColors'
+import { ThemeColors } from '@src/utility/context/ThemeColors';
 
 // ** Styles
-import '@styles/react/libs/flatpickr/flatpickr.scss'
-import '@styles/react/libs/charts/recharts.scss'
+import '@styles/react/libs/flatpickr/flatpickr.scss';
+import '@styles/react/libs/charts/recharts.scss';
 
 const Recharts = () => {
   // ** Context
-  const { colors } = useContext(ThemeColors)
+  const { colors } = useContext(ThemeColors);
 
   // ** Vars
   const donut = {
@@ -33,16 +33,24 @@ const Recharts = () => {
     series3: '#826bf8',
     series4: '#2b9bf4',
     series5: '#FFA1A1'
-  }
+  };
 
   return (
     <Fragment>
-      <Breadcrumbs breadCrumbTitle='Recharts' breadCrumbParent='Charts' breadCrumbActive='Recharts' />
+      <Breadcrumbs
+        breadCrumbTitle='Recharts'
+        breadCrumbParent='Charts'
+        breadCrumbActive='Recharts'
+      />
       <Row className='match-height'>
         <Col sm='12'>
           <p>
             React Chart component with bootstrap and material ui. Click{' '}
-            <a href='https://github.com/recharts/recharts' target='_blank' rel='noopener noreferrer'>
+            <a
+              href='https://github.com/recharts/recharts'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
               here
             </a>{' '}
             for github repo.
@@ -55,7 +63,11 @@ const Recharts = () => {
           <AreaChart primary={colors.primary.main} />
         </Col>
         <Col sm='12'>
-          <ScatterChart primary={colors.primary.main} danger={colors.danger.main} success={colors.success.main} />
+          <ScatterChart
+            primary={colors.primary.main}
+            danger={colors.danger.main}
+            success={colors.success.main}
+          />
         </Col>
         <Col sm='12'>
           <BarChart primary={colors.primary.main} />
@@ -64,11 +76,16 @@ const Recharts = () => {
           <RadarChart series1={donut.series1} series3={donut.series3} />
         </Col>
         <Col xl='6' lg='12'>
-          <PieChart series1={donut.series1} series2={donut.series2} series3={donut.series3} series5={donut.series5} />
+          <PieChart
+            series1={donut.series1}
+            series2={donut.series2}
+            series3={donut.series3}
+            series5={donut.series5}
+          />
         </Col>
       </Row>
     </Fragment>
-  )
-}
+  );
+};
 
-export default Recharts
+export default Recharts;
diff --git a/src/components/crud/excel/ExcelExportButton.js b/src/components/crud/excel/ExcelExportButton.js
index f5f99ace..fdbe393f 100644
--- a/src/components/crud/excel/ExcelExportButton.js
+++ b/src/components/crud/excel/ExcelExportButton.js
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { CSVLink, CSVDownload } from 'react-csv';
-import { Button } from 'reactstrap';
+import { Button } from '@component/ui';
 import { File } from 'react-feather';
 export const ExcelExportButton = props => {
   return (
@@ -10,10 +10,10 @@ export const ExcelExportButton = props => {
       filename={props.filename}
       target='_blank'
     >
-      <Button.Ripple color='primary' size='sm'>
+      <Button ripple color='primary' size='sm'>
         <File size={16} />
         엑셀다운로드
-      </Button.Ripple>
+      </Button>
     </CSVLink>
   );
 };
diff --git a/src/components/cstmrService/faq/FaqForm.js b/src/components/cstmrService/faq/FaqForm.js
index f5a007bb..91f6d0cb 100644
--- a/src/components/cstmrService/faq/FaqForm.js
+++ b/src/components/cstmrService/faq/FaqForm.js
@@ -10,7 +10,7 @@ import {
   FormGroup,
   Label,
   CustomInput
-} from '../../ui/index';
+} from '@component/ui';
 
 export default function FaqForm({
   isOpenFormModal,
diff --git a/src/components/cstmrService/faq/FaqSearchBox.js b/src/components/cstmrService/faq/FaqSearchBox.js
index e0c20e87..74aa5844 100644
--- a/src/components/cstmrService/faq/FaqSearchBox.js
+++ b/src/components/cstmrService/faq/FaqSearchBox.js
@@ -3,7 +3,7 @@ import {
   InputGroup,
   InputGroupAddon,
   InputGroupText
-} from '../../ui/index';
+} from '@component/ui';
 import { Search } from 'react-feather';
 
 export default function FaqSearchBox({
diff --git a/src/components/cstmrService/faq/FaqTab.js b/src/components/cstmrService/faq/FaqTab.js
index 7ead4708..e6ae45b6 100644
--- a/src/components/cstmrService/faq/FaqTab.js
+++ b/src/components/cstmrService/faq/FaqTab.js
@@ -1,4 +1,4 @@
-import { Nav, NavItem, NavLink } from '../../ui/index';
+import { Nav, NavItem, NavLink } from '@component/ui';
 
 export default function FaqTab({ activeTab, handlerChangeTab, tabList }) {
   return (
diff --git a/src/components/cstmrService/inquiry/InquiryWrite.js b/src/components/cstmrService/inquiry/InquiryWrite.js
index 682f4a48..da52305e 100644
--- a/src/components/cstmrService/inquiry/InquiryWrite.js
+++ b/src/components/cstmrService/inquiry/InquiryWrite.js
@@ -14,7 +14,7 @@ import {
   Col,
   FormGroup,
   Label
-} from '../../ui/index';
+} from '@component/ui';
 import classnames from 'classnames';
 import { X } from 'react-feather';
 
diff --git a/src/components/cstmrService/inquiry/QnaDetail.js b/src/components/cstmrService/inquiry/QnaDetail.js
index 0c8977c9..f82cf802 100644
--- a/src/components/cstmrService/inquiry/QnaDetail.js
+++ b/src/components/cstmrService/inquiry/QnaDetail.js
@@ -10,7 +10,7 @@ import {
   FormGroup,
   Label,
   CustomInput
-} from '../../ui/index';
+} from '@component/ui';
 
 export default function QnaDetatil({
   isDetailModal,
diff --git a/src/components/cstmrService/inquiry/QnaGrid.js b/src/components/cstmrService/inquiry/QnaGrid.js
index 21fd6daa..d2638f11 100644
--- a/src/components/cstmrService/inquiry/QnaGrid.js
+++ b/src/components/cstmrService/inquiry/QnaGrid.js
@@ -1,6 +1,5 @@
 import { GridDatabase } from '../../crud/grid/GridDatatable';
-import { Button } from 'reactstrap';
-import { Card } from '../../ui/index';
+import { Card, Button } from '@component/ui';
 export default function QnaGrid({ lists, handlerDetailModal }) {
   const columns = [
     {
@@ -55,14 +54,15 @@ export default function QnaGrid({ lists, handlerDetailModal }) {
       name: '',
       minWidth: '150px',
       cell: row => (
-        <Button.Ripple
+        <Button
+          ripple
           color='flat-primary'
           onClick={() => {
             handlerDetailModal(row.qnaSno);
           }}
         >
           상세보기
-        </Button.Ripple>
+        </Button>
       )
     }
   ];
diff --git a/src/components/cstmrService/inquiry/QnaSearchBox.js b/src/components/cstmrService/inquiry/QnaSearchBox.js
index e09b1cd8..1263a65f 100644
--- a/src/components/cstmrService/inquiry/QnaSearchBox.js
+++ b/src/components/cstmrService/inquiry/QnaSearchBox.js
@@ -1,5 +1,4 @@
-import { Button } from 'reactstrap';
-import { Card, CardBody, Col, Row, Input } from '../../ui/index';
+import { Card, CardBody, Col, Row, Input, Button } from '@component/ui';
 import { Search } from 'react-feather';
 
 const categoryList = [
@@ -58,14 +57,15 @@ export default function QnaSearchBox({
               <h4>검색조건</h4>
             </div>
             <div className='d-flex align-items-center'>
-              <Button.Ripple
+              <Button
+                ripple
                 color='primary'
                 size='sm'
                 onClick={handlerSubmitSearch}
               >
                 <Search size={16} />
                 검색
-              </Button.Ripple>
+              </Button>
             </div>
           </div>
           <Card>
diff --git a/src/components/dashboard/DashboardDronList.js b/src/components/dashboard/DashboardDronList.js
index c2a55ed0..e22b4a04 100644
--- a/src/components/dashboard/DashboardDronList.js
+++ b/src/components/dashboard/DashboardDronList.js
@@ -1,5 +1,5 @@
 import { Plus } from 'react-feather';
-import { Card, CardBody, CardHeader, CardTitle, Table } from '../ui/index';
+import { Card, CardBody, CardHeader, CardTitle, Table } from '@component/ui';
 
 export const DashboardDronList = props => {
   return (
diff --git a/src/components/dashboard/DashboardGroupList.js b/src/components/dashboard/DashboardGroupList.js
index 87ef9d28..62227759 100644
--- a/src/components/dashboard/DashboardGroupList.js
+++ b/src/components/dashboard/DashboardGroupList.js
@@ -1,5 +1,5 @@
 import { Plus } from 'react-feather';
-import { Card, CardBody, CardHeader, CardTitle } from '../ui/index';
+import { Card, CardBody, CardHeader, CardTitle } from '@component/ui';
 import { GridDatabase } from '../../components/crud/grid/GridDatatable';
 import { EDateType } from '../../modules/main/dash/models/mainDashModel.ts';
 import { IoIosArrowRoundDown, IoIosArrowRoundUp } from 'react-icons/io';
diff --git a/src/components/dashboard/DashboardMenu.js b/src/components/dashboard/DashboardMenu.js
index 3580940c..838ace25 100644
--- a/src/components/dashboard/DashboardMenu.js
+++ b/src/components/dashboard/DashboardMenu.js
@@ -1,4 +1,4 @@
-import { Card, Col, Row } from '../../components/ui/index';
+import { Card, Col, Row } from '@component/ui';
 
 export const DashboardMenu = props => {
   return (
diff --git a/src/components/dashboard/DashboardStcsArea.js b/src/components/dashboard/DashboardStcsArea.js
index bd453ab9..bd510801 100644
--- a/src/components/dashboard/DashboardStcsArea.js
+++ b/src/components/dashboard/DashboardStcsArea.js
@@ -5,7 +5,7 @@ import { Plus } from 'react-feather';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { Calendar } from 'react-feather';
-import { Card, CardBody, CardHeader, CardTitle } from '../ui/index';
+import { Card, CardBody, CardHeader, CardTitle } from '@component/ui';
 import ChartjsDoughnutChart from '../charts/chart-js/ChartjsDoughnutChart';
 const tooltipShadow = 'rgba(0, 0, 0, 0.25)';
 const warningLightColor = '#FDAC34';
diff --git a/src/components/dashboard/DashboardStcsDay.js b/src/components/dashboard/DashboardStcsDay.js
index b598966a..5389ef3c 100644
--- a/src/components/dashboard/DashboardStcsDay.js
+++ b/src/components/dashboard/DashboardStcsDay.js
@@ -5,7 +5,7 @@ import { useEffect, useState, useRef } from 'react';
 import ChartjsBarChart from '../charts/chart-js/ChartjsBarChart';
 import DatePicker from 'react-datepicker';
 import { Calendar } from 'react-feather';
-import { Card, CardBody, CardHeader, CardTitle } from '../ui/index';
+import { Card, CardBody, CardHeader, CardTitle } from '@component/ui';
 
 const tooltipShadow = 'rgba(0, 0, 0, 0.25)';
 const gridLineColor = 'rgba(200, 200, 200, 0.2)';
diff --git a/src/components/dashboard/DroneFlightSchedule.js b/src/components/dashboard/DroneFlightSchedule.js
index 42323df0..2bac2f37 100644
--- a/src/components/dashboard/DroneFlightSchedule.js
+++ b/src/components/dashboard/DroneFlightSchedule.js
@@ -7,7 +7,7 @@ import {
   CardTitle,
   Input,
   Label
-} from '../ui/index';
+} from '@component/ui';
 import { GridDatabase } from '../../components/crud/grid/GridDatatable';
 
 const columns = [
diff --git a/src/components/laanc/LaancModal.js b/src/components/laanc/LaancModal.js
index c4a5b1a7..2fc7484d 100644
--- a/src/components/laanc/LaancModal.js
+++ b/src/components/laanc/LaancModal.js
@@ -4,7 +4,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../ui/index';
+} from '@component/ui';
 
 export default function LaancModal(props) {
   const handleButtonClick = () => {
diff --git a/src/components/laanc/LaancQr.js b/src/components/laanc/LaancQr.js
index 16ddc214..5528ff20 100644
--- a/src/components/laanc/LaancQr.js
+++ b/src/components/laanc/LaancQr.js
@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
-import { ModalHeader, ModalBody, ModalFooter, Button } from '../ui/index';
+import { ModalHeader, ModalBody, ModalFooter, Button } from '@component/ui';
 import ErrorModal from '../../components/modal/ErrorModal';
 import axios from '../../modules/utils/customAxiosUtil';
 
diff --git a/src/components/laanc/list/LaancDetail.js b/src/components/laanc/list/LaancDetail.js
index 05293730..186336a5 100644
--- a/src/components/laanc/list/LaancDetail.js
+++ b/src/components/laanc/list/LaancDetail.js
@@ -10,7 +10,7 @@ import {
   FormGroup,
   Label,
   Input
-} from '../../ui/index';
+} from '@component/ui';
 import FlightArea from '../map/FlightArea';
 import * as TermsActions from '../../../modules/account/register';
 
diff --git a/src/components/laanc/list/LaancGrid.js b/src/components/laanc/list/LaancGrid.js
index 145372fe..1de00fd0 100644
--- a/src/components/laanc/list/LaancGrid.js
+++ b/src/components/laanc/list/LaancGrid.js
@@ -2,8 +2,7 @@ import { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { pdfjs } from 'react-pdf';
 import { GridDatabase } from '@src/components/crud/grid/GridDatatable';
-import { Row, Col, Card, Spinner, Modal } from '../../ui/index';
-import { Button } from 'reactstrap';
+import { Row, Col, Card, Spinner, Modal, Button } from '@component/ui';
 import * as LaancAction from '../../../modules/laanc/actions/laancActions';
 import dayjs from 'dayjs';
 
@@ -137,7 +136,8 @@ export default function LaancGrid({ isSearch }) {
       sortable: true,
       cell: row => {
         return (
-          <Button.Ripple
+          <Button
+            ripple
             color='primary'
             size='sm'
             onClick={() => {
@@ -145,7 +145,7 @@ export default function LaancGrid({ isSearch }) {
             }}
           >
             상세보기
-          </Button.Ripple>
+          </Button>
         );
       }
     },
@@ -155,7 +155,8 @@ export default function LaancGrid({ isSearch }) {
       sortable: true,
       cell: row => {
         return (
-          <Button.Ripple
+          <Button
+            ripple
             color='primary'
             size='sm'
             onClick={() => {
@@ -163,7 +164,7 @@ export default function LaancGrid({ isSearch }) {
             }}
           >
             공문 다운로드
-          </Button.Ripple>
+          </Button>
         );
       }
     }
diff --git a/src/components/laanc/list/LaancSearch.js b/src/components/laanc/list/LaancSearch.js
index b3b23738..9f2e6b41 100644
--- a/src/components/laanc/list/LaancSearch.js
+++ b/src/components/laanc/list/LaancSearch.js
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { Row, Col, Card, CardBody } from '../../ui/index';
-import { Button } from 'reactstrap';
+import { Row, Col, Card, CardBody, Button } from '@component/ui';
 import { Search, Calendar } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
 import dayjs from 'dayjs';
@@ -50,7 +49,8 @@ function LaancSearch({ isSearch }) {
               <h4>검색조건</h4>
             </div>
             <div className='d-flex align-items-center'>
-              <Button.Ripple
+              <Button
+                ripple
                 color='primary'
                 size='sm'
                 onClick={() => {
@@ -59,7 +59,7 @@ function LaancSearch({ isSearch }) {
               >
                 <Search size={16} />
                 검색
-              </Button.Ripple>
+              </Button>
             </div>
           </div>
           <Card>
diff --git a/src/components/laanc/map/FlightArea.js b/src/components/laanc/map/FlightArea.js
index 304de0d8..b1e54cd7 100644
--- a/src/components/laanc/map/FlightArea.js
+++ b/src/components/laanc/map/FlightArea.js
@@ -6,7 +6,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../../ui/index';
+} from '@component/ui';
 // mapbox
 import 'mapbox-gl/dist/mapbox-gl.css';
 import mapboxgl from 'mapbox-gl';
diff --git a/src/components/laanc/map/LaancAreaMap.js b/src/components/laanc/map/LaancAreaMap.js
index 9d28c86a..240e90dc 100644
--- a/src/components/laanc/map/LaancAreaMap.js
+++ b/src/components/laanc/map/LaancAreaMap.js
@@ -5,7 +5,7 @@ import threebox from 'threebox-plugin';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import { MAPBOX_TOKEN } from '../../../configs/constants';
 import { useDispatch, useSelector } from 'react-redux';
-import { Card, CardBody } from '../../ui/index';
+import { Card, CardBody } from '@component/ui';
 import { initFlightBas } from '../../../modules/laanc/models/laancModels';
 import * as LaancAction from '../../../modules/laanc/actions/laancActions';
 import {
diff --git a/src/components/laanc/map/LaancDrawModal.js b/src/components/laanc/map/LaancDrawModal.js
index 9e220cb0..ff7a433b 100644
--- a/src/components/laanc/map/LaancDrawModal.js
+++ b/src/components/laanc/map/LaancDrawModal.js
@@ -4,7 +4,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../../ui/index';
+} from '@component/ui';
 
 export default function LaancDrawModal({ modal, handler }) {
   // 드론원스탑으로 새창 바로가기
diff --git a/src/components/laanc/map/LaancMapSearch.js b/src/components/laanc/map/LaancMapSearch.js
index c5f001d5..768f72d9 100644
--- a/src/components/laanc/map/LaancMapSearch.js
+++ b/src/components/laanc/map/LaancMapSearch.js
@@ -3,7 +3,7 @@ import {
   InputGroup,
   InputGroupAddon,
   InputGroupText
-} from '../../ui/index';
+} from '@component/ui';
 import { Search } from 'react-feather';
 import { useState } from 'react';
 import { laancApi } from '../../../modules/laanc/apis/laancApi';
diff --git a/src/components/laanc/map/TodayWeather.js b/src/components/laanc/map/TodayWeather.js
index 3962a8be..50cda41f 100644
--- a/src/components/laanc/map/TodayWeather.js
+++ b/src/components/laanc/map/TodayWeather.js
@@ -1,4 +1,4 @@
-import { Table } from '../../ui/index';
+import { Table } from '@component/ui';
 import { Sun, Cloud, CloudRain, CloudSnow, Navigation2 } from 'react-feather';
 
 export function TodayWeather({ todayData }) {
diff --git a/src/components/laanc/step/LaacnStep3.js b/src/components/laanc/step/LaacnStep3.js
index 462e4f4d..67181f9f 100644
--- a/src/components/laanc/step/LaacnStep3.js
+++ b/src/components/laanc/step/LaacnStep3.js
@@ -13,7 +13,7 @@ import {
   Label,
   Input,
   Badge
-} from '../../ui/index';
+} from '@component/ui';
 import { CheckCircle } from 'react-feather';
 import { HOST } from '../../../configs/constants';
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
diff --git a/src/components/laanc/step/LaancStep1.js b/src/components/laanc/step/LaancStep1.js
index 7a6d8d7f..36135bc7 100644
--- a/src/components/laanc/step/LaancStep1.js
+++ b/src/components/laanc/step/LaancStep1.js
@@ -8,7 +8,6 @@ import { AlertCircle, Info } from 'react-feather';
 import { FLIGHT_PLAN_AREA_BUFFER_LIST } from '../../../modules/laanc/actions/laancActions';
 import axios from '../../../modules/utils/customAxiosUtil';
 import dayjs from 'dayjs';
-import { UncontrolledPopover, PopoverBody } from 'reactstrap';
 import {
   Row,
   Col,
@@ -19,8 +18,9 @@ import {
   FormGroup,
   Label,
   Input,
-  Modal
-} from '../../ui/index';
+  Modal,
+  Popover
+} from '@component/ui';
 const LaancModal = lazy(() => import('../LaancModal'));
 const LaancQr = lazy(() => import('../../../components/laanc/LaancQr'));
 const FlightArea = lazy(() => import('../map/FlightArea'));
@@ -735,19 +735,16 @@ export default function LaancStep1({
                     className='pal-popover-icon'
                     style={{ cursor: 'pointer' }}
                   />
-                  <UncontrolledPopover
+                  <Popover
                     isOpen={popoverCommercial}
                     target='commercialFocus'
                     trigger='focus'
                     toggle={() => toggle('commercialFocus')}
                     placement='bottom'
                   >
-                    <PopoverBody className='pal-popover-body'>
-                      항공기대여업, 항공레저스포츠사업, 초경량비행장치
-                      사용사업에 해당되는 경우 "사업"으로 체크하여 주시기
-                      바랍니다.
-                    </PopoverBody>
-                  </UncontrolledPopover>
+                    항공기대여업, 항공레저스포츠사업, 초경량비행장치 사용사업에
+                    해당되는 경우 "사업"으로 체크하여 주시기 바랍니다.
+                  </Popover>
                 </Label>
                 <Input
                   type='select'
@@ -785,18 +782,16 @@ export default function LaancStep1({
                         className='pal-popover-icon'
                         style={{ cursor: 'pointer' }}
                       />
-                      <UncontrolledPopover
+                      <Popover
                         isOpen={popoverSchFltStDt}
                         target='schFltStDtFocus'
                         trigger='focus'
                         toggle={() => toggle('schFltStDtFocus')}
                         placement='bottom'
                       >
-                        <PopoverBody className='pal-popover-body'>
-                          비행 시작 일자는 오늘기준 90일 이내까지만 선택
-                          가능합니다.
-                        </PopoverBody>
-                      </UncontrolledPopover>
+                        비행 시작 일자는 오늘기준 90일 이내까지만 선택
+                        가능합니다.
+                      </Popover>
                     </Label>
                     <Flatpickr
                       className='form-control form-control-sm'
@@ -899,18 +894,16 @@ export default function LaancStep1({
                         className='pal-popover-icon'
                         style={{ cursor: 'pointer' }}
                       />
-                      <UncontrolledPopover
+                      <Popover
                         isOpen={popoverSchFltEndDt}
                         target='schFltEndDtFocus'
                         trigger='focus'
                         toggle={() => toggle('schFltEndDtFocus')}
                         placement='bottom'
                       >
-                        <PopoverBody className='pal-popover-body'>
-                          비행 종료 일자는 오늘기준 6개월 이내까지만 선택
-                          가능합니다.
-                        </PopoverBody>
-                      </UncontrolledPopover>
+                        비행 종료 일자는 오늘기준 6개월 이내까지만 선택
+                        가능합니다.
+                      </Popover>
                     </Label>
                     <Flatpickr
                       className='form-control form-control-sm'
diff --git a/src/components/laanc/step/LaancStep2.js b/src/components/laanc/step/LaancStep2.js
index 342a9366..279fdfea 100644
--- a/src/components/laanc/step/LaancStep2.js
+++ b/src/components/laanc/step/LaancStep2.js
@@ -15,7 +15,7 @@ import {
   Label,
   Input,
   CustomInput
-} from '../../ui/index';
+} from '@component/ui';
 import * as LaancAction from '../../../modules/laanc/actions/laancActions';
 import * as TermsActions from '../../../modules/account/register';
 
diff --git a/src/components/layout/CustomDetailLayout.js b/src/components/layout/CustomDetailLayout.js
index eaa6adf8..e0137fe8 100644
--- a/src/components/layout/CustomDetailLayout.js
+++ b/src/components/layout/CustomDetailLayout.js
@@ -1,4 +1,4 @@
-import { Button } from 'reactstrap';
+import { Button } from '@component/ui';
 import { useHistory } from 'react-router-dom';
 import { X } from 'react-feather';
 import { MessageErrorModal } from '../message/MessageErrorModal';
@@ -18,13 +18,14 @@ export const CustomDetailLayout = ({ children, ...props }) => {
           <h3>{props.title}</h3>
         </div>
         <div>
-          <Button.Ripple
+          <Button
+            ripple
             color='danger'
             className='btn-icon'
             onClick={handlerClose}
           >
             <X size={18} />
-          </Button.Ripple>
+          </Button>
         </div>
       </div>
 
diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index b64ae1d4..fa717262 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -13,7 +13,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../../ui/index';
+} from '@component/ui';
 // mapbox
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { MAPBOX_TOKEN } from '../../../configs/constants';
diff --git a/src/components/message/MessageErrorModal.js b/src/components/message/MessageErrorModal.js
index a40864ca..2447809c 100644
--- a/src/components/message/MessageErrorModal.js
+++ b/src/components/message/MessageErrorModal.js
@@ -6,7 +6,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../ui/index';
+} from '@component/ui';
 import * as Actions from '../../modules/comn/message/actions/comnMessageAction';
 
 export const MessageErrorModal = props => {
diff --git a/src/components/message/MessageInfoModal.js b/src/components/message/MessageInfoModal.js
index ee37996e..a6eaecfb 100644
--- a/src/components/message/MessageInfoModal.js
+++ b/src/components/message/MessageInfoModal.js
@@ -6,7 +6,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../ui/index';
+} from '@component/ui';
 import * as Actions from '../../modules/comn/message/actions/comnMessageAction';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/components/modal/ConfirmModal.js b/src/components/modal/ConfirmModal.js
index 7bfeb5d3..130c9390 100644
--- a/src/components/modal/ConfirmModal.js
+++ b/src/components/modal/ConfirmModal.js
@@ -4,7 +4,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../ui/index';
+} from '@component/ui';
 
 export const ConfirmModal = props => {
   const handlerSubmit = () => {
diff --git a/src/components/modal/ErrorModal.js b/src/components/modal/ErrorModal.js
index be6e21b8..5e7f74b8 100644
--- a/src/components/modal/ErrorModal.js
+++ b/src/components/modal/ErrorModal.js
@@ -4,7 +4,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../ui/index';
+} from '@component/ui';
 
 export default function ErrorModal(props) {
   return (
diff --git a/src/components/modal/InfoModal.js b/src/components/modal/InfoModal.js
index 76063f30..9d0bad92 100644
--- a/src/components/modal/InfoModal.js
+++ b/src/components/modal/InfoModal.js
@@ -4,7 +4,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../ui/index';
+} from '@component/ui';
 
 export default function InfoModal(props) {
   return (
diff --git a/src/components/modal/control/ControlFsmModal.js b/src/components/modal/control/ControlFsmModal.js
index 5a9c4c9d..3f0be7a3 100644
--- a/src/components/modal/control/ControlFsmModal.js
+++ b/src/components/modal/control/ControlFsmModal.js
@@ -9,7 +9,7 @@ import {
   ModalHeader,
   ModalBody,
   CustomInput
-} from '@ui';
+} from '@component/ui';
 
 export default function ControlFsm({ modal, handler }) {
   return (
diff --git a/src/components/statistics/StatisticsSearch.js b/src/components/statistics/StatisticsSearch.js
index 4956daa6..d4958a8b 100644
--- a/src/components/statistics/StatisticsSearch.js
+++ b/src/components/statistics/StatisticsSearch.js
@@ -6,7 +6,7 @@ import {
   CardTitle,
   CardBody,
   CustomInput
-} from '../ui/index';
+} from '@component/ui';
 import { Search } from 'react-feather';
 import { useEffect, useState } from 'react';
 import ChartjsDoughnutChart from '../charts/chart-js/ChartjsDoughnutChart';
diff --git a/src/components/statistics/StatisticsTotal.js b/src/components/statistics/StatisticsTotal.js
index 22df05c0..dc70e1ba 100644
--- a/src/components/statistics/StatisticsTotal.js
+++ b/src/components/statistics/StatisticsTotal.js
@@ -1,4 +1,4 @@
-import { Col, Row } from '../ui/index';
+import { Col, Row } from '@component/ui';
 import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc';
 import { useEffect } from 'react';
 import { formatNumber } from '../../utility/Utils';
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx
index a97206de..5ffd6222 100644
--- a/src/components/ui/badge/index.tsx
+++ b/src/components/ui/badge/index.tsx
@@ -6,6 +6,7 @@ interface Props {
   children: ReactNode;
   className?: string;
   color?: string;
+  pill?: boolean;
 }
 
 /**
@@ -13,11 +14,17 @@ interface Props {
  * @param children: ReactNode
  * @param className?:string
  * @param color?: 'light-secondary' | 'primary' | 'secondary' | 'light-primary'
+ * @param pill?:boolean
  */
 
-export default function CustomBadge({ children, className, color }: Props) {
+export default function CustomBadge({
+  children,
+  className,
+  color,
+  pill
+}: Props) {
   return (
-    <Badge color={color} className={className}>
+    <Badge color={color} className={className} pill={pill}>
       {children}
     </Badge>
   );
diff --git a/src/components/ui/breadcrumb/CustomBreadcrumbItem.tsx b/src/components/ui/breadcrumb/CustomBreadcrumbItem.tsx
new file mode 100644
index 00000000..24faa19d
--- /dev/null
+++ b/src/components/ui/breadcrumb/CustomBreadcrumbItem.tsx
@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { BreadcrumbItem } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  tag?: string;
+  className?: string;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param tag?:string
+ *
+ */
+
+export default function CustomBreadcrumbItem({
+  children,
+  className,
+  tag
+}: Props) {
+  return (
+    <BreadcrumbItem tag={tag} className={className}>
+      {children}
+    </BreadcrumbItem>
+  );
+}
diff --git a/src/components/ui/breadcrumb/index.tsx b/src/components/ui/breadcrumb/index.tsx
new file mode 100644
index 00000000..30454332
--- /dev/null
+++ b/src/components/ui/breadcrumb/index.tsx
@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { Breadcrumb } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ */
+export default function CustomBreadcrumb({ children }: Props) {
+  return <Breadcrumb>{children}</Breadcrumb>;
+}
diff --git a/src/components/ui/button/CustomButton.tsx b/src/components/ui/button/CustomButton.tsx
index 44e67d4e..0c6afae1 100644
--- a/src/components/ui/button/CustomButton.tsx
+++ b/src/components/ui/button/CustomButton.tsx
@@ -8,7 +8,15 @@ import { Button } from 'reactstrap';
 interface Props {
   outline?: boolean;
   active?: boolean;
-  color?: 'primary' | 'secondary' | 'danger';
+  color?:
+    | 'primary'
+    | 'secondary'
+    | 'danger'
+    | 'success'
+    | 'warning'
+    | 'info'
+    | 'dark'
+    | 'light';
   type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
   tag?: React.ElementType;
   innerRef?: React.Ref<HTMLButtonElement>;
@@ -18,6 +26,7 @@ interface Props {
   children?: ReactNode;
   disabled?: boolean;
   id?: string;
+  style?: React.CSSProperties;
   ripple?: boolean;
 }
 
@@ -34,7 +43,8 @@ interface Props {
  * @param children?:ReactNode
  * @param disabled?:boolean default false
  * @param id?:string
- * @param ripple?:boolean default false
+ * @param ripple?:boolean default false Button.Ripple과 Button 분기처리
+ * @param style?:React.CSSProperties
  */
 
 export default function CustomButton({
@@ -47,9 +57,10 @@ export default function CustomButton({
   onClick,
   children,
   disabled = false,
-  id
+  id,
+  ripple = false,
+  style
 }: Props) {
-  // const ButtonComponent = ripple ? Button.Ripple : Button;
   const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
     event.preventDefault(); // 기본 동작 중지
     if (onClick) {
@@ -57,18 +68,42 @@ export default function CustomButton({
     }
   };
   return (
-    <Button
-      onClick={handleClick}
-      outline={outline}
-      color={color}
-      type={type}
-      size={size}
-      className={className}
-      tag={tag}
-      disabled={disabled}
-      id={id}
-    >
-      {children}
-    </Button>
+    <>
+      {ripple ? (
+        <>
+          <Button.Ripple
+            onClick={handleClick}
+            outline={outline}
+            color={color}
+            type={type}
+            size={size}
+            className={className}
+            tag={tag}
+            disabled={disabled}
+            style={style}
+            id={id}
+          >
+            {children}
+          </Button.Ripple>
+        </>
+      ) : (
+        <>
+          <Button
+            onClick={handleClick}
+            outline={outline}
+            color={color}
+            type={type}
+            size={size}
+            className={className}
+            tag={tag}
+            disabled={disabled}
+            id={id}
+            style={style}
+          >
+            {children}
+          </Button>
+        </>
+      )}
+    </>
   );
 }
diff --git a/src/components/ui/dropdown/CustomDropdownItem.tsx b/src/components/ui/dropdown/CustomDropdownItem.tsx
new file mode 100644
index 00000000..6ccd0cd7
--- /dev/null
+++ b/src/components/ui/dropdown/CustomDropdownItem.tsx
@@ -0,0 +1,38 @@
+import { DropdownItem } from 'reactstrap';
+import { MouseEventHandler, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  header?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param style?: React.CSSProperties
+ * @param header?: boolean
+ *
+ */
+
+export default function CustomDropdownItem({
+  children,
+  className,
+  style,
+  header,
+  onClick
+}: Props) {
+  return (
+    <DropdownItem
+      className={className}
+      style={style}
+      header={header}
+      onClick={onClick}
+    >
+      {children}
+    </DropdownItem>
+  );
+}
diff --git a/src/components/ui/dropdown/CustomDropdownMenu.tsx b/src/components/ui/dropdown/CustomDropdownMenu.tsx
new file mode 100644
index 00000000..ede8d252
--- /dev/null
+++ b/src/components/ui/dropdown/CustomDropdownMenu.tsx
@@ -0,0 +1,18 @@
+import { DropdownMenu } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ *
+ */
+
+export default function CustomDropdownMenu({ children, className }: Props) {
+  return <DropdownMenu className={className}>{children}</DropdownMenu>;
+}
diff --git a/src/components/ui/dropdown/CustomDropdownToggle.tsx b/src/components/ui/dropdown/CustomDropdownToggle.tsx
new file mode 100644
index 00000000..e4ea6457
--- /dev/null
+++ b/src/components/ui/dropdown/CustomDropdownToggle.tsx
@@ -0,0 +1,27 @@
+import { DropdownToggle } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  color?: 'primary';
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param color?: 'primary'
+ */
+
+export default function CustomDropdownToggle({
+  children,
+  className,
+  color
+}: Props) {
+  return (
+    <DropdownToggle className={className} color={color}>
+      {children}
+    </DropdownToggle>
+  );
+}
diff --git a/src/components/ui/dropdown/CustomUncontrolledDropdown.tsx b/src/components/ui/dropdown/CustomUncontrolledDropdown.tsx
new file mode 100644
index 00000000..6b437857
--- /dev/null
+++ b/src/components/ui/dropdown/CustomUncontrolledDropdown.tsx
@@ -0,0 +1,28 @@
+import { UncontrolledDropdown } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  direction?: 'up' | 'down' | 'left' | 'right';
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param direction?: 'up' | 'down' | 'left' | 'right';
+ *
+ */
+
+export default function CustomUncontrolledDropdown({
+  children,
+  className,
+  direction
+}: Props) {
+  return (
+    <UncontrolledDropdown className={className} direction={direction}>
+      {children}
+    </UncontrolledDropdown>
+  );
+}
diff --git a/src/components/ui/form/CustomFormGroup.tsx b/src/components/ui/form/CustomFormGroup.tsx
index 9357cb20..56615557 100644
--- a/src/components/ui/form/CustomFormGroup.tsx
+++ b/src/components/ui/form/CustomFormGroup.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FormGroup, Col } from 'reactstrap';
+import { FormGroup } from 'reactstrap';
 
 interface Props {
   children: ReactNode;
@@ -13,9 +13,14 @@ interface Props {
  * @param className?:string
  */
 
-export default function CustomFormGroup({ children, className, md }: Props) {
+export default function CustomFormGroup({
+  children,
+  className,
+  md,
+  tag
+}: Props) {
   return (
-    <FormGroup className={className} md={md}>
+    <FormGroup tag={tag} className={className} md={md}>
       {children}
     </FormGroup>
   );
diff --git a/src/components/ui/index.tsx b/src/components/ui/index.tsx
index 76eb7f20..ae0dbdf7 100644
--- a/src/components/ui/index.tsx
+++ b/src/components/ui/index.tsx
@@ -33,6 +33,14 @@ import ModalBody from './modal/CustomModalBody';
 import ModalFooter from './modal/CustomModalFooter';
 import Form from './form/CustomForm';
 import Media from './media/index';
+import UncontrolledTooltip from './tooltip/CustomUncontrolledTooltip';
+import Breadcrumb from './breadcrumb/index';
+import BreadcrumbItem from './breadcrumb/CustomBreadcrumbItem';
+import DropdownItem from './dropdown/CustomDropdownItem';
+import DropdownMenu from './dropdown/CustomDropdownMenu';
+import DropdownToggle from './dropdown/CustomDropdownToggle';
+import UncontrolledDropdown from './dropdown/CustomUncontrolledDropdown';
+
 export {
   Button,
   ButtonGroup,
@@ -68,5 +76,12 @@ export {
   Form,
   Media,
   Collapse,
-  Navbar
+  Navbar,
+  UncontrolledTooltip,
+  Breadcrumb,
+  BreadcrumbItem,
+  DropdownItem,
+  DropdownMenu,
+  DropdownToggle,
+  UncontrolledDropdown
 };
diff --git a/src/components/ui/popover/index.tsx b/src/components/ui/popover/index.tsx
index fefad4f0..1d2463b8 100644
--- a/src/components/ui/popover/index.tsx
+++ b/src/components/ui/popover/index.tsx
@@ -5,15 +5,22 @@ interface Props {
   children: ReactNode;
   target?: string;
   toggle?: () => void;
+  isOpen?: boolean;
 }
 
-export default function CustomPopover({ children, target, toggle }: Props) {
+export default function CustomPopover({
+  children,
+  target,
+  toggle,
+  isOpen
+}: Props) {
   return (
     <UncontrolledPopover
       trigger='focus'
       placement='bottom'
       target={target}
       toggle={toggle}
+      isOpen={isOpen}
     >
       <PopoverBody className='pal-popover-body'>{children}</PopoverBody>
     </UncontrolledPopover>
diff --git a/src/components/ui/tooltip/CustomUncontrolledTooltip.tsx b/src/components/ui/tooltip/CustomUncontrolledTooltip.tsx
new file mode 100644
index 00000000..473250b2
--- /dev/null
+++ b/src/components/ui/tooltip/CustomUncontrolledTooltip.tsx
@@ -0,0 +1,28 @@
+import { UncontrolledTooltip } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  placement?: string;
+  target?: string;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param placement?: string
+ * @param target?: string
+ *
+ *
+ */
+export default function CustomUncontrolledTooltip({
+  children,
+  placement,
+  target
+}: Props) {
+  return (
+    <UncontrolledTooltip placement={placement} target={target}>
+      {children}
+    </UncontrolledTooltip>
+  );
+}
diff --git a/src/containers/account/find/AccounFindTabContainer.js b/src/containers/account/find/AccounFindTabContainer.js
index d93cc7e3..fbd5f595 100644
--- a/src/containers/account/find/AccounFindTabContainer.js
+++ b/src/containers/account/find/AccounFindTabContainer.js
@@ -1,6 +1,6 @@
 import { AccountFindTab } from '../../../components/account/find/AccountFindTab';
 import loginImg from '../../../assets/images/login01.png';
-import { Button } from 'reactstrap';
+import { Button } from '@component/ui';
 import '../../../assets/css/custom.css';
 import { useHistory } from 'react-router-dom';
 import kacLogo from '../../../assets/images/logo/kac_logo.svg';
@@ -27,9 +27,9 @@ export const AccountFindTabContainer = () => {
             <AccountFindTab />
           </div>
           <div className='user-search-link'>
-            <Button.Ripple color='flat-warning' onClick={handlerRegister}>
+            <Button ripple color='flat-warning' onClick={handlerRegister}>
               회원가입 바로가기
-            </Button.Ripple>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/src/containers/account/mypage/AccountMypageContainer.js b/src/containers/account/mypage/AccountMypageContainer.js
index 87f6ed22..208f6b49 100644
--- a/src/containers/account/mypage/AccountMypageContainer.js
+++ b/src/containers/account/mypage/AccountMypageContainer.js
@@ -14,7 +14,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../../../components/ui/index';
+} from '@component/ui';
 import { accountAPI } from '../../../modules/account/register';
 import AccountMypagePwForm from '../../../components/account/mypage/AccountMypagePwForm';
 import AccountMypageForm from '../../../components/account/mypage/AccountMypageForm';
diff --git a/src/containers/analysis/history/AnalysisHistoryContainer.js b/src/containers/analysis/history/AnalysisHistoryContainer.js
index 2b20d331..b670c6d1 100644
--- a/src/containers/analysis/history/AnalysisHistoryContainer.js
+++ b/src/containers/analysis/history/AnalysisHistoryContainer.js
@@ -16,7 +16,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../../../components/ui/index';
+} from '@component/ui';
 import * as LaancAction from '../../../modules/laanc/actions/laancActions';
 import { useHistory } from 'react-router-dom';
 import { MessageErrorModal } from '../../../components/message/MessageErrorModal';
diff --git a/src/containers/basis/dron/BasisDronContainer.js b/src/containers/basis/dron/BasisDronContainer.js
index 82d326e6..61f97a9f 100644
--- a/src/containers/basis/dron/BasisDronContainer.js
+++ b/src/containers/basis/dron/BasisDronContainer.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useHistory, Link } from 'react-router-dom';
-import { Button } from 'reactstrap';
+import { Button } from '@component/ui';
 import * as DroneActions from '../../../modules/basis/drone/actions';
 import * as GroupActions from '../../../modules/basis/group/actions';
 import { GET_ARCTFT_TYPE_CD } from '../../../utility/CondeUtil';
@@ -63,15 +63,17 @@ export const BasisDronContainer = props => {
       sortable: true,
       cell: row => {
         return selectGroup?.groupId === row?.groupId ? (
-          <Button.Ripple
+          <Button
+            ripple
             color='danger'
             className='badge badge-danger'
             onClick={() => handlerCancel()}
           >
             선택취소
-          </Button.Ripple>
+          </Button>
         ) : (
-          <Button.Ripple
+          <Button
+            ripple
             color='primary'
             className='badge badge-primary'
             onClick={() =>
@@ -85,7 +87,7 @@ export const BasisDronContainer = props => {
             }
           >
             상세보기
-          </Button.Ripple>
+          </Button>
         );
       }
     }
@@ -241,14 +243,15 @@ export const BasisDronContainer = props => {
           paginationRowsPerPageOptions={[10, 20, 30, 40]}
           button={
             <div className='d-flex align-items-center'>
-              <Button.Ripple
+              <Button
+                ripple
                 color='primary'
                 size='sm'
                 onClick={handlerGroupCreate}
                 {...(isMyGroup ? {} : { disabled: true })}
               >
                 기체등록
-              </Button.Ripple>
+              </Button>
             </div>
           }
         />
diff --git a/src/containers/basis/dron/BasisDronDetailContainer.js b/src/containers/basis/dron/BasisDronDetailContainer.js
index 3c5ccac6..9ab89cdd 100644
--- a/src/containers/basis/dron/BasisDronDetailContainer.js
+++ b/src/containers/basis/dron/BasisDronDetailContainer.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Col, Row } from '../../../components/ui/index';
-import { Button } from 'reactstrap';
+import { Button } from '@component/ui';
 import { useForm } from 'react-hook-form';
 import { useDispatch, useSelector } from 'react-redux';
 // yup
@@ -266,7 +266,8 @@ export const BasisDronDetailContainer = props => {
       </Col>
       <Col md='12'>
         <div className='d-flex align-items-center'>
-          <Button.Ripple
+          <Button
+            ripple
             className='mr-1'
             color='primary'
             size='sm'
@@ -278,16 +279,17 @@ export const BasisDronDetailContainer = props => {
             disabled={props.isDisabled}
           >
             저장
-          </Button.Ripple>
+          </Button>
           {pageType != 'create' ? (
-            <Button.Ripple
+            <Button
+              ripple
               color='danger'
               size='sm'
               onClick={handlerDelete}
               disabled={props.isDisabled}
             >
               삭제
-            </Button.Ripple>
+            </Button>
           ) : (
             <></>
           )}
diff --git a/src/containers/basis/dron/BasisIdntfContainer.js b/src/containers/basis/dron/BasisIdntfContainer.js
index 836f6b11..b380c0d4 100644
--- a/src/containers/basis/dron/BasisIdntfContainer.js
+++ b/src/containers/basis/dron/BasisIdntfContainer.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Card, CardBody, Col, Row } from '../../../components/ui/index';
+import { Card, CardBody, Col, Row } from '@component/ui';
 import { BasisIdntfForm } from '../../../components/basis/dron/BasisIdntform';
 import * as Actions from '../../../modules/basis/drone/actions';
 import ErrorModal from '../../../components/modal/ErrorModal';
diff --git a/src/containers/basis/flight/plan/WeatherContainer.js b/src/containers/basis/flight/plan/WeatherContainer.js
index ea01e578..c81a45a3 100644
--- a/src/containers/basis/flight/plan/WeatherContainer.js
+++ b/src/containers/basis/flight/plan/WeatherContainer.js
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import dayjs from 'dayjs';
 import { Compass } from 'react-feather';
-import { Spinner } from '../../../../components/ui/index';
+import { Spinner } from '@component/ui';
 import {
   TodayWeather,
   TomorrowWeahter,
diff --git a/src/containers/basis/group/BasisGroupApprovalContainer.js b/src/containers/basis/group/BasisGroupApprovalContainer.js
index 525175a6..600eb4fc 100644
--- a/src/containers/basis/group/BasisGroupApprovalContainer.js
+++ b/src/containers/basis/group/BasisGroupApprovalContainer.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button } from 'reactstrap';
+import { Button } from '@component/ui';
 import { BasisGroupApprovalSearch } from '../../../components/basis/group/BasisGroupApprovalSearch';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 import * as Actions from '../../../modules/basis/group/actions';
@@ -100,15 +100,17 @@ export const BasisGroupApprovalContainer = props => {
       cell: row => {
         // return selectData?.groupId === row?.groupId ? (
         return aprvSelect?.groupId === row?.groupId ? (
-          <Button.Ripple
+          <Button
+            ripple
             color='danger'
             className='badge badge-danger'
             onClick={() => handlerCancel()}
           >
             선택취소
-          </Button.Ripple>
+          </Button>
         ) : (
-          <Button.Ripple
+          <Button
+            ripple
             color='primary'
             className='badge badge-primary'
             onClick={() =>
@@ -121,7 +123,7 @@ export const BasisGroupApprovalContainer = props => {
             }
           >
             상세보기
-          </Button.Ripple>
+          </Button>
         );
       }
     }
@@ -202,23 +204,25 @@ export const BasisGroupApprovalContainer = props => {
         }
 
         return row?.aprvlYn === 'N' ? (
-          <Button.Ripple
+          <Button
+            ripple
             color='primary'
             className='badge badge-primary'
             onClick={() => handlerAprvConfirm(row?.cstmrGroupSno, trmnlId)}
             disabled={disa}
           >
             승인처리
-          </Button.Ripple>
+          </Button>
         ) : (
-          <Button.Ripple
+          <Button
+            ripple
             color='danger'
             className='badge badge-danger'
             onClick={() => handlerCancelConfirm(row?.cstmrGroupSno)}
             disabled={disa}
           >
             승인취소
-          </Button.Ripple>
+          </Button>
         );
       }
     }
diff --git a/src/containers/basis/group/BasisGroupContainer.js b/src/containers/basis/group/BasisGroupContainer.js
index 1fca029c..0f282ffe 100644
--- a/src/containers/basis/group/BasisGroupContainer.js
+++ b/src/containers/basis/group/BasisGroupContainer.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
-import { Button } from 'reactstrap';
+import { Button } from '@component/ui';
 import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 import * as Actions from '../../../modules/basis/group/actions';
@@ -138,13 +138,14 @@ export const BasisGroupContainer = props => {
         return row?.groupAuthCd === 'MASTER' ? (
           <div>-</div>
         ) : (
-          <Button.Ripple
+          <Button
+            ripple
             color='danger'
             className='badge badge-danger'
             onClick={() => handlerWithDrawal(row.cstmrGroupSno)}
           >
             탈퇴하기
-          </Button.Ripple>
+          </Button>
         );
       }
     }
@@ -201,13 +202,14 @@ export const BasisGroupContainer = props => {
         pagination={false}
         button={
           <div className='d-flex align-items-center'>
-            <Button.Ripple
+            <Button
+              ripple
               color='primary'
               size='sm'
               onClick={handlerGroupCreate}
             >
               그룹생성
-            </Button.Ripple>
+            </Button>
           </div>
         }
       />
@@ -220,9 +222,9 @@ export const BasisGroupContainer = props => {
         pagination={false}
         button={
           <div className='d-flex align-items-center'>
-            <Button.Ripple color='primary' size='sm' onClick={handlerGroupJoin}>
+            <Button ripple color='primary' size='sm' onClick={handlerGroupJoin}>
               가입하기
-            </Button.Ripple>
+            </Button>
           </div>
         }
       />
diff --git a/src/containers/basis/group/BasisGroupDetailJoinContainer.js b/src/containers/basis/group/BasisGroupDetailJoinContainer.js
index d0651d17..3c7e3b24 100644
--- a/src/containers/basis/group/BasisGroupDetailJoinContainer.js
+++ b/src/containers/basis/group/BasisGroupDetailJoinContainer.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button } from 'reactstrap';
+import { Button } from '@component/ui';
 import { BasisGroupDetailJoinSearch } from '../../../components/basis/group/BasisGroupDetailJoinSearch';
 import { CustomDetailLayout } from '../../../components/layout/CustomDetailLayout';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
@@ -113,13 +113,14 @@ export const BasisGroupDetailJoinContainer = props => {
         // return <Badge color='danger'>신청취소</Badge>;
 
         return row?.joinYn === 'N' ? (
-          <Button.Ripple
+          <Button
+            ripple
             color='primary'
             className='badge badge-primary'
             onClick={() => handlerJoin(row?.groupId)}
           >
             가입하기
-          </Button.Ripple>
+          </Button>
         ) : (
           <div>-</div>
         );
diff --git a/src/containers/basis/group/BasisGroupUsersContainer.js b/src/containers/basis/group/BasisGroupUsersContainer.js
index 157fac0a..d428a19b 100644
--- a/src/containers/basis/group/BasisGroupUsersContainer.js
+++ b/src/containers/basis/group/BasisGroupUsersContainer.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button } from 'reactstrap';
+import { Button } from '@component/ui';
 import { BasisGroupUsersSearch } from '../../../components/basis/group/BasisGroupUsersSearch';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 import * as Actions from '../../../modules/basis/group/actions';
@@ -98,15 +98,17 @@ export const BasisGroupUsersContainer = props => {
       cell: row => {
         // return selectData?.groupId === row?.groupId ? (
         return userSelect?.groupId === row?.groupId ? (
-          <Button.Ripple
+          <Button
+            ripple
             color='danger'
             className='badge badge-danger'
             onClick={() => handlerCancel()}
           >
             선택취소
-          </Button.Ripple>
+          </Button>
         ) : (
-          <Button.Ripple
+          <Button
+            ripple
             color='primary'
             className='badge badge-primary'
             onClick={() =>
@@ -119,7 +121,7 @@ export const BasisGroupUsersContainer = props => {
             }
           >
             상세보기
-          </Button.Ripple>
+          </Button>
         );
       }
     }
@@ -263,7 +265,8 @@ export const BasisGroupUsersContainer = props => {
 
         return (
           <>
-            <Button.Ripple
+            <Button
+              ripple
               {...(master ? {} : { color: 'warning' })}
               className='badge badge-warning'
               style={{ marginRight: '0.35rem' }}
@@ -273,8 +276,9 @@ export const BasisGroupUsersContainer = props => {
               disabled={master}
             >
               LEVEL 1
-            </Button.Ripple>
-            <Button.Ripple
+            </Button>
+            <Button
+              ripple
               {...(leader ? {} : { color: 'danger' })}
               className='badge badge-danger'
               style={{ marginRight: '0.35rem' }}
@@ -282,15 +286,16 @@ export const BasisGroupUsersContainer = props => {
               disabled={leader}
             >
               LEVEL 2
-            </Button.Ripple>
-            <Button.Ripple
+            </Button>
+            <Button
+              ripple
               {...(normal ? {} : { color: 'primary' })}
               className='badge badge-primary'
               onClick={() => handlerNormal(row?.cstmrGroupSno)}
               disabled={normal}
             >
               LEVEL 3
-            </Button.Ripple>
+            </Button>
           </>
         );
       }
diff --git a/src/containers/cstmrService/faq/FaqContainer.js b/src/containers/cstmrService/faq/FaqContainer.js
index a05867a4..0a4fb30d 100644
--- a/src/containers/cstmrService/faq/FaqContainer.js
+++ b/src/containers/cstmrService/faq/FaqContainer.js
@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { TabContent, TabPane } from '../../../components/ui/index';
-import { Button } from 'reactstrap';
-import AppCollapse from '@components/app-collapse';
+import { TabContent, TabPane, Button } from '@component/ui';
+import AppCollapse from '@core@components/app-collapse';
 import {
   LIST,
   INSERT,
@@ -261,7 +260,8 @@ export default function FaqContainer() {
             {/* User 권한일 경우 수정하기 버튼 미노출 */}
             {user?.authId !== 'USER' && (
               <div>
-                <Button.Ripple
+                <Button
+                  ripple
                   color='flat-primary'
                   onClick={e => {
                     e.stopPropagation();
@@ -269,7 +269,7 @@ export default function FaqContainer() {
                   }}
                 >
                   수정하기
-                </Button.Ripple>
+                </Button>
               </div>
             )}
           </div>
diff --git a/src/containers/cstmrService/inquiry/AdminInquiryContainer.js b/src/containers/cstmrService/inquiry/AdminInquiryContainer.js
index 4d7cd1e4..a4cc00f7 100644
--- a/src/containers/cstmrService/inquiry/AdminInquiryContainer.js
+++ b/src/containers/cstmrService/inquiry/AdminInquiryContainer.js
@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Col, Row } from '../../../components/ui/index';
+import { Col, Row } from '@component/ui';
 import {
   ADMIN_LIST,
   ADMIN_DETAIL,
diff --git a/src/containers/cstmrService/inquiry/UserInquiryContainer.js b/src/containers/cstmrService/inquiry/UserInquiryContainer.js
index d32202c1..f3966eea 100644
--- a/src/containers/cstmrService/inquiry/UserInquiryContainer.js
+++ b/src/containers/cstmrService/inquiry/UserInquiryContainer.js
@@ -1,6 +1,6 @@
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Badge } from 'reactstrap';
-import AppCollapse from '@components/app-collapse';
+import { Button, Badge } from '@component/ui';
+import AppCollapse from '@core@components/app-collapse';
 import { useDispatch, useSelector } from 'react-redux';
 import dayjs from 'dayjs';
 import * as Actions from '../../../modules/cstmrService/inquiry/actions';
@@ -91,7 +91,8 @@ export default function UserInquiryContainer({ memberName }) {
               </span>
             </h5>
             <div>
-              <Button.Ripple
+              <Button
+                ripple
                 color='flat-primary'
                 onClick={e => {
                   e.stopPropagation();
@@ -99,7 +100,7 @@ export default function UserInquiryContainer({ memberName }) {
                 }}
               >
                 수정하기
-              </Button.Ripple>
+              </Button>
               <span className='date'>
                 {dayjs(i.createDt).format('YYYY-MM-DD')}
               </span>
diff --git a/src/containers/laanc/LaancContainer.js b/src/containers/laanc/LaancContainer.js
index 2950b625..418275e5 100644
--- a/src/containers/laanc/LaancContainer.js
+++ b/src/containers/laanc/LaancContainer.js
@@ -1,6 +1,6 @@
 import { useEffect, useState, lazy, Suspense } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button, Badge } from '../../components/ui/index';
+import { Button, Badge } from '@component/ui';
 import { useDispatch } from 'react-redux';
 import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
 import * as LaancAction from '../../modules/laanc/actions/laancActions';
diff --git a/src/containers/laanc/LaancPlanContainer.js b/src/containers/laanc/LaancPlanContainer.js
index da15fd02..392c575d 100644
--- a/src/containers/laanc/LaancPlanContainer.js
+++ b/src/containers/laanc/LaancPlanContainer.js
@@ -1,7 +1,7 @@
 import { lazy, useEffect, useState, Suspense } from 'react';
 import LaancModal from '../../components/laanc/LaancModal';
 import { initFlightBas } from '../../modules/laanc/models/laancModels';
-import { Modal } from '../../components/ui/index';
+import { Modal } from '@component/ui';
 import { AREA_DETAIL_INIT } from '../../modules/laanc/actions/laancActions';
 import { useDispatch, useSelector } from 'react-redux';
 import { drawTypeChangeAction } from '../../modules/control/map/actions/controlMapActions';
diff --git a/src/containers/main/dash/MainDashContainer.js b/src/containers/main/dash/MainDashContainer.js
index 382b7c63..3ff485eb 100644
--- a/src/containers/main/dash/MainDashContainer.js
+++ b/src/containers/main/dash/MainDashContainer.js
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import dayjs from 'dayjs';
-import { Col, Row } from '../../../components/ui/index';
+import { Col, Row } from '@component/ui';
 import DroneFlightSchedule from '../../../components/dashboard/DroneFlightSchedule';
 import { DashboardGroupList } from '../../../components/dashboard/DashboardGroupList';
 import { DashboardStcsArea } from '../../../components/dashboard/DashboardStcsArea';
diff --git a/src/views/Login.js b/src/views/Login.js
index 35795030..dfde829f 100644
--- a/src/views/Login.js
+++ b/src/views/Login.js
@@ -1,15 +1,26 @@
-import { useSkin } from '@hooks/useSkin'
-import { Link, Redirect } from 'react-router-dom'
-import { Facebook, Twitter, Mail, GitHub } from 'react-feather'
-import InputPasswordToggle from '@components/input-password-toggle'
-import { Row, Col, CardTitle, CardText, Form, FormGroup, Label, Input, CustomInput, Button } from 'reactstrap'
-import '@styles/base/pages/page-auth.scss'
+import { useSkin } from '@hooks/useSkin';
+import { Link, Redirect } from 'react-router-dom';
+import { Facebook, Twitter, Mail, GitHub } from 'react-feather';
+import InputPasswordToggle from '@core@components/input-password-toggle';
+import {
+  Row,
+  Col,
+  CardTitle,
+  CardText,
+  Form,
+  FormGroup,
+  Label,
+  Input,
+  CustomInput,
+  Button
+} from 'reactstrap';
+import '@styles/base/pages/page-auth.scss';
 
 const Login = () => {
-  const [skin, setSkin] = useSkin()
+  const [skin, setSkin] = useSkin();
 
   const illustration = skin === 'dark' ? 'login-v2-dark.svg' : 'login-v2.svg',
-    source = require(`@src/assets/images/pages/${illustration}`).default
+    source = require(`@src/assets/images/pages/${illustration}`).default;
 
   return (
     <div className='auth-wrapper auth-v2'>
@@ -17,16 +28,34 @@ const Login = () => {
         <Link className='brand-logo' to='/'>
           <svg viewBox='0 0 139 95' version='1.1' height='28'>
             <defs>
-              <linearGradient x1='100%' y1='10.5120544%' x2='50%' y2='89.4879456%' id='linearGradient-1'>
+              <linearGradient
+                x1='100%'
+                y1='10.5120544%'
+                x2='50%'
+                y2='89.4879456%'
+                id='linearGradient-1'
+              >
                 <stop stopColor='#000000' offset='0%'></stop>
                 <stop stopColor='#FFFFFF' offset='100%'></stop>
               </linearGradient>
-              <linearGradient x1='64.0437835%' y1='46.3276743%' x2='37.373316%' y2='100%' id='linearGradient-2'>
+              <linearGradient
+                x1='64.0437835%'
+                y1='46.3276743%'
+                x2='37.373316%'
+                y2='100%'
+                id='linearGradient-2'
+              >
                 <stop stopColor='#EEEEEE' stopOpacity='0' offset='0%'></stop>
                 <stop stopColor='#FFFFFF' offset='100%'></stop>
               </linearGradient>
             </defs>
-            <g id='Page-1' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+            <g
+              id='Page-1'
+              stroke='none'
+              strokeWidth='1'
+              fill='none'
+              fillRule='evenodd'
+            >
               <g id='Artboard' transform='translate(-400.000000, -178.000000)'>
                 <g id='Group' transform='translate(400.000000, 178.000000)'>
                   <path
@@ -70,18 +99,32 @@ const Login = () => {
             <img className='img-fluid' src={source} alt='Login V2' />
           </div>
         </Col>
-        <Col className='d-flex align-items-center auth-bg px-2 p-lg-5' lg='4' sm='12'>
+        <Col
+          className='d-flex align-items-center auth-bg px-2 p-lg-5'
+          lg='4'
+          sm='12'
+        >
           <Col className='px-xl-2 mx-auto' sm='8' md='6' lg='12'>
             <CardTitle tag='h2' className='font-weight-bold mb-1'>
               Welcome to Vuexy! 👋
             </CardTitle>
-            <CardText className='mb-2'>Please sign-in to your account and start the adventure</CardText>
-            <Form className='auth-login-form mt-2' onSubmit={e => e.preventDefault()}>
+            <CardText className='mb-2'>
+              Please sign-in to your account and start the adventure
+            </CardText>
+            <Form
+              className='auth-login-form mt-2'
+              onSubmit={e => e.preventDefault()}
+            >
               <FormGroup>
                 <Label className='form-label' for='login-email'>
                   Email
                 </Label>
-                <Input type='email' id='login-email' placeholder='john@example.com' autoFocus />
+                <Input
+                  type='email'
+                  id='login-email'
+                  placeholder='john@example.com'
+                  autoFocus
+                />
               </FormGroup>
               <FormGroup>
                 <div className='d-flex justify-content-between'>
@@ -92,10 +135,18 @@ const Login = () => {
                     <small>Forgot Password?</small>
                   </Link>
                 </div>
-                <InputPasswordToggle className='input-group-merge' id='login-password' />
+                <InputPasswordToggle
+                  className='input-group-merge'
+                  id='login-password'
+                />
               </FormGroup>
               <FormGroup>
-                <CustomInput type='checkbox' className='custom-control-Primary' id='remember-me' label='Remember Me' />
+                <CustomInput
+                  type='checkbox'
+                  className='custom-control-Primary'
+                  id='remember-me'
+                  label='Remember Me'
+                />
               </FormGroup>
               <Button.Ripple tag={Link} to='/' color='primary' block>
                 Sign in
@@ -128,7 +179,7 @@ const Login = () => {
         </Col>
       </Row>
     </div>
-  )
-}
+  );
+};
 
-export default Login
+export default Login;
diff --git a/src/views/control/alarm/ControlAlarmDetail.js b/src/views/control/alarm/ControlAlarmDetail.js
index b1135aa3..ac0b887d 100644
--- a/src/views/control/alarm/ControlAlarmDetail.js
+++ b/src/views/control/alarm/ControlAlarmDetail.js
@@ -4,7 +4,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from '../../../components/ui/index';
+} from '@component/ui';
 
 const ControlAlarmDetail = ({
   historyModal,
diff --git a/src/views/control/alarm/ControlAlarmList.js b/src/views/control/alarm/ControlAlarmList.js
index 49f7f0a2..e61dfa5e 100644
--- a/src/views/control/alarm/ControlAlarmList.js
+++ b/src/views/control/alarm/ControlAlarmList.js
@@ -3,7 +3,7 @@ import { X } from 'react-feather';
 import { useDispatch, useSelector } from 'react-redux';
 import { controlGpLogAction } from '../../../modules/control/gp/actions/controlGpAction';
 import ControlAlarmDetail from './ControlAlarmDetail';
-import { Badge } from '../../../components/ui/index';
+import { Badge } from '@component/ui';
 
 const ControlAlarmList = props => {
   const dispatch = useDispatch();
diff --git a/src/views/control/main/ControlMain.js b/src/views/control/main/ControlMain.js
index 715ab4fe..0d702bfb 100644
--- a/src/views/control/main/ControlMain.js
+++ b/src/views/control/main/ControlMain.js
@@ -13,7 +13,7 @@ import {
 } from 'react-feather';
 import { AiOutlinePoweroff } from 'react-icons/ai';
 import { IoAlertOutline } from 'react-icons/io5';
-import { Card } from '../../../components/ui/index';
+import { Card } from '@component/ui';
 import ControlSetting from '../setting/ControlSetting';
 import WebsocketClient from '../../../components/websocket/WebsocketClient';
 import { controlweatherAction } from '../../../modules/control/gp/actions/controlGpAction';
diff --git a/src/views/control/report/ControlReportDetail.js b/src/views/control/report/ControlReportDetail.js
index 16f3dcf8..2b2660d0 100644
--- a/src/views/control/report/ControlReportDetail.js
+++ b/src/views/control/report/ControlReportDetail.js
@@ -10,7 +10,7 @@ import {
   CloudRain,
   CloudSnow
 } from 'react-feather';
-import { Table } from '../../../components/ui/index';
+import { Table } from '@component/ui';
 import drone_img from '../../../assets/images/drone.jpg';
 import uam_img from '../../../assets/images/uam_img.jpg';
 import drone_yellow from '../../../assets/images/drone_yellow.png';
diff --git a/src/views/control/report/ControlReportList.js b/src/views/control/report/ControlReportList.js
index d867e58d..3ae97bc1 100644
--- a/src/views/control/report/ControlReportList.js
+++ b/src/views/control/report/ControlReportList.js
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Search, X } from 'react-feather';
 import { useDispatch, useSelector } from 'react-redux';
-import { Badge, Button, Input, InputGroup } from '../../../components/ui/index';
+import { Badge, Button, Input, InputGroup } from '@component/ui';
 import dayjs from 'dayjs';
 import { controlGpDtlAction } from '../../../modules/control/gp';
 import { objectClickAction } from '../../../modules/control/map/actions/controlMapActions';
diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js
index a1c808af..413a63be 100644
--- a/src/views/control/setting/ControlSetting.js
+++ b/src/views/control/setting/ControlSetting.js
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import mapboxgl from 'mapbox-gl';
-import { Button, ButtonGroup, CustomInput } from '../../../components/ui/index';
+import { Button, ButtonGroup, CustomInput } from '@component/ui';
 import * as Actions from '../../../modules/menu/actions/menuAction';
 import {
   areaClickAction,
diff --git a/src/views/control/weather/WeatherList.js b/src/views/control/weather/WeatherList.js
index bfbc23b3..bf5ee7fa 100644
--- a/src/views/control/weather/WeatherList.js
+++ b/src/views/control/weather/WeatherList.js
@@ -11,7 +11,7 @@ import {
   CloudRain,
   CloudSnow
 } from 'react-feather';
-import { Button, InputGroup, Input, Table } from '../../../components/ui/index';
+import { Button, InputGroup, Input, Table } from '@component/ui';
 
 const WeatherList = props => {
   const [clickTab, setClickTab] = useState(true);
diff --git a/src/views/design/DesignRegister.js b/src/views/design/DesignRegister.js
index 7e8d6864..43051529 100644
--- a/src/views/design/DesignRegister.js
+++ b/src/views/design/DesignRegister.js
@@ -1,17 +1,28 @@
-import { useRef, useState, useEffect } from 'react'
-import Wizard from '@components/wizard'
-import Address from '../../views/forms/wizard/steps-with-validation/Address'
-import SocialLinks from '../../views/forms/wizard/steps-with-validation/SocialLinks'
-import PersonalInfo from '../../views/forms/wizard/steps-with-validation/PersonalInfo'
-import AccountDetails from '../../views/forms/wizard/steps-with-validation/AccountDetails'
-import { Card, CardBody, CardTitle, CardText, Form, FormGroup, Label, Input, CustomInput, Button } from 'reactstrap'
-import '@styles/base/pages/page-auth.scss'
-import { ArrowRight } from 'react-feather'
-import '../../assets/css/custom.css'
+import { useRef, useState, useEffect } from 'react';
+import Wizard from '@core@components/wizard';
+import Address from '../../views/forms/wizard/steps-with-validation/Address';
+import SocialLinks from '../../views/forms/wizard/steps-with-validation/SocialLinks';
+import PersonalInfo from '../../views/forms/wizard/steps-with-validation/PersonalInfo';
+import AccountDetails from '../../views/forms/wizard/steps-with-validation/AccountDetails';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  CardText,
+  Form,
+  FormGroup,
+  Label,
+  Input,
+  CustomInput,
+  Button
+} from 'reactstrap';
+import '@styles/base/pages/page-auth.scss';
+import { ArrowRight } from 'react-feather';
+import '../../assets/css/custom.css';
 
 const DesignRegister = () => {
-  const [stepper, setStepper] = useState(null)
-  const ref = useRef(null)
+  const [stepper, setStepper] = useState(null);
+  const ref = useRef(null);
 
   const steps = [
     {
@@ -20,7 +31,7 @@ const DesignRegister = () => {
       subtitle: 'STEP01',
       content: <AccountDetails stepper={stepper} type='wizard-horizontal' />
     }
-  ]
+  ];
 
   return (
     <div className='pal-register'>
@@ -32,7 +43,7 @@ const DesignRegister = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default DesignRegister;
diff --git a/src/views/design/DesignRegister2.js b/src/views/design/DesignRegister2.js
index d3a24bb2..6d5ef071 100644
--- a/src/views/design/DesignRegister2.js
+++ b/src/views/design/DesignRegister2.js
@@ -1,16 +1,31 @@
-import { useRef, useState, useEffect } from 'react'
-import { Fragment } from 'react'
-import Wizard from '@components/wizard'
-import Address from '../forms/wizard/steps-with-validation/Address'
-import SocialLinks from '../forms/wizard/steps-with-validation/SocialLinks'
-import PersonalInfo from '../forms/wizard/steps-with-validation/PersonalInfo'
-import AccountDetails from '../forms/wizard/steps-with-validation/AccountDetails'
-import { Card, CardBody, CardTitle, CardText, Form, FormGroup, Label, 
-  Input, CustomInput, Button, Row, Col,
-  Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
-import '@styles/base/pages/page-auth.scss'
-import { Check, X } from 'react-feather'
-import '../../assets/css/custom.css'
+import { useRef, useState, useEffect } from 'react';
+import { Fragment } from 'react';
+import Wizard from '@core@components/wizard';
+import Address from '../forms/wizard/steps-with-validation/Address';
+import SocialLinks from '../forms/wizard/steps-with-validation/SocialLinks';
+import PersonalInfo from '../forms/wizard/steps-with-validation/PersonalInfo';
+import AccountDetails from '../forms/wizard/steps-with-validation/AccountDetails';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  CardText,
+  Form,
+  FormGroup,
+  Label,
+  Input,
+  CustomInput,
+  Button,
+  Row,
+  Col,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from 'reactstrap';
+import '@styles/base/pages/page-auth.scss';
+import { Check, X } from 'react-feather';
+import '../../assets/css/custom.css';
 
 const DesignRegister2 = () => {
   const [formModal, setFormModal] = useState(false);
@@ -27,7 +42,11 @@ const DesignRegister2 = () => {
                       <FormGroup tag={Col} md='12' className='mb-0'>
                         <div className='content-header'>
                           <h5>아이디 찾기</h5>
-                          <p className='mb-1'>회원정보에 등록한 이름/휴대전화 번호와 입력한 이름/휴대전화 번호가 같아야, 인증번호를 받을 수 있습니다.</p>        
+                          <p className='mb-1'>
+                            회원정보에 등록한 이름/휴대전화 번호와 입력한
+                            이름/휴대전화 번호가 같아야, 인증번호를 받을 수
+                            있습니다.
+                          </p>
                         </div>
                       </FormGroup>
                       <FormGroup tag={Col} md='12'>
@@ -35,11 +54,7 @@ const DesignRegister2 = () => {
                           <span className='necessary'>*</span>이름
                         </Label>
                         <div className=''>
-                          <Input
-                          name='test'
-                          id='test'
-                          placeholder='홍길동'
-                        />
+                          <Input name='test' id='test' placeholder='홍길동' />
                         </div>
                       </FormGroup>
                       <FormGroup tag={Col} md='6'>
@@ -50,7 +65,7 @@ const DesignRegister2 = () => {
                           <Col md='5' xs='12'>
                             <Input type='select' name='select' id='test'>
                               <option>11111</option>
-                              <option>21111</option>                       
+                              <option>21111</option>
                             </Input>
                           </Col>
                           <Col md='7' xs='12'>
@@ -60,24 +75,21 @@ const DesignRegister2 = () => {
                               id='test'
                               placeholder='+82 010-0000-0000'
                             />
-                        </Col>       
+                          </Col>
                         </div>
                         <div className='user-phone-btn'>
                           {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}
-                            <span className='time d-none'>
-                              남은시간 : 3:00
+                          <span className='time d-none'>남은시간 : 3:00</span>
+                          <Button.Ripple type='button' color='secondary'>
+                            <span className='d-sm-inline-block'>
+                              인증번호 발송
                             </span>
-                            <Button.Ripple                
-                              type='button'
-                              color='secondary'
-                            >
-                            <span className='d-sm-inline-block'>인증번호 발송</span>
                           </Button.Ripple>
                         </div>
                       </FormGroup>
                       <FormGroup tag={Col} md='6'>
                         <Label className='form-label' for='test'>
-                        <span className='necessary'>*</span>인증번호
+                          <span className='necessary'>*</span>인증번호
                         </Label>
                         <div className='input-btn d-flex justify-content-between'>
                           <Input
@@ -85,24 +97,37 @@ const DesignRegister2 = () => {
                             name='test'
                             id='test'
                             placeholder=''
-                          />         
+                          />
                         </div>
                         <div className='user-phone-btn'>
-                        <Button.Ripple type='button' color='secondary'>
-                          <span className='d-sm-inline-block'>인증하기</span>           
-                        </Button.Ripple>
+                          <Button.Ripple type='button' color='secondary'>
+                            <span className='d-sm-inline-block'>인증하기</span>
+                          </Button.Ripple>
                         </div>
                       </FormGroup>
-                    </Row>  
+                    </Row>
                     <div className='d-flex justify-content-between'>
-                      <Button.Ripple type='button' color='dark' className='btn-prev' >
-                        <span className='align-middle d-sm-inline-block'>취소</span>
+                      <Button.Ripple
+                        type='button'
+                        color='dark'
+                        className='btn-prev'
+                      >
+                        <span className='align-middle d-sm-inline-block'>
+                          취소
+                        </span>
                       </Button.Ripple>
-                      <Button.Ripple type='button' color='primary' className='btn-next' onClick={() => setFormModal(!formModal)}>
-                        <span className='align-middle d-sm-inline-block'>완료</span>
+                      <Button.Ripple
+                        type='button'
+                        color='primary'
+                        className='btn-next'
+                        onClick={() => setFormModal(!formModal)}
+                      >
+                        <span className='align-middle d-sm-inline-block'>
+                          완료
+                        </span>
                       </Button.Ripple>
                     </div>
-                  </Form> 
+                  </Form>
                 </Fragment>
               </CardBody>
             </Card>
@@ -122,16 +147,19 @@ const DesignRegister2 = () => {
                    <p className='txt'>고객님의 아이디는 <span>admin</span>입니다.</p>
                   </div> */}
                   <div class='modal-box text-center'>
-                   <p className='mb-1'><X size={40} className='text-danger' /></p>
-                   <p className='ti'>아이디 찾기 실패</p>
-                   <p className='txt'>회원정보에 등록한 정보와 일치하지 않습니다.<br/>다시 확인하시기 바랍니다</p>
+                    <p className='mb-1'>
+                      <X size={40} className='text-danger' />
+                    </p>
+                    <p className='ti'>아이디 찾기 실패</p>
+                    <p className='txt'>
+                      회원정보에 등록한 정보와 일치하지 않습니다.
+                      <br />
+                      다시 확인하시기 바랍니다
+                    </p>
                   </div>
                 </ModalBody>
                 <ModalFooter>
-                  <Button
-                    outline
-                    color='primary'
-                  >
+                  <Button outline color='primary'>
                     비밀번호 찾기
                   </Button>
                   <Button
@@ -147,7 +175,7 @@ const DesignRegister2 = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default DesignRegister2;
diff --git a/src/views/design/DesignRegister3.js b/src/views/design/DesignRegister3.js
index 517f78e4..bcca1415 100644
--- a/src/views/design/DesignRegister3.js
+++ b/src/views/design/DesignRegister3.js
@@ -1,16 +1,31 @@
-import { useRef, useState, useEffect } from 'react'
-import { Fragment } from 'react'
-import Wizard from '@components/wizard'
-import Address from '../forms/wizard/steps-with-validation/Address'
-import SocialLinks from '../forms/wizard/steps-with-validation/SocialLinks'
-import PersonalInfo from '../forms/wizard/steps-with-validation/PersonalInfo'
-import AccountDetails from '../forms/wizard/steps-with-validation/AccountDetails'
-import { Card, CardBody, CardTitle, CardText, Form, FormGroup, Label, 
-  Input, CustomInput, Button, Row, Col,
-  Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
-import '@styles/base/pages/page-auth.scss'
-import { Check, X } from 'react-feather'
-import '../../assets/css/custom.css'
+import { useRef, useState, useEffect } from 'react';
+import { Fragment } from 'react';
+import Wizard from '@core@components/wizard';
+import Address from '../forms/wizard/steps-with-validation/Address';
+import SocialLinks from '../forms/wizard/steps-with-validation/SocialLinks';
+import PersonalInfo from '../forms/wizard/steps-with-validation/PersonalInfo';
+import AccountDetails from '../forms/wizard/steps-with-validation/AccountDetails';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  CardText,
+  Form,
+  FormGroup,
+  Label,
+  Input,
+  CustomInput,
+  Button,
+  Row,
+  Col,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from 'reactstrap';
+import '@styles/base/pages/page-auth.scss';
+import { Check, X } from 'react-feather';
+import '../../assets/css/custom.css';
 
 const DesignRegister3 = () => {
   const [formModal, setFormModal] = useState(false);
@@ -27,7 +42,11 @@ const DesignRegister3 = () => {
                       <FormGroup tag={Col} md='12' className='mb-0'>
                         <div className='content-header'>
                           <h5>비밀번호 찾기</h5>
-                          <p className='mb-1'>회원정보에 등록한 이름/휴대전화 번호와 입력한 이름/휴대전화 번호가 같아야, 인증번호를 받을 수 있습니다.</p>        
+                          <p className='mb-1'>
+                            회원정보에 등록한 이름/휴대전화 번호와 입력한
+                            이름/휴대전화 번호가 같아야, 인증번호를 받을 수
+                            있습니다.
+                          </p>
                         </div>
                       </FormGroup>
                       <FormGroup tag={Col} md='6'>
@@ -35,11 +54,7 @@ const DesignRegister3 = () => {
                           <span className='necessary'>*</span>ID
                         </Label>
                         <div className=''>
-                          <Input
-                          name='test'
-                          id='test'
-                          placeholder='홍길동'
-                        />
+                          <Input name='test' id='test' placeholder='홍길동' />
                         </div>
                       </FormGroup>
                       <FormGroup tag={Col} md='6'>
@@ -47,11 +62,7 @@ const DesignRegister3 = () => {
                           <span className='necessary'>*</span>이름
                         </Label>
                         <div className=''>
-                          <Input
-                          name='test'
-                          id='test'
-                          placeholder='홍길동'
-                        />
+                          <Input name='test' id='test' placeholder='홍길동' />
                         </div>
                       </FormGroup>
                       <FormGroup tag={Col} md='6'>
@@ -62,7 +73,7 @@ const DesignRegister3 = () => {
                           <Col md='5' xs='12'>
                             <Input type='select' name='select' id='test'>
                               <option>11111</option>
-                              <option>21111</option>                       
+                              <option>21111</option>
                             </Input>
                           </Col>
                           <Col md='7' xs='12'>
@@ -72,24 +83,21 @@ const DesignRegister3 = () => {
                               id='test'
                               placeholder='+82 010-0000-0000'
                             />
-                        </Col>                              
+                          </Col>
                         </div>
                         <div className='user-phone-btn'>
                           {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}
-                            <span className='time'>
-                              남은시간 : 3:00
+                          <span className='time'>남은시간 : 3:00</span>
+                          <Button.Ripple type='button' color='secondary'>
+                            <span className='d-sm-inline-block'>
+                              인증번호 발송
                             </span>
-                            <Button.Ripple                
-                              type='button'
-                              color='secondary'
-                            >
-                            <span className='d-sm-inline-block'>인증번호 발송</span>
                           </Button.Ripple>
                         </div>
                       </FormGroup>
                       <FormGroup tag={Col} md='6'>
                         <Label className='form-label' for='test'>
-                        <span className='necessary'>*</span>인증번호
+                          <span className='necessary'>*</span>인증번호
                         </Label>
                         <div className='input-btn d-flex justify-content-between'>
                           <Input
@@ -97,24 +105,37 @@ const DesignRegister3 = () => {
                             name='test'
                             id='test'
                             placeholder=''
-                          />         
+                          />
                         </div>
                         <div className='user-phone-btn'>
-                        <Button.Ripple type='button' color='secondary'>
-                          <span className='d-sm-inline-block'>인증하기</span>           
-                        </Button.Ripple>
+                          <Button.Ripple type='button' color='secondary'>
+                            <span className='d-sm-inline-block'>인증하기</span>
+                          </Button.Ripple>
                         </div>
                       </FormGroup>
-                    </Row>  
+                    </Row>
                     <div className='d-flex justify-content-between'>
-                      <Button.Ripple type='button' color='dark' className='btn-prev' >
-                        <span className='align-middle d-sm-inline-block'>취소</span>
+                      <Button.Ripple
+                        type='button'
+                        color='dark'
+                        className='btn-prev'
+                      >
+                        <span className='align-middle d-sm-inline-block'>
+                          취소
+                        </span>
                       </Button.Ripple>
-                      <Button.Ripple type='button' color='primary' className='btn-next' onClick={() => setFormModal(!formModal)}>
-                        <span className='align-middle d-sm-inline-block'>완료</span>
+                      <Button.Ripple
+                        type='button'
+                        color='primary'
+                        className='btn-next'
+                        onClick={() => setFormModal(!formModal)}
+                      >
+                        <span className='align-middle d-sm-inline-block'>
+                          완료
+                        </span>
                       </Button.Ripple>
                     </div>
-                  </Form> 
+                  </Form>
                 </Fragment>
               </CardBody>
             </Card>
@@ -129,18 +150,24 @@ const DesignRegister3 = () => {
                 </ModalHeader>
                 <ModalBody>
                   <div class='modal-box text-center'>
-                   <p className='mb-1'><Check size={40} className='text-success' /></p>
-                   <p className='ti'>비밀번호 찾기 완료</p>
-                   <p className='txt'>새로운 비밀번호를 입력해 주세요.</p>
+                    <p className='mb-1'>
+                      <Check size={40} className='text-success' />
+                    </p>
+                    <p className='ti'>비밀번호 찾기 완료</p>
+                    <p className='txt'>새로운 비밀번호를 입력해 주세요.</p>
                   </div>
                   <Row>
                     <FormGroup tag={Col} md='12'>
-                      <Label className='form-label' for='test'>비밀번호</Label>
-                      <Input type='password' name='test' id='test'/>
+                      <Label className='form-label' for='test'>
+                        비밀번호
+                      </Label>
+                      <Input type='password' name='test' id='test' />
                     </FormGroup>
                     <FormGroup tag={Col} md='12'>
-                      <Label className='form-label' for='test'>비밀번호 확인</Label>
-                      <Input type='password' name='test' id='test'/>
+                      <Label className='form-label' for='test'>
+                        비밀번호 확인
+                      </Label>
+                      <Input type='password' name='test' id='test' />
                     </FormGroup>
                   </Row>
                   {/* <div class='modal-box text-center'>
@@ -175,7 +202,7 @@ const DesignRegister3 = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default DesignRegister3;
diff --git a/src/views/design/DesignSample.js b/src/views/design/DesignSample.js
index 03b39063..b9498567 100644
--- a/src/views/design/DesignSample.js
+++ b/src/views/design/DesignSample.js
@@ -2,7 +2,7 @@
 import { Fragment, useContext, useEffect } from 'react';
 
 // ** Custom Components
-import Breadcrumbs from '@components/breadcrumbs';
+import Breadcrumbs from '@core@components/breadcrumbs';
 
 // ** Third Party Components
 import { Row, Col } from 'reactstrap';
diff --git a/src/views/design/mypage/airframe/DesignAir1.js b/src/views/design/mypage/airframe/DesignAir1.js
index e6315e58..74578e7b 100644
--- a/src/views/design/mypage/airframe/DesignAir1.js
+++ b/src/views/design/mypage/airframe/DesignAir1.js
@@ -1,167 +1,295 @@
-import { useState } from 'react'
-import Repeater from '@components/repeater'
-import { Row, Col, Card, CardHeader, CardBody, Form, FormGroup, Label, Input, Button, CustomInput } from 'reactstrap'
-import { X, Plus, ArrowLeftCircle, Folder, ChevronsRight, ChevronRight, List } from 'react-feather'
-import '../../../../assets/css/custom.css'
-  
-const DesignAir1 = () => {
+import { useState } from 'react';
+import Repeater from '@core@components/repeater';
+import {
+  Row,
+  Col,
+  Card,
+  CardHeader,
+  CardBody,
+  Form,
+  FormGroup,
+  Label,
+  Input,
+  Button,
+  CustomInput
+} from 'reactstrap';
+import {
+  X,
+  Plus,
+  ArrowLeftCircle,
+  Folder,
+  ChevronsRight,
+  ChevronRight,
+  List
+} from 'react-feather';
+import '../../../../assets/css/custom.css';
 
+const DesignAir1 = () => {
   return (
     <div className='pal-card'>
       <div className='pal-card-header'>
         <div>
-            <h3>기체 등록 관리</h3>
+          <h3>기체 등록 관리</h3>
         </div>
         <div>
-        <Button.Ripple color='danger' className='btn-icon'><X size={18} /></Button.Ripple>
+          <Button.Ripple color='danger' className='btn-icon'>
+            <X size={18} />
+          </Button.Ripple>
         </div>
       </div>
-    <Row className='pal-card-box-many'>
-      <Col lg='4'>           
-        <Card>    
-        <CardBody className='pal-card-body'>
-            <div className="search-cont search-info">
+      <Row className='pal-card-box-many'>
+        <Col lg='4'>
+          <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>그룹 목록</h4>
                   </div>
                 </div>
-              <div className='d-flex align-items-center'>
-                <Button.Ripple className='mr-1' color='primary' size='sm'>최상단 메뉴 추가</Button.Ripple>
-                <Button.Ripple className='mr-1' color='primary' size='sm'>메뉴 추가</Button.Ripple>
-                <Button.Ripple className='' color='danger' size='sm'>삭제</Button.Ripple>
+                <div className='d-flex align-items-center'>
+                  <Button.Ripple className='mr-1' color='primary' size='sm'>
+                    최상단 메뉴 추가
+                  </Button.Ripple>
+                  <Button.Ripple className='mr-1' color='primary' size='sm'>
+                    메뉴 추가
+                  </Button.Ripple>
+                  <Button.Ripple className='' color='danger' size='sm'>
+                    삭제
+                  </Button.Ripple>
+                </div>
+                <div className='tree-menu'>
+                  <ul className='tree-menu-list'>
+                    <li className='folder'>
+                      <div>
+                        <span>기초 정보 관리</span>
+                      </div>
+                      <ul>
+                        <li className='folder'>
+                          <div>
+                            <span>그룹 관리</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>그룹 목록</span>
+                              </div>
+                            </li>
+                            <li>
+                              <div>
+                                <span>승인 관리</span>
+                              </div>
+                            </li>
+                            <li>
+                              <div>
+                                <span>관리자 관리</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                        <li className='folder'>
+                          <div>
+                            <span>기체 관리</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>기체 목록</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </li>
+                    <li className='folder'>
+                      <div>
+                        <span>시스템 관리</span>
+                      </div>
+                      <ul>
+                        <li className='folder'>
+                          <div>
+                            <span>코드 정보 관리</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>코드 관리</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                        <li className='folder'>
+                          <div>
+                            <span>메뉴/권한 관리</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>메뉴 관리</span>
+                              </div>
+                            </li>
+                            <li>
+                              <div>
+                                <span>권한 관리</span>
+                              </div>
+                            </li>
+                            <li>
+                              <div>
+                                <span>권한 별 메뉴 관리</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                        <li className='folder'>
+                          <div>
+                            <span>사용자 관리</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>사용자 관리</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </li>
+                    <li className='folder'>
+                      <div>
+                        <span>통계</span>
+                      </div>
+                      <ul>
+                        <li className='folder'>
+                          <div>
+                            <span>비행 통계</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>비행 통계 차트</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                        <li className='folder'>
+                          <div>
+                            <span>기체 통계</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>기체 통계 차트</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
               </div>
-              <div className="tree-menu">
-                <ul className="tree-menu-list">
-                  <li className="folder"><div><span>기초 정보 관리</span></div>
-                    <ul>
-                      <li className="folder"><div><span>그룹 관리</span></div>
-                        <ul>
-                          <li><div><span>그룹 목록</span></div></li>
-                          <li><div><span>승인 관리</span></div></li>
-                          <li><div><span>관리자 관리</span></div></li>
-                        </ul>
-                      </li>
-                      <li className="folder"><div><span>기체 관리</span></div>
-                        <ul>
-                          <li><div><span>기체 목록</span></div></li>
-                        </ul>
-                      </li>
-                    </ul>
-                  </li>
-                  <li className="folder"><div><span>시스템 관리</span></div>
-                    <ul>
-                      <li className="folder"><div><span>코드 정보 관리</span></div>
-                        <ul>
-                          <li><div><span>코드 관리</span></div></li>
-                        </ul>
-                      </li>
-                      <li className="folder"><div><span>메뉴/권한 관리</span></div>
-                        <ul>
-                          <li><div><span>메뉴 관리</span></div></li>
-                          <li><div><span>권한 관리</span></div></li>
-                          <li><div><span>권한 별 메뉴 관리</span></div></li>
-                        </ul>
-                      </li>
-                      <li className="folder"><div><span>사용자 관리</span></div>
-                        <ul>
-                          <li><div><span>사용자 관리</span></div></li>
-                        </ul>
-                      </li>
-                    </ul>
-                  </li>
-                  <li className="folder"><div><span>통계</span></div>
-                    <ul>
-                      <li className="folder"><div><span>비행 통계</span></div>
-                        <ul>
-                          <li><div><span>비행 통계 차트</span></div></li>
-                        </ul>
-                      </li>
-                      <li className="folder"><div><span>기체 통계</span></div>
-                        <ul>
-                          <li><div><span>기체 통계 차트</span></div></li>
-                        </ul>
-                      </li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>              
-            </div>  
-          </CardBody>
-        </Card>
-      </Col>
-      <Col lg='8'>           
-        <Card>    
-        <CardBody className='pal-card-body'>
-            <div className="search-cont search-info">
+            </CardBody>
+          </Card>
+        </Col>
+        <Col lg='8'>
+          <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>기체 목록</h4>
                   </div>
-                  <div className='final'><span className='mr-2'>최종 수정자 : 홍길동</span><span>최종 수정일자 : 2020-01-01</span></div>
+                  <div className='final'>
+                    <span className='mr-2'>최종 수정자 : 홍길동</span>
+                    <span>최종 수정일자 : 2020-01-01</span>
+                  </div>
                 </div>
-              <dl>
-                <dt>
-                  <div className='search-info-box'>
-                    <Row>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>메뉴 ID</Label>
-                          <Input type='text' id='test' size='sm' placeholder='' />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>메뉴 명</Label>
-                          <Input type='text' id='test' size='sm' placeholder='' />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>메뉴 URL</Label>
-                          <Input type='text' id='test' size='sm' placeholder='' />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='groupconfirm'>표출 여부</Label>
-                          <Input type='select' id='test' size='sm' >
+                <dl>
+                  <dt>
+                    <div className='search-info-box'>
+                      <Row>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='test'>메뉴 ID</Label>
+                            <Input
+                              type='text'
+                              id='test'
+                              size='sm'
+                              placeholder=''
+                            />
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='test'>메뉴 명</Label>
+                            <Input
+                              type='text'
+                              id='test'
+                              size='sm'
+                              placeholder=''
+                            />
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='test'>메뉴 URL</Label>
+                            <Input
+                              type='text'
+                              id='test'
+                              size='sm'
+                              placeholder=''
+                            />
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='groupconfirm'>표출 여부</Label>
+                            <Input type='select' id='test' size='sm'>
                               <option>표출</option>
-                              <option>미표출</option>                       
-                          </Input>
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>정렬 순서</Label>
-                          <Input type='select' id='test' size='sm' >
+                              <option>미표출</option>
+                            </Input>
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='test'>정렬 순서</Label>
+                            <Input type='select' id='test' size='sm'>
                               <option>1</option>
-                              <option>2</option>       
-                              <option>3</option>                   
-                          </Input>
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>비고</Label>
-                          <Input type='text' id='test' size='sm' placeholder='' />
-                        </FormGroup>
-                      </Col>
-                    </Row>
-                  </div>
-                </dt>                                             
-              </dl>
-              <div className='d-flex align-items-center'>
-                <Button.Ripple className='mr-1' color='primary' size='sm'>저장</Button.Ripple>
-                <Button.Ripple className='' color='danger' size='sm'>삭제</Button.Ripple>
-              </div>  
-            </div>  
-          </CardBody>
-        </Card>
-      </Col>    
-    </Row>
-  </div>  
-  )
-}
+                              <option>2</option>
+                              <option>3</option>
+                            </Input>
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='test'>비고</Label>
+                            <Input
+                              type='text'
+                              id='test'
+                              size='sm'
+                              placeholder=''
+                            />
+                          </FormGroup>
+                        </Col>
+                      </Row>
+                    </div>
+                  </dt>
+                </dl>
+                <div className='d-flex align-items-center'>
+                  <Button.Ripple className='mr-1' color='primary' size='sm'>
+                    저장
+                  </Button.Ripple>
+                  <Button.Ripple className='' color='danger' size='sm'>
+                    삭제
+                  </Button.Ripple>
+                </div>
+              </div>
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+};
 
-export default DesignAir1
+export default DesignAir1;
diff --git a/src/views/design/sys/code/DesignCode5.js b/src/views/design/sys/code/DesignCode5.js
index 49821516..7ac4aa82 100644
--- a/src/views/design/sys/code/DesignCode5.js
+++ b/src/views/design/sys/code/DesignCode5.js
@@ -1,111 +1,165 @@
-import { useState } from 'react'
-import Repeater from '@components/repeater'
-import { Row, Col, Card, CardHeader, CardBody, Form, FormGroup, Label, Input, Button } from 'reactstrap'
-import { X, Plus, ArrowLeftCircle } from 'react-feather'
-import '../../../../assets/css/custom.css'
-  
+import { useState } from 'react';
+import Repeater from '@core@components/repeater';
+import {
+  Row,
+  Col,
+  Card,
+  CardHeader,
+  CardBody,
+  Form,
+  FormGroup,
+  Label,
+  Input,
+  Button
+} from 'reactstrap';
+import { X, Plus, ArrowLeftCircle } from 'react-feather';
+import '../../../../assets/css/custom.css';
+
 const DesignCode5 = () => {
-  const [count, setCount] = useState(1)
+  const [count, setCount] = useState(1);
 
   const increaseCount = () => {
-    setCount(count + 1)
-  }
+    setCount(count + 1);
+  };
 
   const deleteForm = e => {
-    e.preventDefault()
-    e.target.closest('form').remove()
-  }
+    e.preventDefault();
+    e.target.closest('form').remove();
+  };
 
   return (
     <div className='pal-card'>
       <div className='pal-card-header'>
         <div>
-            <h3>코드 관리</h3>
+          <h3>코드 관리</h3>
         </div>
         <div>
-        <Button.Ripple color='danger' className='btn-icon'><X size={18} /></Button.Ripple>
+          <Button.Ripple color='danger' className='btn-icon'>
+            <X size={18} />
+          </Button.Ripple>
         </div>
       </div>
-    <Row>
-      <Col>           
-        <Card>    
-        <CardBody className='pal-card-body'>
-            <div className="search-cont search-info">
+      <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>코드 관리 상세정보</h4>
                   </div>
-                  <div className='final'><span className='mr-2'>최종 수정자 : 홍길동</span><span>최종 수정일자 : 2020-01-01</span></div>
+                  <div className='final'>
+                    <span className='mr-2'>최종 수정자 : 홍길동</span>
+                    <span>최종 수정일자 : 2020-01-01</span>
+                  </div>
                 </div>
-              <dl>
-                <dt>
-                  <div className='search-info-ti d-flex justify-content-between'>
-                    <h4 className="ti"><span className='necessary'>*</span>필수 입력 항목</h4>
-                  </div> 
-                  <div className='search-info-box count-box'>
-                     <CardBody className='pd-0'>
+                <dl>
+                  <dt>
+                    <div className='search-info-ti d-flex justify-content-between'>
+                      <h4 className='ti'>
+                        <span className='necessary'>*</span>필수 입력 항목
+                      </h4>
+                    </div>
+                    <div className='search-info-box count-box'>
+                      <CardBody className='pd-0'>
                         <Row>
-                        <Col xs={3} md={3} xl={3}>
-                          <span className='sm-ti'><span className='necessary'>*</span>코드 ID</span>
-                        </Col>
-                        <Col xs={3} md={3} xl={3}>
-                          <span className='sm-ti'><span className='necessary'>*</span>코드 명</span>
-                        </Col>
-                        <Col xs={4} md={4} xl={4}>
-                          <span className='sm-ti'><span className='necessary'>*</span>비고</span>
-                        </Col>
+                          <Col xs={3} md={3} xl={3}>
+                            <span className='sm-ti'>
+                              <span className='necessary'>*</span>코드 ID
+                            </span>
+                          </Col>
+                          <Col xs={3} md={3} xl={3}>
+                            <span className='sm-ti'>
+                              <span className='necessary'>*</span>코드 명
+                            </span>
+                          </Col>
+                          <Col xs={4} md={4} xl={4}>
+                            <span className='sm-ti'>
+                              <span className='necessary'>*</span>비고
+                            </span>
+                          </Col>
                         </Row>
                         <Repeater count={count}>
-                        {i => (
-                          <Form key={i}>
-                            <Row className='justify-content-between align-items-center'>
-                              <Col xs={3} md={3} xl={3}>
-                                <FormGroup className='form-label-group'>
-                                  <Label for={`test01-${i}`}>코드 ID</Label>
-                                  <Input type='text' id={`test01-${i}`} size='sm'>          
-                                </Input>
-                                </FormGroup>
-                              </Col>
-                              <Col xs={3} md={3} xl={3}>
-                                <FormGroup className='form-label-group'>
-                                  <Label for={`test02-${i}`}>코드 명</Label>
-                                  <Input type='text' id={`test02-${i}`} size='sm'> 
-                                </Input>
-                                </FormGroup>
-                              </Col>
-                              <Col xs={4} md={4} xl={4}>
-                                <FormGroup className='form-label-group'>
-                                  <Label for={`test03-${i}`}>비고</Label>
-                                  <Input type='text' id={`test03-${i}`} size='sm'>      
-                                </Input>
-                                </FormGroup>
-                              </Col>
-                              <Col xs={2} md={2} xl={2} className='count-del-btn'>
-                                <Button.Ripple color='danger' className='text-nowrap px-1' onClick={deleteForm} outline>
-                                  <X size={14} className='mr-50' />
-                                  <span>삭제</span>
-                                </Button.Ripple>
-                              </Col>
-                            </Row>
-                          </Form>
-                        )}
-                      </Repeater>
-                    </CardBody>                  
-                  </div>
-                </dt>                                             
-              </dl>
-              <div className='d-flex align-items-center'>
-                <Button.Ripple className='mr-1' color='primary' size='sm' onClick={increaseCount}>+ 추가</Button.Ripple>
-                <Button.Ripple className='mr-1' color='primary' size='sm'>저장</Button.Ripple>
-                <Button.Ripple className='mr-1' color='secondary' size='sm'>목록</Button.Ripple>
-              </div>  
-            </div>  
-          </CardBody>
-        </Card>
-      </Col>
-    </Row>
-  </div>  
-  )
-}
+                          {i => (
+                            <Form key={i}>
+                              <Row className='justify-content-between align-items-center'>
+                                <Col xs={3} md={3} xl={3}>
+                                  <FormGroup className='form-label-group'>
+                                    <Label for={`test01-${i}`}>코드 ID</Label>
+                                    <Input
+                                      type='text'
+                                      id={`test01-${i}`}
+                                      size='sm'
+                                    ></Input>
+                                  </FormGroup>
+                                </Col>
+                                <Col xs={3} md={3} xl={3}>
+                                  <FormGroup className='form-label-group'>
+                                    <Label for={`test02-${i}`}>코드 명</Label>
+                                    <Input
+                                      type='text'
+                                      id={`test02-${i}`}
+                                      size='sm'
+                                    ></Input>
+                                  </FormGroup>
+                                </Col>
+                                <Col xs={4} md={4} xl={4}>
+                                  <FormGroup className='form-label-group'>
+                                    <Label for={`test03-${i}`}>비고</Label>
+                                    <Input
+                                      type='text'
+                                      id={`test03-${i}`}
+                                      size='sm'
+                                    ></Input>
+                                  </FormGroup>
+                                </Col>
+                                <Col
+                                  xs={2}
+                                  md={2}
+                                  xl={2}
+                                  className='count-del-btn'
+                                >
+                                  <Button.Ripple
+                                    color='danger'
+                                    className='text-nowrap px-1'
+                                    onClick={deleteForm}
+                                    outline
+                                  >
+                                    <X size={14} className='mr-50' />
+                                    <span>삭제</span>
+                                  </Button.Ripple>
+                                </Col>
+                              </Row>
+                            </Form>
+                          )}
+                        </Repeater>
+                      </CardBody>
+                    </div>
+                  </dt>
+                </dl>
+                <div className='d-flex align-items-center'>
+                  <Button.Ripple
+                    className='mr-1'
+                    color='primary'
+                    size='sm'
+                    onClick={increaseCount}
+                  >
+                    + 추가
+                  </Button.Ripple>
+                  <Button.Ripple className='mr-1' color='primary' size='sm'>
+                    저장
+                  </Button.Ripple>
+                  <Button.Ripple className='mr-1' color='secondary' size='sm'>
+                    목록
+                  </Button.Ripple>
+                </div>
+              </div>
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+};
 
-export default DesignCode5
+export default DesignCode5;
diff --git a/src/views/design/sys/menu/DesignMenu1.js b/src/views/design/sys/menu/DesignMenu1.js
index 93152c57..138f9ca1 100644
--- a/src/views/design/sys/menu/DesignMenu1.js
+++ b/src/views/design/sys/menu/DesignMenu1.js
@@ -1,167 +1,295 @@
-import { useState } from 'react'
-import Repeater from '@components/repeater'
-import { Row, Col, Card, CardHeader, CardBody, Form, FormGroup, Label, Input, Button, CustomInput } from 'reactstrap'
-import { X, Plus, ArrowLeftCircle, Folder, ChevronsRight, ChevronRight, List } from 'react-feather'
-import '../../../../assets/css/custom.css'
-  
-const DesignMenu1 = () => {
+import { useState } from 'react';
+import Repeater from '@core@components/repeater';
+import {
+  Row,
+  Col,
+  Card,
+  CardHeader,
+  CardBody,
+  Form,
+  FormGroup,
+  Label,
+  Input,
+  Button,
+  CustomInput
+} from 'reactstrap';
+import {
+  X,
+  Plus,
+  ArrowLeftCircle,
+  Folder,
+  ChevronsRight,
+  ChevronRight,
+  List
+} from 'react-feather';
+import '../../../../assets/css/custom.css';
 
+const DesignMenu1 = () => {
   return (
     <div className='pal-card'>
       <div className='pal-card-header'>
         <div>
-            <h3>메뉴 관리</h3>
+          <h3>메뉴 관리</h3>
         </div>
         <div>
-        <Button.Ripple color='danger' className='btn-icon'><X size={18} /></Button.Ripple>
+          <Button.Ripple color='danger' className='btn-icon'>
+            <X size={18} />
+          </Button.Ripple>
         </div>
       </div>
-    <Row className='pal-card-box-many'>
-      <Col lg='4'>           
-        <Card>    
-        <CardBody className='pal-card-body'>
-            <div className="search-cont search-info">
+      <Row className='pal-card-box-many'>
+        <Col lg='4'>
+          <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>메뉴 목록</h4>
                   </div>
                 </div>
-              <div className='d-flex align-items-center'>
-                <Button.Ripple className='mr-1' color='primary' size='sm'>최상단 메뉴 추가</Button.Ripple>
-                <Button.Ripple className='mr-1' color='primary' size='sm'>메뉴 추가</Button.Ripple>
-                <Button.Ripple className='' color='danger' size='sm'>삭제</Button.Ripple>
+                <div className='d-flex align-items-center'>
+                  <Button.Ripple className='mr-1' color='primary' size='sm'>
+                    최상단 메뉴 추가
+                  </Button.Ripple>
+                  <Button.Ripple className='mr-1' color='primary' size='sm'>
+                    메뉴 추가
+                  </Button.Ripple>
+                  <Button.Ripple className='' color='danger' size='sm'>
+                    삭제
+                  </Button.Ripple>
+                </div>
+                <div className='tree-menu'>
+                  <ul className='tree-menu-list'>
+                    <li className='folder'>
+                      <div>
+                        <span>기초 정보 관리</span>
+                      </div>
+                      <ul>
+                        <li className='folder'>
+                          <div>
+                            <span>그룹 관리</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>그룹 목록</span>
+                              </div>
+                            </li>
+                            <li>
+                              <div>
+                                <span>승인 관리</span>
+                              </div>
+                            </li>
+                            <li>
+                              <div>
+                                <span>관리자 관리</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                        <li className='folder'>
+                          <div>
+                            <span>기체 관리</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>기체 목록</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </li>
+                    <li className='folder'>
+                      <div>
+                        <span>시스템 관리</span>
+                      </div>
+                      <ul>
+                        <li className='folder'>
+                          <div>
+                            <span>코드 정보 관리</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>코드 관리</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                        <li className='folder'>
+                          <div>
+                            <span>메뉴/권한 관리</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>메뉴 관리</span>
+                              </div>
+                            </li>
+                            <li>
+                              <div>
+                                <span>권한 관리</span>
+                              </div>
+                            </li>
+                            <li>
+                              <div>
+                                <span>권한 별 메뉴 관리</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                        <li className='folder'>
+                          <div>
+                            <span>사용자 관리</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>사용자 관리</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </li>
+                    <li className='folder'>
+                      <div>
+                        <span>통계</span>
+                      </div>
+                      <ul>
+                        <li className='folder'>
+                          <div>
+                            <span>비행 통계</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>비행 통계 차트</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                        <li className='folder'>
+                          <div>
+                            <span>기체 통계</span>
+                          </div>
+                          <ul>
+                            <li>
+                              <div>
+                                <span>기체 통계 차트</span>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
               </div>
-              <div className="tree-menu">
-                <ul className="tree-menu-list">
-                  <li className="folder"><div><span>기초 정보 관리</span></div>
-                    <ul>
-                      <li className="folder"><div><span>그룹 관리</span></div>
-                        <ul>
-                          <li><div><span>그룹 목록</span></div></li>
-                          <li><div><span>승인 관리</span></div></li>
-                          <li><div><span>관리자 관리</span></div></li>
-                        </ul>
-                      </li>
-                      <li className="folder"><div><span>기체 관리</span></div>
-                        <ul>
-                          <li><div><span>기체 목록</span></div></li>
-                        </ul>
-                      </li>
-                    </ul>
-                  </li>
-                  <li className="folder"><div><span>시스템 관리</span></div>
-                    <ul>
-                      <li className="folder"><div><span>코드 정보 관리</span></div>
-                        <ul>
-                          <li><div><span>코드 관리</span></div></li>
-                        </ul>
-                      </li>
-                      <li className="folder"><div><span>메뉴/권한 관리</span></div>
-                        <ul>
-                          <li><div><span>메뉴 관리</span></div></li>
-                          <li><div><span>권한 관리</span></div></li>
-                          <li><div><span>권한 별 메뉴 관리</span></div></li>
-                        </ul>
-                      </li>
-                      <li className="folder"><div><span>사용자 관리</span></div>
-                        <ul>
-                          <li><div><span>사용자 관리</span></div></li>
-                        </ul>
-                      </li>
-                    </ul>
-                  </li>
-                  <li className="folder"><div><span>통계</span></div>
-                    <ul>
-                      <li className="folder"><div><span>비행 통계</span></div>
-                        <ul>
-                          <li><div><span>비행 통계 차트</span></div></li>
-                        </ul>
-                      </li>
-                      <li className="folder"><div><span>기체 통계</span></div>
-                        <ul>
-                          <li><div><span>기체 통계 차트</span></div></li>
-                        </ul>
-                      </li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>              
-            </div>  
-          </CardBody>
-        </Card>
-      </Col>
-      <Col lg='8'>           
-        <Card>    
-        <CardBody className='pal-card-body'>
-            <div className="search-cont search-info">
+            </CardBody>
+          </Card>
+        </Col>
+        <Col lg='8'>
+          <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>메뉴 상세정보</h4>
                   </div>
-                  <div className='final'><span className='mr-2'>최종 수정자 : 홍길동</span><span>최종 수정일자 : 2020-01-01</span></div>
+                  <div className='final'>
+                    <span className='mr-2'>최종 수정자 : 홍길동</span>
+                    <span>최종 수정일자 : 2020-01-01</span>
+                  </div>
                 </div>
-              <dl>
-                <dt>
-                  <div className='search-info-box'>
-                    <Row>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>메뉴 ID</Label>
-                          <Input type='text' id='test' size='sm' placeholder='' />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>메뉴 명</Label>
-                          <Input type='text' id='test' size='sm' placeholder='' />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>메뉴 URL</Label>
-                          <Input type='text' id='test' size='sm' placeholder='' />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='groupconfirm'>표출 여부</Label>
-                          <Input type='select' id='test' size='sm' >
+                <dl>
+                  <dt>
+                    <div className='search-info-box'>
+                      <Row>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='test'>메뉴 ID</Label>
+                            <Input
+                              type='text'
+                              id='test'
+                              size='sm'
+                              placeholder=''
+                            />
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='test'>메뉴 명</Label>
+                            <Input
+                              type='text'
+                              id='test'
+                              size='sm'
+                              placeholder=''
+                            />
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='test'>메뉴 URL</Label>
+                            <Input
+                              type='text'
+                              id='test'
+                              size='sm'
+                              placeholder=''
+                            />
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='groupconfirm'>표출 여부</Label>
+                            <Input type='select' id='test' size='sm'>
                               <option>표출</option>
-                              <option>미표출</option>                       
-                          </Input>
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>정렬 순서</Label>
-                          <Input type='select' id='test' size='sm' >
+                              <option>미표출</option>
+                            </Input>
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='test'>정렬 순서</Label>
+                            <Input type='select' id='test' size='sm'>
                               <option>1</option>
-                              <option>2</option>       
-                              <option>3</option>                   
-                          </Input>
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' md='4' sm='12'>                           
-                        <FormGroup>
-                          <Label for='test'>비고</Label>
-                          <Input type='text' id='test' size='sm' placeholder='' />
-                        </FormGroup>
-                      </Col>
-                    </Row>
-                  </div>
-                </dt>                                             
-              </dl>
-              <div className='d-flex align-items-center'>
-                <Button.Ripple className='mr-1' color='primary' size='sm'>저장</Button.Ripple>
-                <Button.Ripple className='' color='danger' size='sm'>삭제</Button.Ripple>
-              </div>  
-            </div>  
-          </CardBody>
-        </Card>
-      </Col>    
-    </Row>
-  </div>  
-  )
-}
+                              <option>2</option>
+                              <option>3</option>
+                            </Input>
+                          </FormGroup>
+                        </Col>
+                        <Col className='list-input' md='4' sm='12'>
+                          <FormGroup>
+                            <Label for='test'>비고</Label>
+                            <Input
+                              type='text'
+                              id='test'
+                              size='sm'
+                              placeholder=''
+                            />
+                          </FormGroup>
+                        </Col>
+                      </Row>
+                    </div>
+                  </dt>
+                </dl>
+                <div className='d-flex align-items-center'>
+                  <Button.Ripple className='mr-1' color='primary' size='sm'>
+                    저장
+                  </Button.Ripple>
+                  <Button.Ripple className='' color='danger' size='sm'>
+                    삭제
+                  </Button.Ripple>
+                </div>
+              </div>
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+};
 
-export default DesignMenu1
+export default DesignMenu1;
diff --git a/src/views/design/sys/menu/DesignMenu2.js b/src/views/design/sys/menu/DesignMenu2.js
index 6aca6349..9080ced4 100644
--- a/src/views/design/sys/menu/DesignMenu2.js
+++ b/src/views/design/sys/menu/DesignMenu2.js
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import Repeater from '@components/repeater';
+import Repeater from '@core@components/repeater';
 import {
   Row,
   Col,
diff --git a/src/views/design/sys/menu/DesignMenu3.js b/src/views/design/sys/menu/DesignMenu3.js
index dcf27e7f..d23bd94f 100644
--- a/src/views/design/sys/menu/DesignMenu3.js
+++ b/src/views/design/sys/menu/DesignMenu3.js
@@ -1,147 +1,229 @@
-import { useState } from 'react'
-import Repeater from '@components/repeater'
-import { Row, Col, Card, CardHeader, CardBody, Form, FormGroup, Label, Input, Button, CustomInput } from 'reactstrap'
-import { X, Plus, ArrowLeftCircle, Folder, ChevronsRight, ChevronRight, List } from 'react-feather'
-import '../../../../assets/css/custom.css'
-  
-const DesignMenu3 = () => {
+import { useState } from 'react';
+import Repeater from '@core@components/repeater';
+import {
+  Row,
+  Col,
+  Card,
+  CardHeader,
+  CardBody,
+  Form,
+  FormGroup,
+  Label,
+  Input,
+  Button,
+  CustomInput
+} from 'reactstrap';
+import {
+  X,
+  Plus,
+  ArrowLeftCircle,
+  Folder,
+  ChevronsRight,
+  ChevronRight,
+  List
+} from 'react-feather';
+import '../../../../assets/css/custom.css';
 
+const DesignMenu3 = () => {
   return (
     <div className='pal-card'>
       <div className='pal-card-header'>
         <div>
-            <h3>권한 목록</h3>
+          <h3>권한 목록</h3>
         </div>
         <div>
-        <Button.Ripple color='danger' className='btn-icon'><X size={18} /></Button.Ripple>
+          <Button.Ripple color='danger' className='btn-icon'>
+            <X size={18} />
+          </Button.Ripple>
         </div>
       </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>
-          </div>
-          <div>
-            <Button.Ripple color='primary' size='sm'>
-              검색
-            </Button.Ripple>
-            {/* <Button.Ripple color='danger' className='btn-icon'><X size={18} /></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='test'
-                                size='sm'
-                                placeholder='그룹명을 입력하세요'
-                              />
-                              <Label for='test'>그룹명</Label>
-                            </FormGroup>
-                          </Col>
-                        </Row>
+      <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>
+                <Button.Ripple color='primary' size='sm'>
+                  검색
+                </Button.Ripple>
+                {/* <Button.Ripple color='danger' className='btn-icon'><X size={18} /></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='test'
+                                    size='sm'
+                                    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 className=''>
+          <Col lg='12'>
+            <Card>
+              <CardBody className='pal-card-body'>
+                <div className='search-cont'>
+                  <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                    <div>
+                      <h4>메뉴 목록</h4>
+                    </div>
+                    <div>
+                      <Button.Ripple color='primary' size='sm'>
+                        {' '}
+                        저장
+                      </Button.Ripple>
+                      {/* <Button.Ripple color='danger' className='btn-icon'><X size={18} /></Button.Ripple> */}
                     </div>
                   </div>
-                </dt>
-              </dl>
-            </div>
-          </CardBody>
-        </Card>
-      </Col>
-    </Row>
-    </div>
-    <div className='pal-card-box'>
-      <Row className=''>
-        <Col lg='12'>           
-          <Card>    
-            <CardBody className='pal-card-body'>
-              <div className="search-cont">
-                <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
-                  <div>
-                    <h4>메뉴 목록</h4>
-                  </div>
-                  <div>
-                    <Button.Ripple color='primary' size='sm'> 저장</Button.Ripple>
-                    {/* <Button.Ripple color='danger' className='btn-icon'><X size={18} /></Button.Ripple> */}
+                  <div class='tree-menu'>
+                    <ul class='tree-menu-list'>
+                      <li class='folder'>
+                        <span>
+                          <CustomInput inline type='checkbox' id='test05' />
+                          기초 정보 관리
+                        </span>
+                        <ul>
+                          <li class='folder'>
+                            <span>
+                              <CustomInput inline type='checkbox' id='test05' />
+                              그룹 관리
+                            </span>
+                            <ul>
+                              <li>
+                                <span>
+                                  <CustomInput
+                                    inline
+                                    type='checkbox'
+                                    id='test05'
+                                  />
+                                  그룹 목록
+                                </span>
+                              </li>
+                              <li>
+                                <span>
+                                  <CustomInput
+                                    inline
+                                    type='checkbox'
+                                    id='test05'
+                                  />
+                                  승인 관리
+                                </span>
+                              </li>
+                              <li>
+                                <span>
+                                  <CustomInput
+                                    inline
+                                    type='checkbox'
+                                    id='test05'
+                                  />
+                                  관리자 관리
+                                </span>
+                              </li>
+                            </ul>
+                          </li>
+                          <li class='folder'>
+                            <span>기체 관리</span>
+                            <ul>
+                              <li>
+                                <span>기체 목록</span>
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class='folder'>
+                        <span>시스템 관리</span>
+                        <ul>
+                          <li class='folder'>
+                            <span>코드 정보 관리</span>
+                            <ul>
+                              <li>
+                                <span>코드 관리</span>
+                              </li>
+                            </ul>
+                          </li>
+                          <li class='folder'>
+                            <span>메뉴/권한 관리</span>
+                            <ul>
+                              <li>
+                                <span>메뉴 관리</span>
+                              </li>
+                              <li>
+                                <span>권한 관리</span>
+                              </li>
+                              <li>
+                                <span>권한 별 메뉴 관리</span>
+                              </li>
+                            </ul>
+                          </li>
+                          <li class='folder'>
+                            사용자 관리
+                            <ul>
+                              <li>
+                                <span>사용자 관리</span>
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class='folder'>
+                        <span>통계</span>
+                        <ul>
+                          <li class='folder'>
+                            <span>비행 통계</span>
+                            <ul>
+                              <li>
+                                <span>비행 통계 차트</span>
+                              </li>
+                            </ul>
+                          </li>
+                          <li class='folder'>
+                            <span>기체 통계</span>
+                            <ul>
+                              <li>
+                                <span>기체 통계 차트</span>
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                    </ul>
                   </div>
                 </div>
-                <div class="tree-menu">
-                  <ul class="tree-menu-list">
-                    <li class="folder"><span><CustomInput inline type='checkbox' id='test05' />기초 정보 관리</span>
-                      <ul>
-                        <li class="folder"><span><CustomInput inline type='checkbox' id='test05' />그룹 관리</span>
-                          <ul>
-                            <li><span><CustomInput inline type='checkbox' id='test05' />그룹 목록</span></li>
-                            <li><span><CustomInput inline type='checkbox' id='test05' />승인 관리</span></li>
-                            <li><span><CustomInput inline type='checkbox' id='test05' />관리자 관리</span></li>
-                          </ul>
-                        </li>
-                        <li class="folder"><span>기체 관리</span>
-                          <ul>
-                            <li><span>기체 목록</span></li>
-                          </ul>
-                        </li>
-                      </ul>
-                    </li>
-                    <li class="folder"><span>시스템 관리</span>
-                      <ul>
-                        <li class="folder"><span>코드 정보 관리</span>
-                          <ul>
-                            <li><span>코드 관리</span></li>
-                          </ul>
-                        </li>
-                        <li class="folder"><span>메뉴/권한 관리</span>
-                          <ul>
-                            <li><span>메뉴 관리</span></li>
-                            <li><span>권한 관리</span></li>
-                            <li><span>권한 별 메뉴 관리</span></li>
-                          </ul>
-                        </li>
-                        <li class="folder">사용자 관리
-                          <ul>
-                            <li><span>사용자 관리</span></li>
-                          </ul>
-                        </li>
-                      </ul>
-                    </li>
-                    <li class="folder"><span>통계</span>
-                      <ul>
-                        <li class="folder"><span>비행 통계</span>
-                          <ul>
-                            <li><span>비행 통계 차트</span></li>
-                          </ul>
-                        </li>
-                        <li class="folder"><span>기체 통계</span>
-                          <ul>
-                            <li><span>기체 통계 차트</span></li>
-                          </ul>
-                        </li>
-                      </ul>
-                    </li>
-                  </ul>
-                </div>              
-              </div>  
-            </CardBody>
-          </Card>
-        </Col>  
-      </Row>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
     </div>
+  );
+};
 
-  </div>  
-  )
-}
-
-export default DesignMenu3
+export default DesignMenu3;
diff --git a/src/views/extensions/sliders/index.js b/src/views/extensions/sliders/index.js
index e2724e1e..6f767154 100644
--- a/src/views/extensions/sliders/index.js
+++ b/src/views/extensions/sliders/index.js
@@ -1,22 +1,22 @@
-import { Fragment } from 'react'
-import { Row, Col } from 'reactstrap'
-import { useRTL } from '@hooks/useRTL'
-import SliderColors from './SliderColors'
-import SliderValues from './SliderValues'
-import SliderVertical from './SliderVertical'
-import SliderBehaviour from './SliderBehaviour'
-import SliderScalePips from './SliderScalePips'
-import SliderWithInput from './SliderWithInput'
-import SliderBootstrap from './SlidersBootstrap'
-import SliderConnectUpper from './SliderConnectUpper'
-import SliderVerticalLimit from './SliderVerticalLimit'
-import SliderVerticalTooltip from './SliderVerticalTooltips'
-import ExtensionsHeader from '@components/extensions-header'
+import { Fragment } from 'react';
+import { Row, Col } from 'reactstrap';
+import { useRTL } from '@hooks/useRTL';
+import SliderColors from './SliderColors';
+import SliderValues from './SliderValues';
+import SliderVertical from './SliderVertical';
+import SliderBehaviour from './SliderBehaviour';
+import SliderScalePips from './SliderScalePips';
+import SliderWithInput from './SliderWithInput';
+import SliderBootstrap from './SlidersBootstrap';
+import SliderConnectUpper from './SliderConnectUpper';
+import SliderVerticalLimit from './SliderVerticalLimit';
+import SliderVerticalTooltip from './SliderVerticalTooltips';
+import ExtensionsHeader from '@core@components/extensions-header';
 
-import '@styles/react/libs/noui-slider/noui-slider.scss'
+import '@styles/react/libs/noui-slider/noui-slider.scss';
 
 const Slider = () => {
-  const [isRtl, setIsRtl] = useRTL()
+  const [isRtl, setIsRtl] = useRTL();
 
   return (
     <Fragment>
@@ -61,7 +61,7 @@ const Slider = () => {
         </Col>
       </Row>
     </Fragment>
-  )
-}
+  );
+};
 
-export default Slider
+export default Slider;
diff --git a/src/views/forms/wizard/WizardHorizontal.js b/src/views/forms/wizard/WizardHorizontal.js
index 26ff318f..bbb5bb78 100644
--- a/src/views/forms/wizard/WizardHorizontal.js
+++ b/src/views/forms/wizard/WizardHorizontal.js
@@ -1,14 +1,14 @@
-import { useRef, useState } from 'react'
-import Wizard from '@components/wizard'
-import { ArrowRight } from 'react-feather'
-import Address from './steps-with-validation/Address'
-import SocialLinks from './steps-with-validation/SocialLinks'
-import PersonalInfo from './steps-with-validation/PersonalInfo'
-import AccountDetails from './steps-with-validation/AccountDetails'
+import { useRef, useState } from 'react';
+import Wizard from '@core@components/wizard';
+import { ArrowRight } from 'react-feather';
+import Address from './steps-with-validation/Address';
+import SocialLinks from './steps-with-validation/SocialLinks';
+import PersonalInfo from './steps-with-validation/PersonalInfo';
+import AccountDetails from './steps-with-validation/AccountDetails';
 
 const WizardHorizontal = () => {
-  const [stepper, setStepper] = useState(null)
-  const ref = useRef(null)
+  const [stepper, setStepper] = useState(null);
+  const ref = useRef(null);
 
   const steps = [
     {
@@ -35,13 +35,13 @@ const WizardHorizontal = () => {
       subtitle: 'Add Social Links',
       content: <SocialLinks stepper={stepper} type='wizard-horizontal' />
     }
-  ]
+  ];
 
   return (
     <div className='horizontal-wizard'>
       <Wizard instance={el => setStepper(el)} ref={ref} steps={steps} />
     </div>
-  )
-}
+  );
+};
 
-export default WizardHorizontal
+export default WizardHorizontal;
diff --git a/src/views/forms/wizard/WizardModern.js b/src/views/forms/wizard/WizardModern.js
index 32ee1fe0..a55a505f 100644
--- a/src/views/forms/wizard/WizardModern.js
+++ b/src/views/forms/wizard/WizardModern.js
@@ -1,14 +1,14 @@
-import { useRef, useState } from 'react'
-import Wizard from '@components/wizard'
-import Address from './steps/Address'
-import SocialLinks from './steps/SocialLinks'
-import PersonalInfo from './steps/PersonalInfo'
-import AccountDetails from './steps/AccountDetails'
-import { FileText, User, MapPin, Link } from 'react-feather'
+import { useRef, useState } from 'react';
+import Wizard from '@core@components/wizard';
+import Address from './steps/Address';
+import SocialLinks from './steps/SocialLinks';
+import PersonalInfo from './steps/PersonalInfo';
+import AccountDetails from './steps/AccountDetails';
+import { FileText, User, MapPin, Link } from 'react-feather';
 
 const WizardModern = () => {
-  const [stepper, setStepper] = useState(null)
-  const ref = useRef(null)
+  const [stepper, setStepper] = useState(null);
+  const ref = useRef(null);
 
   const steps = [
     {
@@ -39,7 +39,7 @@ const WizardModern = () => {
       icon: <Link size={18} />,
       content: <SocialLinks stepper={stepper} type='wizard-modern' />
     }
-  ]
+  ];
 
   return (
     <div className='modern-horizontal-wizard'>
@@ -53,7 +53,7 @@ const WizardModern = () => {
         instance={el => setStepper(el)}
       />
     </div>
-  )
-}
+  );
+};
 
-export default WizardModern
+export default WizardModern;
diff --git a/src/views/forms/wizard/WizardModernVertical.js b/src/views/forms/wizard/WizardModernVertical.js
index faf28495..7a931e66 100644
--- a/src/views/forms/wizard/WizardModernVertical.js
+++ b/src/views/forms/wizard/WizardModernVertical.js
@@ -1,14 +1,14 @@
-import { useRef, useState } from 'react'
-import Wizard from '@components/wizard'
-import Address from './steps/Address'
-import SocialLinks from './steps/SocialLinks'
-import PersonalInfo from './steps/PersonalInfo'
-import AccountDetails from './steps/AccountDetails'
-import { FileText, User, MapPin, Link } from 'react-feather'
+import { useRef, useState } from 'react';
+import Wizard from '@core@components/wizard';
+import Address from './steps/Address';
+import SocialLinks from './steps/SocialLinks';
+import PersonalInfo from './steps/PersonalInfo';
+import AccountDetails from './steps/AccountDetails';
+import { FileText, User, MapPin, Link } from 'react-feather';
 
 const WizardModernVertical = () => {
-  const [stepper, setStepper] = useState(null)
-  const ref = useRef(null)
+  const [stepper, setStepper] = useState(null);
+  const ref = useRef(null);
 
   const steps = [
     {
@@ -39,7 +39,7 @@ const WizardModernVertical = () => {
       icon: <Link size={18} />,
       content: <SocialLinks stepper={stepper} type='modern-vertical' />
     }
-  ]
+  ];
 
   return (
     <div className='modern-vertical-wizard'>
@@ -53,7 +53,7 @@ const WizardModernVertical = () => {
         instance={el => setStepper(el)}
       />
     </div>
-  )
-}
+  );
+};
 
-export default WizardModernVertical
+export default WizardModernVertical;
diff --git a/src/views/forms/wizard/WizardVertical.js b/src/views/forms/wizard/WizardVertical.js
index 2e8ee2d3..e1d88c4d 100644
--- a/src/views/forms/wizard/WizardVertical.js
+++ b/src/views/forms/wizard/WizardVertical.js
@@ -1,13 +1,13 @@
-import { useRef, useState } from 'react'
-import Wizard from '@components/wizard'
-import Address from './steps/Address'
-import SocialLinks from './steps/SocialLinks'
-import PersonalInfo from './steps/PersonalInfo'
-import AccountDetails from './steps/AccountDetails'
+import { useRef, useState } from 'react';
+import Wizard from '@core@components/wizard';
+import Address from './steps/Address';
+import SocialLinks from './steps/SocialLinks';
+import PersonalInfo from './steps/PersonalInfo';
+import AccountDetails from './steps/AccountDetails';
 
 const WizardVertical = () => {
-  const [stepper, setStepper] = useState(null)
-  const ref = useRef(null)
+  const [stepper, setStepper] = useState(null);
+  const ref = useRef(null);
 
   const steps = [
     {
@@ -34,7 +34,7 @@ const WizardVertical = () => {
       subtitle: 'Add Social Links',
       content: <SocialLinks stepper={stepper} type='wizard-vertical' />
     }
-  ]
+  ];
 
   return (
     <div className='vertical-wizard'>
@@ -48,7 +48,7 @@ const WizardVertical = () => {
         instance={el => setStepper(el)}
       />
     </div>
-  )
-}
+  );
+};
 
-export default WizardVertical
+export default WizardVertical;
diff --git a/src/views/forms/wizard/index.js b/src/views/forms/wizard/index.js
index bf4b2c4d..c305e127 100644
--- a/src/views/forms/wizard/index.js
+++ b/src/views/forms/wizard/index.js
@@ -1,15 +1,19 @@
-import { Fragment } from 'react'
-import { Row, Col } from 'reactstrap'
-import WizardModern from './WizardModern'
-import WizardVertical from './WizardVertical'
-import WizardHorizontal from './WizardHorizontal'
-import WizardModernVertical from './WizardModernVertical'
-import BreadCrumbs from '@components/breadcrumbs'
+import { Fragment } from 'react';
+import { Row, Col } from 'reactstrap';
+import WizardModern from './WizardModern';
+import WizardVertical from './WizardVertical';
+import WizardHorizontal from './WizardHorizontal';
+import WizardModernVertical from './WizardModernVertical';
+import BreadCrumbs from '@core@components/breadcrumbs';
 
 const Wizard = () => {
   return (
     <Fragment>
-      <BreadCrumbs breadCrumbTitle='Form Wizard' breadCrumbParent='Form' breadCrumbActive='Form Wizard' />
+      <BreadCrumbs
+        breadCrumbTitle='Form Wizard'
+        breadCrumbParent='Form'
+        breadCrumbActive='Form Wizard'
+      />
       <Row>
         <Col sm='12'>
           <WizardHorizontal />
@@ -25,6 +29,6 @@ const Wizard = () => {
         </Col>
       </Row>
     </Fragment>
-  )
-}
-export default Wizard
+  );
+};
+export default Wizard;
diff --git a/src/views/forms/wizard/steps-with-validation/AccountDetails.js b/src/views/forms/wizard/steps-with-validation/AccountDetails.js
index ab579b1f..24f1b9de 100644
--- a/src/views/forms/wizard/steps-with-validation/AccountDetails.js
+++ b/src/views/forms/wizard/steps-with-validation/AccountDetails.js
@@ -1,15 +1,25 @@
-import * as yup from 'yup'
-import { Fragment } from 'react'
-import classnames from 'classnames'
-import { isObjEmpty } from '@utils'
-import { useForm } from 'react-hook-form'
-import { ArrowLeft, ArrowRight } from 'react-feather'
-import { yupResolver } from '@hookform/resolvers/yup'
-import { Form, Label, Input, FormGroup, Row, Col, Button, CustomInput, CardText } from 'reactstrap'
-import AppCollapse from '@components/app-collapse'
-import Select from 'react-select'
-import { selectThemeColors } from '@utils'
-import completeImg from '../../../../assets/images/complete_img.svg'
+import * as yup from 'yup';
+import { Fragment } from 'react';
+import classnames from 'classnames';
+import { isObjEmpty } from '@utils';
+import { useForm } from 'react-hook-form';
+import { ArrowLeft, ArrowRight } from 'react-feather';
+import { yupResolver } from '@hookform/resolvers/yup';
+import {
+  Form,
+  Label,
+  Input,
+  FormGroup,
+  Row,
+  Col,
+  Button,
+  CustomInput,
+  CardText
+} from 'reactstrap';
+import AppCollapse from '@core@components/app-collapse';
+import Select from 'react-select';
+import { selectThemeColors } from '@utils';
+import completeImg from '../../../../assets/images/complete_img.svg';
 
 const AccountDetails = ({ stepper, type }) => {
   const SignupSchema = yup.object().shape({
@@ -26,18 +36,18 @@ const AccountDetails = ({ stepper, type }) => {
       .string()
       .required()
       .oneOf([yup.ref(`password-val-${type}`), null], 'Passwords must match')
-  })
+  });
 
   const { register, errors, handleSubmit, trigger } = useForm({
     resolver: yupResolver(SignupSchema)
-  })
+  });
 
   const onSubmit = () => {
-    trigger()
+    trigger();
     if (isObjEmpty(errors)) {
-      stepper.next()
+      stepper.next();
     }
-  }
+  };
 
   return (
     <Fragment>
@@ -94,14 +104,14 @@ const AccountDetails = ({ stepper, type }) => {
               </Button.Ripple>
             </div>
         </Form> */}
-        {/* ---- 약관동의 끝 */}
+      {/* ---- 약관동의 끝 */}
 
-        {/* 가입정보입력 시작 */}
-       <Form>
+      {/* 가입정보입력 시작 */}
+      <Form>
         <Row>
           <FormGroup tag={Col} md='12' className='mb-0'>
             <div className='content-header'>
-              <h5>가입정보입력</h5>         
+              <h5>가입정보입력</h5>
             </div>
           </FormGroup>
           <FormGroup tag={Col} md='6'>
@@ -110,12 +120,14 @@ const AccountDetails = ({ stepper, type }) => {
             </Label>
             <div className=''>
               <Input
-              name={`username-${type}`}
-              id={`username-${type}`}
-              placeholder='홍길동'
-              innerRef={register({ required: true })}
-              className={classnames({ 'is-invalid': errors[`username-${type}`] })}
-            />
+                name={`username-${type}`}
+                id={`username-${type}`}
+                placeholder='홍길동'
+                innerRef={register({ required: true })}
+                className={classnames({
+                  'is-invalid': errors[`username-${type}`]
+                })}
+              />
             </div>
           </FormGroup>
           <FormGroup tag={Col} md='6'>
@@ -124,12 +136,14 @@ const AccountDetails = ({ stepper, type }) => {
             </Label>
             <div className=''>
               <Input
-              name={`userbirth-${type}`}
-              id={`userbirth-${type}`}
-              placeholder='19950915'
-              innerRef={register({ required: true })}
-              className={classnames({ 'is-invalid': errors[`userbirth-${type}`] })}
-            />
+                name={`userbirth-${type}`}
+                id={`userbirth-${type}`}
+                placeholder='19950915'
+                innerRef={register({ required: true })}
+                className={classnames({
+                  'is-invalid': errors[`userbirth-${type}`]
+                })}
+              />
             </div>
           </FormGroup>
           <FormGroup tag={Col} md='6'>
@@ -137,12 +151,18 @@ const AccountDetails = ({ stepper, type }) => {
               <span className='necessary'>*</span>성별
             </Label>
             <div className=''>
-            <Input type='select' name='select' id='usergender'
-            innerRef={register({ required: true })}
-            className={classnames({ 'is-invalid': errors[`usergender-${type}`] })}>
-              <option>남</option>
-              <option>여</option>          
-            </Input>
+              <Input
+                type='select'
+                name='select'
+                id='usergender'
+                innerRef={register({ required: true })}
+                className={classnames({
+                  'is-invalid': errors[`usergender-${type}`]
+                })}
+              >
+                <option>남</option>
+                <option>여</option>
+              </Input>
             </div>
           </FormGroup>
           <FormGroup tag={Col} md='6'>
@@ -150,12 +170,18 @@ const AccountDetails = ({ stepper, type }) => {
               <span className='necessary'>*</span>국가코드
             </Label>
             <div className=''>
-            <Input type='select' name='select' id='usercountry'
-            innerRef={register({ required: true })}
-            className={classnames({ 'is-invalid': errors[`usercountry-${type}`] })}>
-              <option>1</option>
-              <option>2</option>                       
-            </Input>
+              <Input
+                type='select'
+                name='select'
+                id='usercountry'
+                innerRef={register({ required: true })}
+                className={classnames({
+                  'is-invalid': errors[`usercountry-${type}`]
+                })}
+              >
+                <option>1</option>
+                <option>2</option>
+              </Input>
             </div>
           </FormGroup>
           <FormGroup tag={Col} md='6'>
@@ -163,24 +189,25 @@ const AccountDetails = ({ stepper, type }) => {
               <span className='necessary'>*</span>휴대폰 번호
             </Label>
             <div className='user-phone-btn'>
-               {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}
-                <span className='time'>
-                  남은시간 : 3:00
-                </span>
-                <Button.Ripple                
-                  type='button'
-                  color='secondary'
-                >
+              {/* 발송 버튼을 누르면 남은시간 d-none를 빼주세여~ 그럼나타나여~ */}
+              <span className='time'>남은시간 : 3:00</span>
+              <Button.Ripple type='button' color='secondary'>
                 <span className='d-sm-inline-block'>인증번호 발송</span>
               </Button.Ripple>
             </div>
             <div className='input-btn'>
               <Col md='5' xs='12'>
-                <Input type='select' name='select' id='userphonecountry'
-                innerRef={register({ required: true })}
-                className={classnames({ 'is-invalid': errors[`userphonecountry-${type}`] })}>
+                <Input
+                  type='select'
+                  name='select'
+                  id='userphonecountry'
+                  innerRef={register({ required: true })}
+                  className={classnames({
+                    'is-invalid': errors[`userphonecountry-${type}`]
+                  })}
+                >
                   <option>11111</option>
-                  <option>21111</option>                       
+                  <option>21111</option>
                 </Input>
               </Col>
               <Col md='7' xs='12'>
@@ -190,19 +217,21 @@ const AccountDetails = ({ stepper, type }) => {
                   id={`userphone-${type}`}
                   placeholder='+82 010-0000-0000'
                   innerRef={register({ required: true })}
-                  className={classnames({ 'is-invalid': errors[`userphone-${type}`] })}
+                  className={classnames({
+                    'is-invalid': errors[`userphone-${type}`]
+                  })}
                 />
-            </Col>       
+              </Col>
             </div>
           </FormGroup>
           <FormGroup tag={Col} md='6'>
             <Label className='form-label' for={`userphonecheck-${type}`}>
-            <span className='necessary'>*</span>인증번호
+              <span className='necessary'>*</span>인증번호
             </Label>
             <div className='user-phone-btn'>
-            <Button.Ripple type='button' color='secondary'>
-              <span className='d-sm-inline-block'>인증하기</span>           
-            </Button.Ripple>
+              <Button.Ripple type='button' color='secondary'>
+                <span className='d-sm-inline-block'>인증하기</span>
+              </Button.Ripple>
             </div>
             <div className='input-btn d-flex justify-content-between'>
               <Input
@@ -211,8 +240,10 @@ const AccountDetails = ({ stepper, type }) => {
                 id={`userphonecheck-${type}`}
                 placeholder=''
                 innerRef={register({ required: true })}
-                className={classnames({ 'is-invalid': errors[`userphonecheck-${type}`] })}
-              />         
+                className={classnames({
+                  'is-invalid': errors[`userphonecheck-${type}`]
+                })}
+              />
             </div>
           </FormGroup>
           <FormGroup tag={Col} md='6'>
@@ -221,12 +252,14 @@ const AccountDetails = ({ stepper, type }) => {
             </Label>
             <div className='input-btn d-flex justify-content-between'>
               <Input
-              name={`userid-${type}`}
-              id={`userid-${type}`}
-              placeholder='johndoe'
-              innerRef={register({ required: true })}
-              className={classnames({ 'is-invalid': errors[`userid-${type}`] })}
-            />
+                name={`userid-${type}`}
+                id={`userid-${type}`}
+                placeholder='johndoe'
+                innerRef={register({ required: true })}
+                className={classnames({
+                  'is-invalid': errors[`userid-${type}`]
+                })}
+              />
             </div>
           </FormGroup>
           <FormGroup tag={Col} md='6'>
@@ -241,31 +274,35 @@ const AccountDetails = ({ stepper, type }) => {
                 placeholder='john.doe@email.com'
                 innerRef={register({ required: true })}
                 className={classnames()}
-              />         
+              />
             </div>
           </FormGroup>
           <div className='form-group form-password-toggle col-md-6'>
             <Label className='form-label' for={`password-val-${type}`}>
-             <span className='necessary'>*</span>비밀번호
+              <span className='necessary'>*</span>비밀번호
             </Label>
             <Input
               type='password'
               name={`password-val-${type}`}
               id={`password-val-${type}`}
               innerRef={register({ required: true })}
-              className={classnames({ 'is-invalid': errors[`password-val-${type}`] })}
+              className={classnames({
+                'is-invalid': errors[`password-val-${type}`]
+              })}
             />
           </div>
           <div className='form-group form-password-toggle col-md-6'>
             <Label className='form-label' for='confirm-password-val'>
-             <span className='necessary'>*</span>비밀번호 확인
+              <span className='necessary'>*</span>비밀번호 확인
             </Label>
             <Input
               type='password'
               name='confirm-password-val'
               id='confirm-password-val'
               innerRef={register({ required: true })}
-              className={classnames({ 'is-invalid': errors['confirm-password-val'] })}
+              className={classnames({
+                'is-invalid': errors['confirm-password-val']
+              })}
             />
           </div>
           <FormGroup tag={Col} md='6'>
@@ -278,7 +315,7 @@ const AccountDetails = ({ stepper, type }) => {
                 id={`address-${type}`}
                 innerRef={register({ required: true })}
                 className={classnames()}
-              />         
+              />
             </div>
           </FormGroup>
           <FormGroup tag={Col} md='6'>
@@ -292,19 +329,19 @@ const AccountDetails = ({ stepper, type }) => {
                 placeholder='john.doe@email.com'
                 innerRef={register({ required: true })}
                 className={classnames()}
-              />         
+              />
             </div>
           </FormGroup>
-        </Row>  
+        </Row>
         <div className='d-flex justify-content-between'>
-          <Button.Ripple color='dark' className='btn-prev' >
+          <Button.Ripple color='dark' className='btn-prev'>
             <span className='align-middle d-sm-inline-block'>취소</span>
           </Button.Ripple>
           <Button.Ripple type='submit' color='primary' className='btn-next'>
             <span className='align-middle d-sm-inline-block'>완료</span>
           </Button.Ripple>
         </div>
-      </Form> 
+      </Form>
       {/* ---- 가입정보입력 끝 */}
 
       {/* 가입인사 시작 */}
@@ -318,7 +355,7 @@ const AccountDetails = ({ stepper, type }) => {
       </div> */}
       {/* ---- 가입인사 끝 */}
     </Fragment>
-  )
-}
+  );
+};
 
-export default AccountDetails
+export default AccountDetails;
diff --git a/src/views/weather/WeatherView.js b/src/views/weather/WeatherView.js
index c56e4551..d35e0cbb 100644
--- a/src/views/weather/WeatherView.js
+++ b/src/views/weather/WeatherView.js
@@ -7,7 +7,7 @@ import {
   InputGroup,
   InputGroupAddon,
   InputGroupText
-} from '../../components/ui/index';
+} from '@component/ui';
 import { useDispatch, useSelector } from 'react-redux';
 import { laancApi } from '../../modules/laanc/apis/laancApi';
 
diff --git a/tsconfig.paths.json b/tsconfig.paths.json
index 8cb1a19d..003230c4 100644
--- a/tsconfig.paths.json
+++ b/tsconfig.paths.json
@@ -5,14 +5,14 @@
       "*": ["*", "index"],
       "@src/*": ["src/*"],
       "@assets/*": ["src/@core/assets/*"],
-      "@components/*": ["src/@core/components/*"],
+      "@core@core@components/*": ["src/@core/components/*"],
       "@layouts/*": ["src/@core/layouts/*"],
       "@store/*": ["src/redux/*"],
       "@styles/*": ["src/@core/scss/*"],
       "@configs/*": ["src/configs/*"],
       "@utils/*": ["src/utility/Utils/*"],
       "@hooks/*": ["src/utility/hooks/*"],
-      "@ui/*": ["src/components/ui/*"]
+      "@component/*": ["src/components/*"]
     }
   }
 }