Present, FullScreen 한 번에 처리하기

🚨 SwiftUI는 UIKit에서의 Present를 뒤에 시트를 일부 가리며 Swipe로 내릴 수 있는 Present, 뒤 시트를 전부 가리며 Swipe로 내릴 수 없는 Fullscreen 두 가지 모디파이어로 나누었다. 이 둘을 더 간편하게 사용하고 싶었다.

기존 코드와 문제점

• 기존 코드) Swift Enum 연관값을 통한 Present, FullScreen 분리 상태 케이스 생성

extension ProfileView{
    enum SheetType:String, Identifiable{
        var id: String{ self.rawValue}
        case profile // 프로파일 뷰로 가기 위한 처리
    }
    enum FullscreenType:String, Identifiable{
        var id: String{ self.rawValue}
        case settings // 설정 뷰로 가기 위한 처리
    }
    enum PresentType:Equatable{
        case sheet(SheetType)
        case fullscreen(FullscreenType)
    }
...
}

• 문제 1) 분기 처리의 복잡함과 뷰 컴포넌트 내부에 @State 코드 증가

struct ProfileView: View{
...
    @State var presentType:PresentType? = nil
    @State var sheetType: SheetType? = nil
    @State var fullScreenType: FullscreenType? = nil
...
}

• 문제 2) 연관 값을 이용한 뷰 컴포넌트 내부 처리 로직 구성

struct ProfileView: View{
...
.onChange(of: presentType, perform: { value in
                            switch value{
                            case .fullscreen(let fullScreen):
                                self.fullScreenType = fullScreen
                                self.sheetType = nil
                            case .sheet(let sheet):
                                self.sheetType = sheet
                                self.fullScreenType = nil
                            case .none: break
                            }
                            self.presentType = nil
                        })
...
}

⇒ 사실 이 로직은 Extension으로 빼도 됨

✅ 뷰 컴포넌트에서 처리하는 코드의 수를 줄여보자!!

해결 및 한계점

해결

• 모디 파이어 생성 및 내부 로직 처리

extension ProfileView{
...
struct SheetModifier<A: View,B:View>: ViewModifier{
        @Binding var presentType:PresentType?
        @ViewBuilder var sheet:((SheetType) -> A)
        @ViewBuilder var fullScreen:((FullscreenType) -> B)
        @State private var fullScreenType: ProfileView.FullscreenType? = nil
        @State private var sheetType: SheetType? = nil
        func body(content: Content) -> some View {
            content
                .sheet(item: $sheetType, content:sheet)
                .fullScreenCover(item: $fullScreenType,content: fullScreen)
                .onChange(of: presentType, perform: { value in
                    switch value{
                    case .fullscreen(let fullScreen):
                        self.fullScreenType = fullScreen
                        self.sheetType = nil
                    case .sheet(let sheet):
                        self.sheetType = sheet
                        self.fullScreenType = nil
                    case .none: break
                    }
                    self.presentType = nil
                })
        }
    }
}

• 뷰 컴포넌트 파일 내부에 extension

struct ProfileView{
    ...
}
fileprivate extension View{
    func present<A:View,B:View>(presentType:Binding<ProfileView.PresentType?>,sheet:@escaping ((ProfileView.SheetType) -> A),fullScreen:@escaping ((ProfileView.FullscreenType) -> B))->some View{
        self.modifier(ProfileView.SheetModifier(presentType: presentType, sheet: sheet, fullScreen: fullScreen))
    }
}

• 사용 예시

struct ProfileView{
    ...
    @State var presentType:PresentType? = nil
    ...
            .present(presentType: $presentType) { item in
                        switch item{
                        case .profile: ProfileEditView()
                        }
                    } fullScreen: { item in
                        switch item{
                        case .settings: SettingView()
                        }
                    }
}

한계점

1. Detent (Sheet 높이를 커스텀 하는 기능) 처리는 할 수 없다.
2. 각각의 뷰 마다 알맞는 PresentType, FullscreenType, 모디파이어를 직접 입력 해야한다.
3. PresentType, FullScreenType이 뷰를 표시하기 위한 Enum 타입으로 기존 .sheet에서 원하는 순수 데이터 바인딩과 달리 추가적인 로직 처리가 필요할 수 있다.