refactor(#54): Storybook 패키지 변경

Author: wkdtnqls0506

.storybook/main.ts

@@ -1,24 +1,34 @@
-import type { StorybookConfig } from "@storybook/experimental-nextjs-vite";
+import type { StorybookConfig } from "@storybook/nextjs-vite";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import svgr from "vite-plugin-svgr";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: ["@storybook/addon-essentials"],
+  addons: [
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs",
+    "@storybook/addon-a11y",
+    "@storybook/addon-vitest",
+  ],
   framework: {
-    name: "@storybook/experimental-nextjs-vite",
+    name: "@storybook/nextjs-vite",
     options: {},
   },
+  features: {
+    experimentalRSC: true,
+  },
   staticDirs: ["../public"],
-  viteFinal: async config => {
-    config.plugins = [
-      ...(config.plugins || []),
-      tsconfigPaths(),
-      vanillaExtractPlugin(),
-      svgr(),
-    ];
-    return config;
+  async viteFinal(config) {
+    return {
+      ...config,
+      plugins: [
+        ...(config.plugins ?? []),
+        svgr(),
+        vanillaExtractPlugin(),
+        tsconfigPaths(),
+      ],
+    };
   },
 };
 export default config;

.storybook/preview.ts

@@ -1,6 +1,6 @@
 import "@/styles/reset.css.ts";
 
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/nextjs-vite";
 
 const preview: Preview = {
   parameters: {
@@ -10,6 +10,13 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: "todo",
+    },
   },
 };
 

.storybook/vitest.setup.ts

@@ -1,9 +1,10 @@
-import { beforeAll } from 'vitest';
-import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite';
-import * as projectAnnotations from './preview';
+import { setProjectAnnotations } from "@storybook/nextjs-vite";
+import { beforeAll } from "vitest";
+
+import * as projectAnnotations from "./preview";
 
 // This is an important step to apply the right configuration when testing your stories.
 // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
 const project = setProjectAnnotations([projectAnnotations]);
 
-beforeAll(project.beforeAll);
+beforeAll(project.beforeAll);

package.json

@@ -30,16 +30,17 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@commitlint/cz-commitlint": "^19.8.1",
     "@commitlint/types": "^19.8.1",
     "@eslint/eslintrc": "^3",
     "@playwright/test": "^1.52.0",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/experimental-nextjs-vite": "8.6.14",
-    "@storybook/react": "^8.6.14",
+    "@storybook/addon-a11y": "^9.0.15",
+    "@storybook/addon-docs": "^9.0.15",
+    "@storybook/addon-vitest": "^9.0.15",
+    "@storybook/nextjs-vite": "^9.0.15",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -62,6 +63,7 @@
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-playwright": "^2.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "^9.0.15",
     "eslint-plugin-testing-library": "^7.3.0",
     "inquirer": "^12.6.3",
     "jsdom": "^26.1.0",
@@ -70,8 +72,9 @@
     "msw": "^2.8.4",
     "playwright": "^1.52.0",
     "prettier": "^3.5.3",
-    "storybook": "^8.6.14",
+    "storybook": "^9.0.15",
     "typescript": "^5",
+    "vite": "6.2.0",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.1.4"