페이지 헤더

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

경로, 제목, 설명, 관련 액션과 함께 페이지를 엽니다. size는 운영 화면에서 workspace, 밀집 목록에서 page, 읽기 화면에서 document로 설정하세요. 카탈로그의 페이지 헤더도 같은 프리미티브를 사용합니다. 미리보기에서 공유 테두리는 헤더 예시만 감쌉니다. 제품 프로필이나 미리보기 옵션은 감싸지 않습니다.

제목은 전체로 표시하고, 시각적 크기는 heading level이 아닌 size로 정하세요. 어떤 액션이 보일지와 실행 상태는 제품이 로딩, 오류, 권한을 기준으로 결정합니다. 사용할 수 없는 액션을 숨길 때는 이유를 설명하세요. 헤더는 중첩 카드나 별도 배경 없이 페이지에 직접 배치하세요.

구성

PageHeader → optional breadcrumb → copy (semantic Heading + optional description) + optional wrapping action group

키보드와 접근성

정적 헤더에 키보드 동작을 추가하지 마세요. 링크는 Enter, 버튼은 Enter나 Space로 실행됩니다. SPA 내비게이션 후에는 headingProps의 id와 tabIndex=-1로 제목에 포커스를 이동하세요. 브레드크럼에 이름 있는 내비게이션 landmark를 주고, 현재 페이지를 aria-current=page로 표시하세요.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { PageHeader, Button } from '@surflane/ui'

<PageHeader
  as='header'
  title='Registered resources'
  level={1}
  variant='page'
  headingProps={{ id: 'page-title', tabIndex: -1 }}
  description='Discover and inspect registered resources.'
  breadcrumb={breadcrumb}
  actionsLabel='Resource actions'
  actions={<Button onClick={openRegistration}>Register resource</Button>}
/>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