diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 21537d74..390698b1 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -6,6 +6,8 @@ import '@/styles/global.css';
 import Layout from '../src/v1/layout/Layout';
 import ToastProvider from '../src/v1/base/Toast/ToastProvider';
 
+import ReactQueryProvider from '../src/components/ReactQueryProvider';
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -22,11 +24,13 @@ const preview: Preview = {
   },
   decorators: [
     Story => (
-      <ToastProvider>
-        <Layout>
-          <Story />
-        </Layout>
-      </ToastProvider>
+      <ReactQueryProvider>
+        <ToastProvider>
+          <Layout>
+            <Story />
+          </Layout>
+        </ToastProvider>
+      </ReactQueryProvider>
     ),
   ],
 };
diff --git a/src/stories/bookGroup/BookInfoCard.stories.tsx b/src/stories/bookGroup/BookInfoCard.stories.tsx
new file mode 100644
index 00000000..49f46411
--- /dev/null
+++ b/src/stories/bookGroup/BookInfoCard.stories.tsx
@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import BookInfoCard from '@/v1/bookGroup/BookInfoCard';
+
+const meta: Meta<typeof BookInfoCard> = {
+  title: 'bookGroup/BookInfoCard',
+  component: BookInfoCard,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BookInfoCard>;
+
+export const Default: Story = {
+  args: { bookId: 23 },
+};
+
+export const Removable: Story = {
+  args: { bookId: 23, removable: true },
+};