From 64b652175d0ee8149316256cc2e5dc05da9c4391 Mon Sep 17 00:00:00 2001
From: corykim0829 <corykim0829@gmail.com>
Date: Tue, 28 Apr 2020 02:34:54 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20UIPageViewController=EB=A5=BC=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EC=97=AC=20ThumbnailsPageViewContro?=
 =?UTF-8?q?ller=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 스크롤뷰에 containerView의 frame을 사용하여 ThumbnailsPageViewController를 subview로 추가
2. ThumbnailsPageViewController는 viewController를 page 전환해주기 때문에, 더비 VC를 랜덤 색상으로 제공된 썸네일 이미지 URL 개수에 맞게 생성하여 표시
3. Before, After 페이지 스와이핑이 잘 작동하도록 구현, firstIndex 메소드 사용

Issue: #38
---
 .../SideDishApp.xcodeproj/project.pbxproj     |  4 ++
 .../SideDishApp/Base.lproj/Main.storyboard    | 39 +++++++------
 .../DetailViewController.swift                | 17 ++++++
 .../ThumbnailsPageViewController.swift        | 58 +++++++++++++++++++
 4 files changed, 100 insertions(+), 18 deletions(-)
 create mode 100644 ios/SideDishApp/SideDishApp/ViewControllers/ThumbnailsPageViewController.swift

diff --git a/ios/SideDishApp/SideDishApp.xcodeproj/project.pbxproj b/ios/SideDishApp/SideDishApp.xcodeproj/project.pbxproj
index 7adb23e..b398072 100644
--- a/ios/SideDishApp/SideDishApp.xcodeproj/project.pbxproj
+++ b/ios/SideDishApp/SideDishApp.xcodeproj/project.pbxproj
@@ -34,6 +34,7 @@
 		38E0AF692452FBE600A26CB3 /* ProductList.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38E0AF682452FBE600A26CB3 /* ProductList.swift */; };
 		38E2FCD12456F4B700817780 /* DetailContainer.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38E2FCD02456F4B700817780 /* DetailContainer.swift */; };
 		38E2FCD32456F4E300817780 /* Detail.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38E2FCD22456F4E300817780 /* Detail.swift */; };
+		38E2FCD52457456400817780 /* ThumbnailsPageViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38E2FCD42457456400817780 /* ThumbnailsPageViewController.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -67,6 +68,7 @@
 		38E0AF682452FBE600A26CB3 /* ProductList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductList.swift; sourceTree = "<group>"; };
 		38E2FCD02456F4B700817780 /* DetailContainer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DetailContainer.swift; sourceTree = "<group>"; };
 		38E2FCD22456F4E300817780 /* Detail.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Detail.swift; sourceTree = "<group>"; };
+		38E2FCD42457456400817780 /* ThumbnailsPageViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ThumbnailsPageViewController.swift; sourceTree = "<group>"; };
 		F73413738BBF5BACBA69C851 /* Pods_SideDishApp.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_SideDishApp.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 /* End PBXFileReference section */
 
@@ -172,6 +174,7 @@
 			children = (
 				388C14AE244E936E003323F2 /* SideDishProductsViewController.swift */,
 				381D92F9245174C30067C07A /* DetailViewController.swift */,
+				38E2FCD42457456400817780 /* ThumbnailsPageViewController.swift */,
 			);
 			path = ViewControllers;
 			sourceTree = "<group>";
@@ -354,6 +357,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				38E2FCD52457456400817780 /* ThumbnailsPageViewController.swift in Sources */,
 				388C14AF244E936E003323F2 /* SideDishProductsViewController.swift in Sources */,
 				3868CC4F244F18E3008DEC81 /* OriginalPriceLabel.swift in Sources */,
 				38E2FCD32456F4E300817780 /* Detail.swift in Sources */,
diff --git a/ios/SideDishApp/SideDishApp/Base.lproj/Main.storyboard b/ios/SideDishApp/SideDishApp/Base.lproj/Main.storyboard
index 1faa5c5..7add063 100644
--- a/ios/SideDishApp/SideDishApp/Base.lproj/Main.storyboard
+++ b/ios/SideDishApp/SideDishApp/Base.lproj/Main.storyboard
@@ -162,22 +162,22 @@
                                 <rect key="frame" x="0.0" y="44" width="414" height="852"/>
                                 <subviews>
                                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="IcD-Vi-BkJ">
-                                        <rect key="frame" x="0.0" y="0.0" width="414" height="2633.5"/>
+                                        <rect key="frame" x="0.0" y="0.0" width="414" height="4454"/>
                                         <subviews>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Title" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="pON-By-ZtW">
-                                                <rect key="frame" x="4" y="378.5" width="406" height="21.5"/>
+                                                <rect key="frame" x="4" y="434" width="406" height="21.5"/>
                                                 <fontDescription key="fontDescription" type="boldSystem" pointSize="18"/>
                                                 <nil key="textColor"/>
                                                 <nil key="highlightedColor"/>
                                             </label>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="description" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="jBF-uC-Te4">
-                                                <rect key="frame" x="4" y="404" width="406" height="20.5"/>
+                                                <rect key="frame" x="4" y="459.5" width="406" height="20.5"/>
                                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                 <color key="textColor" name="subtitle-gray"/>
                                                 <nil key="highlightedColor"/>
                                             </label>
                                             <stackView opaque="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="GFu-Sf-wT3" userLabel="priceLabelsStackView">
-                                                <rect key="frame" x="156" y="432.5" width="102" height="20.5"/>
+                                                <rect key="frame" x="156" y="488" width="102" height="20.5"/>
                                                 <subviews>
                                                     <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="9,000" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="uvk-9T-IrV">
                                                         <rect key="frame" x="0.0" y="0.0" width="45" height="20.5"/>
@@ -194,14 +194,14 @@
                                                 </subviews>
                                             </stackView>
                                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="lOs-Vc-jyC">
-                                                <rect key="frame" x="0.0" y="469" width="414" height="8"/>
+                                                <rect key="frame" x="0.0" y="524.5" width="414" height="8"/>
                                                 <color key="backgroundColor" name="detail-boundary-view"/>
                                                 <constraints>
                                                     <constraint firstAttribute="height" constant="8" id="6vF-9R-Lgo"/>
                                                 </constraints>
                                             </view>
                                             <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="5" translatesAutoresizingMaskIntoConstraints="NO" id="XR0-pm-cLi">
-                                                <rect key="frame" x="16" y="501" width="52" height="64"/>
+                                                <rect key="frame" x="16" y="556.5" width="52" height="64"/>
                                                 <subviews>
                                                     <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="750" verticalHuggingPriority="251" horizontalCompressionResistancePriority="1000" text="적립금" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="a6x-Ol-w7V">
                                                         <rect key="frame" x="0.0" y="0.0" width="52" height="18"/>
@@ -224,57 +224,60 @@
                                                 </subviews>
                                             </stackView>
                                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="kf6-Po-Aof">
-                                                <rect key="frame" x="0.0" y="589" width="414" height="8"/>
+                                                <rect key="frame" x="0.0" y="644.5" width="414" height="8"/>
                                                 <color key="backgroundColor" name="detail-boundary-view"/>
                                                 <constraints>
                                                     <constraint firstAttribute="height" constant="8" id="28p-DI-cGP"/>
                                                 </constraints>
                                             </view>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="이렇게 만나요" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="I1X-nJ-a80">
-                                                <rect key="frame" x="163.5" y="621" width="87" height="19.5"/>
+                                                <rect key="frame" x="163.5" y="676.5" width="87" height="19.5"/>
                                                 <fontDescription key="fontDescription" type="boldSystem" pointSize="16"/>
                                                 <nil key="textColor"/>
                                                 <nil key="highlightedColor"/>
                                             </label>
                                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="jm3-Gn-qq7">
-                                                <rect key="frame" x="0.0" y="0.0" width="414" height="358.5"/>
+                                                <rect key="frame" x="0.0" y="0.0" width="414" height="414"/>
                                                 <color key="backgroundColor" systemColor="systemOrangeColor" red="1" green="0.58431372550000005" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                                <constraints>
+                                                    <constraint firstAttribute="width" secondItem="jm3-Gn-qq7" secondAttribute="height" multiplier="1:1" id="yTQ-HX-h8G"/>
+                                                </constraints>
                                             </view>
                                             <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="VKA-Xn-BtL" userLabel="imageStackView">
-                                                <rect key="frame" x="0.0" y="656.5" width="414" height="1765"/>
+                                                <rect key="frame" x="0.0" y="712" width="414" height="3530"/>
                                                 <subviews>
                                                     <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="test1" translatesAutoresizingMaskIntoConstraints="NO" id="G2b-19-pjt">
-                                                        <rect key="frame" x="0.0" y="0.0" width="414" height="324"/>
+                                                        <rect key="frame" x="0.0" y="0.0" width="414" height="648"/>
                                                     </imageView>
                                                     <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="test2" translatesAutoresizingMaskIntoConstraints="NO" id="Ha6-Qg-gJB">
-                                                        <rect key="frame" x="0.0" y="324" width="414" height="720.5"/>
+                                                        <rect key="frame" x="0.0" y="648" width="414" height="1441"/>
                                                     </imageView>
                                                     <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="test2" translatesAutoresizingMaskIntoConstraints="NO" id="b56-85-mef">
-                                                        <rect key="frame" x="0.0" y="1044.5" width="414" height="720.5"/>
+                                                        <rect key="frame" x="0.0" y="2089" width="414" height="1441"/>
                                                     </imageView>
                                                 </subviews>
                                             </stackView>
                                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="rrn-1c-IuP" userLabel="bottomView">
-                                                <rect key="frame" x="0.0" y="2445.5" width="414" height="100"/>
+                                                <rect key="frame" x="0.0" y="4266" width="414" height="100"/>
                                                 <color key="backgroundColor" name="detail-boundary-view"/>
                                                 <constraints>
                                                     <constraint firstAttribute="height" constant="100" id="hxl-FD-Pr0"/>
                                                 </constraints>
                                             </view>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="적립금" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="CHt-zc-XEf">
-                                                <rect key="frame" x="80" y="501.5" width="318" height="17"/>
+                                                <rect key="frame" x="80" y="557" width="318" height="17"/>
                                                 <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                                 <color key="textColor" name="subtitle-gray"/>
                                                 <nil key="highlightedColor"/>
                                             </label>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="배송비" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Qey-Ax-Oni">
-                                                <rect key="frame" x="80" y="524.5" width="318" height="17"/>
+                                                <rect key="frame" x="80" y="580" width="318" height="17"/>
                                                 <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                                 <color key="textColor" name="subtitle-gray"/>
                                                 <nil key="highlightedColor"/>
                                             </label>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="배송정보" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xCu-2D-naZ">
-                                                <rect key="frame" x="80" y="548" width="318" height="17"/>
+                                                <rect key="frame" x="80" y="603.5" width="318" height="17"/>
                                                 <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                                 <color key="textColor" name="subtitle-gray"/>
                                                 <nil key="highlightedColor"/>
@@ -366,7 +369,6 @@
                             <constraint firstItem="y0Z-HS-arB" firstAttribute="trailing" secondItem="pBy-LX-l1h" secondAttribute="trailing" id="ikQ-JO-SQI"/>
                             <constraint firstAttribute="bottom" secondItem="y0Z-HS-arB" secondAttribute="bottom" id="jzm-W1-S0j"/>
                             <constraint firstItem="y0Z-HS-arB" firstAttribute="top" secondItem="pBy-LX-l1h" secondAttribute="top" id="p6v-LS-RYM"/>
-                            <constraint firstItem="jm3-Gn-qq7" firstAttribute="height" secondItem="V15-Yv-HQC" secondAttribute="height" multiplier="0.4" id="pqz-d0-dBL"/>
                             <constraint firstItem="tsz-gD-jVY" firstAttribute="leading" secondItem="pBy-LX-l1h" secondAttribute="leading" id="rqV-2l-G6M"/>
                         </constraints>
                         <viewLayoutGuide key="safeArea" id="pBy-LX-l1h"/>
@@ -379,6 +381,7 @@
                         <outlet property="gradientLayerContainerView" destination="tsz-gD-jVY" id="Nt1-Gg-aNy"/>
                         <outlet property="pointLabel" destination="CHt-zc-XEf" id="r2v-H9-VWJ"/>
                         <outlet property="priceLabelsStackView" destination="GFu-Sf-wT3" id="keQ-bu-Q49"/>
+                        <outlet property="scrollView" destination="y0Z-HS-arB" id="6MG-AY-1df"/>
                         <outlet property="titleLabel" destination="pON-By-ZtW" id="Uax-nT-meh"/>
                     </connections>
                 </viewController>
