From 302ed36c27e7ad26eb2945bf21ad097bbef25f81 Mon Sep 17 00:00:00 2001 From: ohinhyuk <8156217@naver.com> Date: Fri, 25 Aug 2023 15:37:49 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?= =?UTF-8?q?=ED=95=84=ED=84=B0=EB=A7=81=20=EC=99=84=EB=A3=8C(#15)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/board/MileageCategory.tsx | 23 ++++++++--- src/components/common/CustomTable.tsx | 40 +++++++++++-------- .../common/Filter/CategoryAutoComplete.tsx | 31 ++++++++++++++ src/redux/rootReducer.js | 5 +++ src/redux/slices/data.js | 19 +++++++++ src/redux/slices/filter.js | 6 +-- 6 files changed, 98 insertions(+), 26 deletions(-) create mode 100644 src/components/common/Filter/CategoryAutoComplete.tsx create mode 100644 src/redux/slices/data.js diff --git a/src/components/board/MileageCategory.tsx b/src/components/board/MileageCategory.tsx index b7c9636..df8ccc2 100644 --- a/src/components/board/MileageCategory.tsx +++ b/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 ; + const data = useSelector((state) => state.data.mileageCategoryList); + const dispatch = useDispatch(); + + /** + * SSR을 이용해서 미리 받아와야 할듯 !! + */ + useEffect(() => { + dispatch(setMileageCategoryList(rows)); + }, []); + + console.log(data); + + return ; } diff --git a/src/components/common/CustomTable.tsx b/src/components/common/CustomTable.tsx index 8e68a7c..259d391 100644 --- a/src/components/common/CustomTable.tsx +++ b/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) { {/* 필터링 */} - } - onInputChange={(e, newValue) => setValue(newValue)} - /> + { } }; -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('asc'); const [orderBy, setOrderBy] = React.useState('calories'); const [selected, setSelected] = React.useState([]); @@ -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 ( diff --git a/src/components/common/Filter/CategoryAutoComplete.tsx b/src/components/common/Filter/CategoryAutoComplete.tsx new file mode 100644 index 0000000..6425df9 --- /dev/null +++ b/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 ( + } + onChange={(e, newValue) => dispatch(setCategory(newValue))} + /> + ); +} diff --git a/src/redux/rootReducer.js b/src/redux/rootReducer.js index 69cf06b..f51adaf 100755 --- a/src/redux/rootReducer.js +++ b/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; diff --git a/src/redux/slices/data.js b/src/redux/slices/data.js new file mode 100644 index 0000000..1a54d6e --- /dev/null +++ b/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; diff --git a/src/redux/slices/filter.js b/src/redux/slices/filter.js index 92ed8b4..e524e03 100644 --- a/src/redux/slices/filter.js +++ b/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;