비행 승인 신청 데이터 수정 css미적용

src/components/flight/FlightApprovalsTable.js

@@ -10,12 +10,26 @@ export default function FlightApprovalsTable(props) {
 
   const { laancAprvList, laancElev } = useSelector(state => state.laancState);
 
+  const conditionalRowStyles = [
+    {
+      when: row => row.areaList[0].approvalCd === 'F',
+      classNames: ['flight-not-approval-row']
+    },
+    {
+      when: row => row.areaList[0].approvalCd === 'S',
+      classNames: ['flight-approval-row']
+    },
+    {
+      when: row => row.areaList[0].approvalCd === props.selected,
+      classNames: ['flight-approval-row-click']
+    }
+  ];
+
   const columns = [
     {
       name: '신청번호',
       selector: row => row.applyNo,
       center: true,
-      width: '202px',
       cell: row => {
         return row.applyNo;
       }
@@ -24,11 +38,102 @@ export default function FlightApprovalsTable(props) {
       name: '신청일자',
       selector: row => row.applyDt,
       center: true,
-      width: '182px',
-      sortable: true,
       cell: row => {
         return dayjs(row.applyDt).format('YYYY-MM-DD');
       }
+    },
+    {
+      name: '비행구역',
+      selector: row => row.areaList[0].zoneNo,
+      center: true,
+      sortable: true,
+      cell: row => {
+        return row.areaList[0].zoneNo + '번';
+      }
+    },
+    {
+      name: '중심좌표(위도/경도)',
+      selector: row => row.areaList[0].lat,
+      center: true,
+
+      sortable: true,
+      cell: row => {
+        return `${row.areaList[0].lat.toFixed(5)}/${row.areaList[0].lon.toFixed(
+          5
+        )}`;
+      }
+    },
+    {
+      name: '반경(m)',
+      selector: row => row.areaList[0].bufferZone,
+      center: true,
+
+      sortable: true,
+      cell: row => {
+        return row.areaList[0].bufferZone;
+      }
+    },
+    {
+      name: '고도(m)',
+      selector: row => row.areaList[0].fltElev,
+      center: true,
+
+      sortable: true,
+      cell: row => {
+        return row.areaList[0].fltElev;
+      }
+    },
+    {
+      name: '검토결과',
+      selector: row => row.areaList[0].approvalCd,
+      center: true,
+
+      sortable: true,
+      cell: row => {
+        return row.areaList[0].approvalCd === 'U'
+          ? '비대상'
+          : row.areaList[0].approvalCd === 'S'
+          ? '승인'
+          : '미승인';
+      }
+    },
+    {
+      name: '사유보기',
+      selector: row => row.areaList[0].approvalCd,
+      center: true,
+      cell: row => {
+        return (
+          <Button
+            color='flat-dark'
+            onClick={() =>
+              handlerOpenModal(
+                row.areaList[0].approvalCd,
+                row.areaList[0].fltElev,
+                row.areaList[0].fltElevMax
+              )
+            }
+          >
+            사유보기
+          </Button>
+        );
+      }
+    },
+    {
+      name: '더보기',
+      selector: row => row.areaList,
+      center: true,
+      cell: row => {
+        return row.areaList.length > 1 ? (
+          <Button
+            color='flat-dark'
+            // onClick={() =>}
+          >
+            {row.areaList.length}건 더 보기
+          </Button>
+        ) : (
+          '-'
+        );
+      }
     }
   ];
 
@@ -135,6 +240,24 @@ export default function FlightApprovalsTable(props) {
     );
   };
 
+  // const customStyles = {
+  //   rows: {
+  //     style: {
+  //       minHeight: '70px'
+  //     }
+  //   },
+  //   header: {
+  //     style: {
+  //       width: '20px'
+  //     }
+  //   },
+  //   cells: {
+  //     style: {
+  //       width: '10px'
+  //     }
+  //   }
+  // };
+
   return (
     <div className='layer-content'>
       <div className='layer-ti d-flex justify-content-between align-items-center'>
@@ -155,6 +278,8 @@ export default function FlightApprovalsTable(props) {
                 data={laancAprvList}
                 columns={columns}
                 pagination={true}
+                // customStyles={customStyles}
+                conditionalRowStyles={conditionalRowStyles}
                 FlightInfoComponent={FlightInfoComponent}
               />
             ) : (