From 4922b5c0203dab3590fdc31ffcc4e71f3351778b Mon Sep 17 00:00:00 2001 From: sanguu516 Date: Fri, 21 Jun 2024 15:51:05 +0900 Subject: [PATCH] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=B6=84=EA=B8=B0=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/NewFlightApprovalsTable.js | 54 ++++++++++++++----- 1 file changed, 41 insertions(+), 13 deletions(-) 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: `값을 입력 해 주세요.` } ]} >