Merge pull request #9 from Nexters/feat/storybook-driverjs

[설정/온보딩] 스토리북 세팅 및 driverjs 예제작업

Author: minsgy

.gitignore

@@ -23,3 +23,6 @@ dist-ssr
 
 # TanStack Router generated files
 .tanstack
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs",
+    "@storybook/addon-a11y",
+    "@storybook/addon-vitest"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,38 @@
+import type { Decorator, Preview } from "@storybook/react-vite";
+import "../src/index.css";
+import {
+  createRootRoute,
+  createRouter,
+  RouterProvider,
+} from "@tanstack/react-router";
+
+const RouterDecorator: Decorator = (Story) => {
+  const rootRoute = createRootRoute({ component: () => <Story /> });
+  const routeTree = rootRoute;
+  const router = createRouter({ routeTree });
+  return <RouterProvider router={router} />;
+};
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        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",
+    },
+  },
+  initialGlobals: {
+    viewport: { value: "iphone6" },
+  },
+  decorators: [RouterDecorator],
+};
+
+export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-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
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["bradlc.vscode-tailwindcss", "biomejs.biome"]
+}

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.defaultFormatter": "biomejs.biome",
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "explicit"
+    "source.fixAll.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
   }
 }

biome.json

@@ -20,6 +20,13 @@
       "semicolons": "always"
     }
   },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  },
   "vcs": {
     "enabled": true,
     "clientKind": "git",

package.json

@@ -11,21 +11,29 @@
     "format": "biome format --write .",
     "lint": "biome lint .",
     "check": "biome check --apply .",
-    "generate": "orval --config orval.config.ts"
+    "generate": "orval --config orval.config.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@hotjar/browser": "1.0.9",
     "@radix-ui/react-dialog": "1.1.14",
     "@radix-ui/themes": "3.2.1",
     "@tanstack/react-router": "1.127.8",
     "axios": "1.11.0",
+    "driver.js": "^1.3.6",
     "embla-carousel-react": "8.6.0",
     "js-cookie": "3.0.5",
     "react": "19.1.0",
     "react-dom": "19.1.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.1.1",
+    "@chromatic-com/storybook": "^4.0.1",
+    "@storybook/addon-a11y": "^9.0.18",
+    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-vitest": "^9.0.18",
+    "@storybook/react-vite": "^9.0.18",
     "@tanstack/react-router-devtools": "1.127.8",
     "@tanstack/router-vite-plugin": "1.127.8",
     "@types/js-cookie": "3.0.6",
@@ -35,9 +43,14 @@
     "msw": "2.10.4",
     "orval": "7.10.0",
     "postcss": "8",
+    "storybook": "^9.0.18",
     "tailwindcss": "3.4.17",
     "typescript": "5.8.3",
-    "vite": "7.0.4"
+    "vite": "7.0.4",
+    "vitest": "^3.2.4",
+    "@vitest/browser": "^3.2.4",
+    "playwright": "^1.54.1",
+    "@vitest/coverage-v8": "^3.2.4"
   },
   "msw": {
     "workerDirectory": [