확장 행 편집 기능 추가

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,6 +571,7 @@ export default function NewFlightApprovalsTable(props) {
     });
 
     return (
+      <Form form={form} component={false}>
         <Table
           rowClassName={record => {
             let className = '';
@@ -593,9 +587,31 @@ export default function NewFlightApprovalsTable(props) {
             return className;
           }}
           size='small'
-        columns={childColumns}
+          columns={childColumns.map(col => {
+            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' 버튼인지 확인
@@ -613,6 +629,7 @@ export default function NewFlightApprovalsTable(props) {
           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(); // 숫자 외의 입력을 막음