Bottom sheet

사용자가 현재 맥락과 밀접한 관련이 있는 범위가 정해진 작업을 수행할 수 있도록 돕는 요소입니다. 모바일 화면 하단에 오버레이되어 추가적인 사항이나 액션을 표시합니다. 메인 콘텐츠에 대한 접근성을 유지하면서 임시적으로 간단한 정보를 쉽게 접근할 수 있게 해줍니다.

@MainActor struct BottomSheet

Overview

SwiftUI의 .sheet 수정자와 함께 사용하여 다양한 크기와 동작을 지원하는 바텀 시트를 구현합니다. 내비게이션 바, 액션 영역, 핸들 등의 요소를 설정할 수 있습니다.

@State private var showBottomSheet = false

Button("바텀 시트 열기") {
    showBottomSheet = true
}
.sheet(isPresented: $showBottomSheet) {
    BottomSheet {
        VStack(spacing: 16) {
            Text("바텀 시트 내용")
            Button("닫기") {
                showBottomSheet = false
            }
        }
    }
    .resize(.flexible)
    .modalNavigation {
        ModalNavigation()
            .title("제목")
    }
}

모디파이어를 사용하면 더 간편하게 구현할 수 있습니다:

YourView()
    .bottomSheet(
        isPresented: $showBottomSheet,
        resize: .hug
    ) {
        Text("바텀 시트 내용")
    }

Topics

Initializers

init<V>(() -> V)

바텀 시트 모달을 초기화합니다.

  • Parameters
    ParameterDescription
    content모달 내에 표시할 콘텐츠를 반환하는 클로저

Instance Properties

var body: some View

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

Instance Methods

func ignoresEdgeInsets(Bool) -> BottomSheet

컨텐츠의 기본 여백을 무시할지 설정합니다.

  • Parameters

    ParameterDescription
    ignoresEdgeInsets여백 무시 여부

  • Return Value

    수정된 바텀 시트 뷰

func modalActionArea(ActionArea.Model?) -> BottomSheet

바텀 시트 하단에 액션 영역을 설정합니다.

  • Parameters

    ParameterDescription
    actionAreaModel액션 영역 모델

  • Return Value

    수정된 바텀 시트 뷰

func modalNavigation((() -> Montage.ModalNavigation)?) -> BottomSheet

바텀 시트 상단에 내비게이션 바를 설정합니다.

  • Parameters

    ParameterDescription
    navigation내비게이션 바를 반환하는 클로저

  • Return Value

    수정된 바텀 시트 뷰

func needHandle(Bool) -> BottomSheet

바텀 시트 상단의 핸들 표시 여부를 설정합니다.

  • Parameters

    ParameterDescription
    needHandle핸들 표시 여부

  • Return Value

    수정된 바텀 시트 뷰

func resize(BottomSheet.Resize) -> BottomSheet

바텀 시트의 크기 조절 방식을 설정합니다.

  • Parameters

    ParameterDescription
    resize크기 조절 방식

  • Return Value

    수정된 바텀 시트 뷰

Enumerations

enum Resize

바텀 시트의 크기를 정의하는 열거형입니다.

Enumeration Cases

case fill

화면 전체를 채웁니다.

case fixedHeight(CGFloat)

지정한 높이로 고정됩니다.

  • Parameters
    ParameterDescription
    height높이
case fixedRatio(CGFloat)

화면 높이의 특정 비율로 고정됩니다.

  • Parameters
    ParameterDescription
    ratio비율 (0.0 ~ 1.0)
case flexible

사용자가 드래그하여 크기를 조절할 수 있습니다.

case hug

컨텐츠 크기에 맞게 자동 조절됩니다.

Associated Extensions

extension View
func bottomSheet<V>(isPresented: Binding<Bool>, isFullScreenCover: Bool, needHandle: Bool, resize: BottomSheet.Resize, ignoresEdgeInsets: Bool, actionAreaModel: ActionArea.Model?, navigation: (() -> ModalNavigation)?, onDismiss: (() -> Void)?, () -> V) -> some View

바텀 시트 모달을 표시합니다.

  • Parameters

    ParameterDescription
    isPresented모달 표시 여부를 제어하는 바인딩
    isFullScreenCover전체 화면 모달로 표시할지 여부, 생략하면 기본값으로 false 적용
    needHandle상단 핸들 표시 여부, 생략하면 기본값으로 true 적용
    resize모달 크기 조절 방식, 생략하면 기본값으로 .hug 적용
    ignoresEdgeInsets모달 내용이 Edge 인셋을 무시할지 여부
    actionAreaModel모달 하단에 표시할 액션 영역 모델, 생략하면 기본값으로 nil 적용
    navigation모달 상단에 표시할 네비게이션 클로저, 생략하면 기본값으로 nil 적용
    onDismiss모달이 닫힐때 호출될 클로저
    content모달에 표시할 콘텐츠 클로저

  • Return Value

    바텀 시트 모달이 적용된 뷰

  • Discussion

    화면 하단에서 올라오는 바텀 시트 형태의 모달을 표시합니다.

Relationships

Conforms To

Swift.Sendable

SwiftUICore.View

© 2026 Wanted Lab, Inc.