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 ? (
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
출발 스케쥴 목록
-
-
-
-
- 편명 |
- 출발시간 |
- 목적지 |
- 게이트 |
- 버티포트 |
-
-
-
-
- PAL001 |
- 09:00 |
- 잠실 |
- G1 |
- F1 |
-
-
- PAL002 |
- 09:10 |
- 코엑스 |
- G2 |
- F2 |
-
-
- PAL003 |
- 09:20 |
- 아라뱃길 |
- G3 |
- F1 |
-
-
- PAL004 |
- 09:30 |
- 잠실 |
- G4 |
- F2 |
-
-
-
-
+
+
출발 스케쥴 목록
+
+
+
+
+
+ 편명 |
+ 출발시간 |
+ 목적지 |
+ 게이트 |
+ 버티포트 |
+
+
+
+
+ PAL001 |
+ 09:00 |
+ 잠실 |
+ G1 |
+ F1 |
+
+
+ PAL002 |
+ 09:10 |
+ 코엑스 |
+ G2 |
+ F2 |
+
+
+ PAL003 |
+ 09:20 |
+ 아라뱃길 |
+ G3 |
+ F1 |
+
+
+ PAL004 |
+ 09:30 |
+ 잠실 |
+ G4 |
+ F2 |
+
+
+
+
-
도착 스케쥴 목록
+
+
도착 스케쥴 목록
+
@@ -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(