테이블 클릭 이벤트 추가 및 데이터 가공

src/components/flight/NewFlightApprovalsTable.js

@@ -78,9 +78,7 @@ export default function NewFlightApprovalsTable(props) {
       ),
       dataIndex: 'applyNo',
       align: 'center',
-      width: '40px',
+      width: '40px'
-
-      editable: true
     },
     {
       title: (
@@ -91,8 +89,6 @@ export default function NewFlightApprovalsTable(props) {
       dataIndex: 'applyDt',
       width: '80px',
       align: 'center',
-
-      editable: true,
       render: text => dayjs(text).format(' M월')
     },
     {
@@ -104,8 +100,6 @@ export default function NewFlightApprovalsTable(props) {
       dataIndex: 'applyDt',
       width: '80px',
       align: 'center',
-
-      editable: true,
       render: text => dayjs(text).format('DD일')
     },
     {
@@ -118,8 +112,6 @@ export default function NewFlightApprovalsTable(props) {
       dataIndex: 'areaList',
       align: 'center',
       width: '85px',
-
-      editable: true,
       render: areaList => <>총{areaList.length}건</>
     },
     {
@@ -128,7 +120,6 @@ export default function NewFlightApprovalsTable(props) {
       width: '90px',
       align: 'center',
 
-      editable: true,
       render: text => '홍*동'
     },
     {
@@ -143,7 +134,6 @@ export default function NewFlightApprovalsTable(props) {
       width: '90px',
       align: 'center',
 
-      editable: true,
       render: areaList => {
         return areaList.length <= 1 ? '서울시특별시' : '-';
       }
@@ -160,7 +150,6 @@ export default function NewFlightApprovalsTable(props) {
       width: '90px',
       align: 'center',
 
-      editable: true,
       render: areaList => {
         return areaList.length <= 1 ? '강서구' : '-';
       }
@@ -175,8 +164,6 @@ export default function NewFlightApprovalsTable(props) {
       dataIndex: 'areaList',
       width: '100px',
       align: 'center',
-
-      editable: true,
       render: areaList => {
         return areaList.length <= 1 ? '가양동439-1(원추)' : '-';
       }
@@ -191,8 +178,6 @@ export default function NewFlightApprovalsTable(props) {
       dataIndex: 'areaList',
       align: 'center',
       width: '85px',
-
-      editable: true,
       render: areaList => {
         return areaList.length <= 1 ? (
           <>
@@ -212,12 +197,12 @@ export default function NewFlightApprovalsTable(props) {
           반경
         </>
       ),
-      dataIndex: 'areaList',
+      dataIndex: 'bufferZone',
       align: 'center',
       width: '70px',
       editable: true,
-      render: areaList => {
+      render: (text, record) => {
-        return areaList.length <= 1 ? <>{areaList[0].bufferZone}</> : '-';
+        return text ? text : '-';
       }
     },
     {
@@ -227,12 +212,12 @@ export default function NewFlightApprovalsTable(props) {
           고도
         </>
       ),
-      dataIndex: 'areaList',
+      dataIndex: 'fltElev',
       align: 'center',
       width: '70px',
       editable: true,
-      render: areaList => {
+      render: (text, record) => {
-        return areaList.length <= 1 ? <>{areaList[0].fltElev}</> : '-';
+        return text ? text : '-';
       }
     },
     {
@@ -245,7 +230,6 @@ export default function NewFlightApprovalsTable(props) {
       dataIndex: 'areaList',
       align: 'center',
       width: '110px',
-      editable: true,
       render: areaList => {
         return areaList.length <= 1 ? <>기타</> : '-';
       }
@@ -287,8 +271,6 @@ export default function NewFlightApprovalsTable(props) {
       align: 'center',
       width: '110px',
 
-      editable: true,
-
       render: areaList => {
         const approvalCounts = areaList.reduce(
           (counts, item) => {
@@ -331,7 +313,6 @@ export default function NewFlightApprovalsTable(props) {
       dataIndex: 'areaList',
       align: 'center',
       width: '130px',
-      editable: true,
       render: (areaList, record) =>
         areaList.length > 2 ? (
           <Button color='flat-dark' onClick={() => handleExpand(record.key)}>
@@ -358,29 +339,31 @@ export default function NewFlightApprovalsTable(props) {
       width: '110px',
       render: (_, record) => {
         const editable = isEditing(record);
-        return editable ? (
+        return record.areaList.length <= 1 ? (
-          <span>
+          editable ? (
-            <Typography.Link
+            <span>
-              onClick={() => save(record.key)}
+              <Typography.Link
-              style={{
+                onClick={() => save(record.key)}
-                marginRight: 8
+                style={{
-              }}
+                  marginRight: 8
-            >
+                }}
-              저장
+              >
-            </Typography.Link>
+                저장
-            <Popconfirm title='취소하시겠습니까?' onConfirm={cancel}>
+              </Typography.Link>
-              <a>취소</a>
+              <Typography.Link onClick={() => cancel()}>취소</Typography.Link>
-            </Popconfirm>
+            </span>
-          </span>
+          ) : (
+            <Button color='flat-dark'>
+              <Typography.Link
+                disabled={editingKey !== ''}
+                onClick={() => edit(record)}
+              >
+                Edit
+              </Typography.Link>
+            </Button>
+          )
         ) : (
-          <Button color='flat-dark'>
+          <>-</>
-            <Typography.Link
-              disabled={editingKey !== ''}
-              onClick={() => edit(record)}
-            >
-              Edit
-            </Typography.Link>
-          </Button>
         );
       }
     }
@@ -394,7 +377,12 @@ export default function NewFlightApprovalsTable(props) {
         align: 'center'
       },
       {
-        dataIndex: 'applyDt',
+        dataIndex: '6월',
+        width: '85px',
+        align: 'center'
+      },
+      {
+        dataIndex: '21일',
         width: '85px',
         align: 'center'
       },
@@ -410,6 +398,24 @@ export default function NewFlightApprovalsTable(props) {
         width: '85px',
         editable: true
       },
+      {
+        dataIndex: '서울시특별시',
+        align: 'center',
+        width: '85px',
+        editable: true
+      },
+      {
+        dataIndex: '강남구',
+        align: 'center',
+        width: '85px',
+        editable: true
+      },
+      {
+        dataIndex: '가양동439-1(원추)',
+        align: 'center',
+        width: '85px',
+        editable: true
+      },
       {
         align: 'center',
         width: '85px',
@@ -438,9 +444,40 @@ export default function NewFlightApprovalsTable(props) {
       {
         dataIndex: 'approvalCd',
         align: 'center',
+        width: '85px',
         render: text => (
           <>{text === 'U' ? '비대상' : text === 'S' ? '승인' : '미승인'}</>
         )
+      },
+      {
+        dataIndex: 'operation',
+        align: 'center',
+        width: '110px',
+        render: (_, record) => {
+          const editable = isEditing(record);
+          return editable ? (
+            <span>
+              <Typography.Link
+                onClick={() => save(record.key)}
+                style={{
+                  marginRight: 8
+                }}
+              >
+                저장
+              </Typography.Link>
+              <Typography.Link onClick={() => cancel()}>취소</Typography.Link>
+            </span>
+          ) : (
+            <Button color='flat-dark'>
+              <Typography.Link
+                disabled={editingKey !== ''}
+                onClick={() => edit(record)}
+              >
+                Edit
+              </Typography.Link>
+            </Button>
+          );
+        }
       }
     ];
 
@@ -475,7 +512,13 @@ export default function NewFlightApprovalsTable(props) {
         columns={childColumns}
         dataSource={data}
         pagination={false}
+        onRow={record => ({
+          onClick: () => {
+            handleInRowClick(record);
+          }
+        })}
         showHeader={false}
+        rowHoverable={false}
         bordered
       />
     );
@@ -579,6 +622,17 @@ export default function NewFlightApprovalsTable(props) {
     setExpandedRowKeys(keys);
   };
 
+  // 테이블 행 클릭 이벤트
+  const handleRowClick = row => {
+    if (row.areaList.length > 1) return;
+    handlerOpenModal(
+      row.areaList[0].approvalCd,
+      row.areaList[0].fltElev,
+      row.areaList[0].fltElevMax
+    );
+    props.handlerDetail(row.areaList[0]);
+  };
+
   return (
     <div className='layer-content'>
       <div className='layer-ti d-flex justify-content-between align-items-center'>
@@ -628,7 +682,7 @@ export default function NewFlightApprovalsTable(props) {
                   columns={mergedColumns}
                   rowClassName={record => {
                     let className = '';
-                    if (record.areaList[0].approvalCd === 'S') {
+                    if (record?.areaList[0]?.approvalCd === 'S') {
                       className += 'flight-approval-row editable-row';
                     } else if (record.areaList[0].approvalCd === 'F') {
                       className += 'flight-not-approval-row editable-row';
@@ -637,11 +691,16 @@ export default function NewFlightApprovalsTable(props) {
                     return className;
                   }}
                   pagination={false}
+                  onRow={record => ({
+                    onClick: () => {
+                      handleRowClick(record);
+                    }
+                  })}
                   expandable={{
                     expandedRowRender,
                     expandedRowKeys: expandedRowKeys,
                     onExpand: handleExpand,
-                    rowExpandable: record => record.areaList.length > 1
+                    rowExpandable: record => record?.areaList?.length > 1
                   }}
                   scroll={{
                     x: 1500

src/redux/features/laanc/laancThunk.ts

@@ -21,6 +21,7 @@ import {
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import { openModal } from '../comn/message/messageSlice';
 import { ERROR_TITLE, ERROR_MESSAGE } from '@src/configs/msgConst';
+import { area } from '@turf/turf';
 
 // laanc 승인
 export const setApprovalLaancFlight = createAsyncThunk(
@@ -275,7 +276,24 @@ export const getLaancAprvList = createAsyncThunk(
       const data: ILaancAprvListRs[] = await axios.get(`api/bas/dos/plan`, {
         params: rq
       });
-      return data;
+      const result = data.map(item => {
+        if (item.areaList.length <= 1) {
+          return {
+            ...item,
+            fltElev: item.areaList[0].fltElev,
+            bufferZone: item.areaList[0].bufferZone,
+            areaList: item.areaList
+          };
+        } else {
+          return {
+            ...item
+          };
+        }
+      });
+
+      console.log('>>', result);
+
+      return result;
     } catch (error) {
       openModal({
         header: ERROR_TITLE,