Textarea 컴포넌트 추가

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};
     }

src/components/common/Textarea/Textarea.component.tsx

@@ -0,0 +1,23 @@
+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;

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: '내용을 입력해주세요',
+};

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: 0.1rem 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};
+  `}
+`;

src/components/common/index.ts

@@ -1,4 +1,5 @@
 export { default as Input } from './Input/Input.component';
+export { default as Textarea } from './Textarea/Textarea.component';
 export { default as BackButton } from './BackButton/BackButton.component';
 export { default as Button } from './Button/Button.component';
 export { default as Checkbox } from './Checkbox/Checkbox.component';