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] =?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 2de4002..0d9fdc4 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 5c7f92f..3bcee8f 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 1e2cecd..b8f822f 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 99809ec..7e7d452 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 f7cd37c..402a7ba 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 3880268..abcedbc 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 32ad54b..708445a 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 9676eaa..82362ef 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