feat(stackflow): add FocusScope to AppScreen for focus management by te6-in · Pull Request #1464 · daangn/seed-design

te6-in · 2026-04-15T08:01:36Z

Summary by CodeRabbit

새로운 기능, 버그 수정 및 문서 업데이트

새로운 기능
- Menu, SideNavigation, Footer 컴포넌트 추가
- 레이아웃 컴포넌트의 반응형 값 지원 및 useBreakpoint, useBreakpointValue 훅 추가
- Layout, Footer 블록 프리셋 추가
버그 수정
- 마운트 상태 유지 시 AlertDialog, BottomSheet, MenuSheet의 모달 동작 개선
문서
- 반응형 디자인 가이드 및 예제 추가
- Menu, SideNavigation 컴포넌트 문서 작성
제거된 항목
- 더 이상 사용하지 않는 토큰 및 컴포넌트 옵션 정리

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

changeset-bot · 2026-04-15T08:01:50Z

⚠️ No Changeset found

Latest commit: 24140b0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-04-15T08:02:07Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 23644b8d-c963-4fd4-90b6-e951997339e3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

📝 Walkthrough

Walkthrough

다양한 새로운 컴포넌트(Menu, Footer, Side Navigation, Layout), 반응형 디자인 시스템, 및 PostCSS 기반 반응형 플러그인을 추가하고, Rootage 파서를 업데이트하며 광범위한 문서, 예제, 스토리를 확장합니다.

Changes

