Stackflow의 UI플러그인이 Stack + React Router 구조에서 비정상적으로 동작합니다.

[kimyounghee425]

페이지들을 성격에 따라 분류해 몇개의 Stack 을 만들었습니다. 같은 Stack 내의 페이지들끼리는 stackflow 가 라우팅 처리를 하고, 다른 Stack 의 페이지로 이동할 시에는 리액트 라우터가 라우팅을 합니다.

같은 Stack 내의 페이지들은 url 베이스를 통일시켰고, 와일드카드를 추가해 라우터는 베이스url 만 구분하게 하였습니다. 그래서 베이스url 이 달라질 때에만 (서로 다른 Stack 으로 페이지 이동을 할 때에만) 리액트 라우터가 동작하게 하는게 의도였습니다.

그런데 기존의 stackflow 로만 페이지들을 관리할 때는 페이지 전환 애니메이션(UI플러그인) 이 깨지지 않았는데 같이 사용을 하니까 애니메이션이 정상적으로 동작을 하지 않는 문제가 발생하였습니다.

제 설계가 충돌을 일으킬만한, 혹은 stackflow 의 철학과 맞지 않는 설계인지 궁금합니다! Stackflow의 플러그인/애니메이션/히스토리 체계에서, React Router + 여러 스택 조합이 애초에 Stackflow 설계 철학과 충돌하는 구조인지 궁금합니다. 만약 그렇다면, 페이지들을 관심사별로 stack 으로 묶어 여러 스택으로 페이지들을 관리하고 싶을 때 어떻게 하는지 궁금합니다.

---

현재 구조

React Router

앱의 상위 구획(인증 / 메인 앱)을 구분하는 데 사용 /auth/* → AuthStack /app/* → MainStack 최상위 진입 시 /auth/login으로 리다이렉트

const AppRouter = () => {
  const router = createBrowserRouter([
    {
      path: '/',
      element: <Navigate to="/auth/login" replace />,
    },
    {
      path: '/auth/*',
      element: <AuthStack />,
    },
    {
      path: '/app/*',
      element: <MainStack />,
    },
    {
      path: '*',
      element: <div>404 Not Found</div>,
    },
  ])

  return <RouterProvider router={router} />
}

Stackflow - AuthStack

/auth/* 경로에서 작동 Stackflow가 내부 액티비티(페이지) 전환 관리 등록된 액티비티: Login → /auth/login TeamSelect → /auth/team-select NickName → /auth/nickname

export const { Stack: AuthStack, useFlow: useAuthFlow } = stackflow({
  transitionDuration: 350,
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({ theme: 'cupertino' }),
    historySyncPlugin({
      routes: {
        Login: '/auth/login',
        TeamSelect: '/auth/team-select',
        NickName: '/auth/nickname',
      },
      fallbackActivity: () => 'Login',
    }),
  ],
  activities: {
    Login: LoginPage,
    TeamSelect: TeamSelectPage,
    NickName: NickNamePage,
  },
})

Stackflow - MainStack

/app/* 경로에서 작동 Stackflow가 내부 액티비티(페이지) 전환 관리 등록된 액티비티: Home → /app/home LiveRecord → /app/live-record

export const { Stack: MainStack, useFlow: useMainFlow } = stackflow({
  transitionDuration: 350,
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: 'cupertino', // cupertino | android 두가지 옵션 있음
    }),
    historySyncPlugin({
      routes: {
        Home: '/app/home',
        LiveRecord: '/app/live-record',
      },
      fallbackActivity: () => 'Home',
    }),
  ],
  activities: {
    Home: HomePage,
    LiveRecord: LiveRecordPage,
  },
})

base url 과 와일드카드를 사용해 리액트 라우터가 baseurl 이 달라질 때에만 동작하도록 의도했는데 Stack 내에서 페이지 이동을 할 때 애니메이션이 깨집니다.

https://github.com/user-attachments/assets/56b391b4-c675-4934-bca8-f3a1f16b3799