Merge pull request #104 from boostcampwm-2022/bugfix_open_close

[밀봉/개봉 화면] 버그 수정

SpaceCapsule/SpaceCapsule/Resources/AnimationResource.swift

@@ -11,10 +11,10 @@ enum AnimationResource {
     static let capsuleShakeWidth: CGFloat = 4.0
     static let capsuleShakeDuration: CFTimeInterval = 0.05
     static let capsuleShakeRepeat: Float = 5.0
-    
+
     static let capsuleMoveHeight: CGFloat = 20.0
     static let capsuleMoveDuration: CFTimeInterval = 1.0
     static let capsuleMoveDelay: CFTimeInterval = 0.0
-    static let destinationHeightRatio: CGFloat = (2 / 5)
+    static let destinationHeightRatio: CGFloat = 0.35
     static let fromOriginY: CGFloat = 3.0
 }

SpaceCapsule/SpaceCapsule/Resources/FrameResource.swift

@@ -40,9 +40,11 @@ enum FrameResource {
     static let fontSize120: CGFloat = 24.0
     static let fontSize140: CGFloat = 28.0
 
-    static let capsuleThumbnailWidth: CGFloat = 267.0
-    static let capsuleThumbnailHeight: CGFloat = 440.0
+    static let capsuleThumbnailWidth: CGFloat = 260.0
+    static let capsuleThumbnailHeight: CGFloat = 400.0
     static let capsuleThumbnailCornerRadius: CGFloat = 120.0
+    static let capsuleThumbnailWidthRatio: CGFloat = 2.0 / 3.0
+    static let capsuleThumbnailHWRatio: CGFloat = 210.0 / 135.0
 
     static let shadowOffset: CGSize = .init(width: 4, height: 4)
     static let shadowRadius: CGFloat = 4
@@ -91,10 +93,10 @@ enum FrameResource {
 
     static let profileImageWidth: CGFloat = 100.0
     static let profileButtonHeight: CGFloat = 40.0
-    
+
     static let emptyCapsuleWidth: CGFloat = 135.0 * 1.5
     static let emptyCapsuleHeight: CGFloat = 210.0 * 1.5
-    
+
     static let detailSettingButtonHeight: CGFloat = 60.0
     static let detailSettingButtonPadding: CGFloat = 10.0
     static let detailMainStackViewHPadding: CGFloat = 30.0

SpaceCapsule/SpaceCapsule/Scene/TabBar/CapsuleAccess/CapsuleOpen/CapsuleOpenView.swift

@@ -10,9 +10,9 @@ import SnapKit
 import UIKit
 
 final class CapsuleOpenView: UIView, BaseView, UnOpenable {
-    lazy var thumbnailImageView = ThemeThumbnailImageView(frame: .zero, width: FrameResource.capsuleThumbnailWidth)
+    var thumbnailImageView = ThemeThumbnailImageView(frame: .zero, width: UIScreen.main.bounds.width * FrameResource.capsuleThumbnailWidthRatio)
 
-    lazy var descriptionLabel = {
+    var descriptionLabel = {
         let label = ThemeLabel(text: nil, size: FrameResource.fontSize140, color: .themeGray300)
         label.numberOfLines = 3
         label.textAlignment = .center
@@ -21,14 +21,14 @@ final class CapsuleOpenView: UIView, BaseView, UnOpenable {
 
     let blurEffectView = CapsuleBlurEffectView()
 
-    lazy var lockImageView = {
+    var lockImageView = {
         let lockImageView = UIImageView()
         lockImageView.image = .lock
         lockImageView.tintColor = .themeGray200
         return lockImageView
     }()
 
-    lazy var dateLabel = {
+    var dateLabel = {
         let dateLabel = ThemeLabel(text: nil, size: FrameResource.fontSize80, color: .themeGray200)
         dateLabel.textAlignment = .center
         return dateLabel
@@ -49,7 +49,7 @@ final class CapsuleOpenView: UIView, BaseView, UnOpenable {
 
     override init(frame: CGRect) {
         super.init(frame: frame)
-        
+
         configure()
         addSubViews()
         makeConstraints()
@@ -84,6 +84,7 @@ final class CapsuleOpenView: UIView, BaseView, UnOpenable {
         dateLabel.text = capsuleCellItem.closedDate.dateTimeString
         if !capsuleCellItem.isOpenable() {
             openButton.backgroundColor = .themeGray200
+            openButton.isEnabled = false
             applyUnOpenableEffect()
         }
     }
@@ -98,19 +99,21 @@ final class CapsuleOpenView: UIView, BaseView, UnOpenable {
         thumbnailImageView.snp.makeConstraints {
             $0.centerX.equalToSuperview()
             $0.centerY.equalToSuperview().multipliedBy(AnimationResource.fromOriginY)
-            $0.width.equalTo(FrameResource.capsuleThumbnailWidth)
-            $0.height.equalTo(FrameResource.capsuleThumbnailHeight)
+            $0.width.equalTo(UIScreen.main.bounds.width * FrameResource.capsuleThumbnailWidthRatio)
+            $0.height.equalTo(UIScreen.main.bounds.width * FrameResource.capsuleThumbnailWidthRatio * FrameResource.capsuleThumbnailHWRatio)
         }
 
         descriptionLabel.snp.makeConstraints {
             $0.centerX.equalToSuperview()
-            $0.top.equalTo(self.snp.centerY).multipliedBy(0.8).offset(FrameResource.openCapsuleVerticalPadding + FrameResource.capsuleThumbnailHeight / 2)
+            $0.top.equalTo(self.snp.centerY).multipliedBy(0.7)
+                .offset(FrameResource.capsuleThumbnailHeight / 2 + AnimationResource.capsuleMoveHeight)
+            $0.bottom.equalTo(openButton.snp.top).offset(-FrameResource.spacing200).priority(999)
         }
 
         openButton.snp.makeConstraints {
             $0.leading.equalToSuperview().offset(FrameResource.horizontalPadding)
             $0.trailing.equalToSuperview().offset(-FrameResource.horizontalPadding)
-            $0.bottom.equalTo(safeAreaLayoutGuide.snp.bottom)
+            $0.bottom.equalTo(safeAreaLayoutGuide.snp.bottom).offset(-FrameResource.spacing200)
             $0.height.equalTo(FrameResource.buttonHeight)
         }
     }

SpaceCapsule/SpaceCapsule/Scene/TabBar/CapsuleAccess/CapsuleOpen/CapsuleOpenViewController.swift

@@ -22,7 +22,7 @@ final class CapsuleOpenViewController: UIViewController, BaseViewController {
         }
         bind()
     }
-    
+
     override func viewWillAppear(_ animated: Bool) {
         super.viewWillAppear(animated)
         viewModel?.input.viewWillAppear.onNext(())
@@ -47,24 +47,13 @@ final class CapsuleOpenViewController: UIViewController, BaseViewController {
             .disposed(by: disposeBag)
     }
 
-    private func showAlert() {
-        let alertController = UIAlertController(title: "캡슐 알림", message: "열 수 없는 캡슐입니다", preferredStyle: .alert)
-        let cancelAction = UIAlertAction(title: "Cancel", style: .cancel, handler: nil)
-        let acceptAction = UIAlertAction(title: "OK", style: .default, handler: nil)
-        alertController.addAction(cancelAction)
-        alertController.addAction(acceptAction)
-        present(alertController, animated: true, completion: nil)
-    }
-
     func handleOpenButtonTap() {
         guard let capsuleCellItem = viewModel?.capsuleCellItem else {
             return
         }
         if capsuleCellItem.isOpenable() {
             capsuleOpenView.shakeAnimate()
             viewModel?.input.tapOpen.onNext(())
-        } else {
-            showAlert()
         }
     }
 }

SpaceCapsule/SpaceCapsule/Scene/TabBar/CapsuleAdd/CapsuleClose/CapsuleCloseView.swift

@@ -9,44 +9,32 @@ import AVFoundation
 import SnapKit
 import UIKit
 
-final class CapsuleCloseView: UIView, BaseView {
+final class CapsuleCloseView: UIView, BaseView, UnOpenable {
     struct Item {
         let closedDateString: String
         let memoryDateString: String
         let simpleAddress: String
         let thumbnailImageURL: String
     }
 
-    private let thumbnailImageView = {
-        let imageView = UIImageView()
-        imageView.layer.cornerRadius = FrameResource.capsuleThumbnailWidth / 2
-        imageView.clipsToBounds = true
-        imageView.contentMode = .scaleAspectFill
-        return imageView
-    }()
-
-    private let thumbnailImageContainerView = {
-        let view = UIView()
-        view.layer.shadowOffset = FrameResource.shadowOffset
-        view.layer.shadowRadius = FrameResource.shadowRadius
-        view.layer.shadowOpacity = FrameResource.shadowOpacity
-        view.layer.cornerRadius = FrameResource.capsuleThumbnailWidth / 2
-        return view
-    }()
+    var thumbnailImageView = ThemeThumbnailImageView(frame: .zero, width: UIScreen.main.bounds.width * FrameResource.capsuleThumbnailWidthRatio)
 
-    private let blurEffectView = CapsuleBlurEffectView()
+    let blurEffectView = CapsuleBlurEffectView()
 
-    private let closedImageView: UIImageView = {
-        let imageView = UIImageView()
-        imageView.image = .lock
-        imageView.tintColor = .themeGray200
-
-        return imageView
+    var lockImageView = {
+        let lockImageView = UIImageView()
+        lockImageView.image = .lock
+        lockImageView.tintColor = .themeGray200
+        return lockImageView
     }()
 
-    private let closedDateLabel = ThemeLabel(size: FrameResource.fontSize90, color: .themeGray200)
+    var dateLabel = {
+        let dateLabel = ThemeLabel(text: nil, size: FrameResource.fontSize80, color: .themeGray200)
+        dateLabel.textAlignment = .center
+        return dateLabel
+    }()
 
-    private let descriptionLabel = {
+    var descriptionLabel = {
         let label = ThemeLabel(size: FrameResource.fontSize140, color: .themeGray300)
         label.numberOfLines = 3
         label.textAlignment = .center
@@ -60,7 +48,6 @@ final class CapsuleCloseView: UIView, BaseView {
         button.setTitleColor(.white, for: .normal)
         button.backgroundColor = .themeColor200
         button.layer.cornerRadius = FrameResource.commonCornerRadius
-
         return button
     }()
 
@@ -85,7 +72,7 @@ final class CapsuleCloseView: UIView, BaseView {
     }
 
     func configure(item: Item) {
-        closedDateLabel.text = "밀봉시간: \(item.closedDateString)"
+        dateLabel.text = "밀봉시간: \(item.closedDateString)"
 
         descriptionLabel.text = """
         \(item.memoryDateString)
@@ -99,64 +86,51 @@ final class CapsuleCloseView: UIView, BaseView {
             color: .themeGray400
         )
 
-        thumbnailImageView.kr.setImage(with: item.thumbnailImageURL, placeholder: .empty, scale: FrameResource.closedImageScale)
+        thumbnailImageView.imageView.kr.setImage(with: item.thumbnailImageURL, placeholder: .empty, scale: FrameResource.closedImageScale)
+
+        applyUnOpenableEffect()
     }
 
     func addSubViews() {
-        [blurEffectView, closedImageView, closedDateLabel].forEach {
-            thumbnailImageView.addSubview($0)
-        }
-
-        [thumbnailImageContainerView, descriptionLabel, closeButton].forEach {
+        [thumbnailImageView, descriptionLabel, closeButton].forEach {
             addSubview($0)
         }
-
-        thumbnailImageContainerView.addSubview(thumbnailImageView)
     }
 
     func makeConstraints() {
-        blurEffectView.snp.makeConstraints {
-            $0.center.equalToSuperview()
-            $0.width.height.equalToSuperview()
-        }
-
-        closedImageView.snp.makeConstraints {
-            $0.center.equalToSuperview()
-            $0.width.height.equalTo(FrameResource.closedIconSize)
-        }
-
-        closedDateLabel.snp.makeConstraints {
-            $0.centerX.equalToSuperview()
-            $0.top.equalTo(closedImageView.snp.bottom).offset(FrameResource.closedDateOffset)
-        }
-
-        thumbnailImageContainerView.snp.makeConstraints {
-            $0.centerX.equalToSuperview()
-            $0.centerY.equalToSuperview().multipliedBy(0.8)
-            $0.width.equalTo(FrameResource.capsuleThumbnailWidth)
-            $0.height.equalTo(FrameResource.capsuleThumbnailHeight)
-        }
-
         thumbnailImageView.snp.makeConstraints {
-            $0.edges.equalToSuperview()
+            $0.centerX.equalToSuperview()
+            $0.centerY.equalToSuperview().multipliedBy(AnimationResource.fromOriginY)
+            $0.width.equalTo(UIScreen.main.bounds.width * FrameResource.capsuleThumbnailWidthRatio)
+            $0.height.equalTo(UIScreen.main.bounds.width * FrameResource.capsuleThumbnailWidthRatio * FrameResource.capsuleThumbnailHWRatio)
         }
 
         descriptionLabel.snp.makeConstraints {
             $0.centerX.equalToSuperview()
-            $0.bottom.equalTo(closeButton.snp.top).offset(-FrameResource.buttonHeight)
+            $0.top.equalTo(self.snp.centerY).multipliedBy(0.7)
+                .offset(FrameResource.capsuleThumbnailHeight / 2 + AnimationResource.capsuleMoveHeight)
+            $0.bottom.equalTo(closeButton.snp.top).offset(-FrameResource.spacing200).priority(999)
         }
 
         closeButton.snp.makeConstraints {
             $0.leading.equalToSuperview().offset(FrameResource.horizontalPadding)
             $0.trailing.equalToSuperview().offset(-FrameResource.horizontalPadding)
-            $0.bottom.equalToSuperview().offset(-FrameResource.buttonHeight)
+            $0.bottom.equalTo(safeAreaLayoutGuide.snp.bottom).offset(-FrameResource.spacing200)
             $0.height.equalTo(FrameResource.buttonHeight)
         }
     }
 
     func animate() {
-        UIView.animate(withDuration: 1, delay: 0, options: [.repeat, .autoreverse]) {
-            self.thumbnailImageContainerView.transform = .init(translationX: 0, y: FrameResource.floatingOffsetY)
-        }
+        UIView.animate(withDuration: AnimationResource.capsuleMoveDuration, animations: {
+            self.layoutIfNeeded()
+            self.thumbnailImageView.center.y = (self.frame.height * AnimationResource.destinationHeightRatio)
+        }, completion: { _ in
+            UIView.animate(withDuration: AnimationResource.capsuleMoveDuration,
+                           delay: 0,
+                           options: [.repeat, .autoreverse]
+            ) {
+                self.thumbnailImageView.transform = .init(translationX: 0, y: AnimationResource.capsuleMoveHeight)
+            }
+        })
     }
 }