페이지 헤더는 페이지 맨 위에서 이 페이지가 무엇인지 알려주고 브레드크럼·액션·검색을 한데 모아요.

열린 이슈 전체

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/page-header.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/page-header.json

아래 코드를 components/ui/page-header.tsx 에 복사해요.

components/ui/steel/page-header.tsx

/** * @title Page Header * @description 페이지 맨 위에서 제목과 브레드크럼, 액션, 검색·필터를 한데 묶어 페이지의 목적을 알려줘요. */import * as React from 'react';import { cn } from '@/lib/utils';// Atlassian @atlaskit/page-header — PageHeader/*.js 스펙export interface PageHeaderProps extends Omit<React.ComponentProps<'div'>, 'id'> {  /** 제목 위에 놓을 브레드크럼 */  breadcrumbs?: React.ReactElement;  /** 제목 오른쪽에 놓을 액션 (보통 버튼 묶음) */  actions?: React.ReactElement;  /** 제목 아래에 놓을 영역 (보통 검색창·필터) */  bottomBar?: React.ReactElement;  /** 제목 내용. 기본적으로 여러 줄로 줄바꿈돼요. */  children?: React.ReactNode;  /** true 면 h1 스타일 없이 children 을 그대로 렌더해요 (인라인 편집 제목 등). */  disableTitleStyles?: boolean;  /** 제목 h1 요소의 ref. 페이지 전환 후 제목으로 포커스를 옮길 때 써요. */  innerRef?: React.Ref<HTMLHeadingElement>;  /** 제목을 한 줄로 자르고 말줄임표를 붙여요. 접근성을 위해 가급적 피하세요. */  truncateTitle?: boolean;  /** h1 의 id. aria-labelledby 로 다른 요소의 이름으로 쓸 수 있어요. */  id?: string;  testId?: string;}function PageHeader({  innerRef,  breadcrumbs,  actions,  bottomBar,  children,  id,  disableTitleStyles = false,  truncateTitle = false,  testId,  className,  ...props}: PageHeaderProps) {  return (    // OuterWrapper    <div data-slot="page-header" className={cn('mx-0 mt-ds-300 mb-ds-200', className)} {...props}>      {breadcrumbs}      {/* TitleWrapper */}      <div data-slot="page-header-title-wrapper" className="flex flex-nowrap items-start">        {/* TitleContainer */}        <div className="mb-ds-100 min-w-0 max-w-full shrink grow basis-auto [overflow-wrap:break-word]">          {disableTitleStyles ? (            children          ) : (            <h1              ref={innerRef}              tabIndex={-1}              id={id}              data-slot="page-header-title"              data-testid={testId && `${testId}--title`}              className={cn(                'mt-0 ds-font-heading-large tracking-normal text-ds-text outline-none',                truncateTitle && 'truncate',              )}            >              {children}            </h1>          )}        </div>        {actions && (          // ActionsWrapper          <div            data-slot="page-header-actions"            className="ms-auto mb-ds-100 max-w-full shrink-0 grow-0 basis-auto ps-ds-400 whitespace-nowrap"          >            {actions}          </div>        )}      </div>      {bottomBar && (        <div data-slot="page-header-bottom-bar" className="mt-ds-200">          {bottomBar}        </div>      )}    </div>  );}export { PageHeader };

스프린트 보드

Breadcrumbs

breadcrumbs 슬롯에 넣은 요소는 제목 위에 놓여요. 사용자가 사이트 안에서 어디에 있는지 알려줘요. 실제 화면에서는 Breadcrumbs 컴포넌트를 넣어요.

릴리스 노트

Actions and bottom bar

actions 는 제목 오른쪽 끝에, bottomBar 는 제목 아래에 놓여요. 액션에는 페이지나 그 내용을 바꾸는 버튼을, 바텀 바에는 검색창과 필터를 둬요.

열린 이슈 전체

Truncate title

기본적으로 긴 제목은 여러 줄로 줄바꿈돼요. truncateTitle 을 켜면 한 줄로 자르고 말줄임표를 붙여요. 잘린 제목은 읽기 어려우니 고정 폭 레이아웃처럼 꼭 필요할 때만 써요.

2026년 4분기 모바일 앱 결제 흐름 개선 프로젝트 — 요구 사항 정리와 디자인 검토 회의록

Custom title

disableTitleStyles 를 켜면 기본 h1 스타일 없이 children 을 그대로 그려요. 제목을 Inline Edit 로 바로 고칠 수 있게 만들 때 써요.

Usage guidelines

페이지 헤더는 페이지 전체의 일관된 머리 영역이에요. 이 페이지가 무엇을 위한 곳이고 아래에 무엇이 있는지 알려줘요.

구성

