🔀 :: (#757) 검색에서 스크롤 올릴 때 pinned Header 걸치기

Projects/App/Sources/Application/AppComponent+Search.swift

@@ -5,6 +5,12 @@ import SearchFeature
 import SearchFeatureInterface
 
 extension AppComponent {
+    var searchGlobalScrollState: any SearchGlobalScrollProtocol {
+        shared {
+            SearchGlobalScrollState()
+        }
+    }
+
     var searchFactory: any SearchFactory {
         SearchComponent(parent: self)
     }

Projects/Features/SearchFeature/Resources/Search.storyboard

@@ -20,13 +20,14 @@
                         <subviews>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="e54-rK-aGI">
                                 <rect key="frame" x="0.0" y="59" width="393" height="16"/>
+                                <color key="backgroundColor" name="blueGray100"/>
                                 <constraints>
                                     <constraint firstAttribute="height" constant="16" id="nJ5-2M-ZsW"/>
                                 </constraints>
                             </view>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="5nx-1t-MMz">
                                 <rect key="frame" x="0.0" y="75" width="393" height="36"/>
-                                <color key="backgroundColor" name="gray100"/>
+                                <color key="backgroundColor" name="blueGray100"/>
                                 <constraints>
                                     <constraint firstAttribute="height" constant="36" id="ykE-p1-BQh"/>
                                 </constraints>
@@ -73,7 +74,7 @@
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="nj5-Rh-R0O">
                                 <rect key="frame" x="0.0" y="0.0" width="393" height="115"/>
                                 <subviews>
-                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="yLy-ME-gxl" userLabel="SearchHeaderView" customClass="SearchHeaderView">
+                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="yLy-ME-gxl" userLabel="SearchHeaderView">
                                         <rect key="frame" x="0.0" y="59" width="393" height="56"/>
                                         <subviews>
                                             <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="DMe-Vm-2cg">
@@ -148,7 +149,9 @@
                         <outlet property="cancelButton" destination="pwf-8T-rR0" id="ydM-fP-bdc"/>
                         <outlet property="contentView" destination="jLC-fz-G5h" id="v7E-Mr-1a8"/>
                         <outlet property="contentViewBottomConstraint" destination="znF-Ya-K6h" id="gP4-l4-S2x"/>
+                        <outlet property="searchHeaderContentView" destination="yLy-ME-gxl" id="CqP-Pw-x7T"/>
                         <outlet property="searchHeaderView" destination="nj5-Rh-R0O" id="evQ-ZJ-eOe"/>
+                        <outlet property="searchHeaderViewTopConstraint" destination="2dP-Eo-Ia3" id="SKg-lp-3WO"/>
                         <outlet property="searchImageView" destination="DMe-Vm-2cg" id="oFs-eJ-DKi"/>
                         <outlet property="searchTextFiled" destination="VJU-GJ-8b6" id="qs0-yr-rIP"/>
                     </connections>
@@ -159,6 +162,9 @@
         </scene>
     </scenes>
     <resources>
+        <namedColor name="blueGray100">
+            <color red="0.94900000095367432" green="0.9570000171661377" blue="0.96899998188018799" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
         <namedColor name="gray100">
             <color red="0.94900000095367432" green="0.9570000171661377" blue="0.96899998188018799" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
         </namedColor>

Projects/Features/SearchFeature/Sources/Components/AfterSearchComponent.swift

@@ -8,13 +8,15 @@ import SongsDomainInterface
 public protocol AfterSearchDependency: Dependency {
     var songSearchResultFactory: any SongSearchResultFactory { get }
     var listSearchResultFactory: any ListSearchResultFactory { get }
+    var searchGlobalScrollState: any SearchGlobalScrollProtocol { get }
 }
 
 public final class AfterSearchComponent: Component<AfterSearchDependency> {
     public func makeView(text: String) -> AfterSearchViewController {
         return AfterSearchViewController.viewController(
             songSearchResultFactory: dependency.songSearchResultFactory,
             listSearchResultFactory: dependency.listSearchResultFactory,
+            searchGlobalScrollState: dependency.searchGlobalScrollState,
             reactor: .init(text: text)
         )
     }

Projects/Features/SearchFeature/Sources/Components/ListSearchResultComponent.swift

@@ -11,6 +11,7 @@ public protocol ListSearchResultDependency: Dependency {
     var fetchSearchPlaylistsUseCase: any FetchSearchPlaylistsUseCase { get }
     var searchSortOptionComponent: SearchSortOptionComponent { get }
     var playlistDetailFactory: any PlaylistDetailFactory { get }
+    var searchGlobalScrollState: any SearchGlobalScrollProtocol { get }
 }
 
 public final class ListSearchResultComponent: Component<ListSearchResultDependency>, ListSearchResultFactory {
@@ -21,7 +22,8 @@ public final class ListSearchResultComponent: Component<ListSearchResultDependen
                 fetchSearchPlaylistsUseCase: dependency.fetchSearchPlaylistsUseCase
             ),
             searchSortOptionComponent: dependency.searchSortOptionComponent,
-            playlistDetailFactory: dependency.playlistDetailFactory
+            playlistDetailFactory: dependency.playlistDetailFactory,
+            searchGlobalScrollState: dependency.searchGlobalScrollState
         )
     }
 }