Cohort / File(s)	Summary
Changeset 제거 `.changeset/fix-image-frame-hidden.md`, `.changeset/menu-sheet-handle-rootage.md`	이전에 기록된 ImageFrame과 MenuSheet 관련 변경사항이 삭제되었습니다.
Storybook 및 문서 설정 `docs/.storybook/preview.ts`, `docs/stories/utils/parameters.ts`	breakpoints를 외부 모듈에서 임포트하고 VIEWPORT_MODES를 동적으로 생성하도록 변경되었습니다.
Token 및 Mode 관련 문서 `docs/content/docs/foundation/elevation.mdx`, `docs/content/docs/migration/deprecations.mdx`, `docs/content/react/components/image-frame.mdx`	더 이상 사용되지 않는 토큰 제거 및 문서 업데이트가 이루어졌습니다.
Components 문서 추가 `docs/content/react/components/(tabs)/chip-tabs.mdx`, `docs/content/react/components/(foundation)/layout/*.mdx`, `docs/content/react/components/alert-dialog.mdx`, `docs/content/react/components/help-bubble.mdx`, `docs/content/react/components/menu-sheet.mdx`, `docs/content/react/components/menu.mdx`	각 컴포넌트별 Trigger 접근성 설명, 예제 추가, 그리고 Menu 컴포넌트의 전체 문서화가 추가되었습니다.
반응형 디자인 문서 및 예제 `docs/content/react/components/concepts/responsive-design.mdx`, `docs/examples/react/responsive-design/*`	breakpoint 기반 반응형 디자인 시스템 전체 문서와 6개의 예제 파일이 추가되었습니다.
Blocks 문서 및 레지스트리 `docs/content/react/blocks/.mdx`, `docs/registry/block/AGENTS.md`, `docs/registry/block/footer-.tsx`, `docs/registry/block/layout-.tsx`, `docs/registry/block/side-navigation-.tsx`	Footer, Layout, Side Navigation 블록의 4가지 변형 및 2가지 변형 구현과 문서화가 추가되었습니다.
Icon 레지스트리 `docs/registry/icon/AGENTS.md`, `docs/registry/icon/icon-*.tsx`, `docs/registry/registry-icon.ts`	7개의 소셜 미디어 아이콘 컴포넌트와 아이콘 레지스트리가 추가되었습니다.
UI 컴포넌트 래퍼 `docs/registry/ui/chip-tabs.tsx`, `docs/registry/ui/menu.tsx`, `docs/registry/ui/side-navigation.tsx`	ChipTabs 래퍼 제거, Menu와 Side Navigation 새로운 래퍼 컴포넌트 추가가 이루어졌습니다.
레지스트리 업데이트 `docs/registry/registry-block.ts`, `docs/registry/registry-ui.ts`, `docs/scripts/generate-registry.ts`	8개의 블록 항목, Menu/SideNavigation UI 항목, 그리고 아이콘 레지스트리 생성 지원이 추가되었습니다.
Menu 예제 컴포넌트 `docs/examples/react/menu/*.tsx`	size, placement, tone, open-change-reason, anchor, disabled, match-reference-width, with-description, with-field-button를 포함한 9개의 Menu 예제가 추가되었습니다.
Storybook 스토리 추가 `docs/stories/Box.stories.tsx`, `docs/stories/Flex.stories.tsx`, `docs/stories/Grid.stories.tsx`, `docs/stories/Layout.stories.tsx`, `docs/stories/Menu.stories.tsx`, `docs/stories/ResponsivePair.stories.tsx`, `docs/stories/Stack.stories.tsx`, `docs/stories/FooterLinkText.stories.tsx`, `docs/stories/ImageFrame.stories.tsx`	반응형 및 새로운 컴포넌트 스토리가 여러 파일에 추가되었습니다.
BlockCodeTabs 컴포넌트 `docs/components/block-code-tabs.tsx`, `docs/components/mdx-components.tsx`	런타임 레지스트리 로딩 기능의 새로운 코드 탭 컴포넌트가 추가되었습니다.
기타 컴포넌트 수정 `docs/components/block-preview.tsx`, `docs/components/block-theme-listener.tsx`, `docs/components/react-version-switcher.tsx`	스타일 선택자 확장, 다크 모드 클래스 토글, alpha 버전 추가가 이루어졌습니다.
Token 해석 업데이트 `docs/app/docs/foundation/design-token/[id]/page.tsx`	mode 구조 변경에 따른 destructuring 업데이트가 이루어졌습니다.
PostCSS 반응형 플러그인 `ecosystem/postcss-responsive/src/index.ts`, `ecosystem/postcss-responsive/src/index.test.ts`, `ecosystem/postcss-responsive/tsconfig.json`	breakpoint 기반 CSS 커스텀 프로퍼티 생성 PostCSS 플러그인이 새로 추가되었습니다.
Rootage 파서 업데이트 `ecosystem/rootage/core/src/parser/ast.ts`, `ecosystem/rootage/core/src/parser/authoring/types.ts`, `ecosystem/rootage/core/src/parser/exchange/types.ts`, `ecosystem/rootage/core/src/parser/factory.ts`	Mode를 문자열에서 `{ id, description? }` 객체 구조로 변경했습니다.
Rootage 분석기 업데이트 `ecosystem/rootage/core/src/analyzer/resolver.ts`, `ecosystem/rootage/core/src/analyzer/resolver.test.ts`, `ecosystem/rootage/core/src/analyzer/validate.ts`, `ecosystem/rootage/core/src/analyzer/validate.test.ts`, `ecosystem/rootage/core/src/languages/css.ts`, `ecosystem/rootage/core/src/languages/exchange/index.ts`, `ecosystem/rootage/core/src/languages/css.test.ts`	Mode 객체 구조 변경에 맞춰 분석기, 검증, 언어 처리 로직이 업데이트되었습니다.
Qvism Preset 레시피 `packages/qvism-preset/src/recipes/menu.ts`, `packages/qvism-preset/src/recipes/footer.ts`, `packages/qvism-preset/src/recipes/layout.ts`, `packages/qvism-preset/src/recipes/side-navigation.ts`	Menu, Footer, Layout, Side Navigation 컴포넌트의 새로운 스타일 레시피가 추가되었습니다.
Qvism Preset 업데이트 `packages/qvism-preset/src/global.ts`, `packages/qvism-preset/src/index.ts`, `packages/qvism-preset/src/recipes.ts`, `packages/qvism-preset/src/utils/breakpoint.ts`, `packages/qvism-preset/src/seed-css.ts`, `packages/qvism-preset/src/recipes/action-button.ts`, `packages/qvism-preset/src/recipes/chip-tabs.ts`, `packages/qvism-preset/src/recipes/bottom-sheet.ts`, `packages/qvism-preset/src/recipes/dialog.ts`, `packages/qvism-preset/src/recipes/help-bubble.ts`, `packages/qvism-preset/src/recipes/image-frame.ts`, `packages/qvism-preset/src/recipes/list-item.ts`, `packages/qvism-preset/src/recipes/skeleton.ts`	반응형 CSS 커스텀 프로퍼티 지원, breakpoint 유틸리티, PostCSS 플러그인 통합, 기존 레시피 업데이트가 이루어졌습니다.
Stackflow SPA 활동 컴포넌트 `examples/stackflow-spa/src/activities/ActivityMenu.tsx`, `examples/stackflow-spa/src/activities/ActivitySideNavigation.tsx`	Menu와 Side Navigation 활동 컴포넌트가 추가되었습니다.
Stackflow SPA UI 래퍼 `examples/stackflow-spa/src/seed-design/ui/chip-tabs.tsx`, `examples/stackflow-spa/src/seed-design/ui/menu.tsx`, `examples/stackflow-spa/src/seed-design/ui/side-navigation.tsx`	Menu와 Side Navigation 래퍼가 추가되고 ChipTabs가 간소화되었습니다.
Stackflow SPA 기타 수정 `examples/stackflow-spa/src/activities/ActivityAlertDialog.tsx`, `examples/stackflow-spa/src/activities/ActivityBottomSheet.tsx`, `examples/stackflow-spa/src/activities/ActivityHome.tsx`, `examples/stackflow-spa/src/activities/ActivityListImageFrame.tsx`, `examples/stackflow-spa/src/activities/ActivityMenuSheetSimple.tsx`, `examples/stackflow-spa/src/components/ControlPanel.tsx`, `examples/stackflow-spa/src/stackflow/Stack.tsx`, `examples/stackflow-spa/src/stackflow/stackflow.config.ts`	modal prop 지원, Menu 통합, 라우트 추가 등이 이루어졌습니다.
Changelog 업데이트 `packages/codemod/CHANGELOG.md`, `packages/figma/CHANGELOG.md`, `packages/mcp/CHANGELOG.md`, `packages/migration-index/CHANGELOG.md`	새 컴포넌트 추가 및 마이그레이션 정보가 기록되었습니다.
마이그레이션 색상 맵 `packages/migration-index/color.mjs`	색상 토큰 매핑이 업데이트되었습니다.
Alert Dialog/Menu Sheet 예제 수정 `docs/examples/react/alert-dialog/open-change-reason.tsx`, `docs/examples/react/menu-sheet/open-change-reason.tsx`	콜백 파라미터 이름 변경 및 `details` 구조 접근이 업데이트되었습니다.
ChipTabs 예제 제거 `docs/examples/react/chip-tabs/variant-brand-solid.tsx`	더 이상 사용되지 않는 brandSolid 예제가 제거되었습니다.
Field Button 문서 `docs/content/react/components/field-button.mdx`	Menu와 함께 사용하는 Use Cases 섹션이 추가되었습니다.
Stackflow 문서 `docs/content/react/stackflow/alert-dialog.mdx`, `docs/content/react/stackflow/bottom-sheet.mdx`, `docs/content/react/stackflow/menu-sheet.mdx`	modal prop 및 isActive 관리 가이드가 업데이트되었습니다.
메타 설정 `docs/content/react/blocks/meta.json`, `docs/content/react/meta.json`	Blocks 섹션의 메타데이터와 네비게이션이 추가되었습니다.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

