[iOS/Swift] WKWebKit 약관 상세 페이지 전환하여 띄우기

우리는 노션 웹페이지로 두 개의 상세 페이지를 보여준다. (<광고 및 마케팅 수신에 동의> 페이지는 현재 제외되었다.)

같은 형식의 뷰에, title과 WebView의 링크만 바뀐다. 다만 여기서 <동의> 버튼을 눌렀을 때, 바깥의 약관 선택 페이지에서도 해당 <동의> 표시가 반영되어야 했다. 구조를 고민하다가, 위의 3개 페이지가 전부 같은 뷰모델을 공유하여 상태 값들을 전달받을 수 있도록 구현했다.

WKWebView 사용

WebView의 구현 방식에서는 3가지가 있다. 

1. WKWebKit

2. open safari

3. SFSafariViewController

나는 이 중에서도 닫기 버튼을 커스텀하고, 따로 웹에서 작업할 것 없이 앱 내에서 보여주기만 할 것이기에 WKWebKit을 사용하였다. 노션으로 약관을 정의했는데, 약관의 내용이 수정되었을 때 굳이 앱을 업데이트 하지 않더라도 수정된 내용을 보여줄 수 있도록 html과 웹링크 중에서는 웹링크를 사용했다.

import UIKit
import WebKit
import Combine

class TermsDetailViewController: UIViewController {
	//보여줄 웹뷰
    private let webView: WKWebView = {
        let configuration = WKWebViewConfiguration()
        let view = WKWebView(frame: .zero, configuration: configuration)
        view.translatesAutoresizingMaskIntoConstraints = false
        
        return view
    }()
    
    let agreeButton = NextButton(title: "동의", backgroundColor: .roomeMain, tintColor: .white)
    let viewModel: TermsAgreeViewModel
    var cancellable = Set<AnyCancellable>()
    
    init(viewModel: TermsAgreeViewModel) {
        self.viewModel = viewModel
        super.init(nibName: nil, bundle: nil)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        configureAgreeButton()
        configureWebView()
        bind()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        //뷰가 보일 때마다 webViewLoading update
        loadWebView()
    }
    
    func bind() {
        agreeButton.publisher(for: .touchUpInside)
            .eraseToAnyPublisher()
            .sink { [weak self] _ in
                self?.viewModel.input.handleDetail.send()
                self?.dismiss(animated: true)
            }
            .store(in: &cancellable)
    }
    
    private func configureAgreeButton() {
        view.addSubview(agreeButton)
        
        NSLayoutConstraint.activate([
            agreeButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            agreeButton.heightAnchor.constraint(equalToConstant: 50),
            agreeButton.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.9),
            agreeButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])
    }
    
    //웹뷰 위치 잡기
    private func configureWebView() {
        view.addSubview(webView)
        
        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: titleLabel.bottomAnchor),
            webView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            webView.bottomAnchor.constraint(equalTo: agreeButton.topAnchor, constant: -8)
        ])
    }
    
    private func loadWebView() {
        //웹 링크 띄우기
        let link = viewModel.detailState.link
        guard let url = URL(string: link) else {
            return
        }
        let request = URLRequest(url: url)
        
        webView.load(request)
    }
}

titleLabel, closeButton과 같은 부분은 코드에서 제외했다. (로직과는 상관 없는 코드니까)

클릭 할 때 뷰모델 상태 변화

TermsDetailViewController로 들어가기 전에 TermsAgreeViewController에서 viewModel의 상태를 변경한 후 TermsDetailViewController를 부르는 방법을 통해 해당 ViewController를 재사용할 수 있었다.

serviceAgreeButton.tappedDetailButtonPublisher()
    .sink { [weak self] _ in
        self?.viewModel.detailState = .service
        let detailView = DIContainer.shared.resolve(TermsDetailViewController.self)
        detailView.modalPresentationStyle = .fullScreen
        self?.view.window?.rootViewController?.present(detailView, animated: true)
    }.store(in: &cancellable)
        
personalInformationAgreeButton.tappedDetailButtonPublisher()
    .sink { [weak self] _ in
        self?.viewModel.detailState = .personal
        let detailView = DIContainer.shared.resolve(TermsDetailViewController.self)
        detailView.modalPresentationStyle = .fullScreen
        self?.view.window?.rootViewController?.present(detailView, animated: true)
    }.store(in: &cancellable)

 

https://github.com/Prography-RoomE/roome_ios/pull/39

[FEAT] 약관 동의 상세 페이지 구현 by mint3382 · Pull Request #39 · Prography-RoomE/roome_ios

https://apps.apple.com/kr/app/roome/id6503616766

‎roome