Fix: filter와 filterList 구분을 통해서 영속성을 List에만 부여(#15)

package.json

@@ -81,6 +81,7 @@
     "react-slick": "^0.29.0",
     "redux": "^4.2.0",
     "redux-persist": "^6.0.0",
+    "redux-persist-transform-filter": "^0.0.22",
     "rehype-highlight": "^6.0.0",
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",

src/components/common/CollapsibleTable.tsx

@@ -21,6 +21,8 @@ import {
   STUDENT_NAME,
 } from 'src/assets/data/fields';
 import { styled } from '@mui/material';
+import TitleAndRefreshButton from './Title/TitleAndRefreshButton';
+import Filtering from './Filter/Filtering';
 
 const ResponsiveHeadCell = styled(TableCell)({
   minWidth: '110px',
@@ -92,9 +94,8 @@ function Row({ row }) {
 export default function CollapsibleTable({ rows, type }) {
   return (
     <>
-      <Typography color="primary" variant="h5" sx={{ mb: 2 }}>
-        {type} {' 리스트'}
-      </Typography>
+      <TitleAndRefreshButton type={type} />
+
       <TableContainer component={Paper} sx={{ overflowX: 'scroll' }}>
         <Table aria-label="collapsible table">
           <TableHead>

src/components/common/CustomTable.tsx

@@ -22,7 +22,14 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { visuallyHidden } from '@mui/utils';
 import { StarIcon } from 'src/theme/overrides/CustomIcons';
-import { Autocomplete, TablePagination, TextField, useMediaQuery, styled } from '@mui/material';
+import {
+  Autocomplete,
+  TablePagination,
+  TextField,
+  useMediaQuery,
+  styled,
+  Button,
+} from '@mui/material';
 import CustomTablePagination from './Table/CustomTablePagination';
 
 import { MileageCategoryBoard } from '../../assets/data/board/mileageCategoryBoard';
@@ -55,6 +62,9 @@ import GradeDropdown from './Filter/GradeDropdown';
 import DepartmentDropdown from './Filter/DepartmentDropDown';
 import { useRouter } from 'next/router';
 import Filtering from './Filter/Filtering';
+import Link from 'next/link';
+import { setComponentNum } from 'src/redux/slices/component';
+import TitleAndRefreshButton from './Title/TitleAndRefreshButton';
 
 /**
  *  @brief 반응형 구축
@@ -229,9 +239,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
 
   return (
     <Box>
-      <Typography color="primary" variant="h5" sx={{ mb: 2 }}>
-        {type} {' 리스트'}
-      </Typography>
+      <TitleAndRefreshButton type={type} />
 
       {/* 필터링 */}
 

src/components/common/Drawer/Drawer.tsx

@@ -22,6 +22,15 @@ import Link from 'next/link';
 import { useDispatch, useSelector } from 'react-redux';
 import { dispatch } from 'src/redux/store';
 import { clearSelectedId } from 'src/redux/slices/data';
+import {
+  clearCategory,
+  clearDepartment,
+  clearGrade,
+  clearIsVisible,
+  clearItem,
+  clearSemester,
+  clearStudentName,
+} from 'src/redux/slices/filter';
 
 const drawerWidth = 240;
 
@@ -75,7 +84,15 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open'
 export default function MiniDrawer() {
   // const [component, setComponent] = React.useState(0);
   const dispatch = useDispatch();
-  const clearSelected = () => dispatch(clearSelectedId());
+  const clearSelected = () => {
+    dispatch(clearCategory());
+    dispatch(clearSemester());
+    dispatch(clearIsVisible());
+    dispatch(clearItem());
+    dispatch(clearStudentName());
+    dispatch(clearGrade());
+    dispatch(clearDepartment());
+  };
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
 

src/components/common/Filter/CategoryAutoComplete.tsx

@@ -11,7 +11,7 @@ const StyledAutocomplete = styled(Autocomplete)({
 export default function CategoryAutoComplete() {
   const top100Films = [
     '전체',
-    ...useSelector((state) => state.filter.categoryList.map((category) => category.name)),
+    ...useSelector((state) => state.filterList.categoryList.map((category) => category.name)),
   ];
 
   const value = useSelector((state) => state.filter.category);

src/components/common/Filter/ItemAutoComplete.tsx

@@ -10,7 +10,7 @@ const StyledAutocomplete = styled(Autocomplete)({
 export default function ItemAutoComplete() {
   const top100Films = [
     '전체',
-    ...useSelector((state) => state.filter.itemList).map((item) => item.name),
+    ...useSelector((state) => state.filterList.itemList).map((item) => item.name),
   ];
   const item = useSelector((state) => state.filter.item);
   const dispatch = useDispatch();

src/components/common/Filter/StudentNameAutoComplete.tsx

@@ -3,15 +3,25 @@ import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { setCategory, setStudentName } from 'src/redux/slices/filter';
 
+/**
+ * @brief 중복 제거 함수
+ * @param 중복 있는 어레이
+ * @returns 중복 제거된 어레이
+ */
+
+function removeDuplicates(arr) {
+  return [...new Set(arr)];
+}
+
 const StyledAutocomplete = styled(Autocomplete)({
   minWidth: '150px',
 });
 
 export default function StudentNameAutoComplete() {
-  const top100Films = [
+  const top100Films = removeDuplicates([
     '전체',
-    ...useSelector((state) => state.filter.studentList).map((student) => student.name),
-  ];
+    ...useSelector((state) => state.filterList.studentList).map((student) => student.name),
+  ]);
 
   const studentName = useSelector((state) => state.filter.studentName);
   const dispatch = useDispatch();

src/components/common/Title/TitleAndRefreshButton.tsx

@@ -0,0 +1,24 @@
+import { Box, Typography, Button } from '@mui/material';
+import Link from 'next/link';
+import { setComponentNum } from 'src/redux/slices/component';
+import { dispatch } from 'src/redux/store';
+
+export default function TitleAndRefreshButton({ type }) {
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+      <Typography color="primary" variant="h5" sx={{ mb: 2 }}>
+        {type} {' 리스트'}
+      </Typography>
+
+      <Link href="/">
+        <Button
+          variant="outlined"
+          sx={{ padding: '2px 10px' }}
+          onClick={() => dispatch(setComponentNum(0))}
+        >
+          필터링 새로고침 버튼
+        </Button>
+      </Link>
+    </Box>
+  );
+}

src/pages/index.js

@@ -28,7 +28,7 @@ import {
   setItemList,
   setStudentList,
   setStudentNameList,
-} from 'src/redux/slices/filter';
+} from 'src/redux/slices/filterList';
 // ----------------------------------------------------------------------
 
 // ----------------------------------------------------------------------

src/pages/mileage/category/index.tsx

@@ -115,17 +115,6 @@ export default function MileageCategory({
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const dispatch = useDispatch();
 
-  /**
-   * @breif 마일리지 카테고리 필터링 형성
-   */
-  dispatch(
-    setCategoryList(
-      fetchData.categories.map((category) => {
-        return { id: category.id, name: category.name };
-      })
-    )
-  );
-
   /**
    * @brief 마일리지 카테고리 리스트 데이터
    */

src/pages/mileage/item/global/index.tsx

@@ -263,14 +263,6 @@ export default function MileageCategory({
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const dispatch = useDispatch();
 
-  dispatch(
-    setItemList(
-      fetchData.items.map((item) => {
-        return { id: item.id, name: item.name };
-      })
-    )
-  );
-
   const convertedFetchList = fetchData.items?.map((item) => {
     const beforeData = {
       [NUM]: item.id,

src/redux/rootReducer.js

@@ -11,6 +11,7 @@ import kanbanReducer from './slices/kanban';
 import filterReducer from './slices/filter';
 import dataReducer from './slices/data';
 import componentReducer from './slices/component';
+import filterListReducer from './slices/filterList';
 
 // ----------------------------------------------------------------------
 
@@ -36,8 +37,8 @@ export const rootPersistConfig = {
   key: 'root',
   storage,
   keyPrefix: 'redux-',
-  blacklist: ['modal', 'data'],
-  whitelist: ['component', 'filter'],
+  blacklist: ['filter', 'modal', 'data'],
+  whitelist: ['component', 'filterList'],
 };
 
 /**
@@ -52,6 +53,7 @@ const rootReducer = combineReducers({
   filter: filterReducer,
   data: dataReducer,
   component: componentReducer,
+  filterList: filterListReducer,
 });
 
 export default rootReducer;

src/redux/slices/component.js

@@ -1,5 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+import { clearCategory } from './filter';
+
 const initialState = {
   componentNum: 0,
 };

src/redux/slices/filter.js

@@ -8,10 +8,6 @@ const initialState = {
   studentName: '전체',
   grade: '전체',
   department: '전체',
-  categoryList: [],
-  semesterList: [], // 애매
-  itemList: [],
-  studentList: [],
 };
 
 const slice = createSlice({
@@ -60,18 +56,6 @@ const slice = createSlice({
     clearDepartment: (state) => {
       state.department = '전체';
     },
-    setCategoryList: (state, action) => {
-      state.categoryList = action.payload;
-    },
-    setSemesterList: (state, action) => {
-      state.semesterList = action.payload;
-    },
-    setItemList: (state, action) => {
-      state.itemList = action.payload;
-    },
-    setStudentList: (state, action) => {
-      state.studentList = action.payload;
-    },
   },
 });
 
@@ -91,9 +75,5 @@ export const {
   clearGrade,
   setDepartment,
   clearDepartment,
-  setCategoryList,
-  setSemesterList,
-  setItemList,
-  setStudentList,
 } = slice.actions;
 export default slice.reducer;

src/redux/slices/filterList.js

@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  categoryList: [],
+  semesterList: [], // 애매
+  itemList: [],
+  studentList: [],
+};
+
+const slice = createSlice({
+  name: 'filterList',
+  initialState,
+  reducers: {
+    setCategoryList: (state, action) => {
+      state.categoryList = action.payload;
+    },
+    setSemesterList: (state, action) => {
+      state.semesterList = action.payload;
+    },
+    setItemList: (state, action) => {
+      state.itemList = action.payload;
+    },
+    setStudentList: (state, action) => {
+      state.studentList = action.payload;
+    },
+  },
+});
+
+// Reducer
+export const { setCategoryList, setSemesterList, setItemList, setStudentList } = slice.actions;
+export default slice.reducer;

yarn.lock

@@ -6938,6 +6938,13 @@ readable-stream@~1.0.17, readable-stream@~1.0.27-1:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+redux-persist-transform-filter@^0.0.22:
+  version "0.0.22"
+  resolved "https://registry.npmjs.org/redux-persist-transform-filter/-/redux-persist-transform-filter-0.0.22.tgz"
+  integrity sha512-XtGN7UQ8w7b3qaxQfdYY1UmuYULqIIemD47IWxIyM8AOF48I6C74m9XxA7gQoC2nIi+rz4URi9Mye4fIbHhZPQ==
+  dependencies:
+    lodash "^4.17.21"
+
 redux-persist@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz"