[React, Storybook] Provider, Context 설정

 

어느순간..

 

다시 Storybook을 하게 된 나..

Nextjs로 Storybook 연동해서 하고 있는데,

아 이거 전역으로 주입하는 친구들은 Storybook에서 잘 못읽는다.

나같은 경우는 MUI나 커스텀 테마등등을 Nextjs에서 셋팅한 것과 똒같이 하고 싶었당.

찾아도 안나오고 아효 ㅡㅡ

Nextjs AppRouter경우는 layout.tsx
일반은 page.tsx에 전역으로 설정하는 친구들을

Storybook에선 요렇게 한다.

 

.storybook

전역설정(테마, 주입 기타등등)하고 싶은 친구들 만든다.

전역설정.tsx

const 개인테마 = 테마 ();

export const 이걸쓰세여 = (Story) => (
  <ThemeProvider theme={theme}>
    <AnimatePresence>
      <CssBaseline />
      <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale="ko">
        <Story />
      </LocalizationProvider>
    </AnimatePresence>
  </ThemeProvider>
);

 

 

preview.tsx

import { 이걸쓰세여 } from './전역설정';

export const decorators = [이걸쓰세여];

 

 

Easy~~