[GWL-16] 운동 동료 선택 화면 UI 구현 (#69)

* feat: WorkoutPearTypeSelectCell 생성

* feat: WorkoutViewController생성

* feat: PageControll 버그 수정

* feat: 뷰 구현

* feat: 오타 수정 pear -> peer

* feat: pageControl move prev 구현

* feat: gesture recognizer를 통한

* chor: 오타 수정

* feat: PageControl 버그 수정

* feat: backGround Color 오탈자 수정

* chore: Public 함수 이름 변경

* chore: GWPageControl 함수 이름 수정

iOS/Projects/Features/Record/Sources/WorkoutSelectScene/View/WorkoutEnvironmentSetupViewController.swift

@@ -7,6 +7,7 @@
 //
 
 import DesignSystem
+import OSLog
 import UIKit
 
 // MARK: - WorkoutEnvironmentSetupViewController
@@ -15,21 +16,17 @@ public final class WorkoutEnvironmentSetupViewController: UIViewController {
   override public func viewDidLoad() {
     super.viewDidLoad()
     setup()
-  }
-
-  override public func viewDidAppear(_ animated: Bool) {
-    super.viewDidAppear(animated)
-
     insertTempSource()
   }
 
-  lazy var contentNAV: UINavigationController = {
-    let nav = UINavigationController(rootViewController: workoutSelectView)
+  lazy var contentNavigationController: UINavigationController = {
+    let nav = UINavigationController(rootViewController: workoutSelectViewController)
 
     return nav
   }()
 
-  private let workoutSelectView = WorkoutSelectViewController()
+  private let workoutSelectViewController = WorkoutSelectViewController()
+  private let workoutPeerSelectViewController = WorkoutPeerSelectViewController()
 
   private let pageControl: GWPageControl = {
     let pageControl = GWPageControl(count: Constant.countOfPage)
@@ -39,21 +36,29 @@ public final class WorkoutEnvironmentSetupViewController: UIViewController {
   }()
 
   var dataSource: UICollectionViewDiffableDataSource<Int, UUID>!
-  var workoutCardCollectionView: UICollectionView!
+  var workoutTypesCollectionView: UICollectionView!
+  var workoutPaerTypesCollectionView: UICollectionView!
 }
 
 private extension WorkoutEnvironmentSetupViewController {
+  func bind() {
+    workoutTypesCollectionView = workoutSelectViewController.workoutTypesCollectionView
+
+    workoutSelectViewController.delegate = self
+  }
+
   func setup() {
-    view.backgroundColor = .systemBackground
+    view.backgroundColor = DesignSystemColor.primaryBackground
     setupViewHierarchyAndConstraints()
-    workoutCardCollectionView = workoutSelectView.workoutCardCollectionView
+    addNavigationGesture()
+    bind()
 
     configureDataSource()
   }
 
   func configureDataSource() {
-    dataSource = .init(collectionView: workoutCardCollectionView, cellProvider: { collectionView, indexPath, _ in
-      let cell = collectionView.dequeueReusableCell(withReuseIdentifier: WorkoutCardCell.identifier, for: indexPath)
+    dataSource = .init(collectionView: workoutTypesCollectionView, cellProvider: { collectionView, indexPath, _ in
+      let cell = collectionView.dequeueReusableCell(withReuseIdentifier: WorkoutSelectTypeCell.identifier, for: indexPath)
       return cell
     })
   }
@@ -76,15 +81,49 @@ private extension WorkoutEnvironmentSetupViewController {
     pageControl.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -23).isActive = true
     pageControl.heightAnchor.constraint(equalToConstant: 30).isActive = true
 
-    view.addSubview(contentNAV.view)
-    contentNAV.view.translatesAutoresizingMaskIntoConstraints = false
-    contentNAV.view.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor).isActive = true
-    contentNAV.view.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor).isActive = true
-    contentNAV.view.topAnchor.constraint(equalTo: pageControl.bottomAnchor).isActive = true
-    contentNAV.view.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor).isActive = true
+    view.addSubview(contentNavigationController.view)
+    contentNavigationController.view.translatesAutoresizingMaskIntoConstraints = false
+    contentNavigationController.view.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor).isActive = true
+    contentNavigationController.view.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor).isActive = true
+    contentNavigationController.view.topAnchor.constraint(equalTo: pageControl.bottomAnchor).isActive = true
+    contentNavigationController.view.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor).isActive = true
+  }
+
+  func addNavigationGesture() {
+    guard let recognizer = contentNavigationController.interactivePopGestureRecognizer else { return }
+    recognizer.delegate = self
+    recognizer.isEnabled = true
+    contentNavigationController.delegate = self
   }
 
   enum Constant {
     static let countOfPage = 2
   }
 }
+
+// MARK: UIGestureRecognizerDelegate
+
+extension WorkoutEnvironmentSetupViewController: UIGestureRecognizerDelegate {
+  public func gestureRecognizerShouldBegin(_: UIGestureRecognizer) -> Bool {
+    return contentNavigationController.viewControllers.count > 1
+  }
+}
+
+// MARK: UINavigationControllerDelegate
+
+extension WorkoutEnvironmentSetupViewController: UINavigationControllerDelegate {
+  public func navigationController(_: UINavigationController, didShow viewController: UIViewController, animated _: Bool) {
+    if viewController == workoutSelectViewController {
+      pageControl.select(at: 0)
+    }
+  }
+}
+
+// MARK: WorkoutSelectViewDelegate
+
+extension WorkoutEnvironmentSetupViewController: WorkoutSelectViewDelegate {
+  func nextButtonDidTap() {
+    pageControl.next()
+    contentNavigationController.pushViewController(workoutPeerSelectViewController, animated: true)
+  }
+}

