Feat: 보이기 필터링 드롭다운 컴포넌트 생성 , reducer 생성(#15)

src/components/common/CustomTable.tsx

@@ -279,18 +279,32 @@ const typeConverter = (type) => {
   }
 };
 
+/**
+ *
+ * @brief 테이블 컴포넌트
+ * @param originalRows 전체 데이터를 가지고 있는 배열
+ * @param headCells 테이블 카테고리들
+ * @param type 테이블 타입
+ */
+
 export default function EnhancedTable({ originalRows, headCells, type }) {
+  /**
+   * @field 필터링을 거치고 보여주는 값들 (rows)
+   */
   const [rows, setRows] = React.useState(originalRows);
   console.log(rows, originalRows);
 
+  /**
+   * @brief 필터링 요소
+   */
+
   const category = useSelector((state) => state.filter.category);
   const semester = useSelector((state) => state.filter.semester);
-  useEffect(() => {
-    // dispatch(setMileageCategoryList(rows.filter((row) => row.category === category)));
 
-    // if(!category && !semester){
-    //   setRows(originalRows)
-    // }
+  /**
+   * @brief 필터링
+   */
+  useEffect(() => {
     let copyRows = originalRows;
     if (category && category !== '전체') {
       copyRows = copyRows.filter((row) => row.category === category);

src/components/common/Filter/IsVisibleDropdown.tsx

@@ -0,0 +1,37 @@
+import { Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setIsVisible, setSemester } from 'src/redux/slices/filter';
+
+export default function isVisibleDropdown() {
+  const isVisible = useSelector((state) => state.filter.isVisible);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    console.log(isVisible);
+  }, [isVisible]);
+
+  const handleChange = (event: SelectChangeEvent) => {
+    dispatch(setIsVisible(event.target.value));
+    console.log(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={isVisible}
+          label="학기"
+          onChange={handleChange}
+        >
+          <MenuItem value={null}>전체</MenuItem>
+          <MenuItem value={true}>Yes</MenuItem>
+          <MenuItem value={false}>No</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}

src/redux/slices/filter.js

@@ -3,6 +3,7 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
   category: '전체',
   semester: '전체',
+  isVisible: null,
 };
 
 const slice = createSlice({
@@ -13,17 +14,30 @@ const slice = createSlice({
       state.category = action.payload;
     },
     clearCategory: (state) => {
-      state.category = undefined;
+      state.category = '전체';
     },
     setSemester: (state, action) => {
       state.semester = action.payload;
     },
     clearSemester: (state) => {
-      state.semester = undefined;
+      state.semester = '전체';
+    },
+    setIsVisible: (state, action) => {
+      state.isVisible = action.payload;
+    },
+    clearIsVisible: (state) => {
+      state.isVisible = null;
     },
   },
 });
 
 // Reducer
-export const { setCategory, clearCategory, setSemester, clearSemester } = slice.actions;
+export const {
+  setCategory,
+  clearCategory,
+  setSemester,
+  clearSemester,
+  setIsVisible,
+  clearIsVisible,
+} = slice.actions;
 export default slice.reducer;