🔀 :: (#1262) 보관함 리스트 만들기 버튼 UI 수정

Projects/Features/StorageFeature/Sources/ViewControllers/ListStorageViewController.swift

@@ -20,7 +20,15 @@ typealias MyPlayListSectionModel = SectionModel<Int, PlaylistEntity>
 
 final class ListStorageViewController: BaseReactorViewController<ListStorageReactor>, SongCartViewType,
     PlaylistDetailNavigator {
-    let listStorageView = ListStorageView()
+    private let createListButton = CreateListButtonView(
+        padding: .init(
+            top: 16,
+            left: 20,
+            bottom: 12,
+            right: 20
+        )
+    )
+    private let listStorageView = ListStorageView()
 
     var multiPurposePopupFactory: MultiPurposePopupFactory
     var textPopupFactory: TextPopupFactory
@@ -250,7 +258,7 @@ final class ListStorageViewController: BaseReactorViewController<ListStorageReac
             .bind(to: reactor.action)
             .disposed(by: disposeBag)
 
-        listStorageView.rx.createListButtonDidTap
+        createListButton.button.rx.tap
             .throttle(.milliseconds(500), latest: false, scheduler: MainScheduler.asyncInstance)
             .do(onNext: { LogManager.analytics(StorageAnalyticsLog.clickCreatePlaylistButton(location: .myPlaylist)) })
             .map { Reactor.Action.createListButtonDidTap }
@@ -331,6 +339,14 @@ extension ListStorageViewController: ListStorageTableViewCellDelegate {
 }
 
 extension ListStorageViewController: UITableViewDelegate {
+    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
+        return 80 // height(52) + top inset(16) + bottom inset(12)
+    }
+
+    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
+        return createListButton
+    }
+
     public func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
         return 60
     }

Projects/Features/StorageFeature/Sources/Views/CreateListButton.swift

@@ -4,7 +4,19 @@ import Then
 import UIKit
 import Utility
 
