[iOS] URL 미리보기 뷰 - LinkPresentation #1

시작하면서

웹 링크에서 meta 데이터 (header 데이터)를 불러와 웹 미리보기 썸네일과 제목 등을 보여주는 뷰를 만들고 싶었다
어떻게 검색해야할지 몰라 한참을 헤매다가, LinkPresentation이라는 기본 컴포넌트가 있다는 것을 알게되었다

참고 사이트
(https://yagom.net/forums/topic/linkpresentation/)

LinkPresentation

LPMetadataProvider
URL의 메타데이터를 검색하는 객체

LPLinkMetadata
URL의 메타데이터를 소유하고 있는 객체

LPLinkView(metadata: LPLinkMetadata)
풍부한 시각적 표현을 보여주는 객체 (뷰)

핵심 코드

let metadataProvider = LPMetadataProvider()
let url = URL(string: urlPath)!

metadataProvider.startFetchingMetadata(for: url) { metadata, error in
    if error != nil {
        // The fetch failed; handle the error
        return
    }
    
    // TODO: Make use of fetched metadata.
}

LPMetadataProvider()가 LPLinkMetadata를 반환해준다는 것만 알고있으면 활용하는데에 어렵지 않아보인다

Link 미리보기 리스트 (커스텀)

그래서 대충 공식문서 위주로 찾다보니,
그대로 따라하면 될 것만 같은 코드를 애플 개발자 포럼에서 발견하였다

[apple developer forums]
Swift UI - LPLinkView expanding beyond view once the link is loaded
https://developer.apple.com/forums/thread/674896

복붙 잘 되긴 하는데, 공부할 겸 직접 쳐봤다

import SwiftUI
import LinkPresentation

struct LinkListView: View {
    
    @State var redrawPreview = false
    
    let links: [StringLink] = [
        StringLink(id: UUID(), string: "https://www.apple.com"),
        StringLink(id: UUID(), string: "https://www.naver.com"),
        StringLink(id: UUID(), string: "https://velog.io")
    ]
    
    var body: some View {
        List(links) { l in
            VStack {
                LinkRow(previewURL: URL(string: l.string)!, redraw: self.$redrawPreview)
            }
        }.environment(\.defaultMinListRowHeight, 50)
    }
}

struct LinkRow: UIViewRepresentable {
    var previewURL: URL
    @Binding var redraw: Bool
    
    func makeUIView(context: Context) -> LPLinkView {
        let view = LPLinkView(url: previewURL)
        
        let provider = LPMetadataProvider()
        provider.startFetchingMetadata(for: previewURL) { metadata, error in
            if let md = metadata {
                DispatchQueue.main.async {
                    view.metadata = md
                    view.sizeToFit()
                    self.redraw.toggle()
                }
            } else if error != nil {
                let md = LPLinkMetadata()
                md.title = "Custom title"
                view.metadata = md
                view.sizeToFit()
                self.redraw.toggle()
            }
        }
        return view
    }
    
    func updateUIView(_ uiView: LPLinkView, context: Context) {
        
    }
}

struct StringLink: Identifiable {
    var id = UUID()
    var string: String
}

struct LinkListView_Previews: PreviewProvider {
    static var previews: some View {
        LinkListView()
    }
}

그러면 다음과 같은 화면이 출력된다

다음 단계

이제 커스텀을 해보자
다음 포스팅에서...