Implement showing post thumbnail

Author: velopert

src/components/post/PostHead.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import VelogResponsive from '../velog/VelogResponsive';
 import palette from '../../lib/styles/palette';
 import { formatDate } from '../../lib/utils';
+import PostTags from './PostTags';
 
 const PostHeadBlock = styled(VelogResponsive)`
   margin-top: 5.5rem;
@@ -30,14 +31,34 @@ const SubInfo = styled.div`
   }
 `;
 
+const Thumbnail = styled.img`
+  max-height: 100vh;
+  max-width: 100%;
+  width: auto;
+  margin: 0 auto;
+  height: auto;
+  object-fit: contain;
+  display: block;
+  margin-top: 2rem;
+`;
+
 export interface PostHeadProps {
   title: string;
   tags: string[];
   username: string;
   date: string;
+  thumbnail: string | null;
+  hideThumbnail: boolean;
 }
 
-const PostHead: React.FC<PostHeadProps> = ({ title, username, date }) => {
+const PostHead: React.FC<PostHeadProps> = ({
+  title,
+  username,
+  date,
+  tags,
+  hideThumbnail,
+  thumbnail,
+}) => {
   return (
     <PostHeadBlock>
       <h1>{title}</h1>
@@ -46,6 +67,10 @@ const PostHead: React.FC<PostHeadProps> = ({ title, username, date }) => {
         <span className="separator">&middot;</span>
         <span>{formatDate(date)}</span>
       </SubInfo>
+      <PostTags tags={tags} />
+      {!hideThumbnail && thumbnail && (
+        <Thumbnail src={thumbnail} alt="post-thumbnail" />
+      )}
     </PostHeadBlock>
   );
 };

src/components/post/PostTags.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import palette from '../../lib/styles/palette';
+
+const PostTagsBlock = styled.div`
+  margin-top: 0.875rem;
+  margin-bottom: -0.875rem;
+`;
+
+const Tag = styled(Link)`
+  margin-bottom: 0.875rem;
+  background: ${palette.gray1};
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: 2rem;
+  border-radius: 1rem;
+  display: inline-flex;
+  align-items: center;
+  margin-right: 0.875rem;
+  color: ${palette.teal7};
+  text-decoration: none;
+  font-weight: 500;
+  &:hover {
+    background: ${palette.gray0};
+  }
+`;
+
+export interface PostTagsProps {
+  tags: string[];
+}
+
+const PostTags: React.FC<PostTagsProps> = ({ tags }) => {
+  return (
+    <PostTagsBlock>
+      {tags.map(tag => (
+        <Tag key={tag} to={`/tags/${tag}`}>
+          {tag}
+        </Tag>
+      ))}
+    </PostTagsBlock>
+  );
+};
+
+export default PostTags;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render } from 'react-testing-library';
 import PostHead, { PostHeadProps } from '../PostHead';
+import { MemoryRouter } from 'react-router';
 
 describe('PostHead', () => {
   const setup = (props: Partial<PostHeadProps> = {}) => {
@@ -9,8 +10,15 @@ describe('PostHead', () => {
       tags: ['tagA', 'tagB'],
       username: 'velopert',
       date: new Date(Date.now() - 1000 * 60 * 60 * 5).toString(),
+      thumbnail:
+        'https://images.velog.io/post-images/velopert/ac519a50-7732-11e9-bded-7fa91ac5b455/image.png',
+      hideThumbnail: false,
     };
-    const utils = render(<PostHead {...initialProps} {...props} />);
+    const utils = render(
+      <MemoryRouter>
+        <PostHead {...initialProps} {...props} />
+      </MemoryRouter>,
+    );
     return {
       ...utils,
     };
@@ -23,7 +31,27 @@ describe('PostHead', () => {
     const { getByText } = setup();
     getByText('velopert');
   });
-  it('renders date', () => {});
+  it('renders date', () => {
+    const { getByText } = setup();
+    getByText('약 5시간 전');
+  });
+
+  it('renders tags', () => {
+    const { getByText } = setup();
+    getByText('tagA');
+    getByText('tagB');
+  });
+
+  it('renders thumbnail', () => {
+    const { getByAltText } = setup();
+    getByAltText('post-thumbnail');
+  });
 
-  it('renders tags', () => {});
+  it('hides thumbnail', () => {
+    const { queryByAltText } = setup({
+      hideThumbnail: true,
+    });
+    const thumbnail = queryByAltText('post-thumbnail');
+    expect(thumbnail).toBeFalsy();
+  });
 });

src/components/post/__tests__/PostsTags.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { render } from 'react-testing-library';
+import PostTags, { PostTagsProps } from '../PostTags';
+import { MemoryRouter } from 'react-router-dom';
+
+describe('PostTags', () => {
+  const setup = (props: Partial<PostTagsProps> = {}) => {
+    const initialProps: PostTagsProps = {
+      tags: ['태그1', '태그2'],
+    };
+    const utils = render(
+      <MemoryRouter>
+        <PostTags {...initialProps} {...props} />
+      </MemoryRouter>,
+    );
+    return {
+      ...utils,
+    };
+  };
+  it('renders tags', () => {
+    const { getByText } = setup();
+    const tag1 = getByText('태그1');
+    expect(tag1).toHaveAttribute('href', '/tags/태그1');
+    getByText('태그2');
+  });
+});

src/containers/post/PostViewer.tsx

@@ -30,6 +30,10 @@ const PostViewer: React.FC<PostViewerProps> = ({ username, urlSlug }) => {
               tags={post.tags}
               username={username}
               date={post.released_at}
+              thumbnail={post.thumbnail}
+              hideThumbnail={
+                !!post.thumbnail && post.body.includes(post.thumbnail)
+              }
             />
           </>
         );

src/lib/graphql/post.ts

@@ -49,7 +49,9 @@ export interface SinglePost {
   is_markdown: boolean;
   is_private: boolean;
   is_temp: boolean;
+  thumbnail: string | null;
   user: {
+    id: string;
     username: string;
     profile: {
       display_name: string;
@@ -97,6 +99,7 @@ export const READ_POST = gql`
       is_markdown
       is_private
       is_temp
+      thumbnail
       user {
         id
         username