From 229a05900660ce12bdef6a5c91464cd561d4628a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Mon, 27 Jun 2022 15:20:01 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanAreaForm.js | 99 ++++++++++++++----- .../flight/plan/FlightPlanAreaModal.js} | 28 ++++-- .../flight/plan/FlightPlanAreaContainer.js | 54 ++++++++-- .../flight/plan/FlightPlanDetailContainer.js | 26 +++-- .../basis/flight/actions/basisFlightAction.ts | 16 ++- .../basis/flight/models/basisFlightModel.ts | 12 ++- .../flight/reducers/basisFlightReducer.ts | 8 +- .../basis/flight/sagas/basisFlightSaga.ts | 18 ++++ 8 files changed, 204 insertions(+), 57 deletions(-) rename src/components/{modal/FormModal.js => basis/flight/plan/FlightPlanAreaModal.js} (50%) diff --git a/src/components/basis/flight/plan/FlightPlanAreaForm.js b/src/components/basis/flight/plan/FlightPlanAreaForm.js index 2de40024..0d9fdc43 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaForm.js @@ -1,20 +1,24 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import classnames from 'classnames'; import { Card, CardBody, Col, FormGroup, + FormFeedback, Input, Label, Row, - Button + Button, + Form } from 'reactstrap'; -const FlightPlanAreaForm = () => { + +const FlightPlanAreaForm = (props) => { return ( - +
@@ -38,11 +42,21 @@ const FlightPlanAreaForm = () => { + {/* {props.errors && props.errors.address && ( + + {props.errors.address.message} + + )} */} @@ -56,11 +70,21 @@ const FlightPlanAreaForm = () => { + {/* {props.errors && props.errors.coodinates && ( + + {props.errors.coodinates.message} + + )} */} @@ -70,15 +94,16 @@ const FlightPlanAreaForm = () => { + placeholder='' + innerRef={props.data} + /> @@ -89,33 +114,55 @@ const FlightPlanAreaForm = () => {
-
+
- +
+ + 확인 + + + props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) + } + > + 취소 + - -
+ ) diff --git a/src/components/modal/FormModal.js b/src/components/basis/flight/plan/FlightPlanAreaModal.js similarity index 50% rename from src/components/modal/FormModal.js rename to src/components/basis/flight/plan/FlightPlanAreaModal.js index 5c7f92f2..3bcee8fa 100644 --- a/src/components/modal/FormModal.js +++ b/src/components/basis/flight/plan/FlightPlanAreaModal.js @@ -1,6 +1,11 @@ +import { useState } from 'react'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; +import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer'; + +export const FlightPlanAreaModal = props => { + + const [onSubmit, setOnSubmit] = useState(false); -export const FormModal = props => { return (
{ {props.modal.title} - {props.modal.contents} + - + {/* - + */}
); diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index 1e2cecd1..b8f822fd 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -1,29 +1,59 @@ import React, { useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import {useHistory} from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import FlightPlanAreaForm from '../../../../components/basis/flight/plan/FlightPlanAreaForm'; -import { Button, Col, Row } from 'reactstrap'; +import {Col, Row, Form } from 'reactstrap'; import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; import FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPlanAreaMap'; +import * as yup from 'yup'; +import { yupResolver } from '@hookform/resolvers/yup'; - -const FlightPlanAreaContainer = () => { +const FlightPlanAreaContainer = (props) => { const dispatch = useDispatch(); + const history = useHistory(); + const { areaList } = useSelector(state => state.flightState); - const [airArea, setAirArea] = useState(null); + const validSchema = yup.object().shape({ + // address: yup.string().trim().required('주소가 올바르지 않습니다.'), + // coodinates: yup.string().trim().required('좌표가 올바르지 않습니다.'), + // radius: yup.string().trim().required('반경을 입력해 주세요.'), + // altitude_m: yup.string().trim().required('고도(m)를 입력해 주세요.'), + // altitude_ft: yup.string().trim().required('고도(ft)를 입력해 주세요.'), + }); + + const { register, getValues, setValue, errors, handleSubmit } = useForm({ + defaultValues: { + address: '', + coodinates: '', + radius: '', + altitude_m: '', + altitude_ft: '', + }, + resolver: yupResolver(validSchema) + }); + - const getAriAreaList = () => { + const getAirAreaList = () => { dispatch(Actions.AREA_LIST.request()); } + const createAirArea = async data => { + dispatch(Actions.FLIGHT_PLAN_AREA.request(data)); + + props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }); + props.setOnSubmit(false); + } + useEffect(() => { - getAriAreaList(); + getAirAreaList(); }, []); useEffect(() => { setAirArea(areaList); - }, [areaList]) + }, [areaList]) return ( @@ -34,8 +64,14 @@ const FlightPlanAreaContainer = () => { /> ) : null} - - + + diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 99809ec6..7e7d4528 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -1,18 +1,21 @@ -import React, {useState} from 'react'; +import React, {useEffect, useState} from 'react'; import FlightPlanForm from '../../../../components/basis/flight/plan/FlightPlanForm'; import { CustomDetailLayout } from '../../../../components/layout/CustomDetailLayout'; -import { FormModal } from '../../../../components/modal/FormModal'; +import { FlightPlanAreaModal } from '../../../../components/basis/flight/plan/FlightPlanAreaModal'; import FlightPlanAreaContainer from './FlightPlanAreaContainer'; +import { useSelector } from 'react-redux'; const FlightPlanDetailContainer = () => { + const dispatch = useDispatch(); + const history = useHistory(); + + const { flightPlanArea } = useSelector(state => state.flightState); + const [modal, setModal] = useState({ isOpen: false, - title: '', - contents: '', + title: '', }); - - const saveFlightPlanArea = () => { console.log('비행 구역 설정 저장'); @@ -21,20 +24,23 @@ const FlightPlanDetailContainer = () => { const openModal = () => { setModal({ isOpen: true, - title: '비행 구역 설정', - contents: + title: '비행 구역 설정', }); } + useEffect(() => { + + }, [flightPlanArea]); + return ( - ) diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index f7cd37cc..402a7ba8 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/src/modules/basis/flight/actions/basisFlightAction.ts @@ -1,6 +1,6 @@ import { AxiosError } from 'axios'; import { createAsyncAction, ActionType} from 'typesafe-actions'; -import { FlightAreaData } from '../models/basisFlightModel'; +import { FlightAreaData, FlightPlanArea } from '../models/basisFlightModel'; // 공역 조회 @@ -8,14 +8,26 @@ const AREA_LIST_REQUEST = 'basis/flight/area/LIST_REQUEST'; const AREA_LIST_SUCCESS = 'basis/flight/area/LIST_SUCCESS'; const AREA_LIST_FAILURE = 'basis/flight/area/LIST_FAILURE'; +// 비행 구역 설정 +const FLIGHT_PLAN_AREA_REQUEST = 'basis/flight/plan/area/LIST_REQUEST'; +const FLIGHT_PLAN_AREA_SUCCESS = 'basis/flight/plan/area/LIST_SUCCESS'; +const FLIGHT_PLAN_AREA_FAILURE = 'basis/flight/plan/area/LIST_FAILURE'; + export const AREA_LIST = createAsyncAction( AREA_LIST_REQUEST, AREA_LIST_SUCCESS, AREA_LIST_FAILURE )(); +export const FLIGHT_PLAN_AREA = createAsyncAction( + FLIGHT_PLAN_AREA_REQUEST, + FLIGHT_PLAN_AREA_SUCCESS, + FLIGHT_PLAN_AREA_FAILURE +)(); + const actions = { - AREA_LIST + AREA_LIST, + FLIGHT_PLAN_AREA }; export type FlightAction = ActionType; \ No newline at end of file diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index 3880268e..abcedbcc 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -1,11 +1,21 @@ export interface FlightState { areaList: FlightAreaData | undefined + flightPlanArea: FlightPlanArea | undefined } export interface FlightAreaData { areaList: [] } +export interface FlightPlanArea { + address : '', + coordinates : '', + redius : '', + altitude_m : '', + altitude_ft : '', +} + export const initFlight = { - areaList: undefined + areaList: undefined, + flightPlanArea: undefined }; \ No newline at end of file diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index 32ad54b5..708445ad 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -12,4 +12,10 @@ export const flightReducer = createReducer ( const {data} = action.payload; draft.areaList = data; }) -) ; \ No newline at end of file +) +.handleAction(Actions.FLIGHT_PLAN_AREA.request, (state, action) => + produce(state, draft => { + const data = action.payload; + draft.flightPlanArea = data; + }) +) \ No newline at end of file diff --git a/src/modules/basis/flight/sagas/basisFlightSaga.ts b/src/modules/basis/flight/sagas/basisFlightSaga.ts index 9676eaa8..82362ef7 100644 --- a/src/modules/basis/flight/sagas/basisFlightSaga.ts +++ b/src/modules/basis/flight/sagas/basisFlightSaga.ts @@ -38,6 +38,24 @@ function* listAreaSaga(action: ActionType) { } } +function* createFlightPlanArea(action: ActionType) { + try { + const data = action.payload; + + yield put( + Actions.FLIGHT_PLAN_AREA.success({ + data: data + }) + ) + + } catch (error: any) { + yield put( + Actions.FLIGHT_PLAN_AREA.failure(error) + ) + } +} + export function* flightSaga() { yield takeEvery(Actions.AREA_LIST.request, listAreaSaga); + yield takeEvery(Actions.FLIGHT_PLAN_AREA.request, createFlightPlanArea); } \ No newline at end of file From b00fc131bf16bfe54f3010eac82e920d034a028c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Mon, 27 Jun 2022 15:36:01 +0900 Subject: [PATCH 2/3] . --- src/containers/basis/flight/plan/FlightPlanDetailContainer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 7e7d4528..87078e31 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -3,7 +3,8 @@ import FlightPlanForm from '../../../../components/basis/flight/plan/FlightPlanF import { CustomDetailLayout } from '../../../../components/layout/CustomDetailLayout'; import { FlightPlanAreaModal } from '../../../../components/basis/flight/plan/FlightPlanAreaModal'; import FlightPlanAreaContainer from './FlightPlanAreaContainer'; -import { useSelector } from 'react-redux'; +import {useHistory} from 'react-router-dom'; +import { useDispatch, useSelector } from 'react-redux'; const FlightPlanDetailContainer = () => { From 6babfe2f8f58ff6064499094e09603e7574951d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Thu, 30 Jun 2022 09:58:14 +0900 Subject: [PATCH 3/3] . --- .../basis/flight/plan/FlightPlanAreaForm.js | 58 +------------------ .../basis/flight/plan/FlightPlanForm.js | 45 ++++++++------ .../flight/plan/FlightPlanAreaContainer.js | 12 +--- .../flight/plan/FlightPlanDetailContainer.js | 23 +++++++- 4 files changed, 51 insertions(+), 87 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaForm.js b/src/components/basis/flight/plan/FlightPlanAreaForm.js index 0d9fdc43..50ef0011 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaForm.js @@ -32,63 +32,7 @@ const FlightPlanAreaForm = (props) => {
-
-
- - - - - - {/* {props.errors && props.errors.address && ( - - {props.errors.address.message} - - )} */} - - - -
-
- - - - - - {/* {props.errors && props.errors.coodinates && ( - - {props.errors.coodinates.message} - - )} */} - - - -
+
diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 8a758b86..2df3b01c 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -44,7 +44,7 @@ const FlightPlanForm = (props) => { - + { - + { placeholder='' /> - + + +
+
+ - + { /> - - + { placeholder='' /> - - -
+ + + + -
+ {/*
- + { - + { -
+
*/}
@@ -273,7 +277,8 @@ const FlightPlanForm = (props) => { id='ownerNm' name='ownerNm' size='sm' - placeholder='' + placeholder='' + readOnly /> @@ -287,7 +292,8 @@ const FlightPlanForm = (props) => { id='ownerNm' name='ownerNm' size='sm' - placeholder='' + placeholder='' + readOnly /> @@ -305,7 +311,8 @@ const FlightPlanForm = (props) => { id='ownerNm' name='ownerNm' size='sm' - placeholder='' + placeholder='' + readOnly /> @@ -320,7 +327,8 @@ const FlightPlanForm = (props) => { id='ownerNm' name='ownerNm' size='sm' - placeholder='m' + placeholder='m' + readOnly />
@@ -329,7 +337,8 @@ const FlightPlanForm = (props) => { id='ownerNm' name='ownerNm' size='sm' - placeholder='ft' + placeholder='ft' + readOnly />
diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index b8f822fd..39dc57ec 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -16,18 +16,12 @@ const FlightPlanAreaContainer = (props) => { const { areaList } = useSelector(state => state.flightState); const [airArea, setAirArea] = useState(null); - const validSchema = yup.object().shape({ - // address: yup.string().trim().required('주소가 올바르지 않습니다.'), - // coodinates: yup.string().trim().required('좌표가 올바르지 않습니다.'), - // radius: yup.string().trim().required('반경을 입력해 주세요.'), - // altitude_m: yup.string().trim().required('고도(m)를 입력해 주세요.'), - // altitude_ft: yup.string().trim().required('고도(ft)를 입력해 주세요.'), + const validSchema = yup.object().shape({ }); const { register, getValues, setValue, errors, handleSubmit } = useForm({ - defaultValues: { - address: '', - coodinates: '', + defaultValues: { + coodinates: [], radius: '', altitude_m: '', altitude_ft: '', diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 87078e31..3df9a61e 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -5,18 +5,34 @@ import { FlightPlanAreaModal } from '../../../../components/basis/flight/plan/Fl import FlightPlanAreaContainer from './FlightPlanAreaContainer'; import {useHistory} from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; - +import * as yup from 'yup'; +import { yupResolver } from '@hookform/resolvers/yup'; +import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; +import { useForm } from 'react-hook-form'; const FlightPlanDetailContainer = () => { const dispatch = useDispatch(); const history = useHistory(); const { flightPlanArea } = useSelector(state => state.flightState); - + const [areaInfo, setAreaInfo] = useState(); const [modal, setModal] = useState({ isOpen: false, title: '', }); + + /* Form Validation Checking */ + const validSchema = yup.object().shape({ + }); + const {} = useForm({ + defaultValues: { + coodinates: [], + radius: '', + altitude_m: '', + altitude_ft: '', + }, + resolver: yupResolver(validSchema) + }) const saveFlightPlanArea = () => { console.log('비행 구역 설정 저장'); @@ -30,13 +46,14 @@ const FlightPlanDetailContainer = () => { } useEffect(() => { - + setAreaInfo(flightPlanArea); }, [flightPlanArea]); return (