Laanc step3 디자인 변경 및 런타임 에러 수정(redux 초기화 기능 추가)

11 months ago · 27c701f1a4
7 changed files with 70 additions and 71 deletions
--- a/src/containers/laanc/LaancContainer.js
+++ b/src/containers/laanc/LaancContainer.js
@ -5,6 +5,8 @@ import moment from 'moment';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
 import * as FlightAction from '../../modules/basis/flight/actions/basisFlightAction';
+import * as LaancAction from '../../modules/laanc/actions/laancActions';
+import { drawTypeChangeAction } from '../../modules/control/map/actions/controlMapActions';
 import {
  JOIN_LIST,
  GROUP_LIST
@ -118,6 +120,8 @@ export default function LaancContainer() {
  };

  const handleApply = () => {
+    dispatch(drawTypeChangeAction(''));
+    dispatch(LaancAction.LAANC_APPROVAL_INIT());
    setDisabledAnimation(true);
    setCurrentParm(true);
  };
--- a/src/containers/laanc/LaancPlanContainer.js
+++ b/src/containers/laanc/LaancPlanContainer.js
@ -47,6 +47,11 @@ export default function LaancPlanContainer({
    };
  }, []);

+  // useEffect(() => {
+  //   if (disabledAnimation) {
+  //     setStep(1);
+  //   }
+  // }, [disabledAnimation]);
  //비행 방식 직접 입력칸 작성 시 api 호출 부분
  useEffect(() => {
    if (Object.getOwnPropertyNames(finalDetailData).length != 0) {
@ -56,7 +61,9 @@ export default function LaancPlanContainer({

  // laanc 승인 api 200 시 step 이동
  useEffect(() => {
-    if (laancApply) setStep(2);
+    if (laancApply) {
+      setStep(2);
+    }
  }, [laancApply]);

  // step 핸들러
@ -204,8 +211,6 @@ export default function LaancPlanContainer({
    }
  };

-  console.log('>>>', detailData);
-
  // 스텝 1 다음 버튼 이벤트
  const handlerNext = () => {
    const reg_email =
@ -389,6 +394,7 @@ export default function LaancPlanContainer({
  };

  const handlerLaancClose = () => {
+    setStep(1);
    setDisabledAnimation(!disabledAnimation);
    dispatch(AREA_DETAIL_INIT());
  };
--- a/src/modules/laanc/actions/laancActions.ts
+++ b/src/modules/laanc/actions/laancActions.ts
@ -22,6 +22,9 @@ const LAANC_FLIGHT_APPROVAL_FAILURE = 'laanc/approval/FAILURE';
 const LAANC_FLIGHT_CREATE_REQUEST = 'laanc/create/REQUEST';
 const LAANC_FLIGHT_CREATE_SUCCESS = 'laanc/create/SUCCESS';
 const LAANC_FLIGHT_CREATE_FAILURE = 'laanc/create/FAILURE';
+
+// laanc 초기화
+const INIT_LAANC = 'laanc/init';
 // laanc 공문 pdf 다운로드
 export const laancPdfAction = createAsyncAction(
  LAANC_PDF_REQUEST,
@ -36,6 +39,8 @@ export const LAANC_FLIGHT_Approval = createAsyncAction(
  LAANC_FLIGHT_APPROVAL_FAILURE
 )<FlightPlanData, LaancApproval, AxiosError>();

+export const LAANC_APPROVAL_INIT = createAction(INIT_LAANC)();
+
 // laanc 비행계획서 생성
 export const LAANC_FLIGHT_CREATE = createAsyncAction(
  LAANC_FLIGHT_CREATE_REQUEST,
@ -46,6 +51,7 @@ export const LAANC_FLIGHT_CREATE = createAsyncAction(
 const actions = {
  laancPdfAction,
  LAANC_FLIGHT_Approval,
-  LAANC_FLIGHT_CREATE
+  LAANC_FLIGHT_CREATE,
+  LAANC_APPROVAL_INIT
 };
 export type LaancAction = ActionType<typeof actions>;
--- a/src/modules/laanc/reducers/laancReducers.ts
+++ b/src/modules/laanc/reducers/laancReducers.ts
@ -30,6 +30,12 @@ export const laancReducer = createReducer<laancState, Actions.LaancAction>(
      draft.laancPdf = data;
      // draft.detail = initFlightBas.initDetail;
    })
+  )
+  .handleAction(Actions.LAANC_APPROVAL_INIT, (state, action) =>
+    produce(state, draft => {
+      draft.laancApply = undefined;
+      // draft.detail = initFlightBas.initDetail;
+    })
  );

 // handleAction(Actions.laancFlightApproval.success, (state, action) =>
--- a/src/views/laanc/LaacnStep3.js
+++ b/src/views/laanc/LaacnStep3.js
@ -56,16 +56,10 @@ export default function LaacnStep3({
  const handlerClose = () => {
    setFormModal(!formModal);
  };
-
  const handlerPdfDownload = e => {
-    const url = localStorage.getItem('pdfUrl');
-
-    if (url !== 'undefined') {
-      console.log('@?@?@?@?');
+    if (laancPdf.pdfUrl) {
      let alink = document.createElement('a');
-      alink.href = `http://211.253.11.189:8080${localStorage.getItem(
-        'pdfUrl'
-      )}`;
+      alink.href = `http://211.253.11.189:8080${laancPdf.pdfUrl}`;
      alink.download = 'SamplePDF.pdf';
      alink.click();
    }
@ -235,7 +229,7 @@ export default function LaacnStep3({
              </ul>
            </div>
          </div>
-          <div className='document-btn'>
+          {/* <div className='document-btn'>
            <div className='ti'>승인 공문</div>
            <Row>
              <Col md='6'>
@ -260,7 +254,7 @@ export default function LaacnStep3({
                </Button>
              </Col>
            </Row>
-          </div>
+          </div> */}
        </div>
      </ModalBody>
      <ModalFooter style={{ justifyContent: 'right' }}>
@ -283,11 +277,46 @@ export default function LaacnStep3({
        <Modal
          isOpen={centeredModal2}
          toggle={() => setCenteredModal2(!centeredModal2)}
-          className='modal-dialog-centered document-pop'
+          className='modal-dialog-centered'
+          style={{ maxWidth: '650px', margin: '0 auto' }}
        >
          <ModalHeader toggle={() => setCenteredModal2(!centeredModal2)}>
            비행 승인 완료
          </ModalHeader>
+          <ModalBody>
+            <Document
+              file={`http://211.253.11.189:8080${laancPdf?.pdfUrl}`}
+              onLoadSuccess={onDocumentLoadSuccess}
+            >
+              <div>
+                {Array.from(new Array(numPages), (el, index) => (
+                  <Page key={`page_${index + 1}`} pageNumber={index + 1} />
+                ))}
+              </div>
+              {/* <Page pageNumber={pageNum}  /> */}
+            </Document>
+
+            <Row>
+              <Col md='12'></Col>
+            </Row>
+          </ModalBody>
+          <ModalFooter>
+            <Button size='lg' onClick={handlerPdfDownload}>
+              공문 다운로드
+            </Button>
+            <Button outline onClick={() => setFormModal(!formModal)}>
+              확인
+            </Button>
+          </ModalFooter>
+        </Modal>
+        <Modal
+          isOpen={formModal}
+          toggle={() => setFormModal(!formModal)}
+          className='modal-dialog-centered document-pop'
+        >
+          <ModalHeader toggle={() => setFormModal(!formModal)}>
+            비행 승인 완료
+          </ModalHeader>
          <ModalBody>
            <div className='cont'>
              <CheckCircle className='text-success' size={40} />
@ -306,60 +335,10 @@ export default function LaacnStep3({
              onClick={() => setDisabledAnimation(!disabledAnimation)}
            >
              확인
-            </Button>{' '}
+            </Button>
          </ModalFooter>
        </Modal>
      </ModalFooter>
-      <Modal
-        isOpen={formModal}
-        toggle={handlerClose}
-        className='modal-dialog-centered'
-        style={{ maxWidth: '650px', margin: '0 auto' }}
-      >
-        <ModalHeader toggle={handlerClose}>공문 미리보기</ModalHeader>
-        <ModalBody>
-          {/* <LaancPdf /> */}
-          <Document
-            file={`http://211.253.11.189:8080${localStorage.getItem('pdfUrl')}`}
-            onLoadSuccess={onDocumentLoadSuccess}
-          >
-            <div>
-              {Array.from(new Array(numPages), (el, index) => (
-                <Page key={`page_${index + 1}`} pageNumber={index + 1} />
-              ))}
-            </div>
-            {/* <Page pageNumber={pageNum}  /> */}
-          </Document>
-          {/* <div
-            style={{
-              display: 'flex',
-              justifyContent: 'space-around',
-              alignItems: 'center'
-            }}
-          >
-            <Button
-              onClick={() => (pageNum > 1 ? setPageNum(pageNum - 1) : null)}
-            >
-              &lt;
-            </Button>
-            <span>
-              {pageNum} / {numPages}
-            </span>
-            <Button
-              onClick={() =>
-                pageNum < numPages ? setPageNum(pageNum + 1) : null
-              }
-            >
-              &gt;
-            </Button>
-          </div> */}
-        </ModalBody>
-        <ModalFooter>
-          <Button color='primary' onClick={handlerClose}>
-            확인
-          </Button>
-        </ModalFooter>
-      </Modal>
    </>
  );
 }
--- a/src/views/laanc/LaancStep1.js
+++ b/src/views/laanc/LaancStep1.js
@ -193,6 +193,7 @@ export default function LaancStep1({
                    isOpen={popoverCommercial}
                    target='commercial'
                    toggle={() => toggle('commercial')}
+                    placement='bottom'
                  >
                    <PopoverBody className='pal-popover-body'>
                      항공기대여업, 항공레저스포츠사업, 초경량비행장치
@ -241,6 +242,7 @@ export default function LaancStep1({
                        isOpen={popoverSchFltStDt}
                        target='schFltStDt'
                        toggle={() => toggle('schFltStDt')}
+                        placement='bottom'
                      >
                        <PopoverBody className='pal-popover-body'>
                          비행 시작 일자는 오늘기준 90일 이내까지만 선택
@ -248,7 +250,6 @@ export default function LaancStep1({
                        </PopoverBody>
                      </UncontrolledPopover>
                    </Label>
-
                    <Flatpickr
                      className='form-control form-control-sm'
                      type='text'
@ -292,6 +293,7 @@ export default function LaancStep1({
                        isOpen={popoverSchFltEndDt}
                        target='schFltEndDt'
                        toggle={() => toggle('schFltEndDt')}
+                        placement='bottom'
                      >
                        <PopoverBody className='pal-popover-body'>
                          비행 종료 일자는 오늘기준 6개월 이내까지만 선택
--- a/src/views/laanc/LaancStep2.js
+++ b/src/views/laanc/LaancStep2.js
@ -86,9 +86,6 @@ export default function LaancStep2({
    else if (laancApply?.valid) setLancIsCheck(false);
  }, [laancApply]);

-  useEffect(() => {
-    console.log('>>>>', laancIsCheck);
-  }, [laancIsCheck]);
  useEffect(() => {
    if (flightData && Object.keys(flightData).length > 0) {
      dispatch(LaancAction.LAANC_FLIGHT_CREATE.request(flightData));
@ -115,7 +112,6 @@ export default function LaancStep2({
      ],
      validatedRs: laancApply
    });
-    console.log('>>>', flightData);
    // dispatch(LaancAction.LAANC_FLIGHT_CREATE.request(flightData));
  };