diff --git a/src/components/flight/NewFlightApprovalsTable.js b/src/components/flight/NewFlightApprovalsTable.js index 79b6d06c..8558be2e 100644 --- a/src/components/flight/NewFlightApprovalsTable.js +++ b/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) { <> 행정
구역 -
), 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 ( - { - let className = ''; - if (record.approvalCd === 'S') { - className += 'flight-approval-row'; - } else if (record.approvalCd === 'F') { - className += 'flight-not-approval-row'; - } else className; - - 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); + +
{ + let className = ''; + if (record.approvalCd === 'S') { + className += 'flight-approval-row'; + } else if (record.approvalCd === 'F') { + className += 'flight-not-approval-row'; + } else className; + + if (record.planAreaSno === props.selected) { + className += ' flight-approval-row-click'; } - } - })} - showHeader={false} - rowHoverable={false} - bordered - /> + return className; + }} + size='small' + 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' 버튼인지 확인 + 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 + /> + ); }; @@ -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' ? ( - { if (!/[0-9]/.test(e.key)) { e.preventDefault(); // 숫자 외의 입력을 막음