fix: 감정등록 화면 QA 대응 (무한 스크롤 끊김, 스크롤 가능 영역 확장)

- 구슬 collectionView 하단의 안내 문구에서도 collectionView의 스크롤이 가능하도록 수정
- 무한 스크롤이 끊기는 현상 개선
- 구슬 스크롤 시 진동 피드백으로 사용자경험 향상

Author: taipaise

Projects/Presentation/Sources/EmotionRegister/View/EmotionCollectionViewLayout.swift

@@ -8,8 +8,12 @@
 import UIKit
 
 final class EmotionCollectionViewLayout: UICollectionViewFlowLayout {
-    private let itemWidthRatio: CGFloat = 0.5
-    private let lineSpacing: CGFloat = 16
+    private enum Layout {
+        static let itemWidthRatio: CGFloat = 0.5
+        static let lineSpacing: CGFloat = 16
+        static let bottomSpacing: CGFloat = 100
+    }
+
     private var baseDistance: CGFloat { itemSize.width + minimumLineSpacing }
 
     override class var layoutAttributesClass: AnyClass { EmotionCollectionViewLayoutAttributes.self }
@@ -19,14 +23,18 @@ final class EmotionCollectionViewLayout: UICollectionViewFlowLayout {
         guard let collectionView else { return }
 
         scrollDirection = .horizontal
-        minimumLineSpacing = lineSpacing
+        minimumLineSpacing = Layout.lineSpacing
 
-        let itemWidth = floor(collectionView.bounds.width * itemWidthRatio)
-        let itemHeight = collectionView.bounds.height
+        let itemWidth = floor(collectionView.bounds.width * Layout.itemWidthRatio)
+        let itemHeight = collectionView.bounds.height - Layout.bottomSpacing
         itemSize = CGSize(width: itemWidth, height: itemHeight)
 
         let insetX = (collectionView.bounds.width - itemWidth) / 2
-        sectionInset = UIEdgeInsets(top: 0, left: insetX, bottom: 0, right: insetX)
+        sectionInset = UIEdgeInsets(
+            top: 0,
+            left: insetX,
+            bottom: Layout.bottomSpacing,
+            right: insetX)
 
         collectionView.decelerationRate = .fast
     }
@@ -75,4 +83,14 @@ final class EmotionCollectionViewLayout: UICollectionViewFlowLayout {
     override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
         return true
     }
+
+    func fetchcurrentIndex() -> Int? {
+        guard let collectionView else { return nil }
+        
+        let centerX = collectionView.contentOffset.x + (collectionView.bounds.width / 2)
+        let insetX = (collectionView.bounds.width - itemSize.width) / 2
+        
+        let relativeX = centerX - insetX
+        return Int(round(relativeX / baseDistance))
+    }
 }

Projects/Presentation/Sources/EmotionRegister/View/EmotionRegistrationViewController.swift

@@ -18,7 +18,7 @@ final class EmotionRegistrationViewController: BaseViewController<EmotionRegiste
         static let smallMarbleImageSize: CGFloat = 40
         static let emotionLabelWidth: CGFloat = 92
         static let emotionLabelHeight: CGFloat = 36
-        static let emotionCollectionViewHeight: CGFloat = 191
+        static let emotionCollectionViewHeight: CGFloat = 291
         static let emotionMarbleImageViewSize: CGFloat = 140
         static let emotionMarbleImageViewTopSpacing: CGFloat = 13
         static let speechImageTopSpacing: CGFloat = 26
@@ -33,11 +33,12 @@ final class EmotionRegistrationViewController: BaseViewController<EmotionRegiste
         static let foromThumbLeadingSpacing: CGFloat = 71
         static let handMarbleImageViewBottomSpacing: CGFloat = 7
         static let handMarbleImageViewTopSpacing: CGFloat = 50
-        static let infoLabelTopSpacing: CGFloat = 30
+        static let infoLabelTopSpacing: CGFloat = -70
         static let doubleChevronIconSize: CGFloat = 24
         static let doubleChevronIconHorizontalSpacing: CGFloat = 26
         static let doubleChevronIconTopSpacing: CGFloat = 10
         static let infoViewSize: CGFloat = 0
+        static let infoSwipeOverlayViewHeight = 100
     }
 
     private let smallMarbleScrollView = UIScrollView()
@@ -55,14 +56,20 @@ final class EmotionRegistrationViewController: BaseViewController<EmotionRegiste
     private let leftDoubleChevronImageView = UIImageView()
     private let rightDoubleChevronImageView = UIImageView()
     private let downDoubleChevronImageView = UIImageView()
+    private let infoSwipeOverlayView = UIView()
+    private let hapticGenerator = UISelectionFeedbackGenerator()
+    private let itemSetCount = 7
     private var isMarbleHeld = false
     private var marbleImageViewMidY: CGFloat?
     private var marbleImageViewPanGesture: UIPanGestureRecognizer?
+    private var infoSwipeOverlayViewPanGesturePanGesture: UIPanGestureRecognizer?
     private var emotion: Emotion?
     private var dataSource: UICollectionViewDiffableDataSource<Int, Emotion>?
     private var cancellables: Set<AnyCancellable>
+    private var lastMarbleCellIndex: Int = 0
+    
     var itemCount: Int {
-        return (dataSource?.snapshot().numberOfItems ?? 0) / 3
+        return (dataSource?.snapshot().numberOfItems ?? 0) / itemSetCount
     }
 
 
