테이블 수정

package-lock.json

@@ -26960,6 +26960,44 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "table": {
+      "version": "6.8.2",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz",
+      "integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==",
+      "requires": {
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.16.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.16.0.tgz",
+          "integrity": "sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==",
+          "requires": {
+            "fast-deep-equal": "^3.1.3",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.4.1"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",

src/assets/css/custom.css

@@ -1181,7 +1181,7 @@ 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:635px;overflow:scroll;}
+.flight-approval-layer{width:665px;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}

src/components/flight/NewFlightApprovalsTable.js

@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 import { openModal } from '@src/redux/features/comn/message/messageSlice';
 import { Table } from 'antd';
 import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
+import { area } from '@turf/turf';
 
 export default function NewFlightApprovalsTable(props) {
   const dispatch = useDispatch();
@@ -86,12 +87,14 @@ export default function NewFlightApprovalsTable(props) {
           구역
         </>
       ),
-      dataIndex: 'applyDt',
+      dataIndex: 'areaList',
       width: '75px',
       align: 'center',
-      key: 'applyDt',
+      key: 'adress',
       editable: true,
-      render: text => '서울시 마포구상암동 1674 (원추)'
+      render: areaList => {
+        return areaList.length <= 1 ? '서울시 마포구상암동1674(원추)' : '-';
+      }
     },
     {
       title: (
@@ -105,13 +108,17 @@ export default function NewFlightApprovalsTable(props) {
       width: '85px',
       key: 'latLon',
       editable: true,
-      render: areaList => (
-        <>
-          {areaList[0].lat.toFixed(5)},
-          <br />
-          {areaList[0].lon.toFixed(5)}
-        </>
-      )
+      render: areaList => {
+        return areaList.length <= 1 ? (
+          <>
+            {areaList[0].lat.toFixed(5)},
+            <br />
+            {areaList[0].lon.toFixed(5)}
+          </>
+        ) : (
+          '-'
+        );
+      }
     },
     {
       title: (
@@ -125,7 +132,9 @@ export default function NewFlightApprovalsTable(props) {
       width: '70px',
       key: 'bufferZone',
       editable: true,
-      render: areaList => <>{areaList[0].bufferZone}</>
+      render: areaList => {
+        return areaList.length <= 1 ? <>{areaList[0].bufferZone}</> : '-';
+      }
     },
     {
       title: (
@@ -139,7 +148,9 @@ export default function NewFlightApprovalsTable(props) {
       align: 'center',
       width: '70px',
       editable: true,
-      render: areaList => <>{areaList[0].fltElev}</>
+      render: areaList => {
+        return areaList.length <= 1 ? <>{areaList[0].fltElev}</> : '-';
+      }
     },
     {
       title: (
@@ -150,24 +161,52 @@ export default function NewFlightApprovalsTable(props) {
       ),
       dataIndex: 'areaList',
       align: 'center',
-      width: '85px',
+      width: '100px',
       key: 'approvalCd',
       editable: true,
-      render: areaList => (
-        <>
-          {areaList[0].approvalCd === 'U'
-            ? '비대상'
-            : areaList[0].approvalCd === 'S'
-            ? '승인'
-            : '미승인'}
-        </>
-      )
+
+      render: areaList => {
+        const approvalCounts = areaList.reduce(
+          (counts, item) => {
+            if (item.approvalCd === 'U') {
+              counts.unapproved += 1;
+            } else if (item.approvalCd === 'S') {
+              counts.approved += 1;
+            } else {
+              counts.pending += 1;
+            }
+            return counts;
+          },
+          { unapproved: 0, approved: 0, pending: 0 }
+        );
+
+        return (
+          <>
+            {areaList.length > 1 ? (
+              <>
+                승인: {approvalCounts.approved}건 <br />
+                미승인:
+                {approvalCounts.pending}건<br /> 비대상:
+                {approvalCounts.unapproved}건
+              </>
+            ) : (
+              <>
+                {areaList[0].approvalCd === 'U'
+                  ? '비대상'
+                  : areaList[0].approvalCd === 'S'
+                  ? '승인'
+                  : '미승인'}
+              </>
+            )}
+          </>
+        );
+      }
     },
     {
       title: <>더보기</>,
       dataIndex: 'areaList',
       align: 'center',
-      width: '80px',
+      width: '95px',
       key: 'more',
       editable: true,
       render: (areaList, record) =>
@@ -212,6 +251,13 @@ export default function NewFlightApprovalsTable(props) {
         key: 'zoneNo',
         editable: true
       },
+      {
+        dataIndex: '홍길동',
+        align: 'center',
+        width: '85px',
+        key: '홍길동',
+        editable: true
+      },
       {
         align: 'center',
         width: '85px',
@@ -252,7 +298,6 @@ export default function NewFlightApprovalsTable(props) {
 
     const data = [];
     record.areaList.map((item, index) => {
-      if (index < 1) return;
       data.push({
         key: `${record.applyNo}-${index}`,
         applyNo: item.applyNo,
@@ -279,10 +324,10 @@ export default function NewFlightApprovalsTable(props) {
           return className;
         }}
         size='small'
-        bordered
         columns={childColumns}
         dataSource={data}
         pagination={false}
+        rowHoverable={false}
         showHeader={false}
       />
     );
@@ -424,7 +469,6 @@ export default function NewFlightApprovalsTable(props) {
                   onExpand: handleExpand,
                   rowExpandable: record => record.areaList.length > 1 // areaList가 1개 이상인 경우에만 확장 가능
                 }}
-                tableLayout='auto'
                 rowHoverable={false}
                 expandIconColumnIndex={-1} // 기본 확장 아이콘을 숨김
               />