test: DragCarousel storybook 추가

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} />

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 = {};

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>
+  );
+}