[Fix] Ticketing View를 로컬 데이터가 아닌 JSON으로 가져온 데이터를 표시하도록 수정

AsyncSwift.xcodeproj/project.pbxproj

@@ -31,6 +31,7 @@
 		C6F7798F28C9D1BF0036773B /* SessionView.swift in Sources */ = {isa = PBXBuildFile; fileRef = C6F7798E28C9D1BF0036773B /* SessionView.swift */; };
 		C6F7799128C9E5DD0036773B /* EventDetailView.swift in Sources */ = {isa = PBXBuildFile; fileRef = C6F7799028C9E5DD0036773B /* EventDetailView.swift */; };
 		E9171F0028D15426002FAF52 /* TicketingView+Observed.swift in Sources */ = {isa = PBXBuildFile; fileRef = E9171EFF28D15426002FAF52 /* TicketingView+Observed.swift */; };
+		E94F92C728D2505100D9E759 /* Ticketing.swift in Sources */ = {isa = PBXBuildFile; fileRef = E94F92C628D2505100D9E759 /* Ticketing.swift */; };
 		E9E2A4D828CEC5680016AEFF /* WebView.swift in Sources */ = {isa = PBXBuildFile; fileRef = E9E2A4D728CEC5680016AEFF /* WebView.swift */; };
 /* End PBXBuildFile section */
 
@@ -60,6 +61,7 @@
 		C6F7798E28C9D1BF0036773B /* SessionView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SessionView.swift; sourceTree = "<group>"; };
 		C6F7799028C9E5DD0036773B /* EventDetailView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EventDetailView.swift; sourceTree = "<group>"; };
 		E9171EFF28D15426002FAF52 /* TicketingView+Observed.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "TicketingView+Observed.swift"; sourceTree = "<group>"; };
+		E94F92C628D2505100D9E759 /* Ticketing.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Ticketing.swift; sourceTree = "<group>"; };
 		E9E2A4D728CEC5680016AEFF /* WebView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = WebView.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -147,6 +149,7 @@
 			children = (
 				C66C68D228D1B00A0091F960 /* EventModel.swift */,
 				C66C68D428D1B0130091F960 /* SessionModel.swift */,
+				E94F92C628D2505100D9E759 /* Ticketing.swift */,
 			);
 			path = Models;
 			sourceTree = "<group>";
@@ -243,6 +246,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				C68DE94C28C76F3200CA4CC8 /* AppDelegate.swift in Sources */,
+				E94F92C728D2505100D9E759 /* Ticketing.swift in Sources */,
 				C66DAD5028CF478700195DEB /* SessionView+Observed.swift in Sources */,
 				C6E744A028CA557100B7B2BD /* Color+.swift in Sources */,
 				C68DE95128C77DDA00CA4CC8 /* TicketingView.swift in Sources */,

AsyncSwift/Assets.xcassets/Colors/skeletonBackground.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "0.920",
+          "blue" : "0xEA",
+          "green" : "0xE5",
+          "red" : "0xE5"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

AsyncSwift/Extensions/Color+.swift

@@ -12,4 +12,5 @@ extension Color {
     static let seminarOrange = Color("seminarOrange")
     static let dividerForeground = Color("dividerForeground")
     static let speakerBackground = Color("speakerBackground")
+    static let skeletonBackground = Color("skeletonBackground")
 }

AsyncSwift/Models/Ticketing.swift

@@ -0,0 +1,50 @@
+//
+//  Ticketing.swift
+//  AsyncSwift
+//
+//  Created by Eunyeong Kim on 2022/09/15.
+//
+
+import SwiftUI
+
+struct Ticketing: Decodable {
+    let currentTicket: CurrentTicket?
+    let upcomingEvent: UpcomingEvent?
+
+    struct CurrentTicket: Decodable {
+        let ticketingImageURL: String
+        let ticketingURL: String
+    }
+
+    struct UpcomingEvent: Decodable {
+        let headerTitle: String
+        let title: String
+        let subscription: String
+        private let gradientStartColor: RGBColor
+        private let gradientEndColor: RGBColor
+
+        var backgroundGradientStartColor: Color {
+            makeColor(from: gradientStartColor)
+        }
+
+        var backgroundGradientEndColor: Color {
+            makeColor(from: gradientEndColor)
+        }
+
+        private func makeColor(from rgbColor: RGBColor) -> Color {
+            Color(
+                red: rgbColor.red / 255.0,
+                green: rgbColor.green / 255.0,
+                blue: rgbColor.blue / 255.0,
+                opacity: rgbColor.opacity / 100.0
+            )
+        }
+
+        struct RGBColor: Decodable {
+            let red: Double
+            let green: Double
+            let blue: Double
+            let opacity: Double
+        }
+    }
+}

AsyncSwift/Observed/TicketingView+Observed.swift

@@ -6,13 +6,43 @@
 //
 
 import Combine
