Merge pull request #62 from mash-up-kr/feature/#51-mypage-hyerjang

Fix: 마이페이지 디자인 수정 및 refresh 후 업데이트 되지 않는 문제 수정

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

@@ -18,17 +18,19 @@ public struct ListHeaderView: View {
   }
 
   public var body: some View {
-    HStack {
+    HStack(spacing: 8) {
       icon
+        .resizable()
         .frame(width: 20, height: 20, alignment: .center)
-        .padding(.leading, 20)
       Text(title)
         .font(Font.Heading.Small.semiBold)
       Spacer()
     }
+    .padding(.vertical, 18)
+    .padding(.horizontal, 20)
   }
 }
 
 #Preview {
-  ListHeaderView(icon: ResourceKitAsset.Icon.check.swiftUIImage, title: "나의 파밈")
+  ListHeaderView(icon: ResourceKitAsset.Icon.successStoke.swiftUIImage, title: "나의 파밈")
 }

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

@@ -50,7 +50,10 @@ struct MemeItemViewWithButton: View {
   var body: some View {
     ZStack(alignment: .bottomLeading) {
       VStack {
-        ResizableMemeImageView(imageUrlString: memeDetail.imageUrlString, imageHeight: $imageHeight)
+        ResizableMemeImageView(
+          imageUrlString: memeDetail.imageUrlString,
+          imageHeight: $imageHeight
+        )
       }
       .frame(height: imageHeight)
       HStack {
@@ -60,10 +63,10 @@ struct MemeItemViewWithButton: View {
           height: 42,
           image: ResourceKitAsset.Icon.copy.swiftUIImage,
           action: {
-            print("Copy~~")
+            memeCopyHandler?(memeDetail)
           }
         )
-        .padding(20)
+        .padding(10)
       }
     }
   }
@@ -82,7 +85,14 @@ struct ResizableMemeImageView: View {
           .cacheMemoryOnly()
           .onSuccess { result in
             let ratio = geometry.size.width / result.image.size.width
-            imageHeight = result.image.size.height * ratio
+            let newHeight = result.image.size.height * ratio
+            if newHeight < 80 {
+              imageHeight = 80
+            } else if newHeight > 300 {
+              imageHeight = 300
+            } else {
+              imageHeight = newHeight
+            }
           }
           .cornerRadius(12)
           .frame(height: imageHeight)
@@ -115,8 +125,9 @@ struct MemeItemInfoView: View {
   var memeReactionView: some View {
     HStack {
       Text("ㅋㅋ")
-        .font(Font.Family2.outLine)
+        .font(Font.Family2.xlarge)
       Text("\(reaction)")
+        .font(Font.Body.Small.medium)
     }
     .foregroundStyle(Color.Text.tertiary)
   }

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

@@ -10,13 +10,6 @@ import PPACModels
 
 public struct MemeListView: View {
   @Binding var memeDetailList: [MemeDetail]
-  private let columns = Array(
-    repeating: GridItem(
-      .flexible(),
-      spacing: 12,
-      alignment: .center
-    ), count: 2
-  )
   private let memeClickHandler: ((MemeDetail) -> ())?
   private let memeCopyHandler: ((MemeDetail) -> ())?
   private let onAppearLastMemeHandler: (() -> ())?
@@ -82,10 +75,13 @@ public struct MemeListView: View {
           }
         }
       }
-      // FIXME: pull to refresh 했을 때 onAppear가 호출되지 않아서 onChange로 임시 호출, 수정필요
-//      .onChange(of: memeDetailList) {
-//        onAppearLastMemeHandler?()
-//      }
+      .onChange(of: memeDetailList, initial: false) { oldList, newList in
+        // refresh되면서 newList가 oldList보다 작아진 순간에만 호출되도록
+        guard newList.count < oldList.count else { return }
+        if newList.contains(where: { $0.id == lastMemeId }) {
+          onAppearLastMemeHandler?()
+        }
+      }
       .frame(maxWidth: .infinity)
     }
     .scrollTargetBehavior(.viewAligned)

Projects/Core/PPACData/Sources/Repository/UserRepositoryImpl.swift

@@ -64,7 +64,17 @@ public final class UserRepositoryImpl: UserRepository {
     switch result {
     case .success(let data):
       guard let memeWithPaginationResponseDTO = data.data else { throw NetworkError.dataDecodingError }
-      return memeWithPaginationResponseDTO.toModel()
+      var result = memeWithPaginationResponseDTO.toModel()
+      let memeList = result.memeList
+        .map {
+          var meme = $0
+          meme.reaction = 0
+          return meme
+        }
+      return MemeListWithPagination(
+        pagination: result.pagination,
+        memeList: memeList
+      )
     case .failure(let error):
       throw error
     }

Projects/Features/MyPage/Sources/Components/LevelProgressView.swift

@@ -33,7 +33,7 @@ struct LevelProgressView: View {
 
   var levelView: some View {
     HStack {
-      ResourceKitAsset.Icon.level1.swiftUIImage
+      level.levelBadgeImage
         .padding(.leading, 12)
       Text("LV.\(level.rawValue)")
         .font(Font.Body.Xlarge.semiBold)
@@ -49,23 +49,24 @@ struct LevelProgressView: View {
         RoundedRectangle(cornerRadius: 25, style: .circular)
           .stroke(Color.Border.primary, lineWidth: 2, fill: Color.Background.brand)
           .frame(width: isAnimation ? currnetlevelWidth : minimumWidth)
-          .animation(.easeInOut(duration: 1), value: isAnimation)
+          .animation(.easeInOut(duration: 1.5), value: isAnimation)
       }
     }
   }
 
   var backgroundProgressView: some View {
     RoundedRectangle(cornerRadius: 25, style: .circular)
-      .stroke(Color.Border.secondary, lineWidth: 1, fill: Color.Background.assistive)
+      .stroke(Color.Border.tertiary, lineWidth: 1, fill: Color.Background.assistive)
   }
 
   private func getCurrentLevelWidth(_ viewWidth: CGFloat) -> CGFloat {
-    let width = viewWidth / 20.0 * CGFloat(conditionCount)
-    return width < minimumWidth ? minimumWidth : width
+    let count = conditionCount > 20 ? 20 : conditionCount
+    let width = (viewWidth - minimumWidth) / 20.0 * CGFloat(count)
+    return width + minimumWidth
   }
 }
 
 
 #Preview {
-  LevelProgressView(level: .level1, conditionCount: 1)
+  LevelProgressView(level: .level3, conditionCount: 5)
 }

Projects/Features/MyPage/Sources/Components/MemeLevelCondition/MemeLevelConditionCheckView.swift

@@ -8,16 +8,17 @@
 import SwiftUI
 import ResourceKit
 import DesignSystem
+import Lottie
 
 struct MemeLevelConditionCheckView: View {
-  let memeLevel: MemeLevelType
+  let level: MemeLevelType
+  let conditionCount: Int
 
   private var pregressStepLevel: CGFloat {
-    return CGFloat(memeLevel.rawValue - 1)
+    return CGFloat(level.rawValue - 1)
   }
 
   private let horizantalPadding: CGFloat = 36.0
-  private let checkImageSize: CGSize = CGSize(width: 24, height: 24)
 
   var body: some View {
     VStack {
@@ -27,7 +28,7 @@ struct MemeLevelConditionCheckView: View {
     }
     .padding(.top, 40)
     .padding(.horizontal, 20)
-    .padding(.bottom, 30)
+    .padding(.bottom, 10)
     .background {
       RoundedCorners(radius: 20, corners: [.bottomLeft, .bottomRight])
         .stroke(Color.Border.tertiary, lineWidth: 1, fill: Color.Background.white)
@@ -65,7 +66,11 @@ struct MemeLevelConditionCheckView: View {
   var stepCheckView: some View {
     HStack {
       ForEach(MemeLevelType.allCases) { type in
-        levelStepView(levelType: type, currentLevel: memeLevel)
+        levelStepView(
+          levelType: type,
+          currentLevel: level,
+          conditionCount: conditionCount
+        )
         if type != .level4 {
           Spacer()
         }
@@ -83,8 +88,23 @@ struct MemeLevelConditionCheckView: View {
 struct levelStepView: View {
   let levelType: MemeLevelType
   let currentLevel: MemeLevelType
+  let conditionCount: Int
 
+  var levelState: LevelState {
+    if currentLevel == .level4 && conditionCount > 20 {
+      return .completed
+    } else if levelType < currentLevel {
+      return .completed
+    } else if levelType == currentLevel {
+      return .inProgress
+    }
+    return .notStarted
+  }
 
+  var isCompletedLevel: Bool {
+    return levelState == .completed
+  }
+
   var body: some View {
     VStack(alignment: .center, spacing: 10) {
       stepCheckImageView
@@ -99,23 +119,32 @@ struct levelStepView: View {
 
   var stepDescriptionChip: some View {
     Text(levelType.levelStepText)
-      .foregroundStyle(Color.Text.secondary)
+      .foregroundStyle(
+        isCompletedLevel
+        ? Color.Text.brand
+        : Color.Text.secondary
+      )
       .font(Font.Body.Small.semiBold)
       .padding(.vertical, 5)
       .padding(.horizontal, 10)
       .background {
         RoundedRectangle(cornerRadius: 25, style: .continuous)
-          .foregroundStyle(Color.Background.assistive)
+          .foregroundStyle(
+            isCompletedLevel
+            ? Color.Background.brandassistive
+            : Color.Background.assistive
+          )
       }
   }
-  
+
   var levelCircleView: some View {
-    if levelType < currentLevel {
-      return AnyView(completedLevelCircleView)
-    } else if levelType == currentLevel {
-      return AnyView(currentLevelCircleView)
-    } else {
-      return AnyView(nextLevelCircleView)
+    switch levelState {
+    case .inProgress:
+      AnyView(currentLevelCircleView)
+    case .notStarted:
+      AnyView(defaultCircleView)
+    case .completed:
+      AnyView(completedLevelCircleView)
     }
   }
 
@@ -126,20 +155,18 @@ struct levelStepView: View {
 
   var currentLevelCircleView: some View {
     ZStack {
-      Circle()
-        .foregroundStyle(Color.Background.assistive)
-        .frame(width: 20, height: 20, alignment: .center)
-      Circle()
-        .foregroundStyle(Color.Text.assistive)
-        .frame(width: 8, height: 8, alignment: .center)
+      LottieView(animation: AnimationAsset.mypageLevelCircle.animation)
+        .looping()
+      defaultCircleView
     }
   }
 
-  var nextLevelCircleView: some View {
+  var defaultCircleView: some View {
     Circle()
       .foregroundStyle(Color.Text.assistive)
       .frame(width: 8, height: 8, alignment: .center)
   }
+
 }
 
 struct DottedLine: Shape {
@@ -161,6 +188,6 @@ struct DottedLine: Shape {
 }
 
 #Preview {
-  MemeLevelConditionCheckView(memeLevel: .level3)
+  MemeLevelConditionCheckView(level: .level1, conditionCount: 10)
 }
 

Projects/Features/MyPage/Sources/Components/MemeLevelCondition/MemeLevelConditionInfoView.swift

@@ -10,13 +10,18 @@ import ResourceKit
 import DesignSystem
 
 struct MemeLevelConditionInfoView: View {
+  let level: MemeLevelType
   let conditionCount: Int
 
+  var isCompletedLevel: Bool {
+    return level == .level4 && conditionCount > 20
+  }
+
   var body: some View {
     HStack(alignment: .top, spacing: 0) {
       confitionInfoView
       Spacer()
-      countChipView
+      conditionCountChipView
     }
     .padding(.horizontal, 20)
     .padding(.top, 16)
@@ -31,10 +36,19 @@ struct MemeLevelConditionInfoView: View {
   var confitionInfoView: some View {
     VStack(alignment: .leading, spacing: 4) {
       titleLabel
+        .padding(.top, 6)
       descriptionLabel
     }
   }
 
+  var conditionCountChipView: some View {
+    if isCompletedLevel {
+      AnyView(completedChipview)
+    } else {
+      AnyView(countChipView)
+    }
+  }
+
   var countChipView: some View {
     HStack {
       Text("\(conditionCount)")
@@ -47,15 +61,37 @@ struct MemeLevelConditionInfoView: View {
     .background {
       RoundedRectangle(cornerRadius: 30, style: .continuous)
         .foregroundStyle(Color.Background.white)
-        .frame(width: 56, height: 30)
+        .frame(width: 56, height: 27)
     }
     .font(Font.Body.Large.semiBold)
+  }
+
+  var completedChipview: some View {
+    HStack(alignment: .center) {
+      ResourceKitAsset.Icon.check.swiftUIImage
+        .resizable()
+        .renderingMode(.template)
+        .frame(width: 12, height: 12)
+        .padding(.trailing, -4)
+      Text("달성완료")
+        .font(Font.Body.Medium.semiBold)
+    }
+    .background {
+      RoundedRectangle(cornerRadius: 30, style: .continuous)
+        .foregroundStyle(Color.Background.white)
+        .frame(width: 85, height: 27)
+    }
+    .foregroundStyle(Color.Text.tertiary)
     .padding(.vertical, 5)
     .padding(.horizontal, 10)
   }
 
+  var titleText: String {
+    return level == .level4 ? "최종 레벨 달성 미션" : "레벨업하고 싶다면"
+  }
+
   var titleLabel: some View {
-    Text("다음 레벨 달성 조건")
+    Text(titleText)
       .foregroundStyle(Color.Text.tertiary)
       .font(Font.Body.Medium.semiBold)
   }
@@ -68,5 +104,5 @@ struct MemeLevelConditionInfoView: View {
 }
 
 #Preview {
-  MemeLevelConditionInfoView(conditionCount: 15)
+  MemeLevelConditionInfoView(level: .level2, conditionCount: 12)
 }