From afb1018ba013b66bce471d1071534e2241c38bc7 Mon Sep 17 00:00:00 2001
From: seocylucky <chaeyeon2285@naver.com>
Date: Wed, 21 Aug 2024 17:12:34 +0900
Subject: [PATCH 01/16] =?UTF-8?q?feat:=20Textarea=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#146)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Textarea/Textarea.mdx         | 119 +++++++++++++++++++
 src/components/Textarea/Textarea.stories.tsx | 119 +++++++++++++++++++
 src/components/Textarea/Textarea.style.ts    |  56 +++++++++
 src/components/Textarea/Textarea.tsx         |  46 +++++++
 src/components/Textarea/Textarea.type.ts     |  11 ++
 src/components/Textarea/index.ts             |   2 +
 src/components/index.ts                      |  15 +++
 7 files changed, 368 insertions(+)
 create mode 100644 src/components/Textarea/Textarea.mdx
 create mode 100644 src/components/Textarea/Textarea.stories.tsx
 create mode 100644 src/components/Textarea/Textarea.style.ts
 create mode 100644 src/components/Textarea/Textarea.tsx
 create mode 100644 src/components/Textarea/Textarea.type.ts
 create mode 100644 src/components/Textarea/index.ts

diff --git a/src/components/Textarea/Textarea.mdx b/src/components/Textarea/Textarea.mdx
new file mode 100644
index 0000000..b5a7ff8
--- /dev/null
+++ b/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 />
diff --git a/src/components/Textarea/Textarea.stories.tsx b/src/components/Textarea/Textarea.stories.tsx
new file mode 100644
index 0000000..0cd1c4c
--- /dev/null
+++ b/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,
+};
diff --git a/src/components/Textarea/Textarea.style.ts b/src/components/Textarea/Textarea.style.ts
new file mode 100644
index 0000000..7975806
--- /dev/null
+++ b/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<StyledTextareaProps>`
+  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.textBasicTertiary};
+
+  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};
+`;
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
new file mode 100644
index 0000000..842be11
--- /dev/null
+++ b/src/components/Textarea/Textarea.tsx
@@ -0,0 +1,46 @@
+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 [currentLength, setCurrentLength] = useState(value?.length || 0);
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      if (maxLength && e.target.value.length > maxLength) {
+        return;
+      }
+      setValue(newValue);
+      setCurrentLength(newValue.length);
+      onValueChange?.(newValue);
+    };
+
+    return (
+      <StyledContainer $width={width}>
+        <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 && `(${currentLength}/${maxLength})`}
+        </StyledHelperText>
+      </StyledContainer>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
diff --git a/src/components/Textarea/Textarea.type.ts b/src/components/Textarea/Textarea.type.ts
new file mode 100644
index 0000000..84c0895
--- /dev/null
+++ b/src/components/Textarea/Textarea.type.ts
@@ -0,0 +1,11 @@
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  width: string;
+  height: string;
+  maxLength?: number;
+  helperText?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: boolean;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
diff --git a/src/components/Textarea/index.ts b/src/components/Textarea/index.ts
new file mode 100644
index 0000000..72dced2
--- /dev/null
+++ b/src/components/Textarea/index.ts
@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea.type';
diff --git a/src/components/index.ts b/src/components/index.ts
index b0a8a58..40ae349 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -27,3 +27,18 @@ export type {
 
 export { Fab } from './Fab';
 export type { FabHierarchy, FabProps, FabSize } from './Fab';
+
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+
+export { useRadioGroup } from './RadioGroup';
+export type {
+  RadioGroupProps,
+  RadioGroupItemProps,
+  RadioGroupSizeType,
+  RadioGroupOrientationType,
+  RadioGroupValueChangeEvent,
+} from './RadioGroup';
+
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';

From 39342f1f0d41391dd5c844cb07b9bc93bc8c64f8 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Wed, 21 Aug 2024 17:15:16 +0900
Subject: [PATCH 02/16] =?UTF-8?q?Revert=20"feat:=20Textarea=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#146)"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit afb1018ba013b66bce471d1071534e2241c38bc7.
---
 src/components/Textarea/Textarea.mdx         | 119 -------------------
 src/components/Textarea/Textarea.stories.tsx | 119 -------------------
 src/components/Textarea/Textarea.style.ts    |  56 ---------
 src/components/Textarea/Textarea.tsx         |  46 -------
 src/components/Textarea/Textarea.type.ts     |  11 --
 src/components/Textarea/index.ts             |   2 -
 src/components/index.ts                      |  15 ---
 7 files changed, 368 deletions(-)
 delete mode 100644 src/components/Textarea/Textarea.mdx
 delete mode 100644 src/components/Textarea/Textarea.stories.tsx
 delete mode 100644 src/components/Textarea/Textarea.style.ts
 delete mode 100644 src/components/Textarea/Textarea.tsx
 delete mode 100644 src/components/Textarea/Textarea.type.ts
 delete mode 100644 src/components/Textarea/index.ts

diff --git a/src/components/Textarea/Textarea.mdx b/src/components/Textarea/Textarea.mdx
deleted file mode 100644
index b5a7ff8..0000000
--- a/src/components/Textarea/Textarea.mdx
+++ /dev/null
@@ -1,119 +0,0 @@
-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 />
diff --git a/src/components/Textarea/Textarea.stories.tsx b/src/components/Textarea/Textarea.stories.tsx
deleted file mode 100644
index 0cd1c4c..0000000
--- a/src/components/Textarea/Textarea.stories.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-// 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,
-};
diff --git a/src/components/Textarea/Textarea.style.ts b/src/components/Textarea/Textarea.style.ts
deleted file mode 100644
index 7975806..0000000
--- a/src/components/Textarea/Textarea.style.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-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<StyledTextareaProps>`
-  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.textBasicTertiary};
-
-  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};
-`;
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
deleted file mode 100644
index 842be11..0000000
--- a/src/components/Textarea/Textarea.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-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 [currentLength, setCurrentLength] = useState(value?.length || 0);
-
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const newValue = e.target.value;
-      if (maxLength && e.target.value.length > maxLength) {
-        return;
-      }
-      setValue(newValue);
-      setCurrentLength(newValue.length);
-      onValueChange?.(newValue);
-    };
-
-    return (
-      <StyledContainer $width={width}>
-        <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 && `(${currentLength}/${maxLength})`}
-        </StyledHelperText>
-      </StyledContainer>
-    );
-  }
-);
-
-Textarea.displayName = 'Textarea';
diff --git a/src/components/Textarea/Textarea.type.ts b/src/components/Textarea/Textarea.type.ts
deleted file mode 100644
index 84c0895..0000000
--- a/src/components/Textarea/Textarea.type.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  width: string;
-  height: string;
-  maxLength?: number;
-  helperText?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  error?: boolean;
-  value?: string;
-  onValueChange?: (value: string) => void;
-}
diff --git a/src/components/Textarea/index.ts b/src/components/Textarea/index.ts
deleted file mode 100644
index 72dced2..0000000
--- a/src/components/Textarea/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Textarea } from './Textarea';
-export type { TextareaProps } from './Textarea.type';
diff --git a/src/components/index.ts b/src/components/index.ts
index 40ae349..b0a8a58 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -27,18 +27,3 @@ export type {
 
 export { Fab } from './Fab';
 export type { FabHierarchy, FabProps, FabSize } from './Fab';
-
-export { Pagination } from './Pagination';
-export type { PaginationProps } from './Pagination';
-
-export { useRadioGroup } from './RadioGroup';
-export type {
-  RadioGroupProps,
-  RadioGroupItemProps,
-  RadioGroupSizeType,
-  RadioGroupOrientationType,
-  RadioGroupValueChangeEvent,
-} from './RadioGroup';
-
-export { Textarea } from './Textarea';
-export type { TextareaProps } from './Textarea';

From 9346d0c43ceed9c9d3597bfc09cb59c52926ddf4 Mon Sep 17 00:00:00 2001
From: seocylucky <chaeyeon2285@naver.com>
Date: Wed, 21 Aug 2024 17:17:58 +0900
Subject: [PATCH 03/16] =?UTF-8?q?feat:=20Textarea=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#146)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Textarea/Textarea.mdx         | 119 +++++++++++++++++++
 src/components/Textarea/Textarea.stories.tsx | 119 +++++++++++++++++++
 src/components/Textarea/Textarea.style.ts    |  56 +++++++++
 src/components/Textarea/Textarea.tsx         |  46 +++++++
 src/components/Textarea/Textarea.type.ts     |  11 ++
 src/components/Textarea/index.ts             |   2 +
 src/components/index.ts                      |  14 +--
 7 files changed, 355 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Textarea/Textarea.mdx
 create mode 100644 src/components/Textarea/Textarea.stories.tsx
 create mode 100644 src/components/Textarea/Textarea.style.ts
 create mode 100644 src/components/Textarea/Textarea.tsx
 create mode 100644 src/components/Textarea/Textarea.type.ts
 create mode 100644 src/components/Textarea/index.ts

diff --git a/src/components/Textarea/Textarea.mdx b/src/components/Textarea/Textarea.mdx
new file mode 100644
index 0000000..b5a7ff8
--- /dev/null
+++ b/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 />
diff --git a/src/components/Textarea/Textarea.stories.tsx b/src/components/Textarea/Textarea.stories.tsx
new file mode 100644
index 0000000..0cd1c4c
--- /dev/null
+++ b/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,
+};
diff --git a/src/components/Textarea/Textarea.style.ts b/src/components/Textarea/Textarea.style.ts
new file mode 100644
index 0000000..7975806
--- /dev/null
+++ b/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<StyledTextareaProps>`
+  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.textBasicTertiary};
+
+  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};
+`;
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
new file mode 100644
index 0000000..842be11
--- /dev/null
+++ b/src/components/Textarea/Textarea.tsx
@@ -0,0 +1,46 @@
+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 [currentLength, setCurrentLength] = useState(value?.length || 0);
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      if (maxLength && e.target.value.length > maxLength) {
+        return;
+      }
+      setValue(newValue);
+      setCurrentLength(newValue.length);
+      onValueChange?.(newValue);
+    };
+
+    return (
+      <StyledContainer $width={width}>
+        <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 && `(${currentLength}/${maxLength})`}
+        </StyledHelperText>
+      </StyledContainer>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
diff --git a/src/components/Textarea/Textarea.type.ts b/src/components/Textarea/Textarea.type.ts
new file mode 100644
index 0000000..84c0895
--- /dev/null
+++ b/src/components/Textarea/Textarea.type.ts
@@ -0,0 +1,11 @@
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  width: string;
+  height: string;
+  maxLength?: number;
+  helperText?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: boolean;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
diff --git a/src/components/Textarea/index.ts b/src/components/Textarea/index.ts
new file mode 100644
index 0000000..72dced2
--- /dev/null
+++ b/src/components/Textarea/index.ts
@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea.type';
diff --git a/src/components/index.ts b/src/components/index.ts
index f0556f5..c907005 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -31,15 +31,5 @@ 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';
-
-export { useRadioGroup } from './RadioGroup';
-export type {
-  RadioGroupProps,
-  RadioGroupItemProps,
-  RadioGroupSizeType,
-  RadioGroupOrientationType,
-  RadioGroupValueChangeEvent,
-} from './RadioGroup';
\ No newline at end of file
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';

