From 4e27ee42eb9da80f7c5fd364bb07c34e13059f8e Mon Sep 17 00:00:00 2001
From: wookki <bwlimtony@gmail.com>
Date: Sat, 20 Jan 2024 21:56:06 +0900
Subject: [PATCH] =?UTF-8?q?test:=20Accordion=20=EC=8A=A4=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=EB=B6=81=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/accordion/Accordion.stories.tsx    | 72 ++++++++++---------
 1 file changed, 40 insertions(+), 32 deletions(-)

diff --git a/src/components/shared/accordion/Accordion.stories.tsx b/src/components/shared/accordion/Accordion.stories.tsx
index eb32ca3e..affded8f 100644
--- a/src/components/shared/accordion/Accordion.stories.tsx
+++ b/src/components/shared/accordion/Accordion.stories.tsx
@@ -1,11 +1,13 @@
-/* eslint-disable react/jsx-closing-tag-location */
-/* eslint-disable max-len */
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 import Minus from '@components/icons/Minus';
 import Plus from '@components/icons/Plus';
+import Text from '@shared/text/Text';
 
 import Accordion from './Accordion';
+import AccordionBody from './body/AccordionBody';
+import AccordionHeader from './header/AccordionHeader';
+import AccordionItem from './item/AccordionItem';
 
 const meta = {
   title: 'Shared/Accordion',
@@ -18,35 +20,41 @@ const meta = {
 } satisfies Meta<typeof Accordion>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
-export const Horizontal: Story = {
-  args: {
-    children: <>
-      <Accordion.Item label="1">
-        <Accordion.Header openIcon={<Plus />} closeIcon={<Minus />}>Accordion Item #1</Accordion.Header>
-        <Accordion.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-        </Accordion.Body>
-      </Accordion.Item>
-      <Accordion.Item label="2">
-        <Accordion.Header openIcon={<Plus />} closeIcon={<Minus />}>Accordion Item #1</Accordion.Header>
-        <Accordion.Body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-        </Accordion.Body>
-      </Accordion.Item>
-    </>,
+export const AccordionStory = {
+  render: () => {
+    return (
+      <Accordion defaultActiveItems={['']}>
+        <AccordionItem itemName="목록1">
+          <AccordionHeader openIcon={<Plus />} closeIcon={<Minus />}>
+            <Text>
+              목록1
+            </Text>
+          </AccordionHeader>
+          <AccordionBody>
+            <Text>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+              minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            </Text>
+          </AccordionBody>
+        </AccordionItem>
+        <AccordionItem itemName="목록2">
+          <AccordionHeader>
+            <Text>
+              목록2
+            </Text>
+          </AccordionHeader>
+          <AccordionBody>
+            <Text>
+              aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              culpa qui officia deserunt mollit anim id est laborum.
+            </Text>
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>
+    );
   },
 };