페이지 그리드 — 헤더가 놓이는 콘텐츠 영역. 고정 폭인지 유동 폭인지에 따라 여백을 맞춰요.
브레드크럼 (선택) — 현재 위치
제목 — 페이지 요약. 유동 그리드에서는 줄바꿈되고 고정 그리드에서는 잘릴 수 있어요.
액션 — 페이지나 내용을 바꾸는 버튼 (primary, default, subtle)
검색·필터 — 페이지 내용을 좁히는 검색창과 선택 필터

Do· 페이지마다 하나

페이지 헤더는 페이지 맨 위에 하나만 둬요.

Don't· 섹션 제목으로 쓰기

한 페이지 안에서 섹션을 나누려고 헤더를 여러 개 두지 않아요. 섹션에는 Heading 을 써요.

팝업, 다이얼로그, 드로어처럼 작은 컨테이너 안에는 넣지 않아요.
제목은 문장형으로 짧고 명확하게, 이 페이지에 무엇이 있는지 드러나게 써요.

Accessibility

제목은 h1 이에요. 한 페이지에 h1 이 하나만 있도록 헤더를 하나만 써요.
제목에는 tabIndex={-1} 이 있어서 innerRef 로 프로그래밍 방식 포커스를 옮길 수 있어요. 클라이언트 라우팅으로 페이지가 바뀐 뒤 제목에 포커스를 주면 스크린 리더가 새 페이지를 알려줘요.
id 를 주면 다른 영역의 aria-labelledby 로 제목을 이름 삼아 쓸 수 있어요.
말줄임은 내용을 숨기므로 가급적 쓰지 않아요.

/** * @title Page Header * @description 페이지 맨 위에서 제목과 브레드크럼, 액션, 검색·필터를 한데 묶어 페이지의 목적을 알려줘요. */ import * as React from 'react'; import { cn } from '@/lib/utils'; // Atlassian @atlaskit/page-header — PageHeader/*.js 스펙 export interface PageHeaderProps extends Omit<React.ComponentProps<'div'>, 'id'> { /** 제목 위에 놓을 브레드크럼 */ breadcrumbs?: React.ReactElement; /** 제목 오른쪽에 놓을 액션 (보통 버튼 묶음) */ actions?: React.ReactElement; /** 제목 아래에 놓을 영역 (보통 검색창·필터) */ bottomBar?: React.ReactElement; /** 제목 내용. 기본적으로 여러 줄로 줄바꿈돼요. */ children?: React.ReactNode; /** true 면 h1 스타일 없이 children 을 그대로 렌더해요 (인라인 편집 제목 등). */ disableTitleStyles?: boolean; /** 제목 h1 요소의 ref. 페이지 전환 후 제목으로 포커스를 옮길 때 써요. */ innerRef?: React.Ref<HTMLHeadingElement>; /** 제목을 한 줄로 자르고 말줄임표를 붙여요. 접근성을 위해 가급적 피하세요. */ truncateTitle?: boolean; /** h1 의 id. aria-labelledby 로 다른 요소의 이름으로 쓸 수 있어요. */ id?: string; testId?: string; } function PageHeader({ innerRef, breadcrumbs, actions, bottomBar, children, id, disableTitleStyles = false, truncateTitle = false, testId, className, ...props }: PageHeaderProps) { return ( // OuterWrapper <div data-slot="page-header" className={cn('mx-0 mt-ds-300 mb-ds-200', className)} {...props}> {breadcrumbs} {/* TitleWrapper */} <div data-slot="page-header-title-wrapper" className="flex flex-nowrap items-start"> {/* TitleContainer */} <div className="mb-ds-100 min-w-0 max-w-full shrink grow basis-auto [overflow-wrap:break-word]"> {disableTitleStyles ? ( children ) : ( <h1 ref={innerRef} tabIndex={-1} id={id} data-slot="page-header-title" data-testid={testId && `${testId}--title`} className={cn( 'mt-0 ds-font-heading-large tracking-normal text-ds-text outline-none', truncateTitle && 'truncate', )} > {children} </h1> )} </div> {actions && ( // ActionsWrapper <div data-slot="page-header-actions" className="ms-auto mb-ds-100 max-w-full shrink-0 grow-0 basis-auto ps-ds-400 whitespace-nowrap" > {actions} </div> )} </div> {bottomBar && ( <div data-slot="page-header-bottom-bar" className="mt-ds-200"> {bottomBar} </div> )} </div> ); } export { PageHeader };

