From 4f5c05271e1c1471e08aef8ee27b76f15bb29760 Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Mon, 15 Apr 2024 23:51:54 +0900
Subject: [PATCH] =?UTF-8?q?test:=20DragCarousel=20storybook=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stories/useDragIndexCarousel/Docs.mdx     | 12 +++++
 .../DragCarousel.stories.ts                   | 19 ++++++++
 .../useDragIndexCarousel/DragCarousel.tsx     | 45 +++++++++++++++++++
 3 files changed, 76 insertions(+)
 create mode 100644 src/stories/useDragIndexCarousel/Docs.mdx
 create mode 100644 src/stories/useDragIndexCarousel/DragCarousel.stories.ts
 create mode 100644 src/stories/useDragIndexCarousel/DragCarousel.tsx

diff --git a/src/stories/useDragIndexCarousel/Docs.mdx b/src/stories/useDragIndexCarousel/Docs.mdx
new file mode 100644
index 0000000..21251c2
--- /dev/null
+++ b/src/stories/useDragIndexCarousel/Docs.mdx
@@ -0,0 +1,12 @@
+import { Canvas, Meta, Description } from '@storybook/blocks';
+import * as DragCarouselStories from './DragCarousel.stories';
+
+<Meta of={DragCarouselStories} />
+
+# useDragCarousel
+
+useDragCarousel에서 반환된 컴포넌트를 통해 간편하게 Drag가능한 index기반의 Carousel을 구현합니다.
+
+모바일, PC 환경 모두 지원합니다.
+
+<Canvas of={DragCarouselStories.defaultStory} />
diff --git a/src/stories/useDragIndexCarousel/DragCarousel.stories.ts b/src/stories/useDragIndexCarousel/DragCarousel.stories.ts
new file mode 100644
index 0000000..fc470ee
--- /dev/null
+++ b/src/stories/useDragIndexCarousel/DragCarousel.stories.ts
@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DragCarousel from './DragCarousel';
+
+const meta = {
+  title: 'hooks/useDragCarousel',
+  component: DragCarousel,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      canvas: {},
+    },
+  },
+} satisfies Meta<typeof DragCarousel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const defaultStory: Story = {};
diff --git a/src/stories/useDragIndexCarousel/DragCarousel.tsx b/src/stories/useDragIndexCarousel/DragCarousel.tsx
new file mode 100644
index 0000000..af0de5e
--- /dev/null
+++ b/src/stories/useDragIndexCarousel/DragCarousel.tsx
@@ -0,0 +1,45 @@
+import useDragIndexCarousel, {
+  useDragCarouselIndex,
+} from '../../useDragIndexCarousel';
+import React from 'react';
+
+export default function DragCarousel() {
+  const images = [
+    'https://i.namu.wiki/i/8BAuDmjlFbHoGpGTyTUJyeIsrWw7vrGKTvbOBS1DbaLNHHFL6D05TSZEyVGGffn_RIs6zrf4jCb5Xq5Lnbs8QQ.webp',
+    'https://cdn.topstarnews.net/news/photo/202208/14724511_938042_3651.jpg',
+    'https://image.xportsnews.com/contents/images/upload/article/2023/0825/mb_1692925582785123.jpg',
+    'https://photo.newsen.com/news_photo/2022/08/19/202208190935355510_1.jpg',
+  ];
+  const DragCarousel = useDragIndexCarousel();
+  return (
+    <DragCarousel
+      style={{
+        width: 500,
+        height: 500,
+      }}
+    >
+      {images.map((image) => (
+        <div
+          style={{
+            width: '100%',
+            backgroundColor: 'black',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+          }}
+        >
+          <img
+            src={image}
+            draggable={false}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'contain',
+            }}
+          />
+        </div>
+      ))}
+    </DragCarousel>
+  );
+}