klaus/sodalive-ios
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(content): 추천 오디오 탭을 추가한다

Browse Source
This commit is contained in:
Yu Sung
2026-07-06 14:03:09 +09:00
parent f3cbf42328
commit b42ca61ce4
28 changed files with 1841 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
SodaLive/Sources/V2/Component/AudioContent/AudioContentListRow.swift Normal file
View File

@@ -0,0 +1,364 @@
import SwiftUI
struct AudioContentListRowItem: Identifiable {
let id: Int
let title: String
let subtitle: String?
let imageUrl: String?
let price: Int
let isAdult: Bool
let isPointAvailable: Bool
let isFirstContent: Bool
let isOriginalSeries: Bool
let isOwned: Bool
let isRented: Bool
}
extension AudioContentListRowItem {
init(audioContent: CreatorChannelAudioContentResponse, subtitle: String?) {
self.init(
id: audioContent.audioContentId,
title: audioContent.title,
subtitle: subtitle,
imageUrl: audioContent.imageUrl,
price: audioContent.price,
isAdult: audioContent.isAdult,
isPointAvailable: audioContent.isPointAvailable,
isFirstContent: audioContent.isFirstContent,
isOriginalSeries: audioContent.isOriginalSeries == true,
isOwned: audioContent.isOwned,
isRented: audioContent.isRented
)
}
}
enum AudioContentListRowStyle {
case compact(width: CGFloat?, showsAdultTag: Bool = false)
case purchaseState
static func compactWidth(screenWidth: CGFloat = UIScreen.main.bounds.width) -> CGFloat {
let baselineScreenWidth: CGFloat = 402
let baselineRowWidth: CGFloat = 346
return baselineRowWidth * min(screenWidth, baselineScreenWidth) / baselineScreenWidth
}
}
struct AudioContentListRow: View {
let item: AudioContentListRowItem
let style: AudioContentListRowStyle
let action: () -> Void
init(
item: AudioContentListRowItem,
style: AudioContentListRowStyle,
action: @escaping () -> Void = {}
) {
self.item = item
self.style = style
self.action = action
}
var body: some View {
Button {
action()
} label: {
HStack(alignment: .center, spacing: SodaSpacing.s14) {
thumbnail
titleArea
.frame(maxWidth: .infinity, alignment: .leading)
if showsTrailingState {
trailingState
}
}
.padding(.horizontal, horizontalPadding)
.padding(.vertical, verticalPadding)
.frame(width: rowWidth, alignment: .leading)
.frame(maxWidth: maxRowWidth, alignment: .leading)
.contentShape(Rectangle())
}
.buttonStyle(.plain)
}
private var titleArea: some View {
VStack(alignment: .leading, spacing: titleSpacing) {
Text(item.title)
.appFont(size: 16, weight: .bold)
.foregroundColor(.white)
.lineLimit(titleLineLimit)
.truncationMode(.tail)
if let subtitle = item.subtitle, !subtitle.isEmpty {
Text(subtitle)
.appFont(size: 14, weight: .medium)
.foregroundColor(Color.gray500)
.lineLimit(1)
.truncationMode(.tail)
}
}
}
private var thumbnail: some View {
ZStack(alignment: .topLeading) {
DownsampledKFImage(
url: item.imageUrl.flatMap(URL.init(string:)),
size: CGSize(width: 88, height: 88)
)
.background(Color.gray800)
VStack(alignment: .leading, spacing: 0) {
topTagList
Spacer(minLength: 0)
bottomTagList
}
}
.frame(width: 88, height: 88)
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
}
@ViewBuilder
private var topTagList: some View {
HStack(spacing: 0) {
if item.isOriginalSeries {
CreatorChannelAudioImageTag(imageName: "ic_content_tag_original")
}
if item.isFirstContent {
CreatorChannelAudioFirstTag()
}
if showsAdultTag {
Spacer()
if item.isAdult {
CreatorChannelAudioAdultTag()
.padding(.top, 6)
.padding(.trailing, 6)
}
}
}
}
@ViewBuilder
private var bottomTagList: some View {
HStack(spacing: 0) {
if item.isPointAvailable {
CreatorChannelAudioImageTag(imageName: "ic_content_tag_point")
}
if item.price == 0 {
CreatorChannelAudioFreeTag()
}
}
}
@ViewBuilder
private var trailingState: some View {
if item.isOwned {
playbackState(I18n.Content.Status.owned)
} else if item.isRented {
playbackState(I18n.Content.Status.rented)
} else if item.price == 0 {
playbackState("")
} else {
HStack(spacing: 2) {
Image("ic_bar_cash")
.resizable()
.scaledToFit()
.frame(width: 18, height: 18)
Text(item.price.comma())
.appFont(size: 14, weight: .regular)
.foregroundColor(.white)
.lineLimit(1)
}
}
}
private func playbackState(_ title: String) -> some View {
VStack(spacing: SodaSpacing.s4) {
ZStack {
Color.white
Image("ic_new_player_play")
.resizable()
.scaledToFit()
.frame(width: 16, height: 16)
}
.frame(width: 28, height: 28)
.clipShape(Circle())
if !title.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
Text(title)
.appFont(size: 12, weight: .medium)
.foregroundColor(Color.gray400)
.lineLimit(1)
}
}
}
private var rowWidth: CGFloat? {
if case let .compact(width, _) = style {
return width
}
return nil
}
private var maxRowWidth: CGFloat? {
switch style {
case .compact:
return nil
case .purchaseState:
return .infinity
}
}
private var horizontalPadding: CGFloat {
switch style {
case .compact:
return 0
case .purchaseState:
return SodaSpacing.s20
}
}
private var verticalPadding: CGFloat {
switch style {
case .compact:
return 0
case .purchaseState:
return SodaSpacing.s8
}
}
private var titleSpacing: CGFloat {
switch style {
case .compact:
return 2
case .purchaseState:
return SodaSpacing.s6
}
}
private var titleLineLimit: Int {
switch style {
case .compact:
return 1
case .purchaseState:
return 2
}
}
private var showsTrailingState: Bool {
if case .purchaseState = style {
return true
}
return false
}
private var showsAdultTag: Bool {
switch style {
case let .compact(_, showsAdultTag):
return showsAdultTag
case .purchaseState:
return true
}
}
}
struct CreatorChannelAudioImageTag: View {
let imageName: String
var body: some View {
Image(imageName)
.resizable()
.scaledToFit()
.frame(width: 24, height: 24)
}
}
struct CreatorChannelAudioFirstTag: View {
var body: some View {
ZStack {
Color(hex: "FF34B8")
Image("ic_content_tag_first_star")
.resizable()
.scaledToFit()
.padding(SodaSpacing.s4)
}
.frame(width: 24, height: 24)
}
}
struct CreatorChannelAudioAdultTag: View {
var body: some View {
ZStack {
Color(hex: "FF4C3C")
Image("ic_new_shield_small")
.resizable()
.scaledToFit()
.padding(2)
}
.frame(width: 18, height: 18)
.cornerRadius(4)
}
}
struct CreatorChannelAudioFreeTag: View {
var body: some View {
Text("무료")
.appFont(size: 14, weight: .semibold)
.foregroundColor(.white)
.lineLimit(1)
.padding(SodaSpacing.s4)
.frame(height: 24)
.background(Color.soda900)
}
}
struct AudioContentListRow_Previews: PreviewProvider {
static var previews: some View {
VStack(spacing: SodaSpacing.s8) {
AudioContentListRow(
item: AudioContentListRowItem(
id: 1,
title: "콘텐츠 이름이 한 줄 콘텐츠 이름이 한 줄 콘텐츠 이름이 한 줄",
subtitle: "3:00 • 시리즈 이름",
imageUrl: "https://picsum.photos/300/300",
price: 0,
isAdult: false,
isPointAvailable: true,
isFirstContent: true,
isOriginalSeries: true,
isOwned: false,
isRented: false
),
style: .compact(width: 346)
)
AudioContentListRow(
item: AudioContentListRowItem(
id: 2,
title: "라이브 다시듣기 제목이 두 줄까지 표시됩니다",
subtitle: "1:43:25",
imageUrl: "https://picsum.photos/300/300",
price: 3000,
isAdult: true,
isPointAvailable: true,
isFirstContent: true,
isOriginalSeries: true,
isOwned: false,
isRented: false
),
style: .purchaseState
)
}
.background(Color.black)
.previewLayout(.sizeThatFits)
}
}