/** * @title Page Header * @description 페이지 맨 위에서 제목과 브레드크럼, 액션, 검색·필터를 한데 묶어 페이지의 목적을 알려줘요. */import * as React from 'react';import { cn } from '@/lib/utils';// Atlassian @atlaskit/page-header — PageHeader/*.js 스펙export interface PageHeaderProps extends Omit<React.ComponentProps<'div'>, 'id'> { /** 제목 위에 놓을 브레드크럼 */ breadcrumbs?: React.ReactElement; /** 제목 오른쪽에 놓을 액션 (보통 버튼 묶음) */ actions?: React.ReactElement; /** 제목 아래에 놓을 영역 (보통 검색창·필터) */ bottomBar?: React.ReactElement; /** 제목 내용. 기본적으로 여러 줄로 줄바꿈돼요. */ children?: React.ReactNode; /** true 면 h1 스타일 없이 children 을 그대로 렌더해요 (인라인 편집 제목 등). */ disableTitleStyles?: boolean; /** 제목 h1 요소의 ref. 페이지 전환 후 제목으로 포커스를 옮길 때 써요. */ innerRef?: React.Ref<HTMLHeadingElement>; /** 제목을 한 줄로 자르고 말줄임표를 붙여요. 접근성을 위해 가급적 피하세요. */ truncateTitle?: boolean; /** h1 의 id. aria-labelledby 로 다른 요소의 이름으로 쓸 수 있어요. */ id?: string; testId?: string;}function PageHeader({ innerRef, breadcrumbs, actions, bottomBar, children, id, disableTitleStyles = false, truncateTitle = false, testId, className, ...props}: PageHeaderProps) { return ( // OuterWrapper <div data-slot="page-header" className={cn('mx-0 mt-ds-300 mb-ds-200', className)} {...props}> {breadcrumbs} {/* TitleWrapper */} <div data-slot="page-header-title-wrapper" className="flex flex-nowrap items-start"> {/* TitleContainer */} <div className="mb-ds-100 min-w-0 max-w-full shrink grow basis-auto [overflow-wrap:break-word]"> {disableTitleStyles ? ( children ) : ( <h1 ref={innerRef} tabIndex={-1} id={id} data-slot="page-header-title" data-testid={testId && `${testId}--title`} className={cn( 'mt-0 ds-font-heading-large tracking-normal text-ds-text outline-none', truncateTitle && 'truncate', )} > {children} </h1> )} </div> {actions && ( // ActionsWrapper <div data-slot="page-header-actions" className="ms-auto mb-ds-100 max-w-full shrink-0 grow-0 basis-auto ps-ds-400 whitespace-nowrap" > {actions} </div> )} </div> {bottomBar && ( <div data-slot="page-header-bottom-bar" className="mt-ds-200"> {bottomBar} </div> )} </div> );}export { PageHeader };

Page Header

열린 이슈 전체

설치

Examples

Basic

스프린트 보드

릴리스 노트

Actions and bottom bar

열린 이슈 전체

Truncate title

2026년 4분기 모바일 앱 결제 흐름 개선 프로젝트 — 요구 사항 정리와 디자인 검토 회의록

2026년 4분기 모바일 앱 결제 흐름 개선 프로젝트 — 요구 사항 정리와 디자인 검토 회의록

Custom title

디자인 시스템 개편

Usage guidelines

구성

Accessibility

Props

On this page

릴리스 노트

스프린트 보드

열린 이슈 전체

열린 이슈 전체

2026년 4분기 모바일 앱 결제 흐름 개선 프로젝트 — 요구 사항 정리와 디자인 검토 회의록

2026년 4분기 모바일 앱 결제 흐름 개선 프로젝트 — 요구 사항 정리와 디자인 검토 회의록

디자인 시스템 개편

Page Header

열린 이슈 전체

설치Copy Anchor Link

수동 설치

ExamplesCopy Anchor Link

BasicCopy Anchor Link

스프린트 보드

BreadcrumbsCopy Anchor Link

릴리스 노트

Actions and bottom barCopy Anchor Link

열린 이슈 전체

Truncate titleCopy Anchor Link

2026년 4분기 모바일 앱 결제 흐름 개선 프로젝트 — 요구 사항 정리와 디자인 검토 회의록

2026년 4분기 모바일 앱 결제 흐름 개선 프로젝트 — 요구 사항 정리와 디자인 검토 회의록

Custom titleCopy Anchor Link

디자인 시스템 개편

Usage guidelinesCopy Anchor Link

구성Copy Anchor Link

AccessibilityCopy Anchor Link

PropsCopy Anchor Link

On this page

릴리스 노트

스프린트 보드

열린 이슈 전체

열린 이슈 전체

2026년 4분기 모바일 앱 결제 흐름 개선 프로젝트 — 요구 사항 정리와 디자인 검토 회의록

2026년 4분기 모바일 앱 결제 흐름 개선 프로젝트 — 요구 사항 정리와 디자인 검토 회의록

디자인 시스템 개편

설치

Examples

Basic

Breadcrumbs

Actions and bottom bar

Truncate title

Custom title

Usage guidelines

구성

Accessibility

Props