SwiftUI 커스텀 팝업 노출 방법 fullScreenCover
SwiftUI + TCA: 실전 프로젝트로 완성하는 차세대 iOS 아키텍처 강의 | 덤벨로퍼 - 인프런
덤벨로퍼 | 복잡한 SwiftUI 상태 관리, TCA (The Composable Architecture)로 깔끔하고 견고한 앱을 만드세요. 실전 프로젝트 예제로 핵심만 빠르게 배웁니다. , SwiftUI + TCA: 실전 프로젝트로 완성하는 차세대
www.inflearn.com
커스텀 팝업 view 구조
ZStack {
Color.black.opacity(0.5)
팝업 뷰
}
팝업을 띄우는 방법 (부모 뷰 에서)
fullScreenCover + UIViewRepresent
struct ClearBackgroundRepresentable: UIViewRepresentable {
func makeUIView(context: Context) -> UIView {
return InnerView()
}
func updateUIView(_ uiView: UIView, context: Context) {
}
private class InnerView: UIView {
override func didMoveToWindow() {
super.didMoveToWindow()
superview?.superview?.backgroundColor = .clear
}
}
}
◦ ClearBackgroundRepresentable과 같은 UIViewRepresentable을 만들고, makeUIView 메서드에서 InnerView를 반환합니다.
◦ InnerView의 didMoveToWindow() 메서드 내에서 superview?.superview?.backgroundColor = .clear 코드를 통해 UIKit을 사용하여 백그라운드를 투명하게 변경합니다.
백그라운드를 UIKit에서 Clear하게 바꿔서사용 → 성공
.fullScreenCover(isPresented: $store.showRestrictPopup.sending(\\.commentInput.showRestrictPopup)) {
CommunityRestrictedUserPopup(dismiss: { store.send(.commentInput(.showRestrictPopup(false))) },
onTapGuide: { store.send(.commentInput(.tapCommnunityGuide)) },
restrictPeriod: store.profile.restrictPeriod)
}
부모 뷰에서는 fullScreenCover를 일반적인 방식으로 호출합니다.
ZStack {
Color(.Transparency_TD054)
.ignoresSafeArea(.all)
팝업 내용...
}
.background(ClearBackgroundView())
(자식) 뷰의 ZStack에 .background(Color(.Transparency_TD054)) (혹은 다른 투명 색상)를 ignoresSafeArea(.all)와 함께 적용하고, 추가적으로 **.background(ClearBackgroundView())**를 사용하여 백그라운드를 투명하게 만듭니다.
.background(.clear)해도 안되었던 문제가 해결됨
애니메이션 비활성화
fullScreenCover 특성상 아래에서 위로 올라오는 애니메이션이 적용이됨
애니메이션 끄려면 이런 방식들이 있음 얘네들을 부모뷰에 적용시켜두면 애니메이션이 안먹음
.onAppear {
UIView.setAnimationsEnabled(false)
}
.transaction { $0.disablesAnimations = true }
실패했던 기록들
background
.background(content: {
if store.showRestrictPopup {
CommunityRestrictedUserPopup(dismiss: { store.send(.commentInput(.showRestrictPopup(false))) },
onTapGuide: { store.send(.commentInput(.tapCommnunityGuide)) },
restrictPeriod: store.profile.restrictPeriod)
}
})
이상하게 뜸 뭔가 부모뷰에 팝업이 합쳐진것처럼 노출됨-> 실패
fullScreenCover
.fullScreenCover(isPresented: $store.showRestrictPopup.sending(\\.commentInput.showRestrictPopup)) {
CommunityRestrictedUserPopup(dismiss: { store.send(.commentInput(.showRestrictPopup(false))) },
onTapGuide: { store.send(.commentInput(.tapCommnunityGuide)) },
restrictPeriod: store.profile.restrictPeriod)
}
팝업 배경이 전체 영역을 모두 다 덮어서 부모뷰를 모두 가려버림, 해당 팝업 배경을 Clear 배경을 줘도 같았음
overlay
.overlay(content: {
if store.showRestrictPopup {
CommunityRestrictedUserPopup(dismiss: { store.send(.commentInput(.showRestrictPopup(false))) },
onTapGuide: { store.send(.commentInput(.tapCommnunityGuide)) },
restrictPeriod: store.profile.restrictPeriod)
}
})
그나마 노출 되고 웹뷰도 잘 뜨지만 문제는 네비게이션 영역을 차지하지 못해
팝업 배경은 어두운색이지만 네비게이션 영역만 흰색 임

부모 뷰에서 네비게이션 영역은 toolbar 사용중임
.navigationBarBackButtonHidden(true)
.toolbar { navigationBarToolbar }
- 팝업에서 .ignoresSafeArea(.all) 사용해도 해결 안됨
- ZStack, ZStack 내부 둘다 안됨
- overlay 자체를 부모뷰 toolbar 덮어씌는 위치에서 사용
ZStack {
부모뷰
.toolbar {}
}
.overlay {}
→ 실패
- .frame(maxWidth: .infinity, maxHeight: .infinity)
→ 실패
- .navigationBarTitleDisplayMode(.inline) → 실패
- Zstack 내부에 사용
ZStack {
부모뷰
.toolbar {}
팝업
}
→ 실패
→ 포기
4.popover
.popover(isPresented: $store.showRestrictPopup.sending(\\.commentInput.showRestrictPopup) {
CommunityRestrictedUserPopup(dismiss: { store.send(.commentInput(.showRestrictPopup(false))) },
onTapGuide: { store.send(.commentInput(.tapCommnunityGuide)) },
restrictPeriod: store.profile.restrictPeriod)
→ fullScreen과 같이 부모뷰를 덮음 → 실패