feat(home): AI 캐릭터 섹션을 연결한다

2026-06-29 18:56:35 +09:00
parent 638aa26789
commit 561e991050
7 changed files with 256 additions and 39 deletions
--- a/SodaLive/Sources/V2/Component/Card/AiCharacterCard.swift
+++ b/SodaLive/Sources/V2/Component/Card/AiCharacterCard.swift
@@ -1,6 +1,10 @@
 import SwiftUI

 struct AiCharacterCard: View {
+    static let baseDeviceWidth: CGFloat = 402
+    static let maxCardWidth: CGFloat = 185
+    static let maxCardHeight: CGFloat = 278
+
    let name: String
    let description: String
    let profileImageUrl: String?
@@ -8,57 +12,100 @@ struct AiCharacterCard: View {
    let originalTitle: String?

    var body: some View {
-        HStack(alignment: .top, spacing: SodaSpacing.s12) {
-            DownsampledKFImage(url: URL(string: profileImageUrl ?? ""), size: CGSize(width: 72, height: 72))
-                .background(Color.gray800)
-                .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+        let cardSize = Self.responsiveSize()
+
+        ZStack(alignment: .top) {
+            Color.gray900
+
+            DownsampledKFImage(
+                url: URL(string: profileImageUrl ?? ""),
+                size: CGSize(width: cardSize.width, height: cardSize.width)
+            )
+            .frame(width: cardSize.width, height: cardSize.width)
+            .background(Color.gray800)
+
+            LinearGradient(
+                colors: [Color.gray900.opacity(0), Color.gray900],
+                startPoint: .top,
+                endPoint: .bottom
+            )
+            .frame(width: cardSize.width, height: cardSize.width)
+
+            VStack(alignment: .leading, spacing: SodaSpacing.s6) {
+                Spacer()

-            VStack(alignment: .leading, spacing: SodaSpacing.s4) {
                Text(name)
-                    .appFont(.heading4)
+                    .appFont(.heading3)
                    .foregroundColor(.white)
                    .lineLimit(1)
                    .truncationMode(.tail)

                Text(description)
                    .appFont(.body5)
-                    .foregroundColor(Color.gray500)
+                    .foregroundColor(.white)
                    .lineLimit(2)
                    .truncationMode(.tail)

-                HStack(spacing: SodaSpacing.s8) {
-                    if let chatCount {
-                        Text("Chat \(chatCount)")
-                            .appFont(.caption2)
-                            .foregroundColor(Color.gray500)
-                    }
-
-                    if let originalTitle, !originalTitle.isEmpty {
-                        Text(originalTitle)
-                            .appFont(.caption2)
-                            .foregroundColor(Color.gray500)
-                            .lineLimit(1)
-                    }
+                if let originalTitle, !originalTitle.isEmpty {
+                    Text(originalTitle)
+                        .appFont(.caption2)
+                        .foregroundColor(Color.soda300)
+                        .lineLimit(1)
+                        .truncationMode(.tail)
                }
            }
+            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
+            .padding(.horizontal, SodaSpacing.s12)
+            .padding(.bottom, SodaSpacing.s20)

-            Spacer(minLength: 0)
+            if let chatCount {
+                HStack(spacing: 2) {
+                    Image(systemName: "bubble.fill")
+                        .font(.system(size: 14, weight: .medium))
+                        .foregroundColor(.white)
+
+                    Text(I18n.HomeRecommendation.compactChatCount(chatCount))
+                        .appFont(.body5)
+                        .foregroundColor(Color.gray100)
+                }
+                .padding(.horizontal, SodaSpacing.s4)
+                .padding(.vertical, 2)
+                .background(Color.black.opacity(0.6))
+                .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s4, style: .continuous))
+                .frame(maxWidth: .infinity, alignment: .trailing)
+                .padding(.top, SodaSpacing.s6)
+                .padding(.trailing, SodaSpacing.s6)
+            }
        }
-        .padding(SodaSpacing.s12)
-        .background(Color.gray900)
+        .frame(width: cardSize.width, height: cardSize.height)
        .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
    }
+
+    static func responsiveSize(deviceWidth: CGFloat = UIScreen.main.bounds.width) -> CGSize {
+        let scale = min(deviceWidth / baseDeviceWidth, 1)
+        return CGSize(width: maxCardWidth * scale, height: maxCardHeight * scale)
+    }
 }

 struct AiCharacterCard_Previews: PreviewProvider {
    static var previews: some View {
-        AiCharacterCard(
-            name: "AI 캐릭터",
-            description: "캐릭터 설명이 표시됩니다.",
-            profileImageUrl: nil,
-            chatCount: 128,
-            originalTitle: "원작"
-        )
+        VStack(spacing: SodaSpacing.s20) {
+            AiCharacterCard(
+                name: "캐릭터 이름",
+                description: "캐릭터 소개가 들어가는 부분입니다 넘어가는 경우 ...처리",
+                profileImageUrl: "https://picsum.photos/500/500",
+                chatCount: 14_000,
+                originalTitle: nil
+            )
+
+            AiCharacterCard(
+                name: "캐릭터 이름",
+                description: "캐릭터 소개가 들어가는 부분입니다 넘어가는 경우 ...처리",
+                profileImageUrl: nil,
+                chatCount: 128,
+                originalTitle: "작품 이름"
+            )
+        }
        .padding(SodaSpacing.s20)
        .background(Color.black)
        .previewLayout(.sizeThatFits)
--- a/SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeAiCharacterSection.swift
+++ b/SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeAiCharacterSection.swift
@@ -0,0 +1,74 @@
+import SwiftUI
+
+struct MainHomeAiCharacterSection: View {
+    let items: [HomeAiCharacterItem]
+    let onTapCharacter: (Int) -> Void
+
+    init(
+        items: [HomeAiCharacterItem],
+        onTapCharacter: @escaping (Int) -> Void = { _ in }
+    ) {
+        self.items = items
+        self.onTapCharacter = onTapCharacter
+    }
+
+    var body: some View {
+        if !items.isEmpty {
+            VStack(alignment: .leading, spacing: SodaSpacing.s14) {
+                SectionTitle(title: I18n.HomeRecommendation.aiCharacterSectionTitle)
+
+                ScrollView(.horizontal, showsIndicators: false) {
+                    LazyHStack(alignment: .center, spacing: SodaSpacing.s4) {
+                        ForEach(items, id: \.self) { item in
+                            Button {
+                                onTapCharacter(item.characterId)
+                            } label: {
+                                AiCharacterCard(
+                                    name: item.name,
+                                    description: item.description,
+                                    profileImageUrl: item.profileImage,
+                                    chatCount: item.totalChatCount,
+                                    originalTitle: item.originalWorkTitle
+                                )
+                            }
+                            .buttonStyle(.plain)
+                        }
+                    }
+                    .padding(.horizontal, SodaSpacing.s14)
+                }
+            }
+        }
+    }
+}
+
+struct MainHomeAiCharacterSection_Previews: PreviewProvider {
+    private static let previewImageUrl = "https://picsum.photos/500/500"
+
+    static var previews: some View {
+        MainHomeAiCharacterSection(
+            items: [
+                HomeAiCharacterItem(
+                    characterId: 1,
+                    creatorId: 10,
+                    name: "캐릭터 이름",
+                    description: "캐릭터 소개가 들어가는 부분입니다 넘어가는 경우 ...처리",
+                    profileImage: previewImageUrl,
+                    totalChatCount: 14_000,
+                    originalWorkTitle: nil
+                ),
+                HomeAiCharacterItem(
+                    characterId: 2,
+                    creatorId: 11,
+                    name: "캐릭터 이름",
+                    description: "캐릭터 소개가 들어가는 부분입니다 넘어가는 경우 ...처리",
+                    profileImage: previewImageUrl,
+                    totalChatCount: 128,
+                    originalWorkTitle: "작품 이름"
+                )
+            ]
+        )
+        .padding(.vertical, SodaSpacing.s20)
+        .background(Color.black)
+        .previewLayout(.sizeThatFits)
+    }
+}
--- a/SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeRecentDebutCreatorSection.swift
+++ b/SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeRecentDebutCreatorSection.swift
@@ -33,20 +33,19 @@ struct MainHomeRecentDebutCreatorSection: View {
 }

 private struct MainHomeRecentDebutCreatorItemView: View {
-    private static let itemWidth: CGFloat = 185
-    private static let itemHeight: CGFloat = 234
-
    let item: HomeCreatorItem
    let action: () -> Void

    var body: some View {
+        let itemSize = AiCharacterCard.responsiveSize()
+
        Button(action: action) {
            ZStack(alignment: .bottom) {
                DownsampledKFImage(
                    url: URL(string: item.creatorProfileImage),
-                    size: CGSize(width: Self.itemWidth, height: Self.itemHeight)
+                    size: itemSize
                )
-                .frame(width: Self.itemWidth, height: Self.itemHeight)
+                .frame(width: itemSize.width, height: itemSize.height)
                .background(Color.gray800)
                .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))

@@ -55,7 +54,7 @@ private struct MainHomeRecentDebutCreatorItemView: View {
                    startPoint: .top,
                    endPoint: .bottom
                )
-                .frame(height: 80)
+                .frame(height: min(80, itemSize.height))

                Text(item.creatorNickname)
                    .appFont(.heading4)
@@ -65,7 +64,7 @@ private struct MainHomeRecentDebutCreatorItemView: View {
                    .padding(.horizontal, SodaSpacing.s12)
                    .padding(.bottom, SodaSpacing.s20)
            }
-            .frame(width: Self.itemWidth, height: Self.itemHeight)
+            .frame(width: itemSize.width, height: itemSize.height)
            .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
        }
        .buttonStyle(.plain)
--- a/SodaLive/Sources/V2/Main/Home/Recommendation/MainHomeRecommendationView.swift
+++ b/SodaLive/Sources/V2/Main/Home/Recommendation/MainHomeRecommendationView.swift
@@ -42,6 +42,11 @@ struct MainHomeRecommendationView: View {
                            items: viewModel.recommendations?.recentDebutCreators ?? [],
                            onTapCreator: onTapCreator
                        )
+
+                        MainHomeAiCharacterSection(
+                            items: viewModel.recommendations?.aiCharacters ?? [],
+                            onTapCharacter: onTapCharacter
+                        )
                    }
                    .padding(.vertical, SodaSpacing.s20)
                }