feat: storybook 추가

2026-04-14 10:38:36 +09:00
parent 52f8c30b2e
commit 8d6bff88d6
23 changed files with 1687 additions and 10 deletions
--- a/web-app/app/shared/components/textarea/TextArea.stories.tsx
+++ b/web-app/app/shared/components/textarea/TextArea.stories.tsx
@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { TextArea } from './TextArea'
+
+const meta = {
+  title: 'Components/TextArea',
+  component: TextArea,
+  argTypes: {
+    readOnly: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof TextArea>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    placeholder: '내용을 입력하세요',
+    className: 'w-80 h-32',
+  },
+}
+
+export const WithValue: Story = {
+  render: function Render() {
+    const [value, setValue] = useState('기본 텍스트 내용입니다.')
+    return (
+      <TextArea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        className="w-80 h-32"
+      />
+    )
+  },
+}
+
+export const ReadOnly: Story = {
+  args: {
+    value: '읽기 전용 텍스트입니다. 수정할 수 없습니다.',
+    readOnly: true,
+    className: 'w-80 h-32',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    value: '비활성화된 텍스트입니다.',
+    disabled: true,
+    className: 'w-80 h-32',
+  },
+}
+
+export const WithPlaceholder: Story = {
+  args: {
+    placeholder: '여기에 상세 설명을 입력하세요...',
+    className: 'w-80 h-32',
+  },
+}
+
+export const LargeTextArea: Story = {
+  args: {
+    placeholder: '큰 텍스트 영역입니다.',
+    className: 'w-full h-48',
+  },
+}
+
+export const SmallTextArea: Story = {
+  args: {
+    placeholder: '작은 텍스트 영역입니다.',
+    className: 'w-60 h-20',
+  },
+}
+
+export const WithMaxLength: Story = {
+  render: function Render() {
+    const [value, setValue] = useState('')
+    const maxLength = 100
+    return (
+      <div className="space-y-2">
+        <TextArea
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          maxLength={maxLength}
+          placeholder="최대 100자까지 입력 가능합니다."
+          className="w-80 h-32"
+        />
+        <p className="text-sm text-gray-500">
+          {value.length}/{maxLength}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const WithRows: Story = {
+  args: {
+    placeholder: 'rows 속성으로 높이를 지정할 수 있습니다.',
+    rows: 5,
+    className: 'w-80',
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium mb-1">기본</label>
+        <TextArea placeholder="기본 상태" className="w-80 h-24" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium mb-1">읽기 전용</label>
+        <TextArea value="읽기 전용 텍스트" readOnly className="w-80 h-24" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium mb-1">비활성화</label>
+        <TextArea value="비활성화된 텍스트" disabled className="w-80 h-24" />
+      </div>
+    </div>
+  ),
+}