+import Foundation
 
 extension TicketingView {
-
     final class Observed: ObservableObject {
+        @Published var ticketing: Ticketing?
+
         @Published var isActivatedWebViewNavigationLink = false
 
-        let upcomingEventURL = "https://www.eventbrite.com/e/asyncswift-seminar-002-tickets-408509251167"
+        var isNeedToShowTicketingView: Bool { ticketing?.currentTicket?.ticketingImageURL != nil }
+        var isTicketingLinkDisabled: Bool { ticketing?.currentTicket?.ticketingURL == nil }
+
+        func onAppear() {
+            guard
+                let url = URL(string: "https://raw.githubusercontent.com/Async-Swift/jsonstorage/main/ticketing.json")
+            else { return }
+
+
+            let request = URLRequest(url: url)
+            let dataTask = URLSession.shared.dataTask(with: request) { data, response, _ in
+               guard
+                   let response = response as? HTTPURLResponse,
+                   response.statusCode == 200,
+                   let data = data
+               else { return }
+
+               DispatchQueue.main.async { [weak self] in
+                   do {
+                       let ticketing = try JSONDecoder().decode(Ticketing.self, from: data)
+                       self?.ticketing = ticketing
+                   } catch {
+                       self?.ticketing = nil
+                   }
+               }
+            }
+
+            dataTask.resume()
+        }
 
         func didTappedTicketingButton() {
             isActivatedWebViewNavigationLink = true

AsyncSwift/Views/TicketingView.swift

@@ -10,32 +10,105 @@ import SwiftUI
 struct TicketingView: View {
     @StateObject private var observed = Observed()
 
+    private let shadowColor = Color(.sRGB, red: 0, green: 0, blue: 0, opacity: 0.15)
+    private let corenrRadius: CGFloat = 8.0
+
 	var body: some View {
 		NavigationView {
 			ScrollView {
 				VStack(spacing: 30) {
-                    NavigationLink(
-                        isActive: $observed.isActivatedWebViewNavigationLink) {
-                            WebView(url: observed.upcomingEventURL)
-                        } label: {
-                            Image("Seminar002Ticket")
-                                .resizable()
-                                .aspectRatio(contentMode: .fit)
-                                .shadow(color: Color(.sRGB, red: 0, green: 0, blue: 0, opacity: 0.15), radius: 20, x: 0, y: 4)
-                        }
-
-                    Image("UpcomingConference001")
-                        .resizable()
-                        .aspectRatio(contentMode: .fit)
+                    if observed.isNeedToShowTicketingView {
+                        ticketingView
+                    }
+
+                    if let upcomingEvent = observed.ticketing?.upcomingEvent {
+                        makeUpcomingEventView(from: upcomingEvent)
+                    } else {
+                        skeletonView
+                            .aspectRatio(2.75, contentMode: .fill)
+                            .cornerRadius(corenrRadius)
+                    }
                 }
-                .aspectRatio(contentMode: .fit)
                 .padding(30)
 
-			}
-				.navigationTitle("Ticketing")
-		} // NavigationView
-	} // body
-} // View
+            }
+            .navigationTitle("Ticketing")
+        }.onAppear {
+            observed.onAppear()
+        }
+    }
+}
+
+private extension TicketingView {
+    var skeletonView: some View {
+        LinearGradient(
+            colors: [.skeletonBackground, .white],
+            startPoint: .topLeading,
+            endPoint: .bottomTrailing
+        )
+        .animation(.linear(duration: 3.0), value: 1.0)
+    }
+
+    var ticketingView: some View {
+        NavigationLink(
+            isActive: $observed.isActivatedWebViewNavigationLink
+        ) {
+            if let upcomingEventURL = observed.ticketing?.currentTicket?.ticketingURL {
+                WebView(url: upcomingEventURL)
+            }
+        } label: {
+            AsyncImage(
+                url: URL(string: observed.ticketing?.currentTicket?.ticketingImageURL ?? ""),
+                content: { image in
+                    image
+                        .resizable()
+                        .aspectRatio(contentMode: .fill)
+                        .transition(AnyTransition.opacity.animation(.easeInOut))
+                },
+                placeholder: {
+                    skeletonView
+                        .aspectRatio(0.85, contentMode: .fill)
+                }
+            )
+            .cornerRadius(corenrRadius)
+            .shadow(color: shadowColor, radius: 20, x: 0, y: 4)
+        }.disabled(observed.isTicketingLinkDisabled)
+    }
+
+    @ViewBuilder
+    func makeUpcomingEventView(from upcomingEvent: Ticketing.UpcomingEvent) -> some View {
+        HStack(alignment: .top, spacing: 0.0) {
+            VStack(alignment: .leading, spacing: 15.0) {
+                Text(upcomingEvent.headerTitle)
+                    .fontWeight(.bold)
+                    .font(.caption2)
+                VStack(alignment: .leading, spacing: 5.0) {
+                    Text(upcomingEvent.title)
+                        .fontWeight(.bold)
+                        .font(.title2)
+                    Text(upcomingEvent.subscription)
+                        .fontWeight(.bold)
+                        .font(.subheadline)
+                }
+            }
+            Spacer()
+        }
+        .frame(maxWidth: .infinity)
+        .padding(
+            EdgeInsets(top: 15.0, leading: 12.0, bottom: 24.0, trailing: 12.0)
+        )
+        .foregroundColor(.white)
+        .background(
+            LinearGradient(
+                colors: [upcomingEvent.backgroundGradientStartColor, upcomingEvent.backgroundGradientEndColor],
+                startPoint: .leading,
+                endPoint: .trailing
+            )
+        )
+        .cornerRadius(corenrRadius)
+        .shadow(color: shadowColor, radius: 20, x: 0, y: 4)
+    }
+}
 
 struct TicketView_Previews: PreviewProvider {
 	static var previews: some View {