Feat: 학기 필터링 드롭다운 컴포넌트(#15)

src/components/common/CustomTable.tsx

@@ -38,6 +38,7 @@ import { setCategory } from 'src/redux/slices/filter';
 import CategoryAutoComplete from './Filter/CategoryAutoComplete';
 import { useEffect } from 'react';
 import { setMileageCategoryList } from 'src/redux/slices/data';
+import SemesterDropdown from './Filter/SemesterDropdown';
 
 /**
  *  @brief 반응형 구축
@@ -210,7 +211,19 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
 
       {/* 필터링 */}
 
-      <CategoryAutoComplete />
+      {/* 카테고리 필터링 */}
+      <Box
+        sx={{
+          display: 'flex',
+          width: '100%',
+          gap: '10px',
+        }}
+      >
+        <CategoryAutoComplete />
+        <SemesterDropdown />
+      </Box>
+
+      {/* 학기 필터링 */}
 
       <Toolbar
         sx={{

src/components/common/Filter/CategoryAutoComplete.tsx

@@ -20,6 +20,7 @@ export default function CategoryAutoComplete() {
 
   return (
     <Autocomplete
+      sx={{ minWidth: '200px' }}
       value={value}
       disablePortal
       id="combo-box-demo"

src/components/common/Filter/SemesterDropdown.tsx

@@ -0,0 +1,41 @@
+import { Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSemester } from 'src/redux/slices/filter';
+
+export default function SemesterDropdown() {
+  const semester = useSelector((state) => state.filter.semester);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    console.log(semester);
+  }, [semester]);
+
+  const handleChange = (event: SelectChangeEvent) => {
+    dispatch(setSemester(event.target.value));
+  };
+
+  return (
+    <Box sx={{ minWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel id="demo-simple-select-label">학기</InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={semester}
+          label="학기"
+          onChange={handleChange}
+        >
+          <MenuItem value={'2023-01'}>2020-01</MenuItem>
+          <MenuItem value={'2023-01'}>2020-02</MenuItem>
+          <MenuItem value={'2023-01'}>2021-01</MenuItem>
+          <MenuItem value={'2023-01'}>2021-02</MenuItem>
+          <MenuItem value={'2022-01'}>2022-01</MenuItem>
+          <MenuItem value={'2022-02'}>2022-02</MenuItem>
+          <MenuItem value={'2023-01'}>2023-01</MenuItem>
+          <MenuItem value={'2023-01'}>2023-02</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}

src/redux/slices/filter.js

@@ -25,5 +25,5 @@ const slice = createSlice({
 });
 
 // Reducer
-export const { setCategory, clearCategory } = slice.actions;
+export const { setCategory, clearCategory, setSemester, clearSemester } = slice.actions;
 export default slice.reducer;