[UIKit] Custom Alert 제작(feat. Builder Pattern)

Builder Pattern

• 복잡한 객체를 단계별로 구축하는 생성 디자인 패턴

• alert의 경우 상황에 따라 다양한 UI가 나올 수 있다.

• 즉, 어떤 Case에는 ‘확인’, ‘취소’ 버튼 모두 필요할 수도 있고, 어떤 Case에는 ‘확인’ 버튼만 필요할 수 있다.

• 따라서, 상황에 따라 조합될 수 있는 경우의 수가 다양한 경우 이 Builder Pattern을 사용하는 것이 적절하다.

• 빌더 패턴은 4가지 기본 구조를 가진다.

1. Builder: 객체의 구성 요소를 정의하는 인터페이스

2. Concrete Builder: 인터페이스를 구현하고, 결과물을 반환하는 방식을 정의

3. Director: 인터페이스를 사용하여 객체를 생성하는 과정을 정의

4. Product: 빌더를 통해서 생성되는 최종 객체

• 분리된 구축 과정: 객체의 구축과 표현을 분리하여 복잡한 객체를 쉽게 생성

• 재사용성: 동일한 구축 과정에서 다양한 표현 가능

• 가독성: 각 단계가 명확히 정의되어 있어, 코드의 가독성이 좋아진다.

• 복잡성 증가: 단순한 객체에 빌더 패턴을 사용하면 불필요하게 복잡성을 증대시킬 수 있다.

1. Builder 구현

• Builder는 객체의 구성요소를 정의하는 Class이다.

• Alert의 경우, title, message, action과 같은 기본 요소를 가진다.

• 따라서, 위와 같은 구성 요소를 protocol을 활용해 정의해준다.

//
//  Protocol+Builder.swift
//  AlertBuilderPattern
//
//  Created by Dongwan Ryoo on 1/7/24.
//

import Foundation

//class에서만 준수할 수 있음
protocol Builder: AnyObject {
    
    //alert의 title과 message
    var title: String? { get }
    var message: String? { get }
    
    //alert의 title, message, ConfirmAction을 추가하는 메서드
    func setTitle(_ text: String) -> Self
    func setMessage(_ text: String) -> Self
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self

}

2. Concrete Builder 구현

• Builder를 구현했으니, 이 인터페이스를 채택한 Concrete Builder를 구성한다.

• Concrete Builder의 핵심은 1)인터페이스 구현하고, 2)결과물을 정의하고, 3)이를 반환할 방식을 정의하는 것이다.

1. 인터페이스 구현

• Builder protocol을 채택한다.

import Foundation

class AlertConcreteBuilder: Builder {
    
    var title: String?
    
    var message: String?
    
    func setTitle(_ text: String) -> Self {
        
    }
    
    func setMessage(_ text: String) -> Self {
        
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        
    }
    
}

• 반환할 결과물은 Custom한 AlertController이기 때문에, 별도의 CustomAlertController 파일을 생성해준다.

//
//  CustomAlertController.swift
//  AlertBuilderPattern
//
//  Created by Dongwan Ryoo on 1/7/24.
//

import UIKit

class CustomAlertController: UIViewController {
    
}

• 결과물(Alert)에 들어갈 UI 등을 정의해준다.

import UIKit

import SnapKit

class CustomAlertController: UIViewController {
    
    private lazy var alertView = {
        let view = UIStackView()
        view.layer.cornerRadius = 16
        view.backgroundColor = .bgGrey
        view.axis = .vertical
        view.alignment = .center
        
        return view
    }()
    
    private lazy var titleLabel = {
        let view = UILabel()
        view.font = UIFont.systemFont(ofSize: 16, weight: .bold)
        view.textAlignment = .center
        
        return view
    }()
    
    private lazy var messageLabel = {
        let view = UILabel()
        view.font = UIFont.systemFont(ofSize: 12)
        view.textAlignment = .center
        
        return view
    }()
    
    private lazy var confirmButton = {
        let view = UIButton()
        view.setTitleColor(.white, for: .normal)
        view.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .bold)
        view.backgroundColor = .mainBlue
        view.layer.cornerRadius = 16
        
        return view
    }()
    
    override func viewDidLoad() {
        addTarget()
        layouts()
    }
    
}

extension CustomAlertController {
    
    func layouts() {
        view.addSubview(alertView)
        alertView.snp.makeConstraints { 
            $0.width.equalTo(312)
            $0.center.equalToSuperview()
        }
        
        alertView.addArrangedSubview(titleLabel)
        titleLabel.snp.makeConstraints { 
            $0.top.equalToSuperview().offset(24)
            $0.width.equalTo(276)
            $0.centerX.equalToSuperview()
        }
        
        alertView.addArrangedSubview(messageLabel)  
        alertView.setCustomSpacing(12, after: titleLabel)
        messageLabel.snp.makeConstraints { 
            $0.width.equalTo(276)
            $0.centerX.equalToSuperview()
        }
        
        alertView.addArrangedSubview(confirmButton)
        alertView.setCustomSpacing(24, after: messageLabel)
        confirmButton.snp.makeConstraints { 
            $0.centerX.equalToSuperview()
            $0.width.equalTo(276)
            $0.height.equalTo(44)
        }
        
    }
}

extension CustomAlertController {
    
    func addTarget() {
        confirmButton.addTarget(self, action: #selector(confirmButtonTapped), for: .touchUpInside)
    }
    
    @objc
    func confirmButtonTapped() {
        dismiss(animated: true)
    }
}

• 결과물에 들어갈 title, massage를 받을 프로퍼티를 생성한다.

class CustomAlertController: UIViewController {
    
		var alertTitle: String?
		var alertMessage: String?
    
