config: 스토리북에 theme관련 설정 추가

1. 스토리북 themeProvider 적용 2. 스토리북 디렉터리 하위에도 tsc 적용되도록 설정 추가
woowacourse-teams · Jul 27, 2023 · a4f10b4 · a4f10b4
1 parent a5aa32b
commit a4f10b4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
@@ -7,6 +7,7 @@ const config: StorybookConfig = {
  '@storybook/addon-links',
  '@storybook/addon-essentials',
  '@storybook/addon-interactions',
+ '@storybook/addon-styling',
  ],
  framework: {
  name: '@storybook/react-webpack5',

diff --git a/frontend/.storybook/preview.ts → frontend/.storybook/preview.tsx b/frontend/.storybook/preview.ts → frontend/.storybook/preview.tsx
@@ -1,6 +1,8 @@
 import type { Preview } from '@storybook/react';
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
 import GlobalStyles from '../src/styles/GlobalStyles';
+import { ThemeProvider } from 'styled-components';
+import theme from '../src/styles/theme';
 
 const preview: Preview = {
  parameters: {
@@ -12,7 +14,14 @@ const preview: Preview = {
  },
  },
  },
- decorators: [withThemeFromJSXProvider({ GlobalStyles })],
+ decorators: [
+ (Story) => (
+ <ThemeProvider theme={theme}>
+ <Story />
+ </ThemeProvider>
+ ),
+ withThemeFromJSXProvider({ GlobalStyles }),
+ ],
 };
 
 export default preview;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -18,5 +18,5 @@
  "@/*": ["src/*"]
  }
  },
- "include": ["src"]
+ "include": ["src", ".storybook/*"]
 }