Merge pull request #26 from boostcampwm-2024/feat/#20-create-edit-photo-scrollview

[FEAT/#20] 편집 화면에서 사용될 공통 ScrollView를 구현함

Author: 0Hooni

PhotoGether/PresentationLayer/DesignSystem/DesignSystem/Resource/DesignSystem.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

PhotoGether/PresentationLayer/DesignSystem/DesignSystem/Resource/DesignSystem.xcassets/sampleImage.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "sampleImage.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "sampleImage@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "sampleImage@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

PhotoGether/PresentationLayer/DesignSystem/DesignSystem/Resource/DesignSystem.xcassets/sampleImage.imageset/sampleImage.png

@@ -5,9 +5,9 @@ public enum PTGImage {
     case stickerIcon
     case chevronLeftWhite
     case chevronRightBlack
+    case sampleImage
     case temp1, temp2, temp3, temp4
 
-    
     public var image: UIImage {
         switch self {
         case .frameIcon:
@@ -18,6 +18,8 @@ public enum PTGImage {
             return UIImage(resource: .chevronLeftWhite)
         case .chevronRightBlack:
             return UIImage(resource: .chevronRightBlack)
+        case .sampleImage:
+            return UIImage(resource: .sample)
         case .temp1:
             return UIImage(resource: .temp1)
         case .temp2:

PhotoGether/PresentationLayer/DesignSystem/DesignSystem/Resource/DesignSystem.xcassets/sampleImage.imageset/sampleImage@2x.png

@@ -10,6 +10,7 @@
 		053DC8512CE32A8800DC9F35 /* EditPhotoHostBottomView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 053DC8502CE32A8800DC9F35 /* EditPhotoHostBottomView.swift */; };
 		053DC8532CE32AE900DC9F35 /* DesignSystem.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 053DC8522CE32AE900DC9F35 /* DesignSystem.framework */; };
 		053DC8542CE32AE900DC9F35 /* DesignSystem.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 053DC8522CE32AE900DC9F35 /* DesignSystem.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
+		05C297562CE391FF00108687 /* CanvasScrollView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 05C297552CE391FF00108687 /* CanvasScrollView.swift */; };
 		60B03BDF2CE3810200A7C748 /* FrameImageGenerator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 60B03BDE2CE3810200A7C748 /* FrameImageGenerator.swift */; };
 		60B03BE22CE43FAF00A7C748 /* FrameImageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 60B03BE12CE43FAF00A7C748 /* FrameImageView.swift */; };
 		60B03BE42CE43FE200A7C748 /* DefaultFrameImageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 60B03BE32CE43FE200A7C748 /* DefaultFrameImageView.swift */; };