@@ -121,6 +128,10 @@ final class EmotionRegistrationViewController: BaseViewController<EmotionRegiste
         speechLabel.font = BitnagilFont.init(style:.cafe24Title2, weight: .light).font
         speechLabel.textColor = .clear
 
+        infoSwipeOverlayView.backgroundColor = .clear
+        infoSwipeOverlayView.isUserInteractionEnabled = false
+        infoSwipeOverlayView.backgroundColor = .clear
+
         infoLabel.numberOfLines = 0
         infoLabel.font = BitnagilFont.init(style: .body2, weight: .medium).font
         infoLabel.textColor = BitnagilColor.gray50
@@ -160,6 +171,7 @@ final class EmotionRegistrationViewController: BaseViewController<EmotionRegiste
         view.addSubview(handMarbleView)
         view.addSubview(thumbImageView)
         view.addSubview(infoView)
+        view.addSubview(infoSwipeOverlayView)
         smallMarbleScrollView.addSubview(smallMarbleStackView)
         infoView.addSubview(infoLabel)
         infoView.addSubview(leftDoubleChevronImageView)
@@ -258,6 +270,12 @@ final class EmotionRegistrationViewController: BaseViewController<EmotionRegiste
             make.bottom.equalTo(thumbImageView.snp.bottom).offset(-Layout.handMarbleImageViewBottomSpacing)
             make.size.equalTo(Layout.emotionMarbleImageViewSize)
         }
+
+        infoSwipeOverlayView.snp.makeConstraints { make in
+            make.horizontalEdges.equalToSuperview()
+            make.bottom.equalTo(emotionCollectionView.snp.bottom)
+            make.height.equalTo(Layout.infoSwipeOverlayViewHeight)
+        }
     }
 
     override func bind() {
@@ -267,11 +285,22 @@ final class EmotionRegistrationViewController: BaseViewController<EmotionRegiste
                 guard let self = self else { return }
 
                 let originalEmotionCount = emotions.count
-                let tripledEmotions = emotions.map({ $0.copy() }) + emotions + emotions.map({ $0.copy() })
+                let centerIndex = itemSetCount / 2 + 1
+                let multipliedEmotions = (0..<7).flatMap { i in
+                    i == centerIndex ? emotions : emotions.map { $0.copy() }
+                }
+
+                guard
+                    let layout = emotionCollectionView.collectionViewLayout as? EmotionCollectionViewLayout,
+                    let currentIndex = layout.fetchcurrentIndex()
+                else { return }
+
+                lastMarbleCellIndex = currentIndex
+                print(lastMarbleCellIndex)
 
                 var snapshot = NSDiffableDataSourceSnapshot<Int, Emotion>()
                 snapshot.appendSections([0])
-                snapshot.appendItems(tripledEmotions)
+                snapshot.appendItems(multipliedEmotions)
                 self.dataSource?.apply(snapshot, animatingDifferences: false)
 
                 self.scrollToIndex(index: originalEmotionCount)
@@ -350,8 +379,7 @@ final class EmotionRegistrationViewController: BaseViewController<EmotionRegiste
     }
 
     private func configureMarbleImageView() {
-        marbleImageViewPanGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan(gesture:)))
-        marbleImageViewPanGesture?.cancelsTouchesInView = false
+        marbleImageViewPanGesture = UIPanGestureRecognizer(target: self, action: #selector(handleEmotionCollectionViewPanning(gesture:)))
 
         handMarbleView.layer.cornerRadius = Layout.emotionMarbleImageViewSize / 2
         handMarbleView.layer.masksToBounds = true
@@ -377,7 +405,7 @@ final class EmotionRegistrationViewController: BaseViewController<EmotionRegiste
         }
     }
 
-    @objc private func handlePan(gesture: UIPanGestureRecognizer) {
+    @objc private func handleEmotionCollectionViewPanning(gesture: UIPanGestureRecognizer) {
         guard let marbleImageViewMidY else { return }
 
         switch gesture.state {
@@ -454,8 +482,22 @@ extension EmotionRegistrationViewController: UICollectionViewDelegate {
 }
 
 extension EmotionRegistrationViewController: UIScrollViewDelegate {
+    func scrollViewDidScroll(_ scrollView: UIScrollView) {
+        guard
+            let layout = emotionCollectionView.collectionViewLayout as? EmotionCollectionViewLayout,
+            let currentIndex = layout.fetchcurrentIndex(),
+            lastMarbleCellIndex != currentIndex
+        else { return }
+
+        lastMarbleCellIndex = currentIndex
+        hapticGenerator.selectionChanged()
+        hapticGenerator.prepare()
+
+    }
+
     func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
         emotionMarbleImageView.isHidden = true
+        hapticGenerator.prepare()
     }
 
     func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
@@ -470,7 +512,7 @@ extension EmotionRegistrationViewController: UIScrollViewDelegate {
         else { return }
 
         let index = indexPath.row % itemCount
-        if indexPath.row < itemCount / 3 || indexPath.row >= itemCount * 2 / 3 {
+        if indexPath.row < itemCount / itemSetCount || indexPath.row >= itemCount * (itemSetCount / 2 + 1) / itemSetCount {
             scrollToIndex(index: index)
         }
         viewModel.action(input: .selectEmotion(index: index))