From 360a374c72efdb93ba248414bc0b47727c784b06 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Wed, 21 Aug 2024 22:25:56 +0900
Subject: [PATCH 04/16] =?UTF-8?q?fix:=20=EC=82=AC=EB=9D=BC=EC=A0=B8?=
 =?UTF-8?q?=EB=B2=84=EB=A6=B0=20Pagination,=20useRadioGroup=20export=20?=
 =?UTF-8?q?=EC=82=B4=EB=A6=AC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/index.ts b/src/components/index.ts
index c907005..85d88b6 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -31,5 +31,17 @@ 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';
+
+export { useRadioGroup } from './RadioGroup';
+export type {
+  RadioGroupProps,
+  RadioGroupItemProps,
+  RadioGroupSizeType,
+  RadioGroupOrientationType,
+  RadioGroupValueChangeEvent,
+} from './RadioGroup';
+
 export { Textarea } from './Textarea';
 export type { TextareaProps } from './Textarea';

From 3a106d893c101e078fd2b741831ea00b9543f3f8 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Wed, 21 Aug 2024 22:44:04 +0900
Subject: [PATCH 05/16] =?UTF-8?q?refactor:=20currentLength=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=82=AD=EC=A0=9C=20->=20value.length=EB=A1=9C=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Textarea/Textarea.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index 842be11..e68968b 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -9,7 +9,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     ref
   ) => {
     const [value, setValue] = useState('');
-    const [currentLength, setCurrentLength] = useState(value?.length || 0);
 
     const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       const newValue = e.target.value;
@@ -17,7 +16,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         return;
       }
       setValue(newValue);
