[개선] SheetVC에서 push하기

프로젝트 발표회 이후

"Modal로 띄운 뷰에서 또다시 Modal을 띄우는 것은 사용자 경험 측면에서 좋지 않다"

라는 피드백을 받았습니다.

 

지도뷰에서 마커를 선택하면 present로 SheetVC를 띄우는데,

시트뷰에서 셀을 선택하면 또다시 present로 PaymentVC를 띄우고 있었습니다.

 

시트뷰 내부에서는 네비게이션 컨트롤러로 동작하도록 개선하였습니다.

 

extension MapViewController {
	func showSheet(with: coordinate: Coordinate) {
        let sheetVM = SheetViewModel(modelManager: viewModel.modelManager, coordinate: coordinate)
        let sheetVC = PinSheetViewController(viewModel: sheetVM)
        let nav = UINavigationController(rootViewController: sheetVC) // 네비게이션 컨트롤러 생성
        
        if let sheet = nav.sheetPresentationController {
            sheet.detents = [.medium(), .large()] // 시트 크기 설정
            sheet.prefersScrollingExpandsWhenScrolledToEdge = true // 시트 확장 가능 여부
            sheet.prefersGrabberVisible = true // grabber 표시 여부
         }
         
         present(nav, animated: true)
     }
 }

 

PinSheetVC를 바로 present하는 것이 아니라

UINavigationController를 생성하여 해당 네비게이션 컨트롤러를 present합니다.

 

시트 모양의 컨트롤러 설정 또한 네비게이션 컨트롤러에서 설정합니다.

 

다만 이 상태로는 PinSheetVC에서 셀을 선택하여 PaymentVC를 띄울 때에도

showSheet 함수 내부에서 설정한 시트 모양대로 화면의 반만 차지하는 화면이 나타납니다.

 

extension PinSheetViewController: UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPAth: IndexPath) {
        guard let data = dataSource.itemIdentifier(for: indexPath) else { return }
        
        let vc = PaymentViewController(animalID: data.id, modelManager: viewModel.modelManager) { 클로저 정의 }
        
        guard let nav = self.navigationController else { return }
        
        // 시트 재설정
        if let sheet = nav.sheetPresentationController {
            sheet.detents = [.large()] // 시트 크기 - 크게만 보이도록
            sheet.prefersScrollingExpandsWhenScrolledToEdge = false // 시트 확장 가능 여부
            sheet.prefersGrabberVisible = false // grabber 표시 여부
        }
        
        self.navigationController?.pushViewController(vc, animated: true)
    }
}

 

따라서 PaymentVC의 시트 모양을 재설정해주었습니다.

 

PaymentVC의 viewDidLoad에서 설정해줄 수도 있었지만,

PaymentVC가 제 담당이 아니라서 띄울 때 설정하는 것으로 구현하였습니다.

 class PaymentViewController: UIViewController {
     override func viewWillDisappear(_ animated: Bool) {
        guard let nav = self.navigationController else { return }
        
        // 시트 크기 재설정
        if let sheet = nav.sheetPresentationController {
            sheet.detents = [.medium(), .large()] // 시트 크기
            sheet.prefersScrollingExpandsWhenScrolledToEdge = true // 시트 확장 가능 여부
            sheet.prefersGrabberVisible = true // grabber 표시 여부
        }
    }
 }

 

PaymentVC가 pop될 때는 기존의 시트 모양으로 돌아갈 수 있도록

viewWillDisappear에서 시트 모양을 재설정해주었습니다.

 

Back 버튼이 표시되는 네비게이션 뷰로 나타나는 것을 확인하였습니다.