    private lazy var alertView = {
        let view = UIStackView()
        view.layer.cornerRadius = 16
        view.backgroundColor = .bgGrey
        view.axis = .vertical
        view.alignment = .center
        
        return view
    }()

.
.
.
//기존 코드

• 버튼의 Action을 정의할 구조체를 만들어 준다.

• 이때, 버튼에 들어갈 텍스트와 Action을 같이 정의해준다.

struct Action {
    var text: String?
    var action: (()-> Void)?
}

• CustomAlertController에 action 프로퍼티를 추가해준다.

class CustomAlertController: UIViewController {
    
		var alertTitle: String?
		var alertMessage: String?
		var confirmAction: Action?
    
    private lazy var alertView = {
        let view = UIStackView()
        view.layer.cornerRadius = 16
        view.backgroundColor = .bgGrey
        view.axis = .vertical
        view.alignment = .center
        
        return view
    }()

.
.
.
//기존 코드

• 인터페이스의 구성 요소(title, message, action)를 UI에 적용해준다.

private lazy var titleLabel = {
    let view = UILabel()
    view.font = UIFont.systemFont(ofSize: 16, weight: .bold)
    view.textAlignment = .center
    view.text = alertTitle //Title
    
    return view
}()

private lazy var messageLabel = {
    let view = UILabel()
    view.font = UIFont.systemFont(ofSize: 12)
    view.textAlignment = .center
    view.text = alertMessage //Message
    
    return view
}()

private lazy var confirmButton = {
    let view = UIButton()
    view.setTitleColor(.white, for: .normal)
    view.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .bold)
    view.backgroundColor = .mainBlue
    view.layer.cornerRadius = 16
    view.setTitle(confirmAction?.text, for: .normal) //Button Title
    
    return view
}()
.
.
.

@objc
func confirmButtonTapped() {
    confirmAction?.action?() //Button Action
    dismiss(animated: true)
}

• 지금까지 인터페이스를 구현하고, 반환할 결과물(CustomAlertController)을 정의했다.

• 이제, AlertConcreteBuilder로 돌아가서 결과물을 반환할 방식을 정의하면 된다.

1. 결과물 반환 방식 정의

• AlertConcreteBuilder로 돌아가서 정의된 결과물의 인스턴스를 생성해준다.

class AlertConcreteBuilder: Builder {
    
    var title: String?
    var message: String?
    
    private let alertViewController = CustomAlertController()
    
    func setTitle(_ text: String) -> Self {
        
    }
    
    func setMessage(_ text: String) -> Self {
        
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        
    }
    
}

• Alert의 경우 특정 ViewController를 루트로 하기 때문에 RootViewController도 하나 정의해준다.

class AlertConcreteBuilder: Builder {
    
    var title: String?
    var message: String?
    
    private let alertViewController = CustomAlertController()
    private var rootViewController: UIViewController?
    
    func setTitle(_ text: String) -> Self {
        
    }
    
    func setMessage(_ text: String) -> Self {
        
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        
    }
    
}

• 확인 버튼을 클릭했을 때의 액션도 정의해준다.

class AlertConcreteBuilder: Builder {
    
    private var title: String?
    private var message: String?
    private var addConfirmAction: Action?
    
    private let alertViewController = CustomAlertController()
    private var rootViewController: UIViewController?
    
    func setTitle(_ text: String) -> Self {
        
    }
    
    func setMessage(_ text: String) -> Self {
        
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        
    }
    
}

• AlertConcreteBuilder를 거쳐 결과물에 전달할 요소들을 메서드 내부에 구현해준다.

class AlertConcreteBuilder: Builder {
    
    var title: String?
    var message: String?
    private var addConfirmAction: Action?
    
    private let alertViewController = CustomAlertController()
    private var rootViewController: UIViewController?
    
    func setTitle(_ text: String) -> Self {
        title = text
        return self
    }
    
    func setMessage(_ text: String) -> Self {
        message = text
        return self
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        addConfirmAction?.text = text
        addConfirmAction?.action = action
        return self
    }
    
}

• rootViewController를 정의할 생성자를 만들어준다.

• 마지막으로 present() 메서드를 통해 결과물을 반환해준다.

class AlertConcreteBuilder: Builder {
    
    var title: String?
    var message: String?
    private var addConfirmAction: Action?
    
    private let alertViewController = CustomAlertController()
    private var rootViewController: UIViewController?

		init(_ viewController: UIViewController) {
        rootViewController = viewController
    }
    
    func setTitle(_ text: String) -> Self {
        title = text
        return self
    }
    
    func setMessage(_ text: String) -> Self {
        message = text
        return self
    }
    
    func addConfirmAction(_ text: String, action: (() -> Void)?) -> Self {
        addConfirmAction?.text = text
        addConfirmAction?.action = action
        return self
    }
    
		@discardableResult
    func present() -> Self {
        alertViewController.alertTitle = title
        alertViewController.alertMessage = message
        alertViewController.confirmAction = addConfirmAction
        alertViewController.modalPresentationStyle = .overFullScreen
        alertViewController.modalTransitionStyle = .crossDissolve
        rootViewController?.present(alertViewController, animated: true)
        
        return self
    }
    
}

3. Product 구성

• Director는 지금 상황에서는 복잡도만 늘리기 때문에 생성 X

• ViewController에 Product 생성

//
//  ViewController.swift
//  AlertBuilderPattern
//
//  Created by Dongwan Ryoo on 1/7/24.
//

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .black
        
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(true)
        showAlert()
    }
    
    func showAlert() {
        AlertConcreteBuilder(self)
            .setTitle("알림을 확인해주세요.")
            .setMessage("권한을 확인하고 싶습니다.")
            .addConfirmAction("확인") { 
                print("확인 버튼 클릭")
            }
            .present()
    }
}

4. 최종 결과물