공통 컴포넌트 적용

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])
-}
+};

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!');
     }
   }
-}
+};

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'
-}
+};

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'
-}
+};

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';

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';

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';

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';

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,

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

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';

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';

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';

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';

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>

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>

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';

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,

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'>

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>
     </>
   );

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';

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>

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({});

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';
 

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>

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);

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'>

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 => {
   // 식별번호

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 => {

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 (

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>

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 => {

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

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';

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>

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>
         );
       }
     }

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';

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>

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>
                   ) : (
                     <></>
                   )}

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';
 

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 => {

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 => {

src/components/charts/apex/ApexAreaCharts.js

@@ -7,7 +7,7 @@ import {
   CardTitle,
   CardBody,
   CardSubtitle
-} from '../../ui/index';
+} from '@component/ui';
 
 const areaColors = {
   series3: '#a4f8cd',

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';

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;

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;

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>
   );
 };

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,

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({

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 (

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';
 

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,

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>
       )
     }
   ];

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>

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 (

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';

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 (

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';

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)';

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 = [

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 = () => {

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';
 

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';
 

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>
         );
       }
     }

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>

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';

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 {

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 }) {
   // 드론원스탑으로 새창 바로가기

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';

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 }) {

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`;

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>
+                      </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>
+                      </Popover>
                     </Label>
                     <Flatpickr
                       className='form-control form-control-sm'

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';
 

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>
 

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';

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 => {

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';
 

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 = () => {

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 (

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 (

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 (

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';

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';

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>
   );

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>
+  );
+}

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>;
+}

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,6 +68,26 @@ export default function CustomButton({
     }
   };
   return (
+    <>
+      {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}
@@ -67,8 +98,12 @@ export default function CustomButton({
             tag={tag}
             disabled={disabled}
             id={id}
+            style={style}
           >
             {children}
           </Button>
+        </>
+      )}
+    </>
   );
 }

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>
+  );
+}

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>;
+}

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>
+  );
+}

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>
+  );
+}

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>
   );

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
 };

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>

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>
+  );
+}

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>

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';

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';

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>
           }
         />

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>
           ) : (
             <></>
           )}