refactor #95 : 웹 뷰 코드 개선

Nexters · Sep 14, 2023 · ff3155c · ff3155c
1 parent 2b7595d
commit ff3155c
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 71 deletions.
diff --git a/Projects/Features/Sources/Home/StartTest/StartTestFeature.swift b/Projects/Features/Sources/Home/StartTest/StartTestFeature.swift
@@ -27,6 +27,10 @@ public struct StartTestFeature: Reducer {
             self.nickname = nickname
             self.testData = testData
             self.authorizationToken = authorizationToken
+
+//            keymeTestsState = KeymeTestsFeature.State(
+//                url: "https://keyme-frontend.vercel.app/test/\(testID)",
+//                authorizationToken: authorizationToken)
         }
     }
 

diff --git a/Projects/Features/Sources/Home/StartTest/StartTestView.swift b/Projects/Features/Sources/Home/StartTest/StartTestView.swift
@@ -16,9 +16,11 @@ import DSKit
 import Domain
 
 public struct StartTestView: View {
+    @StateObject private var webViewSetUp: KeymeWebViewSetup
     public var store: StoreOf<StartTestFeature>
 
     public init(store: StoreOf<StartTestFeature>) {
+        self._webViewSetUp = .init(wrappedValue: KeymeWebViewSetup())
         self.store = store
     }
 
@@ -36,22 +38,9 @@ public struct StartTestView: View {
                     .onTapGesture {
                         viewStore.send(.startButtonDidTap)
                     }
-                    .navigationDestination(
-                        store: store.scope(
-                            state: \.$keymeTestsState,
-                            action: StartTestFeature.Action.keymeTests
-                        ), destination: { store in
-                            KeymeTestsView(store: store)
-                                .ignoresSafeArea(.all)
-                                .transition(.scale.animation(.easeIn))
-                        })
 
                 Spacer()
             }
-            .background {
-                // 웹뷰 로딩속도 개선 때문에 거의 안 보일 정도로 미리 띄워놓는 것임
-                warmUpWebView()
-            }
         }
         .onAppear {
             store.send(.onAppear)
@@ -62,20 +51,21 @@ public struct StartTestView: View {
         .onDisappear {
             store.send(.stopAnimation)
         }
+        .navigationDestination(
+            store: store.scope(
+                state: \.$keymeTestsState,
+                action: StartTestFeature.Action.keymeTests),
+            destination: { store in
+                KeymeTestsView(store: store)
+                    .ignoresSafeArea(.all)
+                    .transition(.scale.animation(.easeIn))
+                    .environmentObject(webViewSetUp)
+            }
+        )
     }
 }
 
 extension StartTestView {
-    func warmUpWebView() -> some View {
-        let store: StoreOf<KeymeTestsFeature> = Store(
-            initialState: KeymeTestsFeature.State(url: "", authorizationToken: "")
-        ) {
-            KeymeTestsFeature()
-        }
-
-        return KeymeTestsView(store: store).opacity(0.001)
-    }
-
     func startTestsButton(_ viewStore: ViewStore<StartTestFeature.State,
                           StartTestFeature.Action>) -> some View {
         ZStack {

diff --git a/Projects/Features/Sources/KeymeTests/KeymeTestsView.swift b/Projects/Features/Sources/KeymeTests/KeymeTestsView.swift
@@ -9,10 +9,10 @@
 import SwiftUI
 
 import ComposableArchitecture
-
 import DSKit
 
 public struct KeymeTestsView: View {
+    @EnvironmentObject var webViewSetup: KeymeWebViewSetup
     let store: StoreOf<KeymeTestsFeature>
 
     public init(store: StoreOf<KeymeTestsFeature>) {
@@ -22,21 +22,27 @@ public struct KeymeTestsView: View {
     public var body: some View {
         WithViewStore(store, observe: { $0 }, send: KeymeTestsFeature.Action.view) { viewStore in
             ZStack {
-                KeymeWebView(url: viewStore.url, accessToken: viewStore.authorizationToken)
-                    .load(url: viewStore.url)
-                    .onCloseWebView {
-                        viewStore.send(.closeButtonTapped)
-                    }
-                    .onTestSubmitted { testResult in
-                        viewStore.send(.showResult(data: testResult))
-                    }
-                    .onCloseWebView {
-                        viewStore.send(.closeWebView)
-                    }
-                    .toolbar(.hidden, for: .navigationBar)
+                KeymeWebView(
+                    url: viewStore.url,
+                    accessToken: viewStore.authorizationToken
+                )
+                .onCloseWebView {
+                    viewStore.send(.closeButtonTapped)
+                }
+                .onTestSubmitted { testResult in
+                    viewStore.send(.showResult(data: testResult))
+                }
+                .environmentObject(webViewSetup)
+                .onAppear {
+                    webViewSetup.load(url: viewStore.url, accessToken: viewStore.authorizationToken)
+                }
+                .onDisappear {
+                    webViewSetup.load(url: "about:blank", accessToken: viewStore.authorizationToken)
+                }
             }
             .frame(maxWidth: .infinity, maxHeight: .infinity)
         }
+        .toolbar(.hidden, for: .navigationBar)
         .alert(store: store.scope(state: \.$alertState, action: KeymeTestsFeature.Action.alert))
     }
 }
diff --git a/Projects/Features/Sources/KeymeTests/WebView/KeymeWebView.swift b/Projects/Features/Sources/KeymeTests/WebView/KeymeWebView.swift
@@ -13,8 +13,26 @@ import Core
 import Domain
 import DSKit
 
-final class SharedWebView {
-    static let instance = WKWebView()
+public class KeymeWebViewSetup: ObservableObject {
+    let webView = WKWebView()
+
+    init() {
+        load(url: "about:blank", accessToken: "")
+    }
+
+    func load(url: String, accessToken: String) {
+        guard
+            let encodedUrl = url.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed),
+            let url = URL(string: encodedUrl)
+        else {
+            return
+        }
+
+        var request = URLRequest(url: url)
+        request.setValue(accessToken, forHTTPHeaderField: "Authorization")
+        webView.customUserAgent = "KEYME_\(accessToken)"
+        webView.load(request)
+    }
 }
 
 final class KeymeWebViewOption {
@@ -31,24 +49,20 @@ final class KeymeWebViewOption {
 }
 
 public struct KeymeWebView: UIViewRepresentable {
+    @EnvironmentObject var webViewSetup: KeymeWebViewSetup
+
+    private var url: String
+    private let accessToken: String
     private let option: KeymeWebViewOption
-    private let webView: WKWebView
-    public let url: String
+
+    private var webView: WKWebView {
+        webViewSetup.webView
+    }
 
     init(url: String, accessToken: String) {
-        self.option = .init()
         self.url = url
-        self.webView = SharedWebView.instance
-
-        if
-            let encodedUrl = url.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed),
-            let url = URL(string: encodedUrl)
-        {
-            var request = URLRequest(url: url)
-            request.setValue(accessToken, forHTTPHeaderField: "Authorization")
-            webView.customUserAgent = "KEYME_\(accessToken)"
-            webView.load(request)
-        }
+        self.option = .init()
+        self.accessToken = accessToken
     }
 
     public func makeUIView(context: Context) -> WKWebView {
@@ -65,9 +79,7 @@ public struct KeymeWebView: UIViewRepresentable {
         return webView
     }
 
-    public func updateUIView(_ uiView: WKWebView, context: Context) {
-
-    }
+    public func updateUIView(_ uiView: WKWebView, context: Context) {}
 
     public func makeCoordinator() -> Coordinator {
         Coordinator(parent: self, option: option)
@@ -120,14 +132,6 @@ public struct KeymeWebView: UIViewRepresentable {
 }
 
 public extension KeymeWebView {
-    func load(url: String) -> Self {
-        guard let url = URL(string: url) else  { return self }
-
-        let request = URLRequest(url: url)
-        self.webView.load(request)
-        return self
-    }
-
     func onCloseWebView(_ handler: @escaping () -> Void) -> Self {
         self.option.onCloseWebView = handler
         return self

diff --git a/Projects/Features/Sources/MyPage/MyPageView.swift b/Projects/Features/Sources/MyPage/MyPageView.swift
@@ -20,8 +20,8 @@ struct MyPageView: View {
     private let exportModeScale = 0.7
     private let imageSaver = ImageSaver()
 
-    @State var tempImage: ScreenImage?
-    @State var screenshotFired: Bool = false
+    @State private var tempImage: ScreenImage?
+    @State private var screenshotFired: Bool = false
 
     @State var graphScale: CGFloat = 1
     @State var graphRotationAngle: Angle = .radians(0.018)
@@ -309,6 +309,11 @@ private extension MyPageView {
 
 // MARK: - Tools
 private extension MyPageView {
+    struct ScreenImage: Identifiable {
+        let id = UUID()
+        let image: UIImage
+    }
+
     @MainActor func saveScreenShotWith(graphImage image: UIImage?, title: String, nickname: String) {
         guard let image else {
             // TODO: Show alert
@@ -324,7 +329,6 @@ private extension MyPageView {
                     .scaleEffect(1.0 / 0.81)
             }
         }
-//        .frame(width: 1080 / 3, height: 1920 / 3) // Image size
         .frame(width: 310, height: 570) // Image size
 
         let renderer = ImageRenderer(content: exportView)
@@ -339,8 +343,3 @@ private extension MyPageView {
         tempImage = ScreenImage(image: exportImage)
     }
 }
-
-struct ScreenImage: Identifiable {
-    let id = UUID()
-    let image: UIImage
-}
diff --git a/Projects/Features/Sources/Onboarding/OnboardingView.swift b/Projects/Features/Sources/Onboarding/OnboardingView.swift
@@ -13,6 +13,8 @@ import Core
 import DSKit
 
 public struct OnboardingView: View {
+    @EnvironmentObject var webViewSetup: KeymeWebViewSetup
+
     private let store: StoreOf<OnboardingFeature>
 
     public init(store: StoreOf<OnboardingFeature>) {
@@ -38,6 +40,7 @@ public struct OnboardingView: View {
                             then: { store in
                                 KeymeTestsView(store: store)
                                     .ignoresSafeArea(.all)
+                                    .environmentObject(webViewSetup)
                                     .transition(
                                         .scale.combined(with: .opacity)
                                         .animation(Animation.customInteractiveSpring(duration: 1)))