Storybook Router ?

[healtheloper]

@jindonyy @mina-gwak @hemudi

혹시 Storybook 에서 Routes 를 설정하신 적이 있으신지 여쭤봅니다

Page 단위로도 Storybook 을 작성한다고 하기도 했었던 기억이 있어서 loginPage 를 storybook 에 올렸었는데요,

지금 PR push 가 제대로 github action 이 돌아가지 않아서 원인을 찾다보니 page 가 제대로 보여지지 않는다는 것도 확인했는데
사용하신 법이 있는지 질문합니다

뭔가 Preview 에 decorator 를 잘 만지면 될 것같은 느낌도 들긴 하네요..

export const decorators = [
  (Story) => {
    const isDarkMode = false;
    // window.matchMedia &&
    // window.matchMedia('(prefers-color-scheme: dark)').matches;

    return (
      <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
        <GlobalStyle />
        <Story /> // 원래 앱에서는 여기서 <Routes />
      </ThemeProvider>
    );
  },
  mswDecorator,
];

[mina-gwak]

페이지가 제대로 보여지지 않는다는 게 정확히 어떤 부분에서 문제가 있는 건지 잘 모르겠는데 혹시 좀 더 자세하게 설명해주실 수 있을까요?

[healtheloper]

아 죄송합니다 질문이 좀 불친절 했네요 ㅋㅋ

loginPage 의 story 가 현재 이 상황인데, useNavigate 를 사용할 때 BrowserRouter 로 감싸주지 않아서 생기는 문제라고 하더라구요
StoryBook 에서는 별도로 감싸주지 않았으니, 관련된 경험이 있었는지 궁금했습니다.

[mina-gwak]

아하 이 부분은 저 같은 경우엔 말씀하신대로 BrowserRouter로 감싸줘서 해결했었습니다! 스토리북에서 GlobalStyle이나 Theme을 사용하려면 데코레이터에 추가해줘야하는 것처럼 라우터도 마찬가지라서 데코레이터에 추가해주시면 될 것 같아요!

export const decorators = [
  (Story) => {
    const isDarkMode = false;
    // window.matchMedia &&
    // window.matchMedia('(prefers-color-scheme: dark)').matches;

    return (
      <BrowserRouter>
        <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
          <GlobalStyle />
          <Story /> // 원래 앱에서는 여기서 <Routes />
        </ThemeProvider>
      </BrowserRouter>
    );
  },
  mswDecorator,
];

[healtheloper]

간단하네요 ㅋㅋㅋ 감사합니다 😊

[healtheloper]

BrowserRouter 로 감싸서 간단히 해결은 가능한데, Outlet 을 적용하는 페이지와 아닌 페이지 구분하는 것도 좀 고민해봐야겠네요

StudyCreationPage 는 Header 가 있어야 하고, LoginPage 는 없어도 되는데 이를 분기할 방법?