[Setting/#33] 스토리북 도입 및 세팅

.gitignore

@@ -23,4 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 .env
-node_modules/
+node_modules/
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,8 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-essentials"],
+  framework: "@storybook/react-vite",
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import "../src/index.css";
+
+import { MemoryRouter } from "react-router-dom";
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

eslint.config.js

@@ -1,3 +1,4 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
 import pluginJs from "@eslint/js";
 import typescriptParser from "@typescript-eslint/parser";
 import prettierPluginRecommended from "eslint-plugin-prettier/recommended";

package.json

@@ -8,7 +8,9 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "prepare": "husky",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
@@ -32,13 +34,17 @@
     "@commitlint/cli": "^20.3.1",
     "@commitlint/config-conventional": "^20.3.1",
     "@eslint/js": "^9.39.2",
+    "@storybook/addon-essentials": "8.6.17",
+    "@storybook/react": "8.6.17",
+    "@storybook/react-vite": "8.6.17",
+    "@storybook/test": "8.6.17",
     "@tailwindcss/forms": "^0.5.11",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.53.0",
     "@typescript-eslint/parser": "^8.53.0",
-    "@vitejs/plugin-react-swc": "^4.2.2",
+    "@vitejs/plugin-react-swc": "^3.11.0",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
@@ -54,9 +60,10 @@
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "prettier": "^3.7.4",
+    "storybook": "8.6.17",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.53.0",
-    "vite": "^7.2.4",
+    "vite": "^6.4.1",
     "vite-plugin-svgr": "^4.5.0"
   },
   "lint-staged": {