Card

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

WantedCard

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

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

Parameters

이름타입설명
modifierModifier카드 최외곽 노드에 적용됩니다. 배경·테두리·클릭 영역이 모두 이 노드 기준입니다.
thumbnail(@Composable () -> Unit)썸네일 이미지 영역입니다.
overlayCaptionString썸네일 위에 오버레이로 표시할 텍스트입니다.
titleString카드 타이틀 텍스트입니다.
captionString보조 캡션 텍스트입니다.
subCaptionString추가 보조 캡션 텍스트입니다.
extraCaptionString하단 추가 설명 텍스트입니다.
isLoadingBoolean로딩 상태 여부입니다. true이면 skeleton UI가 렌더링됩니다.
cardDefaultWantedCardDefault스켈레톤 표시 여부와 카드 표면(배경색·모양·테두리·안쪽 여백) 설정을 담는 객체입니다.
overlayToggleIcon(@Composable () -> Unit)?썸네일 오버레이에 포함될 토글 아이콘입니다.
topContent(@Composable () -> Unit)?카드 상단 타이틀 위에 추가 표시할 컴포넌트입니다.
bottomContent(@Composable () -> Unit)?카드 하단에 추가 표시할 컴포넌트입니다.
onClick(() -> Unit)?카드 전체 클릭 시 호출되는 콜백입니다. null일 경우 클릭이 비활성화됩니다.

Advanced

Modifier.cardBorder

카드 표면 테두리를 배경 위에 그립니다. cardDefault.border 가 null 이면 아무것도 적용하지 않습니다. background 다음에 호출해야 테두리가 배경에 가려지지 않습니다.

Parameters
이름타입설명
cardDefaultWantedCardDefault테두리와 모양 정보를 담은 설정 객체입니다.

Return
타입설명
Modifier테두리가 적용된 Modifier 입니다.

WantedCardDefault

카드의 표시 스펙을 지정하는 데이터 클래스입니다. 스켈레톤 표시 여부와 카드 표면(배경·모양·여백) 설정을 함께 담습니다.

Properties
이름타입설명
topContentSkeletonBoolean상단 콘텐츠 영역에 스켈레톤을 표시할지 여부입니다.
captionSkeletonBoolean메인 캡션에 스켈레톤을 표시할지 여부입니다.
extraCaptionSkeletonBoolean추가 캡션에 스켈레톤을 표시할지 여부입니다.
bottomContentSkeletonBoolean하단 콘텐츠 영역에 스켈레톤을 표시할지 여부입니다.
ratioFloat썸네일 스켈레톤의 비율입니다.
backgroundColorColor카드 표면 배경색입니다. 기본값 Transparent 는 배경을 그리지 않는 것과 같습니다.
shapeShape배경 모양입니다.
borderBorderStroke?카드 표면 테두리입니다. null 이면 테두리를 그리지 않습니다. 배경 위에 그려지므로 modifier 에 직접 border 를 주면 배경에 가려집니다.
interactionShapeShape클릭·리플 모양입니다.
contentPaddingPaddingValues카드 표면 안쪽 여백입니다. modifier 의 padding 은 클릭 영역 바깥 마진이 되므로 안쪽 여백은 이 값으로 줍니다.

WantedCardDefaults

getDefault

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

val config = WantedCardDefaults.getDefault(
    topContentSkeleton = true,
    bottomContentSkeleton = true
)
Parameters
이름타입설명
topContentSkeletonBoolean상단 콘텐츠 영역에 스켈레톤을 표시할지 여부입니다. 기본값은 false입니다.
captionSkeletonBoolean메인 캡션에 스켈레톤을 표시할지 여부입니다. 기본값은 true입니다.
extraCaptionSkeletonBoolean추가 캡션에 스켈레톤을 표시할지 여부입니다. 기본값은 true입니다.
bottomContentSkeletonBoolean하단 콘텐츠 영역에 스켈레톤을 표시할지 여부입니다. 기본값은 false입니다.
backgroundColorColor카드 표면 배경색입니다. 기본값 Transparent 는 배경을 그리지 않는 것과 같습니다.
shapeShape배경 모양입니다.
borderBorderStroke?카드 표면 테두리입니다. null 이면 테두리를 그리지 않습니다. 배경 위에 그려지므로 modifier 에 직접 border 를 주면 배경에 가려집니다.
interactionShapeShape클릭·리플 모양입니다.
contentPaddingPaddingValues카드 표면 안쪽 여백입니다. modifier 의 padding 은 클릭 영역 바깥 마진이 되므로 안쪽 여백은 이 값으로 줍니다.

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

© 2026 Wanted Lab, Inc.