@olundot/ui · Layout

PageHeader

페이지의 현재 위치, 제목, 보조 설명, 메타 정보, 주요 action을 한 줄 흐름으로 정리하는 상단 블록입니다.

leading
back이 있으면 breadcrumb 대신 back 영역을 렌더링해 사용자의 다음 이동 의도를 우선합니다.
title
페이지의 가장 강한 정보 계층이며 긴 텍스트는 줄바꿈으로 폭을 넘지 않습니다.
meta
Badge, 날짜, 소유자 같은 짧은 보조 정보를 제목 아래에 배치합니다.
actions
우측 또는 다음 줄에 page-level action만 모읍니다.

목록 상세 상단

breadcrumb, meta, actions
강의 관리 / 2026 임상술기

임상술기 평가 운영

응시자, 문항 세트, 채점 기준을 한 화면에서 점검합니다.

초안마지막 수정 06.04 14:20
코드 보기tsx
import { Badge, Button, PageHeader } from "@olundot/ui";

export function CoursePageHeader() {
  return (
    <PageHeader
      breadcrumb={<span>강의 관리 / 2026 임상술기</span>}
      title="임상술기 평가 운영"
      subtitle="응시자, 문항 세트, 채점 기준을 한 화면에서 점검합니다."
      meta={<><Badge tone="info">초안</Badge><span>마지막 수정 06.04 14:20</span></>}
      actions={<><Button variant="outline">미리보기</Button><Button>게시 준비</Button></>}
    />
  );
}

돌아가기 우선

back은 breadcrumb보다 우선 렌더링

김지수 응시 기록

최근 제출, 재응시 요청, 감독관 메모를 확인합니다.

코드 보기tsx
import { Button, PageHeader } from "@olundot/ui";

export function StudentPageHeader() {
  return (
    <PageHeader
      back={<Button variant="ghost" size="sm">← 목록으로</Button>}
      breadcrumb={<span>학생 관리 / 상세</span>}
      title="김지수 응시 기록"
      subtitle="최근 제출, 재응시 요청, 감독관 메모를 확인합니다."
      actions={<Button variant="outline">기록 내보내기</Button>}
    />
  );
}

조밀한 운영 헤더

짧은 title과 보조 action

문항 검수

총 128문항검토 필요 14문항
코드 보기tsx
import { Button, PageHeader } from "@olundot/ui";

export function CompactPageHeader() {
  return (
    <PageHeader
      title="문항 검수"
      meta={<span>총 128문항 · 검토 필요 14문항</span>}
      actions={<><Button variant="outline" size="sm">필터 저장</Button><Button size="sm">검수 시작</Button></>}
    />
  );
}