[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: [],
+  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-vite";
+
+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,6 +1,8 @@
+// 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";
+import storybook from "eslint-plugin-storybook";
 import globals from "globals";
 import tseslint from "typescript-eslint";
 
@@ -42,4 +44,5 @@ export default [
     files: ["**/*.{js,mjs,cjs}"],
     ...tseslint.configs.disableTypeChecked,
   },
+  ...storybook.configs["flat/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",
@@ -57,7 +59,10 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.53.0",
     "vite": "^7.2.4",
-    "vite-plugin-svgr": "^4.5.0"
+    "vite-plugin-svgr": "^4.5.0",
+    "storybook": "^10.2.10",
+    "@storybook/react-vite": "^10.2.10",
+    "eslint-plugin-storybook": "^10.2.10"
   },
   "lint-staged": {
     "*.{ts,tsx}": [