운항과 테이블 더보기 클릭시 모든 비행구역 및 데이터블록 표출

src/components/flight/OperationApprovalsTable.js

@@ -443,7 +443,7 @@ export default function OperationApprovalsTable(props) {
       width: '130px',
       render: (areaList, record) =>
         areaList.length > 1 ? (
-          <Button color='flat-dark' onClick={() => handleExpand(record.key)}>
+          <Button color='flat-dark' onClick={() => handleExpand(record)}>
             {expandedRowKeys.includes(record.key) ? (
               <>
                 더보기
@@ -879,12 +879,20 @@ export default function OperationApprovalsTable(props) {
     return `${year} 년 ${month} 월 ${day} 일`;
   };
 
-  const handleExpand = key => {
+  const handleExpand = record => {
+    const key = record.key;
     const expanded = expandedRowKeys.includes(key);
+
     const keys = expanded
       ? expandedRowKeys.filter(k => k !== key)
       : [...expandedRowKeys, key];
     setExpandedRowKeys(keys);
+
+    // 초기화 및 다시 셋팅(열릴때)
+    if (!expanded) {
+      console.log('----더보기');
+      props.handlerDetail(record.areaList);
+    }
   };
 
   // 테이블 행 클릭 이벤트
@@ -895,13 +903,18 @@ export default function OperationApprovalsTable(props) {
       row.areaList[0].fltElev,
       row.areaList[0].fltElevMax
     );
-    props.handlerDetail(row.areaList[0]);
+    // 초기화 및 다시 셋팅
+    console.log('=====단건 클릭');
+    props.handlerDetail([row.areaList[0]]);
   };
 
   // 확장된 테이블 행 클릭 이벤트
   const handleInRowClick = row => {
     handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax);
-    props.handlerDetail(row);
+
+    // 초기화 하지말고 포커스만 하기
+    console.log('=====단건 중 다건 클릭');
+    props.handlerDetail([row]);
   };
 
   const handleFileDownload = async type => {
@@ -1038,7 +1051,10 @@ export default function OperationApprovalsTable(props) {
                   }}
                   dataSource={laancAprvList.map((item, index) => ({
                     ...item,
-                    key: `${item.planAreaSno}-${index}`
+                    key:
+                      item.areaList.length >= 1
+                        ? `${item.planAreaSno}-${index}`
+                        : `${item.planAreaSno}`
                   }))}
                   columns={mergedColumns}
                   rowClassName={record => {
@@ -1088,7 +1104,7 @@ export default function OperationApprovalsTable(props) {
                   expandable={{
                     expandedRowRender,
                     expandedRowKeys: expandedRowKeys,
-                    onExpand: (expanded, record) => handleExpand(record.key),
+                    onExpand: (expanded, record) => handleExpand(record),
                     rowExpandable: record => record?.areaList?.length > 1
                   }}
                   scroll={{

src/containers/flight/OperationApprovalsContainer.js

@@ -34,7 +34,9 @@ import {
   Table
 } from '@component/ui';
 import { FiUsers, FiFileText } from 'react-icons/fi';
+
 import mapboxgl from 'mapbox-gl';
+import * as turf from '@turf/turf';
 
 export default function OperationApprovalsContainer({ mode }) {
   const dispatch = useDispatch();
@@ -45,6 +47,7 @@ export default function OperationApprovalsContainer({ mode }) {
   // 비행구역 그리기
 
   const [filter, setFilter] = useState('');
+
   // 지도
   const [mapObject, setMapObject] = useState();
   const [setMapType] = useMapType();
@@ -77,7 +80,8 @@ export default function OperationApprovalsContainer({ mode }) {
   // 비행구역 데이터블록
   const [dataBlocks, setDataBlocks] = useState([]);
 
-  const previewGeo2 = {
+  // 비행구역 (운항과) 레이어
+  const operationLayer = {
     type: 'FeatureCollection',
     features: []
   };
@@ -95,7 +99,7 @@ export default function OperationApprovalsContainer({ mode }) {
 
   useEffect(() => {
     if (areaCoordList.length !== 0) {
-      handlerPreviewDraw();
+      handlerAreaDraw();
     }
   }, [areaCoordList]);
 
@@ -276,9 +280,13 @@ export default function OperationApprovalsContainer({ mode }) {
   };
 
   const handlerDetail = area => {
-    setSelected(area.planAreaSno);
+    if (area.length === 1) {
+      setSelected(area[0].planAreaSno);
+    } else {
+      setSelected(null);
+    }
 
-    dispatch(clientSaveAreaCoordinateList([area]));
+    dispatch(clientSaveAreaCoordinateList(area));
 
     handlerMapInit();
   };
@@ -290,7 +298,7 @@ export default function OperationApprovalsContainer({ mode }) {
     } else {
       mapInstance.addSource('preview', {
         type: 'geojson',
-        data: previewGeo2
+        data: operationLayer
       });
       mapInstance.addLayer(flightlayerWayPoint('preview'));
       mapInstance.addLayer(flightlayerBuffer('preview'));
@@ -310,50 +318,58 @@ export default function OperationApprovalsContainer({ mode }) {
     dispatch(clientMapInit(mapInstance));
   };
 
-  const handlerPreviewDraw = () => {
+  // 더보기 펼친게 두개(A,B)인 상황에서
+  // A의 1번에 포커스 잡혀있다가 B의 1을 클릭하면
+  // B구역이 안그려지고(A구역은 그대로) 포커스만 잡히는 에러 고치기
+  const handlerAreaDraw = () => {
     if (areaCoordList.length > 0) {
-      const areas = areaCoordList[0];
+      operationLayer.features = [];
-
-      previewGeo2.features = [];
-
       let fitZoomPaths = [];
-      const radius = areas.bufferZone;
-      const circleCoords = handlerGetCircleCoord(
-        [areas.lon, areas.lat],
-        radius
-      );
-
-      const circle = InitFeature('Polygon', 'CIRCLE');
-      circle.properties.center = [areas.lon, areas.lat];
-      circle.geometry.coordinates = circleCoords;
 
-      previewGeo2.features.push(circle);
+      areaCoordList.map((area, idx) => {
+        const radius = area.bufferZone;
+        const circleCoords = handlerGetCircleCoord(
+          [area.lon, area.lat],
+          radius
+        );
 
-      mapObject?.setCenter(circle.properties.center);
+        const circle = InitFeature('Polygon', 'CIRCLE');
+        circle.properties.center = [area.lon, area.lat];
+        circle.geometry.coordinates = circleCoords;
 
-      fitZoomPaths = circleCoords[0];
+        operationLayer.features.push(circle);
+      });
 
-      handlerFitBounds(mapObject, fitZoomPaths, 400, 'CIRCLE', 'flight');
+      const features = turf.featureCollection([]);
+      operationLayer.features.map(circle => {
+        features.features.push(circle);
+      });
 
-      // mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
+      const enveloped = turf.envelope(features);
-      mapObject?.getSource('preview').setData(previewGeo2);
+      fitZoomPaths = enveloped.geometry.coordinates[0];
+      handlerFitBounds(mapObject, fitZoomPaths, 400, 'POLYGON', 'flight');
 
-      handlerInfoWindow(areaCoordList);
+      if (areaCoordList.length !== 1 || !areaCoordList[0]?.key) {
+        handlerInfoWindow(areaCoordList);
+        mapObject?.getSource('preview').setData(operationLayer);
+      }
     }
   };
 
-  const handlerInfoWindow = data => {
+  // 데이터블록 표출 이벤트
+  const handlerInfoWindow = areaList => {
+    console.log(areaList, '====areaList');
     if (dataBlocks.length > 0) {
       dataBlocks?.map(block => {
         block.remove();
       });
     }
 
-    data.map((apply, idx) => {
+    areaList.map((data, idx) => {
       const divCd =
-        apply.fltElevMax === 120
+        data.fltElevMax === 120
           ? '원추'
-          : apply.fltElevMax > 45 && apply.fltElevMax < 100
+          : data.fltElevMax > 45 && data.fltElevMax < 100
           ? '수평'
           : '-';
 
@@ -361,7 +377,7 @@ export default function OperationApprovalsContainer({ mode }) {
         '<div class="tooltip-box">' +
         '<div class="tooltip-ti">' +
         '<span>' +
-        apply?.applyNo +
+        data?.applyNo +
         '</span>' +
         '</div>' +
         '<div class="tooltip-txt">' +
@@ -385,7 +401,7 @@ export default function OperationApprovalsContainer({ mode }) {
           closeOnClick: false,
           closeOnMove: false
         })
-          .setLngLat({ lng: apply?.lon, lat: apply?.lat })
+          .setLngLat({ lng: data?.lon, lat: data?.lat })
           .setHTML(content)
           .addTo(mapObject);