Merge pull request #66 from mash-up-kr/feature/#61-recommend-skeleton

Feature/#61 recommend skeleton

Projects/Core/DesignSystem/Sources/View/CircleButton.swift

@@ -14,17 +14,20 @@ public struct CircleButton: View {
   let width: CGFloat
   let height: CGFloat
   let image: SwiftUI.Image
+  let shadowColor: SwiftUI.Color
   let action: () -> Void
 
   public init(
     width: CGFloat,
     height: CGFloat,
     image: SwiftUI.Image,
+    shadowColor: SwiftUI.Color = Color.Shadow.primary,
     action: @escaping () -> Void
   ) {
     self.width = width
     self.height = height
     self.image = image
+    self.shadowColor = shadowColor
     self.action = action
   }
 
@@ -38,15 +41,8 @@ public struct CircleButton: View {
             .scaledToFill()
             .frame(width: 20, height: 20, alignment: .center)
         }
-        .frame(
-          width: self.width,
-          height: self.height,
-          alignment: .center
-        )
-        .shadow(
-          color: Color.Background.primary.opacity(0.05),
-          radius: 20
-        )
+        .frame(width: self.width, height: self.height,alignment: .center)
+        .shadow(color: shadowColor, radius: 20)
     }
   }
 }
@@ -55,7 +51,8 @@ public struct CircleButton: View {
   CircleButton(
     width: 42,
     height: 42,
-    image: ResourceKitAsset.Icon.copy.swiftUIImage
+    image: ResourceKitAsset.Icon.copy.swiftUIImage,
+    shadowColor: Color.Shadow.orange
   ) {
     print("Copy~~")
   }

Projects/Features/Recommend/Project.swift

@@ -22,6 +22,7 @@ let project = Project(
         .ThirdParty.Kingfisher,
         .ThirdParty.PopupView,
         .ThirdParty.Lottie,
+        .ThirdParty.SkeletonUI,
         .ResourceKit,
         .Core.DesignSystem,
         .Core.PPACModels,

Projects/Features/Recommend/Sources/Presentation/Extension/View+Extenstion.swift

@@ -29,3 +29,16 @@ struct SizePreferenceKey: PreferenceKey {
   static var defaultValue: CGSize = .zero
   static func reduce(value: inout CGSize, nextValue: () -> CGSize) { }
 }
+
+extension View {
+  func recommendSkeleton(
+    isShow: Bool,
+    radius: CGFloat,
+    width: CGFloat? = nil,
+    height: CGFloat? = nil
+  ) -> some View {
+    self.modifier(
+      SkeletonModifier(isShow: isShow, radius: radius, width: width, height: height)
+    )
+  }
+}

Projects/Features/Recommend/Sources/Presentation/Modifier/SkeletonModifier.swift

@@ -0,0 +1,34 @@
+//
+//  SkeletonModifier.swift
+//  Recommend
+//
+//  Created by 김종윤 on 8/8/24.
+//
+
+import SwiftUI
+import SkeletonUI
+
+import ResourceKit
+
+struct SkeletonModifier: ViewModifier {
+  let isShow: Bool
+  let radius: CGFloat
+  let width: CGFloat?
+  let height: CGFloat?
+
+  func body(content: Content) -> some View {
+    content
+      .skeleton(
+        with: isShow,
+        animation: .linear(duration: 2, delay: 0, speed: 1),
+        appearance: .gradient(
+          .linear,
+          color: Color.Skeleton.beige,
+          background: Color.Skeleton.orange,
+          radius: 1
+        ),
+        shape: .rounded(.radius(radius))
+      )
+      .frame(width: width, height: height)
+  }
+}

Projects/Features/Recommend/Sources/Presentation/RecommendHeaderView.swift

@@ -6,6 +6,8 @@
 //
 
 import SwiftUI
+import SkeletonUI
+
 import ResourceKit
 
 struct RecommendHeaderView: View {
@@ -15,22 +17,29 @@ struct RecommendHeaderView: View {
   @Binding var recommendMemeSize: Int
 
   public var body: some View {
+    let isNotLoading = userLevel == 0 || seenMemeCount == 0
+
     VStack(spacing: 0) {
       ResourceKitAsset.Icon.homeLogo.swiftUIImage
         .resizable()
         .frame(width: 212, height: 45, alignment: .center)
         .padding(.bottom, 10)
 
       recommendTitle
-        .padding(.bottom, 16)
-
-      recommendProgressBar(
-        seenMemeCount: self.seenMemeCount,
-        total: recommendMemeSize
-      )
-      .padding(.bottom, 8)
 
-      recommendText(getRecommendText())
+      if !isNotLoading {
+        recommendProgressBar(
+          seenMemeCount: self.seenMemeCount,
+          total: recommendMemeSize
+        )
+
+        recommendText(getRecommendText())
+      } else {
+        EmptyView()
+          .recommendSkeleton(isShow: isNotLoading, radius: 4, width: 200, height: 16)
+          .padding(.top, 20)
+          .padding(.bottom, 37)
+      }
     }
   }
 
@@ -41,7 +50,7 @@ struct RecommendHeaderView: View {
                 (1...(recommendMemeSize - 1)).contains(seenMemeCount)
     {
       "밈 보고 레벨 포인트 받아요!"
-    } else if userLevel == 2 && 
+    } else if userLevel == 2 &&
                 (1...(recommendMemeSize - 1)).contains(seenMemeCount)
     {
       "추천 밈 둘러보세요!"
@@ -54,7 +63,7 @@ struct RecommendHeaderView: View {
 private var recommendTitle : some View {
   Text("이번 주 이 밈 어때!")
     .font(Font.Heading.Large.semiBold)
-    .padding(.bottom, 8)
+    .padding(.bottom, 16)
 }
 
 private func recommendProgressBar(
@@ -83,10 +92,12 @@ private func recommendText(_ text: String) -> some View {
   Text(text)
     .font(Font.Body.Medium.medium)
     .foregroundStyle(Color.Text.secondary)
+    .padding(.top, 8)
+    .padding(.bottom, 32)
 }
 
 #Preview {
-  @State var userLevel: Int = 1
+  @State var userLevel: Int = 0
   @State var seenMemeCount: Int = 5
   @State var recommendMemeSize: Int = 5
 
@@ -95,4 +106,16 @@ private func recommendText(_ text: String) -> some View {
     seenMemeCount: $seenMemeCount,
     recommendMemeSize: $recommendMemeSize
   )
+  .frame(maxWidth: .infinity, maxHeight: .infinity)
+  .background(
+    LinearGradient(
+      colors: [
+        Color.Background.brandassistive,
+        Color.Background.brandsubassistive
+      ],
+      startPoint: .top,
+      endPoint: .bottom
+    )
+  )
+  .edgesIgnoringSafeArea(.bottom)
 }

Projects/Features/Recommend/Sources/Presentation/RecommendMemeButtonView.swift

@@ -62,7 +62,7 @@ struct RecommendMemeButtonView : View {
       }
     }
     .frame(maxWidth: .infinity)
-    .frame(height: 110, alignment: .center)
+    .padding(.vertical, 30)
     .background(
       LinearGradient(
         colors: [
@@ -81,6 +81,7 @@ func copyButton(_ copyAction: @escaping () -> Void) -> some View {
     width: 50,
     height: 50,
     image: ResourceKitAsset.Icon.copy.swiftUIImage,
+    shadowColor: Color.Shadow.orange,
     action: copyAction
   )
 }
@@ -90,6 +91,7 @@ func shareButton(_ shareAction: @escaping () -> Void) -> some View {
     width: 50,
     height: 50,
     image: ResourceKitAsset.Icon.share.swiftUIImage,
+    shadowColor: Color.Shadow.orange,
     action: shareAction
   )
 }
@@ -102,6 +104,7 @@ func saveButton(
     width: 50,
     height: 50,
     image: isFarmemed ? ResourceKitAsset.Icon.filled.swiftUIImage : ResourceKitAsset.Icon.stroke.swiftUIImage,
+    shadowColor: Color.Shadow.orange,
     action: saveAction
   )
 }

Projects/Features/Recommend/Sources/Presentation/RecommendMemeImageView.swift

@@ -18,6 +18,8 @@ struct RecommendMemeImagesView: View {
 
   @State var value: CGFloat = 0
 
+  @State var imageStatusList: [String : Bool] = [:]
+
   var memes: [MemeDetail]
   var isTagHidden: Bool = false
 
@@ -30,57 +32,70 @@ struct RecommendMemeImagesView: View {
             ForEach(memes, id: \.self) { meme in
               MemeImageView(
                 imageUrl: meme.imageUrlString,
-                isDimmed: meme.id != currentMeme?.id
+                isDimmed: meme.id != currentMeme?.id,
+                isLoadingImage: binding(for: meme.id)
               )
-              .scrollTransition { content, phase in
-                content
-                  .offset(x: phase.value * -3)
-                  .scaleEffect(phase.isIdentity ? 1 : 0.9)
-                  .blur(radius: phase.isIdentity ? 0 : 1)
-              }
               .animation(.smooth, value: meme)
             }
           }
 
           // Border
           HStack(spacing: 0) {
             ForEach(memes, id: \.self) { meme in
-              RoundedRectangle(cornerRadius: 20)
-                .inset(by: 1)
-                .stroke(Color.Border.primary, lineWidth: 2)
-                .scrollTransition { content, phase in
-                  content
-                    .offset(x: phase.value * -3)
-                    .scaleEffect(phase.isIdentity ? 1 : 0.905)
-                }
-                .animation(.smooth, value: meme)
+              MemeImageBorderView(
+                isLoadingImage: binding(for: meme.id)
+              )
+              .animation(.smooth, value: meme)
             }
           }
         }
-        .frame(height: 310)
         .scrollTargetLayout()
+        .recommendSkeleton(
+          isShow: memes.isEmpty,
+          radius: 20,
+          width: memes.isEmpty ? 270 : .infinity,
+          height: 310
+        )
       }
       .scrollIndicators(.never)
       .scrollTargetBehavior(.viewAligned)
       .scrollPosition(id: $currentMeme)
       .contentMargins(.horizontal, 60.0)
-      .padding(.top, 36)
       .padding(.bottom, 20)
 
       if let currentMeme, isTagHidden == false {
         HashTagView(keywords: currentMeme.keywords)
+      } else {
+        EmptyView()
+          .recommendSkeleton(isShow: true, radius: 4, width: 200, height: 16)
       }
     }
-    .onAppear {
-      currentMeme = memes.first
-    }
     .onChange(of: memes) { _, value in
-      let current = value.first(where: {
-        $0.id == currentMeme?.id
-      })
-      currentMeme = current
+      if let currentMeme {
+        let current = value.first(where: {
+          $0.id == currentMeme.id
+        })
+        self.currentMeme = current
+
+      } else {
+        self.currentMeme = memes.first
+        memes.forEach { meme in
+          imageStatusList[meme.id] = false
+        }
+      }
     }
   }
+
+  func binding(for key: String) -> Binding<Bool> {
+    return Binding(
+      get: {
+        return self.imageStatusList[key] ?? false
+      },
+      set: {
+        self.imageStatusList[key] = $0
+      }
+    )
+  }
 }
 
 #Preview {
@@ -157,4 +172,16 @@ struct RecommendMemeImagesView: View {
     ],
     isTagHidden: false
   )
+  .frame(maxWidth: .infinity, maxHeight: .infinity)
+  .background(
+    LinearGradient(
+      colors: [
+        Color.Background.brandassistive,
+        Color.Background.brandsubassistive
+      ],
+      startPoint: .top,
+      endPoint: .bottom
+    )
+  )
+  .edgesIgnoringSafeArea(.bottom)
 }