List card

여러 콘텐츠를 목록 형태로 보여줄 때 사용하는 요소입니다. 이미지, 텍스트, 뱃지 등 다양한 요소를 조합하여 각 항목의 정보를 시각적으로 일관성 있게 전달합니다.

@MainActor struct ListCard

Overview

썸네일 이미지와 텍스트 콘텐츠를 수평 방향으로 배치한 카드로, 리스트 항목으로 사용하기 적합합니다. 스켈레톤 로딩 상태를 지원하고 다양한 콘텐츠를 배치할 수 있습니다.

@State private var isLoading = false

ListCard(
    thumbnail: { Thumbnail(urlString: imageURL, ratio: .r1x1) },
    skeleton: $isLoading,
    title: "리스트 카드 제목"
)
.caption("부제목")
.trailingContent { IconButton(icon: .arrowRight) }

Topics

Initializers

init(thumbnail: () -> Thumbnail, skeleton: Binding<Bool>, title: String)

List 카드를 초기화합니다.

  • Parameters
    ParameterDescription
    thumbnail카드에 표시할 썸네일 이미지
    skeleton스켈레톤 로딩 상태 바인딩
    title카드 제목으로 표시할 뷰

Instance Properties

var body: some View

뷰의 내용과 동작을 정의합니다.

Instance Methods

func bottomContent<V>(() -> V) -> ListCard

카드 하단에 표시할 콘텐츠를 설정합니다.

  • Parameters

    ParameterDescription
    content하단에 표시할 콘텐츠 뷰를 반환하는 클로저

  • Return Value

    수정된 카드 인스턴스

func caption(String?) -> ListCard

카드의 캡션(부제목)을 설정합니다.

  • Parameters

    ParameterDescription
    caption표시할 캡션 문자열

  • Return Value

    수정된 카드 인스턴스

func extraCaption(String?) -> ListCard

카드의 추가 캡션을 설정합니다.

  • Parameters

    ParameterDescription
    extraCaption표시할 추가 캡션 문자열

  • Return Value

    수정된 카드 인스턴스

func leadingContent<V>(() -> V) -> ListCard

카드 왼쪽(썸네일 앞)에 표시할 콘텐츠를 설정합니다.

  • Parameters

    ParameterDescription
    content왼쪽에 표시할 콘텐츠 뷰를 반환하는 클로저

  • Return Value

    수정된 카드 인스턴스

func topContent<V>(() -> V) -> ListCard

카드 상단에 표시할 콘텐츠를 설정합니다.

  • Parameters

    ParameterDescription
    content상단에 표시할 콘텐츠 뷰를 반환하는 클로저

  • Return Value

    수정된 카드 인스턴스

func trailingContent<V>(() -> V) -> ListCard

카드 오른쪽에 표시할 콘텐츠를 설정합니다.

  • Parameters

    ParameterDescription
    content오른쪽에 표시할 콘텐츠 뷰를 반환하는 클로저

  • Return Value

    수정된 카드 인스턴스

Relationships

Conforms To

Swift.Sendable

SwiftUICore.View

© 2026 Wanted Lab, Inc.