feat: add custom refresh control

iBox/Sources/BoxList/BoxListViewController.swift

@@ -156,6 +156,7 @@ extension BoxListViewController: BoxListViewDelegate {
  } else {
  // 캐시에 없는 경우, 새로운 viewController 인스턴스를 생성하고 캐시에 추가합니다.
  let viewController = WebViewController()
+ viewController.delegate = self
  viewController.selectedWebsite = url
  viewController.title = name
  WebCacheManager.shared.cacheData(forKey: id, viewController: viewController)

iBox/Sources/Extension/UIColor+Extension.swift

@@ -32,7 +32,7 @@ extension UIColor {
  static let box = UIColor(hex: 0xFF7F29)
  static let box2 = UIColor(hex: 0xFF9548)
  static let box3 = UIColor(hex: 0xFFDC6E)
- static let tableViewBackgroundColor = color(light: .systemGroupedBackground, dark: .systemGray5)
+ static let tableViewBackgroundColor = color(light: .systemGroupedBackground, dark: .systemGray4)
  static let folderGray = color(light: .systemGray3, dark: .systemGray2)
  static let webIconColor = color(light: .black, dark: .systemGray)
  static let dimmedViewColor = UIColor.black.withAlphaComponent(0.75)

iBox/Sources/Extension/UIFont+Extension.swift

@@ -17,5 +17,6 @@ extension UIFont {
  static let cellTitleFont = UIFont.systemFont(ofSize: 16.0)
  static let cellDescriptionFont = UIFont.systemFont(ofSize: 13.0, weight: .regular)
  static let descriptionFont = UIFont.systemFont(ofSize: 14.0)
+ static let refreshControlFont = UIFont.boldSystemFont(ofSize: 12.0)
 
 }

iBox/Sources/Web/RefreshControl.swift

@@ -0,0 +1,119 @@
+//
+// RefreshControl.swift
+// iBox
+//
+// Created by jiyeon on 4/4/24.
+//
+
+import UIKit
+
+import SnapKit
+
+enum RefreshControlType {
+ case addBookmark
+ case refresh
+ case back
+}
+
+class RefreshControl: UIView {
+
+ var currentType: RefreshControlType?
+
+ // MARK: - UI Components
+
+ let addBookmarkButton = UIButton().then {
+ $0.configuration = .plain()
+ $0.tintColor = .label
+ $0.configuration?.image = UIImage(systemName: "bookmark.circle")
+ $0.configuration?.imagePadding = 10
+ $0.configuration?.imagePlacement = .top
+ $0.configuration?.preferredSymbolConfigurationForImage = .init(pointSize: 20.0)
+ $0.configuration?.attributedTitle = AttributedString("북마크 추가", attributes: AttributeContainer([NSAttributedString.Key.font: UIFont.refreshControlFont]))
+ $0.layer.cornerRadius = 15
+ }
+
+ let refreshButton = UIButton().then {
+ $0.configuration = .plain()
+ $0.tintColor = .label
+ $0.configuration?.image = UIImage(systemName: "arrow.clockwise.circle")
+ $0.configuration?.imagePadding = 10
+ $0.configuration?.imagePlacement = .top
+ $0.configuration?.preferredSymbolConfigurationForImage = .init(pointSize: 20.0)
+ $0.configuration?.attributedTitle = AttributedString("새로고침", attributes: AttributeContainer([NSAttributedString.Key.font: UIFont.refreshControlFont]))
+ $0.layer.cornerRadius = 15
+ }
+
+ let backButton = UIButton().then {
+ $0.configuration = .plain()
+ $0.tintColor = .label
+ $0.configuration?.image = UIImage(systemName: "arrowshape.turn.up.backward.circle")
+ $0.configuration?.imagePadding = 10
+ $0.configuration?.imagePlacement = .top
+ $0.configuration?.preferredSymbolConfigurationForImage = .init(pointSize: 20.0)
+ $0.configuration?.attributedTitle = AttributedString("처음으로 이동", attributes: AttributeContainer([NSAttributedString.Key.font: UIFont.refreshControlFont]))
+ $0.layer.cornerRadius = 15
+ }
+
+ let stackView = UIStackView().then {
+ $0.axis = .horizontal
+ $0.distribution = .fillEqually
+ $0.spacing = 20
+ }
+
+
+ // MARK: - Initializer
+
+ override init(frame: CGRect) {
+ super.init(frame: frame)
+ setupProperty()
+ setupHierarchy()
+ setupLayout()
+ }
+
+ required init?(coder: NSCoder) {
+ fatalError("init(coder:) has not been implemented")
+ }
+
+ // MAKR: - Setup Methods
+
+ private func setupProperty() {
+ backgroundColor = .backgroundColor
+ isUserInteractionEnabled = true
+ }
+
+ private func setupHierarchy() {
+ addSubview(stackView)
+ stackView.addArrangedSubview(addBookmarkButton)
+ stackView.addArrangedSubview(refreshButton)
+ stackView.addArrangedSubview(backButton)
+ }
+
+ private func setupLayout() {
+ stackView.snp.makeConstraints { make in
+ make.leading.bottom.trailing.equalToSuperview().inset(20)
+ }
+ }
+
+ func setSelected(_ type: RefreshControlType) {
+ if type == currentType { return }
+ currentType = type
+ clear()
+ switch type {
+ case .addBookmark: addBookmarkButton.backgroundColor = .tableViewBackgroundColor
+ case .refresh: refreshButton.backgroundColor = .tableViewBackgroundColor
+ case .back: backButton.backgroundColor = .tableViewBackgroundColor
+ }
+ if UserDefaultsManager.isHaptics {
+ let generator = UIImpactFeedbackGenerator(style: .light)
+ generator.prepare()
+ generator.impactOccurred()
+ }
+ }
+
+ func clear() {
+ [addBookmarkButton, refreshButton, backButton].forEach { button in
+ button.backgroundColor = .clear
+ }
+ }
+
+}

iBox/Sources/Web/WebView.swift

@@ -12,6 +12,8 @@ import SnapKit
 
 class WebView: UIView {
 
+ var delegate: WebViewDelegate?
+
  private var progressObserver: NSKeyValueObservation?
 
  var selectedWebsite: URL? {
@@ -20,19 +22,22 @@ class WebView: UIView {
  }
  }
 
+ private var refreshControlHeight: CGFloat = 120.0
+ private var isActive = false
+
  // MARK: - UI Components
 
 
  private let webView:WKWebView
 
- private let refreshControl = UIRefreshControl()
-
  private let progressView = UIProgressView().then {
  $0.progressViewStyle = .bar
  $0.tintColor = .label
  $0.sizeToFit()
  }
 
+ private var refreshControl: RefreshControl?
+
  // MARK: - Initializer
 
  override init(frame: CGRect) {
@@ -64,8 +69,6 @@ class WebView: UIView {
  private func setupProperty() {
  backgroundColor = .backgroundColor
  webView.navigationDelegate = self
- webView.scrollView.refreshControl = refreshControl
- refreshControl.addTarget(self, action: #selector(handleRefreshControl), for: .valueChanged)
  progressObserver = webView.observe(\.estimatedProgress, options: .new) { [weak self] webView, _ in
  self?.progressView.setProgress(Float(webView.estimatedProgress), animated: true)
  }
@@ -86,16 +89,59 @@ class WebView: UIView {
  }
  }
 
+ func setupRefreshControl() {
+ // pan gesture
+ let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handleSwipe))
+ panGestureRecognizer.delegate = self // UIGestureRecognizerDelegate
+ addGestureRecognizer(panGestureRecognizer)
+ // refresh control
+ let refreshControl = RefreshControl(frame: .init(x: 0, y: -frame.size.height, width: frame.size.width, height: frame.size.height))
+ webView.scrollView.addSubview(refreshControl)
+ webView.scrollView.backgroundColor = .backgroundColor
+ webView.scrollView.delegate = self // UIScrollViewDelegate
+ self.refreshControl = refreshControl
+ }
+
  private func loadWebsite() {
  guard let url = selectedWebsite else { return }
  webView.load(URLRequest(url: url))
  webView.allowsBackForwardNavigationGestures = true
  }
 
- @objc private func handleRefreshControl() {
- DispatchQueue.main.asyncAfter(deadline: .now() + 0.7) { [weak self] in
- self?.webView.reload()
- self?.refreshControl.endRefreshing()
+ @objc func handleSwipe(_ gesture: UIPanGestureRecognizer) {
+ guard isActive, let refreshControl = refreshControl else { return }
+
+ let translation = gesture.translation(in: self)
+ if gesture.state == .changed {
+ if abs(translation.x) > 60.0 {
+ if translation.x > 0 { // 오른쪽 스와이프 : 처음 북마크로 돌아가기
+ refreshControl.setSelected(.back)
+ } else { // 왼쪽 스와이프 : 현재 링크 북마크 추가
+ refreshControl.setSelected(.addBookmark)
+ }
+ } else { // 아래 : 새로고침
+ refreshControl.setSelected(.refresh)
+ }
+ } else if gesture.state == .ended { // 사용자의 터치가 끝났을 때
+ switch refreshControl.currentType {
+ case .addBookmark:
+ guard let url = webView.url else { return }
+ delegate?.pushAddBookMarkViewController(url: url)
+ case .refresh:
+ self.webView.reload()
+ case .back:
+ loadWebsite()
+ case .none: break
+ }
+ // 제스처 완료 후 초기화
+ DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
+ refreshControl.clear()
+ }
+ }
+ // 제스처 초기화
+ if gesture.state == .ended || gesture.state == .cancelled {
+ gesture.setTranslation(CGPoint.zero, in: self)
+ refreshControl.currentType = nil
  }
  }
 
@@ -116,5 +162,26 @@ extension WebView: WKNavigationDelegate {
  self.progressView.isHidden = true
  }
  }
+
+}
+
+extension WebView: UIScrollViewDelegate {
+
+ func scrollViewDidScroll(_ scrollView: UIScrollView) {
+ if scrollView.contentOffset.y < -refreshControlHeight {
+ isActive = true
+ } else {
+ isActive = false
+ }
+ }
+
+}
+
+extension WebView: UIGestureRecognizerDelegate {
+
+ func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
+ // 다른 제스처 인식기와 동시에 인식되도록 허용
+ return true
+ }
 
 }

iBox/Sources/Web/WebViewController.swift

@@ -7,8 +7,13 @@
 
 import UIKit
 
+protocol WebViewDelegate {
+ func pushAddBookMarkViewController(url: URL)
+}
+
 class WebViewController: BaseViewController<WebView>, BaseViewControllerProtocol {
 
+ var delegate: AddBookmarkViewControllerProtocol?
  var selectedWebsite: URL?
 
  // MARK: - Life Cycle
@@ -20,13 +25,35 @@ class WebViewController: BaseViewController<WebView>, BaseViewControllerProtocol
  view.backgroundColor = .backgroundColor
 
  guard let contentView = contentView as? WebView else { return }
+ contentView.delegate = self
  contentView.selectedWebsite = selectedWebsite
  }
 
+ override func viewDidLayoutSubviews() {
+ super.viewDidLayoutSubviews()
+ guard let contentView = contentView as? WebView else { return }
+ contentView.setupRefreshControl()
+ }
+
  // MARK: - BaseViewControllerProtocol
 
  func setupNavigationBar() {
  setNavigationBarHidden(true)
  }
 
 }
+
+extension WebViewController: WebViewDelegate {
+
+ func pushAddBookMarkViewController(url: URL) {
+ URLDataManager.shared.incomingData = url.absoluteString
+
+ let addBookmarkViewController = AddBookmarkViewController()
+ addBookmarkViewController.delegate = delegate
+
+ let navigationController = UINavigationController(rootViewController: addBookmarkViewController)
+ navigationController.modalPresentationStyle = .pageSheet
+ self.present(navigationController, animated: true, completion: nil)
+ }
+
+}