Feature/#7 공통 컴포넌트 구현

apps/storybook/.storybook/main.ts

@@ -1,24 +1,44 @@
 import type { StorybookConfig } from '@storybook/nextjs'
 
 const config: StorybookConfig = {
-  stories: [
-    '../stories/**/*.mdx',
-    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-    // '../../../packages/ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-  ],
+  stories: ['../../../packages/ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@chromatic-com/storybook',
     '@storybook/addon-docs',
     '@storybook/addon-a11y',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: {
+                  importLoaders: 1,
+                },
+              },
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: [['@tailwindcss/postcss', {}]],
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
   framework: {
     name: '@storybook/nextjs',
     options: {},
   },
-  staticDirs: [
-    '../../../packages/ui/public', // UI 컴포넌트용 리소스
-    '../public', // Storybook 전용 리소스
-  ],
+  staticDirs: ['../../../packages/ui/public'],
 }
 
 export default config

apps/storybook/.storybook/preview.ts

@@ -1,14 +1,15 @@
 import type { Preview } from '@storybook/nextjs'
+import '@repo/styles'
 
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
+        color: /(background|color)$/i,
+        date: /Date$/i,
       },
     },
   },
-};
+}
 
-export default preview;
+export default preview

apps/storybook/package.json

@@ -11,27 +11,31 @@
     "@repo/ui": "workspace:^"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.0",
+    "@eslint/eslintrc": "^3",
     "@repo/eslint-config": "workspace:*",
     "@repo/tailwind-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@chromatic-com/storybook": "^4.1.0",
-    "@eslint/eslintrc": "^3",
     "@storybook/addon-a11y": "^9.1.0",
     "@storybook/addon-docs": "^9.1.0",
+    "@storybook/addon-styling-webpack": "^2.0.0",
     "@storybook/nextjs": "^9.1.0",
-    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/postcss": "^4.1.5",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@typescript-eslint/eslint-plugin": "^8.38.0",
     "@typescript-eslint/parser": "^8.38.0",
     "chromatic": "^13.1.3",
+    "css-loader": "^7.1.2",
     "eslint": "^9.32.0",
     "eslint-config-next": "15.4.5",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-storybook": "^9.1.0",
+    "postcss-loader": "^8.1.1",
     "storybook": "^9.1.0",
-    "tailwindcss": "^4",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^4.1.5",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.37.0"
   }