비행 승인 주석 추가

src/components/flight/FlightApprovalsTable.js

@@ -10,15 +10,25 @@ import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
 export default function FlightApprovalsTable(props) {
   const dispatch = useDispatch();
 
+  // 비행승인 목록
   const { laancAprvList, laancElev } = useSelector(state => state.laancState);
 
+  // 승인, 미승인, 비대상 건수
   const [approvalCdValue, setApprovalCdValue] = useState({
     S: 0,
     F: 0,
     U: 0
   });
+
+  // 행 토글
   const [expandedRows, setExpandedRows] = useState({});
 
+  // 승인, 미승인, 비대상 건수 계산
+  useEffect(() => {
+    resApprovalCd();
+  }, [laancAprvList]);
+
+  // 행 토글
   const toggleRow = rowId => {
     setExpandedRows({
       ...expandedRows,
@@ -26,38 +36,7 @@ export default function FlightApprovalsTable(props) {
     });
   };
 
-  const conditionalRowStyles = [
-    {
-      when: row => row.areaList[0].approvalCd === 'F',
-      classNames: ['flight-not-approval-row']
-    },
-    {
-      when: row => row.areaList[0].approvalCd === 'S',
-      classNames: ['flight-approval-row']
-    },
-    {
-      when: row =>
-        row.areaList[0].planAreaSno === props.selected && !row.isExpandableRow,
-      style: row => ({ border: '2px solid #000', cursor: 'pointer' })
-      // classNames: ['flight-approval-row-click']
-    }
-  ];
-
-  const inConditionalRowStyles = [
-    {
-      when: row => row.approvalCd === 'F',
-      classNames: ['flight-not-approval-row']
-    },
-    {
-      when: row => row.approvalCd === 'S',
-      classNames: ['flight-approval-row']
-    },
-    {
-      when: row => row.planAreaSno === props.selected,
-      classNames: ['flight-approval-row-click']
-    }
-  ];
-
+  // 테이블 컬럼
   const columns = [
     {
       name: (
@@ -209,37 +188,8 @@ export default function FlightApprovalsTable(props) {
     }
   ];
 
-  const handlerOpenModal = (approval, fltElev, fltElevMax) => {
-    if (approval === 'F') {
-      dispatch(
-        openModal({
-          header: '미승인 사유',
-          body: `관제권 내 제한고도(신청고도${fltElev}m/허용고도${fltElevMax}m) 입니다.`,
-          type: 'error'
-        })
-      );
-    } else if (approval === 'S') {
-      dispatch(
-        openModal({
-          header: '승인 사유',
-          body: `관제권 내 허용고도(신청고도${fltElev}m/허용고도${fltElevMax}m) 입니다.`,
-          type: 'success'
-        })
-      );
-    } else {
-      dispatch(
-        openModal({
-          header: '비대상',
-          body: `해당 구역은 비 대상(신청고도${fltElev}m/허용고도${
-            fltElevMax === undefined ? 150 : null
-          }m) 지역 입니다.`,
-          type: 'error'
-        })
-      );
-    }
-  };
-
-  const nestedColumns = [
+  // 테이블 내부 컬럼
+  const InfoColumns = [
     {
       selector: row => row.applyNo,
       center: true,
@@ -332,6 +282,71 @@ export default function FlightApprovalsTable(props) {
     }
   ];
 
+  // 테이블 행 조건부 스타일
+  const conditionalRowStyles = [
+    {
+      when: row => row.areaList[0].approvalCd === 'F',
+      classNames: ['flight-not-approval-row']
+    },
+    {
+      when: row => row.areaList[0].approvalCd === 'S',
+      classNames: ['flight-approval-row']
+    },
+    {
+      when: row =>
+        row.areaList[0].planAreaSno === props.selected && !row.isExpandableRow,
+      style: row => ({ border: '2px solid #000', cursor: 'pointer' })
+      // classNames: ['flight-approval-row-click']
+    }
+  ];
+
+  // 테이블 내부 행 조건부 스타일
+  const inConditionalRowStyles = [
+    {
+      when: row => row.approvalCd === 'F',
+      classNames: ['flight-not-approval-row']
+    },
+    {
+      when: row => row.approvalCd === 'S',
+      classNames: ['flight-approval-row']
+    },
+    {
+      when: row => row.planAreaSno === props.selected,
+      classNames: ['flight-approval-row-click']
+    }
+  ];
+
+  // 모달 오픈 핸들러
+  const handlerOpenModal = (approval, fltElev, fltElevMax) => {
+    if (approval === 'F') {
+      dispatch(
+        openModal({
+          header: '미승인 사유',
+          body: `관제권 내 제한고도(신청고도${fltElev}m/허용고도${fltElevMax}m) 입니다.`,
+          type: 'error'
+        })
+      );
+    } else if (approval === 'S') {
+      dispatch(
+        openModal({
+          header: '승인 사유',
+          body: `관제권 내 허용고도(신청고도${fltElev}m/허용고도${fltElevMax}m) 입니다.`,
+          type: 'success'
+        })
+      );
+    } else {
+      dispatch(
+        openModal({
+          header: '비대상',
+          body: `해당 구역은 비 대상(신청고도${fltElev}m/허용고도${
+            fltElevMax === undefined ? 150 : null
+          }m) 지역 입니다.`,
+          type: 'error'
+        })
+      );
+    }
+  };
+
   // 테이블 내부 행 클릭 이벤트
   const handleInRowClick = row => {
     handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax);
@@ -357,7 +372,7 @@ export default function FlightApprovalsTable(props) {
             className='flight-approval-in-table'
             noTableHead={true}
             data={data.areaList.slice(1)}
-            columns={nestedColumns}
+            columns={InfoColumns}
             conditionalRowStyles={inConditionalRowStyles}
             onRowClicked={handleInRowClick}
           />
@@ -375,11 +390,6 @@ export default function FlightApprovalsTable(props) {
     return `${year} 년 ${month} 월 ${day} 일`;
   };
 
-  // 승인, 미승인, 비대상 건수 계산
-  useEffect(() => {
-    resApprovalCd();
-  }, [laancAprvList]);
-
   // 승인, 미승인, 비대상 건수 계산
   const resApprovalCd = () => {
     let approvalCdValue = { S: 0, F: 0, U: 0 };