diff --git a/src/views/laanc/LaancStep1.js b/src/views/laanc/LaancStep1.js index 9944e72..ccfd613 100644 --- a/src/views/laanc/LaancStep1.js +++ b/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 ( <> @@ -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({ 다음 + ); }