Groudit UI

Dynamic Page

Betav1.0.0

sticky title + 접힘 가능 header + scrollable content + (SAP UI5 DynamicPage 패턴 참고) sticky footer. FCL 의 mid/end column 안에 넣어 마스터-디테일 페이지 표준 구조로 사용.

Loading…
import {
  DynamicPage,
  DynamicPageTitle,
  DynamicPageHeader,
  DynamicPageContent,
  DynamicPageFooter,
} from "@/components/ui/dynamic-page";

<DynamicPage>
  <DynamicPageTitle
    title="Order ORD-2026-0042"
    subtitle="Created 2 hours ago"
    breadcrumb={<Breadcrumb>…</Breadcrumb>}
    actions={<>
      <Badge variant="secondary">In progress</Badge>
      <Button size="sm">Approve</Button>
    </>}
  />

  <DynamicPageHeader>
    {/* KPI / 메타데이터 — chevron 으로 접기 가능 */}
    <Stat label="Total" value="$2,450" />
    …
  </DynamicPageHeader>

  <DynamicPageContent>
    {/* 스크롤 영역 */}
  </DynamicPageContent>

  <DynamicPageFooter>
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </DynamicPageFooter>
</DynamicPage>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/dynamic-page.json

Composition

DynamicPage
├── DynamicPageTitle (title + subtitle + breadcrumb + actions)
├── DynamicPageHeader (접힘 가능 — KPI / 메타)
├── DynamicPageContent (스크롤 영역)
└── DynamicPageFooter (sticky 하단 액션)

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

PackageVersion
clsx2.1.1
tailwind-merge3.6.0

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

Accessibility

Keyboard interactions

KeyDescription
EnterSpace
헤더 chevron 클릭 시 펼침/접힘.
Tab
title → header → content → footer 순.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.12.1.14.1.2

Notes

  • •chevron 버튼에 aria-expanded 자동 부여.
  • •Title 의 h1 이 페이지 단위 — 한 페이지에 1개만 권장.
  • •Footer 의 액션은 keyboard 로 접근 가능하도록 항상 visible.