[#191] feature: modal 스토리북 적용

modal-root가 필요해서 preview-head.html에 추가
autodocs 전체가 모달로 덮여버리기에 modal 스토리에서는 autodocs 제거

.storybook/preview-head.html

@@ -1,3 +1,4 @@
 <link rel='stylesheet'
     href='https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css'
-    crossOrigin='anonymous' />
+    crossOrigin='anonymous' />
+<div id="modal-root"></div>

src/components/modal/ChoseProductModal.stories.tsx

@@ -0,0 +1,28 @@
+import ChoseProductModal from '@/components/modal/ChoseProductModal';
+import searchSuggestions from '@/constant/searchSuggestions';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Modal/ChoseProductModal',
+  component: ChoseProductModal,
+  argTypes: {
+    title: {
+      type: 'string',
+    },
+    image: { control: { type: 'file', accept: '.jpg' } },
+  },
+} satisfies Meta<typeof ChoseProductModal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: searchSuggestions[0].title as string,
+    image: searchSuggestions[0].image as string,
+    onClose: () => false,
+    onSubmit: () => false,
+  },
+};

src/components/modal/NoticeModal.stories.tsx

@@ -0,0 +1,19 @@
+import NoticeModal from '@/components/modal/NoticeModal';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Modal/NoticeModal',
+  component: NoticeModal,
+} satisfies Meta<typeof NoticeModal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    message: '오류가 발생했어요',
+    onClose: () => false,
+  },
+};