notam 정보

src/assets/css/custom.css

@@ -1089,4 +1089,14 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .coords-box-scroll .etc{margin:0 6px}
 .coords-box + .coords-box{margin-left:1rem}
 .right-btn{display: flex; align-items: center;}
-.right-btn .etc-txt{font-weight:400;margin-right:1rem;}
+.right-btn .etc-txt{font-weight:400;margin-right:1rem;}
+
+.notam-btn{width:20px;height:20px;padding:0;position:absolute;}
+.notam-info{height:600px;overflow:auto;}
+.notam-modal table{margin:1rem 0;border:1px solid #ddd;}
+.notam-modal table tr th, .notam-modal table tr td{padding:0.4rem 0.8rem;vertical-align:middle;}
+.notam-modal table thead tr{border-bottom:1px solid #ddd;}
+.notam-modal table thead tr th{font-weight:500;border:0;background:#f4f4f4;font-size:0.875rem;border-right:1px solid #ddd;text-align:center}
+.notam-modal table tbody tr{border-bottom:1px solid #ddd;}
+.notam-modal table tbody tr th{font-weight:500;background:#f4f4f4;font-size:0.875rem;border-right:1px solid #ddd;min-width:150px;text-align:center;}
+.notam-modal table tbody tr td{border:0;background:#fff;font-size:0.875rem;}

src/views/control/main/ControlMain.js

@@ -18,7 +18,14 @@ import {
 import { AiOutlinePoweroff, AiOutlineExclamation } from 'react-icons/ai';
 import { IoAlertOutline } from 'react-icons/io5';
 import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
-import { Card, Button } from 'reactstrap';
+import {
+  Card,
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from 'reactstrap';
 import ControlAlarmNotice from '../alarm/ControlAlarmNotice';
 import ControlReportList from '../report/ControlReportList';
 import ControlReportDetail from '../report/ControlReportDetail';
@@ -165,6 +172,8 @@ const ControlMain = () => {
     }
   };
 
+  const [centeredModal, setCenteredModal] = useState(false);
+
   return (
     <>
       <ControlAlarmNotice />
@@ -297,6 +306,137 @@ const ControlMain = () => {
             </div>
           </Card>
         </div>
+        <Button
+          className='notam-btn'
+          onClick={() => setCenteredModal(!centeredModal)}
+        >
+          z
+        </Button>
+        <Modal
+          isOpen={centeredModal}
+          toggle={() => setCenteredModal(!centeredModal)}
+          className='modal-dialog-centered modal-lg notam-modal'
+        >
+          <ModalHeader toggle={() => setCenteredModal(!centeredModal)}>
+            NOTAM 정보
+          </ModalHeader>
+          <ModalBody className='notam-info'>
+            <div>
+              Z0638/23
+              <br />
+              GG RKZZNAXX
+              <br />
+              250712 RKRRYNYX
+              <br />
+              (Z0638/23 NOTAMN
+              <br />
+              Q)RKRR/QWMLW/IV/BO/AW/000/002/3735N12647E005
+              <br />
+              A)RKSS <br />
+              B)2310011000 <br />
+              C)2310281200
+              <br />
+              D)01 08 14 17 25 28 1000-1200
+              <br />
+              E)FIREWORKS WILL TAKE PLACE AS FLW : A CIRCLE RADIUS 100M CENTERED
+              ON 373547N1264720E
+              <br />
+              F)SFC G)200FT AMSL)
+            </div>
+            <div>
+              <table>
+                <thead>
+                  <tr>
+                    <th>항목</th>
+                    <th>내용</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <th>NOTAM번호</th>
+                    <td>Z0638/23신규</td>
+                  </tr>
+                  <tr>
+                    <th>비행정보구역</th>
+                    <td>인천비행정보구역(RKRR)</td>
+                  </tr>
+                  <tr>
+                    <th>QCODE</th>
+                    <td>
+                      미사일, 총포, 로켓발사 일어날 예정이다(특정 상황 및 내용
+                      표기)(QWMLW)
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>비행방식</th>
+                    <td>계기비행(IFR) 및 시계비행(VFR)</td>
+                  </tr>
+                  <tr>
+                    <th>목적</th>
+                    <td>PIB포함, 항공기운항</td>
+                  </tr>
+                  <tr>
+                    <th>적용범위</th>
+                    <td>비행장, 항행경고</td>
+                  </tr>
+                  <tr>
+                    <th>고도</th>
+                    <td>지표면 ~ 200FT</td>
+                  </tr>
+                  <tr>
+                    <th>지리참조기준점(위치)</th>
+                    <td>[북위]37도35분 [동경]126도47분</td>
+                  </tr>
+                  <tr>
+                    <th>반경</th>
+                    <td>서울/김포 국제 공항(RKSS)</td>
+                  </tr>
+                  <tr>
+                    <th>B항목(발효일시)</th>
+                    <td>
+                      국제표준시 23년 10월01일 10시00분(한국표준시 23년 10월01일
+                      19시00분)
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>C항목(종료일시)</th>
+                    <td>
+                      국제표준시 23년 10월28일 12시00분(한국표준시 23년 10월28일
+                      21시00분
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>D항목(일정)</th>
+                    <td>01 08 14 17 25 28 1000-1200</td>
+                  </tr>
+                  <tr>
+                    <th>E항목(NOTAM 본문)</th>
+                    <td>
+                      FIREWORKS WILL TAKE PLACE AS FLW : A CIRCLE RADIUS 100M
+                      CENTERED ON 373547N1264720E
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>F항목(하한)</th>
+                    <td>지표면(SFC)</td>
+                  </tr>
+                  <tr>
+                    <th>G항목(상한)</th>
+                    <td>200FT AMSL</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              color='primary'
+              onClick={() => setCenteredModal(!centeredModal)}
+            >
+              확인
+            </Button>
+          </ModalFooter>
+        </Modal>
         {/* <div className='main-data-box flight-data'>
           <Card>
             <div className='data-box-header'>
@@ -315,6 +455,7 @@ const ControlMain = () => {
           </Card>
         </div> */}
       </div>
+
       {oepnReportList ? (
         <ControlReportList
           // openReportDetailParam={openReportDetailParam}