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

feat(creator-profile): 콘텐츠 섹션 UI 변경

Browse Source
This commit is contained in:
Yu Sung
2025-10-17 06:49:15 +09:00
parent 3de1b2a7d6
commit d178ba101f
3 changed files with 97 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
SodaLive/Sources/Content/ContentListItemView.swift
View File

@@ -14,23 +14,23 @@ struct ContentListItemView: View {
var body: some View { var body: some View {
VStack(spacing: 10) { VStack(spacing: 10) {
HStack(spacing: 0) { HStack(spacing: 8) {
ZStack(alignment: .topLeading) { ZStack(alignment: .topLeading) {
KFImage(URL(string: item.coverImageUrl)) KFImage(URL(string: item.coverImageUrl))
.cancelOnDisappear(true) .cancelOnDisappear(true)
.downsampling(size: CGSize(width: 66.7, height: 66.7)) .downsampling(size: CGSize(width: 85, height: 85))
.resizable() .resizable()
.scaledToFill() .scaledToFill()
.frame(width: 66.7, height: 66.7, alignment: .top) .frame(width: 85, height: 85, alignment: .top)
.clipped() .clipped()
.cornerRadius(5.3) .cornerRadius(12)
} }
VStack(alignment: .leading, spacing: 0) { VStack(alignment: .leading, spacing: 8) {
HStack(spacing: 8) { HStack(spacing: 8) {
if item.isScheduledToOpen { if item.isScheduledToOpen {
Text("오픈예정") Text("오픈예정")
.font(.custom(Font.medium.rawValue, size: 8)) .font(.custom(Font.preMedium.rawValue, size: 11))
.foregroundColor(Color(hex: "3bb9f1")) .foregroundColor(Color(hex: "3bb9f1"))
.padding(2.6) .padding(2.6)
.background(Color(hex: "003851")) .background(Color(hex: "003851"))
@@ -38,14 +38,14 @@ struct ContentListItemView: View {
} }
Text(item.themeStr) Text(item.themeStr)
.font(.custom(Font.medium.rawValue, size: 8)) .font(.custom(Font.preMedium.rawValue, size: 11))
.foregroundColor(Color(hex: "3bac6a")) .foregroundColor(Color(hex: "3bac6a"))
.padding(2.6) .padding(2.6)
.background(Color(hex: "28312b")) .background(Color(hex: "28312b"))
.cornerRadius(2.6) .cornerRadius(2.6)
Text(item.duration!) Text(item.duration!)
.font(.custom(Font.medium.rawValue, size: 8)) .font(.custom(Font.preMedium.rawValue, size: 11))
.foregroundColor(Color(hex: "777777")) .foregroundColor(Color(hex: "777777"))
.padding(2.6) .padding(2.6)
.background(Color(hex: "222222")) .background(Color(hex: "222222"))
@@ -53,7 +53,7 @@ struct ContentListItemView: View {
if item.isPointAvailable { if item.isPointAvailable {
Text("포인트") Text("포인트")
.font(.custom(Font.medium.rawValue, size: 8)) .font(.custom(Font.preMedium.rawValue, size: 11))
.foregroundColor(.white) .foregroundColor(.white)
.padding(2.6) .padding(2.6)
.background(Color(hex: "7849bc")) .background(Color(hex: "7849bc"))
@@ -68,43 +68,38 @@ struct ContentListItemView: View {
} }
Text(item.title) Text(item.title)
.font(.custom(Font.medium.rawValue, size: 12)) .font(.custom(Font.preMedium.rawValue, size: 18))
.foregroundColor(Color(hex: "d2d2d2")) .foregroundColor(.white)
.multilineTextAlignment(.leading) .multilineTextAlignment(.leading)
.padding(.top, 8)
.padding(.bottom, 10)
HStack(spacing: 13.3) { HStack(spacing: 14) {
HStack(spacing: 6) { HStack(spacing: 6) {
Image("ic_heart_777") Image("ic_heart_777")
.resizable() .resizable()
.frame(width: 13.3, height: 13.3) .frame(width: 18, height: 18)
Text("\(item.likeCount)") Text("\(item.likeCount)")
.font(.custom(Font.medium.rawValue, size: 13.3)) .font(.custom(Font.preMedium.rawValue, size: 18))
.foregroundColor(Color(hex: "777777")) .foregroundColor(Color(hex: "777777"))
} }
HStack(spacing: 6) { HStack(spacing: 6) {
Image("ic_message_square_777") Image("ic_message_square_777")
.resizable() .resizable()
.frame(width: 13.3, height: 13.3) .frame(width: 18, height: 18)
Text("\(item.commentCount)") Text("\(item.commentCount)")
.font(.custom(Font.medium.rawValue, size: 13.3)) .font(.custom(Font.preMedium.rawValue, size: 18))
.foregroundColor(Color(hex: "777777")) .foregroundColor(Color(hex: "777777"))
} }
} }
} }
.padding(.leading, 10.7)
.padding(.top, 8)
.padding(.bottom, 12)
Spacer() Spacer()
if item.isOwned { if item.isOwned {
Text("소장중") Text("소장중")
.font(.custom(Font.medium.rawValue, size: 13.3)) .font(.custom(Font.preMedium.rawValue, size: 14))
.foregroundColor(Color.gray11) .foregroundColor(Color.gray11)
.padding(.horizontal, 5.3) .padding(.horizontal, 5.3)
.padding(.vertical, 2.7) .padding(.vertical, 2.7)
@@ -112,7 +107,7 @@ struct ContentListItemView: View {
.cornerRadius(2.6) .cornerRadius(2.6)
} else if item.isRented { } else if item.isRented {
Text("대여중") Text("대여중")
.font(.custom(Font.medium.rawValue, size: 13.3)) .font(.custom(Font.preMedium.rawValue, size: 14))
.foregroundColor(Color.white) .foregroundColor(Color.white)
.padding(.horizontal, 5.3) .padding(.horizontal, 5.3)
.padding(.vertical, 2.7) .padding(.vertical, 2.7)
@@ -120,7 +115,7 @@ struct ContentListItemView: View {
.cornerRadius(2.6) .cornerRadius(2.6)
} else if item.isSoldOut { } else if item.isSoldOut {
Text("Sold Out") Text("Sold Out")
.font(.custom(Font.medium.rawValue, size: 13.3)) .font(.custom(Font.preMedium.rawValue, size: 14))
.foregroundColor(Color.grayd2) .foregroundColor(Color.grayd2)
.padding(.horizontal, 5.3) .padding(.horizontal, 5.3)
.padding(.vertical, 2.7) .padding(.vertical, 2.7)
@@ -136,13 +131,13 @@ struct ContentListItemView: View {
.frame(width: 17, height: 17) .frame(width: 17, height: 17)
Text("\(item.price)") Text("\(item.price)")
.font(.custom(Font.medium.rawValue, size: 12)) .font(.custom(Font.preMedium.rawValue, size: 14))
.foregroundColor(Color(hex: "909090")) .foregroundColor(.white)
} }
} else { } else {
Text("무료") Text("무료")
.font(.custom(Font.medium.rawValue, size: 12)) .font(.custom(Font.preMedium.rawValue, size: 14))
.foregroundColor(Color(hex: "909090")) .foregroundColor(.white)
} }
} }

77
SodaLive/Sources/Explorer/Profile/UserProfileContentView.swift
View File

@@ -11,19 +11,28 @@ struct UserProfileContentView: View {
let userId: Int let userId: Int
let items: [GetAudioContentListItem] let items: [GetAudioContentListItem]
let totalContentCount: Int
let ownedContentCount: Int
private var progressBarWidth: CGFloat {
let maxWidth: CGFloat = screenSize().width - 48
guard totalContentCount > 0 else { return 0 }
let percentage = Double(ownedContentCount) / Double(totalContentCount)
return maxWidth * percentage
}
var body: some View { var body: some View {
VStack(spacing: 21) { VStack(spacing: 21) {
HStack(spacing: 0) { HStack(spacing: 0) {
Text(userId == UserDefaults.int(forKey: .userId) ? "내 콘텐츠" : "콘텐츠") Text(userId == UserDefaults.int(forKey: .userId) ? "내 콘텐츠" : "콘텐츠")
.font(.custom(Font.bold.rawValue, size: 18.3)) .font(.custom(Font.preBold.rawValue, size: 26))
.foregroundColor(Color.grayee) .foregroundColor(Color.white)
Spacer() Spacer()
Text("전체보기") Text("전체보기")
.font(.custom(Font.medium.rawValue, size: 12)) .font(.custom(Font.preLight.rawValue, size: 14))
.foregroundColor(Color.graybb) .foregroundColor(Color(hex: "78909C"))
.onTapGesture { .onTapGesture {
AppState.shared.setAppStep(step: .contentListAll(userId: userId)) AppState.shared.setAppStep(step: .contentListAll(userId: userId))
} }
@@ -31,13 +40,15 @@ struct UserProfileContentView: View {
if userId == UserDefaults.int(forKey: .userId) { if userId == UserDefaults.int(forKey: .userId) {
Text("새로운 콘텐츠 등록하기") Text("새로운 콘텐츠 등록하기")
.font(.custom(Font.bold.rawValue, size: 15)) .font(.custom(Font.bold.rawValue, size: 16))
.foregroundColor(Color.grayee) .foregroundColor(Color.grayee)
.padding(.vertical, 17) .padding(.vertical, 17)
.frame(maxWidth: .infinity) .frame(maxWidth: .infinity)
.background(Color.button) .background(Color.button)
.cornerRadius(5.3) .cornerRadius(12)
.onTapGesture { AppState.shared.setAppStep(step: .createContent) } .onTapGesture { AppState.shared.setAppStep(step: .createContent) }
} else {
collectionInfoView()
} }
VStack(spacing: 10.7) { VStack(spacing: 10.7) {
@@ -56,6 +67,56 @@ struct UserProfileContentView: View {
} }
} }
} }
@ViewBuilder
private func collectionInfoView() -> some View {
VStack(spacing: 8) {
// 상단 정보 (계산된 % 보유중, 정보 아이콘, 개수)
HStack {
Text(ownedContentCount > 0 ? "\(Int(round(Double(ownedContentCount) / Double(totalContentCount) * 100)))% 보유중" : "소장 중인 작품이 없어요!")
.font(.custom(Font.preBold.rawValue, size: 18))
.foregroundColor(.white)
Spacer()
HStack(spacing: 4) {
Text("\(ownedContentCount)")
.font(.custom(Font.preRegular.rawValue, size: 16))
.foregroundColor(Color(hex: "#FDD453"))
Text("/")
.font(.custom(Font.preRegular.rawValue, size: 16))
.foregroundColor(.white)
Text("\(totalContentCount)개")
.font(.custom(Font.preRegular.rawValue, size: 16))
.foregroundColor(.white)
}
}
// 진행률 바
GeometryReader { geometry in
ZStack(alignment: .leading) {
// 배경 바
RoundedRectangle(cornerRadius: 999)
.foregroundColor(Color(hex: "#37474F"))
.frame(height: 9)
// 진행률 바 (계산된 퍼센트)
RoundedRectangle(cornerRadius: 999)
.fill(
LinearGradient(
colors: [Color(hex: "#80D8FF"), Color(hex: "#6D5ED7")],
startPoint: .leading,
endPoint: .trailing
)
)
.frame(width: min(progressBarWidth, geometry.size.width), height: 9)
}
}
.frame(height: 9)
}
}
} }
struct UserProfileContentView_Previews: PreviewProvider { struct UserProfileContentView_Previews: PreviewProvider {
@@ -80,7 +141,9 @@ struct UserProfileContentView_Previews: PreviewProvider {
isSoldOut: false, isSoldOut: false,
isPointAvailable: true isPointAvailable: true
) )
] ],
totalContentCount: 0,
ownedContentCount: 0
) )
} }
} }

5
SodaLive/Sources/Explorer/Profile/UserProfileView.swift
View File

@@ -203,8 +203,11 @@ struct UserProfileView: View {
if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) || creatorProfile.contentList.count > 0 { if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) || creatorProfile.contentList.count > 0 {
UserProfileContentView( UserProfileContentView(
userId: userId, userId: userId,
items: creatorProfile.contentList items: creatorProfile.contentList,
totalContentCount: creatorProfile.totalContentCount,
ownedContentCount: creatorProfile.ownedContentCount
) )
.padding(.horizontal, 24)
} }
if viewModel.communityPostList.count > 0 { if viewModel.communityPostList.count > 0 {