From b4a0590fc2e7059472a6cc1933946938cd6e9f8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Thu, 22 Feb 2024 19:07:14 +0900 Subject: [PATCH] =?UTF-8?q?laanc=20=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=9E=AC=EC=A0=95=EB=A6=AC=20=EB=B0=8F=20drawType=20laancSlice?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/laanc/list/LaancDetail.js | 4 +- src/components/laanc/list/LaancGrid.js | 4 +- .../laanc/map/{FlightArea.js => LaancMap.js} | 306 +----------------- .../{LaancAreaMap.js => LaancMapDetail.js} | 12 +- .../{LaancDrawControl.js => LaancMapDraw.js} | 12 +- src/components/laanc/map/LaancMapModal.js | 274 ++++++++++++++++ src/components/laanc/map/LaancMapWeather.js | 38 +++ src/components/laanc/step/LaancStep1.js | 20 +- src/components/laanc/step/LaancStep2.js | 23 +- src/components/laanc/step/LaancStep3.js | 13 +- .../basis/flight/plan/WeatherContainer.js | 4 +- src/containers/laanc/LaancContainer.js | 6 +- src/containers/laanc/LaancPlanContainer.js | 16 +- src/redux/features/control/map/mapSlice.ts | 6 - src/redux/features/control/map/mapState.ts | 1 - src/redux/features/laanc/laancSlice.ts | 17 +- src/redux/features/laanc/laancState.ts | 3 + 17 files changed, 391 insertions(+), 368 deletions(-) rename src/components/laanc/map/{FlightArea.js => LaancMap.js} (53%) rename src/components/laanc/map/{LaancAreaMap.js => LaancMapDetail.js} (97%) rename src/components/laanc/map/{LaancDrawControl.js => LaancMapDraw.js} (98%) create mode 100644 src/components/laanc/map/LaancMapModal.js create mode 100644 src/components/laanc/map/LaancMapWeather.js diff --git a/src/components/laanc/list/LaancDetail.js b/src/components/laanc/list/LaancDetail.js index 0875859b..632a43a0 100644 --- a/src/components/laanc/list/LaancDetail.js +++ b/src/components/laanc/list/LaancDetail.js @@ -11,7 +11,7 @@ import { Label, Input } from '@component/ui'; -import FlightArea from '../map/FlightArea'; +import LaancMap from '../map/LaancMap'; import { getTermsList } from '@src/redux/features/account/register/registerThunk'; export default function LaancDetail({ data, handlerLaancClose }) { @@ -67,7 +67,7 @@ export default function LaancDetail({ data, handlerLaancClose }) {
비행 구역
- +
diff --git a/src/components/laanc/list/LaancGrid.js b/src/components/laanc/list/LaancGrid.js index ad9d1461..3086880c 100644 --- a/src/components/laanc/list/LaancGrid.js +++ b/src/components/laanc/list/LaancGrid.js @@ -13,7 +13,7 @@ import { clientInitApprovalDetail, clientSaveAreaCoordinateList } from '@src/redux/features/laanc/laancSlice'; -import { clientDrawTypeChange } from '@src/redux/features/control/map/mapSlice'; +import { clientChangeDrawType } from '@src/redux/features/laanc/laancSlice'; import { HOST } from '../../../configs/constants'; import LaancDetail from './LaancDetail'; pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; @@ -51,7 +51,7 @@ export default function LaancGrid({ isSearch }) { // Laanc 승인 신청 목록 닫기 const handlerLaancClose = () => { - dispatch(clientDrawTypeChange('')); + dispatch(clientChangeDrawType('')); setIsAnimation(false); }; diff --git a/src/components/laanc/map/FlightArea.js b/src/components/laanc/map/LaancMap.js similarity index 53% rename from src/components/laanc/map/FlightArea.js rename to src/components/laanc/map/LaancMap.js index a6470d92..c041d8af 100644 --- a/src/components/laanc/map/FlightArea.js +++ b/src/components/laanc/map/LaancMap.js @@ -1,12 +1,5 @@ import { useEffect, useRef, useState, lazy, Suspense } from 'react'; import { useDispatch, useSelector } from '@src/redux/store'; -import { - Button, - Modal, - ModalHeader, - ModalBody, - ModalFooter -} from '@component/ui'; // mapbox import 'mapbox-gl/dist/mapbox-gl.css'; import mapboxgl from 'mapbox-gl'; @@ -30,48 +23,27 @@ import { layerWayPoint, handlerCreateAirSpace } from '../../../utility/MapUtils'; -// actions -import { - clientSaveAreaCoordinateList, - clientSaveAreaDetailList -} from '../../../redux/features/laanc/laancSlice'; -import { - clientMapInit, - clientDrawTypeChange -} from '@src/redux/features/control/map/mapSlice'; -import { clientAltitudeData } from '@src/redux/features/laanc/laancSlice'; +import { clientMapInit } from '@src/redux/features/control/map/mapSlice'; // geojson import gimpo from '../../map/geojson/gimpoAirportAirArea.json'; import threebox from 'threebox-plugin'; -import { initFlightBasState } from '@src/redux/features/laanc/laancState'; -import { openModal } from '@src/redux/features/comn/message/messageSlice'; -const LaancAreaMap = lazy(() => import('./LaancAreaMap')); +import LaancMapModal from './LaancMapModal'; -const WeatherContainer = lazy(() => - import('../../../containers/basis/flight/plan/WeatherContainer') -); const FeatureAirZone = lazy(() => import('../../map/mapbox/feature/FeatureAirZone') ); -const LaancDrawModal = lazy(() => import('./LaancDrawModal')); - -export default function FlightArea({ - centeredModal, - setCenteredModal, - page, - handleChange, - data -}) { + +export default function LaancMap({ page, handleChange, data }) { const dispatch = useDispatch(); - // 비행구역 타입 및 공역 타입 + // 공역 타입 const mapState = useSelector(state => state.mapState); // 비행구역 정보 저장 - const { areaCoordList } = useSelector(state => state.laancState); + const { areaCoordList, isOpenModal } = useSelector(state => state.laancState); // 지도 const [mapObject, setMapObject] = useState(); @@ -85,34 +57,8 @@ export default function FlightArea({ // 미니맵 레이어 const [previewLayer, setPreviewLayer] = useState(); - // 날씨 모달 - const [formModal, setFormModal] = useState(false); - - // 특별비행신청 모달(드론 원스톱 바로가기 기능) - const [modal, setModal] = useState({ - title: '', - desc: '', - isOpen: false - }); - - // 비행구역 저장 가능 여부 - const [isSaveable, setIsSaveable] = useState(false); - - // 비행구역 추가 가능 여부 판단 - const [addData, setAddData] = useState({ - isAddable: false, - isViewAdd: false, - overAdd: false - }); - - // 저장된 비행구역 데이터 - const [saveData, setSaveData] = useState(); - - // 비행구역 고도 - const [saveElev, setSaveElev] = useState([]); - //날씨 위치 데이터 - const [wheather, setWheather] = useState([]); + const [weather, setWeather] = useState([]); // 미니맵에 표출되는 비행구역 geoJson 정보 const previewGeo = { @@ -130,67 +76,11 @@ export default function FlightArea({ if (areaCoordList.length != 0) { const area = areaCoordList[0]; if (area.areaType && area.areaType !== '') { - if (!centeredModal && previewLayer) handlerPreviewDraw(); + if (!isOpenModal && previewLayer) handlerPreviewDraw(); } - setWheather(areaCoordList); - } - }, [areaCoordList, centeredModal, previewLayer]); - - /** - * 특별비행신청 모달 표출 - */ - const handlerModal = () => { - setModal(!modal); - }; - - /** - * 비행구역 타입 변경 시 그리기 모드 상태일 때 에러 표출 - * @param {string} val 비행구역 타입 - */ - const handlerDrawType = val => { - if (drawObj.getMode().includes('draw')) { - dispatch( - openModal({ - header: '비행 구역 설정', - body: ( - <> - 비행구역 설정이 완료되지 않았습니다. -
- 비행구역 설정 완료 후 타입 변경 부탁드립니다. - - ) - }) - ); - } else { - dispatch(clientDrawTypeChange(val)); - } - }; - - /** - * laanc계획서 비행구역 저장버튼 클릭 시 비행구역 정보 저장 - */ - const handlerSave = async () => { - if (areaCoordList) { - console.log('save'); - const areaDetail = areaCoordList; - const resultAreaDetail = areaDetail.map(area => { - return { - ...area, - coordList: areaDetail[0].coordList - }; - }); - - setCenteredModal(false); - dispatch(clientSaveAreaDetailList(resultAreaDetail)); + setWeather(areaCoordList); } - }; - - /** - * 날씨 모달 표출 - */ - const handlerWeather = () => { - setFormModal(!formModal); - }; + }, [areaCoordList, isOpenModal, previewLayer]); /** * 지도 초기 셋팅 @@ -459,51 +349,6 @@ export default function FlightArea({ } }; - /** - * 비행구역 추가 버튼 클릭 시 - */ - const handlerAddClick = () => { - if (!addData.isAddable || !addData.overAdd) { - handlerAddChange('isAddable', true); - } - }; - - /** - * 비행구역 추가 관련 상태 변경 - * @param {string} key addData의 key - * @param {boolean} val addData의 value - */ - const handlerAddChange = (key, val) => { - setAddData(prev => ({ - ...prev, - [key]: val - })); - }; - - /** - * 비행구역 저장 가능 유무 체크 - * @param {boolean} save 비행구역 저장 가능 유무 - */ - const handlerSaveCheck = save => { - setIsSaveable(save); - }; - - /** - * 비행구역 데이터 초기화 - */ - const handlerInitCoordinates = () => { - const init = initFlightBasState.initDetail.areaList.concat(); - dispatch(clientSaveAreaCoordinateList(init)); - }; - - /** - * 비행구역 고도 저장 - * @param {number} elev 비행고도 - */ - const handlerSaveElev = elev => { - setSaveElev([elev]); - }; - return (
@@ -519,134 +364,15 @@ export default function FlightArea({ ) : null}
{page === 1 ? ( - // 비행구역 설정 모달 - { - setCenteredModal(!centeredModal); - dispatch(clientSaveAreaCoordinateList(saveData)); - }} - className='modal-dialog-centered modal-xl' - > - { - setCenteredModal(!centeredModal); - dispatch(clientSaveAreaCoordinateList(saveData)); - }} - > - 비행 구역 설정 - - - - - - - -
-
- - - - - {addData.isViewAdd ? ( - - ) : null} - {addData.isViewAdd && wheather[0]?.coordList[0].lat != 0 ? ( - - ) : null} -
-
- - ※ 비행구역설정 완료를 원하시면 마지막 좌표 지점에서 - 더블클릭해주시기 바랍니다. - - -
-
- - - ) : null} - {modal ? ( - + ) : null} - {/* 날씨 모달 */} - - 날씨 정보 - - - - - - - - -
); } diff --git a/src/components/laanc/map/LaancAreaMap.js b/src/components/laanc/map/LaancMapDetail.js similarity index 97% rename from src/components/laanc/map/LaancAreaMap.js rename to src/components/laanc/map/LaancMapDetail.js index 05d40048..29bc629c 100644 --- a/src/components/laanc/map/LaancAreaMap.js +++ b/src/components/laanc/map/LaancMapDetail.js @@ -25,8 +25,8 @@ const LaancMapSearch = lazy(() => import('./LaancMapSearch')); const FeatureAirZone = lazy(() => import('../../map/mapbox/feature/FeatureAirZone') ); -const LaancDrawControl = lazy(() => import('./LaancDrawControl')); -export default function LaancAreaMap({ +const LaancMapDraw = lazy(() => import('./LaancMapDraw')); +export default function LaancMapDetail({ mapContainer, drawObj, handlerSaveCheck, @@ -39,8 +39,10 @@ export default function LaancAreaMap({ }) { const dispatch = useDispatch(); - // 비행구역 타입 및 공역 타입 + // 공역 타입 const mapState = useSelector(state => state.mapState); + // 비행구역 타입 + const { drawType } = useSelector(state => state.laancState); // 비행구역 정보 저장 const { areaCoordList } = useSelector(state => state.laancState); @@ -335,7 +337,7 @@ export default function LaancAreaMap({ className='coords-box' key={i} onClick={() => { - if (mapState.drawType === 'DONE') { + if (drawType === 'DONE') { if (!isDrag) { const allObj = drawObj .getAll() @@ -399,7 +401,7 @@ export default function LaancAreaMap({ {isMapLoad && mapObject ? ( <> - state.mapState); + const { drawType } = useSelector(state => state.laancState); // mapbox 기본 onClick 함수 저장 const originClickRef = useRef(null); @@ -156,7 +156,7 @@ export default function LaancDrawControl(props) { // 컴포넌트 언마운트 시 return () => { - dispatch(clientDrawTypeChange('DONE')); + dispatch(clientChangeDrawType('DONE')); mapObject.off('draw.update', handlerUpdateSetting); cleanUp(); }; @@ -482,10 +482,10 @@ export default function LaancDrawControl(props) { .features.some(o => o.properties.id !== 'BUFFER' && o.id !== id); if (!isRemain) { - dispatch(clientDrawTypeChange('RESET')); + dispatch(clientChangeDrawType('RESET')); props.handlerSaveCheck(false); } else { - dispatch(clientDrawTypeChange('DONE')); + dispatch(clientChangeDrawType('DONE')); } // 해당 obj 삭제 @@ -687,7 +687,7 @@ export default function LaancDrawControl(props) { handlerCreateGroupMarker(mapObject, data, area.areaType); } // 구역설정이 종료되고 타입도 바로 변경 - dispatch(clientDrawTypeChange('DONE')); + dispatch(clientChangeDrawType('DONE')); } }); } else if (areas.length > 0 && areas[0].areaType) { diff --git a/src/components/laanc/map/LaancMapModal.js b/src/components/laanc/map/LaancMapModal.js new file mode 100644 index 00000000..9d583d1c --- /dev/null +++ b/src/components/laanc/map/LaancMapModal.js @@ -0,0 +1,274 @@ +import { useEffect, useRef, useState, lazy, Suspense } from 'react'; +import { useDispatch, useSelector } from '@src/redux/store'; +import { + Button, + Modal, + ModalHeader, + ModalBody, + ModalFooter +} from '@component/ui'; +import LaancMapDetail from './LaancMapDetail'; +import { initFlightBasState } from '@src/redux/features/laanc/laancState'; +import { + clientAltitudeData, + clientChangeDrawType, + clientControlLaancModal, + clientSaveAreaCoordinateList, + clientSaveAreaDetailList +} from '@src/redux/features/laanc/laancSlice'; +import { openModal } from '@src/redux/features/comn/message/messageSlice'; + +const LaancDrawModal = lazy(() => import('./LaancDrawModal')); +const LaancMapWeather = lazy(() => import('./LaancMapWeather')); + +export default function LaancMapModal({ + drawObj, + mapContainer, + weather, + areaCoordList +}) { + const dispatch = useDispatch(); + const { drawType, isOpenModal } = useSelector(state => state.laancState); + + // 저장된 비행구역 데이터 + const [saveData, setSaveData] = useState(); + + // 비행구역 저장 가능 여부 + const [isSaveable, setIsSaveable] = useState(false); + + // 비행구역 고도 + const [saveElev, setSaveElev] = useState([]); + + // 날씨 모달 + const [formModal, setFormModal] = useState(false); + + // 특별비행신청 모달(드론 원스톱 바로가기 기능) + const [modal, setModal] = useState({ + title: '', + desc: '', + isOpen: false + }); + + /** + * 비행구역 저장 가능 유무 체크 + * @param {boolean} save 비행구역 저장 가능 유무 + */ + const handlerSaveCheck = save => { + setIsSaveable(save); + }; + + // 비행구역 추가 가능 여부 판단 + const [addData, setAddData] = useState({ + isAddable: false, + isViewAdd: false, + overAdd: false + }); + + // 비행구역 추가 버튼 클릭 시 + const handlerAddClick = () => { + if (!addData.isAddable || !addData.overAdd) { + handlerAddChange('isAddable', true); + } + }; + + /** + * 비행구역 추가 관련 상태 변경 + * @param {string} key addData의 key + * @param {boolean} val addData의 value + */ + const handlerAddChange = (key, val) => { + setAddData(prev => ({ + ...prev, + [key]: val + })); + }; + + /** + * 비행구역 고도 저장 + * @param {number} elev 비행고도 + */ + const handlerSaveElev = elev => { + setSaveElev([elev]); + }; + + /** + * 비행구역 타입 변경 시 그리기 모드 상태일 때 에러 표출 + * @param {string} val 비행구역 타입 + */ + const handlerDrawType = val => { + if (drawObj.getMode().includes('draw')) { + dispatch( + openModal({ + header: '비행 구역 설정', + body: ( + <> + 비행구역 설정이 완료되지 않았습니다. +
+ 비행구역 설정 완료 후 타입 변경 부탁드립니다. + + ) + }) + ); + } else { + dispatch(clientChangeDrawType(val)); + } + }; + + /** + * 비행구역 데이터 초기화 + */ + const handlerInitCoordinates = () => { + const init = initFlightBasState.initDetail.areaList.concat(); + dispatch(clientSaveAreaCoordinateList(init)); + }; + + /** + * laanc계획서 비행구역 저장버튼 클릭 시 비행구역 정보 저장 + */ + const handlerSave = async () => { + if (areaCoordList) { + console.log('save'); + const areaDetail = areaCoordList; + const resultAreaDetail = areaDetail.map(area => { + return { + ...area, + coordList: areaDetail[0].coordList + }; + }); + + dispatch(clientControlLaancModal(false)); + dispatch(clientSaveAreaDetailList(resultAreaDetail)); + } + }; + + /** + * 날씨 모달 표출 + */ + const handlerWeather = () => { + setFormModal(!formModal); + }; + + /** + * 특별비행신청 모달 표출 + */ + const handlerModal = () => { + setModal(!modal); + }; + + return ( + <> + { + dispatch(clientControlLaancModal(false)); + dispatch(clientSaveAreaCoordinateList(saveData)); + }} + className='modal-dialog-centered modal-xl' + > + { + dispatch(clientControlLaancModal(false)); + dispatch(clientSaveAreaCoordinateList(saveData)); + }} + > + 비행 구역 설정 + + + + + + + +
+
+ + + + + {addData.isViewAdd ? ( + + ) : null} + {addData.isViewAdd && weather[0]?.coordList[0].lat != 0 ? ( + + ) : null} +
+
+ + ※ 비행구역설정 완료를 원하시면 마지막 좌표 지점에서 + 더블클릭해주시기 바랍니다. + + +
+
+ + + {/* 날씨 모달 */} + + + + + + ); +} diff --git a/src/components/laanc/map/LaancMapWeather.js b/src/components/laanc/map/LaancMapWeather.js new file mode 100644 index 00000000..84111f82 --- /dev/null +++ b/src/components/laanc/map/LaancMapWeather.js @@ -0,0 +1,38 @@ +import { lazy, Suspense } from 'react'; +import { + Button, + Modal, + ModalHeader, + ModalBody, + ModalFooter +} from '@component/ui'; + +const WeatherContainer = lazy(() => + import('@src/containers/basis/flight/plan/WeatherContainer') +); + +export default function LaancMapWeather({ + formModal, + handlerWeather, + weather +}) { + return ( + + 날씨 정보 + + + + + + + + + + ); +} diff --git a/src/components/laanc/step/LaancStep1.js b/src/components/laanc/step/LaancStep1.js index e0bc6f8a..d74e3b94 100644 --- a/src/components/laanc/step/LaancStep1.js +++ b/src/components/laanc/step/LaancStep1.js @@ -27,15 +27,14 @@ import { } from '@component/ui'; import { openModal } from '@src/redux/features/comn/message/messageSlice'; import { MODAL_BODY, MODAL_HEADER } from '@src/configs/msgConst'; +import { clientControlLaancModal } from '@src/redux/features/laanc/laancSlice'; const LaancModal = lazy(() => import('../LaancModal')); const LaancQr = lazy(() => import('../../../components/laanc/LaancQr')); -const FlightArea = lazy(() => import('../map/FlightArea')); +const LaancMap = lazy(() => import('../map/LaancMap')); export default function LaancStep1({ detailData, setDetailData, - centeredModal, - setCenteredModal, handlerStep, currentParm, handlerLaancClose @@ -82,7 +81,9 @@ export default function LaancStep1({ // URL 쿼리 파라미터 중 'map' 값을 가져옵니다. useEffect(() => { - if (!currentParm) setCenteredModal(mapParam != 'true' ? false : true); + if (!currentParm) { + dispatch(clientControlLaancModal(mapParam != 'true' ? false : true)); + } }, [location]); // 일물 일출 데이터 호출 @@ -1230,15 +1231,18 @@ export default function LaancStep1({
비행 구역 설정 -
- import('../map/FlightArea')); +const LaancMap = lazy(() => import('../map/LaancMap')); -export default function LaancStep2({ - data, - handlerStep, - centeredModal, - setCenteredModal, - handlerLaancClose -}) { +export default function LaancStep2({ data, handlerStep, handlerLaancClose }) { const obj = { fltType: { COMMERCIAL: '사업', @@ -57,13 +51,6 @@ export default function LaancStep2({ // 약관 동의 데이터 useEffect(() => { - // dispatch( - // TermsActions.getTermsList.request({ - // langDivCd: 'KOR', - // siteCd: 'SANDBOX', - // termsCtgryCd: 'AGREE_LAANC' - // }) - // ); dispatch( getTermsList({ langDivCd: 'KOR', @@ -149,11 +136,7 @@ export default function LaancStep2({
- +
diff --git a/src/components/laanc/step/LaancStep3.js b/src/components/laanc/step/LaancStep3.js index 0032d35c..1f63ef23 100644 --- a/src/components/laanc/step/LaancStep3.js +++ b/src/components/laanc/step/LaancStep3.js @@ -18,14 +18,12 @@ import { CheckCircle } from 'react-feather'; import { HOST } from '../../../configs/constants'; pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; -const FlightArea = lazy(() => import('../map/FlightArea')); +const LaancMap = lazy(() => import('../map/LaancMap')); export default function LaancStep3({ disabledAnimation, data, setDisabledAnimation, - handlerLaancClose, - centeredModal, - setCenteredModal + handlerLaancClose }) { const obj = { fltType: { @@ -85,12 +83,7 @@ export default function LaancStep3({
- +
diff --git a/src/containers/basis/flight/plan/WeatherContainer.js b/src/containers/basis/flight/plan/WeatherContainer.js index f2149d8c..847a7a81 100644 --- a/src/containers/basis/flight/plan/WeatherContainer.js +++ b/src/containers/basis/flight/plan/WeatherContainer.js @@ -22,9 +22,9 @@ export default function WeatherContainer({ mapAreaCoordList }) { let plus_day2 = dayjs().add(2, 'day').format('YYYYMMDD'); useEffect(() => { - if (weather.baseDate != '') { + if (weather?.baseDate != '') { let wheatherobj = {}; - const weatherData = weather.response.body.items?.item; + const weatherData = weather?.response.body.items?.item; //오늘 날씨 필터링 const todayres = weatherData.filter( weatherData => weatherData.fcstDate == date diff --git a/src/containers/laanc/LaancContainer.js b/src/containers/laanc/LaancContainer.js index 8c4ff864..d5ad5289 100644 --- a/src/containers/laanc/LaancContainer.js +++ b/src/containers/laanc/LaancContainer.js @@ -7,7 +7,7 @@ import { clientInitLaanc, clientInitAreaDetailInitial } from '@src/redux/features/laanc/laancSlice'; -import { clientDrawTypeChange } from '@src/redux/features/control/map/mapSlice'; +import { clientChangeDrawType } from '@src/redux/features/laanc/laancSlice'; import { Link } from 'react-router-dom'; const LaancPlanContainer = lazy(() => import('./LaancPlanContainer')); const LaancSearch = lazy(() => @@ -32,7 +32,7 @@ export default function LaancContainer() { // URL 쿼리 파라미터 중 'map' 값을 가져옵니다. useEffect(() => { // Redux Store 초기화 - dispatch(clientDrawTypeChange('')); + dispatch(clientChangeDrawType('')); dispatch(clientInitLaanc()); dispatch(clientInitAreaDetailInitial()); setDisabledAnimation(mapParam != 'true' ? false : true); @@ -47,7 +47,7 @@ export default function LaancContainer() { // LAANC 신청하기 버튼 클릭 헨들러 const handleApply = () => { - dispatch(clientDrawTypeChange('')); + dispatch(clientChangeDrawType('')); dispatch(clientInitLaanc()); dispatch(clientInitAreaDetailInitial()); setDisabledAnimation(true); diff --git a/src/containers/laanc/LaancPlanContainer.js b/src/containers/laanc/LaancPlanContainer.js index 4935bcd8..d5f1b6bb 100644 --- a/src/containers/laanc/LaancPlanContainer.js +++ b/src/containers/laanc/LaancPlanContainer.js @@ -2,8 +2,10 @@ import { lazy, useEffect, useState, Suspense } from 'react'; import { initFlightBasState } from '@src/redux/features/laanc/laancState'; import { Modal } from '@component/ui'; import { useDispatch, useSelector } from '@src/redux/store'; -import { clientDrawTypeChange } from '@src/redux/features/control/map/mapSlice'; -import { clientInitAreaDetailInitial } from '@src/redux/features/laanc/laancSlice'; +import { + clientInitAreaDetailInitial, + clientChangeDrawType +} from '@src/redux/features/laanc/laancSlice'; const LaancStep1 = lazy(() => import('../../components/laanc/step/LaancStep1')); const LaancStep2 = lazy(() => import('../../components/laanc/step/LaancStep2')); @@ -22,8 +24,6 @@ export default function LaancPlanContainer({ const [step, setStep] = useState(1); // laanc 초기값 const [detailData, setDetailData] = useState(initFlightBasState.initDetail); - // 비행 구역 보달 - const [centeredModal, setCenteredModal] = useState(false); // 로그인 회원 정보 세팅 useEffect(() => { @@ -35,7 +35,7 @@ export default function LaancPlanContainer({ }); } return () => { - dispatch(clientDrawTypeChange('')); + dispatch(clientChangeDrawType('')); }; }, []); @@ -67,8 +67,6 @@ export default function LaancPlanContainer({ )} @@ -93,8 +89,6 @@ export default function LaancPlanContainer({ disabledAnimation={disabledAnimation} setDisabledAnimation={setDisabledAnimation} handlerLaancClose={handlerLaancClose} - centeredModal={centeredModal} - setCenteredModal={setCenteredModal} /> )} diff --git a/src/redux/features/control/map/mapSlice.ts b/src/redux/features/control/map/mapSlice.ts index cc3ac622..c3aa1e32 100644 --- a/src/redux/features/control/map/mapSlice.ts +++ b/src/redux/features/control/map/mapSlice.ts @@ -13,7 +13,6 @@ const initMap: IMapState = { area0005: true, area0006: true, areaType: 'linear', - drawType: '', flightAreaMarker: undefined }; @@ -77,10 +76,6 @@ const mapSlice = createSlice({ state = { ...state, ...initArea }; } }, - clientDrawTypeChange: (state, action) => { - const value = action.payload; - state.drawType = value; - }, clientFlightAreaClick: (state, action) => { const value = action.payload; state.flightAreaMarker = value; @@ -91,7 +86,6 @@ const mapSlice = createSlice({ export const { clientAreaClick, - clientDrawTypeChange, clientFlightAreaClick, clientMapInit, clientMapTypeChange, diff --git a/src/redux/features/control/map/mapState.ts b/src/redux/features/control/map/mapState.ts index 45ed8299..86adf32d 100644 --- a/src/redux/features/control/map/mapState.ts +++ b/src/redux/features/control/map/mapState.ts @@ -10,6 +10,5 @@ export interface IMapState { area0005: boolean; area0006: boolean; areaType: string; - drawType: string; flightAreaMarker: any; } diff --git a/src/redux/features/laanc/laancSlice.ts b/src/redux/features/laanc/laancSlice.ts index 1aa39e14..88ac7834 100644 --- a/src/redux/features/laanc/laancSlice.ts +++ b/src/redux/features/laanc/laancSlice.ts @@ -295,7 +295,10 @@ export const initLaanc: laancState = { planAreaDuplicatd: false, // 비행 구역 중복 여부 시간 중복 == 비행구역내에 타 사용자 비행구역 정보 flight: false // 무조건 날 수 있음 } - } + }, + + drawType: '', + isOpenModal: false }; const laancSlice = createSlice({ @@ -329,6 +332,14 @@ const laancSlice = createSlice({ clientSaveAreaDetailList: (state, action) => { state.areaList = action.payload as IFlightPlanAreaDataRq[]; state.areaCoordList = action.payload as IFlightPlanAreaDataRq[]; + }, + // 비행계획서 그리기 타입 지정 + clientChangeDrawType: (state, action) => { + state.drawType = action.payload as string; + }, + // Laanc 계획서 모달 + clientControlLaancModal: (state, action) => { + state.isOpenModal = action.payload as boolean; } }, extraReducers: builder => { @@ -378,7 +389,9 @@ export const { clientInitAreaDetailInitial, clientAltitudeData, clientRoupSelect, - clientSaveAreaDetailList + clientSaveAreaDetailList, + clientChangeDrawType, + clientControlLaancModal } = laancSlice.actions; export const laancReducer = laancSlice.reducer; diff --git a/src/redux/features/laanc/laancState.ts b/src/redux/features/laanc/laancState.ts index 46c22e4f..9eb309d8 100644 --- a/src/redux/features/laanc/laancState.ts +++ b/src/redux/features/laanc/laancState.ts @@ -15,6 +15,9 @@ export interface laancState { laancQrData: ILaancTsQrRs; scheduleList: IBasFlightScheduleListRs[] | []; selectGroup: ISelectGroupRs; + + drawType: string; + isOpenModal: boolean; } export interface IweatherRs {