feat(creator): 정렬 팝업을 적용한다

2026-07-04 17:11:19 +09:00
parent c4c18341a6
commit 0dd111f5d6
10 changed files with 306 additions and 161 deletions
--- a/SodaLive/Sources/V2/CreatorChannel/Audio/CreatorChannelAudioTabView.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Audio/CreatorChannelAudioTabView.swift
@@ -6,7 +6,7 @@ struct CreatorChannelAudioTabView: View {
    let onTapContent: (Int) -> Void

    @StateObject private var viewModel = CreatorChannelAudioViewModel()
-    @State private var isSortSheetPresented = false
+    @State private var isSortPopupPresented = false

    var body: some View {
        content
@@ -16,12 +16,6 @@ struct CreatorChannelAudioTabView: View {
                    viewModel.fetchFirstPage(creatorId: creatorId)
                }
            }
-            .sheet(isPresented: $isSortSheetPresented) {
-                CreatorChannelSortBottomSheet(selectedSort: viewModel.selectedSort) { sort in
-                    viewModel.selectSort(sort, creatorId: creatorId)
-                    isSortSheetPresented = false
-                }
-            }
            .sodaToast(isPresented: $viewModel.isShowPopup, message: viewModel.errorMessage, autohideIn: 1)
    }

@@ -30,47 +24,79 @@ struct CreatorChannelAudioTabView: View {
            if isEmptyState {
                emptyStateView
            } else {
-                CapsuleTabBar(
-                    items: viewModel.displayThemes,
-                    selectedItem: Binding(
-                        get: { viewModel.selectedTheme },
-                        set: { viewModel.selectTheme($0, creatorId: creatorId) }
-                    ),
-                    title: { $0.themeName }
-                )
-
-                CreatorChannelSortBar(
-                    selectedSort: viewModel.selectedSort,
-                    onTapSort: {
-                        isSortSheetPresented = true
-                    }
-                )
-
-                LazyVStack(spacing: 0) {
-                    if shouldShowOwnershipRate, let response = viewModel.response {
-                        CreatorChannelAudioOwnershipRateView(
-                            purchasedAudioContentRate: response.purchasedAudioContentRate,
-                            purchasedAudioContentCount: response.purchasedAudioContentCount,
-                            paidAudioContentCount: response.paidAudioContentCount
+                ZStack(alignment: .topTrailing) {
+                    VStack(spacing: 0) {
+                        CapsuleTabBar(
+                            items: viewModel.displayThemes,
+                            selectedItem: Binding(
+                                get: { viewModel.selectedTheme },
+                                set: { viewModel.selectTheme($0, creatorId: creatorId) }
+                            ),
+                            title: { $0.themeName }
                        )
-                        .padding(.bottom, SodaSpacing.s8)
+
+                        CreatorChannelSortBar(
+                            selectedSort: viewModel.selectedSort,
+                            totalCount: viewModel.response?.audioContentCount,
+                            onTapSort: {
+                                isSortPopupPresented.toggle()
+                            }
+                        )
+
+                        LazyVStack(spacing: 0) {
+                            if shouldShowOwnershipRate, let response = viewModel.response {
+                                CreatorChannelAudioOwnershipRateView(
+                                    purchasedAudioContentRate: response.purchasedAudioContentRate,
+                                    purchasedAudioContentCount: response.purchasedAudioContentCount,
+                                    paidAudioContentCount: response.paidAudioContentCount
+                                )
+                                .padding(.bottom, SodaSpacing.s8)
+                            }
+
+                            ForEach(viewModel.audioContents) { audioContent in
+                                CreatorChannelAudioContentListItem(audioContent: audioContent) {
+                                    onTapContent(audioContent.audioContentId)
+                                }
+                                .onAppear {
+                                    viewModel.fetchNextPageIfNeeded(creatorId: creatorId, currentItem: audioContent)
+                                }
+                            }
+
+                            if viewModel.isLoadingNextPage {
+                                ProgressView()
+                                    .padding(.vertical, SodaSpacing.s20)
+                            }
+                        }
+                        .padding(.bottom, isOwnCreatorChannel ? 70 : SodaSpacing.s20)
                    }

-                    ForEach(viewModel.audioContents) { audioContent in
-                        CreatorChannelAudioContentListItem(audioContent: audioContent) {
-                            onTapContent(audioContent.audioContentId)
-                        }
-                        .onAppear {
-                            viewModel.fetchNextPageIfNeeded(creatorId: creatorId, currentItem: audioContent)
-                        }
-                    }
+                    if isSortPopupPresented {
+                        Color.black
+                            .opacity(0.001)
+                            .frame(maxWidth: .infinity, maxHeight: .infinity)
+                            .onTapGesture {
+                                isSortPopupPresented = false
+                            }

-                    if viewModel.isLoadingNextPage {
-                        ProgressView()
-                            .padding(.vertical, SodaSpacing.s20)
+                        CreatorChannelSortContextPopup(selectedSort: viewModel.selectedSort) { sort in
+                            viewModel.selectSort(sort, creatorId: creatorId)
+                            isSortPopupPresented = false
+                        }
+                        .padding(.top, 104)
+                        .padding(.trailing, SodaSpacing.s14)
+                        .zIndex(1)
                    }
                }
-                .padding(.bottom, isOwnCreatorChannel ? 70 : SodaSpacing.s20)
+                .frame(maxWidth: .infinity, alignment: .topTrailing)
+                .onChange(of: viewModel.selectedSort) { _ in
+                    isSortPopupPresented = false
+                }
+                .onChange(of: viewModel.selectedTheme) { _ in
+                    isSortPopupPresented = false
+                }
+                .onDisappear {
+                    isSortPopupPresented = false
+                }
            }
        }
    }
--- a/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelSortBar.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelSortBar.swift
@@ -2,26 +2,49 @@ import SwiftUI

 struct CreatorChannelSortBar: View {
    let selectedSort: ContentSort
+    let totalCount: Int?
    let onTapSort: () -> Void

+    init(
+        selectedSort: ContentSort,
+        totalCount: Int? = nil,
+        onTapSort: @escaping () -> Void
+    ) {
+        self.selectedSort = selectedSort
+        self.totalCount = totalCount
+        self.onTapSort = onTapSort
+    }
+
    var body: some View {
        HStack(alignment: .center, spacing: SodaSpacing.s8) {
+            if let totalCount, totalCount >= 0 {
+                HStack(spacing: SodaSpacing.s4) {
+                    Text(I18n.CreatorChannelLive.totalLabel)
+                        .appFont(size: 16, weight: .medium)
+                        .foregroundColor(Color.white)
+
+                    Text("\(totalCount)")
+                        .appFont(size: 16, weight: .medium)
+                        .foregroundColor(Color.gray500)
+                }
+            }
+
            Spacer()

            Button(action: onTapSort) {
                HStack(spacing: SodaSpacing.s4) {
                    Text(selectedSort.title)
-                        .appFont(size: 14, weight: .medium)
-                        .foregroundColor(Color.white)
+                        .appFont(size: 16, weight: .regular)
+                        .foregroundColor(Color.gray400)

                    Image("ic_new_sort")
-                        .font(.system(size: 12, weight: .semibold))
+                        .frame(width: 18, height: 18)
                }
                .contentShape(Rectangle())
            }
            .buttonStyle(.plain)
        }
-        .padding(.horizontal, SodaSpacing.s20)
+        .padding(.horizontal, SodaSpacing.s14)
        .frame(height: 52)
        .background(Color.black)
    }
@@ -29,7 +52,7 @@ struct CreatorChannelSortBar: View {

 struct CreatorChannelSortBar_Previews: PreviewProvider {
    static var previews: some View {
-        CreatorChannelSortBar(selectedSort: .latest, onTapSort: {})
+        CreatorChannelSortBar(selectedSort: .latest, totalCount: 23, onTapSort: {})
            .previewLayout(.sizeThatFits)
    }
 }
--- a/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelSortBottomSheet.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelSortBottomSheet.swift
@@ -1,45 +0,0 @@
-import SwiftUI
-
-struct CreatorChannelSortBottomSheet: View {
-    let selectedSort: ContentSort
-    let sorts: [ContentSort]
-    let onSelect: (ContentSort) -> Void
-
-    init(
-        selectedSort: ContentSort,
-        sorts: [ContentSort] = ContentSort.allCases,
-        onSelect: @escaping (ContentSort) -> Void
-    ) {
-        self.selectedSort = selectedSort
-        self.sorts = sorts
-        self.onSelect = onSelect
-    }
-
-    var body: some View {
-        VStack(spacing: 0) {
-            ForEach(sorts, id: \.self) { sort in
-                Button {
-                    onSelect(sort)
-                } label: {
-                    Text(sort.title)
-                        .appFont(size: 16, weight: selectedSort == sort ? .bold : .medium)
-                        .foregroundColor(selectedSort == sort ? Color.white : Color.gray400)
-                        .frame(maxWidth: .infinity, alignment: .leading)
-                        .padding(.horizontal, SodaSpacing.s20)
-                        .frame(height: 52)
-                        .background(selectedSort == sort ? Color.gray900 : Color.black)
-                }
-                .buttonStyle(.plain)
-            }
-        }
-        .padding(.vertical, SodaSpacing.s8)
-        .background(Color.black)
-    }
-}
-
-struct CreatorChannelSortBottomSheet_Previews: PreviewProvider {
-    static var previews: some View {
-        CreatorChannelSortBottomSheet(selectedSort: .latest, onSelect: { _ in })
-            .previewLayout(.sizeThatFits)
-    }
-}
--- a/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelSortContextPopup.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelSortContextPopup.swift
@@ -0,0 +1,50 @@
+import SwiftUI
+
+struct CreatorChannelSortContextPopup: View {
+    let selectedSort: ContentSort
+    let sorts: [ContentSort]
+    let onSelect: (ContentSort) -> Void
+
+    init(
+        selectedSort: ContentSort,
+        sorts: [ContentSort] = ContentSort.allCases,
+        onSelect: @escaping (ContentSort) -> Void
+    ) {
+        self.selectedSort = selectedSort
+        self.sorts = sorts
+        self.onSelect = onSelect
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            ForEach(sorts, id: \.self) { sort in
+                Button {
+                    onSelect(sort)
+                } label: {
+                    Text(sort.title)
+                        .appFont(size: 16, weight: .medium)
+                        .foregroundColor(Color.white)
+                        .lineLimit(1)
+                        .frame(minWidth: 92, alignment: .leading)
+                        .padding(.horizontal, SodaSpacing.s12)
+                        .padding(.vertical, SodaSpacing.s8)
+                        .background(selectedSort == sort ? Color.gray800 : Color.gray900)
+                }
+                .buttonStyle(.plain)
+            }
+        }
+        .background(Color.gray900)
+        .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+        .overlay(
+            RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous)
+                .stroke(Color.gray700, lineWidth: 1)
+        )
+    }
+}
+
+struct CreatorChannelSortContextPopup_Previews: PreviewProvider {
+    static var previews: some View {
+        CreatorChannelSortContextPopup(selectedSort: .latest, onSelect: { _ in })
+            .previewLayout(.sizeThatFits)
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/Live/CreatorChannelLiveTabView.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Live/CreatorChannelLiveTabView.swift
@@ -7,7 +7,7 @@ struct CreatorChannelLiveTabView: View {
    let onTapContent: (Int) -> Void

    @StateObject private var viewModel = CreatorChannelLiveViewModel()
-    @State private var isSortSheetPresented = false
+    @State private var isSortPopupPresented = false

    var body: some View {
        content
@@ -17,12 +17,6 @@ struct CreatorChannelLiveTabView: View {
                viewModel.fetchFirstPage(creatorId: creatorId)
            }
        }
-        .sheet(isPresented: $isSortSheetPresented) {
-            CreatorChannelSortBottomSheet(selectedSort: viewModel.selectedSort) { sort in
-                viewModel.selectSort(sort, creatorId: creatorId)
-                isSortSheetPresented = false
-            }
-        }
        .sodaToast(isPresented: $viewModel.isShowPopup, message: viewModel.errorMessage, autohideIn: 1)
    }

@@ -31,36 +25,65 @@ struct CreatorChannelLiveTabView: View {
            if isEmptyState {
                emptyStateView
            } else {
-                CreatorChannelSortBar(
-                    selectedSort: viewModel.selectedSort,
-                    onTapSort: {
-                        isSortSheetPresented = true
-                    }
-                )
+                ZStack(alignment: .topTrailing) {
+                    VStack(spacing: 0) {
+                        CreatorChannelSortBar(
+                            selectedSort: viewModel.selectedSort,
+                            totalCount: viewModel.response?.liveReplayContentCount,
+                            onTapSort: {
+                                isSortPopupPresented.toggle()
+                            }
+                        )

-                LazyVStack(spacing: 0) {
-                    CreatorChannelCurrentLiveSection(
-                        currentLive: viewModel.response?.currentLive,
-                        onTapLive: onTapLive
-                    )
-                    .padding(.top, SodaSpacing.s14)
-                    .padding(.bottom, SodaSpacing.s12)
+                        LazyVStack(spacing: 0) {
+                            CreatorChannelCurrentLiveSection(
+                                currentLive: viewModel.response?.currentLive,
+                                onTapLive: onTapLive
+                            )
+                            .padding(.top, SodaSpacing.s14)
+                            .padding(.bottom, SodaSpacing.s12)

-                    ForEach(viewModel.liveReplayContents) { audioContent in
-                        CreatorChannelAudioContentListItem(audioContent: audioContent) {
-                            onTapContent(audioContent.audioContentId)
-                        }
-                        .onAppear {
-                            viewModel.fetchNextPageIfNeeded(creatorId: creatorId, currentItem: audioContent)
+                            ForEach(viewModel.liveReplayContents) { audioContent in
+                                CreatorChannelAudioContentListItem(audioContent: audioContent) {
+                                    onTapContent(audioContent.audioContentId)
+                                }
+                                .onAppear {
+                                    viewModel.fetchNextPageIfNeeded(creatorId: creatorId, currentItem: audioContent)
+                                }
+                            }
+
+                            if viewModel.isLoadingNextPage {
+                                ProgressView()
+                                    .padding(.vertical, SodaSpacing.s20)
+                            }
                        }
+                        .padding(.bottom, isOwnCreatorChannel ? 70 : SodaSpacing.s20)
                    }

-                    if viewModel.isLoadingNextPage {
-                        ProgressView()
-                            .padding(.vertical, SodaSpacing.s20)
+                    if isSortPopupPresented {
+                        Color.black
+                            .opacity(0.001)
+                            .frame(maxWidth: .infinity, maxHeight: .infinity)
+                            .onTapGesture {
+                                isSortPopupPresented = false
+                            }
+
+                        CreatorChannelSortContextPopup(selectedSort: viewModel.selectedSort) { sort in
+                            viewModel.selectSort(sort, creatorId: creatorId)
+                            isSortPopupPresented = false
+                        }
+                        .padding(.top, 52)
+                        .padding(.trailing, SodaSpacing.s14)
+                        .zIndex(1)
                    }
                }
-                .padding(.bottom, isOwnCreatorChannel ? 70 : SodaSpacing.s20)
+                .frame(maxWidth: .infinity, alignment: .topTrailing)
+                .onChange(of: viewModel.selectedSort) { _ in
+                    isSortPopupPresented = false
+                }
+                .onDisappear {
+                    isSortPopupPresented = false
+                }
            }
        }
    }