laanc step1 popover 추가

src/views/laanc/LaancStep1.js

@@ -12,7 +12,8 @@ import {
   AlertCircle,
   CheckCircle,
   XCircle,
-  AlertTriangle
+  AlertTriangle,
+  Info
 } from 'react-feather';
 import { ErrorModal } from '../../components/modal/ErrorModal';
 import moment from 'moment';
@@ -26,6 +27,10 @@ import {
   ModalFooter,
   Alert,
   FormGroup,
+  Popover,
+  PopoverHeader,
+  UncontrolledPopover,
+  PopoverBody,
   Label,
   Input
 } from 'reactstrap';
@@ -56,6 +61,10 @@ export default function LaancStep1({
   const queryParams = new URLSearchParams(location.search);
   const mapParam = queryParams.get('map');
 
+  const [popoverCommercial, setPopoverCommercial] = useState(false);
+  const [popoverSchFltStDt, setPopoverSchFltStDt] = useState(false);
+  const [popoverSchFltEndDt, setPopoverSchFltEndDt] = useState(false);
+
   const [modal2, setModal2] = useState({
     isOpen: false,
     title: '',
@@ -130,6 +139,15 @@ export default function LaancStep1({
     schFltEndDtRef.current.flatpickr.close();
   };
 
+  const toggle = type => {
+    if (type === 'commercial') {
+      setPopoverCommercial(!popoverCommercial);
+    } else if (type === 'schFltStDt') {
+      setPopoverSchFltStDt(!popoverSchFltStDt);
+    } else if (type === 'schFltEndDt') {
+      setPopoverSchFltEndDt(!popoverSchFltEndDt);
+    }
+  };
   return (
     <>
       <ModalHeader>
@@ -163,6 +181,24 @@ export default function LaancStep1({
                 <div className='ti'>비행 유형</div>
                 <Label for='test'>
                   <span className='necessary'>*</span>승인 유형
+                  <Info
+                    id='commercial'
+                    onMouseEnter={() => setPopoverCommercial(true)}
+                    onMouseLeave={() => setPopoverCommercial(false)}
+                    size={16}
+                    style={{ marginLeft: '2px', cursor: 'pointer' }}
+                  />
+                  <UncontrolledPopover
+                    isOpen={popoverCommercial}
+                    target='commercial'
+                    toggle={() => toggle('commercial')}
+                  >
+                    <PopoverBody>
+                      항공기대여업, 항공레저스포츠사업, 초경량비행장치
+                      사용사업에 해당되는 경우 "사업"으로 체크하여 주시기
+                      바랍니다.
+                    </PopoverBody>
+                  </UncontrolledPopover>
                 </Label>
                 <Input
                   type='select'
@@ -192,7 +228,25 @@ export default function LaancStep1({
                   <FormGroup>
                     <Label for='test'>
                       <span className='necessary'>*</span>비행 시작 일자
+                      <Info
+                        id='schFltStDt'
+                        onMouseEnter={() => setPopoverSchFltStDt(true)}
+                        onMouseLeave={() => setPopoverSchFltStDt(false)}
+                        size={16}
+                        style={{ marginLeft: '2px', cursor: 'pointer' }}
+                      />
+                      <UncontrolledPopover
+                        isOpen={popoverSchFltStDt}
+                        target='schFltStDt'
+                        toggle={() => toggle('schFltStDt')}
+                      >
+                        <PopoverBody>
+                          비행 시작 일자는 오늘기준 90일 이내까지만 선택
+                          가능합니다.
+                        </PopoverBody>
+                      </UncontrolledPopover>
                     </Label>
+
                     <Flatpickr
                       className='form-control form-control-sm'
                       type='text'
@@ -224,6 +278,23 @@ export default function LaancStep1({
                   <FormGroup>
                     <Label for='test'>
                       <span className='necessary'>*</span>비행 종료 일자
+                      <Info
+                        id='schFltEndDt'
+                        onMouseEnter={() => setPopoverSchFltEndDt(true)}
+                        onMouseLeave={() => setPopoverSchFltEndDt(false)}
+                        size={16}
+                        style={{ marginLeft: '2px', cursor: 'pointer' }}
+                      />
+                      <UncontrolledPopover
+                        isOpen={popoverSchFltEndDt}
+                        target='schFltEndDt'
+                        toggle={() => toggle('schFltEndDt')}
+                      >
+                        <PopoverBody>
+                          비행 종료 일자는 오늘기준 6개월 이내까지만 선택
+                          가능합니다.
+                        </PopoverBody>
+                      </UncontrolledPopover>
                     </Label>
                     <Flatpickr
                       className='form-control form-control-sm'