fix: 스토리북 문서 생성

packages/wow-ui/package.json

@@ -30,6 +30,16 @@
       "require": "./dist/TextButton.cjs",
       "import": "./dist/TextButton.js"
     },
+    "./Table": {
+      "types": "./dist/components/Table/index.d.ts",
+      "require": "./dist/Table.cjs",
+      "import": "./dist/Table.js"
+    },
+    "./TableContainer": {
+      "types": "./dist/components/Table/TableContainer.d.ts",
+      "require": "./dist/TableContainer.cjs",
+      "import": "./dist/TableContainer.js"
+    },
     "./Switch": {
       "types": "./dist/components/Switch/index.d.ts",
       "require": "./dist/Switch.cjs",

packages/wow-ui/rollup.config.js

@@ -22,6 +22,8 @@ export default {
   input: {
     TextField: "./src/components/TextField",
     TextButton: "./src/components/TextButton",
+    Table: "./src/components/Table",
+    TableContainer: "./src/components/Table/TableContainer",
     Switch: "./src/components/Switch",
     Stepper: "./src/components/Stepper",
     BlueSpinner: "./src/components/Spinner/BlueSpinner",

packages/wow-ui/src/components/Table/Table.stories.tsx

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Table from "@/components/Table/Table";
+import TableBody from "@/components/Table/TableBody";
+import TableCell from "@/components/Table/TableCell";
+import TableContainer from "@/components/Table/TableContainer";
+import TableHeader from "@/components/Table/TableHeader";
+import TableRow from "@/components/Table/TableRow";
+
+const meta = {
+  title: "UI/Table",
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "테이블 컴포넌트",
+  },
+  argTypes: {
+    defaultChecked: {
+      description: "스위치가 처음에 활성화되어 있는지 여부를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    disabled: {
+      description: "스위치가 비활성화되어 있는지 여부를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    checked: {
+      description: "외부에서 제어할 활성 상태를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    label: {
+      description: "스위치 오른쪽에 들어갈 텍스트입니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: {
+        type: "text",
+      },
+    },
+    onChange: {
+      description: "외부 활성 상태가 변경될 때 호출되는 함수입니다.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      control: false,
+    },
+    onClick: {
+      description: "스위치를 클릭했을 때 호출되는 함수입니다.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      control: false,
+    },
+    onKeyDown: {
+      description:
+        "스위치가 포커스됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 호출되는 함수입니다.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      control: false,
+    },
+    onMouseEnter: {
+      description: "마우스가 스위치 위로 진입할 때 호출되는 함수입니다.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      control: false,
+    },
+    onMouseLeave: {
+      description: "마우스가 스위치에서 벗어날 때 호출되는 함수입니다.",
+      table: {
+        type: { summary: "() => void" },
+      },
+      control: false,
+    },
+    inputProps: {
+      description:
+        "스위치의 기본 input 요소에 전달할 추가 속성들을 나타냅니다.",
+      table: {
+        type: { summary: "InputHTMLAttributes<HTMLInputElement>" },
+        defaultValue: { summary: "{}" },
+      },
+      control: false,
+    },
+    style: {
+      description: "스위치의 커스텀 스타일을 설정합니다.",
+      table: {
+        type: { summary: "CSSProperties" },
+        defaultValue: { summary: "{}" },
+      },
+      control: false,
+    },
+    className: {
+      description: "스위치에 전달하는 커스텀 클래스를 설정합니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: {
+        type: "text",
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  render: () => {
+    return (
+      <TableContainer>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableCell>하이루</TableCell>
+              <TableCell>하이루</TableCell>
+              <TableCell>하이루</TableCell>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell>하이루</TableCell>
+              <TableCell>하이루</TableCell>
+              <TableCell>하이루</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>하이루</TableCell>
+              <TableCell>하이루</TableCell>
+              <TableCell>하이루</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>하이루</TableCell>
+              <TableCell>하이루</TableCell>
+              <TableCell>하이루</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    );
+  },
+};

packages/wow-ui/src/components/Table/Table.tsx

@@ -1 +1,22 @@
-const Table = () => {};
+import { styled } from "@styled-system/jsx";
+import type { PropsWithChildren } from "react";
+import { forwardRef } from "react";
+
+interface TableProps extends PropsWithChildren {}
+
+const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
+  const { children } = props;
+  return (
+    <styled.table
+      aria-labelledby="table"
+      borderCollapse="collapse"
+      ref={ref}
+      width="100%"
+    >
+      {children}
+    </styled.table>
+  );
+});
+
+Table.displayName = "Table";
+export default Table;

packages/wow-ui/src/components/Table/TableBody.tsx

@@ -0,0 +1,17 @@
+import { styled } from "@styled-system/jsx";
+import type { PropsWithChildren } from "react";
+import { forwardRef } from "react";
+interface TableBodyProps extends PropsWithChildren {}
+
+const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  (props, ref) => {
+    const { children } = props;
+    return (
+      <styled.tbody ref={ref} {...props}>
+        {children}
+      </styled.tbody>
+    );
+  }
+);
+
+export default TableBody;

packages/wow-ui/src/components/Table/TableCell.tsx

@@ -0,0 +1,17 @@
+import { styled } from "@styled-system/jsx";
+import type { PropsWithChildren } from "react";
+import { forwardRef } from "react";
+interface TableCellProps extends PropsWithChildren {}
+
+const TableCell = forwardRef<HTMLTableDataCellElement, TableCellProps>(
+  (props, ref) => {
+    const { children } = props;
+    return (
+      <styled.td ref={ref} {...props}>
+        {children}
+      </styled.td>
+    );
+  }
+);
+
+export default TableCell;

packages/wow-ui/src/components/Table/TableHeader.tsx

@@ -0,0 +1,16 @@
+import { styled } from "@styled-system/jsx";
+import type { PropsWithChildren } from "react";
+import { forwardRef } from "react";
+interface TableHeaderProps extends PropsWithChildren {}
+const TableHeader = forwardRef<HTMLTableHeaderCellElement, TableHeaderProps>(
+  (props, ref) => {
+    const { children } = props;
+    return (
+      <styled.th ref={ref} {...props}>
+        {children}
+      </styled.th>
+    );
+  }
+);
+
+export default TableHeader;

packages/wow-ui/src/components/Table/TableRow.tsx

@@ -0,0 +1,17 @@
+import { styled } from "@styled-system/jsx";
+import type { PropsWithChildren } from "react";
+import { forwardRef } from "react";
+interface TableRowProps extends PropsWithChildren {}
+
+const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  (props, ref) => {
+    const { children } = props;
+    return (
+      <styled.tr ref={ref} {...props}>
+        {children}
+      </styled.tr>
+    );
+  }
+);
+
+export default TableRow;

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

@@ -1,3 +0,0 @@
-const Table = () => {};
-
-export default Table;