diff --git a/src/components/laanc/map/LaancAreaMap.js b/src/components/laanc/map/LaancAreaMap.js index dd92c77..64a959e 100644 --- a/src/components/laanc/map/LaancAreaMap.js +++ b/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) { diff --git a/src/components/vertiport/VertiportRightMenu.js b/src/components/vertiport/VertiportRightMenu.js index c56c23f..6d17a54 100644 --- a/src/components/vertiport/VertiportRightMenu.js +++ b/src/components/vertiport/VertiportRightMenu.js @@ -1,112 +1,123 @@ 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 ? ( -
- -
-
- - - - - -
-
+
+ +
+
+ + + + + +
+
-

출발 스케쥴 목록

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
편명출발시간목적지게이트버티포트
PAL00109:00잠실G1F1
PAL00209:10코엑스G2F2
PAL00309:20아라뱃길G3F1
PAL00409:30잠실G4F2
-
+
+

출발 스케쥴 목록

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
편명출발시간목적지게이트버티포트
PAL00109:00잠실G1F1
PAL00209:10코엑스G2F2
PAL00309:20아라뱃길G3F1
PAL00409:30잠실G4F2
+
-

도착 스케쥴 목록

+
+

도착 스케쥴 목록

+
@@ -152,7 +163,9 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
-

착륙 대기 목록

+
+

착륙 대기 목록

+
@@ -200,44 +213,40 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {

- Bear claw jelly beans wafer pastry jelly beans candy macaroon biscuit topping. Sesame snaps lemon drops - donut gingerbread dessert cotton candy wafer croissant jelly beans. Sweet roll halvah gingerbread bonbon - apple pie gummies chocolate bar pastry gummi bears. + Bear claw jelly beans wafer pastry jelly beans candy macaroon + biscuit topping. Sesame snaps lemon drops donut gingerbread + dessert cotton candy wafer croissant jelly beans. Sweet roll + halvah gingerbread bonbon apple pie gummies chocolate bar + pastry gummi bears.

- Croissant danish chocolate bar pie muffin. Gummi bears marshmallow chocolate bar bear claw. Fruitcake halvah - chupa chups dragée carrot cake cookie. Carrot cake oat cake cake chocolate bar cheesecake. Wafer gingerbread - sweet roll candy chocolate bar gingerbread. + Croissant danish chocolate bar pie muffin. Gummi bears + marshmallow chocolate bar bear claw. Fruitcake halvah chupa + chups dragée carrot cake cookie. Carrot cake oat cake cake + chocolate bar cheesecake. Wafer gingerbread sweet roll candy + chocolate bar gingerbread.

- Croissant jelly tootsie roll candy canes. Donut sugar plum jujubes sweet roll chocolate cake wafer. Tart - caramels jujubes. Dragée tart oat cake. Fruitcake cheesecake danish. Danish topping candy jujubes. Candy - canes candy canes lemon drops caramels tiramisu chocolate bar pie. + Croissant jelly tootsie roll candy canes. Donut sugar plum + jujubes sweet roll chocolate cake wafer. Tart caramels + jujubes. Dragée tart oat cake. Fruitcake cheesecake danish. + Danish topping candy jujubes. Candy canes candy canes lemon + drops caramels tiramisu chocolate bar pie.

- Gummi bears tootsie roll cake wafer. Gummies powder apple pie bear claw. Caramels bear claw fruitcake - topping lemon drops. Carrot cake macaroon ice cream liquorice donut soufflé. Gummi bears carrot cake toffee - bonbon gingerbread lemon drops chocolate cake. + Gummi bears tootsie roll cake wafer. Gummies powder apple pie + bear claw. Caramels bear claw fruitcake topping lemon drops. + Carrot cake macaroon ice cream liquorice donut soufflé. Gummi + bears carrot cake toffee bonbon gingerbread lemon drops + chocolate cake.

- - - - ) : ( -
- -
- )} + ); }; diff --git a/src/views/vertiport/VertiportView.js b/src/views/vertiport/VertiportView.js index 28ec548..c54de86 100644 --- a/src/views/vertiport/VertiportView.js +++ b/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 ( <> @@ -29,8 +96,12 @@ export default function VertiportView() {
-
F1
-
F2
+
+ F1 +
+
+ F2 +
@@ -62,15 +133,34 @@ export default function VertiportView() {
-
H1
-
H2
-
H3
+
+ H1 +
+
+ H2 +
+
+ H3 +
-
-

Hanger 운영현황

-
+
+ scrollRef?.current?.clientWidth + ? 'pointer' + : 'default' + }} + > +

Hanger 운영현황

@@ -463,12 +553,10 @@ export default function VertiportView() { setOpenReportList={setOpenReportList} oepnReportList={oepnReportList} />, - document.getElementById('app-content') )} )} - {createPortal(