From 58bb4b5c23d61ec7d5e3cbdd791cba43f7dc3a41 Mon Sep 17 00:00:00 2001
From: nijuy <youjin6325@naver.com>
Date: Mon, 28 Oct 2024 21:37:46 +0900
Subject: [PATCH] =?UTF-8?q?docs:=20Divider=20=EB=AC=B8=EC=84=9C=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Divider/Divider.mdx         | 62 ++++++++++++++++++
 src/components/Divider/Divider.stories.tsx | 76 ++++++++++++++++++++++
 2 files changed, 138 insertions(+)
 create mode 100644 src/components/Divider/Divider.mdx
 create mode 100644 src/components/Divider/Divider.stories.tsx

diff --git a/src/components/Divider/Divider.mdx b/src/components/Divider/Divider.mdx
new file mode 100644
index 0000000..14593b0
--- /dev/null
+++ b/src/components/Divider/Divider.mdx
@@ -0,0 +1,62 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as DividerStories from './Divider.stories';
+import { Divider } from './Divider';
+import React from 'react';
+
+<Meta of={DividerStories} />
+
+# Divider
+
+Divider는 목록 및 레이아웃에서 콘텐츠를 그룹화하여 요소를 구분하는 선입니다.<br />
+Divider는 Mobile Web에서만 사용합니다.
+
+<Canvas of={DividerStories.Primary} />
+<Controls />
+
+<br />
+<br />
+
+## 사용법
+
+Divider의 기본 사용법입니다.
+
+필수 프로퍼티인 `thickness`를 설정해주세요. <br />
+
+```tsx
+import { Divider } from '@yourssu/design-system-react';
+```
+
+```tsx
+<Divider thickness={1} />
+```
+
+이외의 프로퍼티들은 하단의 예시에서 확인할 수 있습니다.
+
+<br />
+<br />
+
+## 예시
+
+### width
+
+Divider는 기본적으로 `width`가 부모 컴포넌트 `width`의 100%로 지정되어 있습니다.<br />
+
+`width` 프로퍼티를 지정하여 유동적으로 조절할 수 있습니다. (단위: px)
+
+```tsx
+<Divider thickness={1} width={500} />
+```
+
+<Canvas of={DividerStories.Width} />
+
+### thickness
+
+Divider의 두께를 의미하는 프로퍼티입니다.<br />
+
+지원하는 두께는 `1`, `2`, `4`, `8` 입니다. (단위: px)
+
+```tsx
+<Divider thickness={1} />
+```
+
+<Canvas of={DividerStories.Thickness} />
diff --git a/src/components/Divider/Divider.stories.tsx b/src/components/Divider/Divider.stories.tsx
new file mode 100644
index 0000000..6087d11
--- /dev/null
+++ b/src/components/Divider/Divider.stories.tsx
@@ -0,0 +1,76 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Divider } from './Divider';
+import { DividerProps, DividerThickness } from './Divider.type';
+
+const meta: Meta<typeof Divider> = {
+  title: 'Components/Divider',
+  component: Divider,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    width: {
+      description: 'Divider의 길이를 결정하는 속성',
+      table: {
+        defaultValue: { summary: '100%' },
+      },
+    },
+    thickness: {
+      description: 'Divider의 두께를 결정하는 속성',
+      control: {
+        type: 'radio',
+      },
+      options: [1, 2, 4, 8],
+      defaultValue: 1,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DividerProps>;
+
+const DividerStory = (args: object) => {
+  return (
+    <div style={{ width: '390px' }}>
+      <Divider thickness={1} {...args} />
+    </div>
+  );
+};
+
+export const Primary: StoryObj = {
+  render: DividerStory,
+  args: {
+    thickness: 1,
+  },
+};
+
+export const Width: Story = {
+  render: () => (
+    <div>
+      <p> Divider/1px/500px </p>
+      <Divider thickness={1} width={500} />
+    </div>
+  ),
+};
+
+export const Thickness: Story = {
+  render: () => (
+    <div
+      style={{
+        width: '390px',
+        height: '200px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+      }}
+    >
+      {[1, 2, 4, 8].map((thickness) => (
+        <div key={thickness}>
+          <p> Divider/{thickness}px </p>
+          <Divider thickness={thickness as DividerThickness} />
+        </div>
+      ))}
+    </div>
+  ),
+};