From dc4f903e7cedc49d229c6ecf21c9789cbc9fee62 Mon Sep 17 00:00:00 2001
From: Seongjin Hong <hongseongjin.to@gmail.com>
Date: Fri, 2 Aug 2024 17:40:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Storybook=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/TextEditor/TextEditor.stories.tsx  | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 frontend/src/components/common/TextEditor/TextEditor.stories.tsx

diff --git a/frontend/src/components/common/TextEditor/TextEditor.stories.tsx b/frontend/src/components/common/TextEditor/TextEditor.stories.tsx
new file mode 100644
index 000000000..168cfbff6
--- /dev/null
+++ b/frontend/src/components/common/TextEditor/TextEditor.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import TextEditor from '.';
+
+const meta = {
+  title: 'Common/Input/TextEditor',
+  component: TextEditor,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'ReactQuill 에디터를 wrapping한 TextEditor 컴포넌트입니다.',
+      },
+    },
+  },
+
+  tags: ['autodocs'],
+
+  argTypes: {
+    width: { control: 'text' },
+    height: { control: 'text' },
+    placeholder: { control: 'text' },
+    value: { control: false },
+    onChange: { control: false },
+    onBlur: { action: 'blurred', control: false },
+  },
+
+  decorators: [
+    (Story) => {
+      const [value, setValue] = useState('');
+      const handleChange = (content: string) => setValue(content);
+
+      return (
+        <div style={{ width: '60rem', height: '40rem' }}>
+          <Story
+            value={value}
+            onChange={handleChange}
+          />
+        </div>
+      );
+    },
+  ],
+} satisfies Meta<typeof TextEditor>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: '',
+    placeholder: '내용을 입력하세요...',
+    onChange: () => {},
+  },
+};