diff --git a/.env.development b/.env.development index 6dbb4c64..6962a04b 100644 --- a/.env.development +++ b/.env.development @@ -4,7 +4,7 @@ # REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/ REACT_APP_HOST = http://211.253.11.189:8080/ -REACT_APP_WS_HOST = ws://pav.palntour.com:8081/ws +REACT_APP_WS_HOST = ws://211.253.11.189:8081/ws REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/ # Naver Search API HOST diff --git a/.env.production b/.env.production index c2e60a40..35ea7e50 100644 --- a/.env.production +++ b/.env.production @@ -1,6 +1,6 @@ # REACT_APP_HOST = http://pav.palntour.com:8080/ REACT_APP_HOST = http://211.253.11.189:8080/ -REACT_APP_WS_HOST = ws://pav.palntour.com:8081/ws +REACT_APP_WS_HOST = ws://211.253.11.189:8081/ws REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/ # Naver Search API HOST diff --git a/src/components/cstmrService/faq/FaqForm.js b/src/components/cstmrService/faq/FaqForm.js new file mode 100644 index 00000000..2db8e7a1 --- /dev/null +++ b/src/components/cstmrService/faq/FaqForm.js @@ -0,0 +1,138 @@ +import { useState } from 'react'; +import { + Button, + Input, + Modal, + ModalHeader, + ModalBody, + ModalFooter, + Row, + Col, + FormGroup, + Label, + CustomInput +} from 'reactstrap'; +import classnames from 'classnames'; + +export default function FaqForm({ isOpenFormModal, handlerOpenFormModal }) { + const [value, setValue] = useState(''); + + return ( + + 질문 등록하기 + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + + setValue(e.target.value)} + /> + {/* 하단 필요없으면제거 */} + 300 + })} + > + {`${value.length}/300`} + + + + +
+ + + + + + + + ); +} diff --git a/src/components/cstmrService/faq/FaqSearchBox.js b/src/components/cstmrService/faq/FaqSearchBox.js new file mode 100644 index 00000000..b63dafaf --- /dev/null +++ b/src/components/cstmrService/faq/FaqSearchBox.js @@ -0,0 +1,32 @@ +import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap'; +import { Search } from 'react-feather'; + +export default function FaqSearchBox({ searchText, handlerSearchText }) { + return ( + + { + if (e.key === 'Enter') { + } + }} + /> + { + console.log('???'); + }} + > + + + + + + ); +} diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 6a4635a2..2b490aa6 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -216,6 +216,45 @@ const uamPosition = { let gridCoords = []; let altitudeMarker = []; +let linerAltitude = [ + { + lng: 126.734619, + lat: 37.515349, + altitude: 120, + type: '0003' + }, + { + lng: 126.852305, + lat: 37.601256, + altitude: 120, + type: '0003' + }, + { + lng: 126.752454, + lat: 37.531588, + altitude: '45~100', + type: '0006' + }, + { + lng: 126.83243, + lat: 37.585869, + altitude: '45~100', + type: '0006' + }, + { + lng: 126.771088, + lat: 37.546521, + altitude: 0, + type: '0001' + }, + { + lng: 126.811953, + lat: 37.569554, + altitude: 0, + type: '0001' + } +]; +let linerAltitudeMarker = []; export default function MapBoxMap() { const naver = window.naver; @@ -300,6 +339,9 @@ export default function MapBoxMap() { }); gridCoords = []; } + if (linerAltitudeMarker.length > 0) { + linerAltitudeMarker.map(i => i.remove()); + } if (!mapControl.liner) { if (gridCoords.length <= 0) { @@ -353,6 +395,22 @@ export default function MapBoxMap() { } }); } + } else { + linerAltitude.map(i => { + if (mapControl[`area${i.type}`]) { + const el = document.createElement('div'); + el.style.color = '#000000'; + el.style.fontSize = '1rem'; + el.innerText = i.altitude; + const marker = new mapboxgl.Marker({ + element: el + }) + .setLngLat([i.lng, i.lat]) + .addTo(map); + marker.type = i.type; + linerAltitudeMarker.push(marker); + } + }); } let arrGeoJson = []; @@ -437,6 +495,10 @@ export default function MapBoxMap() { } )); + map.on('click', e => { + console.log(e); + }); + map.on('style.load', () => { const layers = map.getStyle().layers; const labelLayerId = layers.find( diff --git a/src/containers/cstmrService/faq/FaqContainer.js b/src/containers/cstmrService/faq/FaqContainer.js new file mode 100644 index 00000000..c4d3f96a --- /dev/null +++ b/src/containers/cstmrService/faq/FaqContainer.js @@ -0,0 +1,172 @@ +import { useCallback, useState } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; +import { Button, Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap'; +import AppCollapse from '@components/app-collapse'; +import FaqSearchBox from '../../../components/cstmrService/faq/FaqSearchBox'; +import FaqForm from '../../../components/cstmrService/faq/FaqForm'; + +const data = [ + { + title: ( +
+
+ Q + + [장치신고]드론을 구매했는데 기체신고를 해야하나요? + +
+
+ 수정하기 +
+
+ ), + content: ( +
+ A + + {/* br처리? 줄바꿈.. 추후에 생각 */} + 네 그렇습니다. +
+
+ - 사용용도가 영리 목적인 경우 : 무게에 상관없이 모두 신고 +
+ - 사용용도가 비영리 목적인 경우 +
+ · (무인멀티콥터, 무인비행기, 무인헬리콥터) 최대이륙중량 2kg 초과 시 + 신고 +
+ · (무인비행선) 연료의 무게를 제외한 자체무게가 12kg 초과, 길이 7m 초과 + 시 신고
+ +
+ ) + }, + { + title: ( +
+
+ Q + + [비행승인]실내에서 비행할 때에도 비행승인을 받아야 + 할까? + +
+
+ 수정하기 +
+
+ ), + content: ( +
+ A + + 사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 + 않습니다. 또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 + 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 + 없도록 주의하여 비행하여야 합니다. + +
+ ) + } +]; + +export default function FaqContainer() { + // ** States & Vars + const [activeTab, setActiveTab] = useState('1'); + const { user } = useSelector(state => state.authState); + const [searchText, setSearchText] = useState(''); + + // ** Function to toggle tabs + const toggle = tab => setActiveTab(tab); + const [isOpenFormModal, setIsOpenFormModal] = useState(false); + + const handlerSearchText = useCallback( + e => { + const { value } = e.target; + setSearchText(value); + }, + [searchText] + ); + + const handlerOpenFormModal = () => { + setIsOpenFormModal(!isOpenFormModal); + }; + + return ( +
+ {/* 검색바 */} +
+ + {user?.authId !== 'USER' && ( + + )} +
+ {/* 탭 컨텐츠 */} +
+
+ +
+
+ + +
+ +
+ + 장치신고 + 사업 등록 + 비행 승인 + 항공 촬영 + 기타 + +
+
+ +
+ ); +} diff --git a/src/views/cstmrService/FaqView.js b/src/views/cstmrService/FaqView.js index c4f821c2..05409f3a 100644 --- a/src/views/cstmrService/FaqView.js +++ b/src/views/cstmrService/FaqView.js @@ -1,300 +1,15 @@ import '../../assets/css/custom.css'; import '@styles/react/libs/flatpickr/flatpickr.scss'; import '@styles/react/libs/tables/react-dataTable-component.scss'; -import { useState, useEffect } from 'react' -import { useParams, Link } from 'react-router-dom' -import { useSelector, useDispatch } from 'react-redux' import { CustomMainLayout } from '../../components/layout/CustomMainLayout'; -import { - Card, - CardBody, - CardText, - Button, - ButtonGroup, - Input, - InputGroup, - InputGroupAddon, - InputGroupText, - Modal, - ModalHeader, - ModalBody, - ModalFooter, - Nav, - NavItem, - NavLink, - TabContent, - TabPane, - Row, - Col, - FormGroup, - Label, - CustomInput -} from 'reactstrap'; - -import AppCollapse from '@components/app-collapse' -import Select from 'react-select' -import { selectThemeColors } from '@utils' -import classnames from 'classnames' - -import { Search, HelpCircle, Info } from 'react-feather'; - -const data = [ - { - title: ( -
-
- Q - [장치신고]드론을 구매했는데 기체신고를 해야하나요? -
-
- 수정하기 -
-
- ), - content: ( -
- A - - {/* br처리? 줄바꿈.. 추후에 생각 */} - 네 그렇습니다.

- - 사용용도가 영리 목적인 경우 : 무게에 상관없이 모두 신고
- - 사용용도가 비영리 목적인 경우
- · (무인멀티콥터, 무인비행기, 무인헬리콥터) 최대이륙중량 2kg 초과 시 신고
- · (무인비행선) 연료의 무게를 제외한 자체무게가 12kg 초과, 길이 7m 초과 시 신고
- -
- ) - }, - { - title: ( -
-
- Q - [비행승인]실내에서 비행할 때에도 비행승인을 받아야 할까? -
-
- 수정하기 -
-
- ), - content: ( -
- A - - 사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다. - 또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다. - -
- ) - } -] +import FaqContainer from '../../containers/cstmrService/faq/FaqContainer'; function FaqView() { - // ** States & Vars - const [activeTab, setActiveTab] = useState('1'), - store = useSelector(state => state.users), - dispatch = useDispatch(), - { id } = useParams() - // ** Function to toggle tabs - const toggle = tab => setActiveTab(tab) - const [centeredModal, setCenteredModal] = useState(false) - const [value, setValue] = useState('') - - return <> + return ( -
- {/* 검색바 */} -
- - - - - - - - - - setCenteredModal(!centeredModal)} className='modal-dialog-centered modal-lg faq-modal'> - setCenteredModal(!centeredModal)}>질문 등록하기 - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
- - - - - - - - - - - - setValue(e.target.value)} - /> - {/* 하단 필요없으면제거 */} - 300 - })} - > - {`${value.length}/300`} - - - - -
- - - - - - - -
- {/* 탭 컨텐츠 */} -
-
- -
-
- - -
- -
- - - 장치신고 - - - 사업 등록 - - - 비행 승인 - - - 항공 촬영 - - - 기타 - - -
-
-
+ - ; + ); } export default FaqView;