laanc step1 비행구역 미설정시 달력 문구 띄우기

src/views/laanc/LaancStep1.js

@@ -6,6 +6,7 @@ import { CgTrees } from 'react-icons/cg';
 import { VscRadioTower } from 'react-icons/vsc';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import Flatpickr from 'react-flatpickr';
+
 import '@styles/react/libs/flatpickr/flatpickr.scss';
 import {
   AlertCircle,
@@ -49,10 +50,18 @@ export default function LaancStep1({
   const history = useHistory();
   const fltElevRef = useRef(null);
   const bufferZoneRef = useRef(null);
+  const schFltStDtRef = useRef(null);
+  const schFltEndDtRef = useRef(null);
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const mapParam = queryParams.get('map');
 
+  const [modal2, setModal2] = useState({
+    isOpen: false,
+    title: '',
+    desc: ''
+  });
+
   useEffect(() => {
     // URL 쿼리 파라미터 중 'map' 값을 가져옵니다.
     if (!currentParm) setCenteredModal(mapParam != 'true' ? false : true);
@@ -67,6 +76,7 @@ export default function LaancStep1({
     ) {
     }
   }, [data]);
+
   const handleInputClick = type => {
     // Input 요소가 포커스될 때 커서를 맨 뒤로 이동
     if (fltElevRef.current && type === 'fltElev') {
@@ -100,6 +110,26 @@ export default function LaancStep1({
       });
     }
   };
+
+  // 날짜 선택 핸들러
+  const handleOpenFlatpickr = () => {
+    if (data.areaList[0].coordList[0].lat === 0) {
+      setModal2({
+        isOpen: true,
+        title: '비행 구역 설정',
+        desc: '비행 구역 설정을 먼저 설정 해 주세요'
+      });
+      closeFlatpickr();
+      return false;
+    }
+  };
+
+  // 비행 구역 미 설정 핸들러
+  const closeFlatpickr = () => {
+    schFltStDtRef.current.flatpickr.close();
+    schFltEndDtRef.current.flatpickr.close();
+  };
+
   return (
     <>
       <ModalHeader>
@@ -171,6 +201,9 @@ export default function LaancStep1({
                       data-enable-time
                       defaultValue={data.schFltStDt}
                       value={data.schFltStDt}
+                      ref={schFltStDtRef}
+                      onFocus={handleOpenFlatpickr}
+                      // onOpen={handleOpenFlatpickr}
                       options={{
                         minDate: moment().format('YYYY-MM-DD'),
                         maxDate: moment().add(90, 'day').format('YYYY-MM-DD')
@@ -200,6 +233,8 @@ export default function LaancStep1({
                       data-enable-time
                       defaultValue={data.schFltEndDt}
                       value={data.schFltEndDt}
+                      ref={schFltEndDtRef}
+                      onFocus={handleOpenFlatpickr}
                       options={{
                         minDate: moment().format('YYYY-MM-DD'),
                         maxDate: moment().add(6, 'month').format('YYYY-MM-DD')
@@ -548,6 +583,7 @@ export default function LaancStep1({
           다음
         </Button>
       </ModalFooter>
+      <ErrorModal modal={modal2} setModal={setModal2} />
     </>
   );
 }