feat: CameraViewController ZoomView Button으로 수정

Do-hyun-Kim · Do-hyun-Kim · commit e85983f103b7 · 2024-02-02T18:30:15.000+09:00
- CameraViewController TransitionZoomImageScale, TransitionPinchImageScale Method 추가
- pinchZoomScale, zooScale Binding 코드 추가 or didTapZoomButton, dragPreviewLayer Action 추가
- CameraViewReactor didTapZoomButton, dragPreviewLayer Action, setPinchZoomScale, setZoomScale Mutation 추가
- DesignSystem Assets zoomOut 이미지 추가
diff --git a/14th-team5-iOS/App/Sources/Presentation/Camera/CameraViewController.swift b/14th-team5-iOS/App/Sources/Presentation/Camera/CameraViewController.swift
@@ -36,7 +36,7 @@ public final class CameraViewController: BaseViewController<CameraViewReactor> {
     private let toggleButton: UIButton = UIButton.createCircleButton(radius: 24)
     private let cameraIndicatorView: BibbiLoadingView = BibbiLoadingView()
     private let filterView: UIImageView = UIImageView()
-    private let zoomView: UIImageView = UIImageView()
+    private let zoomView: UIButton = UIButton()
     private let realEmojiDescriptionLabel = BibbiLabel(.body1Regular, textColor: .mainYellow)
     private let realEmojiFaceView = UIView()
     private let realEmojiFaceImageView = UIImageView()
@@ -71,7 +71,7 @@ public final class CameraViewController: BaseViewController<CameraViewReactor> {
     public override func setupUI() {
         super.setupUI()
         realEmojiFaceView.addSubview(realEmojiFaceImageView)
-        view.addSubviews(cameraView, shutterButton, flashButton, toggleButton, realEmojiFaceView, realEmojiHorizontalStakView, realEmojiCollectionView, cameraIndicatorView , cameraNavigationBar)
+        view.addSubviews(cameraView, shutterButton, flashButton, toggleButton, realEmojiFaceView, realEmojiHorizontalStakView, realEmojiCollectionView ,cameraIndicatorView , cameraNavigationBar)
     }
     
     public override func setupAttributes() {
@@ -87,8 +87,8 @@ public final class CameraViewController: BaseViewController<CameraViewReactor> {
         }
         
         zoomView.do {
-            $0.image = DesignSystemAsset.zoom.image
-            $0.contentMode = .scaleAspectFill
+            $0.setBackgroundImage(DesignSystemAsset.zoomin.image, for: .normal)
+            $0.setTitle("", for: .normal)
         }
         
         realEmojiFlowLayout.do {
@@ -276,6 +276,41 @@ public final class CameraViewController: BaseViewController<CameraViewReactor> {
                 NotificationCenter.default.post(name: .DidFinishProfileImageUpdate, object: nil, userInfo: userInfo)
             }.disposed(by: disposeBag)
         
+        zoomView
+            .rx.tap
+            .map { _ in CGFloat(1.0)}
+            .map { Reactor.Action.didTapZoomButton($0)}
+            .bind(to: reactor.action)
+            .disposed(by: disposeBag)
+        
+        reactor.pulse(\.$zoomScale)
+            .withUnretained(self)
+            .observe(on: MainScheduler.instance)
+            .bind(onNext: {
+                guard let currentCamera = $0.0.isToggle ? $0.0.frontCamera : $0.0.backCamera else { return }
+                $0.0.transitionZoomImageScale(owner: $0.0, scale: $0.1, camera: currentCamera)
+            }).disposed(by: disposeBag)
+        
+        reactor.pulse(\.$pinchZoomScale)
+            .withUnretained(self)
+            .bind(onNext: {
+                guard let currentCamera = $0.0.isToggle ? $0.0.frontCamera : $0.0.backCamera else { return }
+                $0.0.transitionPinchImageScale(owner: $0.0, scale: $0.1, camera: currentCamera)
+            }).disposed(by: disposeBag)
+        
+        reactor.pulse(\.$zoomScale)
+            .map { $0 == 2.0 ? DesignSystemAsset.zoomout.image : DesignSystemAsset.zoomin.image }
+            .observe(on: MainScheduler.instance)
+            .withUnretained(self)
+            .bind(onNext: { $0.0.zoomView.setBackgroundImage($0.1, for: .normal) })
+            .disposed(by: disposeBag)
+        
+        reactor.pulse(\.$pinchZoomScale)
+            .map { $0 == 10.0 ? DesignSystemAsset.zoomout.image : DesignSystemAsset.zoomin.image }
+            .observe(on: MainScheduler.instance)
+            .withUnretained(self)
+            .bind(onNext: { $0.0.zoomView.setBackgroundImage($0.1, for: .normal) })
+            .disposed(by: disposeBag)
         
         reactor.state
             .map { ($0.accountImage, $0.profileImageURLEntity, $0.memberId)}
@@ -322,12 +357,10 @@ public final class CameraViewController: BaseViewController<CameraViewReactor> {
                 
         cameraView.rx
             .pinchGesture
-            .withUnretained(self)
-            .observe(on: MainScheduler.instance)
-            .bind(onNext: {
-                guard let currentCamera = $0.0.isToggle ? $0.0.frontCamera : $0.0.backCamera else { return }
-                $0.0.transitionImageScale(owner: $0.0, gesture: $0.1, camera: currentCamera)
-            }).disposed(by: disposeBag)
+            .map { $0.scale }
+            .map { Reactor.Action.dragPreviewLayer($0)}
+            .bind(to: reactor.action)
+            .disposed(by: disposeBag)
 
         
         toggleButton
@@ -529,25 +562,22 @@ extension CameraViewController: AVCapturePhotoCaptureDelegate {
         self.navigationController?.popViewController(animated: true)
     }
     
-    private func transitionImageScale(owner: CameraViewController, gesture: UIPinchGestureRecognizer, camera: AVCaptureDevice) {
-        
-        switch gesture.state {
-            
-        case .began:
-            owner.initialScale = camera.videoZoomFactor
-            
-        case .changed:
-            let minAvailableZoomScale = camera.minAvailableVideoZoomFactor
-            let maxAvailableZoomScale = camera.maxAvailableVideoZoomFactor
-            let availableZoomScaleRange = minAvailableZoomScale...maxAvailableZoomScale
-            let resolvedZoomScaleRange = zoomScaleRange.clamped(to: availableZoomScaleRange)
-
-            let resolvedScale = max(resolvedZoomScaleRange.lowerBound, min(gesture.scale * initialScale, resolvedZoomScaleRange.upperBound))
-            setupImageScale(owner: owner, scale: resolvedScale, camera: camera)
-        default:
-            return
-            
-        }
+    private func transitionZoomImageScale(owner: CameraViewController, scale: CGFloat, camera: AVCaptureDevice) {
+        let minAvailableZoomScale: CGFloat = 1.0
+        let maxAvailableZoomScale: CGFloat = 2.0
+        let availableZoomScaleRange = minAvailableZoomScale...maxAvailableZoomScale
+        let resolvedZoomScaleRange = zoomScaleRange.clamped(to: availableZoomScaleRange)
+        let resolvedScale = max(resolvedZoomScaleRange.lowerBound, min(scale, resolvedZoomScaleRange.upperBound))
+        setupImageScale(owner: owner, scale: resolvedScale, camera: camera)
+    }
+    
+    private func transitionPinchImageScale(owner: CameraViewController, scale: CGFloat, camera: AVCaptureDevice) {
+        let minAvailableZoomScale: CGFloat = 1.0
+        let maxAvailableZoomScale: CGFloat = 10.0
+        let availableZoomScaleRange = minAvailableZoomScale...maxAvailableZoomScale
+        let resolvedZoomScaleRange = zoomScaleRange.clamped(to: availableZoomScaleRange)
+        let resolvedScale = max(resolvedZoomScaleRange.lowerBound, min(scale, resolvedZoomScaleRange.upperBound))
+        setupImageScale(owner: owner, scale: resolvedScale, camera: camera)
     }
     
     private func showPermissionAlertController() {
diff --git a/14th-team5-iOS/App/Sources/Presentation/Camera/Reactor/CameraViewReactor.swift b/14th-team5-iOS/App/Sources/Presentation/Camera/Reactor/CameraViewReactor.swift
@@ -27,7 +27,9 @@ public final class CameraViewReactor: Reactor {
         case didTapFlashButton
         case didTapToggleButton
         case didTapShutterButton(Data)
+        case didTapZoomButton(CGFloat)
         case didTapRealEmojiPad(IndexPath)
+        case dragPreviewLayer(CGFloat)
     }
     
     public enum Mutation {
@@ -36,6 +38,8 @@ public final class CameraViewReactor: Reactor {
         case setFlashMode(Bool)
         case uploadImageToS3(Bool)
         case setAccountProfileData(Data)
+        case setPinchZoomScale(CGFloat)
+        case setZoomScale(CGFloat)
         case setProfileImageURLResponse(CameraDisplayImageResponse?)
         case setProfileMemberResponse(ProfileMemberResponse?)
         case setRealEmojiImageURLResponse(CameraRealEmojiPreSignedResponse?)
@@ -62,6 +66,8 @@ public final class CameraViewReactor: Reactor {
         @Pulse var realEmojiSection: [EmojiSectionModel]
         @Pulse var reloadRealEmojiImage: [String: URL?]
         @Pulse var reloadRealEmojiId: [String: String]
+        @Pulse var zoomScale: CGFloat
+        @Pulse var pinchZoomScale: CGFloat
         var updateEmojiImage: URL?
         var emojiType: String
         var selectedEmojiPadItem: String
@@ -94,6 +100,8 @@ public final class CameraViewReactor: Reactor {
             realEmojiSection: [.realEmoji([])],
             reloadRealEmojiImage: [:],
             reloadRealEmojiId: [:],
+            zoomScale: 1.0,
+            pinchZoomScale: 1.0,
             updateEmojiImage: nil,
             emojiType: "EMOJI_1",
             selectedEmojiPadItem: "",
@@ -116,6 +124,12 @@ public final class CameraViewReactor: Reactor {
             return cameraUseCase.executeToggleCameraPosition(self.currentState.isSwitchPosition).map { .setPosition($0) }
         case .didTapFlashButton:
             return cameraUseCase.executeToggleCameraFlash(self.currentState.isFlashMode).map { .setFlashMode($0) }
+        case let .didTapZoomButton(scale):
+            if self.currentState.zoomScale == 2.0 {
+                return .just(.setZoomScale(self.currentState.zoomScale - scale))
+            } else {
+                return .just(.setZoomScale(self.currentState.zoomScale + scale))
+            }
             
         case let .didTapShutterButton(fileData):
             return didTapShutterButtonMutation(imageData: fileData)
@@ -127,6 +141,14 @@ public final class CameraViewReactor: Reactor {
                 .just(.setRealEmojiPadItem(CameraRealEmojiItems.allCases[indexPath.row].rawValue)),
                 .just(.setRealEmojiType(CameraRealEmojiItems.allCases[indexPath.row].emojiType))
             )
+        case let .dragPreviewLayer(scale):
+            let minAvailableZoomScale: CGFloat = 1.0
+            let maxAvailableZoomScale: CGFloat = 10.0
+            let availableZoomScaleRange = minAvailableZoomScale...maxAvailableZoomScale
+            let zoomScaleRange: ClosedRange<CGFloat> = 1...10
+            let resolvedZoomScaleRange = zoomScaleRange.clamped(to: availableZoomScaleRange)
+            
+            return .just(.setPinchZoomScale(max(resolvedZoomScaleRange.lowerBound, min(scale  * self.currentState.pinchZoomScale, resolvedZoomScaleRange.upperBound))))
         }
         
     }
@@ -171,6 +193,10 @@ public final class CameraViewReactor: Reactor {
             newState.reloadRealEmojiImage = reloadRealEmojiImage
         case let .setRealEmojiId(reloadRealEmojiId):
             newState.reloadRealEmojiId = reloadRealEmojiId
+        case let .setZoomScale(zoomScale):
+            newState.zoomScale = zoomScale
+        case let .setPinchZoomScale(pinchZoomScale):
+            newState.pinchZoomScale = pinchZoomScale
         }
         
         return newState
diff --git a/14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/icons/zoomin.imageset/Contents.json b/14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/icons/zoomin.imageset/Contents.json
@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "zoom.svg",
+      "filename" : "zoomin.svg",
       "idiom" : "universal"
     }
   ],
diff --git a/14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/icons/zoomin.imageset/zoomin.svg b/14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/icons/zoomin.imageset/zoomin.svg
diff --git a/14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/icons/zoomout.imageset/Contents.json b/14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/icons/zoomout.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "zoomout.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/icons/zoomout.imageset/zoomout.svg b/14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/icons/zoomout.imageset/zoomout.svg
@@ -0,0 +1,5 @@
+<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="21.5" cy="21.5" r="21.5" fill="black" fill-opacity="0.3"/>
+<path d="M18.4821 13.8873C18.4821 13.3318 18.8808 12.9125 19.437 12.9125C19.9931 12.9125 20.4023 13.3423 20.4023 13.8873L20.4023 19.7049C20.4023 20.7741 19.7832 21.3926 18.7129 21.3926L12.8892 21.3926C12.3226 21.3926 11.9029 20.9943 11.9029 20.4282C11.9029 19.8622 12.3331 19.4743 12.8892 19.4743L13.7602 19.4743L17.4328 19.684L14.5262 16.9272L11.2838 13.6987C11.0949 13.51 11.0005 13.2584 11.0005 12.9754C11.0005 12.3884 11.4412 12.0005 12.0393 12.0005C12.2911 12.0005 12.522 12.0844 12.7004 12.2731L15.9322 15.5226L18.692 18.4261L18.4821 14.7678L18.4821 13.8873Z" fill="white"/>
+<path d="M23.9203 30.5052C23.9203 31.0608 23.5215 31.4801 22.9654 31.4801C22.4092 31.4801 22 31.0503 22 30.5052V24.6876C22 23.6184 22.6191 23 23.6894 23H29.5131C30.0797 23 30.4995 23.3983 30.4995 23.9644C30.4995 24.5304 30.0693 24.9182 29.5131 24.9182H28.6422L24.9696 24.7086L27.8762 27.4654L31.1186 30.6939C31.3075 30.8826 31.4019 31.1342 31.4019 31.4172C31.4019 32.0042 30.9612 32.392 30.3631 32.392C30.1112 32.392 29.8804 32.3082 29.702 32.1195L26.4701 28.87L23.7104 25.9665L23.9203 29.6247V30.5052Z" fill="white"/>
+</svg>

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"images" : [`
`3`	`3`	`{`
`4`		`- "filename" : "zoom.svg",`
	`4`	`+ "filename" : "zoomin.svg",`
`5`	`5`	`"idiom" : "universal"`
`6`	`6`	`}`
`7`	`7`	`],`