[Feature] Divider 컴포넌트 구현 (#49)

* feat: divider 컴포넌트 추가

* feat: divider 스토리 작성

* main 브랜치 squash merge

* chore: type 속성 축약

* refactor: wrapper 삭제해서 뎁스 줄이기

* chore: 스토리북 관련 리뷰 적용

* chore: jsdoc 코드리뷰 반영

---------

Co-authored-by: hamo-o <[email protected]>

apps/wow-docs/app/page.tsx

@@ -1,5 +1,6 @@
 import Checkbox from "wowds-ui/Checkbox";
 import Chip from "wowds-ui/Chip";
+import Divider from "wowds-ui/Divider";
 import DropDown from "wowds-ui/DropDown";
 import DropDownOption from "wowds-ui/DropDownOption";
 import MultiGroup from "wowds-ui/MultiGroup";
@@ -12,6 +13,8 @@ const Home = () => {
     <>
       <Checkbox value="checkbox" />
       <Chip label="Chip" />
+      <Switch />
+      <Divider />
       <Switch value="switch" />
       <RadioGroup defaultValue="1학년" name="학년">
         <RadioButton label="1학년" value="1학년" />

packages/wow-ui/package.json

@@ -65,6 +65,11 @@
       "require": "./dist/DropDown.cjs",
       "import": "./dist/DropDown.js"
     },
+    "./Divider": {
+      "types": "./dist/components/Divider/index.d.ts",
+      "require": "./dist/Divider.cjs",
+      "import": "./dist/Divider.js"
+    },
     "./Chip": {
       "types": "./dist/components/Chip/index.d.ts",
       "require": "./dist/Chip.cjs",

packages/wow-ui/rollup.config.js

@@ -29,6 +29,7 @@ export default {
     MultiGroup: "./src/components/MultiGroup",
     DropDownOption: "./src/components/DropDown/DropDownOption",
     DropDown: "./src/components/DropDown",
+    Divider: "./src/components/Divider",
     Chip: "./src/components/Chip",
     Checkbox: "./src/components/Checkbox",
     Button: "./src/components/Button",

packages/wow-ui/src/components/Divider/Divider.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Divider from "@/components/Divider";
+
+const meta = {
+  title: "UI/Divider",
+  component: Divider,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "디바이더 컴포넌트",
+  },
+  argTypes: {
+    type: {
+      description: "라이트모드, 다크모드에 따라 디바이더의 색상이 달라집니다.",
+      table: {
+        type: { summary: '"light" | "dark"' },
+        defaultValue: { summary: "light" },
+      },
+      control: {
+        type: "radio",
+        options: ["light", "dark"],
+      },
+    },
+    style: {
+      description: "디바이더의 커스텀 스타일을 설정할 수 있습니다.",
+      table: {
+        type: { summary: "CSSProperties" },
+        defaultValue: { summary: "{}" },
+      },
+      control: false,
+    },
+    className: {
+      description: "디바이더에 전달하는 커스텀 클래스를 설정합니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: false,
+    },
+  },
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Light: Story = {
+  args: {},
+};
+
+export const Dark: Story = {
+  args: {
+    type: "dark",
+  },
+};

packages/wow-ui/src/components/Divider/index.tsx

@@ -0,0 +1,51 @@
+import { cva } from "@styled-system/css";
+import { styled } from "@styled-system/jsx";
+import type { CSSProperties } from "react";
+
+export interface DividerProps {
+  type?: "light" | "dark";
+  style?: CSSProperties;
+  className?: string;
+}
+
+/**
+ * @description 디바이더 컴포넌트의 속성을 정의합니다.
+ *
+ * @param {"light" | "dark"} [type] 디바이더의 테마 모드를 설정합니다.
+ * @param {CSSProperties} [style] 디바이더의 커스텀 스타일을 설정합니다.
+ * @param {string} [className] 디바이더에 전달하는 커스텀 클래스를 설정합니다.
+ * @param {ComponentPropsWithoutRef<T>} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props.
+ */
+
+const Divider = ({ type = "light", ...rest }: DividerProps) => {
+  return (
+    <styled.div
+      className={dividerStyle({
+        type,
+      })}
+      {...rest}
+    />
+  );
+};
+
+Divider.displayName = "Divider";
+
+export default Divider;
+
+const dividerStyle = cva({
+  base: {
+    width: "100%",
+    height: "0.075rem",
+    borderRadius: "100%",
+  },
+  variants: {
+    type: {
+      light: {
+        bgColor: "lightDisabled",
+      },
+      dark: {
+        bgColor: "darkDisabled",
+      },
+    },
+  },
+});