From 66eba02537bdd4427f28f32fafe165214e17f2f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9E=AC=EC=98=81?= <dioo1461@gmail.com>
Date: Sun, 22 Jun 2025 21:31:12 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20storybook=20=EC=84=B8=ED=8C=85=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/packages/calendar/.storybook/main.ts | 42 +++++++++++++++++++
 .../packages/calendar/.storybook/preview.ts   | 16 +++++++
 frontend/packages/calendar/package.json       |  4 +-
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 frontend/packages/calendar/.storybook/main.ts
 create mode 100644 frontend/packages/calendar/.storybook/preview.ts

diff --git a/frontend/packages/calendar/.storybook/main.ts b/frontend/packages/calendar/.storybook/main.ts
new file mode 100644
index 00000000..b66e7ae4
--- /dev/null
+++ b/frontend/packages/calendar/.storybook/main.ts
@@ -0,0 +1,42 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { vanillaExtractPlugin as veEsbuildPlugin } from '@vanilla-extract/esbuild-plugin';
+import { vanillaExtractPlugin as veVitePlugin } from '@vanilla-extract/vite-plugin';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  viteFinal: async (config) => {
+    const { mergeConfig } = await import('vite');
+    const filename = fileURLToPath(import.meta.url);
+    const dirname = path.dirname(filename);
+
+    return mergeConfig(
+      config,
+      {
+        plugins: [veVitePlugin()],
+        optimizeDeps: {
+          esbuildOptions: {
+            plugins: [veEsbuildPlugin({ runtime: true })],
+          },
+        },
+        resolve: {
+          alias: {
+            '@': path.resolve(dirname, '../src'),
+            '@hooks': path.resolve(dirname, '../src/hooks'),
+            '@components': path.resolve(dirname, '../src/components'),
+          },
+        },
+      });
+  },
+};
+export default config;
diff --git a/frontend/packages/calendar/.storybook/preview.ts b/frontend/packages/calendar/.storybook/preview.ts
new file mode 100644
index 00000000..3792e452
--- /dev/null
+++ b/frontend/packages/calendar/.storybook/preview.ts
@@ -0,0 +1,16 @@
+import '@endolphin/theme/css';
+
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/frontend/packages/calendar/package.json b/frontend/packages/calendar/package.json
index bbabf62a..41ee13f8 100644
--- a/frontend/packages/calendar/package.json
+++ b/frontend/packages/calendar/package.json
@@ -11,7 +11,9 @@
   "scripts": {
     "build": "tsup --clean",
     "start": "tsup --watch",
-    "test": "vitest"
+    "test": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "publishConfig": {
     "access": "public"