Stackflow의 UI플러그인이 Stack + React Router 구조에서 비정상적으로 동작합니다.
まだ誰も着手していません。
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 30/100
- issue の種類
- バグ
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
まず、issue に示されている AppRouter、AuthStack、MainStack の構成で壊れたアニメーションを再現します。ナビゲーションが /auth/* と /app/* の境界をまたぐときに、basicUIPlugin と historySyncPlugin がどのように動作するかを調査します。これにより、この構成がサポートされているかどうかを確認し、推奨されるマルチスタック構造を文書化できるはずです。
索引モデルが issue の本文から書いたものです。
説明
페이지들을 성격에 따라 분류해 몇개의 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
- 主要言語
- TypeScript
- スター
- 1k
- フォーク
- 114
- 平均マージ
- 59分
- マージ済み PR（30日）
- 4
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
daangn/stackflow のほかの issue
-
스와이프 백 애니메이션 덜컥임 이슈再び着手できるかも @Shennng が 220 日前に担当しましたが、オープン中のプルリクエストはありません。 オープン
難易度 4/5 3〜5日 初心者へのやさしさ 45/100
-
Vue3 지원 계획オープン
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
-
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
-
難易度 5/5 1週間以上 初心者へのやさしさ 18/100
-
難易度 4/5 3〜5日 初心者へのやさしさ 25/100
daangn/stackflow の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
one-zero-eight/apply-bot#39 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
bigbluebutton/bbb-ui-components-react#108 ·
メンテナーはふだん 2 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
メンテナーはふだん 1 日以内に返信
-
high priority
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
CI-CMG/deep-sea-corals-exb#84 · コメント 1 件 ·