From 536fcb6ed563511d074c6a2881f807968efb3e59 Mon Sep 17 00:00:00 2001
From: mango906 <minkb01@gmail.com>
Date: Fri, 11 Feb 2022 01:34:09 +0900
Subject: [PATCH 1/6] =?UTF-8?q?Feat:=20Textarea=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Textarea/Textarea.component.tsx    | 27 ++++++++
 .../common/Textarea/Textarea.stories.tsx      | 18 +++++
 .../common/Textarea/Textarea.styled.ts        | 65 +++++++++++++++++++
 3 files changed, 110 insertions(+)
 create mode 100644 src/components/common/Textarea/Textarea.component.tsx
 create mode 100644 src/components/common/Textarea/Textarea.stories.tsx
 create mode 100644 src/components/common/Textarea/Textarea.styled.ts

diff --git a/src/components/common/Textarea/Textarea.component.tsx b/src/components/common/Textarea/Textarea.component.tsx
new file mode 100644
index 00000000..09b84017
--- /dev/null
+++ b/src/components/common/Textarea/Textarea.component.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import * as Styled from './Textarea.styled';
+
+export interface TextareaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+  id: string;
+  label: string;
+  errorMessage?: string;
+}
+
+const Textarea = ({ id, required, label, errorMessage, ...restProps }: TextareaProps) => {
+  return (
+    <Styled.TextareaWrapper>
+      <Styled.TextareaLabel htmlFor={id}>
+        <span>{label}</span>
+        {required && <Styled.RequiredDot />}
+      </Styled.TextareaLabel>
+      <Styled.Textarea {...restProps} />
+      {errorMessage && <Styled.TextareaErrorMessage>{errorMessage}</Styled.TextareaErrorMessage>}
+    </Styled.TextareaWrapper>
+  );
+};
+
+export default Textarea;
+
+Textarea.defaultProps = {
+  errorMessage: '',
+};
diff --git a/src/components/common/Textarea/Textarea.stories.tsx b/src/components/common/Textarea/Textarea.stories.tsx
new file mode 100644
index 00000000..844d0ffb
--- /dev/null
+++ b/src/components/common/Textarea/Textarea.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Textarea, { TextareaProps } from './Textarea.component';
+
+export default {
+  title: 'Textarea',
+  component: Textarea,
+} as ComponentMeta<typeof Textarea>;
+
+const Template: ComponentStory<typeof Textarea> = (args: TextareaProps) => <Textarea {...args} />;
+
+export const textarea = Template.bind({});
+
+textarea.args = {
+  label: '지원서 내용입니다. 최소 200자 이내',
+  required: true,
+  placeholder: '내용을 입력해주세요',
+};
diff --git a/src/components/common/Textarea/Textarea.styled.ts b/src/components/common/Textarea/Textarea.styled.ts
new file mode 100644
index 00000000..be7ef01b
--- /dev/null
+++ b/src/components/common/Textarea/Textarea.styled.ts
@@ -0,0 +1,65 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const TextareaWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const TextareaLabel = styled.label`
+  ${({ theme }) => css`
+    ${theme.fonts.medium15}
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.6rem;
+    color: ${theme.colors.gray70};
+  `}
+`;
+
+export const RequiredDot = styled.span`
+  width: 0.6rem;
+  height: 0.6rem;
+  margin-left: 0.6rem;
+  background-color: #eb6963;
+  border-radius: 50%;
+`;
+
+export const Textarea = styled.textarea`
+  ${({ theme }) => css`
+    ${theme.fonts.regular15}
+
+    min-height: 20rem;
+    padding: 1.2rem 1.4rem;
+    background-color: ${theme.colors.white};
+    border: 1px solid ${theme.colors.gray30};
+    border-radius: 1.2rem;
+    outline: none;
+    resize: none;
+
+    &::placeholder {
+      color: ${theme.colors.gray50};
+    }
+
+    &:hover {
+      border: 0.1rem solid ${theme.colors.purple40};
+    }
+
+    &:focus {
+      border: 0.1rem solid ${theme.colors.purple70};
+    }
+
+    &:disabled {
+      background-color: ${theme.colors.gray5};
+      border: 0.1rem solid ${theme.colors.gray30};
+    }
+  `}
+`;
+
+export const TextareaErrorMessage = styled.span`
+  ${({ theme }) => css`
+    ${theme.fonts.regular15};
+
+    margin-top: 0.6rem;
+    color: ${theme.colors.gray60};
+  `}
+`;

From 9b2a1d0e4d9a3794ea2d190da2f8cbc1ebe35303 Mon Sep 17 00:00:00 2001
From: mango906 <minkb01@gmail.com>
Date: Fri, 11 Feb 2022 01:35:50 +0900
Subject: [PATCH 2/6] =?UTF-8?q?Feat:=20Input=EC=97=90=EB=8F=84=20placehold?=
 =?UTF-8?q?er=20=EC=83=89=EC=83=81=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Input/Input.styled.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/common/Input/Input.styled.ts b/src/components/common/Input/Input.styled.ts
