test: Accordion 스토리북 제작

Kernel360 · Jan 20, 2024 · 4e27ee4 · 4e27ee4
1 parent 31336fc
commit 4e27ee4
Showing 1 changed file with 40 additions and 32 deletions.
diff --git 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>
+    );
   },
 };