From df47548969687fdb47795acbd3d6494118d05e6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junh_eee@naver.com>
Date: Fri, 8 Sep 2023 18:48:30 +0900
Subject: [PATCH] =?UTF-8?q?=EC=8B=A4=EC=8B=9C=EA=B0=84=20=EC=98=81?=
 =?UTF-8?q?=EC=83=81=EB=B3=B4=EA=B8=B0=20=EB=AA=A8=EB=8B=AC=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20css=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/custom.css                     |  5 +-
 src/views/control/report/ControlReportList.js | 73 ++++++++++++++++---
 2 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index c84e8a1..08254ec 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -842,4 +842,7 @@ background-size: 75% auto;
 
 .layer-weather-address{display:flex;align-items:center;justify-content:space-between;}
 .box_4n{display:flex;flex-wrap: wrap;}
-.box_4n div{width:50%;height:50vh;}
\ No newline at end of file
+.box_4n div{width:50%;height:50vh;}
+
+.modal-video{display:flex;align-items: center;justify-content: center;}
+.modal-video>.modal-content{height:90vh;}
\ No newline at end of file
diff --git a/src/views/control/report/ControlReportList.js b/src/views/control/report/ControlReportList.js
index e745dce..34e90bf 100644
--- a/src/views/control/report/ControlReportList.js
+++ b/src/views/control/report/ControlReportList.js
@@ -1,15 +1,52 @@
 import moment from 'moment';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Search, X } from 'react-feather';
 import { useDispatch, useSelector } from 'react-redux';
-import { Badge, Button, Input, InputGroup } from 'reactstrap';
+import {
+  Badge,
+  Button,
+  Input,
+  InputGroup,
+  Modal,
+  ModalHeader,
+  ModalBody
+} from 'reactstrap';
 import {
   controlGpDtlAction,
   controlGpFlightPlanAction
 } from '../../../modules/control/gp';
 import { objectClickAction } from '../../../modules/control/map/actions/controlMapActions';
-import { NavLink } from 'react-router-dom';
 
+const HandlerModal = ({ modal, handler }) => {
+  return (
+    <div
+      className='vertically-centered-modal'
+      style={{ maxWidth: '95vh', height: '95vh', margin: 0 }}
+    >
+      <Modal
+        isOpen={modal}
+        toggle={handler}
+        className='modal-dialog-centered modal-lg modal-video'
+        style={{ margin: '0px auto', maxWidth: '90%', minHeight: '100vh' }}
+      >
+        <ModalHeader toggle={handler}>실시간 영상보기</ModalHeader>
+        <ModalBody className='pal-modal-body'>
+          <>
+            <iframe
+              width='100%'
+              height='100%'
+              src='https://www.youtube.com/embed/_g3GX_Dr_AA?si=K2QakM3sI5N1V5pe'
+              title='YouTube video player'
+              frameborder='0'
+              allow='accelerometer; autoplay=1; mute=1; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+              allowfullscreen
+            ></iframe>
+          </>
+        </ModalBody>
+      </Modal>
+    </div>
+  );
+};
 const ControlReportList = props => {
   const { controlGpList } = useSelector(state => state.controlGpState);
   const [filterId, setFilterId] = useState('');
@@ -24,6 +61,12 @@ const ControlReportList = props => {
 
   // useEffect(() => {}, [filterId]);
 
+  const [modal, setModal] = useState(false);
+
+  const handler = () => {
+    setModal(false);
+  };
+
   return (
     <div className='left-layer'>
       <div className='layer-content'>
@@ -100,7 +143,12 @@ const ControlReportList = props => {
 
                   {item.objectId.includes('NAMWON') ? (
                     <dt>
-                      <div className='data-list'>
+                      <div
+                        className='data-list'
+                        onClick={() => {
+                          setModal(true);
+                        }}
+                      >
                         {/* <NavLink
                           to='/system/multi/views'
                           target='_blank'
@@ -108,13 +156,15 @@ const ControlReportList = props => {
                         >
                           <span>실시간 영상보기</span>
                         </NavLink> */}
-                        <a
-                          style={{ width: '100%' }}
-                          href='https://youtube.com/live/_g3GX_Dr_AA?feature=share'
-                          target='_blank'
-                        >
-                          <span>실시간 영상보기</span>
-                        </a>
+
+                        <span>실시간 영상보기</span>
+                        {/* <iframe
+                          src='https://www.youtube.com/embed/_g3GX_Dr_AA?si=K2QakM3sI5N1V5pe'
+                          title='YouTube video player'
+                          frameborder='0'
+                          allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+                          allowfullscreen
+                        ></iframe> */}
                       </div>
                     </dt>
                   ) : (
@@ -138,6 +188,7 @@ const ControlReportList = props => {
           }
         })}
       </div>
+      {modal ? <HandlerModal modal={modal} handler={handler} /> : <></>}
     </div>
   );
 };