밀당 DS

시작하기

Header

Navigation

페이지 제목과 앞·뒤 행동을 일관된 높이와 정렬로 배치하는 상단 헤더.

Usage

모바일·웹 페이지 상단에 제목과 앞·뒤 탐색 행동을 함께 배치할 때 사용한다.

import

import

import { Header } from '@mildang/design-system/Header';

Header 하나만 가져오면 Header.Root · Header.Left · Header.Right · Header.Center · Header.Title 를 그 아래에서 쓸 수 있다.

예제를 복사해 쓸 때 필요한 준비

• @mildang/icons 를 따로 설치한다. DS 패키지에 아이콘 컴포넌트가 포함되지 않는다.

Anatomy

tsx

import { Header } from '@mildang/design-system/Header';

export default function Example() {
  return (
    <Header>
      <Header.Left>
        <Header.Title />
      </Header.Left>
      <Header.Center />
      <Header.Right />
    </Header>
  );
}

부품

필수 여부

반복

위치

Header.Root

필수

모든 그룹을 직접 감싼다.

Header.Left

선택

Root 안에 배치한다.

Header.Title

조건부

헤더에 제목을 표시하는 경우에만 추가한다.

Left, Center 또는 필요한 그룹 안에 배치한다.

Header.Center

선택

Root 안에 배치한다.

Header.Right

선택

Root 안에 배치한다.

  • Root 안에 필요한 Left·Center·Right 그룹을 배치하고 비어 있는 그룹은 생략한다.
  • 화면을 떠나는 뒤로 가기·닫기 행동은 Left에, 취소·저장 같은 확정 행동은 Right에 둔다.
  • Title은 현재 화면의 맥락을 설명하는 하나의 짧은 제목으로 유지한다.

API Reference

Header Props

Prop

Type

Default

hideBorder

boolean

지정 안 함

size

"xs" | "sm" | "md"

md

Header.Left

뒤로 가기, 닫기, 제목처럼 시작 쪽에 놓이는 콘텐츠 그룹이다.

공개 Props 없음

Header.Title

페이지나 화면의 현재 제목을 표시하는 슬롯이다.

공개 Props 없음

Header.Center

중앙 정렬이 필요한 콘텐츠 그룹이다.

공개 Props 없음

Header.Right

취소·저장처럼 끝 쪽에 놓이는 확정 행동 그룹이다.

공개 Props 없음

예제

기본 사용

뒤로 가기와 제목은 Header.Left, 취소·저장 같은 확정 행동은 Header.Right 에 둔다 — 반대로 두면 화면을 떠나는 버튼과 헷갈린다.

코드

Open in Playground
import { Header } from '@mildang/design-system/Header';

const HeaderDefaultExample = () => (
    <Header>
      <Header.Left>
        <Header.Title>
          강좌 만들기
        </Header.Title>
      </Header.Left>
    </Header>
  );

export default HeaderDefaultExample;

WithBackButton

코드

Open in Playground
import { Header } from '@mildang/design-system/Header';
import { Button } from '@mildang/design-system/Button';
import ChevronLeft from '@mildang/icons/react/chevron-left';

const HeaderWithBackButtonExample = () => (
    <Header>
      <Header.Left>
        <Button variant="quaternary" size="sm" startIcon={<ChevronLeft width={18} height={18} />}>
          강좌 관리
        </Button>
        <Header.Title>
          강좌 만들기
        </Header.Title>
      </Header.Left>
    </Header>
  );

export default HeaderWithBackButtonExample;