laanc 비행구역 취소시 저장되는 현상 수정

src/components/map/mapbox/draw/LaancDrawControl.js

@@ -26,7 +26,7 @@ export const LaancDrawControl = props => {
   const drawObj = props.drawObj;
   const mapObject = props.mapObject;
 
-  const [drawObjId, setDrawObjId] = useState();
+  // const [drawObjId, setDrawObjId] = useState();
   const [bufferId, setBufferId] = useState();
 
   const [isDrawDone, setIsDrawDone] = useState(false);
@@ -122,7 +122,6 @@ export const LaancDrawControl = props => {
             obj.id
           );
         }
-        props.setCoordArr(prev => [...prev, [e.lngLat.lng, e.lngLat.lat]]);
       }
     }
   };
@@ -224,7 +223,6 @@ export const LaancDrawControl = props => {
           id: obj.id
         };
 
-        props.setCoordArr(mode === 'LINE' ? initCoord : initCoord[0]);
         handlerRemoveGroupMarker(obj.id);
         handlerCreateGroupMarker(data, mode);
         handlerAbnormalityCheck(data, mode);
@@ -352,14 +350,14 @@ export const LaancDrawControl = props => {
     props.handlerCoordinates(areaInfo);
     setIsDrawDone(true);
 
-    const obj = drawObj
+    const viewCoordObj = drawObj
       .getAll()
       .features.filter(
-        obj =>
-          obj.properties.id !== 'BUFFER' && obj.geometry.coordinates.length > 0
+        o => o.geometry.coordinates.length > 0 && o.properties.id !== 'BUFFER'
       );
-    props.setViewCoordObj(obj);
-    if (obj.length > 1) {
+    props.setViewCoordObj(viewCoordObj);
+
+    if (viewCoordObj.length > 1) {
       props.handlerAddChange('overAdd', true);
     } else {
       props.handlerAddChange('isViewAdd', true);
@@ -523,20 +521,18 @@ export const LaancDrawControl = props => {
   const drawInit = () => {
     const mode = mapControl.drawType;
     if (mode !== 'DONE') {
-      // console.log(props.addData.isAddable, '-----');
       if (!props.addData.isAddable) {
+        // 추가 상태가 아닐 때
         drawObj.deleteAll();
         handlerRemoveAllMarker();
 
+        props.setViewCoordObj([]);
         props.handlerSaveCheck(false);
-        setDrawObjId();
 
         props.handlerInitCoordinates();
-
-        props.setViewCoordObj([]);
+        // setDrawObjId();
       }
 
-      props.setCoordArr([]);
       if (!mode || mode === 'RESET') {
         props.handlerAddChange('isAddable', false);
         props.handlerAddChange('isViewAdd', false);

src/views/laanc/FlightArea.js

@@ -556,7 +556,12 @@ export default function FlightArea({
           toggle={() => setCenteredModal(!centeredModal)}
           className='modal-dialog-centered modal-xl'
         >
-          <ModalHeader toggle={() => setCenteredModal(!centeredModal)}>
+          <ModalHeader
+            toggle={() => {
+              setCenteredModal(!centeredModal);
+              handlerInitCoordinates();
+            }}
+          >
             비행 구역 설정
           </ModalHeader>
           <ModalBody>
@@ -642,7 +647,8 @@ export default function FlightArea({
               </div>
               <div className='right-btn'>
                 <span className='etc-txt'>
-                  ※ 비행구역설정 완료를 원하시면 마지막 좌표 지점에서 더블클릭해주시기 바랍니다.
+                  ※ 비행구역설정 완료를 원하시면 마지막 좌표 지점에서
+                  더블클릭해주시기 바랍니다.
                 </span>
                 <Button
                   color='primary'

src/views/laanc/LaancAreaMap.js

@@ -57,7 +57,6 @@ export default function LaancAreaMap({
   const [modal, setModal] = useState(false);
 
   const [detailLayer, setDetailLayer] = useState();
-  const [coordArr, setCoordArr] = useState([]);
 
   const [viewCoordObj, setViewCoordObj] = useState([]);
 
@@ -77,7 +76,6 @@ export default function LaancAreaMap({
   }, [mapControl.drawType]);
 
   useEffect(() => {
-    // console.log(areaCoordList, '---->>>>');
     if (areaCoordList && mapObject) {
       if (
         areaCoordList[0].coordList[0]?.lat !== 0 &&
@@ -309,10 +307,6 @@ export default function LaancAreaMap({
     setModal(!modal);
   };
 
-  // const handlerSaveCheck = save => {
-  //   setIsSaveable(save);
-  // };
-
   return (
     <Card className='mb-0'>
       <CardBody>
@@ -366,42 +360,6 @@ export default function LaancAreaMap({
                           } else {
                             return null;
                           }
-                          // if (idx % 1 === 0) {
-                          //   const fCoord = FormattingCoord(co);
-                          //   const prev = coord[idx - 1].join(', ');
-                          //   const next = fCoord.join(', ');
-
-                          //   return (
-                          //     <div className='coords-box-list'>
-                          //       <span key={idx}>
-                          //         <span>{prev}</span>
-                          //         <span className='etc'>/</span>
-                          //         <span>{next}</span>
-                          //       </span>
-                          //     </div>
-                          //   );
-                          // } else {
-                          //   return null;
-                          // }
-
-                          // if (idx + 1 < coord.length) {
-                          //   const fCoord = FormattingCoord(co);
-                          //   const current = fCoord.join(', ');
-                          //   const next = FormattingCoord(
-                          //     coord[idx + 1].join(', ')
-                          //   );
-
-                          //   return (
-                          //     <div className='coords-box-list'>
-                          //       <span key={idx}>
-                          //         <span>{current}</span>
-                          //         <span className='etc'>/</span>
-                          //         <span>{next}</span>
-                          //       </span>
-                          //     </div>
-                          //   );
-                          // }
-                          // return null;
                         })}
                       </div>
                     </div>
@@ -409,59 +367,6 @@ export default function LaancAreaMap({
                 })}
               </div>
             ) : null}
-            {/* coords-box
-               div
-                  ti
-                  coords-box-scroll
-                     coords-box-list
-                     coords-box-list
-                        span
-                           span위도, 경도
-                           span /
-                           span 위도, 경도 */}
-            {/* {mapObject ? (
-              <div className='coords-box'>
-                {drawObj.getAll().features.length > 1
-                  ? drawObj
-                      .getAll()
-                      .features.filter(obj => obj.properties.id !== 'BUFFER')
-                      .map((obj, i) => {
-                        const coord =
-                          obj.properties.id === 'LINE'
-                            ? obj.geometry.coordinates
-                            : obj.geometry.coordinates[0];
-
-                        return (
-                          <div>
-                            <h6 className='ti'>비행구역 {i + 1}</h6>
-                            <div className='coords-box-scroll'>
-                              {coord?.map((co, idx) => {
-                                if (idx + 1 < coord.length) {
-                                  const fCoord = FormattingCoord(co);
-                                  const current = fCoord.join(', ');
-                                  const next = FormattingCoord(
-                                    coord[idx + 1]
-                                  ).join(', ');
-
-                                  return (
-                                    <div className='coords-box-list'>
-                                      <span key={idx}>
-                                        <span>{current}</span>
-                                        <span className='etc'>/</span>
-                                        <span>{next}</span>
-                                      </span>
-                                    </div>
-                                  );
-                                }
-                                return null;
-                              })}
-                            </div>
-                          </div>
-                        );
-                      })
-                  : null}
-              </div>
-            ) : null} */}
           </div>
           <div
             id='detail'
@@ -470,29 +375,6 @@ export default function LaancAreaMap({
           ></div>
           {isMapLoad && mapObject ? (
             <>
-              {/* <LaancDraw
-                mapObject={mapObject}
-                mapboxgl={mapboxgl}
-                mode={mode}
-                areaCoordList={mapAreaCoordList}
-                handlerCoordinates={handlerCoordinates}
-                handlerInitCoordinates={handlerInitCoordinates}
-                handlerConfirm={handlerConfirm}
-                handlerDrawType={handlerDrawType}
-                centeredModal={centeredModal}
-                geojson={detailGeo}
-                detailLayer={detailLayer}
-              /> */}
-              {/* <LaancDrawRe
-                mapObject={mapObject}
-                areaCoordList={mapAreaCoordList}
-                geojson={detailGeo}
-                detailLayer={detailLayer}
-                mapboxgl={mapboxgl}
-                mode={mode}
-                handlerCoordinates={handlerCoordinates}
-                handlerInitCoordinates={handlerInitCoordinates}
-              /> */}
               <LaancDrawControl
                 handlerAddChange={handlerAddChange}
                 addData={addData}
@@ -500,14 +382,12 @@ export default function LaancAreaMap({
                 setModal={setModal}
                 mapboxgl={mapboxgl}
                 mapObject={mapObject}
+                setViewCoordObj={setViewCoordObj}
                 areaCoordList={mapAreaCoordList}
                 handlerConfirm={handlerConfirm}
                 handlerSaveCheck={handlerSaveCheck}
                 handlerCoordinates={handlerCoordinates}
                 handlerInitCoordinates={handlerInitCoordinates}
-                setCoordArr={setCoordArr}
-                viewCoordObj={viewCoordObj}
-                setViewCoordObj={setViewCoordObj}
               />
               <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
               {modal ? (