feat(chat-character): 캐릭터 신규 이미지 표시 UI 추가

SodaLive/Sources/Chat/Character/Character.swift

@@ -10,4 +10,5 @@ struct Character: Decodable {
     let name: String
     let description: String?
     let imageUrl: String
+    let isNew: Bool
 }

SodaLive/Sources/Chat/Character/CharacterItemView.swift

@@ -21,19 +21,38 @@ struct CharacterItemView: View {
     
     var body: some View {
         VStack(alignment: .leading, spacing: 4) {
-            ZStack(alignment: .bottomLeading) {
+            ZStack(alignment: .leading) {
                 DownsampledKFImage(
                     url: URL(string: character.imageUrl),
                     size: CGSize(width: size, height: size)
                 )
                 .cornerRadius(12)
                 
-                if isShowRank {
+                VStack {
-                    Text("\(rank)")
+                    if character.isNew {
-                        .font(.custom(Font.preBold.rawValue, size: 72))
+                        HStack {
-                        .foregroundColor(.white)
+                            Spacer()
-                        .lineLimit(1)
+                            
-                        .frame(height: capHeight)
+                            Text("N")
+                                .font(.custom(Font.preRegular.rawValue, size: 18))
+                                .foregroundColor(.white)
+                                .frame(width: 30, height: 30)
+                                .background(Color.button)
+                                .clipShape(Circle())
+                        }
+                        .padding(.top, 8)
+                        .padding(.trailing, 8)
+                    }
+                    
+                    Spacer()
+                    
+                    if isShowRank {
+                        Text("\(rank)")
+                            .font(.custom(Font.preBold.rawValue, size: 72))
+                            .foregroundColor(.white)
+                            .lineLimit(1)
+                            .frame(height: capHeight)
+                    }
                 }
             }
             
@@ -56,7 +75,7 @@ struct CharacterItemView: View {
 
 #Preview {
     CharacterItemView(
-        character: Character(characterId: 1, name: "찰리", description: "새로운 친구", imageUrl: "https://picsum.photos/300"),
+        character: Character(characterId: 1, name: "찰리", description: "새로운 친구", imageUrl: "https://picsum.photos/300", isNew: true),
         size: 168,
         rank: 20,
         isShowRank: true

SodaLive/Sources/Chat/Character/CharacterSectionView.swift

@@ -54,8 +54,8 @@ struct CharacterSectionView: View {
     CharacterSectionView(
         title: "신규 캐릭터",
         items: [
-            Character(characterId: 1, name: "찰리", description: "새로운 친구", imageUrl: "https://picsum.photos/300"),
+            Character(characterId: 1, name: "찰리", description: "새로운 친구", imageUrl: "https://picsum.photos/300", isNew: true),
-            Character(characterId: 2, name: "데이지", description: "", imageUrl: "https://picsum.photos/300")
+            Character(characterId: 2, name: "데이지", description: "", imageUrl: "https://picsum.photos/300", isNew: false)
         ],
         isShowRank: true
     )

SodaLive/Sources/Chat/Character/Detail/CharacterDetailView.swift

@@ -93,7 +93,8 @@ struct CharacterDetailView: View {
                                                                 characterId: otherCharacter.characterId,
                                                                 name: otherCharacter.name,
                                                                 description: otherCharacter.tags,
-                                                                imageUrl: otherCharacter.imageUrl
+                                                                imageUrl: otherCharacter.imageUrl,
+                                                                isNew: false
                                                             ),
                                                             size: screenSize().width * 0.42,
                                                             rank: 0,