들어가며

작년에 첫 프로젝트를 진행하면서 커스텀 알람을 만들기 위해 CustomAlert, CustomDialog 등을 검색해보며 삽질해서 겨우겨우 만들었던 기억이 있다. 그러나 그렇게 구현한 커스텀 알람, 팝업은 너무나도 구렸고 ZStack을 어떻게 활용하고 ~ 레이아웃 어떻게 관리하고~ 코드도 엉망진창이였다. 무엇보다 만들었던 커스텀 알람뷰를 제일 상위뷰에 모두 넣어야하는 불상사가 일어났다.

그렇게 SwiftUI에서 팝업기능은 끔찍하다고 느꼈는데... 이번에 새 프로젝트를 진행하게 되면서 또 커스텀 팝업을 구현하게 되었다. 그래서 이번에는 진짜 제대로 깔끔하게 구현해보자 마음먹고 어떻게 구현할까 고민하던 중 기막힌 아이디어가 생각났다! 바로 fullScreenCover를 이용하는 것이다.

fullScreenCover

fullScreenCover는 sheet와 비슷한 개념으로 밑에서 올라오는 창인데 전체 화면을 전부 가려준다(safeArea까지)

자세한건 애플 공식문서 확인 ~
🍎 fullScreenCover

그래서 커스텀 팝업을 띄울 때 fullScreenCover가 올라오고 거기에 팝업콘텐츠를 두고, 배경을 불투명하게 만드는 개념으로 커스텀 할 수 있다 !!

바로 코드로 들어가보자

ContentView

import SwiftUI

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        Button("커스텀 팝업") {
            isPresented.toggle()
        }
        .fullScreenCover(isPresented: $isPresented) {
            CustomPopUpView(isPresented: $isPresented, title: "이미 가입된 이메일입니다", content:
                                "로그인을 시도하거나다른 이메일을 사용해주세요.")
        }
        .transaction { transaction in
            transaction.disablesAnimations = true
        }
    }
}

• 버튼을 누르면 커스텀 팝업 뷰가 뜨도록 구성했다.
• .fullScreenCover 안에 내가 띄우고 싶은 커스텀 팝업 뷰를 넣으면 된다.
• transaction.disablesAnimations = true 를 통해 팝업이 밑에서 위로 올라오는 애니메이션을 제거하였다.

CustomPopUpView

import SwiftUI

struct CustomPopUpView: View {
    @Binding var isPresented: Bool
    let title: String
    let content: String
    
    var body: some View {
        ZStack {
            Color.rmDimmer.ignoresSafeArea()
            VStack(spacing: 0) {
                Text(title)
                    .font(.l7())
                Text(content)
                    .font(.b1())
                    .multilineTextAlignment(.center)
                    .foregroundColor(.rmGray700)
                    .padding(.top, 10)
                Button("확인") {
                    isPresented.toggle()
                }
                .buttonStyle(.popUp())
                .padding(.top, 20)
            }
            .padding(EdgeInsets(top: 30, leading: 20, bottom: 20, trailing: 20))
            .background(
                RoundedRectangle(cornerRadius: 16)
                    .fill(.rmWhite)
            )
            .padding(.horizontal, 30)
        }
        //        .presentationBackground(.black.opacity(0.8)) 배경을 투명하게 만들기!
    }
}

• 내가 띄우고 싶은 커스텀 팝업 뷰다.
• 칼라에 .rmDimmer나 폰트에 .l7(), .b1() 등은 진행하고 있는 프로젝트의 디자인 시스템을 적용한거라 복붙한다면 .gray, .title 등을 넣어줘야 할 것이다. (+ .buttonStyle(.popUp()) 도 마찬가지다....
• title과 content를 파라미터로 둬서 이 커스텀 팝업 뷰를 재사용 가능하게 구현했다.
• 이 코드를 참고해서 자기가 만들고 싶은 팝업 뷰로 구성하면 될 것이다.

구현영상

정상적으로 구현되는 것을 볼 수 있는데 만약에 배경을 불투명하게 하지않고 투명하게 하고 싶다면

.presentationBackground(.black.opacity(0.8))

주석처리 되있는 이 메서드만 적용해주면 된다 !! 그러면 배경이 투명하게 보일 것이다 ~

마치며

fullScreenCover를 활용하여 커스텀 팝업뷰를 만들어 보았는데 예전에 엉망진창으로 구현했던 커스텀 알람보다 코드도 훨씬 간결하고 가독성도 좋고 재사용도 가능하게 되어 참 뿌듯하다 ~~~