🚩 Update: 모달 기본 구조 작성 & 모듈 수정

src/Components/Nav.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { Layout, Menu } from 'antd';
-import sitemap from '../Utils/sitemap';
+import { sitemap } from '../Constants';
 
 const { Header } = Layout;
 

src/Components/TableModal.js

@@ -0,0 +1,93 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components/macro';
+
+const TableModal = ({ data }) => {
+  return (
+    <S.Container>
+      <img src={data.image_url} alt="beer_image" />
+      <S.ContentWrapper>
+        <h1>{data.name}</h1>
+        <h3>{data.description}</h3>
+        <hr />
+        <span>ABV : {data.abv}</span>
+        <span>PH : {data.ph}</span>
+        <span>IBU : {data.ibu}</span>
+        <span>SRM : {data.srm}</span>
+        <span>EBC : {data.ebc}</span>
+        <span>TARGET FG : {data.target_fg}</span>
+        <span>TARGET OG : {data.target_og}</span>
+        <span>FIRST BREWED : {data.first_brewed}</span>
+        <span>TAGLINE : {data.tagline}</span>
+      </S.ContentWrapper>
+    </S.Container>
+  );
+};
+
+const S = {};
+S.Container = styled.section`
+  /* width */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: none;
+    margin: 1px 8px;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: lightgray;
+    border-radius: 10px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: gray;
+  }
+
+  margin-top: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5rem;
+  overflow: auto;
+
+  img {
+    height: 400px;
+    object-fit: cover;
+  }
+`;
+
+S.ContentWrapper = styled.section`
+  height: 400px;
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+
+  hr {
+    width: 100%;
+    border: 2px solid black;
+  }
+
+  h1 {
+    margin: -5px 0 20px 0;
+    text-align: center;
+  }
+
+  h3 {
+    font-style: italic;
+  }
+
+  span:after {
+    content: '';
+    display: block;
+    border-bottom: 0.5px solid lightgray;
+    margin: 8px 0;
+  }
+`;
+
+export default TableModal;

src/Constants/index.js

@@ -0,0 +1,88 @@
+export const UNIT = {
+  PERCENT: '%',
+};
+
+export const sitemap = [
+  {
+    name: 'HOME',
+    path: '/home',
+  },
+  {
+    name: 'BEERs',
+    path: '/beerlist',
+  },
+  {
+    name: 'CART',
+    path: '/cart',
+  },
+];
+
+export const abvRange = [
+  {
+    range: [3, 4],
+    unit: UNIT.PERCENT,
+  },
+  {
+    range: [4, 5],
+    unit: UNIT.PERCENT,
+  },
+  {
+    range: [5, 6],
+    unit: UNIT.PERCENT,
+  },
+  {
+    range: [6, 7],
+    unit: UNIT.PERCENT,
+  },
+  {
+    range: [7, 8],
+    unit: UNIT.PERCENT,
+  },
+  {
+    range: [8, 9],
+    unit: UNIT.PERCENT,
+  },
+  {
+    range: [10, 100],
+    unit: `10${UNIT.PERCENT} 이상`,
+  },
+];
+
+export const beerListColumns = [
+  {
+    title: 'NAME',
+    field: 'name',
+    cellStyle: {
+      // whiteSpace: 'nowrap',
+      minWidth: '18rem',
+    },
+  },
+  {
+    title: 'TAGLINE',
+    field: 'tagline',
+    cellStyle: {
+      // whiteSpace: 'nowrap',
+      minWidth: '18rem',
+    },
+  },
+  {
+    title: 'ABV',
+    field: 'abv',
+  },
+  {
+    title: 'IBU',
+    field: 'ibu',
+  },
+  {
+    title: 'SRM',
+    field: 'srm',
+  },
+  {
+    title: 'EBC',
+    field: 'ebc',
+  },
+  {
+    title: 'PH',
+    field: 'ph',
+  },
+];

src/Modules/listColumns.js

@@ -1,10 +1,12 @@
-import defaultColumns from '../Utils/defaultColumns';
+// Duck 패턴 https://github.com/JisuPark/ducks-modular-redux
+
+import { beerListColumns } from '../Constants';
 
 const initialState = {
   loading: false,
   error: null,
-  defaultColumns,
-  modifiedColumns: defaultColumns,
+  beerListColumns,
+  modifiedColumns: beerListColumns,
 };
 
 export const SET_COLUMNS_REQUEST = 'listColumns/SET_COLUMNS_REQUEST';

src/Modules/saga/beerListSaga.js

@@ -1,5 +1,5 @@
 import { call, put, takeLatest } from 'redux-saga/effects';
-import defaultColumns from '../../Utils/defaultColumns';
+import { beerListColumns } from '../../Constants';
 import {
   GET_BEER_LIST_REQUEST,
   getBeerListSuccess,
@@ -11,7 +11,7 @@ function* getBeerList() {
   try {
     const { data: rawData } = yield call(APIs.getBeerList); // yield call은 결과 반환시까지 기다려줌
     const renderData = rawData.map(beer => {
-      return defaultColumns.reduce((acc, cur) => {
+      return beerListColumns.reduce((acc, cur) => {
         if (cur.field in beer) {
           acc[cur.field] = beer[cur.field];
         }

src/Pages/BeerList.js

@@ -7,9 +7,10 @@ import tableIcons from '../Assets/tableIcons';
 import PatchedPagination from '../Components/PatchedPagination';
 import { ContainerStyle, ScrollStyle } from '../Styles/commonStyles';
 import { setColumnsRequest } from '../Modules/listColumns';
-import abvRange from '../Utils/abvRange';
 import AbvFilterButton from '../Components/AbvFilterButton';
-import filterDataByAbv from '../Utils/filterDataByAbv';
+import TableModal from '../Components/TableModal';
+import { getTableOptions, filterDataByAbv } from '../Utils';
+import { abvRange } from '../Constants';
 
 const BeerList = () => {
   const dispatch = useDispatch();
@@ -23,32 +24,23 @@ const BeerList = () => {
     isColumnLoaded: state.listColumnReducer.loading,
   }));
 
-  const [selectedRange, setSelectedRange] = useState(new Set([]));
+  const [selectedRange, setSelectedRange] = useState(new Set());
 
   const columnDragHandler = (fromIdx, toIdx) => {
     dispatch(setColumnsRequest(fromIdx, toIdx, columns));
   };
 
-  const tableOptions = {
-    headerStyle: {
-      backgroundColor: '#1890FF',
-      color: '#FFF',
-      fontSize: '1rem',
-    },
-    pageSize: 6,
-    pageSizeOptions: [6, 10, 15],
-  };
-
   const rowClickHandler = (_, selected) => {
     const { id } = selected.tableData;
     Modal.info({
-      title: '맥주 상세 정보',
-      width: '50%',
-      content: <h1>모달</h1>,
+      title: '맥주 상세정보',
+      width: '50vw',
+      content: <TableModal data={rawData[id]} />,
       onOk() {},
     });
   };
 
+  const tableOptions = getTableOptions({});
   const filteredData = filterDataByAbv(
     [...selectedRange],
     renderData,
@@ -61,7 +53,7 @@ const BeerList = () => {
         {abvRange.map(({ range, unit }, idx) => {
           const props = { selectedRange, setSelectedRange, range, unit, idx };
           // eslint-disable-next-line react/jsx-props-no-spreading
-          return <AbvFilterButton key={range + unit} {...props} />;
+          return <AbvFilterButton key={range.join('-') + unit} {...props} />;
         })}
         <h3>알콜 도수(ABV) 필터</h3>
       </S.FilterArea>