Projects/Features/SearchFeature/Sources/Components/SearchComponent.swift

@@ -8,6 +8,7 @@ public protocol SearchDependency: Dependency {
     var beforeSearchComponent: BeforeSearchComponent { get }
     var afterSearchComponent: AfterSearchComponent { get }
     var textPopUpFactory: any TextPopUpFactory { get }
+    var searchGlobalScrollState: any SearchGlobalScrollProtocol { get }
 }
 
 public final class SearchComponent: Component<SearchDependency>, SearchFactory {
@@ -16,7 +17,8 @@ public final class SearchComponent: Component<SearchDependency>, SearchFactory {
             reactor: SearchReactor(),
             beforeSearchComponent: self.dependency.beforeSearchComponent,
             afterSearchComponent: self.dependency.afterSearchComponent,
-            textPopUpFactory: dependency.textPopUpFactory
+            textPopUpFactory: dependency.textPopUpFactory,
+            searchGlobalScrollState: dependency.searchGlobalScrollState
         )
     }
 }

Projects/Features/SearchFeature/Sources/Components/SongSearchResultComponent.swift

@@ -10,6 +10,7 @@ public protocol SongSearchResultDependency: Dependency {
     var fetchSearchSongsUseCase: any FetchSearchSongsUseCase { get }
     var searchSortOptionComponent: SearchSortOptionComponent { get }
     var containSongsFactory: any ContainSongsFactory { get }
+    var searchGlobalScrollState: any SearchGlobalScrollProtocol { get }
 }
 
 public final class SongSearchResultComponent: Component<SongSearchResultDependency>, SongSearchResultFactory {
@@ -20,7 +21,8 @@ public final class SongSearchResultComponent: Component<SongSearchResultDependen
                 fetchSearchSongsUseCase: dependency.fetchSearchSongsUseCase
             ),
             searchSortOptionComponent: dependency.searchSortOptionComponent,
-            containSongsFactory: dependency.containSongsFactory
+            containSongsFactory: dependency.containSongsFactory,
+            searchGlobalScrollState: dependency.searchGlobalScrollState
         )
     }
 }

Projects/Features/SearchFeature/Sources/Service/SearchGlobalScrollState.swift

@@ -0,0 +1,61 @@
+import Foundation
+import RxSwift
+
+public enum SearchResultPage {
+    case song
+    case list
+}
+
+public protocol SearchGlobalScrollProtocol {
+    var scrollAmountObservable: Observable<(CGFloat, CGFloat)> { get }
+    var expandSearchHeaderObservable: Observable<Void> { get }
+
+    var songResultScrollToTopObservable: Observable<Void> { get }
+    var listResultScrollToTopObservable: Observable<Void> { get }
+
+    func scrollTo(source: (CGFloat, CGFloat))
+    func expand()
+    func scrollToTop(page: SearchResultPage)
+}
+
+public final class SearchGlobalScrollState: SearchGlobalScrollProtocol {
+    private let scrollAmountSubject = PublishSubject<(CGFloat, CGFloat)>()
+    private let expandSearchHeaderSubject = PublishSubject<Void>()
+    private let songResultScrollToTopSubject = PublishSubject<Void>()
+    private let listResultScrollToTopSubject = PublishSubject<Void>()
+
+    public init() {}
+
+    public var scrollAmountObservable: Observable<(CGFloat, CGFloat)> {
+        scrollAmountSubject
+    }
+
+    public func scrollTo(source: (CGFloat, CGFloat)) {
+        scrollAmountSubject.onNext(source)
+    }
+
+    public var expandSearchHeaderObservable: Observable<Void> {
+        expandSearchHeaderSubject
+    }
+
+    public func expand() {
+        expandSearchHeaderSubject.onNext(())
+    }
+
+    public var songResultScrollToTopObservable: Observable<Void> {
+        songResultScrollToTopSubject
+    }
+
+    public var listResultScrollToTopObservable: Observable<Void> {
+        listResultScrollToTopSubject
+    }
+
+    public func scrollToTop(page: SearchResultPage) {
+        switch page {
+        case .song:
+            songResultScrollToTopSubject.onNext(())
+        case .list:
+            listResultScrollToTopSubject.onNext(())
+        }
+    }
+}

