chore: storybook emotion 설정

- storybookjs/storybook#7540

.storybook/main.ts

@@ -1,3 +1,4 @@
+const path = require('path');
 import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
@@ -7,13 +8,18 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    '@storybook/addon-styling',
   ],
   framework: {
     name: '@storybook/nextjs',
-    options: {},
+    options: { nextConfigPath: path.resolve(__dirname, '../next.config.js') },
   },
   docs: {
     autodocs: 'tag',
   },
+  babel: async options => {
+    options.presets!.push('@emotion/babel-preset-css-prop');
+    return options;
+  },
 };
 export default config;

.storybook/preview.tsx

@@ -0,0 +1,34 @@
+const path = require('path');
+
+import type { Preview } from '@storybook/react';
+import React from 'react';
+import GlobalStyle from '../src/styles/globalStyle';
+
+const preview: Preview = {
+  decorators: [
+    Story => (
+      <div>
+        <GlobalStyle />
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    webpackFinal: async config => {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '~': path.resolve(__dirname, '../src/'),
+      };
+      return config;
+    },
+  },
+};
+
+export default preview;

package.json

@@ -34,11 +34,13 @@
   "devDependencies": {
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
     "@next/bundle-analyzer": "^13.2.1",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-interactions": "^7.4.0",
     "@storybook/addon-links": "^7.4.0",
     "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.7",
     "@storybook/blocks": "^7.4.0",
     "@storybook/nextjs": "^7.4.0",
     "@storybook/react": "^7.4.0",