diff --git a/src/components/vertiport/VertiportLeftMenu.js b/src/components/vertiport/VertiportLeftMenu.js
new file mode 100644
index 0000000..9833ce8
--- /dev/null
+++ b/src/components/vertiport/VertiportLeftMenu.js
@@ -0,0 +1,264 @@
+import moment from 'moment';
+import { useState, useEffect } from 'react';
+import { X } from 'react-feather';
+import { useDispatch, useSelector } from 'react-redux';
+import drone_img from '../../assets/images/drone.jpg';
+import uam_img from '../../assets/images/uam_img.jpg';
+import drone_yellow from '../../assets/images/drone_yellow.png';
+import { GET_ARCTFT_TYPE_CD, GET_WGHT_TYPE_CD } from '../../utility/CondeUtil';
+import { controlGpLogAction } from '../../modules/control/gp';
+import ControlAlarmDetail from '../../views/control/alarm/ControlAlarmDetail';
+import {
+ Navigation2,
+ Compass,
+ Sun,
+ Cloud,
+ CloudRain,
+ CloudSnow
+} from 'react-feather';
+import { Table } from 'reactstrap';
+
+export const VertiportLeftMenu = ({ setOpenReportList }) => {
+ const dispatch = useDispatch();
+
+ // 비정상상황 모달
+ const [historyModal, setHistoryModal] = useState(false);
+
+ // 기체 상세정보
+ const { controlGpDetail, controlDetail } = useSelector(
+ state => state.controlGpDtlState
+ );
+
+ // 비정상상황 히스토리 내역
+ const { controlGpWarnLog } = useSelector(state => state.controlGpLogState);
+
+ // 해당 드론의 비정상상황 알림내역 불러옴
+ useEffect(() => {
+ if (historyModal) {
+ if (controlGpDetail) {
+ dispatch(controlGpLogAction.request({ id: controlGpDetail.controlId }));
+ }
+ }
+ }, [historyModal]);
+
+ // 날씨 아이콘 표출
+ const weathericon = () => {
+ if (controlDetail) {
+ let wheatherDetail = controlDetail.items.item;
+ let skyDetail = wheatherDetail[6].fcstValue;
+ if (skyDetail == 1 || skyDetail == 2 || skyDetail == 4) {
+ return ;
+ } else if (skyDetail == 4) {
+ return ;
+ } else if (skyDetail == 0 || wheatherDetail[5].fcstValue == 1) {
+ return ;
+ } else return ;
+ }
+ };
+
+ // 상세정보에 내역이 없으면 -로 표출
+ const nullMessage = val => {
+ if (val) {
+ return val;
+ } else {
+ return '-';
+ }
+ };
+
+ return (
+
+
+
+
+
+
드론 상세정보
+
+
+
+
+
+
+
+
+
+
+ {controlDetail?.arcrftModelNm
+ ? controlDetail?.arcrftModelNm
+ : controlGpDetail?.objectId}
+
+
+ {controlGpDetail?.objectId.includes('UAM') ? (
+
+ ) : (
+
+ )}
+
+
+
+ -
+
제작번호
+
+ {nullMessage(controlDetail?.prdctNum)}
+
+
+ -
+
식별번호
+
+ {controlGpDetail?.objectId}
+
+
+ -
+
중량
+
+ {GET_WGHT_TYPE_CD(controlDetail?.wghtTypeCd)}
+
+
+ -
+
종류
+
+ {GET_ARCTFT_TYPE_CD(controlDetail?.arcrftTypeCd)}
+
+
+
+
+
+
+
+
+
비행정보
+
+
+
+
+ -
+
시작위치
+ 인천 서구
+
+ -
+
시작시간
+ 2021-09-01 10:00:00
+
+ -
+
속도
+ 100 m/s
+
+ -
+
고도
+ 150m
+
+ -
+
좌표(위도/경도)
+ 36.350411 / 127.384548
+
+ -
+
헤딩 방위각
+
+ {nullMessage(controlGpDetail?.heading)}
+
+
+ -
+
위치정보 수신 시간
+
+ {controlGpDetail?.serverRcvDt
+ ? moment(
+ controlGpDetail?.serverRcvDt,
+ 'YYYYMMDDHHmmss'
+ ).format('MM-DD HH:mm:ss')
+ : '-'}
+
+
+
+
+
+
+
+
+
운영자 정보
+
+
+
+
+ -
+
담당자 이름
+ 홍길동
+
+ -
+
담당자 연락처
+ 010-4444-4444
+
+
+
+
+
+
+
+
날씨 정보
+
+
+
+
+
+ 현재위치의 날씨 정보입니다.
+
+
+ {controlDetail?.stAreaNm}
+
+
+
+
+
+ 시각 |
+ 날씨 |
+ 기온 |
+ 풍향 |
+ 풍속 |
+
+
+
+
+
+ {controlDetail?.items.item[0].baseTime.substring(
+ 0,
+ 2
+ )}
+ 시
+ |
+ {weathericon()} |
+ {controlDetail?.items.item[12].fcstValue}℃ |
+
+
+ |
+ {controlDetail?.items.item[4].fcstValue} m/s |
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/views/vertiport/VertiportView.js b/src/views/vertiport/VertiportView.js
index e37c59c..09295e0 100644
--- a/src/views/vertiport/VertiportView.js
+++ b/src/views/vertiport/VertiportView.js
@@ -8,13 +8,40 @@ import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
import { createPortal } from 'react-dom';
import { VertiportRightMenu } from '../../components/vertiport/VertiportRightMenu';
+import { VertiportLeftMenu } from '../../components/vertiport/VertiportLeftMenu';
+import { Button } from 'reactstrap';
export default function VertiportView() {
// 오른쪽 사이드 메뉴 표출 여부
const [openSetting, setOpenSetting] = useState(true);
+
+ const [oepnReportList, setOpenReportList] = useState(false);
+
const titleName = '지상관제(버티포트) 현황';
return (
<>
- test
+
+ test
+
+
+ {oepnReportList && (
+ <>
+ {createPortal(
+ ,
+
+ document.getElementById('app-content')
+ )}
+ >
+ )}
+
{createPortal(