feat/수정 시 팝업 추가

src/components/flight/ControlApprovalsTable.js

@@ -49,6 +49,10 @@ export default function ControlApprovalsTable(props) {
   // 체크박스 선택
   const [checkList, setCheckList] = useState([]);
 
+  const [currentRow, setCurrentRow] = useState(null);
+
+  const [currentPlanAreaSno, setCurrentPlanAreaSno] = useState(null);
+
   useEffect(() => {
     let approvalCdValue = { S: 0, F: 0, C: 0, U: 0 };
 
@@ -78,8 +82,6 @@ export default function ControlApprovalsTable(props) {
     }
   }, [laancAprvList]);
 
-  const [currentPlanAreaSno, setCurrentPlanAreaSno] = useState(null);
-
   // input 수정 컴포넌트
   const EditableCell = ({
     editable,
@@ -93,15 +95,51 @@ export default function ControlApprovalsTable(props) {
     const save = async () => {
       try {
         const values = await form.validateFields();
+        const newValue = values[`${record.planAreaSno}_${dataIndex}`];
+
+        if (record[dataIndex] !== newValue) {
+          setCurrentRow({
+            planAreaSno: record.planAreaSno,
+            dataIndex: dataIndex,
+            originalValue: record[dataIndex], // 원래 값을 저장
+            newValue: values[`${record.planAreaSno}_${dataIndex}`] // 새로운 값을 저장
+          });
 
+          // 변경된 값이 반영된 상태에서 모달을 띄웁니다.
+
+          let descValue = '';
+
+          switch (dataIndex) {
+            case 'fltElev':
+              descValue = `신청 고도를`;
+              break;
+            case 'era':
+              descValue = `긴급 구조 기관을`;
+              break;
+            case 'rm':
+              descValue = `비고를`;
+              break;
+            case 'dtl':
+              descValue = `세부 사항을`;
+              break;
+            case 'reqRadius':
+              descValue = `요청 반경을`;
+              break;
+            case 'reqElev':
+              descValue = `요청 고도를`;
+            default:
+          }
           setModal({
             isOpen: true,
             title: '수정 확인',
-          desc: '데이터를 수정하시겠습니까?',
+            desc: `${descValue} 수정하시겠습니까?`,
             type: 'edit',
             row: { ...record, ...values }
           });
-      } catch (errInfo) {}
+        }
+      } catch (errInfo) {
+        console.error('Save failed:', errInfo);
+      }
     };
 
     let childNode = children;
@@ -112,9 +150,15 @@ export default function ControlApprovalsTable(props) {
           className='editable-input'
           name={`${record.planAreaSno}_${dataIndex}`} // 고유한 이름 설정
           initialValue={record[dataIndex]}
-          onClick={e => e.stopPropagation()} // 클릭 이벤트 전파 중지
         >
-          <Input onPressEnter={save} onBlur={save} />
+          <Input
+            onPressEnter={save}
+            onBlur={e => {
+              e.stopPropagation();
+              save();
+            }}
+            onClick={e => e.stopPropagation()}
+          />
         </Form.Item>
       );
     }
@@ -122,6 +166,48 @@ export default function ControlApprovalsTable(props) {
     return <td {...restProps}>{childNode}</td>;
   };
 
+  const handleCancel = () => {
+    if (currentRow) {
+      const { planAreaSno, dataIndex, originalValue } = currentRow;
+
+      // 필드의 원래 값을 다시 설정
+      form.setFieldsValue({
+        [`${planAreaSno}_${dataIndex}`]: originalValue
+      });
+    }
+  };
+
+  const handleSave = async row => {
+    try {
+      const updateRes = await dispatch(
+        updateLaancAprv([
+          {
+            planAreaSno: row.key,
+            reqRadius: row[`${row.key}_reqRadius`] || '',
+            fltElev: row[`${row.key}_fltElev`] || '',
+            reqElev: row[`${row.key}_reqElev`] || '',
+            dtl: row[`${row.key}_dtl`] || '',
+            era: row[`${row.key}_era`] || '',
+            rm: row[`${row.key}_rm`] || ''
+          }
+        ])
+      );
+
+      if (updateRes.meta.requestStatus === 'fulfilled') {
+        props.handlerSearch(
+          props.filterId,
+          { startDate: props.startDate, endDate: props.endDate },
+          props.filterArea
+        );
+        setEditingKey('');
+      } else {
+        handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true);
+      }
+    } catch (errInfo) {
+      handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true);
+    }
+  };
+
   // 데이터
   const columns = [
     {
@@ -483,48 +569,6 @@ export default function ControlApprovalsTable(props) {
     }
   ];
 
-  const handleIsModal = record => {
-    dispatch(
-      openModal({
-        header: '재검토 사유',
-        body: record.reviewedReason,
-        type: 'review'
-      })
-    );
-  };
-
-  const handleSave = async row => {
-    try {
-      const updateRes = await dispatch(
-        updateLaancAprv([
-          {
-            planAreaSno: row.key,
-            reqRadius: row[`${row.key}_reqRadius`] || '',
-            fltElev: row[`${row.key}_fltElev`] || '',
-            reqElev: row[`${row.key}_reqElev`] || '',
-            dtl: row[`${row.key}_dtl`] || '',
-            era: row[`${row.key}_era`] || '',
-            rm: row[`${row.key}_rm`] || ''
-          }
-        ])
-      );
-
-      if (updateRes.meta.requestStatus === 'fulfilled') {
-        setEditingKey('');
-        // await dispatch(
-        //   getLaancAprvList({
-        //     searchStDt: props.startDate,
-        //     searchEndDt: props.endDate
-        //   })
-        // );
-      } else {
-        handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true);
-      }
-    } catch (errInfo) {
-      handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true);
-    }
-  };
-
   // 테이블 데이터
   const mergedColumns = columns.map(col => {
     if (!col.editable) {
@@ -542,6 +586,7 @@ export default function ControlApprovalsTable(props) {
       })
     };
   });
