From c5d602eaa6b6eda6d475c454acb2d66ddfe1eb40 Mon Sep 17 00:00:00 2001
From: sanguu516 <sanguu516@naver.com>
Date: Wed, 29 May 2024 16:39:35 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EC=8A=B9=EC=9D=B8=20?=
 =?UTF-8?q?=EC=8B=A0=EC=B2=AD=20=EA=B2=B0=EA=B3=BC=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=EB=B0=94=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flight/flightApprovalsContainer.js        | 49 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/containers/flight/flightApprovalsContainer.js b/src/containers/flight/flightApprovalsContainer.js
index 1f1ec0c4..24a80af4 100644
--- a/src/containers/flight/flightApprovalsContainer.js
+++ b/src/containers/flight/flightApprovalsContainer.js
@@ -10,6 +10,10 @@ import {
   flightlayerPolygon,
   flightlayerBuffer
 } from '../../utility/MapUtils';
+import { useHistory } from 'react-router-dom';
+import { Grid } from 'react-feather';
+import { AiOutlinePoweroff } from 'react-icons/ai';
+import { IoAlertOutline } from 'react-icons/io5';
 import { clientSaveAreaCoordinateList } from '@src/redux/features/laanc/laancSlice';
 import { MapControl } from '../../components/map/MapControl';
 import { clientSetIsMapLoading } from '@src/redux/features/laanc/laancSlice';
@@ -18,9 +22,14 @@ import { clientMapInit } from '@src/redux/features/control/map/mapSlice';
 import FlightApprovalsTable from '@src/components/flight/FlightApprovalsTable';
 import { getLaancAprvList } from '@src/redux/features/laanc/laancThunk';
 import dayjs from 'dayjs';
+import logo from '../../assets/images/logo/kac_logo_ icon.svg';
+import { setLogout } from '@src/redux/features/account/auth/authThunk';
+import WebsocketClient from '../../components/websocket/WebsocketClient';
+import { clientDispatchTopMenu } from '@src/redux/features/layout/layoutSlice';
 
 export default function FlightApprovalsContainer() {
   const dispatch = useDispatch();
+  const history = useHistory();
 
   const [selected, setSelected] = useState(null);
   const [isMapLoading, setIsMapLoading] = useState(false);
@@ -168,9 +177,47 @@ export default function FlightApprovalsContainer() {
     }
   };
 
+  const handlerLogout = async () => {
+    const { payload } = await dispatch(setLogout());
+
+    if (payload === 'SUCCESS') {
+      history.replace('/account/login');
+    }
+  };
+
   return (
     <>
-      <div className='map' style={{ width: '100%' }}>
+      <div className='left-menu'>
+        <h1 className='logo'>
+          <img src={logo} width='80' />
+          <span>UTM</span>
+        </h1>
+        <ul className='left-menu-nav'>
+          <li>
+            <button>
+              <Grid
+                onClick={() => {
+                  dispatch(clientDispatchTopMenu('/'));
+                  history.push('/main/dashboard');
+                }}
+              />
+            </button>
+          </li>
+        </ul>
+        <ul className='left-menu-footer'>
+          <li>
+            <AiOutlinePoweroff
+              size={25}
+              className='logout-btn'
+              onClick={handlerLogout}
+            />
+          </li>
+          <li>
+            <WebsocketClient />
+          </li>
+        </ul>
+      </div>
+      <div className='map'>
         <MapControl />
       </div>
       <div className='right-menu active'>