index b69d9091..98614306 100644
--- a/src/components/common/Input/Input.styled.ts
+++ b/src/components/common/Input/Input.styled.ts
@@ -39,6 +39,10 @@ export const Input = styled.input<StyledInputProps>`
     border-radius: 0.9rem;
     outline: none;
 
+    &::placeholder {
+      color: ${theme.colors.gray50};
+    }
+
     &:hover {
       border: 0.1rem solid ${theme.colors.purple40};
     }

From 8ee9343a119dac7a74a6550e638d16abc268caf6 Mon Sep 17 00:00:00 2001
From: mango906 <minkb01@gmail.com>
Date: Fri, 11 Feb 2022 02:02:58 +0900
Subject: [PATCH 3/6] =?UTF-8?q?Feat:=20Textarea=20components=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20export=20=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 3478cc1d..f7bee9be 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -1 +1,2 @@
 export { default as Input } from './Input/Input.component';
+export { default as Textarea } from './Textarea/Textarea.component';

From 374ffafaafb489fca6c5231e9f409c0cdaab5350 Mon Sep 17 00:00:00 2001
From: mango906 <minkb01@gmail.com>
Date: Fri, 11 Feb 2022 19:13:23 +0900
Subject: [PATCH 4/6] =?UTF-8?q?Fix:=20=EB=AF=B9=EC=8A=A4=EC=9D=B8=20?=
 =?UTF-8?q?=EB=92=A4=EC=97=90=20=EC=84=B8=EB=AF=B8=EC=BD=9C=EB=A1=A0=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Textarea/Textarea.styled.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Textarea/Textarea.styled.ts b/src/components/common/Textarea/Textarea.styled.ts
index be7ef01b..a16fadd8 100644
--- a/src/components/common/Textarea/Textarea.styled.ts
+++ b/src/components/common/Textarea/Textarea.styled.ts
@@ -8,7 +8,7 @@ export const TextareaWrapper = styled.div`
 
 export const TextareaLabel = styled.label`
   ${({ theme }) => css`
-    ${theme.fonts.medium15}
+    ${theme.fonts.medium15};
     display: flex;
     align-items: center;
     margin-bottom: 0.6rem;
@@ -26,7 +26,7 @@ export const RequiredDot = styled.span`
 
 export const Textarea = styled.textarea`
   ${({ theme }) => css`
-    ${theme.fonts.regular15}
+    ${theme.fonts.regular15};
 
     min-height: 20rem;
     padding: 1.2rem 1.4rem;

From 44f2722e5425016a5584fd938c830c63f8d8ba3e Mon Sep 17 00:00:00 2001
From: mango906 <minkb01@gmail.com>
Date: Sat, 12 Feb 2022 16:57:36 +0900
Subject: [PATCH 5/6] =?UTF-8?q?Fix:=20px=EB=8B=A8=EC=9C=84=20rem=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Textarea/Textarea.styled.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/Textarea/Textarea.styled.ts b/src/components/common/Textarea/Textarea.styled.ts
index a16fadd8..e3f225a2 100644
--- a/src/components/common/Textarea/Textarea.styled.ts
+++ b/src/components/common/Textarea/Textarea.styled.ts
@@ -31,7 +31,7 @@ export const Textarea = styled.textarea`
     min-height: 20rem;
     padding: 1.2rem 1.4rem;
     background-color: ${theme.colors.white};
-    border: 1px solid ${theme.colors.gray30};
+    border: 0.1rem solid ${theme.colors.gray30};
     border-radius: 1.2rem;
     outline: none;
     resize: none;

From 87c49408e5b445c90db5271dbe831c96731c0380 Mon Sep 17 00:00:00 2001
From: mango906 <minkb01@gmail.com>
Date: Sat, 12 Feb 2022 16:58:10 +0900
Subject: [PATCH 6/6] =?UTF-8?q?Fix:=20defaultProps=EB=8C=80=EC=8B=A0=20def?=
 =?UTF-8?q?ault=20parameter=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Textarea/Textarea.component.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/common/Textarea/Textarea.component.tsx b/src/components/common/Textarea/Textarea.component.tsx
index 09b84017..3a97e6fe 100644
--- a/src/components/common/Textarea/Textarea.component.tsx
+++ b/src/components/common/Textarea/Textarea.component.tsx
@@ -7,7 +7,7 @@ export interface TextareaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
   errorMessage?: string;
 }
 
-const Textarea = ({ id, required, label, errorMessage, ...restProps }: TextareaProps) => {
+const Textarea = ({ id, required, label, errorMessage = '', ...restProps }: TextareaProps) => {
   return (
     <Styled.TextareaWrapper>
       <Styled.TextareaLabel htmlFor={id}>
@@ -21,7 +21,3 @@ const Textarea = ({ id, required, label, errorMessage, ...restProps }: TextareaP
 };
 
 export default Textarea;
-
-Textarea.defaultProps = {
-  errorMessage: '',
-};