From 340ef35e5c04d7a9c2d6eabd7cac71591770823d Mon Sep 17 00:00:00 2001
From: sanguu516 <sanguu516@naver.com>
Date: Tue, 4 Jun 2024 18:16:23 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=8A=B9=EC=9D=B8=20?=
 =?UTF-8?q?=EC=8B=A0=EC=B2=AD=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20css=EB=AF=B8=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/flight/FlightApprovalsTable.js | 131 +++++++++++++++++-
 1 file changed, 128 insertions(+), 3 deletions(-)

diff --git a/src/components/flight/FlightApprovalsTable.js b/src/components/flight/FlightApprovalsTable.js
index 684a7f38..b92d3304 100644
--- a/src/components/flight/FlightApprovalsTable.js
+++ b/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}
               />
             ) : (