Menu Sheet

Anatomy

• backdrop
• content
• header
• title
• description
• divider
• list
• group
• footer
• item
• item label
• item prefix icon
• close button

Options

Tone

Menu Sheet의 아이템은 Neutral 혹은 Critical tone을 가집니다.

Neutral

[TODO: 회색 배경에 검은색 텍스트로 표시된 일반 Menu Sheet 아이템]

일반적인 액션을 나타내는 기본 아이템입니다. 대부분의 선택지에 사용됩니다.

Critical

[TODO: 회색 배경에 빨간색 텍스트로 표시된 위험 Menu Sheet 아이템]

데이터를 삭제하는 등 파괴적인 액션을 수행하는 아이템입니다. 사용자에게 위험한 작업임을 명확히 알리기 위해 빨간색으로 강조됩니다.

Prefix Icon

[TODO: 아이템 텍스트 앞에 아이콘이 있는 Menu Sheet 아이템]

아이템에 prefix icon을 추가하여 시각적 단서를 제공할 수 있습니다. 아이콘은 아이템의 tone에 맞는 색상으로 표시됩니다.

Behaviors

표시 및 애니메이션

Menu Sheet가 표시될 때 backdrop이 서서히 나타나고(fade in), content가 화면 아래에서 위로 슬라이드됩니다. 이는 사용자에게 모달 상태를 명확히 알립니다.

그룹화

[TODO: 여러 그룹으로 나뉜 Menu Sheet 아이템들]

여러 아이템들은 기능이나 관련성에 따라 그룹으로 나눌 수 있습니다. 그룹 간에는 시각적 구분을 위한 간격이 제공됩니다.

너비 및 최대 너비

[TODO: 다양한 화면 크기에서의 Menu Sheet 너비 비교]

Menu Sheet는 모바일 환경에서는 화면 너비에 맞춰지며, 태블릿이나 데스크톱 환경에서는 최대 너비(480px)로 제한됩니다.

닫기 동작

Menu Sheet는 여러 방법으로 닫을 수 있습니다.

[TODO: 각 닫기 방법을 시각적으로 표현한 이미지]

• backdrop을 탭하는 경우
• close 버튼을 탭하는 경우
• (키보드 환경) Escape 키를 누르는 경우

Usage Guidelines

적절한 사용 상황

[TODO: Menu Sheet의 다양한 활용 예시 이미지]

Menu Sheet는 다음과 같은 상황에서 사용하는 것이 적합합니다:

• 특정 작업에 관한 선택지뿐만 아니라 추가적인 선택지를 제공할 때
• 선택지가 여러 범주로 나뉘어 그룹화가 필요할 때
• 선택 전에 추가 설명이나 컨텍스트를 제공해야 할 때

간결성 유지

• Title은 한 줄에 표시될 수 있도록 간결하게 유지하세요.
• Description은 꼭 필요한 경우에만 추가하세요.
• Menu Sheet는 사용자의 작업을 방해하므로 꼭 필요한 경우에만 사용하세요.

위험한 선택 강조

[TODO: Critical 옵션이 포함된 Menu Sheet 예시]

데이터를 삭제하는 등 위험한 작업을 수행하는 선택은 Critical 옵션을 사용해 시각적으로 눈에 띄게 만드세요.

아이템 순서 및 그룹화

[TODO: 잘 구성된 Menu Sheet의 아이템 그룹화 예시]

• 관련된 아이템들을 그룹으로 묶어 사용자가 쉽게 이해할 수 있도록 하세요.
• 자주 사용되는 옵션을 상단에 배치하고, 덜 중요한 옵션은 하단에 배치하세요.

아이콘 사용

[TODO: 아이콘이 있는 Menu Sheet 아이템과 없는 아이템 비교]

• 아이콘을 사용하면 아이템의 기능을 시각적으로 빠르게 이해하는 데 도움이 됩니다.
• 아이콘은 아이템의 기능을 명확하게 나타내야 합니다.

스크롤 방지

[TODO: 적절한 수의 아이템이 있는 Menu Sheet와 너무 많은 아이템이 있는 예시 비교]

Menu Sheet가 스크롤되지 않도록 아이템 수를 제한하세요. 스크롤이 필요한 Menu Sheet는 사용자가 의도치 않게 버튼을 탭할 위험이 있고, 선택에 더 많은 시간과 노력이 필요합니다.

개요

옵션 테이블

링크

스펙

base

상태	슬롯	속성	값
enabled	backdrop	color	$color.bg.overlay
		enterDuration	$duration.d2
		enterTimingFunction	$timing-function.enter
		enterOpacity	0
		exitDuration	$duration.d2
		exitTimingFunction	$timing-function.exit
		exitOpacity	0
	content	color	$color.bg.layer-floating
		maxWidth	480px
		paddingX	$dimension.spacing-x.global-gutter
		paddingY	$dimension.x4
		topCornerRadius	$radius.r5
		enterDuration	$duration.d6
		enterTimingFunction	$timing-function.enter-expressive
		exitDuration	$duration.d4
		exitTimingFunction	$timing-function.exit
	header	gap	$dimension.x1
		paddingBottom	$dimension.x4
	title	fontSize	$font-size.t6
		lineHeight	$line-height.t6
		fontWeight	$font-weight.bold
		color	$color.fg.neutral
	description	fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.regular
		color	$color.fg.neutral-muted
	list	gap	$dimension.x2_5
	group	cornerRadius	$radius.r4
	divider	strokeBottomWidth	1px
		strokeColor	$color.stroke.neutral
	footer	paddingTop	$dimension.x2_5