실시간 영상보기 모달 생성 및 css 추가

src/assets/css/custom.css

@@ -843,3 +843,6 @@ 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;}
+
+.modal-video{display:flex;align-items: center;justify-content: center;}
+.modal-video>.modal-content{height:90vh;}

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%' }}
+                        <span>실시간 영상보기</span>
-                          href='https://youtube.com/live/_g3GX_Dr_AA?feature=share'
+                        {/* <iframe
-                          target='_blank'
+                          src='https://www.youtube.com/embed/_g3GX_Dr_AA?si=K2QakM3sI5N1V5pe'
-                        >
+                          title='YouTube video player'
-                          <span>실시간 영상보기</span>
+                          frameborder='0'
-                        </a>
+                          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>
   );
 };