테이블 클릭 이벤트 분기 처리

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 (
     <div className='layer-content'>
       <div className='layer-ti d-flex justify-content-between align-items-center'>
@@ -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: `값을 입력 해 주세요.`
             }
           ]}
         >