[design] #157 링크 미리보기 스켈레톤 ui 추가

Author: ShapeKim98

Projects/DSKit/Sources/Components/PokitLinkPreview.swift

@@ -13,14 +13,14 @@ public struct PokitLinkPreview: View {
     @Environment(\.openURL)
     private var openURL
 
-    private let title: String
-    private let url: String
-    private let imageURL: String
+    private let title: String?
+    private let url: String?
+    private let imageURL: String?
 
     public init(
-        title: String,
-        url: String,
-        imageURL: String
+        title: String?,
+        url: String?,
+        imageURL: String?
     ) {
         self.title = title
         self.url = url
@@ -36,19 +36,12 @@ public struct PokitLinkPreview: View {
     @MainActor
     private var buttonLabel: some View {
         HStack(spacing: 16) {
-            LazyImage(url: URL(string: imageURL)) { phase in
-                Group {
-                    if let image = phase.image {
-                        image
-                            .resizable()
-                            .aspectRatio(contentMode: .fill)
-                    } else {
-                        PokitSpinner()
-                            .foregroundStyle(.pokit(.icon(.brand)))
-                            .frame(width: 48, height: 48)
-                    }
+            Group {
+                if let url = imageURL {
+                    thumbnail(url: url)
+                } else {
+                    Color.pokit(.bg(.secondary))
                 }
-                .animation(.pokitDissolve, value: phase.image)
             }
             .frame(width: 124, height: 108)
             .clipped()
@@ -76,26 +69,73 @@ public struct PokitLinkPreview: View {
     }
 
     @ViewBuilder
-    private func info(title: String) -> some View {
+    private func thumbnail(url: String) -> some View {
+        LazyImage(url: URL(string: url)) { phase in
+            Group {
+                if let image = phase.image {
+                    image
+                        .resizable()
+                        .aspectRatio(contentMode: .fill)
+                } else {
+                    PokitSpinner()
+                        .foregroundStyle(.pokit(.icon(.brand)))
+                        .frame(width: 48, height: 48)
+                }
+            }
+            .animation(.pokitDissolve, value: phase.image)
+        }
+    }
+    
+    @ViewBuilder
+    private func info(title: String?) -> some View {
         VStack(alignment: .leading, spacing: 8) {
-            Text(title)
-                .pokitFont(.b3(.b))
-                .foregroundStyle(.pokit(.text(.secondary)))
-                .multilineTextAlignment(.leading)
-                .lineLimit(2)
+            if let title {
+                Text(title)
+                    .pokitFont(.b3(.b))
+                    .foregroundStyle(.pokit(.text(.secondary)))
+                    .multilineTextAlignment(.leading)
+                    .lineLimit(2)
+            } else {
+                placeholder(23)
+            }
 
-            Text(url)
-                .pokitFont(.detail2)
-                .foregroundStyle(.pokit(.text(.tertiary)))
-                .multilineTextAlignment(.leading)
-                .lineLimit(2)
+            if let url {
+                Text(url)
+                    .pokitFont(.detail2)
+                    .foregroundStyle(.pokit(.text(.tertiary)))
+                    .multilineTextAlignment(.leading)
+                    .lineLimit(2)
+            } else {
+                placeholder(55)
+            }
         }
         .padding(.vertical, 16)
         .padding(.trailing, 20)
     }
 
+    @ViewBuilder
+    private func placeholder(_ tLength: CGFloat) -> some View {
+        VStack(alignment: .leading, spacing: 2) {
+            RoundedRectangle(cornerRadius: 2, style: .continuous)
+                .fill(.pokit(.bg(.secondary)))
+                .frame(height: 16)
+            
+            RoundedRectangle(cornerRadius: 2, style: .continuous)
+                .fill(.pokit(.bg(.secondary)))
+                .padding(.trailing, tLength)
+                .frame(height: 16)
+        }
+    }
+    
     private func buttonTapped() {
-        guard let url = URL(string: url) else { return }
+        guard
+            let urlString = url,
+            let url = URL(string: urlString)
+        else { return }
         openURL(url)
     }
 }
+
+#Preview {
+    PokitLinkPreview(title: nil, url: nil, imageURL: nil)
+}