Merge pull request #175 from read-a-perfume/feature/nys

fix: storybook 쿼리클라이언트 및 라우팅 에러 해결
read-a-perfume · Jan 29, 2024 · 3488a96 · 3488a96
2 parents cf743eb + ca3d67f
commit 3488a96
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 232 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    'storybook-addon-react-router-v6',
   ],
   core: {
     builder: '@storybook/builder-vite',

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -2,6 +2,8 @@ import type {Preview} from '@storybook/react'
 import {CssBaseline, ThemeProvider} from '@mui/material'
 import {theme} from '../src/theme/index'
 import React from 'react'
+import {withRouter} from 'storybook-addon-react-router-v6'
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
 
 export const preview: Preview = {
   parameters: {
@@ -13,18 +15,23 @@ export const preview: Preview = {
         date: /Date$/,
       },
     },
+    reactRouter: {routePath: ''},
   },
 }
 
+const client = new QueryClient()
+
 //MUI 테마연동
 
 export const withMuiTheme = Story => {
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Story />
-    </ThemeProvider>
+    <QueryClientProvider client={client}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Story />
+      </ThemeProvider>
+    </QueryClientProvider>
   )
 }
 
-export const decorators = [withMuiTheme]
+export const decorators = [withRouter, withMuiTheme]