feat(article): add create article feature

- add TextArea, TextAreaField, DropDown, DropDownField components
- add editorJS
- modify useForm
- add create article page

[Finishes #166272067]

package.json

@@ -81,6 +81,17 @@
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.3.4",
+    "@editorjs/code": "^2.4.1",
+    "@editorjs/delimiter": "^1.1.0",
+    "@editorjs/editorjs": "^2.15.0",
+    "@editorjs/embed": "^2.2.1",
+    "@editorjs/header": "^2.3.0",
+    "@editorjs/image": "^2.3.1",
+    "@editorjs/inline-code": "^1.3.0",
+    "@editorjs/list": "^1.4.0",
+    "@editorjs/marker": "^1.2.1",
+    "@editorjs/paragraph": "^2.6.0",
+    "@editorjs/raw": "^2.1.1",
     "@testing-library/jest-dom": "^4.0.0",
     "@testing-library/react": "^8.0.5",
     "@testing-library/react-hooks": "^1.1.0",

src/components/UI/atoms/DropDown/DropDown.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const DropDown = ({
+  list,
+  name,
+  label,
+  onChange,
+  value,
+}) => {
+  return (
+    <DropDown.Container name={name} onChange={onChange}>
+      <option value=''>{label}</option>
+      {
+        list.length
+          ? list.map(item => <option
+            value={item.id}
+            key={item.id}
+            defaultValue={item.id === value ? true : null}
+          >
+            {item.name}
+          </option>)
+          : null
+      }
+    </DropDown.Container>
+  );
+};
+
+DropDown.propTypes = {
+  list: PropTypes.array.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  label: PropTypes.string,
+};
+
+DropDown.Container = styled.select`
+  ${({
+    padding,
+    fontSize,
+    color,
+    theme,
+  }) => `
+    color: ${theme.textColors[color]};
+    padding: ${theme.spacing[padding] || '0'};
+    font-size: ${theme.fontSizes[fontSize]};
+    width: 18rem;
+    height: 4.0rem;
+    display: block;
+    font-size: 1.4rem;
+    background: transparent;
+    color: #B02091;
+    border: 1px solid #B02091;
+    box-sizing: border-box;
+
+    @media ${theme.device.mobileS} {
+      font-size: 1.2rem;
+    }
+    @media ${theme.device.mobileM} {
+      font-size: 1.3rem;
+    }
+    @media ${theme.device.mobileL} {
+      font-size: 1.3rem;
+    }
+    @media ${theme.device.tablet} {
+      font-size: 1.3rem;
+    }
+`}
+`;
+
+
+export default DropDown;

src/components/UI/atoms/DropDown/DropDown.md

@@ -0,0 +1,25 @@
+DropDown Default:
+
+```jsx
+const name = 'dropdown';
+
+const onChange = () => true;
+
+const list = [
+  {
+    id: '07dea297-f951-4367-8da0-96462086d3e7',
+    updatedAt: '2019-07-30 10:58:48.324+00',
+    name: 'adventure',
+    createdAt: '2019-07-30 10:58:48.324+00',
+  },
+  {
+    id: '4df25c1f-4224-4c7b-9807-2711dd337897',
+    updatedAt: '2019-07-30 10:58:48.323+00',
+    name: 'defaults',
+    createdAt: '2019-07-30 10:58:48.323+00',
+  },
+];
+
+<DropDown list={list} name={name} onChange={onChange} label='category'/>
+
+```