Action area

모달 혹은 화면 하단 영역에서 메인, 대체, 보조 행동을 할 수 있는 다양한 레벨의 버튼 묶음을 제공합니다.

@MainActor struct ActionArea

Overview

이 컴포넌트는 화면 하단에 위치하며 주요 액션 버튼과 보조 버튼을 표시합니다. 다양한 레이아웃 변형을 지원하고, 캡션 텍스트와 추가 콘텐츠를 포함할 수 있습니다.

// 기본 강조 버튼 영역
ActionArea(variant: .strong(
    main: .init(text: "확인", action: { confirmAction() }),
    sub: .init(text: "취소", action: { cancelAction() })
))

// 캡션이 있는 중립 버튼 영역
ActionArea(variant: .neutral(
    main: .init(text: "저장", action: { saveData() })
))
.caption("변경 사항을 저장하시겠습니까?")

// 추가 콘텐츠가 있는 취소 버튼 영역
ActionArea(variant: .cancel(
    main: .init(text: "닫기", action: { dismiss() })
))
.extra({
    Text("추가 정보")
        .typography(variant: .label2) 
})

Note

키보드가 표시될 때 ActionArea가 위치가 자동으로 키보드 상단에 붙어있도록 조정됩니다.

Topics

Structures

struct ButtonInfo

ActionArea에 표시될 버튼 정보를 정의하는 구조체입니다.

  • Overview

    버튼의 텍스트, 액션, 커스텀 뷰 등을 지정할 수 있습니다.

Initializers

init(text: String, action: (() -> Void))

기본 버튼 정보를 초기화합니다.

  • Parameters

    ParameterDescription
    text버튼에 표시할 텍스트
    action버튼 클릭 시 실행할 액션

Type Methods

static func custom<V>(() -> V) -> ActionArea.ButtonInfo

커스텀 버튼 뷰를 사용하는 버튼 정보를 생성합니다.

  • Parameters

    ParameterDescription
    custom커스텀 버튼 뷰를 생성하는 클로저

  • Return Value

    커스텀 뷰가 포함된 ButtonInfo 인스턴스

  • Discussion

    Note

    버튼 크기가 가능한 한 최대 크기가 되도록 하려면 fillWidth(_:) 모디파이어를 사용하세요.

Initializers

init(variant: Variant)

ActionArea 컴포넌트를 초기화합니다.

  • Parameters

    ParameterDescription
    variant버튼 영역의 변형 스타일과 버튼 구성

Instance Properties

var body: some View

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

Instance Methods

func backgroundColor(SwiftUI.Color?) -> ActionArea

배경 색상을 설정합니다.

  • Parameters

    ParameterDescription
    backgroundColor설정할 색상. nil을 전달하면 기본 배경색을 사용합니다.

  • Return Value

    수정된 ActionArea 인스턴스

  • Discussion

    지정한 색은 배경뿐 아니라 상단 sticky 그라데이션의 시작색으로도 함께 적용됩니다. 두 색이 어긋나면 경계가 보이므로 값을 분리하지 않습니다.

func caption(String?, icon: Icon?) -> ActionArea

버튼 위에 표시할 캡션 텍스트를 설정합니다.

  • Parameters

    ParameterDescription
    caption표시할 캡션 텍스트
    icon캡션 텍스트 앞에 표시할 아이콘, 생략하면 기본값으로 nil을 적용하여 아이콘을 표시하지 않습니다.

  • Return Value

    수정된 ActionArea 인스턴스

  • Discussion

    icon을 지정하면 캡션 텍스트 앞에 16pt 아이콘을 함께 표시합니다. 아이콘 색은 캡션 텍스트와 같습니다.

    .caption("변경 사항을 저장하시겠습니까?")                      // 텍스트만
.caption("변경 사항을 저장하시겠습니까?", icon: .circleInfo)   // 아이콘 + 텍스트
func extra<V>(() -> V, divider: Bool) -> ActionArea

버튼 위에 표시할 추가 콘텐츠를 설정합니다.

  • Parameters

    ParameterDescription
    content표시할 추가 콘텐츠를 생성하는 클로저
    divider추가 콘텐츠 위에 구분선 표시 여부, 생략하면 기본값으로 true 적용

  • Return Value

    수정된 ActionArea 인스턴스

func scrollReachedEnd(Bool) -> ActionArea

스크롤이 바닥에 닿았는지를 직접 알려줍니다.

  • Parameters

    ParameterDescription
    reachedEnd스크롤이 끝에 닿았는지 여부. true면 그라데이션을 숨깁니다.

  • Return Value

    수정된 ActionArea 인스턴스

  • Discussion

    ActionArea는 상단 그라데이션으로 “아래에 가려진 콘텐츠가 있다”를 표현합니다. ScrollView를 쓰면 이 값이 자동으로 전달되므로 이 수정자는 필요 없습니다. SwiftUI.ScrollView·List처럼 신호를 올려주지 않는 컨테이너를 쓸 때만 사용합니다.

    ActionArea(variant: .strong(main: .init(text: "확인", action: {})))
    .scrollReachedEnd(scrollProxy.isAtBottom)

Enumerations

enum Variant

ActionArea의 버튼 레이아웃 변형을 정의합니다.

Enumeration Cases

case cancel(main: ButtonInfo)

취소 버튼만 있는 간단한 레이아웃

  • Parameters

    ParameterDescription
    main주 버튼 정보
case neutral(main: ButtonInfo, sub: ButtonInfo?, alternative: ButtonInfo?)

중립적인 스타일의 버튼 레이아웃

  • Parameters

    ParameterDescription
    main주 버튼 정보
    sub보조 버튼 정보, 생략하면 기본값으로 nil 적용
    alternative대체 버튼 정보, 생략하면 기본값으로 nil 적용
case strong(main: ButtonInfo, sub: ButtonInfo?, alternative: ButtonInfo?)

강조된 주 버튼과 보조/대체 버튼이 있는 레이아웃

  • Parameters

    ParameterDescription
    main주 버튼 정보
    sub보조 버튼 정보, 생략하면 기본값으로 nil 적용
    alternative대체 버튼 정보, 생략하면 기본값으로 nil 적용

Associated Extensions

extension View
func actionArea(scrollReachedEnd: Bool?, () -> ActionArea) -> some View

현재 뷰에 하단 ActionArea를 적용합니다.

  • Parameters

    ParameterDescription
    scrollReachedEnd콘텐츠 스크롤이 바닥에 닿았는지 여부. ScrollView를 쓰면 자동으로 전달되므로 생략하고, SwiftUI.ScrollView·List를 쓸 때만 직접 넘깁니다.
    actionArea하단에 배치할 ActionArea를 만드는 클로저

  • Return Value

    ActionArea가 적용된 뷰

  • Discussion

    구성은 ActionArea의 모디파이어 체인으로 하고, 완성된 인스턴스를 이 슬롯에 넘깁니다.

    contentView
    .actionArea {
        ActionArea(variant: .strong(
            main: .init(text: "확인", action: { confirmAction() }),
            sub: .init(text: "취소", action: { cancelAction() })
        ))
        .caption("변경 사항을 저장하시겠습니까?")
    }

    Note

    슬롯 클로저에 @ViewBuilder를 붙이지 않았습니다. 붙이면 if문이 _ConditionalContent를 만들어 ActionArea 타입 제약이 깨집니다. 공개 모디파이어가 모두 Self를 돌려주므로 체인과 삼항 연산자는 그대로 쓸 수 있습니다.

Relationships

Conforms To

Swift.Sendable

SwiftUICore.View

© 2026 Wanted Lab, Inc.