feat(creator): 팬Talk 탭을 추가한다

2026-07-05 00:44:03 +09:00
parent 7c98af0c7d
commit f5ead536ea
16 changed files with 1250 additions and 28 deletions
--- a/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelFloatingActionMenu.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelFloatingActionMenu.swift
@@ -6,7 +6,6 @@ struct CreatorChannelFloatingActionMenu: View {
    let onTapAudioContent: () -> Void
    let onTapCreateLive: () -> Void

-    private let buttonSize: CGFloat = 66
    private let animation = Animation.interpolatingSpring(mass: 1, stiffness: 256, damping: 24, initialVelocity: 0)

    var body: some View {
@@ -24,28 +23,28 @@ struct CreatorChannelFloatingActionMenu: View {

            VStack(spacing: SodaSpacing.s14) {
                if isPresented {
-                    floatingButton(
+                    CreatorChannelFloatingIconButton(
                        imageName: "ic_new_upload_community_post",
                        backgroundColor: Color.soda400,
                        accessibilityLabel: I18n.CreatorChannelHome.uploadCommunityPost,
                        action: onTapCommunityPost
                    )

-                    floatingButton(
+                    CreatorChannelFloatingIconButton(
                        imageName: "ic_new_upload_audio",
                        backgroundColor: Color.soda400,
                        accessibilityLabel: I18n.CreatorChannelHome.uploadAudioContent,
                        action: onTapAudioContent
                    )

-                    floatingButton(
+                    CreatorChannelFloatingIconButton(
                        imageName: "ic_new_create_live",
                        backgroundColor: Color.soda800,
                        accessibilityLabel: I18n.CreatorChannelHome.createLive,
                        action: onTapCreateLive
                    )

-                    floatingButton(
+                    CreatorChannelFloatingIconButton(
                        imageName: "ic_new_x_black",
                        backgroundColor: Color.white,
                        accessibilityLabel: I18n.CreatorChannelHome.closeFloatingMenu
@@ -55,7 +54,7 @@ struct CreatorChannelFloatingActionMenu: View {
                        }
                    }
                } else {
-                    floatingButton(
+                    CreatorChannelFloatingIconButton(
                        imageName: "ic_plus_no_bg",
                        backgroundColor: Color.soda400,
                        accessibilityLabel: "FAB"
@@ -72,23 +71,6 @@ struct CreatorChannelFloatingActionMenu: View {
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
    }

-    private func floatingButton(
-        imageName: String,
-        backgroundColor: Color,
-        accessibilityLabel: String,
-        action: @escaping () -> Void
-    ) -> some View {
-        Button(action: action) {
-            Image(imageName)
-                .resizable()
-                .frame(width: 38, height: 38)
-                .frame(width: buttonSize, height: buttonSize)
-                .background(backgroundColor)
-                .clipShape(Circle())
-        }
-        .accessibilityLabel(accessibilityLabel)
-        .buttonStyle(.plain)
-    }
 }

 struct CreatorChannelFloatingActionMenu_Previews: PreviewProvider {
--- a/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelFloatingIconButton.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelFloatingIconButton.swift
@@ -0,0 +1,21 @@
+import SwiftUI
+
+struct CreatorChannelFloatingIconButton: View {
+    let imageName: String
+    let backgroundColor: Color
+    let accessibilityLabel: String
+    let action: () -> Void
+
+    var body: some View {
+        Button(action: action) {
+            Image(imageName)
+                .resizable()
+                .frame(width: 38, height: 38)
+                .frame(width: 66, height: 66)
+                .background(backgroundColor)
+                .clipShape(Circle())
+        }
+        .accessibilityLabel(accessibilityLabel)
+        .buttonStyle(.plain)
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift
@@ -8,6 +8,7 @@ struct CreatorChannelView: View {
    @StateObject private var viewModel = CreatorChannelViewModel()
    @StateObject private var channelDonationViewModel = ChannelDonationViewModel()
    @StateObject private var donationViewModel = CreatorChannelDonationViewModel()
+    @StateObject private var fanTalkViewModel = CreatorChannelFanTalkViewModel()
    @StateObject private var liveViewModel = LiveViewModel()
    @StateObject private var mypageViewModel = MyPageViewModel()
    @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
@@ -121,6 +122,26 @@ struct CreatorChannelView: View {
                        .padding(.trailing, SodaSpacing.s14)
                }

+                if viewModel.selectedTab == .fanTalk && showFanTalkWrite && !viewModel.isLoading {
+                    VStack {
+                        Spacer()
+
+                        HStack {
+                            Spacer()
+
+                            CreatorChannelFloatingIconButton(
+                                imageName: "ic_plus_no_bg",
+                                backgroundColor: Color.soda400,
+                                accessibilityLabel: I18n.CreatorChannelHome.fanTalk,
+                                action: showFanTalkWriteView
+                            )
+                            .padding(.trailing, SodaSpacing.s14)
+                        }
+                    }
+                    .ignoresSafeArea(.container, edges: .bottom)
+                    .padding(.bottom, SodaSpacing.s14)
+                }
+
                if isShowAuthConfirmView {
                    authConfirmDialog
                }
@@ -220,6 +241,10 @@ struct CreatorChannelView: View {
        isOwnCreatorChannel == false && (donationViewModel.donationCount != 0 || donationViewModel.rankings.isEmpty == false)
    }

+    private var showFanTalkWrite: Bool {
+        isOwnCreatorChannel == false && fanTalkViewModel.fanTalkCount > 0
+    }
+
    @ViewBuilder
    private var selectedTabContent: some View {
        if viewModel.selectedTab == .live {
@@ -249,6 +274,13 @@ struct CreatorChannelView: View {
                onTapViewAll: showDonationRankingAll,
                onTapDonate: showDonationDialog
            )
+        } else if viewModel.selectedTab == .fanTalk {
+            CreatorChannelFanTalkTabView(
+                creatorId: creatorId,
+                isOwnCreatorChannel: isOwnCreatorChannel,
+                viewModel: fanTalkViewModel,
+                onTapWrite: showFanTalkWriteView
+            )
        } else if viewModel.selectedTab != .home {
            CreatorChannelPlaceholderTabView(title: viewModel.selectedTab.title)
        } else if let response = viewModel.response {
@@ -461,6 +493,8 @@ struct CreatorChannelView: View {
        channelDonationViewModel.setCreatorId(creatorId, shouldFetch: false)
        isShowChannelDonationDialog = true
    }
+
+    private func showFanTalkWriteView() {}
 }

 struct CreatorChannelView_Previews: PreviewProvider {
--- a/SodaLive/Sources/V2/CreatorChannel/FanTalk/Components/CreatorChannelFanTalkActionPopup.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/FanTalk/Components/CreatorChannelFanTalkActionPopup.swift
@@ -0,0 +1,39 @@
+import SwiftUI
+
+struct CreatorChannelFanTalkActionPopup: View {
+    let isMine: Bool
+    let isOwnCreatorChannel: Bool
+    let onTapEdit: () -> Void
+    let onTapDelete: () -> Void
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            if isMine {
+                actionButton(title: "수정하기", action: onTapEdit)
+            }
+
+            if isMine || isOwnCreatorChannel {
+                actionButton(title: "삭제하기", action: onTapDelete)
+            }
+        }
+        .background(Color.gray900)
+        .cornerRadius(14)
+        .overlay(
+            RoundedRectangle(cornerRadius: 14, style: .continuous)
+                .stroke(Color.gray700, lineWidth: 1)
+        )
+    }
+
+    private func actionButton(title: String, action: @escaping () -> Void) -> some View {
+        Button(action: action) {
+            Text(title)
+                .appFont(size: 14, weight: .medium)
+                .foregroundColor(.white)
+                .lineLimit(1)
+                .frame(minWidth: 80, alignment: .leading)
+                .padding(.horizontal, SodaSpacing.s12)
+                .padding(.vertical, SodaSpacing.s8)
+        }
+        .buttonStyle(.plain)
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/FanTalk/Components/CreatorChannelFanTalkCountBar.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/FanTalk/Components/CreatorChannelFanTalkCountBar.swift
@@ -0,0 +1,22 @@
+import SwiftUI
+
+struct CreatorChannelFanTalkCountBar: View {
+    let fanTalkCount: Int
+
+    var body: some View {
+        HStack(spacing: SodaSpacing.s4) {
+            Text("전체")
+                .appFont(size: 16, weight: .medium)
+                .foregroundColor(.white)
+
+            Text("\(fanTalkCount)")
+                .appFont(size: 16, weight: .medium)
+                .foregroundColor(Color.gray500)
+
+            Spacer()
+        }
+        .padding(.horizontal, SodaSpacing.s14)
+        .frame(height: 52)
+        .background(Color.black)
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/FanTalk/Components/CreatorChannelFanTalkEmptyView.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/FanTalk/Components/CreatorChannelFanTalkEmptyView.swift
@@ -0,0 +1,41 @@
+import SwiftUI
+
+struct CreatorChannelFanTalkEmptyView: View {
+    let showsWriteButton: Bool
+    let onTapWrite: () -> Void
+
+    var body: some View {
+        VStack(spacing: SodaSpacing.s20) {
+            Text("아직 응원이 없습니다.\n처음으로 크리에이터를 응원해 보세요!")
+                .appFont(size: 16, weight: .medium)
+                .foregroundColor(Color.gray500)
+                .multilineTextAlignment(.center)
+                .lineSpacing(SodaSpacing.s4)
+
+            if showsWriteButton {
+                Button(action: onTapWrite) {
+                    HStack(spacing: SodaSpacing.s6) {
+                        Image("ic_plus_no_bg")
+                            .resizable()
+                            .renderingMode(.template)
+                            .foregroundColor(.white)
+                            .scaledToFit()
+                            .frame(width: 20, height: 20)
+
+                        Text("응원 남기기")
+                            .appFont(size: 16, weight: .medium)
+                            .foregroundColor(.white)
+                            .lineLimit(1)
+                    }
+                    .padding(.horizontal, SodaSpacing.s20)
+                    .frame(height: 44)
+                    .background(Color.soda400)
+                    .clipShape(Capsule())
+                }
+                .buttonStyle(.plain)
+            }
+        }
+        .frame(maxWidth: .infinity)
+        .padding(.vertical, 48)
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/FanTalk/Components/CreatorChannelFanTalkListItem.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/FanTalk/Components/CreatorChannelFanTalkListItem.swift
@@ -0,0 +1,142 @@
+import SwiftUI
+
+struct CreatorChannelFanTalkListItem: View {
+    let fanTalk: CreatorChannelFanTalkItemResponse
+    let isMine: Bool
+    let isOwnCreatorChannel: Bool
+    let onTapReport: () -> Void
+    let onTapMore: () -> Void
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            VStack(alignment: .leading, spacing: SodaSpacing.s12) {
+                header
+
+                Text(fanTalk.content)
+                    .appFont(size: 16, weight: .regular)
+                    .foregroundColor(.white)
+                    .fixedSize(horizontal: false, vertical: true)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding(.leading, 50)
+
+                if fanTalk.creatorReplies.isEmpty == false {
+                    replies
+                        .padding(.leading, 50)
+                }
+            }
+            .padding(.horizontal, SodaSpacing.s14)
+            .padding(.vertical, SodaSpacing.s16)
+
+            Rectangle()
+                .fill(Color.gray800)
+                .frame(height: 1)
+        }
+        .background(Color.black)
+    }
+
+    private var header: some View {
+        HStack(alignment: .top, spacing: SodaSpacing.s8) {
+            DownsampledKFImage(
+                url: URL(string: fanTalk.writerProfileImageUrl),
+                size: CGSize(width: 42, height: 42)
+            )
+            .background(Color.white.opacity(0.6))
+            .clipShape(Circle())
+
+            VStack(alignment: .leading, spacing: 2) {
+                Text(fanTalk.writerNickname)
+                    .appFont(size: 14, weight: .medium)
+                    .foregroundColor(.white)
+                    .lineLimit(1)
+                    .truncationMode(.tail)
+
+                Text(fanTalk.relativeTimeText())
+                    .appFont(size: 14, weight: .regular)
+                    .foregroundColor(Color.gray500)
+                    .lineLimit(1)
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+
+            trailingAction
+        }
+    }
+
+    private var trailingAction: some View {
+        Group {
+            if isMine || isOwnCreatorChannel {
+                Button(action: onTapMore) {
+                    Image("ic_new_more")
+                        .resizable()
+                        .frame(width: 24, height: 24)
+                }
+                .buttonStyle(.plain)
+            } else {
+                Button(action: onTapReport) {
+                    Text("신고")
+                        .appFont(size: 13, weight: .medium)
+                        .foregroundColor(Color.gray500)
+                }
+                .buttonStyle(.plain)
+            }
+        }
+    }
+
+    private var replies: some View {
+        VStack(alignment: .leading, spacing: SodaSpacing.s8) {
+            ForEach(fanTalk.creatorReplies) { reply in
+                HStack(alignment: .top, spacing: SodaSpacing.s8) {
+                    Rectangle()
+                        .fill(Color.gray800)
+                        .frame(width: 2)
+
+                    replyCard(reply)
+                }
+            }
+        }
+    }
+
+    private func replyCard(_ reply: CreatorChannelFanTalkReplyResponse) -> some View {
+        VStack(alignment: .leading, spacing: SodaSpacing.s8) {
+            HStack(alignment: .center, spacing: SodaSpacing.s6) {
+                DownsampledKFImage(
+                    url: URL(string: reply.writerProfileImageUrl),
+                    size: CGSize(width: 20, height: 20)
+                )
+                .background(Color.white.opacity(0.6))
+                .clipShape(Circle())
+
+                Text(reply.writerNickname)
+                    .appFont(size: 13, weight: .medium)
+                    .foregroundColor(.white)
+                    .lineLimit(1)
+
+                Text(reply.relativeTimeText())
+                    .appFont(size: 14, weight: .regular)
+                    .foregroundColor(Color.gray500)
+                    .lineLimit(1)
+            }
+
+            Text(reply.content)
+                .appFont(size: 16, weight: .regular)
+                .foregroundColor(.white)
+                .fixedSize(horizontal: false, vertical: true)
+                .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        .padding(SodaSpacing.s12)
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(Color.gray900)
+        .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+    }
+}
+
+extension CreatorChannelFanTalkItemResponse {
+    func relativeTimeText(now: Date = Date()) -> String {
+        DateParser.relativeTimeText(fromUTC: createdAtUtc, fallback: createdAtUtc, now: now)
+    }
+}
+
+extension CreatorChannelFanTalkReplyResponse {
+    func relativeTimeText(now: Date = Date()) -> String {
+        DateParser.relativeTimeText(fromUTC: createdAtUtc, fallback: createdAtUtc, now: now)
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/FanTalk/CreatorChannelFanTalkTabView.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/FanTalk/CreatorChannelFanTalkTabView.swift
@@ -0,0 +1,159 @@
+import SwiftUI
+
+struct CreatorChannelFanTalkTabView: View {
+    let creatorId: Int
+    let isOwnCreatorChannel: Bool
+    @ObservedObject var viewModel: CreatorChannelFanTalkViewModel
+    let onTapWrite: () -> Void
+
+    @State private var actionPopupFanTalk: CreatorChannelFanTalkItemResponse?
+    @State private var fanTalkItemFrames = [Int: CGRect]()
+
+    var body: some View {
+        ZStack(alignment: .topTrailing) {
+            content
+
+            actionPopupLayer
+                .zIndex(1)
+        }
+            .coordinateSpace(name: Self.coordinateSpaceName)
+            .background(Color.black)
+            .onPreferenceChange(CreatorChannelFanTalkItemFramePreferenceKey.self) { frames in
+                fanTalkItemFrames.merge(frames) { _, new in new }
+            }
+            .onAppear {
+                if viewModel.hasLoaded == false {
+                    viewModel.fetchFirstPage(creatorId: creatorId)
+                }
+            }
+            .sodaToast(isPresented: $viewModel.isShowPopup, message: viewModel.errorMessage, autohideIn: 1)
+            .overlay(reportDialog)
+            .overlay(deleteDialog)
+    }
+
+    private var content: some View {
+        VStack(spacing: 0) {
+            CreatorChannelFanTalkCountBar(fanTalkCount: viewModel.fanTalkCount)
+
+            if isEmptyState {
+                CreatorChannelFanTalkEmptyView(
+                    showsWriteButton: isOwnCreatorChannel == false,
+                    onTapWrite: onTapWrite
+                )
+            } else {
+                LazyVStack(spacing: 0) {
+                    ForEach(viewModel.fanTalks) { fanTalk in
+                        fanTalkItem(fanTalk)
+                            .onAppear {
+                                viewModel.fetchNextPageIfNeeded(
+                                    creatorId: creatorId,
+                                    currentItem: fanTalk
+                                )
+                            }
+                    }
+
+                    if viewModel.isLoadingNextPage {
+                        ProgressView()
+                            .padding(.vertical, SodaSpacing.s20)
+                    }
+                }
+                .padding(.bottom, SodaSpacing.s20)
+            }
+        }
+    }
+
+    private func fanTalkItem(_ fanTalk: CreatorChannelFanTalkItemResponse) -> some View {
+        let isMine = fanTalk.writerId == UserDefaults.int(forKey: .userId)
+
+        return CreatorChannelFanTalkListItem(
+            fanTalk: fanTalk,
+            isMine: isMine,
+            isOwnCreatorChannel: isOwnCreatorChannel,
+            onTapReport: {
+                actionPopupFanTalk = nil
+                viewModel.presentReportDialog(fanTalkId: fanTalk.fanTalkId)
+            },
+            onTapMore: {
+                actionPopupFanTalk = actionPopupFanTalk?.fanTalkId == fanTalk.fanTalkId ? nil : fanTalk
+            }
+        )
+        .background {
+            GeometryReader { proxy in
+                Color.clear.preference(
+                    key: CreatorChannelFanTalkItemFramePreferenceKey.self,
+                    value: [fanTalk.fanTalkId: proxy.frame(in: .named(Self.coordinateSpaceName))]
+                )
+            }
+        }
+    }
+
+    @ViewBuilder
+    private var actionPopupLayer: some View {
+        if let fanTalk = actionPopupFanTalk,
+           let itemFrame = fanTalkItemFrames[fanTalk.fanTalkId] {
+            let isMine = fanTalk.writerId == UserDefaults.int(forKey: .userId)
+
+            CreatorChannelFanTalkActionPopup(
+                isMine: isMine,
+                isOwnCreatorChannel: isOwnCreatorChannel,
+                onTapEdit: {
+                    actionPopupFanTalk = nil
+                },
+                onTapDelete: {
+                    actionPopupFanTalk = nil
+                    viewModel.presentDeleteDialog(fanTalkId: fanTalk.fanTalkId)
+                }
+            )
+            .padding(.top, itemFrame.minY + 44)
+            .padding(.trailing, SodaSpacing.s14)
+        }
+    }
+
+    private var isEmptyState: Bool {
+        guard viewModel.hasLoaded else { return false }
+        return viewModel.fanTalkCount == 0
+    }
+
+    @ViewBuilder
+    private var reportDialog: some View {
+        if viewModel.isShowReportDialog {
+            CheersReportDialogView(
+                isShowing: $viewModel.isShowReportDialog,
+                confirmAction: { reason in
+                    viewModel.report(reason: reason)
+                }
+            )
+        }
+    }
+
+    @ViewBuilder
+    private var deleteDialog: some View {
+        if viewModel.isShowDeleteDialog {
+            SodaDialog(
+                title: I18n.MemberChannel.cheersDeleteTitle,
+                desc: I18n.Common.confirmDeleteQuestion,
+                confirmButtonTitle: I18n.Common.delete,
+                confirmButtonAction: {
+                    viewModel.isShowDeleteDialog = false
+                    viewModel.deleteSelectedFanTalk(creatorId: creatorId)
+                },
+                cancelButtonTitle: I18n.Common.cancel,
+                cancelButtonAction: {
+                    viewModel.isShowDeleteDialog = false
+                    viewModel.selectedFanTalkId = 0
+                },
+                textAlignment: .center
+            )
+        }
+    }
+
+    private static let coordinateSpaceName = "CreatorChannelFanTalkTabView"
+}
+
+private struct CreatorChannelFanTalkItemFramePreferenceKey: PreferenceKey {
+    static var defaultValue: [Int: CGRect] = [:]
+
+    static func reduce(value: inout [Int: CGRect], nextValue: () -> [Int: CGRect]) {
+        value.merge(nextValue()) { _, new in new }
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/FanTalk/CreatorChannelFanTalkViewModel.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/FanTalk/CreatorChannelFanTalkViewModel.swift
@@ -0,0 +1,196 @@
+import Foundation
+import Combine
+
+final class CreatorChannelFanTalkViewModel: ObservableObject {
+    private let repository = CreatorChannelFanTalkRepository()
+    private let reportRepository = ReportRepository()
+    private let explorerRepository = ExplorerRepository()
+    private var subscription = Set<AnyCancellable>()
+    private let pageSize = 20
+    private var latestRequestId = 0
+
+    @Published var isLoading = false
+    @Published var isLoadingNextPage = false
+    @Published var response: CreatorChannelFanTalkTabResponse?
+    @Published var fanTalks = [CreatorChannelFanTalkItemResponse]()
+    @Published var page = 0
+    @Published var size = 20
+    @Published var hasNext = false
+    @Published var hasLoaded = false
+    @Published var errorMessage = ""
+    @Published var isShowPopup = false
+    @Published var isShowReportDialog = false
+    @Published var isShowDeleteDialog = false
+    @Published var selectedFanTalkId = 0
+
+    var fanTalkCount: Int {
+        response?.fanTalkCount ?? 0
+    }
+
+    func fetchFirstPage(creatorId: Int) {
+        fetchFanTalks(creatorId: creatorId, page: 0, isNextPage: false)
+    }
+
+    func fetchNextPageIfNeeded(creatorId: Int, currentItem: CreatorChannelFanTalkItemResponse) {
+        guard let lastFanTalk = fanTalks.last else { return }
+        guard lastFanTalk.fanTalkId == currentItem.fanTalkId else { return }
+        guard hasNext, isLoadingNextPage == false, isLoading == false else { return }
+
+        fetchFanTalks(creatorId: creatorId, page: page + 1, isNextPage: true)
+    }
+
+    func presentReportDialog(fanTalkId: Int) {
+        selectedFanTalkId = fanTalkId
+        isShowReportDialog = true
+    }
+
+    func presentDeleteDialog(fanTalkId: Int) {
+        selectedFanTalkId = fanTalkId
+        isShowDeleteDialog = true
+    }
+
+    func report(reason: String) {
+        guard selectedFanTalkId > 0 else { return }
+
+        isLoading = true
+        let request = ReportRequest(type: .CHEERS, reason: reason, reportedMemberId: nil, cheersId: selectedFanTalkId, audioContentId: nil)
+
+        reportRepository.report(request: request)
+            .sink { [weak self] result in
+                guard let self else { return }
+
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                    self.applyFailureState()
+                }
+            } receiveValue: { [weak self] response in
+                guard let self else { return }
+
+                self.isLoading = false
+                self.selectedFanTalkId = 0
+
+                do {
+                    let decoded = try JSONDecoder().decode(ApiResponseWithoutData.self, from: response.data)
+                    self.errorMessage = decoded.message ?? I18n.Common.commonError
+                    self.isShowPopup = true
+                } catch {
+                    ERROR_LOG(error.localizedDescription)
+                    self.errorMessage = I18n.Common.commonError
+                    self.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
+    }
+
+    func deleteSelectedFanTalk(creatorId: Int) {
+        guard selectedFanTalkId > 0 else { return }
+
+        isLoading = true
+        explorerRepository.modifyCheers(cheersId: selectedFanTalkId, content: nil, isActive: false)
+            .sink { [weak self] result in
+                guard let self else { return }
+
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                    self.applyFailureState()
+                }
+            } receiveValue: { [weak self] response in
+                guard let self else { return }
+
+                self.isLoading = false
+                self.selectedFanTalkId = 0
+
+                do {
+                    let decoded = try JSONDecoder().decode(ApiResponseWithoutData.self, from: response.data)
+
+                    if decoded.success {
+                        self.fetchFirstPage(creatorId: creatorId)
+                    } else {
+                        self.errorMessage = decoded.message ?? I18n.Common.commonError
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    ERROR_LOG(error.localizedDescription)
+                    self.errorMessage = I18n.Common.commonError
+                    self.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
+    }
+
+    private func fetchFanTalks(creatorId: Int, page requestPage: Int, isNextPage: Bool) {
+        latestRequestId += 1
+        let requestId = latestRequestId
+
+        if isNextPage {
+            isLoadingNextPage = true
+        } else {
+            isLoading = true
+        }
+
+        repository.getFanTalks(creatorId: creatorId, page: requestPage, size: pageSize)
+            .sink { [weak self] result in
+                guard let self else { return }
+                guard requestId == self.latestRequestId else { return }
+
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                    self.isLoading = false
+                    self.isLoadingNextPage = false
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                    self.applyFailureState()
+                }
+            } receiveValue: { [weak self] response in
+                guard let self else { return }
+                guard requestId == self.latestRequestId else { return }
+
+                do {
+                    let decoded = try JSONDecoder().decode(ApiResponse<CreatorChannelFanTalkTabResponse>.self, from: response.data)
+
+                    if let data = decoded.data, decoded.success {
+                        self.applySuccessState(data, isNextPage: isNextPage)
+                        self.hasLoaded = true
+                    } else {
+                        self.errorMessage = decoded.message ?? I18n.Common.commonError
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    ERROR_LOG(error.localizedDescription)
+                    self.errorMessage = I18n.Common.commonError
+                    self.isShowPopup = true
+                }
+
+                self.isLoading = false
+                self.isLoadingNextPage = false
+            }
+            .store(in: &subscription)
+    }
+
+    private func applySuccessState(_ data: CreatorChannelFanTalkTabResponse, isNextPage: Bool) {
+        response = data
+        page = data.page
+        size = data.size
+        hasNext = data.hasNext
+
+        if isNextPage {
+            fanTalks.append(contentsOf: data.fanTalks)
+        } else {
+            fanTalks = data.fanTalks
+        }
+    }
+
+    private func applyFailureState() {
+        errorMessage = I18n.Common.commonError
+        isShowPopup = true
+        isLoading = false
+        isLoadingNextPage = false
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/FanTalk/Models/CreatorChannelFanTalkTabResponse.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/FanTalk/Models/CreatorChannelFanTalkTabResponse.swift
@@ -0,0 +1,32 @@
+import Foundation
+
+struct CreatorChannelFanTalkTabResponse: Decodable {
+    let fanTalkCount: Int
+    let fanTalks: [CreatorChannelFanTalkItemResponse]
+    let page: Int
+    let size: Int
+    let hasNext: Bool
+}
+
+struct CreatorChannelFanTalkItemResponse: Decodable, Identifiable {
+    let fanTalkId: Int
+    let writerId: Int
+    let writerNickname: String
+    let writerProfileImageUrl: String
+    let content: String
+    let createdAtUtc: String
+    let creatorReplies: [CreatorChannelFanTalkReplyResponse]
+
+    var id: Int { fanTalkId }
+}
+
+struct CreatorChannelFanTalkReplyResponse: Decodable, Identifiable {
+    let fanTalkId: Int
+    let writerId: Int
+    let writerNickname: String
+    let writerProfileImageUrl: String
+    let content: String
+    let createdAtUtc: String
+
+    var id: Int { fanTalkId }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/FanTalk/Repository/CreatorChannelFanTalkApi.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/FanTalk/Repository/CreatorChannelFanTalkApi.swift
@@ -0,0 +1,44 @@
+import Foundation
+
+import Moya
+
+enum CreatorChannelFanTalkApi {
+    case getFanTalks(creatorId: Int, page: Int, size: Int)
+}
+
+extension CreatorChannelFanTalkApi: TargetType {
+    var baseURL: URL {
+        return URL(string: BASE_URL)!
+    }
+
+    var path: String {
+        switch self {
+        case .getFanTalks(let creatorId, _, _):
+            return "/api/v2/creator-channels/\(creatorId)/fan-talks"
+        }
+    }
+
+    var method: Moya.Method {
+        switch self {
+        case .getFanTalks:
+            return .get
+        }
+    }
+
+    var task: Moya.Task {
+        switch self {
+        case .getFanTalks(_, let page, let size):
+            return .requestParameters(
+                parameters: [
+                    "page": page,
+                    "size": size
+                ],
+                encoding: URLEncoding.queryString
+            )
+        }
+    }
+
+    var headers: [String: String]? {
+        return ["Authorization": "Bearer \(UserDefaults.string(forKey: UserDefaultsKey.token))"]
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/FanTalk/Repository/CreatorChannelFanTalkRepository.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/FanTalk/Repository/CreatorChannelFanTalkRepository.swift
@@ -0,0 +1,13 @@
+import Foundation
+import Combine
+
+import CombineMoya
+import Moya
+
+final class CreatorChannelFanTalkRepository {
+    private let api = MoyaProvider<CreatorChannelFanTalkApi>()
+
+    func getFanTalks(creatorId: Int, page: Int, size: Int) -> AnyPublisher<Response, MoyaError> {
+        return api.requestPublisher(.getFanTalks(creatorId: creatorId, page: page, size: size))
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/Home/Components/CreatorChannelFanTalkSection.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Home/Components/CreatorChannelFanTalkSection.swift
@@ -53,11 +53,6 @@ private struct CreatorChannelFanTalkCard: View {
                    .truncationMode(.tail)
                    .frame(maxWidth: .infinity, minHeight: 40, alignment: .leading)
                .frame(maxWidth: .infinity, alignment: .leading)
-
-                Image(systemName: "chevron.down")
-                    .font(.system(size: 12, weight: .medium))
-                    .foregroundColor(.white)
-                    .frame(width: 18, height: 18)
            }
        }
        .padding(SodaSpacing.s14)