Feat: 보이기 필터링 연결(#15)

HGU-WALAB · Aug 25, 2023 · 0de866b · 0de866b
1 parent fd4c4a8
commit 0de866b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/src/components/board/MileageGlobalItem.tsx b/src/components/board/MileageGlobalItem.tsx
@@ -177,7 +177,7 @@ export default function MileageGlobalItem() {
       '2022-01',
       '웹 서비스 캠프',
       30,
-      'y',
+      true,
       '2023-08-21',
 
       <SWModal type={EDITGLOBALITEM} beforeData={IParams} />
@@ -188,7 +188,7 @@ export default function MileageGlobalItem() {
       '2022-01',
       '웹 서비스 캠프',
       30,
-      'y',
+      true,
       '2023-08-21',
 
       <SWModal type={EDITGLOBALITEM} beforeData={IParams} />
@@ -199,7 +199,7 @@ export default function MileageGlobalItem() {
       '2022-01',
       '웹 서비스 캠프',
       30,
-      'y',
+      false,
       '2023-08-21',
 
       <SWModal type={EDITGLOBALITEM} beforeData={IParams} />
@@ -210,7 +210,7 @@ export default function MileageGlobalItem() {
       '2022-01',
       '웹 서비스 캠프',
       30,
-      'y',
+      false,
       '2023-08-21',
 
       <SWModal type={EDITGLOBALITEM} beforeData={IParams} />
@@ -221,7 +221,7 @@ export default function MileageGlobalItem() {
       '2022-02',
       '웹 서비스 캠프',
       30,
-      'y',
+      true,
       '2023-08-21',
       <SWModal type={EDITGLOBALITEM} beforeData={IParams} />
     ),
@@ -231,7 +231,7 @@ export default function MileageGlobalItem() {
       '2022-02',
       '웹 서비스 캠프',
       30,
-      'y',
+      true,
       '2023-08-21',
       <SWModal type={EDITGLOBALITEM} beforeData={IParams} />
     ),

diff --git a/src/components/common/CustomTable.tsx b/src/components/common/CustomTable.tsx
@@ -40,6 +40,8 @@ import { useEffect } from 'react';
 import { setMileageCategoryList } from 'src/redux/slices/data';
 import SemesterDropdown from './Filter/SemesterDropdown';
 import { id } from 'date-fns/locale';
+import isVisibleDropdown from './Filter/IsVisibleDropdown';
+import IsVisibleDropdown from './Filter/IsVisibleDropdown';
 
 /**
  *  @brief 반응형 구축
@@ -222,6 +224,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
       >
         <CategoryAutoComplete />
         <SemesterDropdown />
+        <IsVisibleDropdown />
       </Box>
 
       {/* 학기 필터링 */}
@@ -300,7 +303,7 @@ export default function EnhancedTable({ originalRows, headCells, type }) {
 
   const category = useSelector((state) => state.filter.category);
   const semester = useSelector((state) => state.filter.semester);
-
+  const isVisible = useSelector((state) => state.filter.isVisible);
   /**
    * @brief 필터링
    */
@@ -312,12 +315,17 @@ export default function EnhancedTable({ originalRows, headCells, type }) {
     if (semester && semester !== '전체') {
       copyRows = copyRows.filter((row) => row.semester === semester);
     }
+    console.log(copyRows[0]?.isVisible, isVisible);
+    if (isVisible !== '전체') {
+      copyRows = copyRows.filter((row) => row.isVisible === isVisible);
+      console.log(copyRows[0]?.isVisible, isVisible);
+    }
     setRows(copyRows);
 
     // !category
     //   ? setRows(originalRows)
     //   : setRows(originalRows.filter((row) => row.category === category));
-  }, [category, semester]);
+  }, [category, semester, isVisible]);
 
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<keyof Data>('calories');
@@ -453,7 +461,7 @@ export default function EnhancedTable({ originalRows, headCells, type }) {
                         // sx={{ fontSize: '5px' }}
                         // sx={{ padding: 1 }}
                       >
-                        {rowValue}
+                        {rowValue === true ? 'Y' : rowValue === false ? 'N' : rowValue}
                       </ResponsiveTableBody>
                     ))}
                   </TableRow>

diff --git a/src/components/common/Filter/IsVisibleDropdown.tsx b/src/components/common/Filter/IsVisibleDropdown.tsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { setIsVisible, setSemester } from 'src/redux/slices/filter';
 
-export default function isVisibleDropdown() {
+export default function IsVisibleDropdown() {
   const isVisible = useSelector((state) => state.filter.isVisible);
   const dispatch = useDispatch();
 
@@ -27,9 +27,9 @@ export default function isVisibleDropdown() {
           label="학기"
           onChange={handleChange}
         >
-          <MenuItem value={null}>전체</MenuItem>
-          <MenuItem value={true}>Yes</MenuItem>
-          <MenuItem value={false}>No</MenuItem>
+          <MenuItem value={'전체'}>전체</MenuItem>
+          <MenuItem value={true}>Y</MenuItem>
+          <MenuItem value={false}>N</MenuItem>
         </Select>
       </FormControl>
     </Box>

diff --git a/src/redux/slices/filter.js b/src/redux/slices/filter.js
@@ -3,7 +3,8 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
   category: '전체',
   semester: '전체',
-  isVisible: null,
+  isVisible: '전체',
+  item: '전체',
 };
 
 const slice = createSlice({
@@ -26,7 +27,13 @@ const slice = createSlice({
       state.isVisible = action.payload;
     },
     clearIsVisible: (state) => {
-      state.isVisible = null;
+      state.isVisible = '전체';
+    },
+    setItem: (state, action) => {
+      state.item = action.payload;
+    },
+    clearItem: (state) => {
+      state.item = '전체';
     },
   },
 });
@@ -39,5 +46,7 @@ export const {
   clearSemester,
   setIsVisible,
   clearIsVisible,
+  setItem,
+  clearItem,
 } = slice.actions;
 export default slice.reducer;