Projects/Features/SearchFeature/Sources/View/ListResultCell.swift

@@ -34,11 +34,11 @@ final class ListResultCell: UICollectionViewCell {
         $0.numberOfLines = 1
     }
 
-    private let dateLabel = WMLabel(
+    private let sharedCountLabel = WMLabel(
         text: "",
         textColor: DesignSystemAsset.NewGrayColor.gray900.color,
         font: .sc7(weight: .score3Light),
-        alignment: .left,
+        alignment: .right,
         lineHeight: UIFont.WMFontSystem.t7().lineHeight,
         kernValue: -0.5
     ).then {
@@ -59,7 +59,7 @@ final class ListResultCell: UICollectionViewCell {
 
 extension ListResultCell {
     private func addSubview() {
-        self.contentView.addSubviews(thumbnailView, titleLabel, creatorLabel, dateLabel)
+        self.contentView.addSubviews(thumbnailView, titleLabel, creatorLabel, sharedCountLabel)
     }
 
     private func setLayout() {
@@ -82,8 +82,8 @@ extension ListResultCell {
             $0.bottom.equalTo(thumbnailView.snp.bottom)
         }
 
-        dateLabel.snp.makeConstraints {
-            $0.width.equalTo(70)
+        sharedCountLabel.snp.makeConstraints {
+            $0.width.lessThanOrEqualTo(66)
             $0.centerY.equalTo(thumbnailView.snp.centerY)
             $0.trailing.equalToSuperview().inset(20)
             $0.leading.equalTo(titleLabel.snp.trailing).offset(8)
@@ -93,7 +93,7 @@ extension ListResultCell {
     public func update(_ model: SearchPlaylistEntity) {
         titleLabel.text = model.title
         creatorLabel.text = model.userName
-        dateLabel.text = model.date
+        sharedCountLabel.text = model.date
         thumbnailView.kf.setImage(with: URL(string: model.image), placeholder: nil, options: [.transition(.fade(0.2))])
     }
 }

Projects/Features/SearchFeature/Sources/View/SongResultCell.swift

@@ -17,7 +17,7 @@ final class SongResultCell: UICollectionViewCell {
         textColor: DesignSystemAsset.NewGrayColor.gray900.color,
         font: .t6(weight: .medium),
         alignment: .left,
-        lineHeight: UIFont.WMFontSystem.t6().lineHeight,
+        lineHeight: UIFont.WMFontSystem.t6(weight: .medium).lineHeight,
         kernValue: -0.5
     ).then {
         $0.numberOfLines = 1
@@ -38,7 +38,7 @@ final class SongResultCell: UICollectionViewCell {
         text: "",
         textColor: DesignSystemAsset.NewGrayColor.gray900.color,
         font: .sc7(weight: .score3Light),
-        alignment: .left,
+        alignment: .right,
         lineHeight: UIFont.WMFontSystem.t7().lineHeight,
         kernValue: -0.5
     ).then {
@@ -83,7 +83,7 @@ extension SongResultCell {
         }
 
         dateLabel.snp.makeConstraints {
-            $0.width.equalTo(70)
+            $0.width.lessThanOrEqualTo(66)
             $0.centerY.equalTo(thumbnailView.snp.centerY)
             $0.trailing.equalToSuperview().inset(20)
             $0.leading.equalTo(titleLabel.snp.trailing).offset(8)

Projects/Features/SearchFeature/Sources/ViewControllers/AfterSearchViewController.swift

@@ -19,6 +19,7 @@ public final class AfterSearchViewController: TabmanViewController, ViewControll
 
     private var songSearchResultFactory: SongSearchResultFactory!
     private var listSearchResultFactory: ListSearchResultFactory!
+    private var searchGlobalScrollState: SearchGlobalScrollProtocol!
     public var disposeBag = DisposeBag()
 
     private var viewControllers: [UIViewController] = [
@@ -34,15 +35,26 @@ public final class AfterSearchViewController: TabmanViewController, ViewControll
     public static func viewController(
         songSearchResultFactory: SongSearchResultFactory,
         listSearchResultFactory: ListSearchResultFactory,
+        searchGlobalScrollState: any SearchGlobalScrollProtocol,
         reactor: AfterSearchReactor
     ) -> AfterSearchViewController {
         let viewController = AfterSearchViewController.viewController(storyBoardName: "Search", bundle: Bundle.module)
         viewController.songSearchResultFactory = songSearchResultFactory
         viewController.listSearchResultFactory = listSearchResultFactory
+        viewController.searchGlobalScrollState = searchGlobalScrollState
         viewController.reactor = reactor
         return viewController
     }
 
+    override public func pageboyViewController(
+        _ pageboyViewController: PageboyViewController,
+        didScrollToPageAt index: TabmanViewController.PageIndex,
+        direction: PageboyViewController.NavigationDirection,
+        animated: Bool
+    ) {
+        searchGlobalScrollState.expand()
+    }
+
     deinit {
         DEBUG_LOG("❌ \(Self.self)")
     }
@@ -56,7 +68,7 @@ public final class AfterSearchViewController: TabmanViewController, ViewControll
 extension AfterSearchViewController {
     func bindState(reacotr: AfterSearchReactor) {
         let currentState = reacotr.state.share()
-        #warning("첫 진입 시 text가 안내려옴 바인딩이 안되서")
+
         currentState.map(\.text)
             .filter { !$0.isEmpty }
             .distinctUntilChanged()
@@ -141,10 +153,8 @@ extension AfterSearchViewController: PageboyViewControllerDataSource, TMBarDataS
 
 extension AfterSearchViewController {
     func scrollToTop() {
-        #warning("구현이 끝난 후 연결")
-//        let current: Int = self.currentIndex ?? 0
-//        let searchContent = self.viewControllers.compactMap { $0 as? AfterSearchContentViewController }
-//        guard searchContent.count > current else { return }
-//        searchContent[current].scrollToTop()
+        let current: Int = self.currentIndex ?? 0
+
+        searchGlobalScrollState.scrollToTop(page: current == 0 ? .song : .list)
     }
 }

Projects/Features/SearchFeature/Sources/ViewControllers/ListSearchResultViewController.swift

@@ -20,6 +20,8 @@ final class ListSearchResultViewController: BaseReactorViewController<ListSearch
     private let searchSortOptionComponent: SearchSortOptionComponent
     private (set) var playlistDetailFactory: any PlaylistDetailFactory
 
+    private let searchGlobalScrollState: any SearchGlobalScrollProtocol
+
     private lazy var collectionView: UICollectionView = createCollectionView().then {
         $0.backgroundColor = DesignSystemAsset.BlueGrayColor.gray100.color
     }
@@ -34,10 +36,12 @@ final class ListSearchResultViewController: BaseReactorViewController<ListSearch
     init(
         _ reactor: ListSearchResultReactor,
         searchSortOptionComponent: SearchSortOptionComponent,
-        playlistDetailFactory: any PlaylistDetailFactory
+        playlistDetailFactory: any PlaylistDetailFactory,
+        searchGlobalScrollState: any SearchGlobalScrollProtocol
     ) {
         self.searchSortOptionComponent = searchSortOptionComponent
         self.playlistDetailFactory = playlistDetailFactory
+        self.searchGlobalScrollState = searchGlobalScrollState
         super.init(reactor: reactor)
     }
 
@@ -48,7 +52,16 @@ final class ListSearchResultViewController: BaseReactorViewController<ListSearch
 
     override func bind(reactor: ListSearchResultReactor) {
         super.bind(reactor: reactor)
-        collectionView.delegate = self
+        collectionView.rx
+            .setDelegate(self)
+            .disposed(by: disposeBag)
+
+        searchGlobalScrollState.listResultScrollToTopObservable
+            .observe(on: MainScheduler.asyncInstance)
+            .bind(with: self) { owner, _ in
+                owner.collectionView.setContentOffset(.zero, animated: true)
+            }
+            .disposed(by: disposeBag)
     }
 
     override func bindAction(reactor: ListSearchResultReactor) {
@@ -123,7 +136,7 @@ final class ListSearchResultViewController: BaseReactorViewController<ListSearch
                     snapshot.appendSections([.list])
 
                     snapshot.appendItems(dataSource, toSection: .list)
-                    owner.dataSource.apply(snapshot, animatingDifferences: true)
+                    owner.dataSource.apply(snapshot, animatingDifferences: false)
 
                     let warningView = WMWarningView(
                         text: "검색결과가 없습니다."
@@ -219,9 +232,16 @@ extension ListSearchResultViewController: UICollectionViewDelegate {
         let id = PreferenceManager.userInfo?.decryptedID ?? ""
         let isMine = model.ownerId == id
 
-        navigatePlaylistDetail(
-            key: model.key,
-            kind: isMine ? .my : .unknown
+        navigatePlaylistDetail(key: model.key, kind: isMine ? .my : .unknown)
+    }
+
+    func scrollViewDidScroll(_ scrollView: UIScrollView) {
+        guard collectionView.isVerticallyScrollable else { return }
+        searchGlobalScrollState.scrollTo(
+            source: (
+                scrollView.contentOffset.y,
+                scrollView.contentSize.height - scrollView.frame.size.height
+            )
         )
     }
 }