feat: 추천화면 개발

Projects/Features/Home/Project.swift

@@ -19,7 +19,7 @@ let project = Project(
             resources: "Resources/**",
             dependencies: [
                 .ThirdParty.Dependency,
-//                .ResourceKit,
+                .ResourceKit,
                 .Core.DesignSystem,
                 .Core.PPACModels,
             ]

Projects/Features/MyPage/Project.swift

@@ -18,7 +18,9 @@ let project = Project(
             sources: "Sources/**",
             resources: "Resources/**",
             dependencies: [
-
+                .Core.DesignSystem,
+                .ResourceKit,
+                .Core.PPACModels
             ]
         )
     ]

Projects/Features/Recommend/Project.swift

@@ -18,7 +18,7 @@ let project = Project(
             sources: "Sources/**",
             resources: "Resources/**",
             dependencies: [
-
+                .ResourceKit
             ]
         )
     ]

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

@@ -0,0 +1,56 @@
+//
+//  RecommendHeaderView.swift
+//  Recommend
+//
+//  Created by 김종윤 on 6/29/24.
+//
+
+import SwiftUI
+import ResourceKit
+
+struct RecommendHeaderView: View {
+
+  public var body: some View {
+    VStack {
+      ResourceKitAsset.Icon.homeLogo.swiftUIImage
+        .padding(.bottom, 10)
+
+      recommendTitle
+
+      recommendProgressBar(numOfSaw: 1, total: 5)
+
+      recommendText("밈 보고 레벨 포인트를 받아요!")
+    }
+  }
+}
+
+var recommendTitle : some View {
+  Text("이번주 이 밈 어때!")
+    .font(Font.Heading.large)
+    .padding(.bottom, 8)
+}
+
+func recommendProgressBar(
+  numOfSaw: Int,
+  total: Int
+) -> some View {
+  HStack {
+    ResourceKitAsset.Icon.squareCheck.swiftUIImage
+
+    ProgressView(value: Double(numOfSaw), total: Double(total))
+      .frame(width: 125, height: 8)
+      .tint(Color.Icon.brand)
+      .padding(.vertical, 4)
+      .padding(.horizontal, 8)
+
+    Text("\(numOfSaw)개 봤어요")
+      .font(Font.Body.small)
+      .foregroundColor(Color.Text.brand)
+  }
+}
+
+func recommendText(_ text: String) -> some View {
+  Text(text)
+    .font(Font.Weight.semiBold)
+    .foregroundStyle(Color.Text.secondary)
+}

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

@@ -0,0 +1,81 @@
+//
+//  RecommendMemeButtonView.swift
+//  Recommend
+//
+//  Created by 김종윤 on 6/30/24.
+//
+
+import SwiftUI
+import ResourceKit
+
+struct RecommendMemeButtonView : View {
+  public var body: some View  {
+    HStack {
+      likeButton
+      copyButton
+      shareButton
+      saveButton
+    }
+    .padding(.vertical, 30)
+    .padding(.horizontal, 32)
+    .background(
+      LinearGradient(
+        colors: [
+          Color.Background.brandsubassistive.opacity(0),
+          Color.Background.brandsubassistive
+        ],
+        startPoint: .top,
+        endPoint: .bottom
+      )
+    )
+  }
+}
+
+var likeButton: some View {
+  Button(action: {
+    print("i like it!")
+  }) {
+    RoundedRectangle(cornerRadius: 40)
+      .foregroundStyle(.white)
+      .frame(width: 156 ,height: 50)
+      .overlay {
+        HStack {
+          ResourceKitAsset.Icon.ㅋ.swiftUIImage
+          ResourceKitAsset.Icon.개웃겨.swiftUIImage
+        }
+      }
+  }
+}
+
+var copyButton: some View {
+  Button(action: {
+    print("Copy~")
+  }, label: {
+    smallButton(image : ResourceKitAsset.Icon.copy.swiftUIImage)
+  })
+}
+
+var shareButton: some View {
+  Button(action: {
+    print("Share~")
+  }, label: {
+    smallButton(image : ResourceKitAsset.Icon.share.swiftUIImage)
+  })
+}
+
+var saveButton: some View {
+  Button(action: {
+    print("Save~")
+  }, label: {
+    smallButton(image : ResourceKitAsset.Icon.stroke.swiftUIImage)
+  })
+}
+
+private func smallButton(image: SwiftUI.Image) -> some View {
+  Circle()
+    .foregroundStyle(.white)
+    .frame(width: 50, height: 50)
+    .overlay {
+      image
+    }
+}

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