-      setCurrentLength(newValue.length);
       onValueChange?.(newValue);
     };
 
@@ -36,7 +34,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {...props}
         />
         <StyledHelperText $error={error}>
-          {helperText && helperText} {maxLength && `(${currentLength}/${maxLength})`}
+          {helperText && helperText} {maxLength && `(${value.length}/${maxLength})`}
         </StyledHelperText>
       </StyledContainer>
     );

From b4ade1430919e355b41917c54957ab80019f1c57 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Wed, 21 Aug 2024 22:55:05 +0900
Subject: [PATCH 06/16] =?UTF-8?q?refactor:=20Textarea=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20=EC=A4=91=EB=B3=B5=20=EC=A0=95=EC=9D=98=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(plaholder, disabled, maxLength)
---
 src/components/Textarea/Textarea.type.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Textarea/Textarea.type.ts b/src/components/Textarea/Textarea.type.ts
index 84c0895..22385a6 100644
--- a/src/components/Textarea/Textarea.type.ts
+++ b/src/components/Textarea/Textarea.type.ts
@@ -1,10 +1,7 @@
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   width: string;
   height: string;
-  maxLength?: number;
   helperText?: string;
-  placeholder?: string;
-  disabled?: boolean;
   error?: boolean;
   value?: string;
   onValueChange?: (value: string) => void;

