Implement PostCommentWrite presentational

Author: velopert

src/components/common/Button.tsx

@@ -48,7 +48,17 @@ const Button: React.SFC<ButtonProps> = ({
 }) => {
   const htmlProps = rest as any;
   return (
-    <ButtonBlock color={color} inline={inline} {...htmlProps}>
+    <ButtonBlock
+      color={color}
+      inline={inline}
+      {...htmlProps}
+      onClick={e => {
+        if (htmlProps.onClick) {
+          htmlProps.onClick(e);
+        }
+        (e.target as HTMLButtonElement).blur();
+      }}
+    >
       {children}
     </ButtonBlock>
   );

src/components/common/Typography.tsx

@@ -9,7 +9,9 @@ const TypographyBlock = styled.div`
   letter-spacing: -0.02em;
   word-break: keep-all;
   word-wrap: break-word;
-  font-family: 'Spoqa Han Sans';
+  font-family: 'Spoqa Han Sans', -apple-system, BlinkMacSystemFont,
+    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Apple SD Gothic Neo',
+    arial, 나눔고딕, 'Nanum Gothic', 돋움;
 
   a {
     color: ${palette.teal7};

src/components/post/PostCommentsWrite.tsx

@@ -2,23 +2,53 @@ import * as React from 'react';
 import styled from 'styled-components';
 import TextareaAutosize from 'react-textarea-autosize';
 import Button from '../common/Button';
+import palette from '../../lib/styles/palette';
+import { customFont } from '../../lib/styles/utils';
 
 const PostCommentsWriteBlock = styled.div`
   > .buttons-wrapper {
     display: flex;
     justify-content: flex-end;
   }
 `;
-const StyledTextarea = styled(TextareaAutosize)``;
+const StyledTextarea = styled(TextareaAutosize)`
+  resize: none;
+  padding: 1rem;
+  outline: none;
+  border: 1px solid ${palette.gray2};
+  margin-bottom: 1.5rem;
+  width: 100%;
+  border-radius: 4px;
+  min-height: 5.625rem;
+  font-size: 1rem;
+  ${customFont};
+  color: ${palette.gray9};
+  &::placeholder {
+    color: ${palette.gray5};
+  }
+  line-height: 1.75;
+`;
 
-export interface PostCommentsWriteProps {}
+export interface PostCommentsWriteProps {
+  comment: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onWrite: () => void;
+}
 
-const PostCommentsWrite: React.FC<PostCommentsWriteProps> = props => {
+const PostCommentsWrite: React.FC<PostCommentsWriteProps> = ({
+  comment,
+  onChange,
+  onWrite,
+}) => {
   return (
     <PostCommentsWriteBlock>
-      <StyledTextarea placeholder="댓글을 작성하세요" />
+      <StyledTextarea
+        placeholder="댓글을 작성하세요"
+        value={comment}
+        onChange={onChange}
+      />
       <div className="buttons-wrapper">
-        <Button>댓글 작성</Button>
+        <Button onClick={onWrite}>댓글 작성</Button>
       </div>
     </PostCommentsWriteBlock>
   );

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

@@ -1,15 +1,21 @@
 import * as React from 'react';
-import { render } from 'react-testing-library';
+import { render, fireEvent } from 'react-testing-library';
 import PostCommentsWrite, {
   PostCommentsWriteProps,
 } from '../PostCommentsWrite';
 
 describe('PostCommentsWrite', () => {
   const setup = (props: Partial<PostCommentsWriteProps> = {}) => {
-    const initialProps: PostCommentsWriteProps = {};
+    const initialProps: PostCommentsWriteProps = {
+      comment: 'hello world',
+      onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => {},
+      onWrite: () => {},
+    };
     const utils = render(<PostCommentsWrite {...initialProps} {...props} />);
 
-    const textarea = utils.getByPlaceholderText('댓글을 작성하세요');
+    const textarea = utils.getByPlaceholderText(
+      '댓글을 작성하세요',
+    ) as HTMLTextAreaElement;
     const writeButton = utils.getByText('댓글 작성');
     return {
       textarea,
@@ -22,4 +28,27 @@ describe('PostCommentsWrite', () => {
     expect(textarea).toBeVisible();
     expect(writeButton).toBeVisible();
   });
+  it('shows value on textarea', () => {
+    const { textarea } = setup();
+    expect(textarea.value).toBe('hello world');
+  });
+  it('calls onChange and onWrite functions', () => {
+    const onChange = jest.fn();
+    const onWrite = jest.fn();
+    const { textarea, writeButton } = setup({ onChange, onWrite });
+
+    const changeEvent = {
+      target: {
+        value: 'hello world!',
+      },
+    };
+
+    fireEvent.change(textarea, changeEvent);
+
+    expect(onChange).toBeCalled();
+
+    fireEvent.click(writeButton);
+
+    expect(onWrite).toBeCalled();
+  });
 });

src/components/post/__tests__/PostCommentsWrite.tsx

@@ -9,7 +9,7 @@ exports[`MarkdownPreview matches snapshot 1`] = `
       class="sc-bxivhb cFXJHm"
     />
     <div
-      class="sc-bdVaJa eJgOOc"
+      class="sc-bdVaJa ckqNDH"
     >
       <div
         class="atom-one-light sc-bwzfXH duSwWC"

src/components/write/__tests__/__snapshots__/MarkdownPreview.test.tsx.snap

@@ -249,7 +249,7 @@ exports[`QuillEditor matches snapshot 1`] = `
       class="sc-cSHVUG cvxfxn"
     >
       <div
-        class="sc-VigVT fvLanP"
+        class="sc-VigVT jwbwQF"
       >
         <div
           tabindex="2"

src/components/write/__tests__/__snapshots__/QuillEditor.test.tsx.snap

@@ -267,7 +267,7 @@ exports[`ActiveEditor matches snapshot 1`] = `
       class="sc-jWBwVP boWCkI"
     >
       <div
-        class="sc-hMqMXs eaqQgC"
+        class="sc-hMqMXs cRFXMV"
       >
         <div
           tabindex="2"

src/containers/write/__tests__/__snapshots__/ActiveEditor.test.tsx.snap

@@ -1,9 +1,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", arial, 나눔고딕, "Nanum Gothic", 돋움, Dotum, Tahoma, Geneva, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #212529;

src/index.css

@@ -5,3 +5,9 @@ export const ellipsis = css`
   white-space: nowrap;
   overflow-x: hidden;
 `;
+
+export const customFont = css`
+  font-family: 'Spoqa Han Sans', -apple-system, BlinkMacSystemFont,
+    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Apple SD Gothic Neo',
+    arial, 나눔고딕, 'Nanum Gothic', 돋움;
+`;