vertiport 페이지 수정

src/components/laanc/map/LaancAreaMap.js

@@ -244,7 +244,8 @@ export default function LaancAreaMap({
   const onMouseMove = e => {
     if (isDrag) {
       const { scrollWidth, clientWidth, scrollLeft } = scrollRef.current;
-
+      console.log('e.pageX>', e.pageX);
+      console.log('startX>', startX);
       scrollRef.current.scrollLeft = startX - e.pageX;
 
       if (scrollLeft === 0) {

src/components/vertiport/VertiportRightMenu.js

@@ -1,33 +1,40 @@
 import { Map } from 'react-feather';
-import { PiAirTrafficControlBold } from "react-icons/pi";
+import { PiAirTrafficControlBold } from 'react-icons/pi';
 import { useState } from 'react';
-import { TabContent, TabPane, Nav, NavItem, NavLink, ButtonGroup, Button } from 'reactstrap'
+import {
+  TabContent,
+  TabPane,
+  Nav,
+  NavItem,
+  NavLink,
+  ButtonGroup,
+  Button
+} from 'reactstrap';
 
 export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
-  const [active, setActive] = useState('1')
+  const [active, setActive] = useState('1');
 
   const toggle = tab => {
     if (active !== tab) {
-      setActive(tab)
+      setActive(tab);
-    }
     }
+  };
   return (
     <>
-      {openSetting ? (
+      <div className={`right-menu ${openSetting ? 'active' : ''}`}>
-        <div className='right-menu active'>
         <button
           className='right-layer-btn'
-            onClick={() => setOpenSetting(false)}
+          onClick={() => setOpenSetting(!openSetting)}
         >
           <PiAirTrafficControlBold size={22} />
         </button>
-          <div className='right-layer active bg-line'>
+        <div className={`right-layer  bg-line ${openSetting ? 'active' : ''}`}>
           <div className='tab-btn'>
             <ButtonGroup>
               <Button
                 active={active === '1'}
                 onClick={() => {
-                      toggle('1')
+                  toggle('1');
                 }}
                 outline
                 color='primary'
@@ -37,7 +44,7 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
               <Button
                 active={active === '2'}
                 onClick={() => {
-                      toggle('2')
+                  toggle('2');
                 }}
                 outline
                 color='primary'
@@ -47,7 +54,7 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
               <Button
                 active={active === '3'}
                 onClick={() => {
-                      toggle('3')
+                  toggle('3');
                 }}
                 outline
                 color='primary'
@@ -60,7 +67,9 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
             <TabContent className='py-50' activeTab={active}>
               <TabPane tabId='1'>
                 <div className='layer-content'>
-                  <div class="layer-ti"><h4>출발 스케쥴 목록</h4></div>
+                  <div class='layer-ti'>
+                    <h4>출발 스케쥴 목록</h4>
+                  </div>
                   <div className='vertiport-table'>
                     <table className='table-st'>
                       <thead>
@@ -106,7 +115,9 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
                   </div>
                 </div>
                 <div className='layer-content'>
-                  <div class="layer-ti"><h4>도착 스케쥴 목록</h4></div>
+                  <div class='layer-ti'>
+                    <h4>도착 스케쥴 목록</h4>
+                  </div>
                   <div className='vertiport-table'>
                     <table className='table-st'>
                       <thead>
@@ -152,7 +163,9 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
                   </div>
                 </div>
                 <div className='layer-content'>
-                  <div class="layer-ti"><h4>착륙 대기 목록</h4></div>
+                  <div class='layer-ti'>
+                    <h4>착륙 대기 목록</h4>
+                  </div>
                   <div className='vertiport-table'>
                     <table className='table-st'>
                       <thead>
@@ -200,44 +213,40 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
               </TabPane>
               <TabPane tabId='2'>
                 <p>
-                  Bear claw jelly beans wafer pastry jelly beans candy macaroon biscuit topping. Sesame snaps lemon drops
+                  Bear claw jelly beans wafer pastry jelly beans candy macaroon
-                  donut gingerbread dessert cotton candy wafer croissant jelly beans. Sweet roll halvah gingerbread bonbon
+                  biscuit topping. Sesame snaps lemon drops donut gingerbread
-                  apple pie gummies chocolate bar pastry gummi bears.
+                  dessert cotton candy wafer croissant jelly beans. Sweet roll
+                  halvah gingerbread bonbon apple pie gummies chocolate bar
+                  pastry gummi bears.
                 </p>
                 <p>
-                  Croissant danish chocolate bar pie muffin. Gummi bears marshmallow chocolate bar bear claw. Fruitcake halvah
+                  Croissant danish chocolate bar pie muffin. Gummi bears
-                  chupa chups dragée carrot cake cookie. Carrot cake oat cake cake chocolate bar cheesecake. Wafer gingerbread
+                  marshmallow chocolate bar bear claw. Fruitcake halvah chupa
-                  sweet roll candy chocolate bar gingerbread.
+                  chups dragée carrot cake cookie. Carrot cake oat cake cake
+                  chocolate bar cheesecake. Wafer gingerbread sweet roll candy
+                  chocolate bar gingerbread.
                 </p>
               </TabPane>
               <TabPane tabId='3'>
                 <p>
-                  Croissant jelly tootsie roll candy canes. Donut sugar plum jujubes sweet roll chocolate cake wafer. Tart
+                  Croissant jelly tootsie roll candy canes. Donut sugar plum
-                  caramels jujubes. Dragée tart oat cake. Fruitcake cheesecake danish. Danish topping candy jujubes. Candy
+                  jujubes sweet roll chocolate cake wafer. Tart caramels
-                  canes candy canes lemon drops caramels tiramisu chocolate bar pie.
+                  jujubes. Dragée tart oat cake. Fruitcake cheesecake danish.
+                  Danish topping candy jujubes. Candy canes candy canes lemon
+                  drops caramels tiramisu chocolate bar pie.
                 </p>
                 <p>
-                  Gummi bears tootsie roll cake wafer. Gummies powder apple pie bear claw. Caramels bear claw fruitcake
+                  Gummi bears tootsie roll cake wafer. Gummies powder apple pie
-                  topping lemon drops. Carrot cake macaroon ice cream liquorice donut soufflé. Gummi bears carrot cake toffee
+                  bear claw. Caramels bear claw fruitcake topping lemon drops.
-                  bonbon gingerbread lemon drops chocolate cake.
+                  Carrot cake macaroon ice cream liquorice donut soufflé. Gummi
+                  bears carrot cake toffee bonbon gingerbread lemon drops
+                  chocolate cake.
                 </p>
               </TabPane>
             </TabContent>
           </div>
         </div>
       </div>
-      ) : (
-        <div className='right-menu'>
-          <button
-            className='right-layer-btn'
-            onClick={() => setOpenSetting(true)}
-          >
-            <PiAirTrafficControlBold size={22} />
-          </button>
-          <div className='right-layer'>
-          </div>
-        </div>
-      )}
     </>
   );
 };

src/views/vertiport/VertiportView.js

@@ -2,7 +2,7 @@ import '@styles/react/libs/flatpickr/flatpickr.scss';
 import '@styles/react/libs/tables/react-dataTable-component.scss';
 import '../../assets/css/custom.css';
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { Map } from 'react-feather';
 import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
 import { createPortal } from 'react-dom';
@@ -12,11 +12,78 @@ import { VertiportLeftMenu } from '../../components/vertiport/VertiportLeftMenu'
 import { Button } from 'reactstrap';
 export default function VertiportView() {
   // 오른쪽 사이드 메뉴 표출 여부
-  const [openSetting, setOpenSetting] = useState(true);
+  const [openSetting, setOpenSetting] = useState(false);
 
   const [oepnReportList, setOpenReportList] = useState(false);
 
+  // 좌표 정보 마우스 드래그
+  const scrollRef = useRef(null);
+  const [isDrag, setIsDrag] = useState(false);
+  const [startX, setStartX] = useState();
+
   const titleName = '지상관제(버티포트) 현황';
+
+  /**
+   * [좌표 정보] 마우스 다운 시 스크롤 준비
+   * @param {Event} e 이벤트
+   */
+  const onMouseDown = e => {
+    setIsDrag(true);
+    setStartX(e.pageX + scrollRef.current.scrollLeft);
+  };
+
+  /**
+   * [좌표 정보] 마우스 드래그로 스크롤 이동
+   * @param {Event} e 이벤트
+   */
+  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);
+      }
+    }
+  };
+
+  /**
+   * [좌표 정보] onMouseMove 이벤트 빈도 조절
+   * @param {*} func 적용할 함수
+   * @param {number} ms 딜레이 시간
+   * @returns
+   */
+  const throttle = (func, ms) => {
+    let throttled = false;
+    return (...args) => {
+      if (!throttled) {
+        throttled = true;
+        setTimeout(() => {
+          func(...args);
+          throttled = false;
+        }, ms);
+      }
+    };
+  };
+
+  /**
+   * [좌표 정보] 마우스 업 시 스크롤 멈춤
+   * @param {Event} e 이벤트
+   */
+  const onMouseUp = e => {
+    e.preventDefault();
+    setIsDrag(false);
+  };
+  /**
+   * [좌표 정보] 마우스 벗어날 시 스크롤 멈춤
+   */
+  const onMouseLeave = () => {
+    setIsDrag(false);
+  };
+
   return (
     <>
       <CustomMainLayout title={titleName}>
@@ -29,8 +96,12 @@ export default function VertiportView() {
         </Button>
         <div className='vertiport-map'>
           <div>
-            <div><span className='fato'>F1</span></div>
+            <div>
-            <div><span className='fato'>F2</span></div>
+              <span className='fato'>F1</span>
+            </div>
+            <div>
+              <span className='fato'>F2</span>
+            </div>
           </div>
           <div className='gate-map'>
             <div className='gate-wrap'>
@@ -62,15 +133,34 @@ export default function VertiportView() {
             </div>
           </div>
           <div>
-            <div><span className='fato'>H1</span></div>
+            <div>
-            <div><span className='fato'>H2</span></div>
+              <span className='fato'>H1</span>
-            <div><span className='fato'>H3</span></div>
+            </div>
+            <div>
+              <span className='fato'>H2</span>
+            </div>
+            <div>
+              <span className='fato'>H3</span>
+            </div>
           </div>
-
         </div>
         <div className='vertiport-hanger'>
+          <div
+            className='vertiport-table'
+            ref={scrollRef}
+            onMouseDown={onMouseDown}
+            onMouseMove={isDrag ? throttle(onMouseMove, 50) : null}
+            onMouseUp={onMouseUp}
+            onMouseLeave={onMouseLeave}
+            style={{
+              cursor:
+                scrollRef?.current?.scrollWidth >
+                scrollRef?.current?.clientWidth
+                  ? 'pointer'
+                  : 'default'
+            }}
+          >
             <h3 className='ti-h3'>Hanger 운영현황</h3>
-          <div className='vertiport-table'>      
             <table className='table-st'>
               <thead>
                 <tr>
@@ -463,12 +553,10 @@ export default function VertiportView() {
               setOpenReportList={setOpenReportList}
               oepnReportList={oepnReportList}
             />,
-
             document.getElementById('app-content')
           )}
         </>
       )}
-
       {createPortal(
         <VertiportRightMenu
           openSetting={openSetting}