storybook decorator 설정 (#95)

.storybook/main.ts

@@ -22,6 +22,12 @@ const config: StorybookConfig = {
     options.presets!.push('@emotion/babel-preset-css-prop');
     return options;
   },
+  staticDirs: [
+    {
+      from: '../src/assets/fonts',
+      to: 'src/assets/fonts'
+    }
+  ]
 };
 
 export default config;

.storybook/preview.tsx

@@ -0,0 +1,28 @@
+import { ThemeProvider } from '@emotion/react';
+import type { Preview } from '@storybook/react';
+import React from 'react';
+import { pretendard } from "../src/assets/fonts/pretendard"
+import defaultTheme from "../src/styles/theme";
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultTheme}>
+        <div className={pretendard.className} style={{ width: "100%", maxWidth: "480px", margin: "0 auto"}}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

src/styles/color.stories.tsx

@@ -1,8 +1,6 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { type Meta } from '@storybook/react';
 
-import defaultTheme from '~/styles/theme';
-
 const meta: Meta<typeof Default> = {
   title: 'Colors',
   component: Default,
@@ -12,7 +10,7 @@ export default meta;
 
 export function Default() {
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <>
       <div css={headingCss}>Button</div>
       <div css={FlexBoxCss}>
         <div css={[(theme) => ({ backgroundColor: theme.colors.primary_200 }), BoxCss]} />
@@ -84,7 +82,7 @@ export function Default() {
         <span>$secondary-bluegreen</span>
         <span>$secondary-skyblue</span>
       </div>
-    </ThemeProvider>
+    </>
   );
 }
 

src/styles/typo.stories.tsx

@@ -1,7 +1,5 @@
 import { type Meta } from '@storybook/react';
 
-import { pretendard } from '~/assets/fonts/pretendard';
-
 import { BODY_1, BODY_2_BOLD, BODY_2_REGULAR, HEAD_1, HEAD_2_BOLD, HEAD_2_REGULAR } from './typo';
 
 const meta: Meta<typeof Default> = {
@@ -13,7 +11,7 @@ export default meta;
 
 export function Default() {
   return (
-    <div className={pretendard.className}>
+    <>
       <p>HEAD 1</p>
       <p css={HEAD_1}>동료의 익명 피드백으로 완성시키는 나의 커리어 브랜딩 서비스</p>
 
@@ -31,6 +29,6 @@ export function Default() {
 
       <p>BODY 2 REGULAR</p>
       <p css={BODY_2_REGULAR}>동료의 익명 피드백으로 완성시키는 나의 커리어 브랜딩 서비스</p>
-    </div>
+    </>
   );
 }