💄 Add: 즐겨찾기 개수 뱃지 추가

src/Components/Nav.js

@@ -1,14 +1,22 @@
 /* eslint-disable react/prop-types */
-import React from 'react';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, Badge } from 'antd';
 import { sitemap } from '../Constants';
 
 const { Header } = Layout;
+const badgeStyle = {
+  backgroundColor: 'gray',
+  color: 'white',
+  boxShadow: 'none',
+};
 
 // withRouter를 이용해 라우터 호출이 아닌 컴포넌트도 history 객체에 접근하도록 설정
 const Nav = ({ history }) => {
+  const { favorites } = useSelector(state => state.favoriteListReducer);
   const { pathname } = history.location;
+  const [badgeCount, setBadgeCount] = useState(favorites?.length);
 
   return (
     <Header>
@@ -23,9 +31,15 @@ const Nav = ({ history }) => {
             key={path}
             onClick={() => {
               history.push(path);
+              if (path === '/favorite') {
+                setBadgeCount(0);
+              }
             }}
           >
             {name}
+            {path === '/favorite' && path !== pathname && (
+              <Badge count={badgeCount} style={badgeStyle} offset={[0, -25]} />
+            )}
           </Menu.Item>
         ))}
       </Menu>

src/Pages/FavoritePage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components/macro';
 import { useSelector, useDispatch } from 'react-redux';
-import { Modal, message } from 'antd';
+import { Modal, message, Empty } from 'antd';
 import { clearFavorite } from '../Modules/favoriteList';
 import FavoriteEntry from '../Components/FavoriteEntry';
 import { ContainerStyle } from '../Styles/commonStyles';
@@ -41,7 +41,10 @@ const FavoritePage = () => {
         {favorites.length > 0 ? (
           renderData.map(entry => <FavoriteEntry key={entry.id} data={entry} />)
         ) : (
-          <h1>空空如也 🍻</h1>
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description="아직 즐겨찾기한 맥주가 없네요"
+          />
         )}
       </S.ListWrapper>
     </S.Container>