Accordion

콘텐츠의 숨겨진 내용을 확장하거나 축소하여 보여주는 요소입니다. 클릭하여 원하는 정보만 선택적으로 볼 수 있어, 제한된 공간에서 많은 정보를 효율적으로 구성하고 탐색할 수 있도록 돕습니다.

@MainActor struct Accordion

Overview

Accordion은 제목과 함께 접을 수 있는 컨텐츠를 제공하는 컴포넌트입니다. 제목을 탭하면 컨텐츠가 확장되거나 축소됩니다. 설명 텍스트와 커스텀 컨텐츠를 함께 표시할 수 있습니다.

아코디언은 제한된 공간에서 많은 정보를 효율적으로 표시하기 위한 UI 패턴입니다. 사용자는 관심 있는 항목만 확장하여 볼 수 있습니다.

// 기본 사용법
Accordion(
    title: "아코디언 제목",
    description: "아코디언 설명 텍스트입니다."
)

// 커스텀 컨텐츠 추가
Accordion(
    title: "커스텀 컨텐츠",
    description: "설명 텍스트"
) {
    VStack(alignment: .leading, spacing: 8) {
        Text("커스텀 컨텐츠 1")
        Text("커스텀 컨텐츠 2")
    }
}

// 스타일 커스터마이징
Accordion(title: "커스텀 스타일")
    .title(.headline, weight: .semibold, color: .red)
    .verticalPadding(.small)
    .leadingIcon(.info)
    .fillWidth()

Topics

Initializers

init(title: String, description: String?)

아코디언을 생성합니다.

  • Parameters
    ParameterDescription
    title아코디언의 제목
    description확장 시 표시될 설명 텍스트, 생략하면 기본값으로 nil 적용
init<V>(title: String, description: String?, content: () -> V)

아코디언을 생성합니다.

  • Parameters
    ParameterDescription
    title아코디언의 제목
    description확장 시 표시될 설명 텍스트, 생략하면 기본값으로 nil 적용
    content확장 시 표시될 커스텀 컨텐츠 뷰

Instance Properties

var body: some View

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

Instance Methods

func description(Typography.Variant, weight: Typography.Weight, color: SwiftUI.Color) -> Accordion

설명 텍스트의 타이포그래피 속성을 조정합니다.

  • Parameters

    ParameterDescription
    variant텍스트 변형, 생략하면 기본값으로 .label1 적용
    weight텍스트 굵기, 생략하면 기본값으로 .regular 적용
    color텍스트 색상, 생략하면 기본값으로 .semantic(.labelNeutral) 적용

  • Return Value

    수정된 아코디언 인스턴스

func fillWidth(Bool) -> Accordion

아코디언이 부모 컨테이너의 너비를 채우도록 설정합니다.

  • Parameters

    ParameterDescription
    fillWidth너비를 채울지 여부, 생략하면 기본값으로 true 적용

  • Return Value

    수정된 아코디언 인스턴스

  • Discussion

    이 수정자를 적용하면 좌우 20pt의 여백이 추가됩니다.

func hideDivider(Bool) -> Accordion

아코디언 하단의 구분선을 숨깁니다.

  • Parameters

    ParameterDescription
    hideDivider구분선을 숨길지 여부, 생략하면 기본값으로 true 적용

  • Return Value

    수정된 아코디언 인스턴스

func leadingIcon(Icon?, color: SwiftUI.Color?) -> Accordion

아코디언 제목 앞에 아이콘을 추가합니다.

  • Parameters

    ParameterDescription
    leadingIcon표시할 아이콘, 생략하면 기본값으로 nil 적용
    color아이콘 색상, 생략하면 기본값으로 nil 적용 (기본 색상 사용)

  • Return Value

    수정된 아코디언 인스턴스

func title(Typography.Variant, weight: Typography.Weight, color: SwiftUI.Color) -> Accordion

타이틀 텍스트의 타이포그래피 속성을 조정합니다.

  • Parameters

    ParameterDescription
    variant텍스트 변형, 생략하면 기본값으로 .body2 적용
    weight텍스트 굵기, 생략하면 기본값으로 .bold 적용
    color텍스트 색상, 생략하면 기본값으로 .semantic(.labelNormal) 적용

  • Return Value

    수정된 아코디언 인스턴스

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

아코디언 헤더 우측에 커스텀 컨텐츠를 추가합니다.

  • Parameters

    ParameterDescription
    trailingContent표시할 커스텀 컨텐츠 뷰

  • Return Value

    수정된 아코디언 인스턴스

  • Discussion

    이 수정자를 사용하면 기본 화살표 아이콘이 대체됩니다.

func verticalPadding(VerticalPadding) -> Accordion

아코디언 헤더의 상하 여백 크기를 조정합니다.

  • Parameters

    ParameterDescription
    verticalPadding상하 여백 크기, 생략하면 기본값으로 .large 적용

  • Return Value

    수정된 아코디언 인스턴스

Enumerations

enum VerticalPadding

아코디언의 상하 여백을 나타내는 열거형입니다.

Enumeration Cases

case large

넓은 여백

case medium

중간 여백

case small

좁은 여백

Relationships

Conforms To

Swift.Sendable

SwiftUICore.View

© 2026 Wanted Lab, Inc.