👔 Update: 테이블 필터 다중 선택 로직 추가

romantech · Nov 8, 2021 · 5ec0a28 · 5ec0a28
1 parent fbb33f3
commit 5ec0a28
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 32 deletions.
diff --git a/src/Components/AbvFilterButton.js b/src/Components/AbvFilterButton.js
@@ -10,18 +10,21 @@ const FilterButton = ({
   idx,
 }) => {
   const [fromAbv, toAbv] = range;
-  const isFirst = fromAbv + toAbv === 103; // 첫번째 인덱스는 All 전체
   const isLast = fromAbv + toAbv === 110; // 마지막 인덱스는 10% 이상
 
+  const clickHandler = () => {
+    if (selectedRange.has(idx)) {
+      selectedRange.delete(idx);
+    } else {
+      selectedRange.add(idx);
+    }
+    setSelectedRange(new Set([...selectedRange]));
+  };
+
   return (
-    <S.ButtonWrapper
-      selected={selectedRange === idx}
-      onClick={() => {
-        setSelectedRange(idx);
-      }}
-    >
+    <S.ButtonWrapper selected={selectedRange.has(idx)} onClick={clickHandler}>
       <button type="button">
-        {isFirst || isLast ? unit : `${fromAbv}-${toAbv}${unit}`}
+        {isLast ? unit : `${fromAbv}-${toAbv}${unit}`}
       </button>
     </S.ButtonWrapper>
   );
@@ -45,11 +48,7 @@ S.ButtonWrapper = styled.div`
     `}
 
   :hover {
-    ${({ selected }) =>
-      selected === false &&
-      css`
-        background: #e0e0e0;
-      `}
+    background: ${({ selected }) => (selected ? '#319cff' : '#e0e0e0;')};
   }
 
   button {

diff --git a/src/Pages/BeerList.js b/src/Pages/BeerList.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import MaterialTable from 'material-table';
 import { useSelector, useDispatch } from 'react-redux';
 import styled from 'styled-components/macro';
+import { Modal } from 'antd';
 import tableIcons from '../Assets/tableIcons';
 import PatchedPagination from '../Components/PatchedPagination';
 import { ContainerStyle, ScrollStyle } from '../Styles/commonStyles';
@@ -12,7 +13,8 @@ import filterDataByAbv from '../Utils/filterDataByAbv';
 
 const BeerList = () => {
   const dispatch = useDispatch();
-  const { renderData, isDataLoaded } = useSelector(state => ({
+  const { rawData, renderData, isDataLoaded } = useSelector(state => ({
+    rawData: state.beerListReducer.rawData,
     renderData: state.beerListReducer.renderData,
     isDataLoaded: state.beerListReducer.loading,
   }));
@@ -21,8 +23,7 @@ const BeerList = () => {
     isColumnLoaded: state.listColumnReducer.loading,
   }));
 
-  const [selectedRow, setSelectedRow] = useState(null);
-  const [selectedRange, setSelectedRange] = useState(0);
+  const [selectedRange, setSelectedRange] = useState(new Set([]));
 
   const columnDragHandler = (fromIdx, toIdx) => {
     dispatch(setColumnsRequest(fromIdx, toIdx, columns));
@@ -34,10 +35,25 @@ const BeerList = () => {
       color: '#FFF',
       fontSize: '1rem',
     },
-    pageSizeOptions: [5, 8, 15],
+    pageSize: 6,
+    pageSizeOptions: [6, 10, 15],
   };
 
-  const filteredData = filterDataByAbv(selectedRange, renderData);
+  const rowClickHandler = (_, selected) => {
+    const { id } = selected.tableData;
+    Modal.info({
+      title: '맥주 상세 정보',
+      width: '50%',
+      content: <h1>모달</h1>,
+      onOk() {},
+    });
+  };
+
+  const filteredData = filterDataByAbv(
+    [...selectedRange],
+    renderData,
+    abvRange,
+  );
 
   return (
     <S.Container>
@@ -63,7 +79,7 @@ const BeerList = () => {
           title="BEER LIST"
           icons={tableIcons}
           isLoading={!(isDataLoaded === false && isColumnLoaded === false)}
-          onRowClick={(_, selected) => setSelectedRow(selected.tableData.id)}
+          onRowClick={rowClickHandler}
           onColumnDragged={columnDragHandler}
           options={tableOptions}
         />

diff --git a/src/Utils/abvRange.js b/src/Utils/abvRange.js
@@ -1,10 +1,10 @@
 export default [
   {
-    range: [3, 100],
-    unit: 'ALL',
+    range: [3, 4],
+    unit: '%',
   },
   {
-    range: [3, 4],
+    range: [4, 5],
     unit: '%',
   },
   {
@@ -20,7 +20,7 @@ export default [
     unit: '%',
   },
   {
-    range: [9, 10],
+    range: [8, 9],
     unit: '%',
   },
   {

diff --git a/src/Utils/filterDataByAbv.js b/src/Utils/filterDataByAbv.js
@@ -1,10 +1,13 @@
-import abvRange from './abvRange';
-
-export default (selectedRange, data) => {
-  const { range } = abvRange[selectedRange];
-  const filteredData = data?.filter(({ abv }) => {
-    if (range[0] <= abv && range[1] >= abv) return true;
-    return false;
-  });
-  return filteredData;
+export default (selectedRange, data, abvRange) => {
+  if (selectedRange.length === 0) {
+    return data;
+  }
+  return selectedRange.reduce((acc, cur) => {
+    const {
+      range: [fromRange, toRange],
+    } = abvRange[cur];
+    return acc.concat(
+      data?.filter(({ abv }) => !!(fromRange <= abv && toRange >= abv)),
+    );
+  }, []);
 };