기간 설정 select 표출 조건 추가

src/containers/statistics/FlightContainer.js

@@ -14,15 +14,32 @@ import {
 } from 'reactstrap';
 import { Search } from 'react-feather';
 import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc';
-import { Bar, Doughnut, Polar } from 'react-chartjs-2';
+import { Bar, Doughnut } from 'react-chartjs-2';
+import { useState } from 'react';
 
 export default function FlightContainer({
   tooltipShadow,
   gridLineColor,
   labelColor
 }) {
+  const [searchType, setSearchType] = useState({
+    type: 'year',
+    year: new Date().getFullYear(),
+    month: new Date().getMonth() + 1,
+    day: new Date().getDate()
+  });
+
+  console.log(searchType);
+
   const titleName = '비행 통계';
 
+  const handleChangeSearchType = (type, val) => {
+    setSearchType({
+      ...searchType,
+      [type]: type === 'type' ? val : Number(val)
+    });
+  };
+
   const options = {
       elements: {
         rectangle: {
@@ -318,46 +335,83 @@ export default function FlightContainer({
                   <div className='select-date-wrap'>
                     <Row>
                       <div className='select-date'>
-                        <CustomInput inline type='select' id='' bsSize='sm'>
+                        <CustomInput
-                          <option>년</option>
+                          inline
-                          <option>월</option>
+                          type='select'
-                          <option>일</option>
+                          id=''
-                          <option>시간</option>
+                          bsSize='sm'
+                          value={searchType.type}
+                          onChange={e =>
+                            handleChangeSearchType('type', e.target.value)
+                          }
+                        >
+                          <option value='year'>년</option>
+                          <option value='month'>월</option>
+                          <option value='day'>일</option>
+                          <option value='time'>시간</option>
                         </CustomInput>
                       </div>
+
+                      {searchType.type === 'month' ||
+                      searchType.type === 'day' ||
+                      searchType.type === 'time' ? (
+                        <>
                           <div className='select-date'>
-                        <CustomInput inline type='select' id='' bsSize='sm'>
+                            <CustomInput
+                              inline
+                              type='select'
+                              id=''
+                              bsSize='sm'
+                              value={searchType.year}
+                              onChange={e =>
+                                handleChangeSearchType('year', e.target.value)
+                              }
+                            >
                               <option>2023</option>
-                          <option>2022</option>
-                          <option>2021</option>
                             </CustomInput>
                           </div>
+                          {searchType.type === 'day' ||
+                          searchType.type === 'time' ? (
                             <div className='select-date'>
                               <CustomInput
                                 inline
                                 type='select'
                                 id=''
                                 bsSize='sm'
-                          value='월'
+                                value={searchType.month}
+                                onChange={e =>
+                                  handleChangeSearchType(
+                                    'month',
+                                    e.target.value
+                                  )
+                                }
                               >
-                          <option>1</option>
+                                <option value={1}>1</option>
-                          <option>1</option>
+                                <option value={2}>2</option>
-                          <option>1</option>
+                                <option value={11}>11</option>
                               </CustomInput>
                             </div>
+                          ) : null}
+                          {searchType.type === 'time' ? (
                             <div className='select-date'>
                               <CustomInput
                                 inline
                                 type='select'
                                 id=''
                                 bsSize='sm'
-                          value='일'
+                                value={searchType.day}
+                                onChange={e =>
+                                  handleChangeSearchType('day', e.target.value)
+                                }
                               >
-                          <option>1</option>
+                                <option value={1}>1</option>
-                          <option>1</option>
+                                <option value={2}>2</option>
-                          <option>1</option>
+                                <option value={7}>7</option>
                               </CustomInput>
                             </div>
+                          ) : null}
+                        </>
+                      ) : null}
                     </Row>
                     {/* <Calendar size={14} />
                     <Flatpickr