chore: 스토리북을 재시작하면 Vite를 사용하여 더 빠르게 실행

Author: yyezzzy

.storybook/main.ts

@@ -1,5 +1,8 @@
 import type { StorybookConfig as BaseStorybookConfig } from "@storybook/nextjs";
+import { mergeConfig } from "vite";
+import path from "path";
 
+// StorybookConfig 인터페이스 확장
 interface StorybookConfig extends BaseStorybookConfig {
   viteFinal?: (config: any) => Promise<any>;
 }
@@ -18,33 +21,35 @@ const config: StorybookConfig = {
     options: {},
   },
   staticDirs: ["../public"],
+  core: {
+    builder: "@storybook/builder-vite", // Vite 빌더 사용
+  },
   async viteFinal(config) {
-    config.css = {
-      postcss: {
-        plugins: [require("tailwindcss"), require("autoprefixer")],
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          "@": path.resolve(__dirname, "../src"),
+          "react-beautiful-dnd": path.resolve(__dirname, "../node_modules/react-beautiful-dnd"),
+        },
+      },
+      css: {
+        postcss: {
+          plugins: [require("tailwindcss"), require("autoprefixer")],
+        },
+      },
+      optimizeDeps: {
+        include: ["react-beautiful-dnd"],
+      },
+      build: {
+        commonjsOptions: {
+          include: [/react-beautiful-dnd/, /node_modules/],
+        },
       },
-    };
-    return config;
+    });
   },
   docs: {
     autodocs: "tag",
   },
-  webpackFinal: async (config) => {
-    // webpack 설정 수정
-    config.resolve = {
-      ...config.resolve,
-      fallback: {
-        ...config.resolve?.fallback,
-        fs: false,
-        path: false,
-      },
-      alias: {
-        ...config.resolve?.alias,
-        "react-beautiful-dnd": require.resolve("react-beautiful-dnd"),
-      },
-    };
-    return config;
-  },
 };
 
 export default config;

src/app/stories/design-system/components/input/image/ImageInput.stories.tsx

@@ -25,4 +25,4 @@ export const Upload_Image: Story = {
       console.log("Images changed:", images);
     },
   },
-};
+};