Merge pull request #34 from mash-up-kr/feature/myPage-MymemeList-hyer…

…jang-#25

Feat: 마이페이지 UI 구현

Projects/App/Project.swift

@@ -18,11 +18,8 @@ let project = Project.configure(
             product: .app,
             bundleId: "ppac.farmeme.App",
             infoPlist: .extendingDefault(with: [
-              "CFBundleShortVersionString": "1.0",
-              "CFBundleVersion": "1",
-              "UIMainStoryboardFile": "",
-              "UILaunchStoryboardName": "LaunchScreen"
-            ]),
+              "UILaunchStoryboardName": "launch"
+          ]),
             sources: "Sources/**",
             resources: "Resources/**",
             dependencies: [
@@ -50,7 +47,9 @@ let project = Project.configure(
             name: "Develop-Farmeme",
             product: .app,
             bundleId: "ppac.farmeme.App",
-            infoPlist: .default,
+            infoPlist: .extendingDefault(with: [
+              "UILaunchStoryboardName": "launch"
+          ]),
             sources: "Sources/**",
             resources: "Resources/**",
             dependencies: [

Projects/Core/DesignSystem/Project.swift

@@ -15,7 +15,11 @@ let project = Project(
             name: "DesignSystem",
             product: .framework,
             sources: "Sources/**",
-            resources: "Resources/**"
+            resources: "Resources/**",
+            dependencies: [
+                .ResourceKit,
+                .Core.PPACModels
+            ]
         )
     ]
 )

Projects/Core/DesignSystem/Sources/Button/CircleCopyButton.swift

@@ -0,0 +1,28 @@
+//
+//  CircleCopyButton.swift
+//  DesignSystem
+//
+//  Created by 장혜령 on 2024/06/29.
+//
+
+import SwiftUI
+import ResourceKit
+
+public struct CircleCopyButton: View {
+  public init() { }
+  public var body: some View {
+    Circle()
+      .foregroundStyle(.white)
+      .overlay {
+        ResourceKitAsset.Icon.copy.swiftUIImage
+          .resizable()
+          .scaledToFill()
+          .frame(width: 20, height: 20, alignment: .center)
+      }
+      .frame(width: 42, height: 42, alignment: .center)
+  }
+}
+
+#Preview {
+  CircleCopyButton()
+}

Projects/Core/DesignSystem/Sources/Extension/Shape+Extension.swift

@@ -0,0 +1,21 @@
+//
+//  Shape+Extension.swift
+//  DesignSystem
+//
+//  Created by 장혜령 on 2024/07/04.
+//
+
+import SwiftUI
+
+public extension Shape {
+  func stroke<StrokeStyle, FillStyle>(
+    _ strokeStyle: StrokeStyle,
+    lineWidth: CGFloat = 1,
+    fill fillStyle: FillStyle
+  ) -> some View where StrokeStyle: ShapeStyle, FillStyle: ShapeStyle {
+    self
+      .stroke(strokeStyle, lineWidth: lineWidth)
+      .background(self.fill(fillStyle))
+  }
+}
+

Projects/Core/DesignSystem/Sources/Extension/UIScreen+Extension.swift

@@ -0,0 +1,19 @@
+//
+//  UIScreen+Extension.swift
+//  PPACUtil
+//
+//  Created by 장혜령 on 2024/06/29.
+//
+
+import SwiftUI
+
+public struct ScreenSizeKey: EnvironmentKey {
+  public static let defaultValue: CGSize = UIScreen.main.bounds.size
+}
+
+public extension EnvironmentValues {
+  var screenSize: CGSize {
+    get { self[ScreenSizeKey.self] }
+    set { self[ScreenSizeKey.self] = newValue }
+  }
+}

Projects/Core/DesignSystem/Sources/Extension/View+Extension.swift

