table css

src/assets/css/custom.css

@@ -77,7 +77,7 @@ button{border:0;background:transparent;}
 .pal-container{background:#ddd;height:100vh;position:relative;}
 .map{width:calc(100% - 80px);position:absolute;right:0;}
 .left-layer{width:350px;height:100vh;background:#fff;position:absolute;left:80px;color:#fff;z-index: 999;padding:14px;overflow: auto;}
-.right-layer{width:350px;height:100vh;background:#fff;position:absolute;right:-350px;color:#fff;z-index: 999;padding:14px;transition: 0.5s ease;-webkit-transition: 0.5s ease;overflow:auto;}
+.right-layer{width:350px;height:100vh;background:#fff;position:absolute;right:-350px;z-index: 999;padding:14px;transition: 0.5s ease;-webkit-transition: 0.5s ease;overflow:auto;}
 .right-layer.active{right:0px;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
 .right-layer-btn{width:40px;height:40px;position:absolute;right:0px;top:50%;transform: translateY(-50%);border:0;background:#8a1c05;border-top-left-radius:5px;border-bottom-left-radius:5px;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
 .right-layer-btn svg{color:#fff;}
@@ -85,7 +85,7 @@ button{border:0;background:transparent;}
 .layer-content + .layer-content{margin-top:14px;}
 .right-menu{position: absolute;right:0;height: 100vh;}
 .dark-layout .left-layer{background:#10163A;}
-.dark-layout .right-layer{background:#10163A;}
+.dark-layout .right-layer{background:#10163A;color:#fff}
 
 /*버튼 기본css*/
 .btn{font-size:0.825rem;font-weight:400;}
@@ -1181,7 +1181,8 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .flight-approval .rdt_TableHeadRow>div{display:none}
 .flight-approval .rdt_TableHeadRow .rdt_TableCol{display:block;font-size:0.8rem;}
 .flight-approval .rdt_TableHeadRow .rdt_TableCol div{font-weight:600}
-.flight-approval-layer{width:665px;overflow:scroll;}
+.flight-approval-layer-wrap{width:100%;}
+.flight-approval-layer{width:100%;overflow:scroll;}
 .layer-ti-sub{display:block;font-size:0.875rem;color:#777;margin-top:-4px;}
 .flight-approval-layer .layer-ti-sub{margin-bottom:0.5rem}
 .flight-approval-layer .calendar-flat svg{color:#8a1c05}
@@ -1205,7 +1206,7 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .flight-approval-layer .react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow .rdt_TableCell .btn{padding: 0.5rem 1rem;}
 
 .flight-approval-layer .__rdt_custom_sort_icon__{position:absolute;right:12%}
-.search-case-list{width:100%;margin-bottom:10px}
+.search-case-list{width:100%;margin-bottom:1rem}
 .search-case-list ul{display:flex;}
 .search-case-list ul li{flex:1;text-align:center;font-size:0.875rem;font-weight:500;padding:0.4rem;}
 .search-case-list ul .approval{background-color:rgba(63, 172, 225, 0.4);color:rgb(23, 90, 124);border-top-left-radius:4px;border-bottom-left-radius:4px;}
@@ -1217,3 +1218,28 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .flight-approval-layer .react-dataTable .rdt_TableHead .rdt_TableHeadRow .custom-header-cell{text-align:center;line-height:1.3;font-size: 11px;}
 .flight-approval-layer .react-dataTable .rdt_TableHead .rdt_TableHeadRow{height:auto}
 .flight-approval-in-table .rdt_TableRow:last-child{border-bottom:1px solid rgba(0, 0, 0, .12);}
+
+
+
+.input-btn-2n{display:flex;}
+.input-btn-2n .list-input, .input-btn-2n .list-input-btn{flex:1}
+.input-btn-2n .list-input-btn{margin-left:1rem}
+.search-download{display:flex;justify-content: space-between;align-items: baseline;margin-bottom:0.5rem}
+.search-download .search-case{margin-left:0;}
+.search-download .download button + button{margin-left:0.5rem}
+
+/*new approval table*/
+.invoice-list-dataTable.flight-approval .ant-table *{font-family: 'Rubik', 'Montserrat', 'NotoSansKR', sans-serif;}
+.invoice-list-dataTable.flight-approval .ant-table{border:1px solid #f0f0f0;border-radius:0px;border-collapse:collapse}
+.invoice-list-dataTable.flight-approval .ant-table-thead tr th{padding:8px 8px;vertical-align:middle;font-size:0.85rem;font-weight:500;line-height:1.3;}
+.invoice-list-dataTable.flight-approval .ant-table-thead tr th::before{display:none}
+.invoice-list-dataTable.flight-approval .ant-table-tbody tr td{padding:4px 4px;vertical-align:middle;line-height:1.3;font-size:0.825rem}
+
+/*new approval table(inner)*/
+.invoice-list-dataTable.flight-approval .ant-table .innerTable .ant-table{background:#f4f4f4;border:3px solid #ddd;margin:-4px -4px;}
+.invoice-list-dataTable.flight-approval .ant-table .innerTable .ant-table tr th,
+.invoice-list-dataTable.flight-approval .ant-table .innerTable .ant-table tr td{border-bottom:1px dotted #f0f0f0;line-height:1.3}
+
+/*new approval table edit input*/
+.invoice-list-dataTable.flight-approval .ant-table .ant-input, 
+.invoice-list-dataTable.flight-approval .ant-table .ant-form-item-explain-error{font-size:0.8rem}

src/components/flight/NewFlightApprovalsReport.js

@@ -74,20 +74,12 @@ export default function NewFlightApprovalsReport(props) {
           />
         </div>
 
-        <div className='search-box'>
-          <div
-            className='search-list-ti'
-            style={{
-              color: '#555',
-              border: '1px solid #ddd',
-              minWidth: '50px',
-              width: '60px'
-            }}
-          >
-            지역
+        <div className='layer-content'>
+          <div className='layer-ti'>
+            <h4>지역</h4>
           </div>
-          <div className='search-list'>
-            <div className='search-list-cont'>
+          <div className='input-btn-2n'>
+              <div className='list-input'>
                 <CustomInput
                   inline
                   type='select'
@@ -102,7 +94,7 @@ export default function NewFlightApprovalsReport(props) {
                   <option value='gimpo'>김포공항 관제권</option>
                 </CustomInput>
             </div>
-          </div>
+            <div className='list-input-btn'>
                 <Button
                     color='primary'
                     onClick={() =>
@@ -115,5 +107,7 @@ export default function NewFlightApprovalsReport(props) {
               </div>
             </div>
         </div>
+      </div>
+    </div>
   );
 }

src/components/flight/NewFlightApprovalsTable.js

@@ -146,8 +146,7 @@ export default function NewFlightApprovalsTable(props) {
       title: (
         <>
           행정 <br />
-          구역
-          <br />2
+          구역 2
         </>
       ),
       dataIndex: 'areaList',
@@ -256,8 +255,7 @@ export default function NewFlightApprovalsTable(props) {
       title: (
         <>
           긴급<br />
-          구조 <br />
-          기관
+          구조 기관
         </>
       ),
       dataIndex: 'areaList',
@@ -575,6 +573,7 @@ export default function NewFlightApprovalsTable(props) {
     return (
       <Form form={form} component={false}>
         <Table
+          className='innerTable'
           rowClassName={record => {
             let className = '';
             if (record.approvalCd === 'S') {
@@ -748,8 +747,13 @@ export default function NewFlightApprovalsTable(props) {
 
   return (
     <div className='layer-content'>
-      <div className='layer-ti d-flex justify-content-between align-items-center'>
+      <div className='layer-ti'>
+        <div>
           <h4>비행승인 신청 검토결과 목록</h4>
+        </div>
+      </div>
+      <div className='search-download'>
+          <div>
             <span className='search-case'>
               {formatDate(props.startDate)}
               {props.endDate && props.startDate !== props.endDate
@@ -758,16 +762,21 @@ export default function NewFlightApprovalsTable(props) {
               총 {approvalCdValue.S + approvalCdValue.F + approvalCdValue.U} 건
             </span>
           </div>
+          <div className='download'>
+            <Button color='primary' size='sm'>한글 다운로드</Button>
+            <Button color='primary' size='sm'>엑셀 다운로드</Button>
+          </div>
+        </div>
       <div className='search-case-list'>
         <div>
           <ul>
-            <li className='approval' style={{ cursor: 'pointer' }}>
+            <li className='approval'>
               승인 {approvalCdValue.S}건
             </li>
-            <li className='not-approved' style={{ cursor: 'pointer' }}>
+            <li className='not-approved'>
               미승인 {approvalCdValue.F}건
             </li>
-            <li className='non-target' style={{ cursor: 'pointer' }}>
+            <li className='non-target'>
               비대상 {approvalCdValue.U}건
             </li>
           </ul>