From c1360c6d5bb50cb796cf5a1640a299210ebcd97e Mon Sep 17 00:00:00 2001
From: snoopuppy582 <mnb0968@naver.com>
Date: Thu, 14 May 2026 07:11:02 +0900
Subject: [PATCH] docs: update textarea component page

---
 .../components/[component]/textarea/Api.mdx   | 48 ++++++++++++++++++-
 .../[component]/textarea/demo/1_Default.tsx   |  9 ++++
 .../[component]/textarea/demo/2_Error.tsx     | 15 ++++++
 .../[component]/textarea/demo/3_Disabled.tsx  | 15 ++++++
 .../[component]/textarea/demo/4_Colors.tsx    | 21 ++++++++
 .../components/[component]/textarea/index.mdx |  2 +-
 6 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/textarea/demo/1_Default.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/textarea/demo/2_Error.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/textarea/demo/3_Disabled.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/textarea/demo/4_Colors.tsx

diff --git a/apps/landing/src/app/(detail)/components/[component]/textarea/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/textarea/Api.mdx
index 8940dd93..e78cfd90 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textarea/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/textarea/Api.mdx
@@ -1,3 +1,47 @@
-import { ComingSoon } from '@/components/ComingSoon'
+import { PropsTable } from '@/components/PropsTable'
 
-<ComingSoon />
+###### API
+
+`Textarea` props extends the textarea HTML attributes.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'typography',
+      description: 'Typography token applied to the textarea',
+      type: '`keyof DevupThemeTypography`',
+      default: '`undefined`',
+    },
+    {
+      property: 'error',
+      description: 'Whether the textarea is in an invalid state',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'errorMessage',
+      description:
+        'Validation message shown below the textarea when `error` is true',
+      type: '`string`',
+      default: '`undefined`',
+    },
+    {
+      property: 'rows',
+      description: 'Visible text rows',
+      type: '`number`',
+      default: '`3`',
+    },
+    {
+      property: 'classNames',
+      description: 'Custom class names for inner elements',
+      type: '```{<br>  container?: string<br>  textarea?: string<br>  errorMessage?: string<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the textarea',
+      type: '```{<br>  primary?: string<br>  error?: string<br>  text?: string<br>  border?: string<br>  background?: string<br>  placeholder?: string<br>  focusRing?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>
diff --git a/apps/landing/src/app/(detail)/components/[component]/textarea/demo/1_Default.tsx b/apps/landing/src/app/(detail)/components/[component]/textarea/demo/1_Default.tsx
new file mode 100644
index 00000000..df331ca6
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textarea/demo/1_Default.tsx
@@ -0,0 +1,9 @@
+import { Textarea } from '@devup-ui/components'
+
+/**
+ * **Default**
+ * Basic textarea for multi-line user input.
+ */
+export default function Default() {
+  return <Textarea placeholder="Enter your message..." />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textarea/demo/2_Error.tsx b/apps/landing/src/app/(detail)/components/[component]/textarea/demo/2_Error.tsx
new file mode 100644
index 00000000..0c233d43
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textarea/demo/2_Error.tsx
@@ -0,0 +1,15 @@
+import { Textarea } from '@devup-ui/components'
+
+/**
+ * **Error**
+ * Use `error` and `errorMessage` to show validation feedback.
+ */
+export default function Error() {
+  return (
+    <Textarea
+      error
+      errorMessage="Please enter at least 10 characters."
+      placeholder="Describe your request..."
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textarea/demo/3_Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/textarea/demo/3_Disabled.tsx
new file mode 100644
index 00000000..beb004b0
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textarea/demo/3_Disabled.tsx
@@ -0,0 +1,15 @@
+import { Textarea } from '@devup-ui/components'
+
+/**
+ * **Disabled**
+ * Disabled textareas keep the value visible while preventing edits.
+ */
+export default function Disabled() {
+  return (
+    <Textarea
+      defaultValue="This message is read-only."
+      disabled
+      placeholder="Disabled textarea"
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textarea/demo/4_Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/textarea/demo/4_Colors.tsx
new file mode 100644
index 00000000..5acb50c4
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textarea/demo/4_Colors.tsx
@@ -0,0 +1,21 @@
+import { Textarea } from '@devup-ui/components'
+
+/**
+ * **Colors**
+ * Override the component color variables to match a custom theme.
+ */
+export default function Colors() {
+  return (
+    <Textarea
+      colors={{
+        primary: '#2563EB',
+        border: '#BFDBFE',
+        background: '#EFF6FF',
+        placeholder: '#60A5FA',
+        focusRing: 'rgba(37, 99, 235, 0.18)',
+      }}
+      placeholder="Custom themed textarea"
+      rows={4}
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textarea/index.mdx b/apps/landing/src/app/(detail)/components/[component]/textarea/index.mdx
index 7b361fec..cd88d8a1 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textarea/index.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/textarea/index.mdx
@@ -1 +1 @@
-`Textarea` component is used for multi-line text input.
+`Textarea` component is used for multi-line text input, such as messages, comments, and descriptions.