diff --git a/ios/SideDishApp/SideDishApp/ViewControllers/DetailViewController.swift b/ios/SideDishApp/SideDishApp/ViewControllers/DetailViewController.swift
index f9c11f8..438779f 100644
--- a/ios/SideDishApp/SideDishApp/ViewControllers/DetailViewController.swift
+++ b/ios/SideDishApp/SideDishApp/ViewControllers/DetailViewController.swift
@@ -12,6 +12,7 @@ class DetailViewController: UIViewController {
 
     static let identifier = "DetailViewController"
     
+    @IBOutlet weak var scrollView: UIScrollView!
     @IBOutlet weak var titleLabel: UILabel!
     @IBOutlet weak var descriptionLabel: UILabel!
     @IBOutlet weak var priceLabelsStackView: UIStackView!
@@ -22,6 +23,8 @@ class DetailViewController: UIViewController {
     
     @IBOutlet weak var gradientLayerContainerView: UIView!
     
+    let thumbnailPageViewController = ThumbnailsPageViewController()
+    
     private let backButtonColor: UIColor? = UIColor(named: "darkGray-white")
     private let defaultBackgroundColor: UIColor? = UIColor(named: "default-bg")
     private let clearColor: UIColor? = UIColor(named: "detail-clear")
@@ -29,11 +32,25 @@ class DetailViewController: UIViewController {
     override func viewDidLoad() {
         super.viewDidLoad()
 
+        configureThumbnailPageViewController()
         configureNavigationBar()
         configureGradientBackgroundView()
     }
     
+    override func viewWillLayoutSubviews() {
+        super.viewWillLayoutSubviews()
+        
+        let thumbnailPageView = thumbnailPageViewController.view!
+        thumbnailPageView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.width)
+    }
+    
+    private func configureThumbnailPageViewController() {
+        let thumbnailPageView = thumbnailPageViewController.view!
+        scrollView.addSubview(thumbnailPageView)
+    }
+    
     func configureDetailViewController(title: String, with detail: Detail) {
+        thumbnailPageViewController.configureImageURLs(detail.thumbnailImageURLs)
         titleLabel.text = title
         descriptionLabel.text = detail.description
         pointLabel.text = detail.point
diff --git a/ios/SideDishApp/SideDishApp/ViewControllers/ThumbnailsPageViewController.swift b/ios/SideDishApp/SideDishApp/ViewControllers/ThumbnailsPageViewController.swift
new file mode 100644
index 0000000..3ccf219
--- /dev/null
+++ b/ios/SideDishApp/SideDishApp/ViewControllers/ThumbnailsPageViewController.swift
@@ -0,0 +1,58 @@
+//
+//  ThumbnailsPageViewController.swift
+//  SideDishApp
+//
+//  Created by Cory Kim on 2020/04/28.
+//  Copyright © 2020 corykim0829. All rights reserved.
+//
+
+import UIKit
+
+class ThumbnailsPageViewController: UIPageViewController {
+
+    var controllers = [UIViewController]()
+    
+    private var imageURLs: [String]! {
+        didSet {
+            imageURLs.forEach { (_) in
+                let vc = UIViewController()
+                vc.view.backgroundColor = UIColor(displayP3Red: CGFloat.random(in: 0.0...1.0), green: CGFloat.random(in: 0.0...1.0), blue: CGFloat.random(in: 0.0...1.0), alpha: 1)
+                controllers.append(vc)
+            }
+            setViewControllers([controllers.first!], direction: .forward, animated: false)
+        }
+    }
+    
+    init() {
+        super.init(transitionStyle: .scroll, navigationOrientation: .horizontal)
+    }
+    
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+    }
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        dataSource = self
+        view.backgroundColor = .green
+    }
+    
+    func configureImageURLs(_ imageURLs: [String]) {
+        self.imageURLs = imageURLs
+    }
+}
+
+extension ThumbnailsPageViewController: UIPageViewControllerDataSource {
+    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
+        let index = controllers.firstIndex(where: { $0 == viewController }) ?? 0
+        if index == 0 { return nil }
+        return controllers[index - 1]
+    }
+    
+    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
+        let index = controllers.firstIndex(where: { $0 == viewController }) ?? 0
+        if index == controllers.count - 1 { return nil }
+        return controllers[index + 1]
+    }
+}