🧪 storybook을 활용한 로그인, 회원가입 테스트 코드 작성

.gitignore

@@ -38,3 +38,5 @@ dist-ssr
 # Ignore all local history of files
 .history
 .ionide
+
+storybook-static/*

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import tailwindcss from '@tailwindcss/vite';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { mergeConfig } from 'vite';
+
+const dir = fileURLToPath(new URL('.', import.meta.url));
+
+const config: StorybookConfig = {
+  stories: ['../src/stories/**/*.stories.@(ts|tsx)'],
+  addons: ['msw-storybook-addon'],
+  framework: { name: '@storybook/react-vite', options: {} },
+  staticDirs: ['../public'],
+  viteFinal: (viteConfig) =>
+    mergeConfig(viteConfig, {
+      plugins: [tailwindcss()],
+      resolve: { alias: { '@': path.resolve(dir, '../src') } },
+    }),
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,42 @@
+import type { Preview } from '@storybook/react-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+import { MemoryRouter } from 'react-router';
+import { implAuthUsecase } from '../src/feature/auth/usecase/auth-usecase';
+import { UsecaseContext } from '../src/feature/shared/context/usecase-context';
+import { externalCall, implApi } from '../src/infrastructure/api';
+import { handlers } from '../src/mocks/handlers';
+import '../src/index.css';
+
+initialize({ onUnhandledRequest: 'bypass' });
+
+const preview: Preview = {
+  parameters: {
+    msw: { handlers },
+  },
+  loaders: [mswLoader],
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: { refetchOnWindowFocus: false, retry: false },
+          mutations: { retry: false },
+        },
+      });
+      const api = implApi({ externalCall });
+      const authUsecase = implAuthUsecase({ api });
+
+      return (
+        <MemoryRouter>
+          <QueryClientProvider client={queryClient}>
+            <UsecaseContext.Provider value={{ authUsecase }}>
+              <Story />
+            </UsecaseContext.Provider>
+          </QueryClientProvider>
+        </MemoryRouter>
+      );
+    },
+  ],
+};
+
+export default preview;

biome.json

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "includes": ["**", "!dist", "!node_modules"]
+    "includes": ["**", "!dist", "!node_modules", "!bookstory-static/**"]
   },
   "formatter": {
     "enabled": true,
@@ -173,6 +173,16 @@
           }
         }
       }
+    },
+    {
+      "includes": [".storybook/**", "src/stories/**"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noDefaultExport": "off"
+          }
+        }
+      }
     }
   ],
   "html": {

package.json

@@ -10,7 +10,9 @@
     "lint": "biome lint .",
     "check:types": "tsc",
     "check:format": "biome check .",
-    "check-all": "pnpm check:types && pnpm check:format"
+    "check-all": "pnpm check:types && pnpm check:format",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@fontsource-variable/geist": "^5.2.9",
@@ -31,12 +33,15 @@
   "devDependencies": {
     "@biomejs/biome": "2.4.15",
     "@rolldown/plugin-babel": "^0.2.3",
+    "@storybook/react-vite": "^10.4.1",
     "@types/node": "^25.8.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "msw": "^2.14.6",
+    "msw-storybook-addon": "^2.0.7",
+    "storybook": "^10.4.1",
     "typescript": "~6.0.2",
     "vite": "^8.0.12"
   },