Accordion 컴포넌트 스토리 작성

src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import Accordion, { type AccordionProps } from "./Accordion";
+import { type AccordionSummaryProps } from "./AccordionSummary";
+
+type AccordionCompositionProps = Pick<AccordionProps, "width" | "open"> &
+  Pick<AccordionSummaryProps, "color" | "size">;
+
+const meta: Meta = {
+  component: Accordion,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      table: { disable: true },
+    },
+    color: {
+      control: "inline-radio",
+      options: ["black", "grey"],
+      description: "Accordion.Summary의 글씨 색상을 결정합니다.",
+      table: {
+        defaultValue: { summary: "black" },
+        category: "Accordion.Summary",
+      },
+    },
+    size: {
+      control: "inline-radio",
+      options: ["sm", "md"],
+      description: "Accordion.Summary의 크기를 결정합니다.",
+      table: {
+        defaultValue: { summary: "md" },
+        category: "Accordion.Summary",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<AccordionCompositionProps>;
+
+export const Variants: Story = {
+  args: {
+    width: "200px",
+    open: false,
+    color: "black",
+    size: "md",
+  },
+  render: ({ width, open, color, size }) => (
+    <Accordion width={width} open={open}>
+      <Accordion.Details>
+        <Accordion.Summary color={color} size={size}>
+          Summary
+        </Accordion.Summary>
+        Details
+      </Accordion.Details>
+    </Accordion>
+  ),
+};

src/components/Accordion/Accordion.tsx

@@ -4,13 +4,22 @@ import { AccordionContextProvider } from "./AccordionContextProvider";
 import AccordionDetails from "./AccordionDetails";
 import AccordionSummary from "./AccordionSummary";
 
-interface AccordionProps {
+export interface AccordionProps {
+  /**
+   * Accordion의 너비를 결정합니다.
+   * @default 200
+   */
   width?: number | string;
+  /**
+   * Accordion의 초기 열림 상태를 결정합니다.
+   * @default false
+   */
   open?: boolean;
   children: ReactNode;
 }
 
-export default function Accordion({
+/** Accordion은 세부 내용을 숨기거나 보여줄 수 있는 컴포넌트입니다. */
+function Accordion({
   width = 200,
   open: initOpen = false,
   children,
@@ -24,3 +33,5 @@ export default function Accordion({
 
 Accordion.Details = AccordionDetails;
 Accordion.Summary = AccordionSummary;
+
+export default Accordion;

src/components/Accordion/AccordionSummary.tsx

@@ -7,9 +7,9 @@ import {
   type AccordionContextType,
   useAccordion,
 } from "./AccordionContextProvider";
-import ChevronIcon from "./ChevronIcon/ChevronIcon";
+import ChevronIcon from "./ChevronIcon";
 
-interface AccordionSummaryProps {
+export interface AccordionSummaryProps {
   color?: "black" | "grey";
   size?: "md" | "sm";
   children: ReactNode | RenderComponentType;