Bottom sheet

사용자가 현재 맥락과 밀접한 관련이 있는 범위가 정해진 작업을 수행할 수 있도록 돕는 요소입니다. 모바일 화면 하단에 오버레이되어 추가적인 사항이나 액션을 표시합니다. 메인 콘텐츠에 대한 접근성을 유지하면서 임시적으로 간단한 정보를 쉽게 접근할 수 있게 해줍니다.

WantedModalBottomSheet

Bottom sheet 형태의 모달 컴포넌트입니다. 시스템 Bottom sheet 또는 커스텀 드래그가 가능한 Bottom sheet를 사용할 수 있습니다.

var showSheet by remember { mutableStateOf(false) }

Button(onClick = { showSheet = true }) {
    Text("시트 열기")
}

WantedModalBottomSheet(
    isShow = showSheet,
    onDismissRequest = { showSheet = false },
    content = { Text("시트 내용") }
)

Parameters

이름타입설명
isShowBoolean모달 표시 여부입니다.
onDismissRequest() -> Unit모달이 닫힐 때 호출되는 콜백입니다.
modifierModifier컴포넌트에 적용할 Modifier입니다.
backgroundColor배경 색상입니다.
typeModalType모달의 형태입니다.
modalSizeModalSize콘텐츠 패딩 등을 조절하는 크기 설정입니다.
dismissOnClickOutsideBoolean외부 클릭 시 닫힘 여부입니다.
topBar(@Composable () -> Unit)?상단 바 슬롯입니다.
bottomBar(@Composable () -> Unit)?하단 바 슬롯입니다.
content(@Composable () -> Unit)본문 콘텐츠 슬롯입니다.

Advanced

WantedModalDefaults

Bottom sheet 상단에 표시되는 드래그 핸들 컴포넌트입니다.

DragHandle

BottomSheet 상단에 표시되는 드래그 핸들 컴포넌트입니다.

WantedModalDefaults.DragHandle()
Parameters
이름타입설명
modifierModifier컴포넌트에 적용할 Modifier입니다.
colorColor핸들의 배경 색상입니다.
shapeShape핸들의 모양입니다.

WantedModalContract

Modal 컴포넌트에서 사용하는 설정값을 정의하는 객체입니다.

Enum

ModalSize

값설명
Small작은 크기의 Modal 입니다.
Medium중간 크기의 Modal 입니다.
Large큰 크기의 Modal 입니다.
XLarge매우 큰 크기의 Modal 입니다.
Custom커스텀 크기의 Modal 입니다. 모든 패딩이 0dp로 설정되어 사용자가 직접 정의 할 수 있습니다.

Sealed Class

ModalType

Modal의 형태를 정의하는 sealed 클래스입니다. Flexible, FixedWrapContent, Fixed, FixedFullScreen, FixedRatio 형태를 제공합니다.

값설명
Flexible콘텐츠 크기에 따라 자동으로 조정되는 유동형 Modal 입니다.
FixedWrapContent콘텐츠 높이에 맞게 조정되는 고정형 Modal 입니다.
Fixed특정 높이를 갖는 고정형 Modal 입니다.
FixedFullScreen화면 전체를 덮는 고정형 Modal 입니다.
FixedRatio화면 비율을 기준으로 높이가 설정되는 고정형 Modal입니다.

© 2026 Wanted Lab, Inc.