From d84457a28b157666c0f3e1b4751ceaee69f7b08b Mon Sep 17 00:00:00 2001
From: hhjk00 <eunyu0604@gmail.com>
Date: Tue, 7 Nov 2023 18:30:02 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B8=B0=EA=B0=84=20=EC=84=A4=EC=A0=95=20selec?=
 =?UTF-8?q?t=20=ED=91=9C=EC=B6=9C=20=EC=A1=B0=EA=B1=B4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/statistics/FlightContainer.js | 120 ++++++++++++++-----
 1 file changed, 87 insertions(+), 33 deletions(-)

diff --git a/src/containers/statistics/FlightContainer.js b/src/containers/statistics/FlightContainer.js
index 460905e..3194f2c 100644
--- a/src/containers/statistics/FlightContainer.js
+++ b/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: {
@@ -317,47 +334,84 @@ export default function FlightContainer({
                   <CardTitle tag='h4'>비행 시간 통계</CardTitle>
                   <div className='select-date-wrap'>
                     <Row>
-                      <div className='select-date'>
-                        <CustomInput inline type='select' id='' bsSize='sm'>
-                          <option>년</option>
-                          <option>월</option>
-                          <option>일</option>
-                          <option>시간</option>
-                        </CustomInput>
-                      </div>
-                      <div className='select-date'>
-                        <CustomInput inline type='select' id='' bsSize='sm'>
-                          <option>2023</option>
-                          <option>2022</option>
-                          <option>2021</option>
-                        </CustomInput>
-                      </div>
-                      <div className='select-date'>
-                        <CustomInput
-                          inline
-                          type='select'
-                          id=''
-                          bsSize='sm'
-                          value='월'
-                        >
-                          <option>1</option>
-                          <option>1</option>
-                          <option>1</option>
-                        </CustomInput>
-                      </div>
                       <div className='select-date'>
                         <CustomInput
                           inline
                           type='select'
                           id=''
                           bsSize='sm'
-                          value='일'
+                          value={searchType.type}
+                          onChange={e =>
+                            handleChangeSearchType('type', e.target.value)
+                          }
                         >
-                          <option>1</option>
-                          <option>1</option>
-                          <option>1</option>
+                          <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'
+                              value={searchType.year}
+                              onChange={e =>
+                                handleChangeSearchType('year', e.target.value)
+                              }
+                            >
+                              <option>2023</option>
+                            </CustomInput>
+                          </div>
+                          {searchType.type === 'day' ||
+                          searchType.type === 'time' ? (
+                            <div className='select-date'>
+                              <CustomInput
+                                inline
+                                type='select'
+                                id=''
+                                bsSize='sm'
+                                value={searchType.month}
+                                onChange={e =>
+                                  handleChangeSearchType(
+                                    'month',
+                                    e.target.value
+                                  )
+                                }
+                              >
+                                <option value={1}>1</option>
+                                <option value={2}>2</option>
+                                <option value={11}>11</option>
+                              </CustomInput>
+                            </div>
+                          ) : null}
+                          {searchType.type === 'time' ? (
+                            <div className='select-date'>
+                              <CustomInput
+                                inline
+                                type='select'
+                                id=''
+                                bsSize='sm'
+                                value={searchType.day}
+                                onChange={e =>
+                                  handleChangeSearchType('day', e.target.value)
+                                }
+                              >
+                                <option value={1}>1</option>
+                                <option value={2}>2</option>
+                                <option value={7}>7</option>
+                              </CustomInput>
+                            </div>
+                          ) : null}
+                        </>
+                      ) : null}
                     </Row>
                     {/* <Calendar size={14} />
                     <Flatpickr