iOS/Projects/Features/Record/Sources/WorkoutSelectScene/View/WorkoutPeerSelectViewController.swift

@@ -0,0 +1,118 @@
+//
+//  WorkoutPeerSelectViewController.swift
+//  RecordFeature
+//
+//  Created by MaraMincho on 11/19/23.
+//  Copyright © 2023 kr.codesquad.boostcamp8. All rights reserved.
+//
+
+import DesignSystem
+import UIKit
+
+// MARK: - WorkoutPeerSelectViewController
+
+final class WorkoutPeerSelectViewController: UIViewController {
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    view.backgroundColor = DesignSystemColor.primaryBackground
+
+    setup()
+  }
+
+  var dataSource: UICollectionViewDiffableDataSource<Int, UUID>!
+
+  private let workoutSelectDescriptionLabel: UILabel = {
+    let label = UILabel()
+    label.font = .preferredFont(forTextStyle: .title1, with: .traitBold)
+    label.textAlignment = .left
+
+    label.text = "2. 누구랑 할까요?"
+
+    label.translatesAutoresizingMaskIntoConstraints = false
+    return label
+  }()
+
+  private let startButton: UIButton = {
+    let button = UIButton()
+    button.configurationUpdateHandler = UIButton.Configuration.mainCircular(label: "출발")
+
+    button.translatesAutoresizingMaskIntoConstraints = false
+    return button
+  }()
+
+  lazy var pearTypeSelectCollectionView: UICollectionView = {
+    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: makeCollectionViewLayout())
+    collectionView.register(WorkoutPeerTypeSelectCell.self, forCellWithReuseIdentifier: WorkoutPeerTypeSelectCell.identifier)
+    collectionView.backgroundColor = .clear
+    collectionView.isScrollEnabled = false
+
+    collectionView.translatesAutoresizingMaskIntoConstraints = false
+    return collectionView
+  }()
+}
+
+private extension WorkoutPeerSelectViewController {
+  func makeCollectionViewLayout() -> UICollectionViewCompositionalLayout {
+    let item = NSCollectionLayoutItem(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1)))
+    item.contentInsets = .init(top: Metrics.itemInsets, leading: Metrics.itemInsets, bottom: Metrics.itemInsets, trailing: Metrics.itemInsets)
+
+    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(0.15))
+    let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])
+
+    let section = NSCollectionLayoutSection(group: group)
+
+    return UICollectionViewCompositionalLayout(section: section)
+  }
+
+  func setup() {
+    setHierarchyAndConstraints()
+
+    dataSource = .init(collectionView: pearTypeSelectCollectionView, cellProvider: { collectionView, indexPath, _ in
+      let cell = collectionView.dequeueReusableCell(withReuseIdentifier: WorkoutPeerTypeSelectCell.identifier, for: indexPath)
+
+      return cell
+    })
+
+    tempInitDataSource()
+  }
+
+  func setHierarchyAndConstraints() {
+    let safeArea = view.safeAreaLayoutGuide
+
+    view.addSubview(workoutSelectDescriptionLabel)
+    workoutSelectDescriptionLabel.topAnchor.constraint(equalTo: safeArea.topAnchor).isActive = true
+    workoutSelectDescriptionLabel.leadingAnchor
+      .constraint(equalTo: safeArea.leadingAnchor, constant: ConstraintsGuideLine.value).isActive = true
+    workoutSelectDescriptionLabel.trailingAnchor
+      .constraint(equalTo: safeArea.trailingAnchor, constant: -ConstraintsGuideLine.value).isActive = true
+
+    view.addSubview(startButton)
+    startButton.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor, constant: -50).isActive = true
+    startButton.centerXAnchor.constraint(equalTo: safeArea.centerXAnchor).isActive = true
+    startButton.widthAnchor.constraint(equalToConstant: Metrics.buttonHeight).isActive = true
+    startButton.heightAnchor.constraint(equalToConstant: Metrics.buttonHeight).isActive = true
+
+    view.addSubview(pearTypeSelectCollectionView)
+    pearTypeSelectCollectionView.topAnchor
+      .constraint(equalTo: workoutSelectDescriptionLabel.bottomAnchor, constant: 15).isActive = true
+    pearTypeSelectCollectionView.leadingAnchor
+      .constraint(equalTo: safeArea.leadingAnchor, constant: ConstraintsGuideLine.secondaryValue).isActive = true
+    pearTypeSelectCollectionView.trailingAnchor
+      .constraint(equalTo: safeArea.trailingAnchor, constant: -ConstraintsGuideLine.secondaryValue).isActive = true
+    pearTypeSelectCollectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
+  }
+
+  func tempInitDataSource() {
+    var snapshot = dataSource.snapshot()
+    snapshot.appendSections([0])
+    snapshot.appendItems([.init(), .init(), .init()])
+    dataSource.apply(snapshot)
+  }
+
+  enum Metrics {
+    static let buttonHeight: CGFloat = 150
+    static let buttonWidth: CGFloat = 150
+
+    static let itemInsets: CGFloat = 9
+  }
+}