feat: 탭바 디자인 수정 및 로띠 적용 (#63)

Projects/Core/DesignSystem/Sources/MainTab/MainTab.swift

@@ -6,7 +6,9 @@
 //
 
 import SwiftUI
+
 import ResourceKit
+import Lottie
 
 public enum MainTab: String, CaseIterable, Identifiable {
   case recommend
@@ -37,6 +39,17 @@ public enum MainTab: String, CaseIterable, Identifiable {
     }
   }
 
+  public var lottieAnimation: LottieAnimation? {
+    switch self {
+    case .recommend:
+      AnimationAsset.tabRecommand.animation
+    case .search:
+      AnimationAsset.tabSearch.animation
+    case .mypage:
+      AnimationAsset.tabMy.animation
+    }
+  }
+
   public var title: String {
     switch self {
     case .recommend:

Projects/Core/DesignSystem/Sources/MainTab/MainTabView.swift

@@ -6,7 +6,9 @@
 //
 
 import SwiftUI
+
 import ResourceKit
+import Lottie
 
 public struct CustomTabBarView: View {
   @Binding public var selectedTab: MainTab
@@ -23,7 +25,7 @@ public struct CustomTabBarView: View {
       }
       Spacer(minLength: 20)
     }
-    .frame(maxWidth: .infinity, maxHeight: 98)
+    .frame(maxWidth: .infinity, maxHeight: 88)
     .background(.white)
     .clipShape(
       .rect(
@@ -37,9 +39,10 @@ public struct CustomTabBarView: View {
 
 
 public struct TabItemView: View {
-
   let tab: MainTab
   let isSelected: Bool
+  @State var playbackMode: LottiePlaybackMode = .paused(at: .progress(100))
+  @State var isAnimationFinished: Bool = false
 
   var tabImage: Image {
     return isSelected ? tab.selectedImage : tab.image
@@ -51,16 +54,34 @@ public struct TabItemView: View {
 
   public var body: some View {
     VStack {
-      tabImage
-        .frame(width: 24, height: 24)
-        .padding(.bottom, 2)
-
+      tabImageView
       Text(tab.title)
-        .font(Font.Weight.semiBold)
+        .font(Font.Weight.medium)
     }
     .foregroundStyle(color)
     .padding(40)
   }
+
+  var tabImageView: some View {
+    ZStack {
+      if !isAnimationFinished && isSelected {
+        LottieView(animation: tab.lottieAnimation)
+          .playing()
+          .animationDidFinish { _ in
+            isAnimationFinished = true
+          }
+          .resizable()
+          .frame(width: 24, height: 24)
+      } else {
+        tabImage
+          .resizable()
+          .frame(width: 24, height: 24)
+
+      }
+    }
+    .padding(.bottom, 6)
+  }
+
 }
 
 struct TabBarModifier: ViewModifier {

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

@@ -32,8 +32,8 @@ public struct MemeItemView: View {
           memeClickHandler?(memeDetail)
         }
       MemeItemInfoView(memeName: memeDetail.title, reaction: memeDetail.reaction)
+        .padding(.top, 10)
     }
-    .padding(.bottom, 20)
   }
 }
 
@@ -117,7 +117,6 @@ struct MemeItemInfoView: View {
         }
 
       }
-      .padding(.bottom, 4)
       Spacer()
     }
   }

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

@@ -45,7 +45,7 @@ public struct MemeListView: View {
   public var body: some View {
     ScrollView {
       HStack(alignment: .top) {
-        LazyVStack {
+        LazyVStack(spacing: 20) {
           ForEach(oddIndexedItems) { memeDetail in
             MemeItemView(
               memeDetail: memeDetail,
@@ -60,7 +60,7 @@ public struct MemeListView: View {
           }
         }
 
-        LazyVStack {
+        LazyVStack(spacing: 20) {
           ForEach(evenIndexedItems) { memeDetail in
             MemeItemView(
               memeDetail: memeDetail,

Projects/ResourceKit/Resources/Lottie/Tab_My.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":60.0000024438501,"w":100,"h":100,"nm":"mypage_new","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 3 Outlines","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[0]},{"t":15.0000006109625,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.292,7.292],[0.7620000000000005,-7.292]],"o":[[7.292,-0.7620000000000005],[-7.292,-7.292]],"v":[[7.292,7.292],[-7.292,-7.292]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":7.5,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[71.875,67.708],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[49.998,28.306,0],"ix":2},"a":{"a":0,"k":[49.998,28.306,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":10.0000004073083,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-8.721,15.79],[15.79,8.72],[8.719000000000001,-15.79],[-15.79,-8.721]],"o":[[8.719000000000001,15.79],[15.79,-8.721],[-8.721,-15.79],[-15.79,8.72]],"v":[[-0.001,15.79],[15.79,0],[-0.001,-15.79],[-15.79,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.824,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,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":[49.998,28.306],"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":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50.004,71.64,0],"ix":2},"a":{"a":0,"k":[50.004,71.64,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":10.0000004073083,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[33.644000000000005,4.545000000000001],[-20.743000000000002,12.389],[-34.187999999999995,3.758],[-22.816000000000003,-21.616999999999997],[-1.788,-15.238],[0.619,-14.885],[9.686,-17.635],[35.806999999999995,-10.860000000000001]],"o":[[2.6190000000000033,21.63],[-33.703,4.541],[-35.808,-10.82],[-9.618,-17.613],[-0.6240000000000001,-14.885],[1.784,-15.238],[22.85,-21.629],[34.186,3.7249999999999996]],"v":[[32.84,4.988],[-32.954,4.995],[-34.285,2.887],[-9.618,-17.613],[-1.788,-15.238],[1.784,-15.238],[9.686,-17.635],[34.288,2.812]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.824,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,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":[50.002,73.721],"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":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}

Projects/ResourceKit/Resources/Lottie/Tab_Recommand.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":60.0000024438501,"w":100,"h":100,"nm":"recommand_new","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 3 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-21.487000000000002,-39.725],[14.583,-39.725],[27.083,-33.797000000000004],[27.083,26.482],[21.486,39.725],[-14.583,39.725],[-27.083,33.795],[-27.083,-26.484]],"o":[[-14.583,-39.725],[21.486,-39.725],[27.083,-26.484],[27.083,33.795],[14.583,39.725],[-21.487000000000002,39.725],[-27.083,26.482],[-27.083,-33.797000000000004]],"v":[[-14.583,-39.725],[14.583,-39.725],[27.083,-26.484],[27.083,26.482],[14.583,39.725],[-14.583,39.725],[-27.083,26.482],[-27.083,-26.484]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10.292,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[50,50],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-10.417,-2.083],[-2.083,6.25],[10.417,-6.25]],"o":[[-10.417,-2.083],[-2.083,6.25],[10.417,-6.25]],"v":[[-10.417,-2.083],[-2.083,6.25],[10.417,-6.25]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[50,50],"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":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[91.667,25],[91.667,75]],"o":[[91.667,25],[91.667,75]],"v":[[91.667,25],[91.667,75]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,0.741176470588,0.627450980392,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[8.333,25],[8.333,75]],"o":[[8.333,25],[8.333,75]],"v":[[8.333,25],[8.333,75]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,0.741176470588,0.627450980392,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"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":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":10.0000004073083,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[23.45,35.778],[-23.449,35.778],[-23.449,-35.778],[23.45,-35.778]],"o":[[23.45,35.778],[-23.449,35.778],[-23.449,-35.778],[23.45,-35.778]],"v":[[23.45,35.778],[-23.449,35.778],[-23.449,-35.778],[23.45,-35.778]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,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":[49.611,50.415],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}