@@ -73,6 +74,8 @@
 /* Begin PBXFileReference section */
 		053DC8502CE32A8800DC9F35 /* EditPhotoHostBottomView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EditPhotoHostBottomView.swift; sourceTree = "<group>"; };
 		053DC8522CE32AE900DC9F35 /* DesignSystem.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; path = DesignSystem.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+
+		05C297552CE391FF00108687 /* CanvasScrollView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CanvasScrollView.swift; sourceTree = "<group>"; };
 		60B03BDE2CE3810200A7C748 /* FrameImageGenerator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FrameImageGenerator.swift; sourceTree = "<group>"; };
 		60B03BE12CE43FAF00A7C748 /* FrameImageView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FrameImageView.swift; sourceTree = "<group>"; };
 		60B03BE32CE43FE200A7C748 /* DefaultFrameImageView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DefaultFrameImageView.swift; sourceTree = "<group>"; };
@@ -213,8 +216,9 @@
 		60CB82A52CDB514F00873DD6 /* Source */ = {
 			isa = PBXGroup;
 			children = (
-				60CB82A42CDB514F00873DD6 /* EditPhotoRoomHostViewController.swift */,
+				05C297552CE391FF00108687 /* CanvasScrollView.swift */,
 				053DC8502CE32A8800DC9F35 /* EditPhotoHostBottomView.swift */,
+				60CB82A42CDB514F00873DD6 /* EditPhotoRoomHostViewController.swift */,
 				60B03BE02CE43F8200A7C748 /* FrameImageGenerator */,
 			);
 			path = Source;
@@ -349,6 +353,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				05C297562CE391FF00108687 /* CanvasScrollView.swift in Sources */,
 				60B03BED2CE47D8400A7C748 /* FrameView.swift in Sources */,
 				60B03BE22CE43FAF00A7C748 /* FrameImageView.swift in Sources */,
 				053DC8512CE32A8800DC9F35 /* EditPhotoHostBottomView.swift in Sources */,

PhotoGether/PresentationLayer/DesignSystem/DesignSystem/Resource/DesignSystem.xcassets/sampleImage.imageset/sampleImage@3x.png

@@ -0,0 +1,78 @@
+import UIKit
+import DesignSystem
+
+final class CanvasScrollView: UIScrollView {
+    private let image = PTGImage.sampleImage.image
+    let imageView = UIImageView()
+    
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        
+        delegate = self
+        addViews()
+        setupConstraints()
+        configureUI()
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    private func addViews() {
+        [imageView].forEach {
+            addSubview($0)
+        }
+    }
+    
+    private func setupConstraints() {
+        imageView.snp.makeConstraints {
+            $0.width.equalTo(image.size.width)
+            $0.height.equalTo(image.size.height)
+        }
+    }
+    
+    private func configureUI() {
+        isScrollEnabled = true
+        maximumZoomScale = 3
+        bouncesZoom = true
+        showsHorizontalScrollIndicator = false
+        showsVerticalScrollIndicator = false
+        
+        imageView.image = image
+        imageView.contentMode = .scaleAspectFit
+    }
+    
+    func contentCentering() {
+        let scrollView = self
+        let contentView = imageView
+
+        let scrollViewSize = scrollView.bounds.size
+        let contentSize = contentView.frame.size
+
+        let horizontalInset = max((scrollViewSize.width - contentSize.width) / 2, 0)
+        let verticalInset = max((scrollViewSize.height - contentSize.height) / 2, 0)
+
+        contentInset = UIEdgeInsets(
+            top: verticalInset,
+            left: horizontalInset,
+            bottom: verticalInset,
+            right: horizontalInset
+        )
+    }
+    
+    func setupZoomScale() {
+        let widthBaseScale = frame.width / image.size.width
+        let heightBaseScale = frame.height / image.size.height
+        let calculatedZoomScale = min(widthBaseScale, heightBaseScale)
+        
+        zoomScale = calculatedZoomScale
+        minimumZoomScale = calculatedZoomScale
+    }
+}
+
+extension CanvasScrollView: UIScrollViewDelegate {
+    public func viewForZooming(in scrollView: UIScrollView) -> UIView? {
+        return imageView
+    }
+}

PhotoGether/PresentationLayer/DesignSystem/DesignSystem/Source/PTGImage.swift

@@ -2,6 +2,7 @@ import UIKit
 import DesignSystem
 
 final class EditPhotoHostBottomView: UIView {
+    // TODO: 추후 internal or tapPublisher만 참조할 수 있도록
     private let stackView = UIStackView()
     private let frameButton = PTGGrayButton(type: .frame)
     private let nextButton = UIButton()

PhotoGether/PresentationLayer/EditPhotoRoomFeature/EditPhotoRoomFeature.xcodeproj/project.pbxproj

@@ -1,11 +1,10 @@
 import UIKit
 import BaseFeature
 
-public class EditPhotoRoomHostViewController: BaseViewController {
+public class EditPhotoRoomHostViewController: BaseViewController, UIScrollViewDelegate {
     private let bottomView = EditPhotoHostBottomView()
     private let navigationView = UIView()
-    private let canvasView = UIScrollView()
-    private let contentView = UIView()
+    private let canvasScrollView = CanvasScrollView()
 
     public init() {
         super.init(nibName: nil, bundle: nil)
@@ -20,16 +19,21 @@ public class EditPhotoRoomHostViewController: BaseViewController {
 
         addViews()
         setupConstraints()
-        // configureUI()
+        configureUI()
         temp()
     }
 
+    public override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+        
+        canvasScrollView.setupZoomScale()
+        canvasScrollView.contentCentering()
+    }
+    
     public override func addViews() {
-        [navigationView, canvasView, bottomView].forEach {
+        [navigationView, canvasScrollView, bottomView].forEach {
             view.addSubview($0)
         }
-        
-        canvasView.addSubview(contentView)
     }
 
     public override func setupConstraints() {
@@ -39,18 +43,12 @@ public class EditPhotoRoomHostViewController: BaseViewController {
             $0.height.equalTo(48)
         }
 
-        canvasView.snp.makeConstraints {
+        canvasScrollView.snp.makeConstraints {
             $0.top.equalTo(navigationView.snp.bottom)
             $0.horizontalEdges.equalToSuperview()
             $0.bottom.equalTo(bottomView.snp.top)
         }
 
-        contentView.snp.makeConstraints {
-            $0.width.equalTo(1000)
-            $0.height.equalTo(1000)
-            $0.center.equalToSuperview()
-        }
-        
         bottomView.snp.makeConstraints {
             $0.bottom.equalTo(view.safeAreaLayoutGuide)
             $0.horizontalEdges.equalToSuperview()
@@ -68,8 +66,6 @@ public class EditPhotoRoomHostViewController: BaseViewController {
 
         navigationView.backgroundColor = .yellow
         bottomView.backgroundColor = .yellow
-        
-        canvasView.backgroundColor = .red
-        contentView.backgroundColor = .blue
+        canvasScrollView.backgroundColor = .red
     }
 }