From 68640e128dad964a4308d6b14860c29a6fc1c842 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Wed, 21 Aug 2024 22:59:01 +0900
Subject: [PATCH 07/16] =?UTF-8?q?refactor:=20StyledContainer=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EC=82=AC=EC=9A=A9=20=EC=95=88=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?StyledTextareaProps=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Textarea/Textarea.style.ts | 2 +-
 src/components/Textarea/Textarea.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Textarea/Textarea.style.ts b/src/components/Textarea/Textarea.style.ts
index 7975806..44585e0 100644
--- a/src/components/Textarea/Textarea.style.ts
+++ b/src/components/Textarea/Textarea.style.ts
@@ -8,7 +8,7 @@ interface StyledTextareaProps {
   $error?: TextareaProps['error'];
 }
 
-export const StyledContainer = styled.div<StyledTextareaProps>`
+export const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index e68968b..e5c8243 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -20,7 +20,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     };
 
     return (
-      <StyledContainer $width={width}>
+      <StyledContainer>
         <StyledTextarea
           ref={ref}
           $width={width}

From 31b354bdd025856c002b3d9a642b0850ad7fd06b Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Wed, 21 Aug 2024 23:01:00 +0900
Subject: [PATCH 08/16] =?UTF-8?q?refactor:=20e.target.value=20->=20?=
 =?UTF-8?q?=EC=84=A0=EC=96=B8=ED=95=9C=20newValue=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index e5c8243..f791af4 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -12,7 +12,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       const newValue = e.target.value;
-      if (maxLength && e.target.value.length > maxLength) {
+      if (maxLength && newValue.length > maxLength) {
         return;
       }
       setValue(newValue);

From edf0eca7911e634306312787ee8abea4dba71c24 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Thu, 22 Aug 2024 17:25:15 +0900
Subject: [PATCH 09/16] style: textStatusNegative -> lineStatusPositive

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

diff --git a/src/components/Textarea/Textarea.style.ts b/src/components/Textarea/Textarea.style.ts
index 44585e0..e3245c2 100644
--- a/src/components/Textarea/Textarea.style.ts
+++ b/src/components/Textarea/Textarea.style.ts
@@ -29,7 +29,7 @@ export const StyledTextarea = styled.textarea<StyledTextareaProps>`
   color: ${({ theme }) => theme.semantic.color.textBasicPrimary};
 
   caret-color: ${({ theme, $error }) =>
-    $error ? theme.semantic.color.textStatusNegative : theme.semantic.color.textBasicTertiary};
+    $error ? theme.semantic.color.textStatusNegative : theme.semantic.color.lineStatusPositive};
 
   outline-color: ${({ theme }) => theme.semantic.color.lineStatusPositive};
   outline-width: 1px;

