Merge pull request #134 from Boggle-Boggle/refactor/129

[Refactor/129] 버튼컴포넌트 리팩토링

Author: devkyoung2

.eslintrc.cjs

@@ -9,15 +9,7 @@ module.exports = {
     project: './tsconfig.json',
     tsconfigRootDir: './',
   },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-    'airbnb',
-    'airbnb/hooks',
-    'airbnb-typescript',
-    'prettier',
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'airbnb', 'airbnb/hooks', 'airbnb-typescript', 'prettier', 'plugin:storybook/recommended'],
   ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.js', 'tailwind.config.cjs'],
   plugins: ['@typescript-eslint', 'react-refresh'],
   rules: {

.gitignore

@@ -25,3 +25,6 @@ dist-ssr
 *.sln
 *.sw?
 
+
+*storybook.log
+storybook-static

.storybook/main.ts

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

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import '../src/main.css';
+
+import type { Preview } from '@storybook/react-vite';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@react-three/drei": "^9.117.3",
@@ -23,14 +25,17 @@
     "zustand": "^4.5.4"
   },
   "devDependencies": {
+    "@storybook/react-vite": "^9.0.15",
     "@tanstack/react-query": "^5.51.14",
+    "@types/node": "^24.0.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/three": "^0.170.0",
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "@typescript-eslint/parser": "^7.17.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.19",
+    "chromatic": "^13.1.2",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
@@ -39,13 +44,20 @@
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-storybook": "^9.0.15",
     "postcss": "^8.4.40",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
+    "storybook": "^9.0.15",
     "tailwindcss": "^3.4.7",
-    "typescript": "^5.2.2",
+    "typescript": "^5.5.4",
     "vite": "^5.3.4",
     "vite-plugin-svgr": "^4.3.0"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "ast-types": "patches/ast-types.patch"
+    }
   }
 }

patches/ast-types.patch

@@ -0,0 +1,15 @@
+diff --git a/lib/main.d.ts b/lib/main.d.ts
+index 9b54fef0086ea0c99368d8a95f2476e5dcd6d9c1..0091ed7f542f0c59a004e31dc1b62b42d26937d5 100644
+--- a/lib/main.d.ts
++++ b/lib/main.d.ts
+@@ -1,7 +1,7 @@
+-import { ASTNode, Type, AnyType, Field } from "./types";
+-import { NodePath } from "./node-path";
++import type { ASTNode, Type, AnyType, Field } from "./types";
++import type { NodePath } from "./node-path";
+ import { namedTypes } from "./gen/namedTypes";
+-import { builders } from "./gen/builders";
++import type { builders } from "./gen/builders";
+ import { Visitor } from "./gen/visitor";
+ declare const astNodesAreEquivalent: {
+     (a: any, b: any, problemPath?: any): boolean;