diff --git a/src/containers/statistics/FlightContainer.js b/src/containers/statistics/FlightContainer.js index 3194f2c..186a5ec 100644 --- a/src/containers/statistics/FlightContainer.js +++ b/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) => { - setSearchType({ - ...searchType, - [type]: type === 'type' ? val : Number(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 === '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 + ) + } > - - - + + + @@ -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) } > @@ -352,9 +373,9 @@ export default function FlightContainer({ - {searchType.type === 'month' || - searchType.type === 'day' || - searchType.type === 'time' ? ( + {searchType.dateType === 'month' || + searchType.dateType === 'day' || + searchType.dateType === 'time' ? ( <>
2023
- {searchType.type === 'day' || - searchType.type === 'time' ? ( + {searchType.dateType === 'day' || + searchType.dateType === 'time' ? (
- - - + {dateLists.month.map(i => ( + + ))}
) : null} - {searchType.type === 'time' ? ( + {searchType.dateType === 'time' ? (
- - - + {dateLists.day.map(i => ( + + ))}
) : null}