Card

콘텐츠에 대한 정보를 간략하게 표현하는 기본 카드 요소입니다. 이미지, 텍스트, 뱃지 등 다양한 요소를 조합하여 각 항목의 정보를 시각적으로 일관성 있게 전달합니다.

WantedCard

기본 카드 컴포넌트로, 로딩 상태(isLoading)에 따라 Skeleton 또는 실제 콘텐츠를 렌더링합니다. 썸네일, 오버레이 캡션, 타이틀, 캡션, 서브 캡션, 추가 캡션, 상/하단 커스텀 콘텐츠를 지원합니다.

WantedCard(
    title = "제목",
    caption = "캡션",
    overlayCaption = "Overlay",
    overlayToggleIcon = {
        Icon(painter = painterResource(id = R.drawable.icon), contentDescription = null)
    },
    onClick = { /* 클릭 이벤트 */ }
)

Parameters

이름타입설명
modifierModifier레이아웃 및 스타일을 지정하는 Modifier입니다.
thumbnail(@Composable () -> Unit)썸네일 이미지 영역입니다.
overlayCaptionString썸네일 위에 오버레이로 표시할 텍스트입니다.
titleString카드 타이틀 텍스트입니다.
captionString보조 캡션 텍스트입니다.
subCaptionString추가 보조 캡션 텍스트입니다.
extraCaptionString하단 추가 설명 텍스트입니다.
isLoadingBoolean로딩 상태 여부입니다. true이면 skeleton UI가 렌더링됩니다.
cardDefaultWantedCardDefaultskeleton 모드에서 사용할 설정값입니다.
overlayToggleIcon(@Composable () -> Unit)?썸네일 오버레이에 포함될 토글 아이콘입니다.
topContent(@Composable () -> Unit)?카드 상단 타이틀 위에 추가 표시할 컴포넌트입니다.
bottomContent(@Composable () -> Unit)?카드 하단에 추가 표시할 컴포넌트입니다.
onClick() -> Unit카드 전체 클릭 시 호출되는 콜백입니다.

Advanced

WantedCardDefault

스켈레톤 표시 여부를 지정하는 데이터 클래스입니다. 각 항목별로 스켈레톤 표시 여부를 설정합니다.

Properties
이름타입설명
topContentSkeletonBoolean상단 콘텐츠 영역에 스켈레톤을 표시할지 여부입니다.
captionSkeletonBoolean메인 캡션에 스켈레톤을 표시할지 여부입니다.
extraCaptionSkeletonBoolean추가 캡션에 스켈레톤을 표시할지 여부입니다.
bottomContentSkeletonBoolean하단 콘텐츠 영역에 스켈레톤을 표시할지 여부입니다.
ratioFloat썸네일 스켈레톤의 비율입니다.

WantedCardDefaults

getDefault

기본 스켈레톤 설정값을 반환하는 Compose 함수입니다. 각 항목에 대해 스켈레톤 UI 표시 여부를 설정할 수 있습니다.

val config = WantedCardDefaults.getDefault(
    topContentSkeleton = true,
    bottomContentSkeleton = true
)
Parameters
이름타입설명
topContentSkeletonBoolean상단 콘텐츠 영역에 스켈레톤을 표시할지 여부입니다. 기본값은 false입니다.
captionSkeletonBoolean메인 캡션에 스켈레톤을 표시할지 여부입니다. 기본값은 true입니다.
extraCaptionSkeletonBoolean추가 캡션에 스켈레톤을 표시할지 여부입니다. 기본값은 true입니다.
bottomContentSkeletonBoolean하단 콘텐츠 영역에 스켈레톤을 표시할지 여부입니다. 기본값은 false입니다.

Return
타입설명
WantedCardDefault스켈레톤 설정 정보가 담긴 데이터 클래스입니다.

© 2026 Wanted Lab, Inc.