Implement mobile like button

Partially resolves velopert#19

Author: velopert

src/components/post/MobileLikeButton.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import palette from '../../lib/styles/palette';
+import { LikeIcon } from '../../static/svg';
+
+export type MobileLikeButtonProps = {
+  likes: number;
+  onToggle: () => void;
+  liked: boolean;
+};
+
+function MobileLikeButton({ likes, onToggle, liked }: MobileLikeButtonProps) {
+  return (
+    <Button onClick={onToggle} data-testid="like-btn" liked={liked}>
+      <LikeIcon />
+      <span>{likes}</span>
+    </Button>
+  );
+}
+
+const Button = styled.button<{ liked: boolean }>`
+  background: white;
+  border: 1px solid ${palette.gray5};
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  display: flex;
+  align-items: center;
+  height: 1.5rem;
+  border-radius: 0.75rem;
+  outline: none;
+  svg {
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-right: 0.75rem;
+    color: ${palette.gray5};
+  }
+  span {
+    font-size: 0.75rem;
+    font-weight: bold;
+    color: ${palette.gray5};
+  }
+  ${props =>
+    props.liked &&
+    css`
+      border-color: ${palette.teal5};
+      background: ${palette.teal5};
+      svg,
+      span {
+        color: white;
+      }
+    `}
+`;
+
+export default MobileLikeButton;

src/components/post/PostHead.tsx

@@ -78,6 +78,13 @@ const SubInfo = styled.div`
 `;
 
 const EditRemoveGroup = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: -1.25rem;
+  ${media.medium} {
+    margin-top: -0.5rem;
+    margin-bottom: 1.5rem;
+  }
   button {
     padding: 0;
     outline: none;
@@ -112,6 +119,14 @@ const Thumbnail = styled.img`
   }
 `;
 
+const MobileOnly = styled.div`
+  align-items: center;
+  display: none;
+  ${media.medium} {
+    display: flex;
+  }
+`;
+
 export interface PostHeadProps {
   title: string;
   tags: string[];
@@ -132,6 +147,7 @@ export interface PostHeadProps {
   shareButtons: React.ReactNode;
   toc: React.ReactNode;
   isPrivate?: boolean;
+  mobileLikeButton: React.ReactNode;
 }
 
 const PostHead: React.FC<PostHeadProps> = ({
@@ -149,6 +165,7 @@ const PostHead: React.FC<PostHeadProps> = ({
   shareButtons,
   toc,
   isPrivate,
+  mobileLikeButton,
 }) => {
   const [askRemove, toggleAskRemove] = useToggle(false);
 
@@ -160,6 +177,12 @@ const PostHead: React.FC<PostHeadProps> = ({
     <PostHeadBlock>
       <div className="head-wrapper">
         <h1>{title}</h1>
+        {ownPost && (
+          <EditRemoveGroup>
+            <button onClick={onEdit}>수정</button>
+            <button onClick={toggleAskRemove}>삭제</button>
+          </EditRemoveGroup>
+        )}
         <SubInfo>
           <div className="information">
             <span className="username">
@@ -174,12 +197,7 @@ const PostHead: React.FC<PostHeadProps> = ({
               </>
             )}
           </div>
-          {ownPost && (
-            <EditRemoveGroup>
-              <button onClick={onEdit}>수정</button>
-              <button onClick={toggleAskRemove}>삭제</button>
-            </EditRemoveGroup>
-          )}
+          <MobileOnly>{mobileLikeButton}</MobileOnly>
         </SubInfo>
         <TagList tags={tags} link />
         {shareButtons}

src/components/post/__tests__/MobileLikeButton.test.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import MobileLikeButton, { MobileLikeButtonProps } from '../MobileLikeButton';
+import palette from '../../../lib/styles/palette';
+
+describe('MobileLikeButton', () => {
+  const setup = (props: Partial<MobileLikeButtonProps> = {}) => {
+    const initialProps: MobileLikeButtonProps = {
+      likes: 0,
+      onToggle: () => {},
+      liked: false,
+    };
+    const utils = render(<MobileLikeButton {...initialProps} {...props} />);
+    return {
+      ...utils,
+    };
+  };
+  it('renders properly', () => {
+    setup();
+  });
+
+  it('shows likes value', () => {
+    const utils = setup({ likes: 7 });
+    utils.getByText('7');
+  });
+
+  it('calls onToggle', () => {
+    const onToggle = jest.fn();
+    const utils = setup({ onToggle });
+    const button = utils.getByTestId('like-btn');
+    fireEvent.click(button);
+    expect(onToggle).toBeCalled();
+  });
+
+  it('shows inactive button', () => {
+    const utils = setup({ liked: false });
+    const button = utils.getByTestId('like-btn');
+    expect(button).toHaveStyle('background: white');
+  });
+
+  it('shows active button', () => {
+    const utils = setup({ liked: true });
+    const button = utils.getByTestId('like-btn');
+    expect(button).toHaveStyle(`background: ${palette.teal5}`);
+  });
+});

src/containers/post/PostViewer.tsx

@@ -34,6 +34,7 @@ import useNotFound from '../../lib/hooks/useNotFound';
 import { Helmet } from 'react-helmet-async';
 import { RootState } from '../../modules';
 import { toast } from 'react-toastify';
+import MobileLikeButton from '../../components/post/MobileLikeButton';
 
 const UserProfileWrapper = styled(VelogResponsive)`
   margin-top: 16rem;
@@ -348,6 +349,13 @@ const PostViewer: React.FC<PostViewerProps> = ({
         }
         toc={<PostToc />}
         isPrivate={post.is_private}
+        mobileLikeButton={
+          <MobileLikeButton
+            likes={post.likes}
+            liked={post.liked}
+            onToggle={onLikeToggle}
+          />
+        }
       />
       <PostContent isMarkdown={post.is_markdown} body={post.body} />
       <UserProfileWrapper>