From 5847622720837a7e17ee400f1597afb34c4e7883 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junh_eee@naver.com>
Date: Thu, 19 Oct 2023 10:53:18 +0900
Subject: [PATCH] =?UTF-8?q?laanc=20=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=EA=B5=AC=EA=B0=84=20=EC=A2=8C=ED=91=9C=20?=
 =?UTF-8?q?=ED=91=9C=EC=B6=9C(=EC=9E=84=EC=8B=9C=20css)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../map/mapbox/draw/LaancDrawControl.js       | 20 +++++++--------
 src/utility/DrawUtil.js                       |  7 ++++++
 src/views/laanc/LaancAreaMap.js               | 25 +++++++++++++++++++
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/components/map/mapbox/draw/LaancDrawControl.js b/src/components/map/mapbox/draw/LaancDrawControl.js
index b235472b..2630a358 100644
--- a/src/components/map/mapbox/draw/LaancDrawControl.js
+++ b/src/components/map/mapbox/draw/LaancDrawControl.js
@@ -5,7 +5,8 @@ import {
   CalculateDistance,
   handlerGetCircleCoord,
   handlerGetHtmlContent,
-  handlerGetMidPoint
+  handlerGetMidPoint,
+  handlerReturnMode
 } from '../../../../utility/DrawUtil';
 import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
@@ -93,10 +94,10 @@ export const LaancDrawControl = props => {
     const obj = state[type?.toLowerCase()];
 
     if (type && obj) {
+      const feature = drawObj.get(obj.id);
+      const coordinates = feature.geometry.coordinates;
       if (type !== 'CIRCLE') {
         if (state.currentVertexPosition > 1) {
-          const feature = drawObj.get(obj.id);
-          const coordinates = feature.geometry.coordinates;
           const coords = [
             ...new Set(
               type === 'LINE'
@@ -118,6 +119,7 @@ export const LaancDrawControl = props => {
             obj.id
           );
         }
+        props.setCoordArr(prev => [...prev, [e.lngLat.lng, e.lngLat.lat]]);
       }
     }
   };
@@ -200,6 +202,8 @@ export const LaancDrawControl = props => {
           coord: initCoord,
           id: obj.id
         };
+
+        props.setCoordArr(mode === 'LINE' ? initCoord : initCoord[0]);
         handlerRemoveGroupMarker(obj.id);
         handlerCreateGroupMarker(data, mode);
         handlerAbnormalityCheck(data, mode);
@@ -321,7 +325,7 @@ export const LaancDrawControl = props => {
 
   const handlerPastDraw = () => {
     if (props.areaCoordList) {
-      const obj = drawObj.getAll().features;
+      const obj = drawObj?.getAll().features;
       const areas = props.areaCoordList;
       if (areas.length > 0 && obj.length > 0) {
         // areas -> 지도에 그려진 모든 구역 정보여야함
@@ -445,6 +449,7 @@ export const LaancDrawControl = props => {
       props.handlerInitCoordinates();
     }
 
+    props.setCoordArr([]);
     const mode = mapControl.drawType;
     if (!mode || mode === 'RESET') {
       props.handlerAddChange('isAddable', false);
@@ -474,12 +479,5 @@ export const LaancDrawControl = props => {
     }
   };
 
-  // drawMode에 따른 drawType 매칭
-  const handlerReturnMode = mode => {
-    if (mode.includes('line') || mode.includes('Line')) return 'LINE';
-    if (mode.includes('polygon') || mode.includes('Polygon')) return 'POLYGON';
-    if (mode.includes('circle') || mode.includes('Circle')) return 'CIRCLE';
-  };
-
   return <InfoModal modal={alertModal} setModal={setAlertModal} />;
 };
diff --git a/src/utility/DrawUtil.js b/src/utility/DrawUtil.js
index 01fc17f3..020474ab 100644
--- a/src/utility/DrawUtil.js
+++ b/src/utility/DrawUtil.js
@@ -111,6 +111,13 @@ export const handlerFitBounds = (map, paths, padding, type) => {
   map.fitBounds(bounds, { padding: padding });
 };
 
+// drawMode에 따른 drawType 매칭
+export const handlerReturnMode = mode => {
+  if (mode.includes('line') || mode.includes('Line')) return 'LINE';
+  if (mode.includes('polygon') || mode.includes('Polygon')) return 'POLYGON';
+  if (mode.includes('circle') || mode.includes('Circle')) return 'CIRCLE';
+};
+
 // draw 레이어
 export const layerWayPoint = source => {
   return {
diff --git a/src/views/laanc/LaancAreaMap.js b/src/views/laanc/LaancAreaMap.js
index b3c73d3e..d83063bc 100644
--- a/src/views/laanc/LaancAreaMap.js
+++ b/src/views/laanc/LaancAreaMap.js
@@ -56,6 +56,7 @@ export default function LaancAreaMap({
   const [modal, setModal] = useState(false);
 
   const [detailLayer, setDetailLayer] = useState();
+  const [coordArr, setCoordArr] = useState([]);
 
   const detailGeo = useMemo(() => {
     return {
@@ -313,6 +314,29 @@ export default function LaancAreaMap({
       <CardBody>
         <div style={{ position: 'relative' }}>
           <LaancMapSearch mapObject={mapObject} />
+          <div
+            className='d-flex absolute'
+            style={{
+              position: 'relative',
+              zIndex: 100,
+              margin: '400px 10px 10px 10px'
+            }}
+          >
+            {mapObject ? (
+              <div style={{ width: '400px' }}>
+                <div style={{ backgroundColor: '#fff' }}>
+                  {/* <div>좌표위치</div> */}
+                  {coordArr.length > 0
+                    ? coordArr.map(coord => (
+                        <div>
+                          {coord[0]} | {coord[1]}
+                        </div>
+                      ))
+                    : null}
+                </div>
+              </div>
+            ) : null}
+          </div>
           <div
             id='detail'
             ref={mapContainer}
@@ -355,6 +379,7 @@ export default function LaancAreaMap({
                 handlerSaveCheck={handlerSaveCheck}
                 handlerCoordinates={handlerCoordinates}
                 handlerInitCoordinates={handlerInitCoordinates}
+                setCoordArr={setCoordArr}
               />
               <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
               {modal ? (