[QNRR 299] storybook 환경 재설정

.storybook/main.ts

@@ -1,27 +1,53 @@
-import type { StorybookConfig } from '@storybook/experimental-nextjs-vite';
-import { mergeConfig } from 'vite';
-import path from 'path';
+import type { StorybookConfig } from '@storybook/nextjs-vite';
+import svgr from 'vite-plugin-svgr';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../stories/**/*.mdx',
+    '../src/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   addons: [
-    '@storybook/addon-essentials',
     '@chromatic-com/storybook',
-    '@storybook/experimental-addon-test',
+    '@storybook/addon-docs',
+    'msw-storybook-addon',
+    '@storybook/addon-vitest'
   ],
   framework: {
-    name: '@storybook/experimental-nextjs-vite',
+    name: '@storybook/nextjs-vite',
     options: {},
   },
-  staticDirs: ['../public'],
-  async viteFinal(config) {
-    return mergeConfig(config, {
-      resolve: {
-        alias: {
-          '@': path.resolve(__dirname, '../src'),
-        },
-      },
+  staticDirs: ['../public', '../public/mock/'],
+  viteFinal: (config) => {
+    // SVGR plugin이 Storybook 내 Vite 번들링에 사용되도록 추가
+    config.plugins = [...(config.plugins || []), svgr({ include: /\.svg$/ })];
+
+    // nextjs-vite 내에서 SVGR 이 작동하도록 plugin 동작 수정
+    // 출처: https://github.com/ygkn/storybook-nextjs-vite-svgr/blob/main/.storybook/main.ts
+    config.plugins = config.plugins!.flat().map((plugin) => {
+      if (
+        typeof plugin === 'object' &&
+        plugin !== null &&
+        'name' in plugin &&
+        plugin.name === 'vite-plugin-storybook-nextjs-image'
+      ) {
+        return {
+          ...plugin,
+          resolveId(id, importer) {
+            if (id.endsWith('.svg')) {
+              return null;
+            }
+
+            // @ts-expect-error `resolveId` hook of vite-plugin-storybook-nextjs-image is a function
+            return plugin.resolveId(id, importer);
+          },
+        };
+      }
+      return plugin;
     });
+
+    config.plugins = [...config.plugins];
+
+    return config;
   },
 };
 export default config;

.storybook/preview.tsx

@@ -1,13 +1,34 @@
+import { initialize, mswLoader } from 'msw-storybook-addon';
 import '../app/global.css';
+import type { Preview } from '@storybook/nextjs-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import React from 'react';
-import '../app/global.css';
+// initialize MSW
+initialize({
+  onUnhandledRequest: (req, print) => {
+    // supress warnings for requesting static assets
+    const isStaticAssetRequest =
+      /(public|assets)\/(.*?)\.|(svg|jpg|jpeg|png|webp)(\?.*)?$/g;
 
-import QueryProvider from '../src/app/provider/query-provider';
+    if (isStaticAssetRequest.test(req.url)) {
+      return;
+    }
+    print.warning();
+  },
+});
 
-import type { Preview } from '@storybook/react';
+// test query client for not caching results
+const testQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 0,
+      retry: false,
+    },
+  },
+});
 
 const preview: Preview = {
+  // mocking APIs of server interaction
   parameters: {
     controls: {
       matchers: {
@@ -19,12 +40,15 @@ const preview: Preview = {
       appDirectory: true,
     },
   },
+  loaders: [mswLoader],
   decorators: [
-    (Story) => (
-      <QueryProvider>
-        <Story />
-      </QueryProvider>
-    ),
+    (Story) => {
+      return (
+        <QueryClientProvider client={testQueryClient}>
+          <Story />
+        </QueryClientProvider>
+      );
+    },
   ],
 };
 

.storybook/vitest.setup.ts

@@ -1,9 +1,11 @@
 import { beforeAll } from 'vitest';
-import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite';
+import { setProjectAnnotations } from '@storybook/nextjs-vite';
 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]);
+const annotaions = setProjectAnnotations([projectAnnotations]);
+
+// Run Storybook's beforeAll hook
+beforeAll(annotaions.beforeAll);
 
-beforeAll(project.beforeAll);

package.json

@@ -44,15 +44,11 @@
     "zustand": "^5.0.3"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
+    "@chromatic-com/storybook": "^4.0.1",
     "@rushstack/eslint-config": "^4.1.1",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/experimental-addon-test": "^8.6.12",
-    "@storybook/experimental-nextjs-vite": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@storybook/addon-docs": "^9.0.12",
+    "@storybook/addon-vitest": "^9.0.12",
+    "@storybook/nextjs-vite": "^9.0.12",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/eslint-plugin-query": "^5.66.1",
     "@tanstack/react-query": "^5.66.0",
@@ -64,7 +60,7 @@
     "@typescript-eslint/parser": "^8.24.0",
     "@vitest/browser": "^3.1.1",
     "@vitest/coverage-v8": "^3.1.1",
-    "chromatic": "^11.28.0",
+    "chromatic": "^13.0.1",
     "eslint": "^8.57.0",
     "eslint-config-next": "^15.1.7",
     "eslint-config-prettier": "^10.0.1",
@@ -73,13 +69,21 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "eslint-plugin-storybook": "^0.12.0",
+    "msw": "^2.10.2",
+    "msw-storybook-addon": "^2.0.5",
     "playwright": "^1.51.1",
     "prettier": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "shadcn": "^2.4.0-canary.6",
-    "storybook": "^8.6.12",
+    "storybook": "^9.0.12",
     "typescript": "^5",
     "typescript-eslint": "^8.24.0",
+    "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.1.1"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }