Feature/#58 home design issue

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

@@ -43,6 +43,10 @@ public struct CircleButton: View {
           height: self.height,
           alignment: .center
         )
+        .shadow(
+          color: Color.Background.primary.opacity(0.05),
+          radius: 20
+        )
     }
   }
 }

Projects/Core/DesignSystem/Sources/View/Meme/MemeListView.swift

@@ -104,6 +104,6 @@ public struct MemeListView: View {
                       keywords: MemeDetail.mock.keywords,
                       imageUrlString: mockImageList[$0 % 4],
                       source: MemeDetail.mock.source,
-                      isTodayMeme: true, reaction: $0 % 4, isFarmemed: true) }
+                      isTodayMeme: true, reaction: $0 % 4, isFarmemed: true, isReaction: false) }
   return MemeListView(memeDetailList: $memeDetailList)
 }

Projects/Core/PPACData/Sources/DTO/MemeResponseDTO.swift

@@ -54,6 +54,7 @@ struct MemeResponseDTO: Decodable {
   let createdAt: String?
   let updatedAt: String
   let isSaved: Bool
+  let isReaction: Bool
   let watch: Int
 
   public init(
@@ -68,6 +69,7 @@ struct MemeResponseDTO: Decodable {
     createdAt: String?,
     updatedAt: String,
     isSaved: Bool,
+    isReaction: Bool,
     watch: Int
   )
   {
@@ -82,6 +84,7 @@ struct MemeResponseDTO: Decodable {
     self.createdAt = createdAt
     self.updatedAt = updatedAt
     self.isSaved = isSaved
+    self.isReaction = isReaction
     self.watch = watch
   }
 }
@@ -110,7 +113,8 @@ extension MemeResponseDTO {
       source: self.source,
       isTodayMeme: self.isTodayMeme,
       reaction: self.reaction,
-      isFarmemed: self.isSaved 
+      isFarmemed: self.isSaved,
+      isReaction: self.isReaction
     )
   }
 }

Projects/Core/PPACModels/Sources/Meme/MemeDetail.swift

@@ -18,6 +18,7 @@ public struct MemeDetail: Identifiable, Hashable {
   public let isTodayMeme: Bool
   public var reaction: Int
   public var isFarmemed: Bool
+  public var isReaction: Bool
 
   // MARK: - Initializers
 
@@ -29,7 +30,8 @@ public struct MemeDetail: Identifiable, Hashable {
     source: String,
     isTodayMeme: Bool,
     reaction: Int,
-    isFarmemed: Bool
+    isFarmemed: Bool,
+    isReaction: Bool
   ) {
     self.id = id
     self.title = title
@@ -39,6 +41,7 @@ public struct MemeDetail: Identifiable, Hashable {
     self.isTodayMeme = isTodayMeme
     self.reaction = reaction
     self.isFarmemed = isFarmemed
+    self.isReaction = isReaction
   }
 }
 
@@ -51,6 +54,7 @@ public extension MemeDetail {
     source: "깃허브",
     isTodayMeme: true,
     reaction: 4,
-    isFarmemed: false
+    isFarmemed: false,
+    isReaction: false
   )
 }

Projects/Core/PPACUtil/Sources/User/UserInfo.swift

@@ -19,5 +19,5 @@ public class UserInfo {
   @UserDefault(key:"deviceId", defaultValue: "")
   public var deviceId: String
 
-  public let testDeviceId: String = "uni-test"
+  public let testDeviceId: String = "uni-test2"
 }

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

@@ -15,16 +15,20 @@ struct RecommendHeaderView: View {
   @Binding var recommendMemeSize: Int
 
   public var body: some View {
-    VStack {
+    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())
     }
@@ -48,7 +52,7 @@ struct RecommendHeaderView: View {
 }
 
 private var recommendTitle : some View {
-  Text("이번주 이 밈 어때!")
+  Text("이번 주 이 밈 어때!")
     .font(Font.Heading.Large.semiBold)
     .padding(.bottom, 8)
 }
@@ -57,7 +61,7 @@ private func recommendProgressBar(
   seenMemeCount: Int,
   total: Int
 ) -> some View {
-  HStack {
+  HStack(spacing: 0) {
     ResourceKitAsset.Icon.squareCheck.swiftUIImage
 
     ProgressView(
@@ -77,7 +81,7 @@ private func recommendProgressBar(
 
 private func recommendText(_ text: String) -> some View {
   Text(text)
-    .font(Font.Weight.semiBold)
+    .font(Font.Body.Medium.medium)
     .foregroundStyle(Color.Text.secondary)
 }
 

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

@@ -15,52 +15,59 @@ import PPACModels
 import Lottie
 
 struct RecommendMemeButtonView : View {
-  @State var playbackMode: LottiePlaybackMode = .paused(at: .progress(100))
-
-  @Binding var meme: MemeDetail?
+  @State var playbackMode: LottiePlaybackMode = .paused
+  @State var isTapLikeButton: Bool = false
 
+  var isReaction: Bool
+  var reactionCnt: Int
+  var isFarmemed: Bool
+  let isOverlapView: Bool
   let reactionButtonTapped: () -> Void
   let copyButtonTapped: () -> Void
   let shareButtonTapped: () -> Void
   let saveButtonTapped: () -> Void
 
   public var body: some View  {
     HStack {
-      if let meme {
-        LikeButton(
-          reactionCount: meme.reaction,
-          didTapped: {
-            playbackMode = .playing(
-              .fromProgress(0, toProgress: 1, loopMode: .playOnce)
-            )
-            self.reactionButtonTapped()
-          }
-        )
-        .overlay(content: {
-          LottieView(animation: AnimationAsset.kkEffect.animation)
-            .playbackMode(playbackMode)
-            .animationDidFinish { _ in
-              playbackMode = .paused(at: .progress(100))
-            }
-            .offset(y: -50)
-        })
-
-        copyButton(copyButtonTapped)
-
-        shareButton(shareButtonTapped)
-
-        saveButton(isFarmemed: meme.isFarmemed) {
-          saveButtonTapped()
+      LikeButton(
+        isReaction: isReaction,
+        reactionCount: reactionCnt,
+        didTapped: {
+          self.isTapLikeButton = true
+          playbackMode = .playing(
+            .fromProgress(0, toProgress: 0.7, loopMode: .playOnce)
+          )
+          self.reactionButtonTapped()
         }
+      )
+      .disabled(self.isTapLikeButton)
+      .overlay {
+        LottieView(animation: AnimationAsset.kkEffect.animation)
+          .playbackMode(playbackMode)
+          .animationDidFinish { _ in
+            self.isTapLikeButton = false
+            playbackMode = .paused
+          }
+          .frame(width: 200, height: 200, alignment: .center)
+          .offset(y: -115)
+          .allowsHitTesting(false)
+      }
+
+      copyButton(copyButtonTapped)
+
+      shareButton(shareButtonTapped)
+
+      saveButton(isFarmemed: isFarmemed) {
+        saveButtonTapped()
       }
     }
-    .padding(.vertical, 30)
-    .padding(.horizontal, 32)
+    .frame(maxWidth: .infinity)
+    .frame(height: 110, alignment: .center)
     .background(
       LinearGradient(
         colors: [
           Color.Background.brandsubassistive.opacity(0),
-          Color.Background.brandsubassistive
+          isOverlapView ? Color.Background.brandsubassistive : Color.Background.brandsubassistive.opacity(0)
         ],
         startPoint: .top,
         endPoint: .bottom
@@ -100,24 +107,23 @@ func saveButton(
 }
 
 #Preview {
-  @State var meme: MemeDetail? = MemeDetail(
-    id: "1234",
-    title: "안녕하세요!",
-    keywords: ["웃김", "재미", "신나"],
-    imageUrlString: "https://host.com/asdf",
-    source: "종난",
-    isTodayMeme: true,
-    reaction: 130,
-    isFarmemed: true
-  )
+  var isReaction: Bool = true
+  var reactionCnt: Int = 1
+  var isFarmemed: Bool = false
 
   return RecommendMemeButtonView(
-    meme: $meme,
-    reactionButtonTapped: { meme?.reaction += 1 },
+    isReaction: isReaction,
+    reactionCnt: reactionCnt,
+    isFarmemed: isFarmemed,
+    isOverlapView: true,
+    reactionButtonTapped: {
+      isReaction = true
+      reactionCnt = +1
+    },
     copyButtonTapped: { print("copy~~") },
     shareButtonTapped: { print("share~~") },
     saveButtonTapped: {
-      print("isFarmemed: \(meme?.isFarmemed)")
+      isFarmemed.toggle()
     }
   )
 }

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

@@ -16,23 +16,44 @@ import PPACModels
 struct RecommendMemeImagesView: View {
   @Binding var currentMeme: MemeDetail?
 
+  @State var value: CGFloat = 0
+
   var memes: [MemeDetail]
   var isTagHidden: Bool = false
 
   public var body: some View {
     VStack(spacing: 0) {
       ScrollView(.horizontal) {
-        LazyHStack {
-          ForEach(memes, id: \.self) { meme in
-            MemeImageView(
-              imageUrl: meme.imageUrlString,
-              isDimmed: meme.id != currentMeme?.id
-            )
-            .animation(.smooth, value: meme)
-            .scrollTransition { content, phase in
-              content
-                .scaleEffect(phase.isIdentity ? 1.0 : 0.9)
-                .blur(radius: phase.isIdentity ? 0 : 1)
+        ZStack {
+          // Image
+          LazyHStack(spacing: 0) {
+            ForEach(memes, id: \.self) { meme in
+              MemeImageView(
+                imageUrl: meme.imageUrlString,
+                isDimmed: meme.id != currentMeme?.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)
             }
           }
         }
@@ -69,11 +90,12 @@ struct RecommendMemeImagesView: View {
         id: "668a44950289555e368174a6",
         title: "심란한 명수옹",
         keywords: ["공부", "학생", "시험기간"],
-        imageUrlString: "https://avatars.githubusercontent.com/u/26344479?s=64&v=4",
+        imageUrlString: "https://ppac-meme.s3.ap-northeast-2.amazonaws.com/17207014936770.png",
         source: "깃허브",
         isTodayMeme: true,
         reaction: 4,
-        isFarmemed: false
+        isFarmemed: false,
+        isReaction: false
       )
     ),
     memes: [
@@ -85,7 +107,8 @@ struct RecommendMemeImagesView: View {
         source: "깃허브",
         isTodayMeme: true,
         reaction: 4,
-        isFarmemed: false
+        isFarmemed: false,
+        isReaction: false
       ),
       MemeDetail(
         id: "2",
@@ -95,7 +118,8 @@ struct RecommendMemeImagesView: View {
         source: "깃허브",
         isTodayMeme: true,
         reaction: 1,
-        isFarmemed: false
+        isFarmemed: false,
+        isReaction: false
       ),
       MemeDetail(
         id: "3",
@@ -105,7 +129,8 @@ struct RecommendMemeImagesView: View {
         source: "깃허브",
         isTodayMeme: true,
         reaction: 0,
-        isFarmemed: false
+        isFarmemed: false,
+        isReaction: false
       ),
       MemeDetail(
         id: "4",
@@ -115,7 +140,8 @@ struct RecommendMemeImagesView: View {
         source: "깃허브",
         isTodayMeme: true,
         reaction: 4,
-        isFarmemed: false
+        isFarmemed: false,
+        isReaction: false
       ),
       MemeDetail(
         id: "5",
@@ -125,7 +151,8 @@ struct RecommendMemeImagesView: View {
         source: "깃허브",
         isTodayMeme: true,
         reaction: 4,
-        isFarmemed: false
+        isFarmemed: false,
+        isReaction: false
       )
     ],
     isTagHidden: false