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

This commit is contained in:
Yu Sung
2026-07-04 17:11:19 +09:00
parent c4c18341a6
commit 0dd111f5d6
10 changed files with 306 additions and 161 deletions

View File

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