From 5ce409dc4c50bf4828f524322dcb524a2beb5af6 Mon Sep 17 00:00:00 2001
From: geun <1416geun@naver.com>
Date: Tue, 9 Jul 2024 16:47:25 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9C=A0=ED=9A=A8=EC=84=B1=EA=B2=80=EC=82=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/custom.css                     |  20 +-
 .../flight/NewFlightApprovalsContainer.js     | 185 +++++++++++++++++-
 2 files changed, 203 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index bbc0641b..243b1b20 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -1253,4 +1253,22 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .data-box-btn .card{min-height:88px;margin:0;padding:14px; background:#fff;}
 .data-box-btn-list h4{color: #555;font-weight: 500;margin-bottom:4px;}
 .data-box-btn-list + .data-box-btn-list{margin-top:0.8rem}
-.data-box-btn-list .btn{border-top:0;border-bottom:0;}
\ No newline at end of file
+.data-box-btn-list .btn{border-top:0;border-bottom:0;}
+
+
+.test_modal{position: absolute;z-index: 9999;left:400px;top:20px}
+
+.pal-table-warp .table {color:#555;text-align: center;}
+.pal-table-warp .table tr th{font-size: 0.875rem;font-weight:500;padding: 0.5rem 0.5rem;}
+.pal-table-warp .table tr td{font-size: 0.875rem;padding: 0.5rem 0.5rem;}
+.pal-table-warp .table-ti{font-weight:600;color: #8a1c05;margin-bottom:8px;display:flex;align-content:center;}
+.pal-table-warp .table-ti svg{margin-right:4px}
+.pal-table-warp + .pal-table-warp {margin-top:1.5rem}
+.onestop-validation{padding:1.5rem}
+.onestop-validation .pal-table {border:1px solid #ebe9f1}
+.pal-table{max-height:180px;overflow:auto;}
+.fix{position:sticky;top:0;left: 0;z-index: 999;}
+
+.pal-table-warp .success{color:#0090d8;font-weight:400;}
+.pal-table-warp .fail{color:#ed1125;font-weight:400;}
+
diff --git a/src/containers/flight/NewFlightApprovalsContainer.js b/src/containers/flight/NewFlightApprovalsContainer.js
index de47096a..094f19c8 100644
--- a/src/containers/flight/NewFlightApprovalsContainer.js
+++ b/src/containers/flight/NewFlightApprovalsContainer.js
@@ -23,7 +23,8 @@ import { setLogout } from '@src/redux/features/account/auth/authThunk';
 import logo from '../../assets/images/logo/kac_logo_ icon.svg';
 import { AiOutlinePoweroff } from 'react-icons/ai';
 import WebsocketClient from '../../components/websocket/WebsocketClient';
-import { Card, ButtonGroup, Button } from '@component/ui';
+import { Card, ButtonGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from '@component/ui';
+import { FiUsers, FiFileText } from "react-icons/fi";
 
 export default function NewFlightApprovalsContainer({ mode }) {
   const dispatch = useDispatch();
@@ -334,9 +335,191 @@ export default function NewFlightApprovalsContainer({ mode }) {
     }
   };
 
+  const [testModal, setTestModal] = useState(false);
+
   return (
     <>
       <div className='map' style={{ width: '100%' }}>
+    <div className='test_modal'>
+          <Button
+            color='primary'
+            size='lg'
+            onClick={() => setTestModal(!testModal)}
+          >
+            test
+          </Button>
+        </div>
+        <div>
+          <Modal
+            isOpen={testModal}
+            toggle={() => setTestModal(!testModal)}
+            className='modal-dialog-centered modal-lg'
+          >
+            <ModalHeader toggle={() => setTestModal(!testModal)}>
+              유효성 검사 상세보기
+            </ModalHeader>
+            <ModalBody className='onestop-validation'>
+              <div className='pal-table-warp'>
+                <h5 className='table-ti'><FiFileText />기체 정보</h5>
+                <div className='pal-table'>
+                  <Table responsive>
+                  <thead>
+                    <tr>
+                      <th width='80'>No</th>
+                      <th width='120'>유효성 검사</th>
+                      <th>제작 번호</th>
+                      <th>기체 용도</th>
+                      <th>기체 중량</th>
+                      <th>보험 가입</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td width='80'>1</td>
+                      <td width='120' className='success'>성공</td>
+                      <td>163CGBEROA529Y</td>
+                      <td>영리</td>
+                      <td>25kg이하</td>
+                      <td className='success'>가입</td>
+                    </tr>           
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>163CGBEROA529Y</td>
+                      <td>영리</td>
+                      <td>25kg이하</td>
+                      <td className='fail'>미 가입</td>
+                    </tr>
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>163CGBEROA529Y</td>
+                      <td>영리</td>
+                      <td>25kg이하</td>
+                      <td className='fail'>미 가입</td>
+                    </tr>  
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>163CGBEROA529Y</td>
+                      <td>영리</td>
+                      <td>25kg이하</td>
+                      <td className='fail'>미 가입</td>
+                    </tr>  
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>163CGBEROA529Y</td>
+                      <td>영리</td>
+                      <td>25kg이하</td>
+                      <td className='fail'>미 가입</td>
+                    </tr>  
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>163CGBEROA529Y</td>
+                      <td>영리</td>
+                      <td>25kg이하</td>
+                      <td className='fail'>미 가입</td>
+                    </tr>  
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>163CGBEROA529Y</td>
+                      <td>영리</td>
+                      <td>25kg이하</td>
+                      <td className='fail'>미 가입</td>
+                    </tr>                    
+                  </tbody>
+                  </Table>
+                </div>
+              </div>
+              <div className='pal-table-warp'>
+                <h5 className='table-ti'><FiUsers/>조종자 정보</h5>
+                <div className='pal-table'>
+                  <Table>
+                  <thead>
+                    <tr>
+                      <th width='80'>No</th>
+                      <th width='120'>유효성 검사</th>
+                      <th>이름</th>
+                      <th>생년 월일</th>
+                      <th>자격 번호</th>
+                      <th>조종 자격</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td width='80'>1</td>
+                      <td width='120' className='success'>성공</td>
+                      <td>홍*동</td>
+                      <td>1995****</td>
+                      <td>91-****12</td>
+                      <td className='success'>여</td>
+                    </tr>           
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>김*혜</td>
+                      <td>1995****</td>
+                      <td>91-****12</td>
+                      <td className='fail'>부</td>
+                    </tr>
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>김*혜</td>
+                      <td>1995****</td>
+                      <td>91-****12</td>
+                      <td className='fail'>부</td>
+                    </tr>     
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>김*혜</td>
+                      <td>1995****</td>
+                      <td>91-****12</td>
+                      <td className='fail'>부</td>
+                    </tr>     
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>김*혜</td>
+                      <td>1995****</td>
+                      <td>91-****12</td>
+                      <td className='fail'>부</td>
+                    </tr>     
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>김*혜</td>
+                      <td>1995****</td>
+                      <td>91-****12</td>
+                      <td className='fail'>부</td>
+                    </tr>     
+                    <tr>
+                      <td width='80'>2</td>
+                      <td width='120' className='fail'>실패</td>
+                      <td>김*혜</td>
+                      <td>1995****</td>
+                      <td>91-****12</td>
+                      <td className='fail'>부</td>
+                    </tr>                        
+                  </tbody>
+                  </Table>
+                </div>
+              </div>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                color='primary'
+                onClick={() => setTestModal(!testModal)}
+              >
+                확인
+              </Button>{' '}
+            </ModalFooter>
+          </Modal>
+        </div>
         <div className='main-data'>
           <div className='data-box-btn'>
             <Card>