feat: 스토리북 세팅 및 공통 컴포넌트 적용 (#20)

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     '.pnp.loader.cjs',
     'public/',
     '/.next',
+    'storybook-static',
   ],
   extends: [
     'airbnb',
@@ -78,6 +79,11 @@ module.exports = {
         project: ['./cypress/tsconfig.json'],
       },
     },
+    {
+      extends: ['plugin:storybook/recommended'],
+      files: ['**/*.stories.ts?(x)'],
+      rules: {},
+    },
   ],
   rules: {
     'react/require-default-props': 'off',

.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,15 @@
+<link rel="stylesheet" as="style" crossorigin
+  href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
+
+<style>
+  body {
+    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+    background-color: #13161C !important;
+  }
+</style>
+
+<script>
+  window.global = window;
+</script>
+
+<div id="portal-container"></div>

.storybook/preview.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import type { Preview } from "@storybook/react";
+
+import 'src/styles/global.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: 'dnd',
+      values: [
+        {
+          name: 'dnd',
+          value: '#13161C',
+        },
+      ]
+    },
+  },
+};
+
+export default preview;