드론관제 themeToogle 추가

src/views/control/main/ControlMain.js

@@ -15,7 +15,8 @@ import {
   Navigation2,
   Cloud,
   CloudRain,
-  CloudSnow
+  CloudSnow,
+  Moon
 } from 'react-feather';
 
 import { AiOutlinePoweroff, AiOutlineExclamation } from 'react-icons/ai';
@@ -36,6 +37,8 @@ import {
   ctrlDrawTypeChangeAction,
   objectUnClickAction
 } from '../../../modules/control/map/actions/controlMapActions';
+import { useSkin } from '../../../utility/hooks/useSkin';
+import { NavLink } from 'reactstrap';
 
 const ControlMain = () => {
   const dispatch = useDispatch();
@@ -50,6 +53,7 @@ const ControlMain = () => {
   const { controlGpCountDrone, controlGpCountFlight } = useSelector(
     state => state.controlGpCountState
   );
+
   // pav박람회 -> uam, 드론 구별을 위한 임시 코드
   // (이 작업으로 고도화 하려면 추후에 서버에서 uam타입을 새로 더 받아 작업해야 함)
   const [droneCount, setDroneCount] = useState(0);
@@ -62,8 +66,8 @@ const ControlMain = () => {
   // const [openWeatherList, setOpenWeatherList] = useState(false);
 
   const [openAlarmList, setOpenAlarmList] = useState(false);
-
   const [openSetting, setOpenSetting] = useState(false);
+  const [skin, setSkin] = useSkin();
 
   const openMenu = val => {
     if (val === 'reportList') {
@@ -159,6 +163,14 @@ const ControlMain = () => {
     dispatch(ctrlDrawTypeChangeAction(val));
   };
 
+  const ThemeToggler = () => {
+    if (skin === 'dark') {
+      return <Sun className='ficon' onClick={() => setSkin('light')} />;
+    } else {
+      return <Moon className='ficon' onClick={() => setSkin('dark')} />;
+    }
+  };
+
   return (
     <>
       <ControlAlarmNotice />
@@ -194,6 +206,11 @@ const ControlMain = () => {
               )}
             </button>
           </li>
+          <li>
+            <NavLink className='nav-link-style'>
+              <ThemeToggler />
+            </NavLink>
+          </li>
         </ul>
         <ul className='left-menu-footer'>
           {/* <li>