지역 검색 필터 추가

src/components/flight/FlightApprovalsReport.js

@@ -1,12 +1,15 @@
 import { useState } from 'react';
 import Flatpickr from 'react-flatpickr';
-import { Button, Input, InputGroup, Col } from '@component/ui';
+import { Button, Input, CustomInput, Col } from '@component/ui';
 import { Search, Calendar } from 'react-feather';
 import dayjs from 'dayjs';
 
 export default function FlightApprovalsReport(props) {
   // 식별번호
   const [filterId, setFilterId] = useState('');
+
+  // 지역
+  const [filterArea, setFilterArea] = useState('');
   // 달력
   const [searchDate, setSearchDate] = useState({
     startDate: dayjs().format('YYYY-MM-DD'),
@@ -49,10 +52,49 @@ export default function FlightApprovalsReport(props) {
             onChange={e => setFilterId(`${e.target.value}`)}
           />
         </div>
+        <div
+          className='search-box'
+          style={{ display: 'flex', justifyContent: 'start' }}
+        >
+          <div
+            className='search-list-ti'
+            style={{
+              color: '#555',
+              textAlign: 'start',
+              minWidth: '50px',
+              width: '60px',
+              marginLeft: '15px'
+            }}
+          >
+            지역
+          </div>
+          <div className='search-list'>
+            <div className='search-list-cont'>
+              <CustomInput
+                inline
+                type='checkbox'
+                id='exampleCustomCheckbox'
+                label='전체'
+                checked={filterArea === ''}
+                onChange={() => setFilterArea('')}
+              />
+              <CustomInput
+                inline
+                type='checkbox'
+                id='exampleCustomCheckbox2'
+                label='김포'
+                checked={filterArea === 'gimpo'}
+                onChange={() => setFilterArea('gimpo')}
+              />
+            </div>
+          </div>
+        </div>
         <div>
           <Button
             color='primary'
-            onClick={() => props.handlerSearch(filterId, searchDate)}
+            onClick={() =>
+              props.handlerSearch(filterId, searchDate, filterArea)
+            }
             size='sm'
           >
             검색

src/containers/flight/flightApprovalsContainer.js

@@ -81,7 +81,7 @@ export default function FlightApprovalsContainer() {
     if (areaCoordList.length === 0) return;
   }, [areaCoordList]);
 
-  const handlerSearch = (search, searchDate) => {
+  const handlerSearch = (search, searchDate, filterArea) => {
     setStartDate(searchDate.startDate);
     setEndDate(searchDate.endDate);
 
@@ -93,6 +93,7 @@ export default function FlightApprovalsContainer() {
         getLaancAprvList({
           searchStDt: searchDate.startDate,
           searchEndDt: searchDate.endDate,
+          selectZone: filterArea,
           approvalCd: search === '승인' ? 'S' : search === '미승인' ? 'F' : 'U'
         })
       );
@@ -101,6 +102,7 @@ export default function FlightApprovalsContainer() {
         getLaancAprvList({
           searchStDt: searchDate.startDate,
           searchEndDt: searchDate.endDate,
+          selectZone: filterArea,
           applyNo: search
         })
       );
@@ -108,7 +110,8 @@ export default function FlightApprovalsContainer() {
       dispatch(
         getLaancAprvList({
           searchStDt: searchDate.startDate,
-          searchEndDt: searchDate.endDate
+          searchEndDt: searchDate.endDate,
+          selectZone: filterArea
         })
       );
     }