diff --git a/src/components/flight/FlightApprovalsReport.js b/src/components/flight/FlightApprovalsReport.js index f35166fd..fc9f32b0 100644 --- a/src/components/flight/FlightApprovalsReport.js +++ b/src/components/flight/FlightApprovalsReport.js @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import Flatpickr from 'react-flatpickr'; import { Button, Input, CustomInput, Col, Row } from '@component/ui'; import { Search, Calendar } from 'react-feather'; @@ -16,19 +16,6 @@ export default function FlightApprovalsReport(props) { endDate: dayjs().format('YYYY-MM-DD') }); - useEffect(() => { - const popupSyncSearchData = JSON.parse(localStorage.getItem('popupState')); - if (popupSyncSearchData) { - setSearchDate({ - startDate: popupSyncSearchData.startDate, - endDate: popupSyncSearchData.endDate - }); - setFilterArea(popupSyncSearchData.selected); - setFilterId(popupSyncSearchData.filter); - localStorage.removeItem('popupState'); - } - }, []); - const handleKeyDown = e => { if (e.key === 'Enter') { props.handlerSearch(filterId, searchDate, filterArea); @@ -36,7 +23,7 @@ export default function FlightApprovalsReport(props) { }; return ( -
+

비행승인 신청 검토결과 현황

diff --git a/src/components/flight/NewFlightApprovalsReport.js b/src/components/flight/NewFlightApprovalsReport.js index ee9e0003..96af93dc 100644 --- a/src/components/flight/NewFlightApprovalsReport.js +++ b/src/components/flight/NewFlightApprovalsReport.js @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import Flatpickr from 'react-flatpickr'; import { Button, Input, CustomInput, Col, Row } from '@component/ui'; import { Search, Calendar } from 'react-feather'; @@ -16,6 +16,20 @@ export default function NewFlightApprovalsReport(props) { endDate: dayjs().format('YYYY-MM-DD') }); + useEffect(() => { + const popupSyncSearchData = JSON.parse(localStorage.getItem('popupState')); + + if (popupSyncSearchData) { + setFilterArea(popupSyncSearchData.selected); + setFilterId(popupSyncSearchData.filter); + setSearchDate({ + startDate: popupSyncSearchData.startDate, + endDate: popupSyncSearchData.endDate + }); + localStorage.removeItem('popupState'); + } + }, []); + const handleKeyDown = e => { if (e.key === 'Enter') { props.handlerSearch(filterId, searchDate, filterArea); @@ -23,7 +37,7 @@ export default function NewFlightApprovalsReport(props) { }; return ( -
+

비행승인 신청 검토결과 현황

diff --git a/src/containers/flight/NewFlightApprovalsContainer.js b/src/containers/flight/NewFlightApprovalsContainer.js index 46d830d0..3341653d 100644 --- a/src/containers/flight/NewFlightApprovalsContainer.js +++ b/src/containers/flight/NewFlightApprovalsContainer.js @@ -20,7 +20,7 @@ import { getLaancAprvList } from '@src/redux/features/laanc/laancThunk'; import dayjs from 'dayjs'; import { setLogout } from '@src/redux/features/account/auth/authThunk'; -export default function NewFlightApprovalsContainer() { +export default function NewFlightApprovalsContainer({ mode }) { const dispatch = useDispatch(); const history = useHistory(); @@ -44,6 +44,11 @@ export default function NewFlightApprovalsContainer() { const map = useSelector(state => state.mapState.map); + // popup + const [isPopup, setIsPopup] = useState(false); + const [popup, setPopup] = useState(null); + const popupRef = useRef(null); + const previewGeo2 = { type: 'FeatureCollection', features: [] @@ -61,20 +66,113 @@ export default function NewFlightApprovalsContainer() { }, []); useEffect(() => { - if (areaCoordList.length != 0) { + if (areaCoordList.length !== 0) { handlerPreviewDraw(); } }, [areaCoordList]); useEffect(() => { if (map) { + window._mapbox = map; + let mapInstance = mode === 'container' ? map : window.opener._mapbox; setMapObject(map); } }, [map]); - useEffect(async () => { - if (areaCoordList.length === 0) return; - }, [areaCoordList]); + useEffect(() => { + const childMessage = e => { + if (e.data.type) { + const { type } = e.data; + const { payload } = e.data; + console.log(payload); + switch (type) { + case 'initalState': + popupRef.current.postMessage({ + type: 'initalState', + payload: { + filter, + selected, + startDate, + endDate + } + }); + + return; + case 'search': + const { search, searchDate, filterArea } = payload; + + handlerSearch(search, searchDate, filterArea); + return; + case 'detail': + const { area } = payload; + handlerDetail(area); + return; + case 'closedSync': + popupRef.current.close(); + // localStorage.removeItem('popupState'); + return; + default: + break; + } + } + }; + let timer; + if (popup) { + timer = setInterval(() => { + if (popup.closed) { + setIsPopup(false); + clearInterval(timer); + } + }, 1000); // 1초마다 체크 + } + window.addEventListener('message', childMessage); + + return () => { + clearInterval(timer); + window.removeEventListener('message', childMessage); + }; + }, [popup]); + + useEffect(() => { + const handleBeforeUnload = e => { + localStorage.removeItem('persist:root'); + + if (popupRef.current) { + popupRef.current.close(); + } + }; + + window.addEventListener('beforeunload', handleBeforeUnload); + + return () => { + window.removeEventListener('beforeunload', handleBeforeUnload); + }; + }, []); + + const handleDragEnd = e => { + setIsPopup(true); + const el = document.querySelector('.flight-approval-layer'); + + const popupWidth = el.offsetWidth; // 팝업의 너비 + const popupHeight = el.offsetHeight; // 팝업의 너비 + // const popupX = window.screenX + window.outerWidth - e.clientX; // 오른쪽 끝에 띄우기 + // const popupY = Math.round( + // window.screenY + window.outerHeight / 2 - popupHeight / 2 + // ); + + const popupX = + window.screenX + + (window.outerWidth - popupWidth) / 2 + + e.clientX - + window.innerWidth / 2; // 드래그 끝나는 지점 + const popupY = Math.round( + window.screenY + window.outerHeight / 2 - popupHeight / 2 + ); + const option = `width=${popupWidth},height=${popupHeight},left=${popupX},top=${popupY}`; + popupRef.current = window.open('/rightMenu', 'NewWindow', option); + // setPopupOption(option); + setPopup(popupRef.current); + }; const handlerSearch = (search, searchDate, filterArea) => { setStartDate(searchDate.startDate); @@ -112,6 +210,12 @@ export default function NewFlightApprovalsContainer() { } // ); setFilter(search); + if (popup) { + popupRef.current.postMessage({ + type: 'handlerSearchRs', + payload: { search } + }); + } }; const handlerDetail = area => { @@ -123,28 +227,32 @@ export default function NewFlightApprovalsContainer() { }; const handlerMapInit = () => { - if (map.getSource('preview')) { + let mapInstance = mode === 'container' ? map : window.opener._mapbox; + + if (mapInstance.getSource('preview')) { } else { - map.addSource('preview', { + mapInstance.addSource('preview', { type: 'geojson', data: previewGeo2 }); - map.addLayer(flightlayerWayPoint('preview')); - map.addLayer(flightlayerBuffer('preview')); - map.addLayer(flightlayerPolygon('preview')); - map.addLayer(flightlayerPolyline('preview')); + mapInstance.addLayer(flightlayerWayPoint('preview')); + mapInstance.addLayer(flightlayerBuffer('preview')); + mapInstance.addLayer(flightlayerPolygon('preview')); + mapInstance.addLayer(flightlayerPolyline('preview')); } dispatch(clientSetIsMapLoading(true)); - const preview = map.getSource('preview'); + const preview = mapInstance.getSource('preview'); if (preview) setPreviewLayer(preview); setIsMapLoading(true); - setMapObject(map); - dispatch(clientMapInit(map)); + setMapObject(mapInstance); + + dispatch(clientMapInit(mapInstance)); }; + const handlerPreviewDraw = () => { if (areaCoordList.length > 0) { const areas = areaCoordList[0]; @@ -188,20 +296,25 @@ export default function NewFlightApprovalsContainer() {
-
-
-
- - + {!isPopup && ( +
+
+
+ + +
-
+ )} ); } diff --git a/src/containers/flight/flightApprovalsContainer.js b/src/containers/flight/flightApprovalsContainer.js index 1d285189..c3fe7606 100644 --- a/src/containers/flight/flightApprovalsContainer.js +++ b/src/containers/flight/flightApprovalsContainer.js @@ -48,10 +48,6 @@ export default function FlightApprovalsContainer({ mode }) { const { laancAprvList } = useSelector(state => state.laancState); const map = useSelector(state => state.mapState.map); - // popup - const [isPopup, setIsPopup] = useState(false); - const [popup, setPopup] = useState(null); - const popupRef = useRef(null); const previewGeo2 = { type: 'FeatureCollection', @@ -77,107 +73,10 @@ export default function FlightApprovalsContainer({ mode }) { useEffect(() => { if (map) { - window._mapbox = map; - let mapInstance = mode === 'container' ? map : window.opener._mapbox; setMapObject(mapInstance); } }, [map]); - useEffect(() => { - const childMessage = e => { - if (e.data.type) { - const { type } = e.data; - const { payload } = e.data; - console.log(payload); - switch (type) { - case 'initalState': - popupRef.current.postMessage({ - type: 'initalState', - payload: { - filter, - selected, - startDate, - endDate - } - }); - - return; - case 'search': - const { search, searchDate, filterArea } = payload; - - handlerSearch(search, searchDate, filterArea); - return; - case 'detail': - const { area } = payload; - handlerDetail(area); - return; - case 'closedSync': - popupRef.current.close(); - // localStorage.removeItem('popupState'); - return; - default: - break; - } - } - }; - let timer; - if (popup) { - timer = setInterval(() => { - if (popup.closed) { - setIsPopup(false); - clearInterval(timer); - } - }, 1000); // 1초마다 체크 - } - window.addEventListener('message', childMessage); - - return () => { - clearInterval(timer); - window.removeEventListener('message', childMessage); - }; - }, [popup]); - - useEffect(() => { - const handleBeforeUnload = e => { - localStorage.removeItem('persist:root'); - - if (popupRef.current) { - popupRef.current.close(); - } - }; - - window.addEventListener('beforeunload', handleBeforeUnload); - - return () => { - window.removeEventListener('beforeunload', handleBeforeUnload); - }; - }, []); - - const handleDragEnd = e => { - setIsPopup(true); - const el = document.querySelector('.flight-approval-layer'); - - const popupWidth = el.offsetWidth; // 팝업의 너비 - const popupHeight = el.offsetHeight; // 팝업의 너비 - // const popupX = window.screenX + window.outerWidth - e.clientX; // 오른쪽 끝에 띄우기 - // const popupY = Math.round( - // window.screenY + window.outerHeight / 2 - popupHeight / 2 - // ); - - const popupX = - window.screenX + - (window.outerWidth - popupWidth) / 2 + - e.clientX - - window.innerWidth / 2; // 드래그 끝나는 지점 - const popupY = Math.round( - window.screenY + window.outerHeight / 2 - popupHeight / 2 - ); - const option = `width=${popupWidth},height=${popupHeight},left=${popupX},top=${popupY}`; - popupRef.current = window.open('/rightMenu', 'NewWindow', option); - // setPopupOption(option); - setPopup(popupRef.current); - }; - const handlerSearch = (search, searchDate, filterArea) => { setStartDate(searchDate.startDate); setEndDate(searchDate.endDate); @@ -215,12 +114,6 @@ export default function FlightApprovalsContainer({ mode }) { // ); setFilter(search); - if (popup) { - popupRef.current.postMessage({ - type: 'handlerSearchRs', - payload: { search } - }); - } }; const handlerDetail = area => { @@ -232,30 +125,27 @@ export default function FlightApprovalsContainer({ mode }) { }; const handlerMapInit = () => { - let mapInstance = mode === 'container' ? map : window.opener._mapbox; - - if (mapInstance.getSource('preview')) { + if (map.getSource('preview')) { } else { - mapInstance.addSource('preview', { + map.addSource('preview', { type: 'geojson', data: previewGeo2 }); - mapInstance.addLayer(flightlayerWayPoint('preview')); - mapInstance.addLayer(flightlayerBuffer('preview')); - mapInstance.addLayer(flightlayerPolygon('preview')); - mapInstance.addLayer(flightlayerPolyline('preview')); + map.addLayer(flightlayerWayPoint('preview')); + map.addLayer(flightlayerBuffer('preview')); + map.addLayer(flightlayerPolygon('preview')); + map.addLayer(flightlayerPolyline('preview')); } dispatch(clientSetIsMapLoading(true)); - const preview = mapInstance.getSource('preview'); + const preview = map.getSource('preview'); if (preview) setPreviewLayer(preview); setIsMapLoading(true); - setMapObject(mapInstance); - - dispatch(clientMapInit(mapInstance)); + setMapObject(map); + dispatch(clientMapInit(map)); }; const handlerPreviewDraw = () => { if (areaCoordList.length > 0) { @@ -333,25 +223,20 @@ export default function FlightApprovalsContainer({ mode }) {
- {!isPopup && ( -
-
-
- - -
+
+
+
+ +
- )} +
); } diff --git a/src/containers/rightMenuContainer.js b/src/containers/rightMenuContainer.js index da3b5a61..58069f02 100644 --- a/src/containers/rightMenuContainer.js +++ b/src/containers/rightMenuContainer.js @@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'; import dayjs from 'dayjs'; import { useDispatch } from '@src/redux/store'; import { getLaancAprvList } from '@src/redux/features/laanc/laancThunk'; -import FlightApprovalsTable from '@src/components/flight/FlightApprovalsTable'; -import FlightApprovalsReport from '@src/components/flight/FlightApprovalsReport'; +import NewFlightApprovalsTable from '@src/components/flight/NewFlightApprovalsTable'; +import NewFlightApprovalsReport from '@src/components/flight/NewFlightApprovalsReport'; function RightMenuContainer() { const [filter, setFilter] = useState(''); @@ -120,8 +120,8 @@ function RightMenuContainer() { style={{ width: '100vw' }} >
- - + 관제시스템 */} - ; + ;
); } diff --git a/src/views/flight/NewFlightView.js b/src/views/flight/NewFlightView.js index 12c589c9..f9821b4d 100644 --- a/src/views/flight/NewFlightView.js +++ b/src/views/flight/NewFlightView.js @@ -9,7 +9,7 @@ export default function NewFlightView() { {/* 관제시스템 */} - ; + ;
); }