Feat: 맨 처음에 필터링을 위해 전역 변수로 카테고리, 학생 , 글로벌항목명들을 가져온다. 그리고 이걸 persist로저장(…

…#15)

src/components/common/Filter/ItemAutoComplete.tsx

@@ -7,16 +7,11 @@ const StyledAutocomplete = styled(Autocomplete)({
   minWidth: '230px',
 });
 
-const top100Films = [
-  '전체',
-  '웹 서비스 캠프',
-  'pps 캠프',
-  'c언어 캠프',
-  '대경권 프로그래밍 대회',
-  '와랩 스터디',
-];
-
 export default function ItemAutoComplete() {
+  const top100Films = [
+    '전체',
+    ...useSelector((state) => state.filter.itemList).map((item) => item.name),
+  ];
   const item = useSelector((state) => state.filter.item);
   const dispatch = useDispatch();
 

src/components/common/Filter/StudentNameAutoComplete.tsx

@@ -7,9 +7,12 @@ const StyledAutocomplete = styled(Autocomplete)({
   minWidth: '150px',
 });
 
-const top100Films = ['오인혁', '오인혁2', '한시온', '김민수', '장유진'];
-
 export default function StudentNameAutoComplete() {
+  const top100Films = [
+    '전체',
+    ...useSelector((state) => state.filter.studentList).map((student) => student.name),
+  ];
+
   const studentName = useSelector((state) => state.filter.studentName);
   const dispatch = useDispatch();
 

src/pages/index.js

@@ -20,12 +20,54 @@ import {
 } from '../sections/home';
 
 import { ComponentReturn } from 'src/components/common/Table/TableComponents';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import axiosInstance from 'src/utils/axios';
+
+import {
+  setCategoryList,
+  setItemList,
+  setStudentList,
+  setStudentNameList,
+} from 'src/redux/slices/filter';
 // ----------------------------------------------------------------------
 
 // ----------------------------------------------------------------------
 
-export default function HomePage() {
+export const getServerSideProps = async () => {
+  const resCategory = await axiosInstance.get('/api/mileage/categories');
+  const categoryData = await resCategory.data;
+
+  // console.log(categoryData);
+
+  const resGlobalItem = await axiosInstance.get('/api/mileage/items');
+  const globalItemData = await resGlobalItem.data;
+
+  const resStudents = await axiosInstance.get(`/api/mileage/students`);
+  const studentData = await resStudents.data;
+
+  return { props: { categoryData, globalItemData, studentData } };
+};
+
+export default function HomePage({ categoryData, globalItemData, studentData }) {
+  const dispatch = useDispatch();
+  console.log(categoryData);
+  dispatch(
+    setCategoryList(
+      categoryData.categories.map((category) => ({ id: category.id, name: category.name }))
+    )
+  );
+  dispatch(setItemList(globalItemData.items.map((item) => ({ id: item.id, name: item.name }))));
+
+  dispatch(
+    setStudentList(
+      studentData.students.map((student) => ({
+        id: student.id,
+        name: student.name,
+        sid: student.sid,
+      }))
+    )
+  );
+
   const componentNum = useSelector((state) => state.component.componentNum);
   return (
     <>

src/pages/mileage/category/index.tsx

@@ -113,7 +113,6 @@ export const getServerSideProps: GetServerSideProps<{
 export default function MileageCategory({
   fetchData,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  const data = useSelector((state) => state.data.mileageCategoryList);
   const dispatch = useDispatch();
 
   /**
@@ -127,6 +126,10 @@ export default function MileageCategory({
     )
   );
 
+  /**
+   * @brief 마일리지 카테고리 리스트 데이터
+   */
+
   const convertedFetchList = fetchData.categories?.map((item) => {
     const beforeData = {
       [NUM]: item.id,

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

@@ -226,7 +226,7 @@ const rows = [
 import axiosInstance from 'src/utils/axios';
 import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
 import MileageCategory from 'src/components/board/MileageCategory';
-import { setSemesterList } from 'src/redux/slices/filter';
+import { setItemList, setSemesterList } from 'src/redux/slices/filter';
 
 interface ICategory {
   id: number;
@@ -261,13 +261,15 @@ export const getServerSideProps: GetServerSideProps<{
 export default function MileageCategory({
   fetchData,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  /**
-   * 리액트 메모를 쓰거나 하면 성능 최적화가 될것 같은..
-   */
-  const data = useSelector((state) => state.data.mileageGlobalList);
   const dispatch = useDispatch();
 
-  console.log(fetchData);
+  dispatch(
+    setItemList(
+      fetchData.items.map((item) => {
+        return { id: item.id, name: item.name };
+      })
+    )
+  );
 
   const convertedFetchList = fetchData.items?.map((item) => {
     const beforeData = {

src/redux/rootReducer.js

@@ -36,8 +36,8 @@ export const rootPersistConfig = {
   key: 'root',
   storage,
   keyPrefix: 'redux-',
-  blacklist: ['filter', 'modal', 'data'],
-  whitelist: ['component'],
+  blacklist: ['modal', 'data'],
+  whitelist: ['component', 'filter'],
 };
 
 /**

src/redux/slices/filter.js

@@ -11,7 +11,7 @@ const initialState = {
   categoryList: [],
   semesterList: [], // 애매
   itemList: [],
-  studentNameList: [],
+  studentList: [],
 };
 
 const slice = createSlice({
@@ -69,8 +69,8 @@ const slice = createSlice({
     setItemList: (state, action) => {
       state.itemList = action.payload;
     },
-    setStudentNameList: (state, action) => {
-      state.studentNameList = action.payload;
+    setStudentList: (state, action) => {
+      state.studentList = action.payload;
     },
   },
 });
@@ -94,6 +94,6 @@ export const {
   setCategoryList,
   setSemesterList,
   setItemList,
-  setStudentNameList,
+  setStudentList,
 } = slice.actions;
 export default slice.reducer;