diff --git a/src/components/flight/NewFlightApprovalsTable.js b/src/components/flight/NewFlightApprovalsTable.js index 13d91457..9a94c4ed 100644 --- a/src/components/flight/NewFlightApprovalsTable.js +++ b/src/components/flight/NewFlightApprovalsTable.js @@ -21,10 +21,13 @@ export default function NewFlightApprovalsTable(props) { // 확장된 행 키 const [expandedRowKeys, setExpandedRowKeys] = useState([]); + + // 수정 키 const [editingKey, setEditingKey] = useState(''); const [form] = Form.useForm(); + // 수정 키 확인 const isEditing = record => record.key === editingKey; // 승인, 미승인, 비대상 건수 계산 @@ -32,6 +35,7 @@ export default function NewFlightApprovalsTable(props) { resApprovalCd(); }, [laancAprvList]); + // 수정 이벤트 const edit = record => { form.setFieldsValue({ bufferZone: '', @@ -42,10 +46,12 @@ export default function NewFlightApprovalsTable(props) { setEditingKey(record.key); }; + // 취소 이벤트 const cancel = () => { setEditingKey(''); }; + // 저장 이벤트 const save = async key => { try { const row = await form.validateFields(); @@ -67,6 +73,7 @@ export default function NewFlightApprovalsTable(props) { } }; + // 데이터 const columns = [ { title: ( @@ -369,6 +376,7 @@ export default function NewFlightApprovalsTable(props) { } ]; + // 확장된 테이블 데이터 const expandedRowRender = record => { const childColumns = [ { @@ -513,8 +521,16 @@ export default function NewFlightApprovalsTable(props) { dataSource={data} pagination={false} onRow={record => ({ - onClick: () => { - handleInRowClick(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} @@ -524,6 +540,7 @@ export default function NewFlightApprovalsTable(props) { ); }; + // 테이블 데이터 const mergedColumns = columns.map(col => { if (!col.editable) { return col; @@ -574,14 +591,6 @@ export default function NewFlightApprovalsTable(props) { } }; - // 테이블 내부 행 클릭 이벤트 - const handleInRowClick = row => { - console.log('>>', row); - - handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax); - props.handlerDetail(row); - }; - // 날짜 포맷 변경 const formatDate = dateString => { const date = new Date(dateString); @@ -614,6 +623,7 @@ export default function NewFlightApprovalsTable(props) { }); }; + // const handleExpand = key => { const expanded = expandedRowKeys.includes(key); const keys = expanded @@ -633,6 +643,14 @@ export default function NewFlightApprovalsTable(props) { props.handlerDetail(row.areaList[0]); }; + // 확장된 테이블 행 클릭 이벤트 + const handleInRowClick = row => { + console.log('>>', row); + + handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax); + props.handlerDetail(row); + }; + return (
@@ -679,6 +697,8 @@ export default function NewFlightApprovalsTable(props) { ...item, key: index }))} + 테이블 + 데이터 columns={mergedColumns} rowClassName={record => { let className = ''; @@ -692,8 +712,16 @@ export default function NewFlightApprovalsTable(props) { }} pagination={false} onRow={record => ({ - onClick: () => { - handleRowClick(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 요소를 감지 + ) { + handleRowClick(record); + } } })} expandable={{ @@ -746,7 +774,7 @@ const EditableCell = ({ rules={[ { required: true, - message: `Please Input ${title}!` + message: `값을 입력 해 주세요.` } ]} >