Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#608 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
30/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Empieza reproduciendo la animación defectuosa con las configuraciones de AppRouter, AuthStack y MainStack mostradas en el issue. Inspecciona cómo se comportan basicUIPlugin y historySyncPlugin cuando la navegación cruza los límites de /auth/* y /app/*; esto debería establecer si esta composición es compatible y documentar la estructura recomendada de múltiples stacks.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

페이지들을 성격에 따라 분류해 몇개의 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

Lenguaje dominante
TypeScript
Estrellas
1k
Forks
114
Merge medio
59 min
PR fusionados (30 d)
4

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de daangn/stackflow

Todos los issues de daangn/stackflow

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.