feat: Textarea 컴포넌트 구현

src/components/Textarea/Textarea.mdx

@@ -0,0 +1,119 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as TextareaStories from './Textarea.stories';
+import { Textarea } from './Textarea';
+import React from 'react';
+
+<Meta of={TextareaStories} />
+
+# Textarea
+
+사용자가 텍스트를 입력하는 필드로, 여러 줄의 텍스트 입력이 필요한 경우 사용됩니다. 다양한 상태와 속성을 지원하여 사용자 경험을 향상시킬 수 있습니다.
+
+<Canvas of={TextareaStories.Default} />
+<Controls />
+
+<br />
+<br />
+
+## 사용법
+
+Textarea의 기본 사용법입니다.
+
+필수 프로퍼티인 `width`와 `height`를 사용하여 Textarea의 크기를 설정해주세요.
+
+```tsx
+import { Textarea } from '@yourssu/design-system-react';
+```
+
+```tsx
+<Textarea width="343px" height="187px" />
+```
+
+이외의 프로퍼티들은 하단의 예시에서 확인할 수 있습니다.
+
+<br />
+<br />
+
+## 예시
+
+### placeholder
+
+Textarea에 표시되는 짧은 안내 문구로, 사용자가 입력해야 할 내용의 예시를 보여줍니다.
+
+```tsx
+<Textarea width="343px" height="187px" placeholder="Enter text here..." />
+```
+
+<Canvas of={TextareaStories.Placeholder} withSource="none" />
+
+<br />
+<br />
+
+### helperText
+
+Textarea에 사용자가 올바르게 입력할 수 있도록 돕는 텍스트입니다.
+
+```tsx
+<Textarea
+  width="343px"
+  height="187px"
+  helperText="helperText입니다."
+  placeholder="Enter text here..."
+/>
+```
+
+<Canvas of={TextareaStories.HelperText} withSource="none" />
+
+<br />
+<br />
+
+### maxLength
+
+Textarea에 사용자가 입력할 수 있는 최대 글자 수를 제한합니다.
+
+```tsx
+<Textarea width="343px" height="187px" maxLength={50} placeholder="Max 50 characters" />
+```
+
+<Canvas of={TextareaStories.MaxLength} withSource="none" />
+
+<br />
+<br />
+
+### disabled
+
+Textarea에 어떠한 입력을 할 수 없도록 막습니다.
+
+```tsx
+<Textarea
+  width="343px"
+  height="187px"
+  disabled={true}
+  helperText="Text Inputting"
+  placeholder="This field is disabled"
+/>
+```
+
+<Canvas of={TextareaStories.Disabled} withSource="none" />
+
+<br />
+<br />
+
+### error
+
+Textarea에 잘못된 값이 입력되었을 때 사용자에게 오류 상태를 표시하는 데 사용됩니다.
+
+```tsx
+<Textarea
+  width="343px"
+  height="187px"
+  error={true}
+  helperText="Text Inputting"
+  placeholder="There is an error"
+/>
+```
+
+<Canvas of={TextareaStories.Error} withSource="none" />
+
+<br />
+<br />