feat(docs): add alpha version to react docs version switcher #1453: react-version-switcher.tsx에서 동일한 alpha 버전 항목 추가 및 CURRENT_VERSION 업데이트가 포함되어 있습니다.
feat(menu): add Menu; refactor Dialog & Drawer to use new useDismissibleLayer hook #1410: Menu 기능의 동일한 구현 (문서, 예제, 레시피, 스토리, 래퍼)이 포함되어 있습니다.
feat: breakpoint & responsive styling support #1326: breakpoint/반응형 스타일링 기능 (postcss-responsive, useBreakpoint, responsive 타입, Box hideFrom, Storybook 통합)이 동일하게 포함되어 있습니다.

Suggested reviewers

junghyeonsu
SeieunYoo

Poem

🐰 토끼의 축하 시:

새로운 메뉴와 발걸음이 나타나고,
반응형 breakpoint가 춤을 춘다네요!
Footer에 Side Navigation까지,
Layout을 다시 짜며 꼬리를 흔들고,
문서와 예제로 가득 찼네요! 🎉✨

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/focus-scope-in-app-screen

github-actions · 2026-04-15T08:03:42Z

Alpha Preview (Stackflow SPA)

Branch Preview URL: https://fix-focus-scope-in-app-scree.seed-design-stackflow-spa.pages.dev
Preview URL: https://83bde9e6.seed-design-stackflow-spa.pages.dev
Commit: 7ba5046

github-actions · 2026-04-15T08:04:01Z

Alpha Preview (Storybook)

Branch Preview URL: https://fix-focus-scope-in-app-scree.seed-design-storybook.pages.dev
Preview URL: https://b48737b2.seed-design-storybook.pages.dev
Commit: 7ba5046

github-actions · 2026-04-15T08:19:01Z

Alpha Preview (Docs)

Branch Preview URL: https://fix-focus-scope-in-app-scree.seed-design.pages.dev
Preview URL: https://4d27d371.seed-design.pages.dev
Commit: 7ba5046

Move focus logic from onMountAutoFocus (which fires during enter-active and interrupts CSS animation) to a useEffect that waits for enter-done. transitionState only transitions to "enter-done" once per activity lifecycle, so the effect naturally runs once without needing a ref guard. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

feat(stackflow): add FocusScope to AppScreen for focus management

fc52579

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

te6-in changed the base branch from dev to alpha April 15, 2026 08:02

te6-in and others added 3 commits April 15, 2026 17:40

fix(app-screen): remove focus outline from layer

24140b0

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs(stackflow): add comment explaining onMountAutoFocus prevention

7ba5046

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

junghyeonsu assigned te6-in Apr 16, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(stackflow): add FocusScope to AppScreen for focus management#1464

feat(stackflow): add FocusScope to AppScreen for focus management#1464
te6-in wants to merge 4 commits intoalphafrom
fix/focus-scope-in-app-screen

te6-in commented Apr 15, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Apr 15, 2026 •

edited

Loading

Review skipped

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

github-actions Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

te6-in commented Apr 15, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

새로운 기능, 버그 수정 및 문서 업데이트

Uh oh!

changeset-bot Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

github-actions Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Stackflow SPA)

Uh oh!

github-actions Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Storybook)

Uh oh!

github-actions Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Docs)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

te6-in commented Apr 15, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Apr 15, 2026 •

edited

Loading

coderabbitai Bot commented Apr 15, 2026 •

edited

Loading

github-actions Bot commented Apr 15, 2026 •

edited

Loading

github-actions Bot commented Apr 15, 2026 •

edited

Loading

github-actions Bot commented Apr 15, 2026 •

edited

Loading