@@ -0,0 +1,72 @@
+//
+//  RecommendMemeImageView.swift
+//  Recommend
+//
+//  Created by 김종윤 on 6/30/24.
+//
+import SwiftUI
+import ResourceKit
+
+struct RecommendMemeImageView: View {
+  @State private var scrollIdx: Int?
+  private var items: [Int] = [1,2,3,4,5]
+  var isTagHidden: Bool = false
+
+  init(isTagHidden: Bool) {
+    self.isTagHidden = isTagHidden
+  }
+
+  public var body: some View {
+    VStack {
+      ScrollView(.horizontal) {
+        LazyHStack {
+          ForEach(items, id: \.self) { idx in
+            RoundedRectangle(cornerRadius: 25)
+              .foregroundStyle(Color.Background.brand)
+              .frame(width: 270, height: 310)
+              .overlay {
+                RoundedRectangle(cornerRadius: 25)
+                  .inset(by: 1)
+                  .stroke(Color.Border.primary, lineWidth: 2)
+              }
+              .overlay {
+                if let scrollIdx, scrollIdx != idx  {
+                  RoundedRectangle(cornerRadius: 25)
+                    .foregroundStyle(Color.Background.dimmer)
+                }
+              }
+              .animation(.smooth, value: scrollIdx)
+              .scrollTransition { content, phase in
+                content
+                  .scaleEffect(phase.isIdentity ? 1.0 : 0.9)
+                  .blur(radius: phase.isIdentity ? 0 : 1)
+              }
+          }
+        }
+        .frame(height: 310)
+        .scrollTargetLayout()
+      }
+      .scrollIndicators(.never)
+      .scrollTargetBehavior(.viewAligned)
+      .scrollPosition(id: $scrollIdx)
+      .contentMargins(.horizontal, 60.0)
+      .padding(.top, 36)
+      .padding(.bottom, 20)
+      .onAppear {
+        self.scrollIdx = items.first
+      }
+
+      // 찬수가 만든 해쉬태그 사용하기
+      if isTagHidden == false {
+        HStack {
+          Text("#슬픔")
+          Text("#고양이")
+          Text("#동물")
+          Text("#눈물")
+          Text("#억울")
+          Text("#웃긴")
+        }
+      }
+    }
+  }
+}

Projects/Features/Recommend/Sources/View/RecommendView.swift

@@ -6,19 +6,81 @@
 //
 
 import SwiftUI
+import ResourceKit
 
 public struct RecommendView: View {
+  @State private var memeImageHeight: CGFloat = 0
+  @State private var zstackHeight: CGFloat = 0
+  @State private var buttonHeight: CGFloat = 0
+
   public init() { }
 
   public var body: some View {
     VStack {
-      Text("추천 화면")
+      Spacer()
+      RecommendHeaderView()
+
+      ZStack {
+        VStack {
+          let isOverlapView = memeImageHeight + buttonHeight > zstackHeight
+          RecommendMemeImageView(isTagHidden: isOverlapView)
+            .onReadSize { size in
+              memeImageHeight = size.height
+            }
+          Spacer()
+        }
+        .zIndex(1)
+
+        VStack {
+          Spacer()
+          RecommendMemeButtonView()
+            .onReadSize { size in
+              buttonHeight = size.height
+            }
+        }
+        .zIndex(2)
+      }
+      .onReadSize { size in
+        zstackHeight = size.height
+      }
     }
     .frame(maxWidth: .infinity, maxHeight: .infinity)
-    .background(.yellow)
+    .background(
+      LinearGradient(
+        colors: [
+          Color.Background.brandassistive,
+          Color.Background.brandsubassistive
+        ],
+        startPoint: .top,
+        endPoint: .bottom
+      )
+    )
   }
 }
 
 #Preview {
   RecommendView()
 }
+
+extension View {
+  @ViewBuilder
+  func onReadSize(_ perform: @escaping (CGSize) -> Void) -> some View {
+    self.customBackground {
+      GeometryReader { geometryProxy in
+        Color.clear
+          .preference(key: SizePreferenceKey.self, value: geometryProxy.size)
+      }
+    }
+    .onPreferenceChange(SizePreferenceKey.self, perform: perform)
+  }
+
+  @ViewBuilder
+  func customBackground<V: View>(alignment: Alignment = .center, @ViewBuilder content: () -> V) -> some View {
+    self.background(alignment: alignment, content: content)
+  }
+}
+
+struct SizePreferenceKey: PreferenceKey {
+  static var defaultValue: CGSize = .zero
+  static func reduce(value: inout CGSize, nextValue: () -> CGSize) { }
+}

Projects/ResourceKit/Resources/Icon.xcassets/Home_Logo.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "home-logo.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}