@@ -0,0 +1,19 @@
+//
+//  View+Extension.swift
+//  PPACUtil
+//
+//  Created by 장혜령 on 2024/07/04.
+//
+
+import SwiftUI
+
+public extension View {
+  public func cornerRadius(
+    _ radius: CGFloat,
+    corners: UIRectCorner
+  ) -> some View {
+    clipShape(RoundedCorners(radius: radius, corners: corners))
+  }
+}
+
+

Projects/Core/DesignSystem/Sources/HorizontalMimScrollView.swift

@@ -33,6 +33,5 @@ public struct HorizontalMimScrollView<Item: HorizontalMimItemProtocol, ItemView:
     }
     .contentMargins(20)
     .scrollIndicators(.hidden)
-    .frame(height: 90)
   }
 }

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

@@ -0,0 +1,34 @@
+//
+//  ListHeaderView.swift
+//  DesignSystem
+//
+//  Created by 장혜령 on 2024/06/29.
+//
+
+import SwiftUI
+import ResourceKit
+
+public struct ListHeaderView: View {
+  private var icon: Image
+  private var title: String
+
+  public init(icon: Image, title: String) {
+    self.icon = icon
+    self.title = title
+  }
+
+  public var body: some View {
+    HStack {
+      icon
+        .frame(width: 20, height: 20, alignment: .center)
+        .padding(.leading, 20)
+      Text(title)
+        .font(Font.Heading.Small.semiBold)
+      Spacer()
+    }
+  }
+}
+
+#Preview {
+  ListHeaderView(icon: ResourceKitAsset.Icon.check.swiftUIImage, title: "나의 파밈")
+}

Projects/Features/MemeDetail/Sources/Presentation/View/MemeImageView.swift → Projects/Core/DesignSystem/Sources/View/Meme/MemeImageView.swift

@@ -6,24 +6,23 @@
 //
 
 import SwiftUI
-
 import Kingfisher
 
