Feat: 마이페이지 최근본밈, 저장한 밈 스켈레톤 추가 (#68)

mash-up-kr · Aug 20, 2024 · 96c6cbd · 96c6cbd
1 parent 55f3ed9
commit 96c6cbd
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 4 deletions.
diff --git a/Projects/Core/DesignSystem/Sources/View/Meme/MemeImageView.swift b/Projects/Core/DesignSystem/Sources/View/Meme/MemeImageView.swift
@@ -6,14 +6,16 @@
 //
 
 import SwiftUI
+import ResourceKit
 import Kingfisher
+import SkeletonUI
 
 public struct MemeImageView: View {
 
   // MARK: - Properties
 
   private let imageUrlString: String
-
+  @State private var isImageLoaded: Bool = false
   // MARK: - Initializers
 
   public init(imageUrlString: String) {
@@ -24,6 +26,14 @@ public struct MemeImageView: View {
 
   public var body: some View {
     KFImage(URL(string: imageUrlString))
+      .placeholder {
+        skeletonView
+      }
+      .onSuccess { _ in
+        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
+          isImageLoaded = true
+        }
+      }
       .resizable()
       .loadDiskFileSynchronously()
       .cacheMemoryOnly()
@@ -32,4 +42,19 @@ public struct MemeImageView: View {
       .aspectRatio(0.9375, contentMode: .fit)
       .cornerRadius(10)
   }
+
+  var skeletonView: some View {
+    EmptyView()
+      .skeleton(
+        with: !isImageLoaded,
+        animation: .linear(duration: 2, delay: 0, speed: 1),
+        appearance: .gradient(
+          .linear,
+          color: Color.Skeleton.secondary,
+          background: Color.Skeleton.primary,
+          radius: 1
+        ),
+        shape: .rounded(.radius(12))
+      )
+  }
 }
diff --git a/Projects/Core/DesignSystem/Sources/View/Meme/MemeItemView.swift b/Projects/Core/DesignSystem/Sources/View/Meme/MemeItemView.swift
@@ -9,6 +9,7 @@ import SwiftUI
 import ResourceKit
 import PPACModels
 import Kingfisher
+import SkeletonUI
 
 public struct MemeItemView: View {
   private let memeDetail: MemeDetail
@@ -31,6 +32,7 @@ public struct MemeItemView: View {
         .onTapGesture {
           memeClickHandler?(memeDetail)
         }
+
       MemeItemInfoView(memeName: memeDetail.title, reaction: memeDetail.reaction)
     }
   }
@@ -40,6 +42,7 @@ struct MemeItemViewWithButton: View {
   @State private var imageHeight: CGFloat = .zero
   private let memeCopyHandler: ((MemeDetail) -> ())?
   private let memeDetail: MemeDetail
+  @State private var isImageLoaded: Bool = false
 
   init(memeDetail: MemeDetail, memeCopyHandler: ((MemeDetail) -> ())?) {
     self.memeDetail = memeDetail
@@ -74,15 +77,17 @@ struct MemeItemViewWithButton: View {
 struct ResizableMemeImageView: View {
   let imageUrlString: String
   @Binding var imageHeight: CGFloat
+  @State private var isImageLoaded: Bool = false
 
   var body: some View {
     GeometryReader { geometry in
-      VStack {
+      ZStack {
         KFImage(URL(string: imageUrlString))
           .resizable()
           .loadDiskFileSynchronously()
           .cacheMemoryOnly()
           .onSuccess { result in
+            guard result.image.size.width > 0 else { return }
             let ratio = geometry.size.width / result.image.size.width
             let newHeight = result.image.size.height * ratio
             if newHeight < 80 {
@@ -92,12 +97,36 @@ struct ResizableMemeImageView: View {
             } else {
               imageHeight = newHeight
             }
+            isImageLoaded = true
           }
           .cornerRadius(12)
           .frame(height: imageHeight)
+          .opacity(isImageLoaded ? 1 : 0) // 이미지 로드 완료 전에 투명하게 처리
+
+        if !isImageLoaded {
+          skeletonView
+            .onAppear {
+              imageHeight = geometry.size.width
+            }
+        }
       }
     }
   }
+
+  var skeletonView: some View {
+    EmptyView()
+      .skeleton(
+        with: !isImageLoaded,
+        animation: .linear(duration: 2, delay: 0, speed: 1),
+        appearance: .gradient(
+          .linear,
+          color: Color.Skeleton.secondary,
+          background: Color.Skeleton.primary,
+          radius: 1
+        ),
+        shape: .rounded(.radius(12))
+      )
+  }
 }
 
 

diff --git a/Projects/Features/MyPage/Sources/Components/RecentlyMemeListView.swift b/Projects/Features/MyPage/Sources/Components/RecentlyMemeListView.swift
@@ -48,15 +48,48 @@ extension MemeDetail: HorizontalMemeItemProtocol {}
 struct MemeSimpleItemView: View, HorizontalMemeItemViewProtocol {
   typealias Item = MemeDetail
   let memeDetail: MemeDetail
+  @State private var isImageLoaded: Bool = false
 
   init(item memeDetail: MemeDetail) {
     self.memeDetail = memeDetail
   }
 
-  var body: some View {
-    MemeImageView(imageUrlString: memeDetail.imageUrlString)
+  public var body: some View {
+    ZStack {
+      KFImage(URL(string: memeDetail.imageUrlString))
+        .resizable()
+        .loadDiskFileSynchronously()
+        .cacheMemoryOnly()
+        .onSuccess { _ in
+          isImageLoaded = true
+        }
+        .aspectRatio(contentMode: .fill)
+        .frame(width: 120, height: 120, alignment: .center)
+        .cornerRadius(12)
+        .opacity(isImageLoaded ? 1 : 0) // 이미지 로드 완료 전에 투명하게 처리
+
+      if !isImageLoaded {
+        skeletonView
+      }
+    }
+  }
+
+  var skeletonView: some View {
+    EmptyView()
+      .skeleton(
+        with: !isImageLoaded,
+        animation: .linear(duration: 2, delay: 0, speed: 1),
+        appearance: .gradient(
+          .linear,
+          color: Color.Skeleton.secondary,
+          background: Color.Skeleton.primary,
+          radius: 1
+        ),
+        shape: .rounded(.radius(12))
+      )
       .frame(width: 120, height: 120, alignment: .center)
   }
+
 }
 
 //#Preview {