운항과 다른 더보기 비행구역 선택시 포커스

src/components/flight/OperationApprovalsTable.js

@@ -32,6 +32,9 @@ export default function OperationApprovalsTable(props) {
   // 확장된 행 키
   const [expandedRowKeys, setExpandedRowKeys] = useState([]);
 
+  // 확장된 행 데이터
+  const [expandedRowDatas, setExpandedRowDatas] = useState([]);
+
   // 수정 키
   const [editingKey, setEditingKey] = useState('');
 
@@ -721,6 +724,7 @@ export default function OperationApprovalsTable(props) {
         dtl: item.dtl,
         approvalCd: item.approvalCd,
         planAreaSno: item.planAreaSno,
+        planSno: item.planSno,
         addr1: item.addr1,
         addr2: item.addr2,
         addr3: item.addr3
@@ -741,9 +745,11 @@ export default function OperationApprovalsTable(props) {
               className += 'flight-condition-approval-row editable-row';
             } else className;
 
-            if (record.planAreaSno === props.selected) {
+            if (record.planAreaSno === props.selected[0]) {
+              if (props.selected.length <= 1) {
                 className += ' flight-approval-row-click';
               }
+            }
             return className;
           }}
           size='small'
@@ -879,8 +885,10 @@ export default function OperationApprovalsTable(props) {
     return `${year} 년 ${month} 월 ${day} 일`;
   };
 
+  // 테이블 행 확장 이벤트
   const handleExpand = record => {
     const key = record.key;
+    const areaList = record.areaList;
     const expanded = expandedRowKeys.includes(key);
 
     const keys = expanded
@@ -888,9 +896,24 @@ export default function OperationApprovalsTable(props) {
       : [...expandedRowKeys, key];
     setExpandedRowKeys(keys);
 
-    // 초기화 및 다시 셋팅(열릴때)
+    const datas = expanded
+      ? expandedRowDatas.filter(k => k.planSno !== record.planSno)
+      : [
+          ...expandedRowDatas,
+          {
+            applyNo: record.applyNo,
+            planSno: record.planSno,
+            areaList
+          }
+        ];
+    setExpandedRowDatas(datas);
+
     if (!expanded) {
       props.handlerDetail(record.areaList);
+    } else {
+      if (props.selectedPlanSno === record.planSno) {
+        props.handlerDetail([]);
+      }
     }
   };
 
@@ -902,16 +925,24 @@ export default function OperationApprovalsTable(props) {
       row.areaList[0].fltElev,
       row.areaList[0].fltElevMax
     );
-    // 초기화 및 다시 셋팅
     props.handlerDetail([row.areaList[0]]);
   };
 
   // 확장된 테이블 행 클릭 이벤트
-  const handleInRowClick = row => {
+  const handleInRowClick = async row => {
     handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax);
 
-    // 초기화 하지말고 포커스만 하기
-    props.handlerDetail([row]);
+    if (props.selectedPlanSno !== row.planSno) {
+      // 지도에 표출되지 않은 확장 테이블 행 클릭
+      const areaList = expandedRowDatas.filter(
+        data => data.planSno === row.planSno
+      );
+      await props.handlerDetail(areaList[0].areaList);
+      props.setDiffRowZoneNo(row.zoneNo);
+    } else {
+      // 지도에 표출된 확장 테이블 행 클릭
+      await props.handlerDetail([row]);
+    }
   };
 
   const handleFileDownload = async type => {
@@ -1066,12 +1097,16 @@ export default function OperationApprovalsTable(props) {
                           'flight-condition-approval-row editable-row';
                       } else className += 'editable-row';
                     }
+
+                    if (props.selected?.length > 0) {
                       if (
                         record.areaList.length <= 1 &&
-                      record.areaList[0].planAreaSno === props.selected
+                        record.areaList[0].planAreaSno === props.selected[0]
                       ) {
                         className += ' flight-approval-row-click';
                       }
+                    }
+
                     if (expandedRowKeys.includes(record.key)) {
                       className += ' expanded-row';
                     }

src/containers/flight/OperationApprovalsContainer.js

@@ -37,8 +37,13 @@ import {
   ModalFooter,
   Table
 } from '@component/ui';
-import { FiUsers, FiFileText, FiRotateCw, FiCornerUpLeft  } from 'react-icons/fi';
-import { X } from 'react-feather'
+import {
+  FiUsers,
+  FiFileText,
+  FiRotateCw,
+  FiCornerUpLeft
+} from 'react-icons/fi';
+import { X } from 'react-feather';
 
 import mapboxgl from 'mapbox-gl';
 import * as turf from '@turf/turf';
@@ -47,7 +52,12 @@ export default function OperationApprovalsContainer({ mode }) {
   const dispatch = useDispatch();
   const history = useHistory();
 
+  // 현재 선택한 데이터 구분
   const [selected, setSelected] = useState(null);
+  const [selectedPlanSno, setSelectedPlanSno] = useState(null);
+  // 다른 더보기에서 단건 조회 시 포커스를 위한 zoneNo 저장
+  const [diffRowZoneNo, setDiffRowZoneNo] = useState(0);
+
   const [isMapLoading, setIsMapLoading] = useState(false);
   // 비행구역 그리기
   const [drawObj, setDrawObj] = useState();
@@ -69,8 +79,6 @@ export default function OperationApprovalsContainer({ mode }) {
 
   // 시군구
   const [district, setDistrict] = useState('전체');
-  // 미니맵 레이어
-  // const [previewLayer, setPreviewLayer] = useState();
 
   const { map, mapType } = useSelector(state => state.mapState);
 
@@ -105,6 +113,8 @@ export default function OperationApprovalsContainer({ mode }) {
   useEffect(() => {
     if (areaCoordList.length !== 0) {
       handlerAreaDraw();
+    } else {
+      handlerRemoveArea();
     }
   }, [areaCoordList]);
 
@@ -115,7 +125,9 @@ export default function OperationApprovalsContainer({ mode }) {
           .queryRenderedFeatures(e.point)
           .find(feature => feature.source === 'operationLayer');
 
-        if (features) setSelected(features.properties.key);
+        if (features) {
+          setSelected([features.properties.key]);
+        }
       });
 
       window._mapbox = map;
@@ -212,6 +224,14 @@ export default function OperationApprovalsContainer({ mode }) {
     };
   }, []);
 
+  // 다른 더보기의 단건 조회 시
+  useEffect(() => {
+    if (diffRowZoneNo > 0) {
+      const area = areaCoordList.filter(k => k.zoneNo === diffRowZoneNo);
+      handlerDetail(area);
+    }
+  }, [diffRowZoneNo]);
+
   const handleDragEnd = e => {
     setIsPopup(true);
     const el = document.querySelector('.flight-approval-layer');
@@ -292,11 +312,22 @@ export default function OperationApprovalsContainer({ mode }) {
     }
   };
 
-  const handlerDetail = area => {
-    if (area.length === 1) {
-      setSelected(area[0].planAreaSno);
+  //현재 선택한 sno 및 areacoordList 저장
+  const handlerDetail = async area => {
+    if (area.length > 0) {
+      if (area.length > 1) {
+        const planAreaSno = [];
+        area.map(data => {
+          planAreaSno.push(data.planAreaSno);
+        });
+        setSelected(planAreaSno);
+      } else {
+        setSelected([area[0].planAreaSno]);
+      }
+      setSelectedPlanSno(area[0].planSno);
     } else {
-      setSelected(null);
+      setSelected([]);
+      setSelectedPlanSno([]);
     }
 
     dispatch(clientSaveAreaCoordinateList(area));
@@ -304,6 +335,7 @@ export default function OperationApprovalsContainer({ mode }) {
     handlerMapInit();
   };
 
+  // 지도 레이어 초기화
   const handlerMapInit = () => {
     let mapInstance = mode === 'container' ? map : window.opener._mapbox;
 
@@ -320,9 +352,6 @@ export default function OperationApprovalsContainer({ mode }) {
     }
 
     dispatch(clientSetIsMapLoading(true));
-    // const preview = mapInstance.getSource('operationLayer');
-
-    // if (preview) setPreviewLayer(preview);
 
     setIsMapLoading(true);
 
@@ -331,9 +360,7 @@ export default function OperationApprovalsContainer({ mode }) {
     dispatch(clientMapInit(mapInstance));
   };
 
-  // 더보기 펼친게 두개(A,B)인 상황에서
-  // A의 1번에 포커스 잡혀있다가 B의 1을 클릭하면
-  // B구역이 안그려지고(A구역은 그대로) 포커스만 잡히는 에러 고치기
+  // 비행구역 생성 및 화면 포커스
   const handlerAreaDraw = () => {
     if (areaCoordList.length > 0) {
       operationLayer.features = [];
@@ -367,12 +394,28 @@ export default function OperationApprovalsContainer({ mode }) {
       handlerFitBounds(mapObject, fitZoomPaths, 400, 'POLYGON', 'flight');
 
       if (areaCoordList.length !== 1 || !areaCoordList[0]?.key) {
+        if (diffRowZoneNo > 0) {
+          setDiffRowZoneNo(0);
+          return;
+        }
         handlerInfoWindow(areaCoordList);
         mapObject?.getSource('operationLayer')?.setData(operationLayer);
       }
     }
   };
 
+  // 비행구역 초기화
+  const handlerRemoveArea = () => {
+    if (dataBlocks.length > 0) {
+      dataBlocks?.map(block => {
+        block.remove();
+      });
+    }
+
+    operationLayer.features = [];
+    mapObject?.getSource('operationLayer')?.setData(operationLayer);
+  };
+
   // 데이터블록 표출 이벤트
   const handlerInfoWindow = areaList => {
     if (dataBlocks.length > 0) {
@@ -731,13 +774,25 @@ export default function OperationApprovalsContainer({ mode }) {
                 <h4>측정</h4>
                 <div className='distance-check'>
                   <div class='btn-box'>
-                    <Button className='btn-icon rounded-circle' color='primary' size='sm'>
+                    <Button
+                      className='btn-icon rounded-circle'
+                      color='primary'
+                      size='sm'
+                    >
                       <FiRotateCw size={16} />
                     </Button>
-                    <Button className='btn-icon rounded-circle' color='primary' size='sm'>
+                    <Button
+                      className='btn-icon rounded-circle'
+                      color='primary'
+                      size='sm'
+                    >
                       <FiCornerUpLeft size={16} />
                     </Button>
-                    <Button className='btn-icon rounded-circle' color='dark' size='sm'>
+                    <Button
+                      className='btn-icon rounded-circle'
+                      color='dark'
+                      size='sm'
+                    >
                       <X size={16} />
                     </Button>
                   </div>
@@ -796,7 +851,9 @@ export default function OperationApprovalsContainer({ mode }) {
                 startDate={startDate}
                 endDate={endDate}
                 selected={selected}
+                selectedPlanSno={selectedPlanSno}
                 handlerDetail={handlerDetail}
+                setDiffRowZoneNo={setDiffRowZoneNo}
               />
             </div>
           </div>

src/containers/rightMenuContainer.js

@@ -10,6 +10,9 @@ function RightMenuContainer() {
   const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD'));
   const [endDate, setEndDate] = useState();
   const [selected, setSelected] = useState(null);
+  const [selectedPlanSno, setSelectedPlanSno] = useState(null);
+  const [diffRowZoneNo, setDiffRowZoneNo] = useState(0);
+
   // 식별번호
   const [filterId, setFilterId] = useState('');
 
@@ -34,7 +37,9 @@ function RightMenuContainer() {
     switch (type) {
       case 'initalState':
         setFilter(payload.filter);
-        setSelected(payload.selected);
+        setSelected([payload.selected]);
+        setSelectedPlanSno(payload.selectedPlanSno);
+        setDiffRowZoneNo(payload.diffRowZoneNo);
         setStartDate(payload.startDate);
         setEndDate(payload.endDate);
 
@@ -113,11 +118,26 @@ function RightMenuContainer() {
     handlerOpnerPostMessage('search', { search, searchDate, filterArea });
   };
 
-  const handlerDetail = area => {
-    if (area.length === 1) {
-      setSelected(area[0].planAreaSno);
+  const handlerDetail = async area => {
+    // if (area.length === 1) {
+    //   setSelected(area[0].planAreaSno);
+    // } else {
+    //   setSelected(null);
+    // }
+    if (area.length > 0) {
+      if (area.length > 1) {
+        const planAreaSno = [];
+        area.map(data => {
+          planAreaSno.push(data.planAreaSno);
+        });
+        setSelected(planAreaSno);
+      } else {
+        setSelected([area[0].planAreaSno]);
+      }
+      setSelectedPlanSno(area[0].planSno);
     } else {
-      setSelected(null);
+      setSelected([]);
+      setSelectedPlanSno([]);
     }
 
     handlerOpnerPostMessage('detail', { area });
@@ -148,7 +168,9 @@ function RightMenuContainer() {
             startDate={startDate}
             endDate={endDate}
             selected={selected}
+            selectedPlanSno={selectedPlanSno}
             handlerDetail={handlerDetail}
+            setDiffRowZoneNo={setDiffRowZoneNo}
           />
         </div>
       </div>