Feat: 카테고리 필터링 완료(#15)

src/components/board/MileageCategory.tsx

@@ -4,7 +4,10 @@ import EnhancedTable from '../common/CustomTable';
 import { MAX_MILEAGE, MANAGE, CHECK_BOX, NUM, CATEGORY, DESCRIPTION } from 'src/assets/data/fields';
 import SWModal from '../common/modal/SWModal';
 import { EDITCATEGORY } from 'src/assets/data/modal/modals';
-
+import { useDispatch, useSelector } from 'react-redux';
+import { useEffect } from 'react';
+import { dispatch } from 'src/redux/store';
+import { setMileageCategoryList } from 'src/redux/slices/data';
 
 /**
  * @breif [마일리지 카테고리] 게시판
@@ -26,7 +29,6 @@ interface Data {
   [MileageCategoryBoard.CATEGORY]: string;
   [MileageCategoryBoard.MAX_MILEAGE]: number;
   [MileageCategoryBoard.MANAGE]: ReactNode;
-
 }
 
 /**
@@ -36,13 +38,11 @@ interface Data {
  *  */
 
 function createData(num: number, category: string, maxMileage: number, manage: ReactNode): Data {
-
   return {
     [MileageCategoryBoard.NUM]: num,
     [MileageCategoryBoard.CATEGORY]: category,
     [MileageCategoryBoard.MAX_MILEAGE]: maxMileage,
     [MileageCategoryBoard.MANAGE]: manage,
-
   };
 }
 
@@ -75,7 +75,6 @@ const headCells = [
     disablePadding: false,
     label: '관리',
   },
-
 ];
 
 /**
@@ -101,5 +100,17 @@ const rows = [
 ];
 
 export default function MileageCategory() {
-  return <EnhancedTable rows={rows} headCells={headCells} type="마일리지 카테고리" />;
+  const data = useSelector((state) => state.data.mileageCategoryList);
+  const dispatch = useDispatch();
+
+  /**
+   * SSR을 이용해서 미리 받아와야 할듯 !!
+   */
+  useEffect(() => {
+    dispatch(setMileageCategoryList(rows));
+  }, []);
+
+  console.log(data);
+
+  return <EnhancedTable originalRows={data} headCells={headCells} type="마일리지 카테고리" />;
 }

src/components/common/CustomTable.tsx

@@ -32,6 +32,12 @@ import Modal from './modal/SWModal';
 import CustomModal1 from '../Template/CustomModal';
 import SWModal from './modal/SWModal';
 import { ADDCATEGORY, ADDGLOBALITEM, ADDITEM, EDITCATEGORY } from 'src/assets/data/modal/modals';
+import { useDispatch, useSelector } from 'react-redux';
+import { dispatch } from 'src/redux/store';
+import { setCategory } from 'src/redux/slices/filter';
+import CategoryAutoComplete from './Filter/CategoryAutoComplete';
+import { useEffect } from 'react';
+import { setMileageCategoryList } from 'src/redux/slices/data';
 
 /**
  *  @brief 반응형 구축
@@ -190,13 +196,9 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
   const { numSelected, type } = props;
 
   // example
-  const top100Films = [
-    { label: 'The Shawshank Redemption' },
-    { label: 'The Godfather' },
-    { label: 'The Godfather: Part II' },
-  ];
 
-  const [value, setValue] = React.useState(null);
+  const value = useSelector((state) => state.filter.category);
+  const dispatch = useDispatch();
   React.useEffect(() => {
     console.log(value);
   }, [value]);
@@ -208,15 +210,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
 
       {/* 필터링 */}
 
-      <Autocomplete
-        inputValue={value}
-        disablePortal
-        id="combo-box-demo"
-        options={top100Films}
-        sx={{ width: 300 }}
-        renderInput={(params) => <TextField {...params} label="Controllable" />}
-        onInputChange={(e, newValue) => setValue(newValue)}
-      />
+      <CategoryAutoComplete />
 
       <Toolbar
         sx={{
@@ -271,7 +265,19 @@ const typeConverter = (type) => {
   }
 };
 
-export default function EnhancedTable({ rows, headCells, type }) {
+export default function EnhancedTable({ originalRows, headCells, type }) {
+  const [rows, setRows] = React.useState(originalRows);
+  console.log(rows, originalRows);
+
+  const category = useSelector((state) => state.filter.category);
+
+  useEffect(() => {
+    // dispatch(setMileageCategoryList(rows.filter((row) => row.category === category)));
+    !category
+      ? setRows(originalRows)
+      : setRows(originalRows.filter((row) => row.category === category));
+  }, [category]);
+
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<keyof Data>('calories');
   const [selected, setSelected] = React.useState<readonly string[]>([]);
@@ -338,7 +344,7 @@ export default function EnhancedTable({ rows, headCells, type }) {
         page * rowsPerPage,
         page * rowsPerPage + rowsPerPage
       ),
-    [order, orderBy, page, rowsPerPage]
+    [order, orderBy, page, rowsPerPage, rows]
   );
 
   return (

src/components/common/Filter/CategoryAutoComplete.tsx

@@ -0,0 +1,31 @@
+import { Autocomplete, TextField } from '@mui/material';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setCategory } from 'src/redux/slices/filter';
+
+export default function CategoryAutoComplete() {
+  const top100Films = [
+    '전공 마일리지',
+    '비교과 - 연구활동',
+    '비교과 - 봉사활동',
+    '비교과 - 창업활동',
+  ];
+
+  const value = useSelector((state) => state.filter.category);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    console.log(value);
+  }, [value]);
+
+  return (
+    <Autocomplete
+      value={value}
+      disablePortal
+      id="combo-box-demo"
+      options={top100Films}
+      renderInput={(params) => <TextField {...params} label="카테고리" />}
+      onChange={(e, newValue) => dispatch(setCategory(newValue))}
+    />
+  );
+}

src/redux/rootReducer.js

@@ -8,6 +8,8 @@ import chatReducer from './slices/chat';
 import productReducer from './slices/product';
 import calendarReducer from './slices/calendar';
 import kanbanReducer from './slices/kanban';
+import filterReducer from './slices/filter';
+import dataReducer from './slices/data';
 
 // ----------------------------------------------------------------------
 
@@ -53,10 +55,13 @@ const rootReducer = combineReducers({
   calendar: calendarReducer,
   kanban: kanbanReducer,
   product: persistReducer(productPersistConfig, productReducer),
+
   /**
    * SW-Reducer
    */
   modal: modalReducer,
+  filter: filterReducer,
+  data: dataReducer,
 });
 
 export default rootReducer;

src/redux/slices/data.js

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  mileageCategoryList: [],
+};
+
+const slice = createSlice({
+  name: 'data',
+  initialState,
+  reducers: {
+    setMileageCategoryList: (state, action) => {
+      state.mileageCategoryList = action.payload;
+    },
+  },
+});
+
+// Reducer
+export const { setMileageCategoryList } = slice.actions;
+export default slice.reducer;

src/redux/slices/filter.js

@@ -8,15 +8,15 @@ const slice = createSlice({
   name: 'filter',
   initialState,
   reducers: {
-    setFilter: (state, action) => {
+    setCategory: (state, action) => {
       state.category = action.payload;
     },
-    clearFilter: (state) => {
+    clearCategory: (state) => {
       state.category = '';
     },
   },
 });
 
 // Reducer
-export const { setFilter, clearFilter } = slice.actions;
+export const { setCategory, clearCategory } = slice.actions;
 export default slice.reducer;