src/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,119 @@
+// import { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Textarea } from './Textarea';
+import { TextareaProps } from './Textarea.type';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  argTypes: {
+    width: {
+      control: 'text',
+      description: 'Textarea의 가로 길이',
+    },
+    height: {
+      control: 'text',
+      description: 'Textarea의 세로 길이',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Textarea의 placeholder 텍스트',
+    },
+    maxLength: {
+      control: 'number',
+      description: 'Textarea의 최대 입력 가능 글자 수',
+    },
+    helperText: {
+      control: 'text',
+      description: 'Textarea에 올바르게 입력할 수 있도록 돕는 텍스트',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Textarea의 비활성화 여부',
+    },
+    error: {
+      control: 'boolean',
+      description: 'Textarea의 에러 여부',
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  args: {
+    width: '343px',
+    height: '187px',
+    placeholder: 'Enter text here...',
+    helperText: 'Text Inputting',
+  },
+};
+
+export const Placeholder: Story = {
+  args: {
+    width: '343px',
+    height: '187px',
+    placeholder: 'Enter text here...',
+  },
+};
+
+export const HelperText: Story = {
+  args: {
+    width: '343px',
+    height: '187px',
+    placeholder: 'Enter text here...',
+    helperText: 'helperText입니다.',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    width: '343px',
+    height: '187px',
+    placeholder: 'This field is disabled',
+    helperText: 'Text Inputting',
+    disabled: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    width: '343px',
+    height: '187px',
+    error: true,
+    placeholder: 'There is an error',
+    helperText: 'Text Inputting',
+  },
+};
+
+const MaxLengthTest = ({
+  width = '343px',
+  height = '187px',
+  maxLength = 50,
+  placeholder = 'Max 50 characters',
+  helperText = '',
+  disabled = false,
+  error = false,
+}: TextareaProps) => {
+  return (
+    <Textarea
+      width={width}
+      height={height}
+      maxLength={maxLength}
+      placeholder={placeholder}
+      helperText={helperText}
+      disabled={disabled}
+      error={error}
+    />
+  );
+};
+
+export const MaxLength: Story = {
+  render: MaxLengthTest,
+};

src/components/Textarea/Textarea.style.ts

@@ -0,0 +1,56 @@
+import { styled } from 'styled-components';
+
+import { TextareaProps } from './Textarea.type';
+
+interface StyledTextareaProps {
+  $width?: TextareaProps['width'];
+  $height?: TextareaProps['height'];
+  $error?: TextareaProps['error'];
+}
+
+export const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+export const StyledTextarea = styled.textarea<StyledTextareaProps>`
+  width: ${({ $width }) => $width};
+  height: ${({ $height }) => $height};
+  padding: 16px;
+  ${({ theme }) => theme.typo.B3_Rg_14}
+  resize: none;
+
+  box-sizing: border-box;
+  border: ${({ theme, $error }) =>
+    $error ? `1px solid ${theme.semantic.color.textStatusNegative}` : 'none'};
+  border-radius: ${({ theme }) => theme.semantic.radius.m}px;
+  background-color: ${({ theme }) => theme.semantic.color.bgBasicLight};
+  color: ${({ theme }) => theme.semantic.color.textBasicPrimary};
+
+  caret-color: ${({ theme, $error }) =>
+    $error ? theme.semantic.color.textStatusNegative : theme.semantic.color.lineStatusPositive};
+
+  outline-color: ${({ theme }) => theme.semantic.color.lineStatusPositive};
+  outline-width: 1px;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.semantic.color.textBasicTertiary};
+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.semantic.color.bgBasicLight};
+    cursor: not-allowed;
+
+    &::placeholder {
+      color: ${({ theme }) => theme.semantic.color.textBasicDisabled};
+    }
+  }
+`;
+
+export const StyledHelperText = styled.div<StyledTextareaProps>`
+  margin-left: 4px;
+  ${({ theme }) => theme.typo.C2_Rg_12}
+  color: ${({ theme, $error }) =>
+    $error ? theme.semantic.color.textStatusNegative : theme.semantic.color.textBasicTertiary};
+`;

src/components/Textarea/Textarea.tsx

@@ -0,0 +1,44 @@
+import { forwardRef, useState } from 'react';
+
+import { StyledTextarea, StyledContainer, StyledHelperText } from './Textarea.style';
+import { TextareaProps } from './Textarea.type';
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    { width, height, maxLength, helperText, placeholder, disabled, error, onValueChange, ...props },
+    ref
+  ) => {
+    const [value, setValue] = useState('');
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      if (maxLength && newValue.length > maxLength) {
+        return;
+      }
+      setValue(newValue);
+      onValueChange?.(newValue);
+    };
+
+    return (
+      <StyledContainer>
+        <StyledTextarea
+          ref={ref}
+          $width={width}
+          $height={height}
+          value={value}
+          onChange={handleChange}
+          maxLength={maxLength}
+          placeholder={placeholder}
+          disabled={disabled}
+          $error={error}
+          {...props}
+        />
+        <StyledHelperText $error={error}>
+          {helperText && helperText} {maxLength && `(${value.length}/${maxLength})`}
+        </StyledHelperText>
+      </StyledContainer>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';

src/components/Textarea/Textarea.type.ts

@@ -0,0 +1,8 @@
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  width: string;
+  height: string;
+  helperText?: string;
+  error?: boolean;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}

src/components/Textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea.type';

src/components/index.ts

@@ -31,7 +31,6 @@ export type { TabsProps, TabListProps, TabProps, TabPanelProps } from './Tabs';
 export { Fab } from './Fab';
 export type { FabHierarchy, FabProps, FabSize } from './Fab';
 
-
 export { Pagination } from './Pagination';
 export type { PaginationProps } from './Pagination';
 
@@ -42,4 +41,7 @@ export type {
   RadioGroupSizeType,
   RadioGroupOrientationType,
   RadioGroupValueChangeEvent,
-} from './RadioGroup';
+} from './RadioGroup';
+
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';