🚩 Add: Home 화면 완성&글로벌 테마 추가

src/Components/Nav.js

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { withRouter } from 'react-router-dom';
 import { Layout, Menu } from 'antd';
 
 const { Header } = Layout;
@@ -8,23 +9,18 @@ const menuList = {
   BEERs: '/beerlist',
   CART: '/cart',
 };
-const { pathname } = window.location;
 
-const Nav = () => {
-  const history = useHistory();
-  const [currentPath, setCurrentPath] = useState(
-    pathname === '/' ? '/home' : pathname,
-  );
+const Nav = ({ history }) => {
+  const { pathname } = history.location;
 
   return (
     <Header>
-      <Menu theme="dark" mode="horizontal" selectedKeys={currentPath}>
+      <Menu theme="dark" mode="horizontal" selectedKeys={pathname}>
         {Object.entries(menuList).map(([menuName, path]) => (
           <Menu.Item
             key={path}
             onClick={() => {
               history.push(path);
-              setCurrentPath(path);
             }}
           >
             {menuName}
@@ -35,4 +31,4 @@ const Nav = () => {
   );
 };
 
-export default Nav;
+export default withRouter(Nav);

src/Modules/beerList.js

@@ -1,3 +1,5 @@
+// Duck 패턴 https://github.com/JisuPark/ducks-modular-redux
+
 const initialState = {
   loading: false,
   data: null,

src/Modules/index.js

@@ -11,10 +11,18 @@ enableES5();
 
 const rootReducer = combineReducers({ beerListReducer });
 
-// export default rootReducer;
 export default rootReducer;
 
-// wathcer saga
+// Saga 실행 과정
+// 1)Action Dispatch 2)Saga 미들웨어 실행(takeLatest) 3)비동기 통신(yield call)
+// 4)통신 성공/실패에 따라 상응하는 액션 Dispatch(yield put) 5)상태 업데이트
 export function* rootSaga() {
   yield all([getBeerListSaga()]);
 }
+
+/**
+ * Thunk vs Saga
+ * 공통점 : dispatch() 메서드를 통해 store로 향하는 액션을 가로채는 미들웨어
+ * Thunk : 액션 생성자가 함수를 반환하고, 해당 함수내에서 비동기 작업 진행(const fetch = (params) => (dispatch) => {...})
+ * Saga : ES6의 제너레이터 문법을 이용하며, Dispatch하는 액션을 감지하는 리스너 형태로 동작
+ */

src/Modules/saga/beerListSaga.js

@@ -11,11 +11,11 @@ function* getBeerList() {
     const { data } = yield call(APIs.getBeerList); // yield call은 결과 반환시까지 기다려줌
     yield put(getBeerListSuccess(data)); // action dispatch
   } catch (err) {
-    yield put(getBeerListFailed(err));
+    yield put(getBeerListFailed(err.response.status));
   }
 }
 export default function* getBeerListSaga() {
   yield takeLatest(GET_BEER_LIST_REQUEST, getBeerList);
   // yield takeLatest(...) : 가장 마지막 요청에 대해 어떤 함수를 실행시킬지 지정
-  // REQUEST_DATA 액션 객체가 들어오면 getApiData 실행
+  // REQUEST_DATA 액션 객체가 들어오면(첫번째 인자) getApiData(두번째 인자) 실행
 }

src/Pages/Home.js

@@ -1,11 +1,92 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { useSelector } from 'react-redux';
-import styled from 'styled-components/macro';
+import styled, { css } from 'styled-components/macro';
+import bearIcon from '../Assets/icons8-beer-glass-96.png';
 
-const Home = () => {
-  const beerList = useSelector(s => s.beerListReducer.data);
+const Home = ({ history }) => {
+  const beerList = useSelector(s => s.beerListReducer);
 
-  return <h1>{`저장된 맥주 정보 ${beerList?.length || 0}개`}</h1>;
+  return (
+    <S.Container>
+      <h1>
+        저장된 맥주 정보 <span>{`${beerList.data?.length ?? 0}개`}</span>
+      </h1>
+      <button type="button" onClick={() => history.push('/beerlist')}>
+        <h2>맥주 리스트 보러가기</h2>
+        <img src={bearIcon} alt="bearIcon" />
+      </button>
+    </S.Container>
+  );
 };
 
+const S = {};
+
+S.LineStyle = css`
+  :after {
+    background: none repeat scroll 0 0 transparent;
+    bottom: 0;
+    content: '';
+    display: block;
+    height: 8px;
+    left: 50%;
+    position: absolute;
+    background: ${({ theme }) => theme.$hover};
+    transition: width 0.3s ease 0s, left 0.3s ease 0s;
+    width: 0;
+  }
+  :hover:after {
+    width: 100%;
+    left: 0;
+  }
+`;
+
+S.Container = styled.section`
+  background: ${({ theme }) => theme.$background};
+  height: calc(100vh - 64px);
+  display: grid;
+  place-content: center;
+
+  button {
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+
+  h1,
+  h2 {
+    color: white;
+    text-decoration: none;
+    display: inline-block;
+    padding: 30px 0;
+    position: relative;
+  }
+
+  h1 {
+    margin-top: -10vh;
+    font-size: 10vh;
+
+    span {
+      background: ${({ theme }) => theme.$highlight};
+      border-radius: 5px;
+      padding: 0 10px;
+    }
+  }
+  h2 {
+    margin-top: -5vh;
+    font-size: 5vh;
+    ${S.LineStyle}
+
+    :hover {
+      color: ${({ theme }) => theme.$hover};
+    }
+  }
+
+  img {
+    height: 60px;
+    position: relative;
+    top: -10px;
+  }
+`;
+
 export default Home;

src/Routes.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
+import { ThemeProvider } from 'styled-components/macro';
 import {
   BrowserRouter as Router,
   Route,

src/index.js

@@ -4,7 +4,9 @@ import { Provider } from 'react-redux';
 import createSagaMiddleware from 'redux-saga';
 import { createStore, applyMiddleware, compose } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import GlobalStyle from './styles/globalStyle';
+import { ThemeProvider } from 'styled-components/macro';
+import theme from './Styles/theme';
+import GlobalStyle from './Styles/globalStyle';
 import Routes from './Routes';
 import rootReducer, { rootSaga } from './Modules';
 import 'antd/dist/antd.css';
@@ -21,8 +23,10 @@ sagaMiddleware.run(rootSaga);
 
 ReactDOM.render(
   <Provider store={store}>
-    <GlobalStyle />
-    <Routes />
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <Routes />
+    </ThemeProvider>
   </Provider>,
   document.getElementById('root'),
 );

src/styles/theme.js

@@ -0,0 +1,7 @@
+export default {
+  $background: '#001529',
+  $highlight: '#1890FF',
+  $hover: '#03CEA4',
+  $yellow: '#F7FF58',
+  $orange: '#FF934F',
+};