Popup

사용자의 즉각적인 주의와 응답이 필요한 상황에서 사용하는 모달 요소입니다. 사용자의 현재 작업을 중단 시키고 팝업 내용에 집중하도록 하며, 필수적인 결정이나 확인이 필요한 경우에 사용합니다.

WantedModal

상단 앱바와 확인/취소 버튼을 포함한 기본 모달 컴포넌트입니다.

var showModal by remember { mutableStateOf(true) }

if (showModal) {
    WantedModal(
        topBar = { WantedDialogTopAppBar(title = "제목") },
        positive = "확인",
        onClickPositive = { showModal = false },
        onDismissRequest = { showModal = false },
        content = { Text("내용") }
    )
}

Parameters

이름타입설명
onDismissRequest() -> Unit모달 외부 클릭 등으로 닫힐 때 호출되는 콜백입니다.
modifierModifier컴포넌트에 적용할 Modifier입니다.
typeModalType모달의 형태입니다.
propertiesDialogPropertiesDialog 속성입니다.
shapeRoundedCornerShape모달의 모서리 둥글기입니다.
topBar(@Composable () -> Unit)?상단 앱바 슬롯입니다.
positiveString?확인 버튼 텍스트입니다.
negativeString?취소 버튼 텍스트입니다.
onClickPositive(() -> Unit)?확인 버튼 클릭 시 호출되는 콜백입니다.
onClickNegative(() -> Unit)?취소 버튼 클릭 시 호출되는 콜백입니다.
content(@Composable BoxScope.() -> Unit)본문 콘텐츠 슬롯입니다.

Overload

커스텀 하단 바를 포함한 모달 컴포넌트입니다. 확인/취소 버튼 대신 커스텀 bottomBar를 사용할 수 있습니다.

var showModal by remember { mutableStateOf(true) }

if (showModal) {
    WantedModal(
        topBar = { WantedDialogTopAppBar(title = "제목") },
        bottomBar = {
            Button(onClick = { showModal = false }) {
                Text("닫기")
            }
        },
        onDismissRequest = { showModal = false },
        content = { Text("내용") }
    )
}
Parameters
이름타입설명
onDismissRequest() -> Unit모달 외부 클릭 등으로 닫힐 때 호출되는 콜백입니다.
modifierModifier컴포넌트에 적용할 Modifier입니다.
sizeModalSize모달의 크기입니다.
typeModalType모달의 형태입니다.
propertiesDialogPropertiesDialog 속성입니다.
shapeRoundedCornerShape모달의 모서리 둥글기입니다.
topBar(@Composable () -> Unit)?상단 앱바 슬롯입니다.
bottomBar(@Composable () -> Unit)?하단 바 슬롯입니다.
content(@Composable BoxScope.() -> Unit)본문 콘텐츠 슬롯입니다.

LazyColumn 기반의 스크롤 가능한 모달 컴포넌트입니다. 많은 양의 콘텐츠를 스크롤하여 표시할 수 있습니다.

var showModal by remember { mutableStateOf(true) }

if (showModal) {
    WantedModal(
        topBar = { WantedDialogTopAppBar(title = "제목") },
        onDismissRequest = { showModal = false },
        lazyContent = {
            items(20) { index ->
                Text("아이템 $index")
            }
        }
    )
}
Parameters
이름타입설명
onDismissRequest() -> Unit모달 외부 클릭 등으로 닫힐 때 호출되는 콜백입니다.
modifierModifier컴포넌트에 적용할 Modifier입니다.
sizeModalSize모달의 크기입니다.
typeModalType모달의 형태입니다.
propertiesDialogPropertiesDialog 속성입니다.
shapeRoundedCornerShape모달의 모서리 둥글기입니다.
topBar(@Composable () -> Unit)?상단 앱바 슬롯입니다.
bottomBar(@Composable () -> Unit)?하단 바 슬롯입니다.
lazyContent(LazyListScope.() -> Unit)LazyColumn 콘텐츠 슬롯입니다.

Advanced

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.