From e16a681a37a78e14090a7d20095ec64fc6411b47 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Fri, 23 Aug 2024 16:17:36 +0900
Subject: [PATCH 10/16] =?UTF-8?q?style:=20border=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20line=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EB=A1=9C=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/Textarea/Textarea.style.ts b/src/components/Textarea/Textarea.style.ts
index e3245c2..3642555 100644
--- a/src/components/Textarea/Textarea.style.ts
+++ b/src/components/Textarea/Textarea.style.ts
@@ -23,13 +23,13 @@ export const StyledTextarea = styled.textarea<StyledTextareaProps>`
 
   box-sizing: border-box;
   border: ${({ theme, $error }) =>
-    $error ? `1px solid ${theme.semantic.color.textStatusNegative}` : 'none'};
+    $error ? `1px solid ${theme.semantic.color.lineStatusNegative}` : '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};
+    $error ? theme.semantic.color.lineStatusNegative : theme.semantic.color.lineStatusPositive};
 
   outline-color: ${({ theme }) => theme.semantic.color.lineStatusPositive};
   outline-width: 1px;

From d3cc9ffe21f7ac8c08a5758a96b338c0b3c7c847 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Fri, 23 Aug 2024 16:42:50 +0900
Subject: [PATCH 11/16] =?UTF-8?q?style:=20error=20=EC=83=81=ED=99=A9?=
 =?UTF-8?q?=EC=9D=BC=20=EB=95=8C=EC=99=80=20focus=20=EC=83=81=ED=99=A9?=
 =?UTF-8?q?=EC=9D=BC=20=EB=95=8C=20border=20=EC=BD=94=EB=93=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Textarea/Textarea.style.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Textarea/Textarea.style.ts b/src/components/Textarea/Textarea.style.ts
index 3642555..dd4cd1b 100644
--- a/src/components/Textarea/Textarea.style.ts
+++ b/src/components/Textarea/Textarea.style.ts
@@ -31,8 +31,13 @@ export const StyledTextarea = styled.textarea<StyledTextareaProps>`
   caret-color: ${({ theme, $error }) =>
     $error ? theme.semantic.color.lineStatusNegative : theme.semantic.color.lineStatusPositive};
 
-  outline-color: ${({ theme }) => theme.semantic.color.lineStatusPositive};
-  outline-width: 1px;
+  &:focus {
+    outline: none;
+    border: ${({ theme, $error }) =>
+      $error
+        ? `1px solid ${theme.semantic.color.lineStatusNegative}`
+        : `1px solid ${theme.semantic.color.lineStatusPositive}`};
+  }
 
   &::placeholder {
     color: ${({ theme }) => theme.semantic.color.textBasicTertiary};

From ae0e28e49b3b603724ca59a1b256399226710bce Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Wed, 28 Aug 2024 20:15:24 +0900
Subject: [PATCH 12/16] =?UTF-8?q?feat:=20value=20prop=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?,=20width=20height=20=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Textarea/Textarea.type.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Textarea/Textarea.type.ts b/src/components/Textarea/Textarea.type.ts
index 22385a6..f27b5fc 100644
--- a/src/components/Textarea/Textarea.type.ts
+++ b/src/components/Textarea/Textarea.type.ts
@@ -1,8 +1,7 @@
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  width: string;
-  height: string;
+  width: React.CSSProperties['width'];
+  height: React.CSSProperties['height'];
   helperText?: string;
   error?: boolean;
-  value?: string;
   onValueChange?: (value: string) => void;
 }

