확장 행 편집 기능 추가

src/components/flight/NewFlightApprovalsTable.js

@@ -5,7 +5,6 @@ import dayjs from 'dayjs';
 import { openModal } from '@src/redux/features/comn/message/messageSlice';
 import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
 import { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd';
-import { render } from 'react-dom';
 
 export default function NewFlightApprovalsTable(props) {
   const dispatch = useDispatch();
@@ -41,7 +40,6 @@ export default function NewFlightApprovalsTable(props) {
     form.setFieldsValue({
       bufferZone: '',
       fltElev: '',
-
       ...record
     });
     setEditingKey(record.key);
@@ -135,7 +133,6 @@ export default function NewFlightApprovalsTable(props) {
         <>
           행정 <br />
           구역
-          <br />
         </>
       ),
       dataIndex: 'areaList',
@@ -156,7 +153,6 @@ export default function NewFlightApprovalsTable(props) {
       dataIndex: 'areaList',
       width: '90px',
       align: 'center',
-
       render: areaList => {
         return areaList.length <= 1 ? '강서구' : '-';
       }
@@ -291,7 +287,6 @@ export default function NewFlightApprovalsTable(props) {
       dataIndex: 'areaList',
       align: 'center',
       width: '110px',
-
       render: areaList => {
         const approvalCounts = areaList.reduce(
           (counts, item) => {
@@ -480,7 +475,6 @@ export default function NewFlightApprovalsTable(props) {
       {
         dataIndex: '세부사항',
         align: 'center',
-        editable: true,
         width: '110px',
         render: text => {
           return <>기타</>;
@@ -512,7 +506,6 @@ export default function NewFlightApprovalsTable(props) {
           return <>-</>;
         }
       },
-
       {
         dataIndex: 'approvalCd',
         align: 'center',
@@ -578,41 +571,65 @@ export default function NewFlightApprovalsTable(props) {
     });
 
     return (
-      <Table
+      <Form form={form} component={false}>
-        rowClassName={record => {
+        <Table
-          let className = '';
+          rowClassName={record => {
-          if (record.approvalCd === 'S') {
+            let className = '';
-            className += 'flight-approval-row';
+            if (record.approvalCd === 'S') {
-          } else if (record.approvalCd === 'F') {
+              className += 'flight-approval-row';
-            className += 'flight-not-approval-row';
+            } else if (record.approvalCd === 'F') {
-          } else className;
+              className += 'flight-not-approval-row';
-
+            } else className;
-          if (record.planAreaSno === props.selected) {
+
-            className += ' flight-approval-row-click';
+            if (record.planAreaSno === props.selected) {
-          }
+              className += ' flight-approval-row-click';
-          return className;
-        }}
-        size='small'
-        columns={childColumns}
-        dataSource={data}
-        pagination={false}
-        onRow={record => ({
-          onClick: event => {
-            // 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인
-            if (
-              event.target.tagName !== 'BUTTON' &&
-              event.target.tagName !== 'A' &&
-              !event.target.closest('.ant-input') && // input 요소를 감지
-              !event.target.closest('.ant-input-number') // inputNumber 요소를 감지
-            ) {
-              handleInRowClick(record);
             }
-          }
+            return className;
-        })}
+          }}
-        showHeader={false}
+          size='small'
-        rowHoverable={false}
+          columns={childColumns.map(col => {
-        bordered
+            if (!col.editable) {
-      />
+              return col;
+            }
+            return {
+              ...col,
+              onCell: record => ({
+                record,
+                inputType:
+                  col.dataIndex === 'bufferZone' || col.dataIndex === 'fltElev'
+                    ? 'number'
+                    : 'text',
+                dataIndex: col.dataIndex,
+                title: col.title,
+                editing: isEditing(record)
+              })
+            };
+          })}
+          dataSource={data}
+          pagination={false}
+          components={{
+            body: {
+              cell: EditableCell
+            }
+          }}
+          onRow={record => ({
+            onClick: event => {
+              // 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인
+              if (
+                event.target.tagName !== 'BUTTON' &&
+                event.target.tagName !== 'A' &&
+                !event.target.closest('.ant-input') && // input 요소를 감지
+                !event.target.closest('.ant-input-number') // inputNumber 요소를 감지
+              ) {
+                handleInRowClick(record);
+              }
+            }
+          })}
+          showHeader={false}
+          rowHoverable={false}
+          bordered
+        />
+      </Form>
     );
   };
 
@@ -805,7 +822,7 @@ export default function NewFlightApprovalsTable(props) {
                   expandable={{
                     expandedRowRender,
                     expandedRowKeys: expandedRowKeys,
-                    onExpand: handleExpand,
+                    onExpand: (expanded, record) => handleExpand(record.key),
                     rowExpandable: record => record?.areaList?.length > 1
                   }}
                   scroll={{
@@ -842,7 +859,8 @@ const EditableCell = ({
 }) => {
   const inputNode =
     inputType === 'number' ? (
-      <Input
+      <InputNumber
+        min={0}
         onKeyPress={e => {
           if (!/[0-9]/.test(e.key)) {
             e.preventDefault(); // 숫자 외의 입력을 막음