+
   // 단순 메시지 표출 모달
   const handlerErrorModal = (header, body, isRefresh) => {
     dispatch(
@@ -629,8 +674,13 @@ export default function ControlApprovalsTable(props) {
 
   // 테이블 행 클릭 이벤트
   const handleRowClick = row => {
+    const activeElement = document.activeElement;
+    if (activeElement && activeElement.tagName === 'INPUT') {
+      activeElement.blur(); // 강제로 blur 이벤트를 발생시킴
+    } else {
       handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax);
       props.handlerDetail([row]);
+    }
   };
 
   const handlePageChange = () => {
@@ -947,6 +997,7 @@ export default function ControlApprovalsTable(props) {
                           ? updateReviewedType('P', currentPlanAreaSno)
                           : handleSave(modal.row)
                       }
+                      handleCancel={handleCancel}
                       color='primary'
                     />
                   )}

src/components/flight/OperationApprovalsTable.js

@@ -39,9 +39,6 @@ export default function OperationApprovalsTable(props) {
   // 수정 키
   const [editingKey, setEditingKey] = useState('');
 
-  // select row key
-  const [selectedRowKey, setSelectedRowKey] = useState('');
-
   const [ismodal, setIsModal] = useState(false);
 
   const [form] = Form.useForm();
@@ -55,7 +52,7 @@ export default function OperationApprovalsTable(props) {
   // 유효성 기체 데이터
   const [validData, setValidData] = useState();
 
-  const [reviewedTypeValue, setReviewedTypeValue] = useState('');
+  const [currentRow, setCurrentRow] = useState(null);
 
   // 확인 모달
   const [modal, setModal] = useState({
@@ -106,15 +103,42 @@ export default function OperationApprovalsTable(props) {
     const save = async () => {
       try {
         const values = await form.validateFields();
+        const newValue = values[`${record.planAreaSno}_${dataIndex}`];
+
+        if (record[dataIndex] !== newValue) {
+          setCurrentRow({
+            planAreaSno: record.planAreaSno,
+            dataIndex: dataIndex,
+            originalValue: record[dataIndex], // 원래 값을 저장
+            newValue: values[`${record.planAreaSno}_${dataIndex}`] // 새로운 값을 저장
+          });
+
+          // 변경된 값이 반영된 상태에서 모달을 띄웁니다.
+
+          let descValue = '';
 
+          switch (dataIndex) {
+            case 'fltElev':
+              descValue = `신청 고도를`;
+              break;
+            case 'reqRadius':
+              descValue = `요청 반경을`;
+              break;
+            case 'reqElev':
+              descValue = `요청 고도를`;
+            default:
+          }
           setModal({
             isOpen: true,
             title: '수정 확인',
-          desc: '데이터를 수정하시겠습니까?',
+            desc: `${descValue} 수정하시겠습니까?`,
             type: 'edit',
             row: { ...record, ...values }
           });
-      } catch (errInfo) {}
+        }
+      } catch (errInfo) {
+        console.error('Save failed:', errInfo);
+      }
     };
 
     let childNode = children;
@@ -125,9 +149,15 @@ export default function OperationApprovalsTable(props) {
           className='editable-input'
           name={`${record.planAreaSno}_${dataIndex}`} // 고유한 이름 설정
           initialValue={record[dataIndex]}
-          onClick={e => e.stopPropagation()} // 클릭 이벤트 전파 중지
         >
-          <Input onPressEnter={save} onBlur={save} />
+          <Input
+            onPressEnter={save}
+            onBlur={e => {
+              e.stopPropagation();
+              save();
+            }}
+            onClick={e => e.stopPropagation()}
+          />
         </Form.Item>
       );
     }
@@ -135,8 +165,43 @@ export default function OperationApprovalsTable(props) {
     return <td {...restProps}>{childNode}</td>;
   };
 
-  const handlePageChange = () => {
+  const handleCancel = () => {
-    document.activeElement?.blur();
+    if (currentRow) {
+      const { planAreaSno, dataIndex, originalValue } = currentRow;
+
+      // 필드의 원래 값을 다시 설정
+      form.setFieldsValue({
+        [`${planAreaSno}_${dataIndex}`]: originalValue
+      });
+    }
+  };
+
+  const handleSave = async row => {
+    try {
+      const updateRes = await dispatch(
+        updateLaancAprv([
+          {
+            planAreaSno: row.key,
+            reqRadius: row[`${row.key}_reqRadius`] || '',
+            fltElev: row[`${row.key}_fltElev`] || '',
+            reqElev: row[`${row.key}_reqElev`] || ''
+          }
+        ])
+      );
+
+      if (updateRes.meta.requestStatus === 'fulfilled') {
+        props.handlerSearch(
+          props.filterId,
+          { startDate: props.startDate, endDate: props.endDate },
+          props.filterArea
+        );
+        setEditingKey('');
+      } else {
+        handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true);
+      }
+    } catch (errInfo) {
+      handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true);
+    }
   };
 
   // 검토 상태 변경
@@ -626,34 +691,6 @@ export default function OperationApprovalsTable(props) {
       );
     }
   };
-  const handleSave = async row => {
-    try {
-      const updateRes = await dispatch(
-        updateLaancAprv([
-          {
-            planAreaSno: row.key,
-            reqRadius: row[`${row.key}_reqRadius`] || '',
-            fltElev: row[`${row.key}_fltElev`] || '',
-            reqElev: row[`${row.key}_reqElev`] || ''
-          }
-        ])
-      );
-
-      if (updateRes.meta.requestStatus === 'fulfilled') {
-        setEditingKey('');
-        // await dispatch(
-        //   getLaancAprvList({
-        //     searchStDt: props.startDate,
-        //     searchEndDt: props.endDate
-        //   })
-        // );
-      } else {
-        handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true);
-      }
-    } catch (errInfo) {
-      handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true);
-    }
-  };
 
   // 단순 메시지 표출 모달
   const handlerErrorModal = (header, body, isRefresh) => {
@@ -719,10 +756,14 @@ export default function OperationApprovalsTable(props) {
 
   // 테이블 행 클릭 이벤트
   const handleRowClick = row => {
+    const activeElement = document.activeElement;
+    if (activeElement && activeElement.tagName === 'INPUT') {
+      activeElement.blur(); // 강제로 blur 이벤트를 발생시킴
+    } else {
       handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax);
       props.handlerDetail([row]);
+    }
   };
-
   // 유효성 검사 모달창
   const handleIsModal = record => {
     setValidData({
@@ -1016,6 +1057,7 @@ export default function OperationApprovalsTable(props) {
                       setModal={setModal}
                       handlerConfirm={() => handleSave(modal.row)}
                       color='primary'
+                      handleCancel={handleCancel}
                     />
                   )}
                 </Form>

src/components/modal/ConfirmModal.js

@@ -11,6 +11,14 @@ export const ConfirmModal = props => {
     props.handlerConfirm();
     props.setModal({ ...props.modal, isOpen: !props.modal.isOpen });
   };
+
+  const handlerCancel = () => {
+    if (props.modal.type === 'edit' && props.handleCancel) {
+      props.handleCancel(); // handleCancel 함수가 올바르게 전달되었는지 확인
+    }
+    props.setModal({ ...props.modal, isOpen: !props.modal.isOpen });
+  };
+
   return (
     <div className='vertically-centered-modal'>
       <Modal
@@ -21,6 +29,8 @@ export const ConfirmModal = props => {
         // modalClassName='modal-primary'
         modalClassName={'modal-' + `${props.color}`}
         className='modal-dialog-centered'
+        backdrop={props.modal.type === 'edit' ? 'static' : false} // 백그라운드 클릭 시 모달이 닫히지 않게 설정
+        keyboard={props.modal.type === 'edit' ? true : false} // Esc 키로 모달을 닫지 않도록 설정
       >
         <ModalHeader
           toggle={() =>
@@ -36,12 +46,7 @@ export const ConfirmModal = props => {
             확인
           </Button>
 
-          <Button
+          <Button color='secondary' onClick={handlerCancel}>
-            color='secondary'
-            onClick={() =>
-              props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
-            }
-          >
             취소
           </Button>
         </ModalFooter>