From 3f6828a99da0deadf58dbc3c1d5d9b0bc473e3b8 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: Mon, 27 Nov 2023 16:56:25 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20?=
 =?UTF-8?q?=EC=A2=8C=ED=91=9C=EC=A0=95=EB=B3=B4=EC=B0=BD=20=EB=A7=88?=
 =?UTF-8?q?=EC=9A=B0=EC=8A=A4=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/laanc/map/LaancAreaMap.js | 77 ++++++++++++++++--------
 1 file changed, 51 insertions(+), 26 deletions(-)

diff --git a/src/components/laanc/map/LaancAreaMap.js b/src/components/laanc/map/LaancAreaMap.js
index 97f3612..432edca 100644
--- a/src/components/laanc/map/LaancAreaMap.js
+++ b/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'