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;}
@@ -1216,4 +1217,29 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 /* .bg-color div{background:#eeeeee} */
 .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);}
+.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,44 +74,38 @@ export default function NewFlightApprovalsReport(props) {
           />
         </div>
 
-        <div className='search-box'>
+        <div className='layer-content'>
-          <div
+          <div className='layer-ti'>
-            className='search-list-ti'
+            <h4>지역</h4>
-            style={{
-              color: '#555',
-              border: '1px solid #ddd',
-              minWidth: '50px',
-              width: '60px'
-            }}
-          >
-            지역
           </div>
-          <div className='search-list'>
+          <div className='input-btn-2n'>
-            <div className='search-list-cont'>
+              <div className='list-input'>
-              <CustomInput
+                <CustomInput
-                inline
+                  inline
-                type='select'
+                  type='select'
-                id=''
+                  id=''
-                bsSize='sm'
+                  bsSize='sm'
-                value={filterArea}
+                  value={filterArea}
-                onChange={e => setFilterArea(e.target.value)}
+                  onChange={e => setFilterArea(e.target.value)}
-              >
+                >
-                <option value='' selected>
+                  <option value='' selected>
-                  전체
+                    전체
-                </option>
+                  </option>
-                <option value='gimpo'>김포공항 관제권</option>
+                  <option value='gimpo'>김포공항 관제권</option>
-              </CustomInput>
+                </CustomInput>
+            </div>
+            <div className='list-input-btn'>
+                <Button
+                    color='primary'
+                    onClick={() =>
+                      props.handlerSearch(filterId, searchDate, filterArea)
+                    }
+                    size='sm'
+                  >
+                    검색
+                  </Button>
+              </div>
             </div>
-          </div>
-          <Button
-            color='primary'
-            onClick={() =>
-              props.handlerSearch(filterId, searchDate, filterArea)
-            }
-            size='sm'
-          >
-            검색
-          </Button>
         </div>
       </div>
     </div>

src/components/flight/NewFlightApprovalsTable.js

@@ -146,8 +146,7 @@ export default function NewFlightApprovalsTable(props) {
       title: (
         <>
           행정 <br />
-          구역
+          구역 2
-          <br />2
         </>
       ),
       dataIndex: 'areaList',
@@ -255,9 +254,8 @@ export default function NewFlightApprovalsTable(props) {
     {
       title: (
         <>
-          긴급 <br />
+          긴급<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,26 +747,36 @@ 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'>
-        <h4>비행승인 신청 검토결과 목록</h4>
+        <div>
-        <span className='search-case'>
+          <h4>비행승인 신청 검토결과 목록</h4>
-          {formatDate(props.startDate)}
+        </div>
-          {props.endDate && props.startDate !== props.endDate
-            ? '~' + formatDate(props.endDate) + ' '
-            : null}
-          총 {approvalCdValue.S + approvalCdValue.F + approvalCdValue.U} 건
-        </span>
       </div>
+      <div className='search-download'>
+          <div>
+            <span className='search-case'>
+              {formatDate(props.startDate)}
+              {props.endDate && props.startDate !== props.endDate
+                ? '~' + formatDate(props.endDate) + ' '
+                : null}
+              총 {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>