From fb01594954cb15c4afa4d43e710995c373f82a04 Mon Sep 17 00:00:00 2001
From: Eunbin <qpmz1212@naver.com>
Date: Wed, 4 Nov 2020 19:46:39 +0900
Subject: [PATCH 01/11] =?UTF-8?q?[feat]=20date=20picker=20atom=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20view=20=EA=B5=AC=ED=98=84=20-=20d?=
 =?UTF-8?q?ate=20picker=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20view=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20-=20storybook=20test=20code=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../atoms/DatePicker/DatePicker.stories.tsx   | 15 ++++++++++
 .../atoms/DatePicker/DatePicker.tsx           | 28 +++++++++++++++++++
 .../src/components/atoms/DatePicker/index.ts  |  1 +
 3 files changed, 44 insertions(+)
 create mode 100644 client/src/components/atoms/DatePicker/DatePicker.stories.tsx
 create mode 100644 client/src/components/atoms/DatePicker/DatePicker.tsx
 create mode 100644 client/src/components/atoms/DatePicker/index.ts

diff --git a/client/src/components/atoms/DatePicker/DatePicker.stories.tsx b/client/src/components/atoms/DatePicker/DatePicker.stories.tsx
new file mode 100644
index 0000000..99839de
--- /dev/null
+++ b/client/src/components/atoms/DatePicker/DatePicker.stories.tsx
@@ -0,0 +1,15 @@
+import React, { ChangeEvent, useState } from 'react';
+import { text } from '@storybook/addon-knobs';
+import DatePicker from './DatePicker';
+
+export default {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+};
+
+export const Default = () => {
+  const value = text('date', '2020-11-04');
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {};
+
+  return <DatePicker value={value} onChange={onChange} />;
+};
diff --git a/client/src/components/atoms/DatePicker/DatePicker.tsx b/client/src/components/atoms/DatePicker/DatePicker.tsx
new file mode 100644
index 0000000..d1ac6ff
--- /dev/null
+++ b/client/src/components/atoms/DatePicker/DatePicker.tsx
@@ -0,0 +1,28 @@
+import React, { FunctionComponent, ChangeEvent } from 'react';
+import styled from '@themes/styled';
+
+const StyledDatePicker = styled.input`
+  background-color: ${({ theme }) => theme.palette.BG_COLOR01};
+  font-size: 0.8rem;
+  color: ${({ theme }) => theme.palette.PRIMARY};
+  border-radius: 0.5rem;
+  padding: 5px 12px;
+  width: 440px;
+  border: 1px solid ${({ theme }) => theme.palette.BG_COLOR02};
+  &:focus {
+    background-color: ${({ theme }) => theme.palette.LIGHT};
+    border-color: ${({ theme }) => theme.palette.LINK_BLUE};
+    box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3);
+  }
+`;
+
+interface Props {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const DatePicker: FunctionComponent<Props> = ({ value, onChange }) => (
+  <StyledDatePicker type="date" value={value} onChange={onChange} />
+);
+
+export default DatePicker;
diff --git a/client/src/components/atoms/DatePicker/index.ts b/client/src/components/atoms/DatePicker/index.ts
new file mode 100644
index 0000000..2ef49e2
--- /dev/null
+++ b/client/src/components/atoms/DatePicker/index.ts
@@ -0,0 +1 @@
+export { default } from './DatePicker';

From dd019979d019d37b42ab552185e1a7a07b12d022 Mon Sep 17 00:00:00 2001
From: Eunbin <qpmz1212@naver.com>
Date: Wed, 4 Nov 2020 19:50:47 +0900
Subject: [PATCH 02/11] =?UTF-8?q?[feat]=20filter=20button=20atom=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20view=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20-=20filter=20button=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20view=20=EA=B5=AC=ED=98=84=20-=20story=20test=20code?=
 =?UTF-8?q?=20=EC=9E=91=EC=84=B1=20issue=20number:=20#68?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FilterButton/FilterButton.stories.tsx     | 15 ++++++++++++
 .../atoms/FilterButton/FilterButton.tsx       | 23 +++++++++++++++++++
 .../components/atoms/FilterButton/index.ts    |  1 +
 3 files changed, 39 insertions(+)
 create mode 100644 client/src/components/atoms/FilterButton/FilterButton.stories.tsx
 create mode 100644 client/src/components/atoms/FilterButton/FilterButton.tsx
 create mode 100644 client/src/components/atoms/FilterButton/index.ts

diff --git a/client/src/components/atoms/FilterButton/FilterButton.stories.tsx b/client/src/components/atoms/FilterButton/FilterButton.stories.tsx
new file mode 100644
index 0000000..b22ad48
--- /dev/null
+++ b/client/src/components/atoms/FilterButton/FilterButton.stories.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import FilterButton from './FilterButton';
+
+export default {
+  title: 'Components/FilterButton',
+  component: FilterButton,
+};
+
+export const Default = () => {
+  const onClick = () => {};
+  const value = text('button text', 'Author');
+
+  return <FilterButton onClick={onClick} text={value} />;
+};
diff --git a/client/src/components/atoms/FilterButton/FilterButton.tsx b/client/src/components/atoms/FilterButton/FilterButton.tsx
new file mode 100644
index 0000000..b21e759
--- /dev/null
+++ b/client/src/components/atoms/FilterButton/FilterButton.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledFilterButton = styled.button`
+  all: unset;
+  color: ${({ theme }) => theme.palette.SECONDARY};
+  font-size: 0.8rem;
+  &:hover {
+    color: ${({ theme }) => theme.palette.PRIMARY};
+    cursor: pointer;
+  }
+`;
+
+interface Props {
+  onClick: () => void;
+  text: string;
+}
+
+const FilterButton: FunctionComponent<Props> = ({ onClick, text }) => (
+  <StyledFilterButton onClick={onClick}>{text} ▾</StyledFilterButton>
+);
+
+export default FilterButton;
diff --git a/client/src/components/atoms/FilterButton/index.ts b/client/src/components/atoms/FilterButton/index.ts
new file mode 100644
index 0000000..e364f4d
--- /dev/null
+++ b/client/src/components/atoms/FilterButton/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterButton';

From 1092d39cfe82fe281046efe19652819ec3e58474 Mon Sep 17 00:00:00 2001
From: Eunbin <qpmz1212@naver.com>
Date: Wed, 4 Nov 2020 19:52:24 +0900
Subject: [PATCH 03/11] =?UTF-8?q?[feat]=20input=20label=20atom=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20view=20=EA=B5=AC=ED=98=84=20-=20i?=
 =?UTF-8?q?nput=20=EC=9C=84=EC=97=90=20=EB=B6=99=EC=9D=BC=20label=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20view=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20-=20story=20test=20code=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../atoms/InputLabel/InputLabel.stories.tsx     | 13 +++++++++++++
 .../components/atoms/InputLabel/InputLabel.tsx  | 17 +++++++++++++++++
 client/src/components/atoms/InputLabel/index.ts |  1 +
 3 files changed, 31 insertions(+)
 create mode 100644 client/src/components/atoms/InputLabel/InputLabel.stories.tsx
 create mode 100644 client/src/components/atoms/InputLabel/InputLabel.tsx
 create mode 100644 client/src/components/atoms/InputLabel/index.ts

diff --git a/client/src/components/atoms/InputLabel/InputLabel.stories.tsx b/client/src/components/atoms/InputLabel/InputLabel.stories.tsx
new file mode 100644
index 0000000..b200095
--- /dev/null
+++ b/client/src/components/atoms/InputLabel/InputLabel.stories.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import InputLabel from './InputLabel';
+
+export default {
+  title: 'Components/InputLabel',
+  component: InputLabel,
+};
+
+export const Default = () => {
+  const value = text('label', 'Due date (optional)');
+  return <InputLabel text={value} />;
+};
diff --git a/client/src/components/atoms/InputLabel/InputLabel.tsx b/client/src/components/atoms/InputLabel/InputLabel.tsx
new file mode 100644
index 0000000..67379bd
--- /dev/null
+++ b/client/src/components/atoms/InputLabel/InputLabel.tsx
@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledInputLabel = styled.span`
+  font-size: 1rem;
+  font-weight: 600;
+`;
+
+interface Props {
+  text: string;
+}
+
+const InputLabel: FunctionComponent<Props> = ({ text }) => (
+  <StyledInputLabel>{text}</StyledInputLabel>
+);
+
+export default InputLabel;
diff --git a/client/src/components/atoms/InputLabel/index.ts b/client/src/components/atoms/InputLabel/index.ts
new file mode 100644
index 0000000..3b0b90a
--- /dev/null
+++ b/client/src/components/atoms/InputLabel/index.ts
@@ -0,0 +1 @@
+export { default } from './InputLabel';

From f6aa1d4b0d8f7bf0f5c7e5a6126e2fb370b871d9 Mon Sep 17 00:00:00 2001
From: Eunbin <qpmz1212@naver.com>
Date: Wed, 4 Nov 2020 19:53:14 +0900
Subject: [PATCH 04/11] =?UTF-8?q?[feat]=20textarea=20atom=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20view=20=EA=B5=AC=ED=98=84=20-=20t?=
 =?UTF-8?q?extarea=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20view=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20-=20story=20test=20code=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20issue=20number:=20#76?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../atoms/TextArea/TextArea.stories.tsx          | 13 +++++++++++++
 .../src/components/atoms/TextArea/TextArea.tsx   | 16 ++++++++++++++++
 client/src/components/atoms/TextArea/index.ts    |  1 +
 3 files changed, 30 insertions(+)
 create mode 100644 client/src/components/atoms/TextArea/TextArea.stories.tsx
 create mode 100644 client/src/components/atoms/TextArea/TextArea.tsx
 create mode 100644 client/src/components/atoms/TextArea/index.ts

diff --git a/client/src/components/atoms/TextArea/TextArea.stories.tsx b/client/src/components/atoms/TextArea/TextArea.stories.tsx
new file mode 100644
index 0000000..8d16ccd
--- /dev/null
+++ b/client/src/components/atoms/TextArea/TextArea.stories.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import Textarea from './TextArea';
+
+export default {
+  title: 'Components/Textarea',
+  component: Textarea,
+};
+
+export const Default = () => {
+  const placeholder = text('placeholder', 'Leave a comment');
+  return <Textarea placeHolder={placeholder} />;
+};
diff --git a/client/src/components/atoms/TextArea/TextArea.tsx b/client/src/components/atoms/TextArea/TextArea.tsx
new file mode 100644
index 0000000..5b45984
--- /dev/null
+++ b/client/src/components/atoms/TextArea/TextArea.tsx
@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledTextarea = styled.textarea`
+  ${({ theme }) => theme.commonStyle.input}
+`;
+
+interface Props {
+  placeHolder?: string;
+}
+
+const Textarea: FunctionComponent<Props> = ({ placeHolder }) => (
+  <StyledTextarea placeholder={placeHolder} />
+);
+
+export default Textarea;
diff --git a/client/src/components/atoms/TextArea/index.ts b/client/src/components/atoms/TextArea/index.ts
new file mode 100644
index 0000000..4ab9a0a
--- /dev/null
+++ b/client/src/components/atoms/TextArea/index.ts
@@ -0,0 +1 @@
+export { default } from './TextArea';

From 6e858cd8ecc1058c672a0b772e8b0e01b61cdb04 Mon Sep 17 00:00:00 2001
From: Eunbin <qpmz1212@naver.com>
Date: Wed, 4 Nov 2020 19:54:03 +0900
Subject: [PATCH 05/11] =?UTF-8?q?[feat]=20label=20tag=20atom=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20view=20=EA=B5=AC=ED=98=84=20-=20l?=
 =?UTF-8?q?abel=20tag=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20view=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20-=20story=20test=20code=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20issue=20number:=20#72?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../atoms/LabelTag/LabelTag.stories.tsx       | 15 ++++++++++++
 .../components/atoms/LabelTag/LabelTag.tsx    | 23 +++++++++++++++++++
 client/src/components/atoms/LabelTag/index.ts |  1 +
 3 files changed, 39 insertions(+)
 create mode 100644 client/src/components/atoms/LabelTag/LabelTag.stories.tsx
 create mode 100644 client/src/components/atoms/LabelTag/LabelTag.tsx
 create mode 100644 client/src/components/atoms/LabelTag/index.ts

diff --git a/client/src/components/atoms/LabelTag/LabelTag.stories.tsx b/client/src/components/atoms/LabelTag/LabelTag.stories.tsx
new file mode 100644
index 0000000..75d7955
--- /dev/null
+++ b/client/src/components/atoms/LabelTag/LabelTag.stories.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import LabelTag from './LabelTag';
+
+export default {
+  title: 'Components/LabelTag',
+  component: LabelTag,
+};
+
+export const Default = () => {
+  const value = text('tag text', 'Bug');
+  const bgColor = text('background color', '#a30a0a');
+
+  return <LabelTag text={value} bgColor={bgColor} />;
+};
diff --git a/client/src/components/atoms/LabelTag/LabelTag.tsx b/client/src/components/atoms/LabelTag/LabelTag.tsx
new file mode 100644
index 0000000..14e1987
--- /dev/null
+++ b/client/src/components/atoms/LabelTag/LabelTag.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledLabelTag = styled.span`
+  display: inline-block;
+  padding: 0 7px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 1rem;
+  color: #000;
+  line-height: 18px;
+`;
+
+interface Props {
+  text: string;
+  bgColor: string;
+}
+
+const LabelTag: FunctionComponent<Props> = ({ text, bgColor }) => (
+  <StyledLabelTag style={{ backgroundColor: bgColor }}>{text}</StyledLabelTag>
+);
+
+export default LabelTag;
diff --git a/client/src/components/atoms/LabelTag/index.ts b/client/src/components/atoms/LabelTag/index.ts
new file mode 100644
index 0000000..e0c8014
--- /dev/null
+++ b/client/src/components/atoms/LabelTag/index.ts
@@ -0,0 +1 @@
+export { default } from './LabelTag';

From 492e8f113d687f09871dcc4a9f558046bc997bf3 Mon Sep 17 00:00:00 2001
From: Eunbin <qpmz1212@naver.com>
Date: Wed, 4 Nov 2020 19:54:58 +0900
Subject: [PATCH 06/11] =?UTF-8?q?[feat]=20filter=20item=EC=9D=98=20title?=
 =?UTF-8?q?=20=EB=B6=80=EB=B6=84=20atom=20component=20view=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20-=20filter=20item=20title=20view=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/atoms/filterItem/Title/Title.tsx  | 16 ++++++++++++++++
 .../components/atoms/filterItem/Title/index.ts   |  1 +
 2 files changed, 17 insertions(+)
 create mode 100644 client/src/components/atoms/filterItem/Title/Title.tsx
 create mode 100644 client/src/components/atoms/filterItem/Title/index.ts

diff --git a/client/src/components/atoms/filterItem/Title/Title.tsx b/client/src/components/atoms/filterItem/Title/Title.tsx
new file mode 100644
index 0000000..27d59d2
--- /dev/null
+++ b/client/src/components/atoms/filterItem/Title/Title.tsx
@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledTitle = styled.strong`
+  font-size: 0.5rem;
+`;
+
+interface Props {
+  text: string;
+}
+
+const Title: FunctionComponent<Props> = ({ text }) => (
+  <StyledTitle>{text}</StyledTitle>
+);
+
+export default Title;
diff --git a/client/src/components/atoms/filterItem/Title/index.ts b/client/src/components/atoms/filterItem/Title/index.ts
new file mode 100644
index 0000000..eaa93a3
--- /dev/null
+++ b/client/src/components/atoms/filterItem/Title/index.ts
@@ -0,0 +1 @@
+export { default } from './Title';

From e83c0049c134703b118a537b3082eff3bfae45d4 Mon Sep 17 00:00:00 2001
From: Eunbin <qpmz1212@naver.com>
Date: Wed, 4 Nov 2020 19:55:22 +0900
Subject: [PATCH 07/11] =?UTF-8?q?[feat]=20filter=20item=EC=9D=98=20descrip?=
 =?UTF-8?q?tion=20=EB=B6=80=EB=B6=84=20atom=20component=20view=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20-=20filter=20item=20description=20view=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../filterItem/Description/Description.tsx    | 19 +++++++++++++++++++
 .../atoms/filterItem/Description/index.ts     |  1 +
 2 files changed, 20 insertions(+)
 create mode 100644 client/src/components/atoms/filterItem/Description/Description.tsx
 create mode 100644 client/src/components/atoms/filterItem/Description/index.ts

diff --git a/client/src/components/atoms/filterItem/Description/Description.tsx b/client/src/components/atoms/filterItem/Description/Description.tsx
new file mode 100644
index 0000000..a215ae3
--- /dev/null
+++ b/client/src/components/atoms/filterItem/Description/Description.tsx
@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledDescription = styled.div`
+  font-size: 0.4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${({ theme }) => theme.palette.SECONDARY};
+`;
+
+interface Props {
+  text: string;
+}
+
+const Description: FunctionComponent<Props> = ({ text }) => (
+  <StyledDescription>{text}</StyledDescription>
+);
+
+export default Description;
diff --git a/client/src/components/atoms/filterItem/Description/index.ts b/client/src/components/atoms/filterItem/Description/index.ts
new file mode 100644
index 0000000..b963020
--- /dev/null
+++ b/client/src/components/atoms/filterItem/Description/index.ts
@@ -0,0 +1 @@
+export { default } from './Description';

From 91db2a2b91f4ba81c3b6cbd9f0d4bfca89abb06f Mon Sep 17 00:00:00 2001
From: Eunbin <qpmz1212@naver.com>
Date: Wed, 4 Nov 2020 19:55:46 +0900
Subject: [PATCH 08/11] =?UTF-8?q?[feat]=20filter=20item=EC=9D=98=20color?=
 =?UTF-8?q?=20swatch=20=EB=B6=80=EB=B6=84=20atom=20component=20view=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20-=20filter=20item=20color=20swatch=20view?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../filterItem/ColorSwatch/ColorSwatch.tsx    | 19 +++++++++++++++++++
 .../atoms/filterItem/ColorSwatch/index.ts     |  1 +
 2 files changed, 20 insertions(+)
 create mode 100644 client/src/components/atoms/filterItem/ColorSwatch/ColorSwatch.tsx
 create mode 100644 client/src/components/atoms/filterItem/ColorSwatch/index.ts

diff --git a/client/src/components/atoms/filterItem/ColorSwatch/ColorSwatch.tsx b/client/src/components/atoms/filterItem/ColorSwatch/ColorSwatch.tsx
new file mode 100644
index 0000000..8c09e0f
--- /dev/null
+++ b/client/src/components/atoms/filterItem/ColorSwatch/ColorSwatch.tsx
@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+interface Props {
+  bgColor: string;
+}
+
+const StyledColorSwatch = styled.div<Props>`
+  border-radius: 2rem;
+  width: 1rem;
+  height: 1rem;
+  background-color: ${({ bgColor }) => bgColor};
+`;
+
+const ColorSwatch: FunctionComponent<Props> = ({ bgColor }) => (
+  <StyledColorSwatch bgColor={bgColor} />
+);
+
+export default ColorSwatch;
diff --git a/client/src/components/atoms/filterItem/ColorSwatch/index.ts b/client/src/components/atoms/filterItem/ColorSwatch/index.ts
new file mode 100644
index 0000000..c017ff8
--- /dev/null
+++ b/client/src/components/atoms/filterItem/ColorSwatch/index.ts
@@ -0,0 +1 @@
+export { default } from './ColorSwatch';

From 381f67a80605ab390de35b3eee82b4c871c08060 Mon Sep 17 00:00:00 2001
From: Eunbin <qpmz1212@naver.com>
Date: Wed, 4 Nov 2020 19:56:58 +0900
Subject: [PATCH 09/11] =?UTF-8?q?[feat]=20filter=20item=20=EC=A4=91=20labe?=
 =?UTF-8?q?l=20molecule=20component=20view=20=EA=B5=AC=ED=98=84=20-=20filt?=
 =?UTF-8?q?er=20item=20=EC=A4=91=20label=20=EB=B6=80=EB=B6=84=20atom=20?=
 =?UTF-8?q?=EC=A1=B0=ED=95=A9=ED=95=98=EC=97=AC=20=EA=B5=AC=ED=98=84=20-?=
 =?UTF-8?q?=20storybook=20test=20code=20=EC=9E=91=EC=84=B1=20issue=20numbe?=
 =?UTF-8?q?r:=20#74?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FilterItemLabel.stories.tsx               | 22 ++++++++++++++++
 .../FilterItemLabel/FilterItemLabel.tsx       | 26 +++++++++++++++++++
 .../filterItem/FilterItemLabel/index.ts       |  1 +
 3 files changed, 49 insertions(+)
 create mode 100644 client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.stories.tsx
 create mode 100644 client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.tsx
 create mode 100644 client/src/components/molecules/filterItem/FilterItemLabel/index.ts

diff --git a/client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.stories.tsx b/client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.stories.tsx
new file mode 100644
index 0000000..e45d57b
--- /dev/null
+++ b/client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.stories.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import FilterItemLabel from './FilterItemLabel';
+
+export default {
+  title: 'Molecules/FilterItemLabel',
+  component: FilterItemLabel,
+};
+
+export const Default = () => {
+  const swatchColor = text('swatch color', '#eee');
+  const title = text('title', 'bug');
+  const description = text('description', "Something isn't working");
+
+  return (
+    <FilterItemLabel
+      swatchColor={swatchColor}
+      title={title}
+      description={description}
+    />
+  );
+};
diff --git a/client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.tsx b/client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.tsx
new file mode 100644
index 0000000..fcd4f94
--- /dev/null
+++ b/client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.tsx
@@ -0,0 +1,26 @@
+import React, { FunctionComponent } from 'react';
+import ColorSwatch from '@components/atoms/filterItem/ColorSwatch';
+import Description from '@/components/atoms/filterItem/Description';
+import Title from '@/components/atoms/filterItem/Title';
+
+interface Props {
+  swatchColor: string;
+  title: string;
+  description?: string;
+}
+
+const FilterItemLabel: FunctionComponent<Props> = ({
+  swatchColor,
+  title,
+  description,
+}) => (
+  <>
+    <ColorSwatch bgColor={swatchColor} />
+    <div>
+      <Title text={title} />
+      <Description text={description} />
+    </div>
+  </>
+);
+
+export default FilterItemLabel;
diff --git a/client/src/components/molecules/filterItem/FilterItemLabel/index.ts b/client/src/components/molecules/filterItem/FilterItemLabel/index.ts
new file mode 100644
index 0000000..95fff0b
--- /dev/null
+++ b/client/src/components/molecules/filterItem/FilterItemLabel/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterItemLabel';

From 5a32ba53915416fb8666fc34fe8e996302d3dc5a Mon Sep 17 00:00:00 2001
From: Eunbin <qpmz1212@naver.com>
Date: Wed, 4 Nov 2020 19:59:06 +0900
Subject: [PATCH 10/11] =?UTF-8?q?[feat]=20input=20common=20style=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20-=20input=20element=20style=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=20=EB=B6=80=EB=B6=84=20=EA=B0=99=EC=9D=B4=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?common=20style=20=EB=A1=9C=20=EB=94=B0=EB=A1=9C=20=EC=84=A0?=
 =?UTF-8?q?=EC=96=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/themes/index.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/client/src/themes/index.ts b/client/src/themes/index.ts
index 7a89c00..9d0fa97 100644
--- a/client/src/themes/index.ts
+++ b/client/src/themes/index.ts
@@ -14,6 +14,18 @@ const theme = {
     LIGHT_BLUE01: '#f1f8ff',
     LIGHT_BLUE02: 'rgba(3,102,214,0.2)',
   },
+  commonStyle: {
+    input: `
+    background-color: #fafbfc;
+    border-radius: .5rem;
+    border: 1px solid #f6f8fa;
+    &:focus{
+      background-color: #ffffff;
+      border-color: #0366d6;
+      box-shawdow: 0 0 0 3px rgba(3, 102, 214, 0.3);
+    }
+    `,
+  },
 };
 
 export default theme;

From 90141991919121c91e8985969e5ed8d0c53fc0d9 Mon Sep 17 00:00:00 2001
From: Eunbin <qpmz1212@naver.com>
Date: Wed, 4 Nov 2020 23:22:43 +0900
Subject: [PATCH 11/11] =?UTF-8?q?[refactor]=20=ED=8C=8C=EC=9D=BC=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20alias=20=EC=88=98=EC=A0=95=20-=20=EB=B6=88=ED=95=84?=
 =?UTF-8?q?=EC=9A=94=ED=95=9C=20=ED=8C=8C=EC=9D=BC=EA=B2=BD=EB=A1=9C=20ali?=
 =?UTF-8?q?as=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../molecules/filterItem/FilterItemLabel/FilterItemLabel.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.tsx b/client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.tsx
index fcd4f94..dc400c3 100644
--- a/client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.tsx
+++ b/client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import ColorSwatch from '@components/atoms/filterItem/ColorSwatch';
-import Description from '@/components/atoms/filterItem/Description';
-import Title from '@/components/atoms/filterItem/Title';
+import Description from '@components/atoms/filterItem/Description';
+import Title from '@components/atoms/filterItem/Title';
 
 interface Props {
   swatchColor: string;