Merge pull request #2747 from weseek/feat/gw-3606

gw-3606

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -108,15 +108,20 @@ const UserInfo = ({ pageUser }) => {
 /* eslint-disable react/prop-types */
 const PageReactionButtons = ({ appContainer, pageContainer }) => {
 
-  const { pageId, isLiked, pageUser } = pageContainer.state;
+  const {
+    pageId, isLiked, pageUser, sumOfLikers,
+  } = pageContainer.state;
 
   return (
     <>
       {pageUser == null && (
-      <span className="mr-2">
+      <span>
         <LikeButton pageId={pageId} isLiked={isLiked} />
       </span>
       )}
+      <span className="mr-2 total-likes">
+        {sumOfLikers}
+      </span>
       <span className="mr-2">
         <BookmarkButton pageId={pageId} crowi={appContainer} />
       </span>

src/client/styles/scss/_subnav.scss

@@ -39,6 +39,13 @@
     font-size: 20px;
   }
 
+  .total-likes {
+    width: 8px;
+    height: 16px;
+    padding: 0.5em 0 0 0;
+    font-size: 16px;
+  }
+
   ul.authors {
     padding: 0.7em 0 0.7em 1.5em;
     margin-bottom: 0;
@@ -83,6 +90,12 @@
       height: 30px;
       font-size: 15px !important;
     }
+
+    .total-likes {
+      width: 6px;
+      height: 12px;
+      font-size: 12px;
+    }
   }
 }