[#188] : 스토리북 추가

.eslintrc.json

@@ -4,14 +4,14 @@
     "es2021": true,
     "node": true
   },
-
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
-    "next/core-web-vitals"
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -38,13 +38,21 @@
       "error",
       {
         "selector": "typeAlias",
-        "format": ["PascalCase"],
-        "prefix": ["T"]
+        "format": [
+          "PascalCase"
+        ],
+        "prefix": [
+          "T"
+        ]
       },
       {
         "selector": "interface",
-        "format": ["PascalCase"],
-        "prefix": ["I"]
+        "format": [
+          "PascalCase"
+        ],
+        "prefix": [
+          "I"
+        ]
       }
     ]
   },
@@ -53,4 +61,4 @@
       "version": "detect"
     }
   }
-}
+}

.github/workflows/chromatic.yml

@@ -0,0 +1,24 @@
+# Workflow name
+name: 'Chromatic Deployment'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic:
+    name: 'Run Chromatic'
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - run: yarn
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@latest
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -41,3 +41,5 @@ next-env.d.ts
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/experimental-nextjs-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@chromatic-com/storybook',
+    '@storybook/experimental-addon-test',
+  ],
+  framework: {
+    name: '@storybook/experimental-nextjs-vite',
+    options: {},
+  },
+  staticDirs: ['../public'],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,18 @@
+import type { Preview } from '@storybook/react';
+import '../src/app/globals.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: {
+      handles: ['onClick', 'onSubmit', 'onChange'],
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

jest.config.ts

@@ -15,8 +15,10 @@ const config: Config = {
   moduleNameMapper: {
     // ...
     '^@/components/(.*)$': '<rootDir>/components/$1',
+    '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
   },
   moduleDirectories: ['node_modules', '<rootDir>'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

jest.setup.js

@@ -0,0 +1 @@
+import 'jest-canvas-mock';