diff --git a/view/next-project/src/stories/auth/SignInView.stories.tsx b/view/next-project/src/stories/auth/SignInView.stories.tsx
new file mode 100644
index 000000000..4aad2ad63
--- /dev/null
+++ b/view/next-project/src/stories/auth/SignInView.stories.tsx
@@ -0,0 +1,24 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import { SignInView } from '@components/auth';
+
+const meta: Meta<typeof SignInView> = {
+  title: 'FinanSu/auth/SignInView',
+  component: SignInView,
+  decorators: [
+    (Story) => (
+      <RecoilRoot>
+        <Story />
+      </RecoilRoot>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: StoryFn<typeof SignInView> = () => <SignInView />;
+
+export const Primary = Template.bind({});
+Primary.args = {};
diff --git a/view/next-project/src/stories/auth/SignUpView.stories.tsx b/view/next-project/src/stories/auth/SignUpView.stories.tsx
new file mode 100644
index 000000000..11937dd88
--- /dev/null
+++ b/view/next-project/src/stories/auth/SignUpView.stories.tsx
@@ -0,0 +1,24 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import { SignUpView } from '@components/auth';
+
+const meta: Meta<typeof SignUpView> = {
+  title: 'FinanSu/auth/SignUpView',
+  component: SignUpView,
+  decorators: [
+    (Story) => (
+      <RecoilRoot>
+        <Story />
+      </RecoilRoot>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: StoryFn<typeof SignUpView> = () => <SignUpView />;
+
+export const Primary = Template.bind({});
+Primary.args = {};