-final class CreateListButton: UIButton {
+final class CreateListButtonView: UIView {
+    private let baseView = UIView().then {
+        $0.layer.cornerRadius = 8
+        $0.layer.borderColor = DesignSystemAsset.BlueGrayColor.blueGray200.color.withAlphaComponent(0.4).cgColor
+        $0.layer.borderWidth = 1
+        $0.backgroundColor = .white.withAlphaComponent(0.4)
+        $0.clipsToBounds = true
+    }
+
+    private let translucentView = UIVisualEffectView(effect: UIBlurEffect(style: .regular)).then {
+        $0.layer.cornerRadius = 8
+    }
+
     private let image = UIImageView().then {
         $0.image = DesignSystemAsset.Storage.storageNewPlaylistAdd.image
     }
@@ -17,25 +29,45 @@ final class CreateListButton: UIButton {
         kernValue: -0.5
     )
 
-    override init(frame: CGRect) {
-        super.init(frame: frame)
+    let button = UIButton()
+
+    private let padding: UIEdgeInsets
+
+    init(padding: UIEdgeInsets = .zero) {
+        self.padding = padding
+        super.init(frame: .zero)
         addView()
         setLayout()
         configureUI()
     }
 
+    @available(*, unavailable)
     required init?(coder: NSCoder) {
-        super.init(coder: coder)
+        fatalError("init(coder:) has not been implemented")
     }
 
     private func addView() {
-        self.addSubviews(
+        self.addSubview(baseView)
+        baseView.addSubviews(
+            translucentView,
             image,
-            title
+            title,
+            button
         )
     }
 
     private func setLayout() {
+        baseView.snp.makeConstraints {
+            $0.top.equalToSuperview().inset(padding.top)
+            $0.leading.equalToSuperview().inset(padding.left)
+            $0.trailing.equalToSuperview().inset(padding.right)
+            $0.bottom.equalToSuperview().inset(padding.bottom)
+        }
+
+        translucentView.snp.makeConstraints {
+            $0.edges.equalToSuperview()
+        }
+
         image.snp.makeConstraints {
             $0.width.height.equalTo(32)
             $0.centerY.equalToSuperview()
@@ -45,14 +77,13 @@ final class CreateListButton: UIButton {
         title.snp.makeConstraints {
             $0.center.equalToSuperview()
         }
+
+        button.snp.makeConstraints {
+            $0.edges.equalToSuperview()
+        }
     }
 
     private func configureUI() {
-        self.layer.cornerRadius = 8
-        self.layer.borderWidth = 1
-        self.setBackgroundColor(.white.withAlphaComponent(0.4), for: .normal)
-        self.setBackgroundColor(.lightGray, for: .selected)
-        self.layer.borderColor = DesignSystemAsset.BlueGrayColor.blueGray200.color.cgColor.copy(alpha: 0.4)
-        self.clipsToBounds = true
+        self.backgroundColor = .clear
     }
 }

Projects/Features/StorageFeature/Sources/Views/ListStorageView.swift

@@ -25,14 +25,11 @@ private protocol ListStorageStateProtocol {
 
 private protocol ListStorageActionProtocol {
     var loginButtonDidTap: Observable<Void> { get }
-    var createListButtonDidTap: Observable<Void> { get }
     var refreshControlValueChanged: Observable<Void> { get }
     var drawFruitButtonDidTap: Observable<Void> { get }
 }
 
 final class ListStorageView: UIView {
-    let createListButton = CreateListButton(frame: .zero)
-
     let tableView = UITableView().then {
         $0.backgroundColor = .clear
         $0.register(ListStorageTableViewCell.self, forCellReuseIdentifier: ListStorageTableViewCell.reuseIdentifer)
@@ -69,9 +66,15 @@ final class ListStorageView: UIView {
         fatalError("init(coder:) has not been implemented")
     }
 
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        gradientLayer.frame = drawFruitButton.bounds
+    }
+}
+
+private extension ListStorageView {
     func addView() {
         self.addSubviews(
-            createListButton,
             tableView,
             drawFruitButton,
             particleAnimationView,
@@ -81,13 +84,8 @@ final class ListStorageView: UIView {
     }
 
     func setLayout() {
-        createListButton.snp.makeConstraints {
-            $0.height.equalTo(52)
-            $0.top.equalTo(safeAreaLayoutGuide).offset(68)
-            $0.horizontalEdges.equalToSuperview().inset(20)
-        }
         tableView.snp.makeConstraints {
-            $0.top.equalTo(createListButton.snp.bottom).offset(12)
+            $0.top.equalTo(safeAreaLayoutGuide).offset(68 - 16)
             $0.horizontalEdges.equalToSuperview()
             $0.bottom.equalTo(drawFruitButton.snp.top)
         }
@@ -104,7 +102,7 @@ final class ListStorageView: UIView {
         loginWarningView.snp.makeConstraints {
             $0.width.equalTo(164)
             $0.height.equalTo(176)
-            $0.top.equalTo(createListButton.snp.bottom).offset(80)
+            $0.top.equalTo(tableView.snp.top).offset(56 + 80)
             $0.centerX.equalToSuperview()
         }
         activityIndicator.snp.makeConstraints {
@@ -117,6 +115,7 @@ final class ListStorageView: UIView {
         backgroundColor = DesignSystemAsset.BlueGrayColor.blueGray100.color
         tableView.refreshControl = refreshControl
         tableView.verticalScrollIndicatorInsets = UIEdgeInsets(top: 0, left: 0, bottom: 56, right: 0)
+        tableView.sectionHeaderTopPadding = 0
 
         loginWarningView.isHidden = true
         activityIndicator.isHidden = true
@@ -138,11 +137,6 @@ final class ListStorageView: UIView {
         gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
         drawFruitButton.layer.addSublayer(gradientLayer)
     }
-
-    override func layoutSubviews() {
-        super.layoutSubviews()
-        gradientLayer.frame = drawFruitButton.bounds
-    }
 }
 
 extension ListStorageView: ListStorageStateProtocol {
@@ -202,8 +196,4 @@ extension Reactive: ListStorageActionProtocol where Base: ListStorageView {
     var refreshControlValueChanged: Observable<Void> {
         base.refreshControl.rx.controlEvent(.valueChanged).map { () }.asObservable()
     }
-
-    var createListButtonDidTap: Observable<Void> {
-        base.createListButton.rx.tap.asObservable()
-    }
 }