feat: 마이페이지 레벨 관련 디자인 수정 (#51)

- 레벨 프로그레스바 width 변경
- 현재 레벨 표시 로띠로 표시되도록 수정

feat: 마이페이지 레벨 관련 디자인 수정

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,7 +49,7 @@ 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)
       }
     }
   }
@@ -60,12 +60,12 @@ struct LevelProgressView: View {
   }
 
   private func getCurrentLevelWidth(_ viewWidth: CGFloat) -> CGFloat {
-    let width = viewWidth / 20.0 * CGFloat(conditionCount)
-    return width < minimumWidth ? minimumWidth : width
+    let width = (viewWidth - minimumWidth) / 20.0 * CGFloat(conditionCount)
+    return width + minimumWidth
   }
 }
 
 
 #Preview {
-  LevelProgressView(level: .level1, conditionCount: 1)
+  LevelProgressView(level: .level3, conditionCount: 5)
 }

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

@@ -8,6 +8,7 @@
 import SwiftUI
 import ResourceKit
 import DesignSystem
+import Lottie
 
 struct MemeLevelConditionCheckView: View {
   let memeLevel: MemeLevelType
@@ -17,7 +18,6 @@ struct MemeLevelConditionCheckView: View {
   }
 
   private let horizantalPadding: CGFloat = 36.0
-  private let checkImageSize: CGSize = CGSize(width: 24, height: 24)
 
   var body: some View {
     VStack {
@@ -115,7 +115,7 @@ struct levelStepView: View {
     } else if levelType == currentLevel {
       return AnyView(currentLevelCircleView)
     } else {
-      return AnyView(nextLevelCircleView)
+      return AnyView(defaultCircleView)
     }
   }
 
@@ -126,20 +126,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 +159,6 @@ struct DottedLine: Shape {
 }
 
 #Preview {
-  MemeLevelConditionCheckView(memeLevel: .level3)
+  MemeLevelConditionCheckView(memeLevel: .level1)
 }
 

Projects/Features/MyPage/Sources/MemeLevelType.swift

@@ -71,6 +71,19 @@ public enum MemeLevelType: Int, CaseIterable, Identifiable, Comparable {
       return ResourceKitAsset.Icon.level4Character.swiftUIImage
     }
   }
+
+  public var levelBadgeImage: Image {
+    switch self {
+    case .level1:
+      return ResourceKitAsset.Icon.level1.swiftUIImage
+    case .level2:
+      return ResourceKitAsset.Icon.level2.swiftUIImage
+    case .level3:
+      return ResourceKitAsset.Icon.level3.swiftUIImage
+    case .level4:
+      return ResourceKitAsset.Icon.level4.swiftUIImage
+    }
+  }
 
   // MARK: Comparable
   public static func < (lhs: MemeLevelType, rhs: MemeLevelType) -> Bool {

Projects/ResourceKit/Resources/Lottie/Mypage_Level_Circle.lottie

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.5.1","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":30.0000012219251,"w":50,"h":50,"nm":"circle lottie","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[60]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[60]},{"t":25.0000010182709,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[25.276,25.458,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":0,"s":[0,0,100]},{"t":15.0000006109625,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[49.993,49.993],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.741176470588,0.792156862745,0.83137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[-0.276,-0.458],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":90.0000036657751,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}