[ Init/4 ] 스토리북 초기 환경 구축

.eslintrc.json

@@ -10,7 +10,8 @@
     "plugin:react/recommended",
     "next",
     "next/core-web-vitals",
-    "prettier"
+    "prettier",
+    "plugin:storybook/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -35,19 +36,48 @@
       "warn",
       {
         "groups": [
-          ["^next", "^next(.*)$"],
-          ["^react", "^react(.*)$"],
-          ["^@tanstack(.*)$"],
-          ["^[a-zA-Z/-]+$"],
-          ["^@api/(.*)$"],
-          ["^@components/(.*)$"],
-          ["^@hooks/(.*)$"],
-          ["^@constants/(.*)$"],
-          ["^@styles/(.*)$"],
-          ["^@lib/(.*)$"],
-          ["^@utils/(.*)$"],
-          ["^@types/(.*)$"],
-          ["^[./]", ".*"]
+          [
+            "^next",
+            "^next(.*)$"
+          ],
+          [
+            "^react",
+            "^react(.*)$"
+          ],
+          [
+            "^@tanstack(.*)$"
+          ],
+          [
+            "^[a-zA-Z/-]+$"
+          ],
+          [
+            "^@api/(.*)$"
+          ],
+          [
+            "^@components/(.*)$"
+          ],
+          [
+            "^@hooks/(.*)$"
+          ],
+          [
+            "^@constants/(.*)$"
+          ],
+          [
+            "^@styles/(.*)$"
+          ],
+          [
+            "^@lib/(.*)$"
+          ],
+          [
+            "^@utils/(.*)$"
+          ],
+          [
+            "^@types/(.*)$"
+          ],
+          [
+            "^[./]",
+            ".*"
+          ]
         ]
       }
     ]

.github/workflows/pull-request.yml

@@ -35,6 +35,7 @@ jobs:
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: pnpm install
-
+      - name: Build storybook
+        run: pnpm run build-storybook
       - name: Run Jest Test
         run: pnpm test

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

.storybook/main.ts

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

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+import "../app/globals.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -8,7 +8,9 @@
     "start": "next start",
     "lint": "next lint",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
@@ -25,6 +27,15 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/addon-onboarding": "^8.1.5",
+    "@storybook/blocks": "^8.1.5",
+    "@storybook/nextjs": "^8.1.5",
+    "@storybook/react": "^8.1.5",
+    "@storybook/test": "^8.1.5",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
@@ -39,10 +50,13 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-simple-import-sort": "^12.1.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-unused-imports": "^4.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",
     "prettier": "^3.3.0",
+    "storybook": "^8.1.5",
     "tailwindcss": "^3.4.1",
     "ts-node": "^10.9.2",
     "typescript": "^5"