웹뷰 띄우기

1. 웹View 만들기 

우선 웹뷰를 만들기 위해서 새로운 파일을 하나 만들자.

 

코드를 작성하기 이전에 없는 info.plist를 만들어주자. (나타내자) - 링크

import SwiftUI
import WebKit

//MARK: UIViewRepresentable: UIKit의 UIView를 사용할 수 있도록 한다.
struct MyWebView: UIViewRepresentable {
    
    var urlToLoad: String
    
    //MARK: - UIView 만들기
    func makeUIView(context: Context) -> WKWebView {
        
        //언래핑 - 너가 가져온 url 값이 비어있다면 WKWebView를 반환
        guard let url = URL(string: self.urlToLoad) else {
            return WKWebView()
        }
        
        let webview = WKWebView() //webView 생성
        
//        webview.load(URLRequest(url: URL(string: urlToLoad))) // (String 자체가 옵셔널 상태이기 떄문에 언래핑이 필요 -> guard문 처리)
        webview.load(URLRequest(url: url))
        
        return webview
    }
    
    //MARK: - 업데이트 UIView - View를 다시 그릴때 작동
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
 
}

struct MyWebView_Previews: PreviewProvider {
    static var previews: some View {
        MyWebView(urlToLoad: "https://www.naver.com/")
    }
}

 

 

 

 

2. ContentView에서 NavigationLink로 웹을 띄워보자.

import SwiftUI

struct ContentView: View {
    var body: some View {
       
        NavigationView {
            HStack {
                NavigationLink(destination: MyWebView(urlToLoad: "https://www.naver.com/")){
                    Text("네이버")
                        .font(.system(size: 25))
                        .fontWeight(.heavy)
                        .frame(width: 100, height: 50)
                        .background(.green)
                        .foregroundColor(.white)
                        .cornerRadius(15)
                    
                }
                NavigationLink(destination: MyWebView(urlToLoad: "https://www.daum.net/")){
                    Text("다음")
                        .font(.system(size: 25))
                        .fontWeight(.heavy)
                        .frame(width: 100, height: 50)
                        .background(.orange)
                        .foregroundColor(.white)
                        .cornerRadius(15)
                }
                NavigationLink(destination: MyWebView(urlToLoad: "https://www.google.co.kr/")){
                    Text("구글")
                        .font(.system(size: 25))
                        .fontWeight(.heavy)
                        .frame(width: 100, height: 50)
                        .background(.blue)
                        .foregroundColor(.white)
                        .cornerRadius(15)
                }
            }
        
            
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

이렇게 하면 웹사이트 위쪽 부분이 짤리는 문제가 생긴다. 

 

 

 

 

3. 웹사이트 오류 해결하기

.edgesIgnoringSafeArea(.all)

위의 코드를 사용해서 SageArea를 무시해준다.  

 

import SwiftUI

struct ContentView: View {
    var body: some View {
       
        NavigationView {
            HStack {
                NavigationLink(destination: MyWebView(urlToLoad: "https://www.naver.com/").edgesIgnoringSafeArea(.all)){
                    Text("네이버")
                        
                        .font(.system(size: 25))
                        .fontWeight(.heavy)
                        .frame(width: 100, height: 50)
                        .background(.green)
                        .foregroundColor(.white)
                        .cornerRadius(15)
                    
                }
                NavigationLink(destination: MyWebView(urlToLoad: "https://www.daum.net/").edgesIgnoringSafeArea(.all)){
                    Text("다음")
                        .font(.system(size: 25))
                        .fontWeight(.heavy)
                        .frame(width: 100, height: 50)
                        .background(.orange)
                        .foregroundColor(.white)
                        .cornerRadius(15)
                }
                NavigationLink(destination: MyWebView(urlToLoad: "https://www.google.co.kr/").edgesIgnoringSafeArea(.all)){
                    Text("구글")
                        .font(.system(size: 25))
                        .fontWeight(.heavy)
                        .frame(width: 100, height: 50)
                        .background(.blue)
                        .foregroundColor(.white)
                        .cornerRadius(15)
                }
            }
        
            
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}