[chore] storybook (^7.4.0) 설치 (#250)

* chore: install storybook(^7.4.0)

* feat: faq storybook test component

.eslintrc.js

@@ -29,7 +29,13 @@ module.exports = {
       '@typescript-eslint/parser': ['.ts', '.tsx'],
     },
   },
-  extends: ['next', 'prettier', 'plugin:import/recommended', 'plugin:import/typescript'],
+  extends: [
+    'next',
+    'prettier',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:storybook/recommended',
+  ],
   plugins: ['prettier', 'import', '@typescript-eslint', 'simple-import-sort', 'unused-imports'],
   parser: '@typescript-eslint/parser',
   rules: {

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -17,7 +17,9 @@
     "lint": "next lint",
     "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
     "analyze": "ANALYZE=true next build",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@emotion/react": "^11.10.6",
@@ -33,6 +35,14 @@
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
     "@next/bundle-analyzer": "^13.2.1",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.4.0",
+    "@storybook/nextjs": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/testing-library": "^0.2.0",
     "@swc-jotai/react-refresh": "^0.0.4",
     "@types/node": "18.14.2",
     "@types/react": "18.0.28",
@@ -46,11 +56,13 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.2",
     "next-sitemap": "^3.1.54",
     "prettier": "^2.8.4",
+    "storybook": "^7.4.0",
     "typescript": "4.9.5"
   }
 }

src/components/FAQ/FAQ.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FAQ } from './index';
+
+const meta: Meta<typeof FAQ> = {
+  title: 'components/FAQ',
+  component: FAQ,
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FAQ>;
+
+export const Primary: Story = {
+  render: () => <FAQ />,
+};

src/components/FAQ/FAQ.tsx

@@ -0,0 +1,3 @@
+export function FAQ() {
+  return <div>FAQ</div>;
+}

src/components/FAQ/index.tsx

@@ -0,0 +1 @@
+export { FAQ } from './FAQ';