본문으로 건너뛰기
TDSMoring 디자인 시스템

ScreenHeader

Calendar 앱의 전체 화면 위쪽 줄이다. 왼쪽에 뒤로, 가운데에 제목, 오른쪽에 행동. 모두 48의 누르는 영역이고 화면 가장자리에서 8 들어와 있다.

이 페이지의 목차
분류
Calendar 앱
가져오기
import { ScreenHeader, HeaderAction } from '@/cal/ScreenHeader'
코드 위치
apps/calendar/src/cal/ScreenHeader.tsx:12

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

일정 편집

저장
제목 + 오른쪽 행동

언제 쓰는가#

쓴다

  • 이 컴포넌트는 Mordy Calendar 앱(apps/calendar/src/cal)에만 있다.
  • 일정 편집, 설정 같은 전체 화면 맨 위에 쓴다.
  • 오른쪽 행동은 HeaderAction에 아이콘을 넣어 right에 넘긴다.

쓰지 않는다

  • Mordy 앱에는 쓰지 않는다. 그쪽은 BackHeader다.
  • 오른쪽에 행동을 둘 넘게 두지 않는다. 제목이 화면 가운데에서 밀린다.

종류#

ScreenHeader 종류
이름설명
ScreenHeader줄 전체. 제목은 두 옆 영역 사이가 아니라 화면 가운데에 놓인다.
HeaderAction오른쪽 아이콘 행동 하나(48 × 48, 원형 물결).

크기#

ScreenHeader 크기
이름값설명
기본높이 56, 좌우 8양쪽 영역 폭 56, 누르는 영역 48.

상태#

ScreenHeader 상태
상태모습과 동작
뒤로 누름앞 화면이 있으면 돌아가고, 없으면 홈으로 간다.

사용 방법#

기본

기본
import { HeaderAction, ScreenHeader } from '@/cal/ScreenHeader';

<ScreenHeader title="일정 편집" right={<HeaderAction label="삭제" onPress={remove}><Trash2 size={22} color={color.text} /></HeaderAction>} />

속성(props)#

ScreenHeader

ScreenHeader 속성
이름타입기본값필수설명
titlestring—선택가운데 제목(headline, 한 줄).
rightReactNode—선택오른쪽에 놓을 요소(보통 HeaderAction).
onBack() => void—선택뒤로 누를 때 실행할 함수. 없으면 앞 화면, 없으면 홈.

HeaderAction

HeaderAction 속성
이름타입기본값필수설명
labelstring—필수접근성 이름. 필수.
onPress() => void—필수눌렀을 때 실행할 함수.
childrenReactNode—필수그릴 아이콘.

치수와 토큰#

줄
높이 56, 좌우 8
양쪽 영역
폭 56, 높이 48. 뒤로 아이콘은 ChevronLeft 26 선 2.2
제목
headline, 가운데, 역할 header
HeaderAction
48 × 48

접근성#

  • 뒤로 버튼은 "뒤로", 제목은 header 역할이다. HeaderAction은 label이 이름이다.
  • 눌리는 영역이 48 × 48이라 최소 크기를 지킨다.

잘한 예와 잘못한 예#

일정 편집

잘한 예행동의 label을 쓴다.
오른쪽에 아이콘 4개
잘못한 예오른쪽 행동이 많으면 제목이 가운데에서 밀린다.
  • BackHeader: 화면 위쪽의 뒤로 가기 줄이다. 왼쪽에 뒤로 화살표, 가운데에 제목(선택), 오른쪽에 행동 자리가 있다.
  • IconButton: 아이콘 하나만 있는 투명한 둥근 버튼이다. 헤더의 "뒤로", "검색"에 쓴다.