👔 Add: 장바구니 추가 리덕스 로직 추가

src/Components/TableModal.js → src/Components/ModalContents.js

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components/macro';
 import { beerInfoEntries } from '../Constants';
 
-const TableModal = ({ data }) => {
+const ModalContents = ({ data }) => {
   return (
     <S.Container>
       <img src={data.image_url} alt="beer_image" />
@@ -113,4 +113,4 @@ S.ContentWrapper = styled.section`
   }
 `;
 
-export default TableModal;
+export default ModalContents;

src/Components/Nav.js

@@ -22,7 +22,6 @@ const Nav = ({ history }) => {
           <Menu.Item
             key={path}
             onClick={() => {
-              // if (name === 'BEERs') window.location.assign(path);
               history.push(path);
             }}
           >

src/Modules/beerList.js

@@ -7,9 +7,9 @@ const initialState = {
   error: null,
 };
 
-export const GET_BEER_LIST_REQUEST = 'beerlist/GET_BEER_LIST_REQUEST';
-export const GET_BEER_LIST_SUCCESS = 'beerlist/GET_BEER_LIST_SUCCESS';
-export const GET_BEER_LIST_FAILED = 'beerlist/GET_BEER_LIST_FAILED';
+export const GET_BEER_LIST_REQUEST = 'beerList/GET_BEER_LIST_REQUEST';
+export const GET_BEER_LIST_SUCCESS = 'beerList/GET_BEER_LIST_SUCCESS';
+export const GET_BEER_LIST_FAILED = 'beerList/GET_BEER_LIST_FAILED';
 
 export const getBeerListRequest = () => ({
   type: GET_BEER_LIST_REQUEST,

src/Modules/cartList.js

@@ -0,0 +1,37 @@
+// Duck 패턴 https://github.com/JisuPark/ducks-modular-redux
+
+const initialState = {
+  cartList: [],
+};
+
+export const ADD_CART = '/cartList/ADD_CART';
+export const REMOVE_CART = '/cartList/REMOVE_CART';
+
+export const addCartAction = beerId => ({
+  type: ADD_CART,
+  payload: beerId,
+});
+
+export const removeCartAction = beerId => ({
+  type: REMOVE_CART,
+  payload: beerId,
+});
+
+const cartListReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ADD_CART:
+      return {
+        ...state,
+        cartList: [...state.cartList, action.payload],
+      };
+    case REMOVE_CART:
+      return {
+        ...state,
+        cartList: [...state.cartList.filter(id => id !== action.payload)],
+      };
+    default:
+      return state;
+  }
+};
+
+export default cartListReducer;

src/Modules/index.js

@@ -7,6 +7,7 @@ import { enableES5 } from 'immer';
 import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 import beerListReducer from './beerList';
+import cartListReducer from './cartList';
 import listColumnReducer from './listColumns';
 import getBeerListSaga from './saga/beerListSaga';
 import listColumnSaga from './saga/listColumnSaga';
@@ -16,10 +17,14 @@ enableES5();
 const persistConfig = {
   key: 'root',
   storage,
-  whitelist: ['beerListReducer', 'listColumnReducer'],
+  whitelist: ['beerListReducer', 'listColumnReducer', 'cartListReducer'],
 };
 
-const rootReducer = combineReducers({ beerListReducer, listColumnReducer });
+const rootReducer = combineReducers({
+  beerListReducer,
+  listColumnReducer,
+  cartListReducer,
+});
 
 export default persistReducer(persistConfig, rootReducer);
 

src/Pages/BeerList.js

@@ -3,12 +3,14 @@ import MaterialTable from 'material-table';
 import { useSelector, useDispatch } from 'react-redux';
 import styled from 'styled-components/macro';
 import { Modal } from 'antd';
+import { AddBox } from '@material-ui/icons';
 import tableIcons from '../Assets/tableIcons';
 import PatchedPagination from '../Components/PatchedPagination';
 import { ContainerStyle, ScrollStyle } from '../Styles/commonStyles';
 import { setColumnsRequest } from '../Modules/listColumns';
+import { addCartAction } from '../Modules/cartList';
 import AbvFilterButton from '../Components/AbvFilterButton';
-import TableModal from '../Components/TableModal';
+import ModalContents from '../Components/ModalContents';
 import { getTableOptions, filterDataByAbv } from '../Utils';
 import { abvRange } from '../Constants';
 
@@ -23,6 +25,7 @@ const BeerList = () => {
     columns: state.listColumnReducer.modifiedColumns,
     isColumnLoaded: state.listColumnReducer.loading,
   }));
+  const cartList = useSelector(state => state.cartListReducer.cartList);
 
   const [selectedRange, setSelectedRange] = useState(new Set());
 
@@ -35,11 +38,22 @@ const BeerList = () => {
     Modal.info({
       title: '맥주 상세정보',
       width: '58vw',
-      content: <TableModal data={rawData[id]} />,
+      content: <ModalContents data={rawData[id]} />,
       onOk() {},
     });
   };
 
+  const actionClickHandler = (_, { tableData }) => {
+    const isAdded = cartList?.some(id => id === tableData.id);
+    if (!isAdded) {
+      dispatch(addCartAction(tableData.id));
+    }
+    Modal.info({
+      title: '알림',
+      content: isAdded ? '이미 추가한 상품입니다' : '장바구니에 추가했습니다',
+    });
+  };
+
   const tableOptions = getTableOptions({});
   const filteredData = filterDataByAbv(
     [...selectedRange],
@@ -74,6 +88,15 @@ const BeerList = () => {
           onRowClick={rowClickHandler}
           onColumnDragged={columnDragHandler}
           options={tableOptions}
+          actions={[
+            rowData => ({
+              icon: AddBox,
+              tooltip: '장바구니 추가',
+              onClick: actionClickHandler,
+              disabled: cartList.some(id => id === rowData.tableData.id),
+            }),
+          ]}
+          localization={{ header: { actions: 'CART' } }}
         />
       </S.TableWrapper>
     </S.Container>