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

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)
     }
 }

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)
-    }
-}

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)
+    }
+}