231
SodaLive/Sources/V2/Component/AudioContent/AudioContentThumbnailCard.swift Normal file
View File

@@ -0,0 +1,231 @@
import SwiftUI
struct AudioContentThumbnailCardItem: Identifiable {
let id: Int
let title: String
let subtitle: String
let imageUrl: String?
let price: Int
let isAdult: Bool
let isPointAvailable: Bool
let isFirstContent: Bool
let isOriginalSeries: Bool
}
struct AudioContentThumbnailCard: View {
let item: AudioContentThumbnailCardItem
let width: CGFloat
let titleTypography: SodaTypography
let subtitleTypography: SodaTypography
let labelHorizontalPadding: CGFloat
init(
item: AudioContentThumbnailCardItem,
size: AudioContentCardSize
) {
self.item = item
self.width = size.width
self.titleTypography = size.titleTypography
self.subtitleTypography = size.subtitleTypography
self.labelHorizontalPadding = size.labelHorizontalPadding
}
init(
item: AudioContentThumbnailCardItem,
width: CGFloat,
titleTypography: SodaTypography = .heading4,
subtitleTypography: SodaTypography = .body5,
labelHorizontalPadding: CGFloat = 0
) {
self.item = item
self.width = width
self.titleTypography = titleTypography
self.subtitleTypography = subtitleTypography
self.labelHorizontalPadding = labelHorizontalPadding
}
var body: some View {
VStack(alignment: .leading, spacing: SodaSpacing.s8) {
thumbnail
labelContent
}
.frame(width: width, alignment: .leading)
}
private var thumbnail: some View {
ZStack(alignment: .topLeading) {
DownsampledKFImage(
url: item.imageUrl.flatMap(URL.init(string:)),
size: CGSize(width: width, height: width)
)
.background(Color.gray800)
VStack(alignment: .leading, spacing: 0) {
topTagRow
Spacer(minLength: 0)
bottomTagRow
}
}
.frame(width: width, height: width)
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
}
private var labelContent: some View {
VStack(alignment: .leading, spacing: 2) {
Text(item.title)
.appFont(titleTypography)
.foregroundColor(.white)
.lineLimit(1)
.truncationMode(.tail)
Text(item.subtitle)
.appFont(subtitleTypography)
.foregroundColor(Color.gray500)
.lineLimit(1)
.truncationMode(.tail)
}
.frame(width: width - (labelHorizontalPadding * 2), alignment: .leading)
.padding(.horizontal, labelHorizontalPadding)
.frame(width: width, alignment: .leading)
}
@ViewBuilder
private var topTagRow: some View {
HStack(spacing: 0) {
if item.isOriginalSeries {
originalTag
}
if item.isFirstContent {
firstTag
}
Spacer(minLength: 0)
if item.isAdult {
adultTag
.padding(.top, SodaSpacing.s6)
.padding(.trailing, SodaSpacing.s6)
}
}
}
@ViewBuilder
private var bottomTagRow: some View {
HStack(spacing: 0) {
if item.isPointAvailable {
pointTag
}
if item.price == 0 {
freeTag
}
}
}
private var originalTag: some View {
Image("ic_content_tag_original")
.resizable()
.scaledToFit()
.frame(width: 24, height: 24)
}
private var firstTag: some View {
ZStack {
Image("ic_content_tag_first_star")
.resizable()
.scaledToFit()
.frame(width: 17, height: 17)
}
.padding(4)
.background(Color(hex: "FF34B8"))
}
private var adultTag: some View {
ZStack {
Color(hex: "FF4C3C")
Image("ic_new_shield_small")
.resizable()
.scaledToFit()
.padding(2)
}
.frame(width: 18, height: 18)
.cornerRadius(4)
}
private var pointTag: some View {
Image("ic_content_tag_point")
.resizable()
.scaledToFit()
.frame(width: 24, height: 24)
}
private var freeTag: some View {
Text("무료")
.appFont(size: 14, weight: .semibold)
.foregroundColor(.white)
.lineLimit(1)
.padding(.horizontal, SodaSpacing.s4)
.frame(height: 24)
.background(Color.soda900)
}
}
extension AudioContentThumbnailCardItem {
init(audioCard: AudioCardResponse) {
self.init(
id: audioCard.audioContentId,
title: audioCard.title,
subtitle: audioCard.creatorNickname,
imageUrl: audioCard.imageUrl,
price: audioCard.price,
isAdult: audioCard.isAdult,
isPointAvailable: audioCard.isPointAvailable,
isFirstContent: audioCard.isFirstContent,
isOriginalSeries: audioCard.isOriginalSeries
)
}
}
struct AudioContentThumbnailCard_Previews: PreviewProvider {
static var previews: some View {
HStack(alignment: .top, spacing: SodaSpacing.s14) {
AudioContentThumbnailCard(
item: AudioContentThumbnailCardItem(
id: 1,
title: "오디오 콘텐츠 제목입니다",
subtitle: "크리에이터명",
imageUrl: "https://picsum.photos/300/300",
price: 0,
isAdult: true,
isPointAvailable: true,
isFirstContent: true,
isOriginalSeries: true
),
size: .medium
)
AudioContentThumbnailCard(
item: AudioContentThumbnailCardItem(
id: 2,
title: "추천 오디오",
subtitle: "크리에이터명",
imageUrl: "https://picsum.photos/300/300",
price: 10,
isAdult: false,
isPointAvailable: false,
isFirstContent: true,
isOriginalSeries: true
),
width: 170
)
}
.padding(SodaSpacing.s20)
.background(Color.black)
.previewLayout(.sizeThatFits)
}
}