From c92abeb54ef2166056ebfa48743c04fa5f60ca51 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Wed, 28 Aug 2024 20:16:16 +0900
Subject: [PATCH 13/16] =?UTF-8?q?feat:=20=EC=8A=A4=ED=81=AC=EB=A1=A4?=
 =?UTF-8?q?=EB=B0=94=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Textarea/Textarea.style.ts | 50 +++++++++++++++++------
 src/components/Textarea/Textarea.tsx      | 44 +++++++++++++++-----
 2 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/src/components/Textarea/Textarea.style.ts b/src/components/Textarea/Textarea.style.ts
index dd4cd1b..7b8c117 100644
--- a/src/components/Textarea/Textarea.style.ts
+++ b/src/components/Textarea/Textarea.style.ts
@@ -6,6 +6,7 @@ interface StyledTextareaProps {
   $width?: TextareaProps['width'];
   $height?: TextareaProps['height'];
   $error?: TextareaProps['error'];
+  $isFocused?: boolean;
 }
 
 export const StyledContainer = styled.div`
@@ -14,18 +15,32 @@ export const StyledContainer = styled.div`
   gap: 4px;
 `;
 
-export const StyledTextarea = styled.textarea<StyledTextareaProps>`
-  width: ${({ $width }) => $width};
-  height: ${({ $height }) => $height};
+export const StyledTextareaWrapper = styled.div<StyledTextareaProps>`
+  width: ${({ $width }) => $width ?? '100%'};
+  height: ${({ $height }) => $height ?? 'auto'};
   padding: 16px;
-  ${({ theme }) => theme.typo.B3_Rg_14}
+  background-color: ${({ theme }) => theme.semantic.color.bgBasicLight};
+  border: ${({ theme, $error }) =>
+    $error ? `1px solid ${theme.semantic.color.lineStatusNegative}` : 'none'};
+  border-radius: ${({ theme }) => theme.semantic.radius.s}px;
+  box-sizing: border-box;
+  border: ${({ theme, $error, $isFocused }) =>
+    $error
+      ? `1px solid ${theme.semantic.color.lineStatusNegative}`
+      : $isFocused
+        ? `1px solid ${theme.semantic.color.lineStatusPositive}`
+        : 'none'};
+`;
+
+export const StyledTextarea = styled.textarea<StyledTextareaProps>`
+  width: 100%;
+  height: 100%;
   resize: none;
+  ${({ theme }) => theme.typo.B3_Rg_14}
 
   box-sizing: border-box;
-  border: ${({ theme, $error }) =>
-    $error ? `1px solid ${theme.semantic.color.lineStatusNegative}` : 'none'};
-  border-radius: ${({ theme }) => theme.semantic.radius.m}px;
-  background-color: ${({ theme }) => theme.semantic.color.bgBasicLight};
+  border: none;
+  background-color: transparent;
   color: ${({ theme }) => theme.semantic.color.textBasicPrimary};
 
   caret-color: ${({ theme, $error }) =>
@@ -33,10 +48,6 @@ export const StyledTextarea = styled.textarea<StyledTextareaProps>`
 
   &:focus {
     outline: none;
-    border: ${({ theme, $error }) =>
-      $error
-        ? `1px solid ${theme.semantic.color.lineStatusNegative}`
-        : `1px solid ${theme.semantic.color.lineStatusPositive}`};
   }
 
   &::placeholder {
@@ -44,13 +55,26 @@ export const StyledTextarea = styled.textarea<StyledTextareaProps>`
   }
 
   &:disabled {
-    background-color: ${({ theme }) => theme.semantic.color.bgBasicLight};
+    background-color: transparent;
     cursor: not-allowed;
 
     &::placeholder {
       color: ${({ theme }) => theme.semantic.color.textBasicDisabled};
     }
   }
+
+  &::-webkit-scrollbar {
+    width: 2px;
+    border-radius: 2px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${({ theme }) => theme.semantic.color.lineBasicMedium};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${({ theme }) => theme.semantic.color.lineBasicStrong};
+  }
 `;
 
 export const StyledHelperText = styled.div<StyledTextareaProps>`
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index f791af4..419b50c 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -1,6 +1,11 @@
 import { forwardRef, useState } from 'react';
 
-import { StyledTextarea, StyledContainer, StyledHelperText } from './Textarea.style';
+import {
+  StyledTextarea,
+  StyledContainer,
+  StyledHelperText,
+  StyledTextareaWrapper,
+} from './Textarea.style';
 import { TextareaProps } from './Textarea.type';
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
@@ -8,7 +13,17 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     { width, height, maxLength, helperText, placeholder, disabled, error, onValueChange, ...props },
     ref
   ) => {
-    const [value, setValue] = useState('');
+    const [value, setValue] = useState<string>('');
+
+    const [isFocused, setIsFocused] = useState(false);
+
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
 
     const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       const newValue = e.target.value;
@@ -21,18 +36,25 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     return (
       <StyledContainer>
-        <StyledTextarea
-          ref={ref}
+        <StyledTextareaWrapper
           $width={width}
           $height={height}
-          value={value}
-          onChange={handleChange}
-          maxLength={maxLength}
-          placeholder={placeholder}
-          disabled={disabled}
           $error={error}
-          {...props}
-        />
+          $isFocused={isFocused}
+        >
+          <StyledTextarea
+            ref={ref}
+            value={value}
+            onChange={handleChange}
+            maxLength={maxLength}
+            placeholder={placeholder}
+            disabled={disabled}
+            $error={error}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            {...props}
+          />
+        </StyledTextareaWrapper>
         <StyledHelperText $error={error}>
           {helperText && helperText} {maxLength && `(${value.length}/${maxLength})`}
         </StyledHelperText>

From f87805099fe60eb490cf9a8c332440ff4b3887a6 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Wed, 28 Aug 2024 21:20:51 +0900
Subject: [PATCH 14/16] =?UTF-8?q?docs:=20onValueChange=20prop=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EB=AC=B8=EC=84=9C=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Textarea/Textarea.mdx         | 27 +++++++
 src/components/Textarea/Textarea.stories.tsx | 77 +++++++++++++-------
 2 files changed, 79 insertions(+), 25 deletions(-)

diff --git a/src/components/Textarea/Textarea.mdx b/src/components/Textarea/Textarea.mdx
index b5a7ff8..a3c16ae 100644
--- a/src/components/Textarea/Textarea.mdx
+++ b/src/components/Textarea/Textarea.mdx
@@ -117,3 +117,30 @@ Textarea에 잘못된 값이 입력되었을 때 사용자에게 오류 상태
 
 <br />
 <br />
+
+### onValueChange
+
+Textarea에 텍스트를 입력하거나 변경할 때 호출되는 콜백 함수입니다. 이 함수는 현재 입력된 텍스트 값을 매개변수로 전달하여, 외부에서 상태를 관리하거나 추가적인 로직을 실행할 수 있게 합니다.
+
+```tsx
+const [text, setText] = useState('');
+
+const handleValueChange = (newValue: string) => {
+  setText(newValue);
+};
+
+return (
+  <Textarea
+    {...args}
+    value={text}
+    onValueChange={handleValueChange}
+    maxLength={args.maxLength}
+    placeholder={args.placeholder}
+  />
+);
+```
+
+<Canvas of={TextareaStories.OnValueChange} withSource="none" />
+
+<br />
+<br />
diff --git a/src/components/Textarea/Textarea.stories.tsx b/src/components/Textarea/Textarea.stories.tsx
index 0cd1c4c..ba7c527 100644
--- a/src/components/Textarea/Textarea.stories.tsx
+++ b/src/components/Textarea/Textarea.stories.tsx
@@ -1,4 +1,4 @@
-// import { useState } from 'react';
+import { useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
 
@@ -46,16 +46,40 @@ const meta: Meta<typeof Textarea> = {
 export default meta;
 type Story = StoryObj<typeof Textarea>;
 
+const ControlledComponent = (args: TextareaProps) => {
+  return <Textarea {...args} maxLength={args.maxLength} placeholder={args.placeholder} />;
+};
+
+const OnChangeComponent = (args: TextareaProps) => {
+  const [text, setText] = useState('');
+
+  const handleValueChange = (newValue: string) => {
+    setText(newValue);
+  };
+
+  return (
+    <Textarea
+      {...args}
+      value={text}
+      onValueChange={handleValueChange}
+      maxLength={args.maxLength}
+      placeholder={args.placeholder}
+    />
+  );
+};
+
 export const Default: Story = {
+  render: (args) => <ControlledComponent {...args} />,
   args: {
-    width: '343px',
-    height: '187px',
+    width: '100%',
+    height: 'auto',
     placeholder: 'Enter text here...',
     helperText: 'Text Inputting',
   },
 };
 
 export const Placeholder: Story = {
+  render: (args) => <ControlledComponent {...args} />,
   args: {
     width: '343px',
     height: '187px',
@@ -64,6 +88,7 @@ export const Placeholder: Story = {
 };
 
 export const HelperText: Story = {
+  render: (args) => <ControlledComponent {...args} />,
   args: {
     width: '343px',
     height: '187px',
@@ -73,6 +98,7 @@ export const HelperText: Story = {
 };
 
 export const Disabled: Story = {
+  render: (args) => <ControlledComponent {...args} />,
   args: {
     width: '343px',
     height: '187px',
@@ -83,6 +109,7 @@ export const Disabled: Story = {
 };
 
 export const Error: Story = {
+  render: (args) => <ControlledComponent {...args} />,
   args: {
     width: '343px',
     height: '187px',
@@ -92,28 +119,28 @@ export const Error: Story = {
   },
 };
 
-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: (args) => <ControlledComponent {...args} />,
+  args: {
+    width: '343px',
+    height: '187px',
+    maxLength: 50,
+    placeholder: 'Max 50 characters',
+    helperText: '',
+    disabled: false,
+    error: false,
+  },
 };
 
-export const MaxLength: Story = {
-  render: MaxLengthTest,
+export const OnValueChange: Story = {
+  render: (args) => <OnChangeComponent {...args} />,
+  args: {
+    width: '343px',
+    height: '187px',
+    maxLength: 50,
+    placeholder: 'onValueChange...',
+    helperText: '',
+    disabled: false,
+    error: false,
+  },
 };

From 8c9b2ad6872c333fe2d84d643f03affc4ea26fd4 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Wed, 28 Aug 2024 23:50:19 +0900
Subject: [PATCH 15/16] =?UTF-8?q?feat:=20helperText=20=EB=A1=9C=EC=A7=81?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index 419b50c..cb33d29 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -56,7 +56,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           />
         </StyledTextareaWrapper>
         <StyledHelperText $error={error}>
-          {helperText && helperText} {maxLength && `(${value.length}/${maxLength})`}
+          {maxLength ? `(${value.length}/${maxLength})` : helperText && helperText}
         </StyledHelperText>
       </StyledContainer>
     );

From c0a85211d77745f7cb109f804bcbc7ae9f954d66 Mon Sep 17 00:00:00 2001
From: seocylucky <seocylucky@github.com>
Date: Fri, 30 Aug 2024 13:10:29 +0900
Subject: [PATCH 16/16] =?UTF-8?q?style:=20=EC=8A=A4=ED=81=AC=EB=A1=A4?=
 =?UTF-8?q?=EB=B0=94=EC=99=80=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=97=AC?=
 =?UTF-8?q?=EB=B0=B1=20padding:=206px=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Textarea/Textarea.style.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Textarea/Textarea.style.ts b/src/components/Textarea/Textarea.style.ts
index 7b8c117..90dcf3e 100644
--- a/src/components/Textarea/Textarea.style.ts
+++ b/src/components/Textarea/Textarea.style.ts
@@ -35,6 +35,7 @@ export const StyledTextareaWrapper = styled.div<StyledTextareaProps>`
 export const StyledTextarea = styled.textarea<StyledTextareaProps>`
   width: 100%;
   height: 100%;
+  padding-right: 6px;
   resize: none;
   ${({ theme }) => theme.typo.B3_Rg_14}