비행구역 좌표정보창 마우스 드래그 추가

src/components/laanc/map/LaancAreaMap.js

@@ -3,7 +3,7 @@ import mapboxgl from 'mapbox-gl';
 import threebox from 'threebox-plugin';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import { MAPBOX_TOKEN } from '../../../configs/constants';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Card, CardBody } from 'reactstrap';
 import { initFlightBas } from '../../../modules/basis/flight/models/basisFlightModel';
@@ -76,6 +76,11 @@ export default function LaancAreaMap({
     };
   }, []);
 
+  // 좌표 정보 마우스 드래그
+  const scrollRef = useRef(null);
+  const [isDrag, setIsDrag] = useState(false);
+  const [startX, setStartX] = useState();
+
   useEffect(() => {
     handlerMapInit();
   }, []);
@@ -321,36 +326,56 @@ export default function LaancAreaMap({
   //   setModal(!modal);
   // };
 
+  // 좌표 정보 마우스 드래그
+  const onMouseDown = e => {
+    e.preventDefault();
+    setIsDrag(true);
+    setStartX(e.pageX + scrollRef.current.scrollLeft);
+  };
+
+  const onMouseMove = e => {
+    if (isDrag) {
+      const { scrollWidth, clientWidth, scrollLeft } = scrollRef.current;
+
+      scrollRef.current.scrollLeft = startX - e.pageX;
+
+      if (scrollLeft === 0) {
+        setStartX(e.pageX);
+      } else if (scrollWidth <= clientWidth + scrollLeft) {
+        setStartX(e.pageX + scrollLeft);
+      }
+    }
+  };
+
+  const throttle = (func, ms) => {
+    let throttled = false;
+    return (...args) => {
+      if (!throttled) {
+        throttled = true;
+        setTimeout(() => {
+          func(...args);
+          throttled = false;
+        }, ms);
+      }
+    };
+  };
+
+  const onMouseUp = e => {
+    setIsDrag(false);
+  };
+
   return (
     <Card className='mb-0'>
       <CardBody>
         <div style={{ position: 'relative' }}>
           <LaancMapSearch mapObject={mapObject} />
-          {/* <div className='d-flex coords-wrap'>
-            <div className='coords-box'>
-              <div>
-                <h6 className='ti'>비행구역 1</h6>
-                <div className='coords-box-scroll'>
-                  <div className='coords-box-list'>
-                    <span>
-                      <span>126.6058737, 37.5220027</span>
-                      <span className='etc'>/</span>
-                      <span>126.6058093, 37.5188038</span>
-                    </span>
-                  </div>
-                  <div className='coords-box-list'>
-                    <span>
-                      <span>126.6058737, 37.5220027</span>
-                      <span className='etc'>/</span>
-                      <span>126.6058093, 37.5188038</span>
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div> */}
-
-          <div className='d-flex coords-wrap'>
+          <div
+            className='d-flex coords-wrap'
+            ref={scrollRef}
+            onMouseDown={onMouseDown}
+            onMouseMove={isDrag ? throttle(onMouseMove, 50) : null}
+            onMouseUp={onMouseUp}
+          >
             {viewCoordObj?.map((obj, i) => {
               let coord =
                 obj.properties.id === 'LINE'