feat(character): 인기 캐릭터 섹션 추가

SodaLive/Sources/Chat/Character/CharacterItemView.swift

@@ -12,18 +12,34 @@ struct CharacterItemView: View {
     
     let character: Character
     let size: CGFloat
+    let rank: Int
+    let isShowRank: Bool
+    
+    private var capHeight: CGFloat {
+        UIFont(name: Font.preBold.rawValue, size: 72)?.capHeight ?? 72
+    }
     
     var body: some View {
         VStack(alignment: .leading, spacing: 4) {
-            KFImage(URL(string: character.imageUrl))
-                .placeholder { Color.gray.opacity(0.2) }
-                .retry(maxCount: 2, interval: .seconds(1))
-                .cancelOnDisappear(true)
-                .resizable()
-                .scaledToFill()
-                .frame(width: size, height: size)
-                .clipped()
-                .cornerRadius(12)
+            ZStack(alignment: .bottomLeading) {
+                KFImage(URL(string: character.imageUrl))
+                    .placeholder { Color.gray.opacity(0.2) }
+                    .retry(maxCount: 2, interval: .seconds(1))
+                    .cancelOnDisappear(true)
+                    .resizable()
+                    .scaledToFill()
+                    .frame(width: size, height: size)
+                    .clipped()
+                    .cornerRadius(12)
+                
+                if isShowRank {
+                    Text("\(rank)")
+                        .font(.custom(Font.preBold.rawValue, size: 72))
+                        .foregroundColor(.white)
+                        .lineLimit(1)
+                        .frame(height: capHeight)
+                }
+            }
             
             Text(character.name)
                 .font(.custom(Font.preRegular.rawValue, size: 18))
@@ -45,6 +61,8 @@ struct CharacterItemView: View {
 #Preview {
     CharacterItemView(
         character: Character(characterId: 1, name: "찰리", description: "새로운 친구", imageUrl: "https://picsum.photos/300"),
-        size: 168
+        size: 168,
+        rank: 20,
+        isShowRank: true
     )
 }