-struct MemeImageView: View {
+public struct MemeImageView: View {
 
   // MARK: - Properties
 
   private let imageUrlString: String
 
   // MARK: - Initializers
 
-  init(imageUrlString: String) {
+  public init(imageUrlString: String) {
     self.imageUrlString = imageUrlString
   }
 
   // MARK: - UI
 
-  var body: some View {
+  public var body: some View {
     KFImage(URL(string: imageUrlString))
       .resizable()
       .loadDiskFileSynchronously()

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

@@ -0,0 +1,101 @@
+//
+//  MemeItemView.swift
+//  DesignSystem
+//
+//  Created by 장혜령 on 2024/06/29.
+//
+
+import SwiftUI
+import ResourceKit
+import PPACModels
+import Kingfisher
+
+public struct MemeItemView: View {
+  private let memeDetail: MemeDetail
+
+  public init(memeDetail: MemeDetail) {
+    self.memeDetail = memeDetail
+  }
+  public var body: some View {
+    VStack {
+      MemeItemViewWithButton(imageUrlString: memeDetail.imageUrlString)
+      MemeItemInfoView(memeName: memeDetail.title, reaction: memeDetail.reaction)
+    }
+    .padding(.bottom, 20)
+  }
+}
+
+struct MemeItemViewWithButton: View {
+  let imageUrlString: String
+  @State private var imageHeight: CGFloat = .zero
+  var body: some View {
+    ZStack(alignment: .bottomLeading) {
+      VStack {
+        ResizableMemeImageView(imageUrlString: imageUrlString, imageHeight: $imageHeight)
+      }
+      .frame(height: imageHeight)
+      HStack {
+        Spacer()
+        CircleCopyButton()
+          .padding(20)
+      }
+    }
+  }
+}
+
+struct ResizableMemeImageView: View {
+  let imageUrlString: String
+  @Binding var imageHeight: CGFloat
+
+  var body: some View {
+    GeometryReader { geometry in
+      VStack {
+        KFImage(URL(string: imageUrlString))
+          .resizable()
+          .loadDiskFileSynchronously()
+          .cacheMemoryOnly()
+          .onSuccess { result in
+            let ratio = geometry.size.width / result.image.size.width
+            imageHeight = result.image.size.height * ratio
+          }
+          .cornerRadius(12)
+          .frame(height: imageHeight)
+      }
+    }
+  }
+}
+
+
+struct MemeItemInfoView: View {
+  let memeName: String
+  let reaction: Int
+
+  var body: some View {
+    HStack {
+      VStack(alignment: .leading, spacing: 6) {
+        Text(memeName)
+          .lineLimit(2)
+        if reaction > 0 {
+          memeReactionView
+        }
+
+      }
+      .padding(.bottom, 4)
+      Spacer()
+    }
+  }
+
+  var memeReactionView: some View {
+    HStack {
+      Text("ㅋㅋ")
+        .font(Font.Family2.outLine)
+      Text("\(reaction)")
+    }
+    .foregroundStyle(Color.Text.tertiary)
+  }
+}
+
+
+#Preview {
+  MemeItemView(memeDetail: MemeDetail.mock)
+}

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

@@ -0,0 +1,71 @@
+//
+//  MemeListView.swift
+//  DesignSystem
+//
+//  Created by 장혜령 on 2024/06/29.
+//
+
+import SwiftUI
+import PPACModels
+
+public struct MemeListView: View {
+
+  private let memeDetailList: [MemeDetail]
+  private let columns = Array(repeating: GridItem(.flexible(),
+                                          spacing: 12,
+                                          alignment: .center),count: 2)
+
+  public init(memeDetailList: [MemeDetail]) {
+    self.memeDetailList = memeDetailList
+  }
+
+
+  var oddIndexedItems: [MemeDetail] {
+    memeDetailList.enumerated().compactMap { index, element in
+      return index % 2 == 0 ? element : nil
+    }
+  }
+
+  var evenIndexedItems: [MemeDetail] {
+    memeDetailList.enumerated().compactMap { index, element in
+      return index % 2 != 0 ? element : nil
+    }
+  }
+
+
+  public var body: some View {
+    ScrollView {
+      HStack {
+        LazyVStack {
+          ForEach(oddIndexedItems) { memeDetail in
+            MemeItemView(memeDetail: memeDetail)
+          }
+        }
+
+        LazyVStack {
+          ForEach(evenIndexedItems) { memeDetail in
+            MemeItemView(memeDetail: memeDetail)
+          }
+        }
+      }
+      .frame(maxWidth: .infinity) 
+    }
+    .scrollTargetBehavior(.viewAligned)
+  }
+}
+
+#Preview {
+  let mockImageList = ["https://plus.unsplash.com/premium_photo-1661892088256-0a17130b3d0d?q=80&w=3560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+                       "https://plus.unsplash.com/premium_photo-1676955432796-226f504a560b?q=80&w=3333&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1720247521923-f531207d23d8?q=80&w=2667&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+
+                       "https://images.unsplash.com/photo-1507146426996-ef05306b995a?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" ]
+
+  let memeDetailList = (0..<20)
+    .map { MemeDetail(id: "\($0)", title: MemeDetail.mock.title,
+                      keywords: MemeDetail.mock.keywords,
+                      imageUrlString: mockImageList[$0 % 4],
+                      source: MemeDetail.mock.source,
+                      isTodayMeme: true, reaction: $0 % 4) }
+  return MemeListView(memeDetailList: memeDetailList)
+}

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

@@ -0,0 +1,23 @@
+//
+//  RoundedCorners.swift
+//  DesignSystem
+//
+//  Created by 장혜령 on 2024/07/04.
+//
+
+import SwiftUI
+
+public struct RoundedCorners: Shape {
+  var radius: CGFloat = .infinity
+  var corners: UIRectCorner = .allCorners
+
+  public init(radius: CGFloat, corners: UIRectCorner) {
+    self.radius = radius
+    self.corners = corners
+  }
+
+  public func path(in rect: CGRect) -> Path {
+    let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
+    return Path(path.cgPath)
+  }
+}