Add textarea form component

frontend/src/component/form/TextArea.scss

@@ -0,0 +1,18 @@
+@import '../styles/color';
+@import '../styles/corner';
+@import '../styles/font';
+
+.text-area {
+  @include default-font();
+  border: 2px solid $color-text-field-border;
+  box-sizing: border-box;
+  font-size: 16px;
+  @include round-corner;
+  outline: none;
+  padding: 8px 20px;
+  width: 100%;
+
+  &:focus {
+    border-color: $color-primary;
+  }
+}

frontend/src/component/form/TextAreaField.tsx

@@ -0,0 +1,32 @@
+import React, { ChangeEvent, Component } from 'react';
+import './TextArea.scss';
+
+interface IProps {
+  rows?: number;
+  value?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
+}
+
+export class TextAreaField extends Component<IProps, any> {
+  render() {
+    return (
+      <textarea
+        className={'text-area'}
+        rows={this.props.rows}
+        value={this.props.value}
+        placeholder={this.props.placeholder}
+        onChange={this.handleChange}
+        onBlur={this.props.onBlur}
+      />
+    );
+  }
+
+  private handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    if (!this.props.onChange) {
+      return;
+    }
+    this.props.onChange(event.target.value);
+  };
+}

frontend/src/component/form/TextField.scss

@@ -4,7 +4,7 @@
 
 .text-field {
   @include default-font();
-  border: 2px solid #9e9e9e;
+  border: 2px solid $color-text-field-border;
   box-sizing: border-box;
   font-size: 16px;
   @include round-corner;

frontend/src/component/styles/color.scss

@@ -7,6 +7,9 @@ $color-highlight: lightblue;
 $color-scrollbar-track: #ccc;
 $color-divider: #dbdbdb;
 $color-time: #9e9e9e;
+$color-text-field-border: #9e9e9e;
+
+// Toast
 $color-toast-background: $color-dark-gray;
 $color-toast-text: $color-light-gray;