Sheet와 FullScreen은 공존할 수 없다

문제

새로 배포할 앱 QA때 sheet로 구현한 팝업화면과 fullscreen으로 구현한 커스텀 얼럿이 동시에 노출 되는 경우 사라진다는 제보를 받았다.

 

황당해서 노션에 글쓰려고 글감 목록에 적어둠

 

 

문제 재현
부랴부랴 해결하긴 했는데, 찾아보니 swift의 sheet와 fullscreen view는 둘 다 화면의 최상단에 위치하려고 해서 충돌이 일어날 수 있다고 한다. 실제로 이게 문제였는지 테스트를 해보자.

 

    @State var showFullScreen: Bool = false
    @State var showSheet: Bool = false

    var body: some View {
        VStack {
            Button {
                showSheet.toggle()
                showFullScreen.toggle()
            } label: {
                Text("Button 이에여")
            }

        }
        .fullScreenCover(isPresented: $showFullScreen) {
            VStack {
                Text("FullScreenView")
                Button {
                    showFullScreen.toggle()
                } label: {
                    Text("닫기")
                }
            }
        }
        .sheet(isPresented: $showSheet) {
            Text("SheetView")
        }
    }

 

 

코드는 대충 버튼을 눌렀을 때 fullScreenCover랑 sheet의 isPresented 값을 함께 true로 변경해주었다. 결과를 보자!

버튼을 누르니 FullscreenView가 먼저 나오고 > 그 다음에 닫기를 눌러 화면을 없애니 뒤에 sheet가 나왔다...

엑스코드에는 경고 메시지도 나타났는데, 다음과 같다.

한 번에 하나의 시트만.. 허용해준다니... 난 두개가 필요한데!!!

 

해결

결국 실제 프로젝트에서는 팝업 화면을 sheet가 아닌 ZStack의 최상단에 올려둘 새로운 뷰로 생성해 해결했다. ZStack의 인덱스를 가장 높은 값으로 설정하면 sheet가 화면의 가장 위에 뜰 것이고, 커스텀 얼럿은 그것보다도 위에 올라와야 하는 것이 스펙이었기 때문에 적합한 수정이라고 생각했다.