검색조건 값 변경 함수 추가

src/containers/statistics/FlightContainer.js

@@ -15,7 +15,7 @@ import {
 import { Search } from 'react-feather';
 import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc';
 import { Bar, Doughnut } from 'react-chartjs-2';
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export default function FlightContainer({
   tooltipShadow,
@@ -23,22 +23,37 @@ export default function FlightContainer({
   labelColor
 }) {
   const [searchType, setSearchType] = useState({
-    type: 'year',
+    flightType: 'time',
+    dateType: 'year',
     year: new Date().getFullYear(),
     month: new Date().getMonth() + 1,
     day: new Date().getDate()
   });
-
-  console.log(searchType);
+  const [dateLists, setDateLists] = useState({
+    month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    day: []
+  });
 
   const titleName = '비행 통계';
 
-  const handleChangeSearchType = (type, val) => {
+  useEffect(() => {
+    const { year, month } = searchType;
+    const lastDay = new Date(year, month, 0).getDate();
+    const dayList = Array.from({ length: lastDay }, (_, index) => index + 1);
+
+    setDateLists({ ...dateLists, day: dayList });
+  }, [searchType.month]);
+
+  // 검색조건 handler
+  const handleChangeSearchType = useCallback(
+    (type, val) => {
       setSearchType({
         ...searchType,
-      [type]: type === 'type' ? val : Number(val)
+        [type]: type === 'dateType' || type === 'flightType' ? val : Number(val)
       });
-  };
+    },
+    [searchType]
+  );
 
   const options = {
       elements: {
@@ -308,10 +323,16 @@ export default function FlightContainer({
                                     type='select'
                                     id=''
                                     bsSize='sm'
+                                    onChange={e =>
+                                      handleChangeSearchType(
+                                        'flightType',
+                                        e.target.value
+                                      )
+                                    }
                                   >
-                                    <option>비행시간</option>
-                                    <option>비행거리</option>
-                                    <option>비행횟수</option>
+                                    <option value={'time'}>비행시간</option>
+                                    <option value={'distance'}>비행거리</option>
+                                    <option value={'count'}>비행횟수</option>
                                   </CustomInput>
                                 </Col>
                               </Row>
@@ -342,7 +363,7 @@ export default function FlightContainer({
                           bsSize='sm'
                           value={searchType.type}
                           onChange={e =>
-                            handleChangeSearchType('type', e.target.value)
+                            handleChangeSearchType('dateType', e.target.value)
                           }
                         >
                           <option value='year'>년</option>
@@ -352,9 +373,9 @@ export default function FlightContainer({
                         </CustomInput>
                       </div>
 
-                      {searchType.type === 'month' ||
-                      searchType.type === 'day' ||
-                      searchType.type === 'time' ? (
+                      {searchType.dateType === 'month' ||
+                      searchType.dateType === 'day' ||
+                      searchType.dateType === 'time' ? (
                         <>
                           <div className='select-date'>
                             <CustomInput
@@ -370,8 +391,8 @@ export default function FlightContainer({
                               <option>2023</option>
                             </CustomInput>
                           </div>
-                          {searchType.type === 'day' ||
-                          searchType.type === 'time' ? (
+                          {searchType.dateType === 'day' ||
+                          searchType.dateType === 'time' ? (
                             <div className='select-date'>
                               <CustomInput
                                 inline
@@ -386,13 +407,15 @@ export default function FlightContainer({
                                   )
                                 }
                               >
-                                <option value={1}>1</option>
-                                <option value={2}>2</option>
-                                <option value={11}>11</option>
+                                {dateLists.month.map(i => (
+                                  <option value={i} key={i}>
+                                    {i}
+                                  </option>
+                                ))}
                               </CustomInput>
                             </div>
                           ) : null}
-                          {searchType.type === 'time' ? (
+                          {searchType.dateType === 'time' ? (
                             <div className='select-date'>
                               <CustomInput
                                 inline
@@ -404,9 +427,11 @@ export default function FlightContainer({
                                   handleChangeSearchType('day', e.target.value)
                                 }
                               >
-                                <option value={1}>1</option>
-                                <option value={2}>2</option>
-                                <option value={7}>7</option>
+                                {dateLists.day.map(i => (
+                                  <option value={i} key={i}>
+                                    {i}
+                                  </option>
+                                ))}
                               </CustomInput>
                             </div>
                           ) : null}