[SwiftUI] 커스텀 BottomSheet을 만들어보자

이번 포스팅에서는 일전에 포스팅했던 메모앱에서 사용했던 BottomSheet에 대해서 작성해보려고 한다.

메모를 추가, 삭제, 수정했을 때마다 하단에서 해당 작업을 성공했다는 알림을 노출하는 것이 목적이었다.

바로 알아보자.

 

BottomSheetType

앞서 말한 것처럼 추가, 삭제, 수정 세 가지를 알려야 하기 때문에 이에 맞는 텍스트들이 필요하다.

enum BottomSheetType {
    
    enum BottomSheetResult {
        case fail
        case success
        
        var description: String {
            switch self {
            case .fail:
                return "실패했습니다 :("
            case .success:
                return "성공했습니다 :)"
            }
        }
    }
    
    case update(BottomSheetResult)
    case delete(BottomSheetResult)
    case add(BottomSheetResult)
    
    var title: String {
        switch self {
        case .update:
            return "메모 업데이트 안내"
        case .delete:
            return "메모 삭제 안내"
        case .add:
            return "메모 추가 안내"
        }
    }
    
    var message: String {
        switch self {
        case .update(let type):
            return "업데이트에 \(type.description)"
        case .delete(let type):
            return "삭제에 \(type.description)"
        case .add(let type):
            return "새로운 메모 추가에 \(type.description)"
        }
    }
}

해당 작업에 실패했는지 성공했는지 알려줄 수 있게 만들었다.

그다지 중요하진 않다.

다음.

 

BottomSheet View

일단 하단에 보이게될 알림과 뒤에 백그라운드가 필요하다.

따라서 ZStack을 이용해서 Color를 통해 백그라운드를 먼저 넣고, 알림 메시지가 있는 화면을 보여주기로 했다.

struct BottomSheet: View {

    @Binding var isShowing: Bool
    @Binding var bottomSheetType: BottomSheetType 
    
    var body: some View {
        ZStack(alignment: .bottom) { 
            if isShowing {
                Color.black
                    .opacity(0.3)
                    .ignoresSafeArea()
                    .onTapGesture { isShowing.toggle() }
                
                BottomSheetMessageView(bottomSheetType: $bottomSheetType)
                    .setRoundedCorner(radius: 12)
                    .transition(.move(edge: .bottom))
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
        .ignoresSafeArea()
        .animation(.easeInOut, value: isShowing)
    }
}

BottomSheet을 상위뷰에서 사용할 예정이기 때문에 상위뷰가 가지고 있는 프로퍼티들을 Binding 해서 사용했다. 가령 메시지가 추가되었다는 것은 상위뷰만 알고 있기 때문에 BottomSheetType을 Binding 해 "추가"와 관련된 내용으로 채우기 위해서다.

 

BottomSheetMessageView

위에 보이는 실제 알림 내용을 가지고 있는 뷰다.

struct BottomSheetMessageView: View {
    
    @Binding var bottomSheetType: BottomSheetType
    
    var body: some View {
        
        VStack(spacing: 8) {
            Text(bottomSheetType.title)
                .font(.system(size: 18, weight: .bold))
                .foregroundStyle(.black)
            
            Text(bottomSheetType.message)
                .font(.system(size: 16, weight: .regular))
                .foregroundStyle(.black)
        }
        .frame(maxWidth: .infinity, minHeight: 150)
        .background(.white)
    }
}

BottomSheet에서 Binding된 값을 전달받아 사용한다.

 

사용방법

간단하다. ZStack으로 구성된 상위뷰에서 하단에 작성하고 @State로 선언된 프로퍼티만 잘 바인딩해서 사용하면 된다.

@State private var isShowingBottomSheet = false
@State private var bottomSheetType: BottomSheetType = .add(.success)

var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            ZStack {
                NavigationStack {
                    List {
                         ...
                        }
                    }
               }
               ...
               BottomSheet(isShowing: $isShowingBottomSheet, bottomSheetType: $bottomSheetType)
            }
        }
    }

 

더 좋은 방법이 있거나 잘못된 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

그럼 이만.