Initialize PostComments related components

Author: velopert

src/components/post/PostCommentsTemplate.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import VelogResponsive from '../velog/VelogResponsive';
+import palette from '../../lib/styles/palette';
+
+const PostCommentsTemplateBlock = styled(VelogResponsive)`
+  margin-top: 7.5rem;
+  color: ${palette.gray8};
+  h4 {
+    font-size: 1.125rem;
+    line-height: 1.5;
+    font-weight: 600;
+    margin-bottom: 1rem;
+  }
+`;
+
+const Contents = styled.div``;
+
+export interface PostCommentsTemplateProps {
+  count: number;
+}
+
+const PostCommentsTemplate: React.FC<PostCommentsTemplateProps> = ({
+  count,
+  children,
+}) => {
+  return (
+    <PostCommentsTemplateBlock>
+      <h4>{count}개의 댓글</h4>
+      <Contents>{children}</Contents>
+    </PostCommentsTemplateBlock>
+  );
+};
+
+export default PostCommentsTemplate;

src/components/post/PostCommentsWrite.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import TextareaAutosize from 'react-textarea-autosize';
+import Button from '../common/Button';
+
+const PostCommentsWriteBlock = styled.div`
+  > .buttons-wrapper {
+    display: flex;
+    justify-content: flex-end;
+  }
+`;
+const StyledTextarea = styled(TextareaAutosize)``;
+
+export interface PostCommentsWriteProps {}
+
+const PostCommentsWrite: React.FC<PostCommentsWriteProps> = props => {
+  return (
+    <PostCommentsWriteBlock>
+      <StyledTextarea placeholder="댓글을 작성하세요" />
+      <div className="buttons-wrapper">
+        <Button>댓글 작성</Button>
+      </div>
+    </PostCommentsWriteBlock>
+  );
+};
+
+export default PostCommentsWrite;

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { render } from 'react-testing-library';
+import PostCommentsTemplate, {
+  PostCommentsTemplateProps,
+} from '../PostCommentsTemplate';
+
+describe('PostCommentsTemplate', () => {
+  const setup = (props: Partial<PostCommentsTemplateProps> = {}) => {
+    const initialProps: PostCommentsTemplateProps = {
+      count: 9,
+    };
+    const utils = render(
+      <PostCommentsTemplate {...initialProps} {...props}>
+        contents
+      </PostCommentsTemplate>,
+    );
+    return {
+      ...utils,
+    };
+  };
+  it('shows comments count and children', () => {
+    const { getByText } = setup();
+    getByText('9개의 댓글');
+    getByText('contents');
+  });
+});

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { render } from 'react-testing-library';
+import PostCommentsWrite, {
+  PostCommentsWriteProps,
+} from '../PostCommentsWrite';
+
+describe('PostCommentsWrite', () => {
+  const setup = (props: Partial<PostCommentsWriteProps> = {}) => {
+    const initialProps: PostCommentsWriteProps = {};
+    const utils = render(<PostCommentsWrite {...initialProps} {...props} />);
+
+    const textarea = utils.getByPlaceholderText('댓글을 작성하세요');
+    const writeButton = utils.getByText('댓글 작성');
+    return {
+      textarea,
+      writeButton,
+      ...utils,
+    };
+  };
+  it('renders textarea and a button', () => {
+    const { textarea, writeButton } = setup();
+    expect(textarea).toBeVisible();
+    expect(writeButton).toBeVisible();
+  });
+});

src/components/post/__tests__/PostCommentsWrite.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { render } from 'react-testing-library';
+import PostCommentsWrite, {
+  PostCommentsWriteProps,
+} from '../PostCommentsWrite';
+
+describe('PostCommentsWrite', () => {
+  const setup = (props: Partial<PostCommentsWriteProps> = {}) => {
+    const initialProps: PostCommentsWriteProps = {};
+    const utils = render(<PostCommentsWrite {...initialProps} {...props} />);
+
+    const textarea = utils.getByPlaceholderText('댓글을 작성하세요');
+    const writeButton = utils.getByText('댓글 작성');
+    return {
+      textarea,
+      writeButton,
+      ...utils,
+    };
+  };
+  it('renders textarea and a button', () => {
+    const { textarea, writeButton } = setup();
+    expect(textarea).toBeVisible();
+    expect(writeButton).toBeVisible();
+  });
+});

src/containers/post/PostComments.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import PostCommentsTemplate from '../../components/post/PostCommentsTemplate';
+import PostCommentsWriteContainer from './PostCommentsWriteContainer';
+
+export interface PostCommentsProps {}
+
+const PostComments: React.FC<PostCommentsProps> = props => {
+  return (
+    <PostCommentsTemplate count={9}>
+      <PostCommentsWriteContainer />
+    </PostCommentsTemplate>
+  );
+};
+
+export default PostComments;

src/containers/post/PostCommentsWriteContainer.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import PostCommentsWrite from '../../components/post/PostCommentsWrite';
+export interface PostCommentWriteContainerProps {}
+
+const PostCommentsWriteContainer: React.FC<
+  PostCommentWriteContainerProps
+> = props => {
+  return <PostCommentsWrite />;
+};
+
+export default PostCommentsWriteContainer;

src/containers/post/PostViewer.tsx

@@ -3,6 +3,7 @@ import { Query, QueryResult } from 'react-apollo';
 import { READ_POST, SinglePost } from '../../lib/graphql/post';
 import PostHead from '../../components/post/PostHead';
 import PostContent from '../../components/post/PostContent';
+import PostComments from './PostComments';
 
 export interface PostViewerProps {
   username: string;
@@ -39,6 +40,7 @@ const PostViewer: React.FC<PostViewerProps> = ({ username, urlSlug }) => {
               }
             />
             <PostContent isMarkdown={post.is_markdown} body={post.body} />
+            <PostComments />
           </>
         );
       }}