feat: 메인 라이브

- 지금 라이브 중 UI 적용
This commit is contained in:
Yu Sung
2025-07-22 01:46:04 +09:00
parent 7518ac7957
commit 9f39f24da8
3 changed files with 103 additions and 112 deletions

View File

@@ -121,19 +121,19 @@ struct LiveView: View {
.onAppear { .onAppear {
viewModel.getSummary() viewModel.getSummary()
} }
}
if !appState.isShowPlayer && role == MemberRole.CREATOR.rawValue {
Image("btn_make_live") if !appState.isShowPlayer && role == MemberRole.CREATOR.rawValue {
.padding(.trailing, 16) Image("btn_make_live")
.padding(.bottom, 16) .padding(.trailing, 16)
.onTapGesture { .padding(.bottom, 16)
if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty { .onTapGesture {
AppState.shared.setAppStep(step: .createLive(timeSettingMode: .NOW, onSuccess: onCreateSuccess)) if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
} else { AppState.shared.setAppStep(step: .createLive(timeSettingMode: .NOW, onSuccess: onCreateSuccess))
AppState.shared.setAppStep(step: .login) } else {
} AppState.shared.setAppStep(step: .login)
} }
} }
} }
} }

View File

@@ -12,99 +12,89 @@ struct LiveNowItemView: View {
let item: GetRoomListResponse let item: GetRoomListResponse
let width: CGFloat = 128
let height: CGFloat = 179
var body: some View { var body: some View {
VStack(alignment: .leading, spacing: 8) { ZStack(alignment: .top) {
ZStack { HStack(spacing: 0) {
KFImage(URL(string: item.coverImageUrl)) if item.isPrivateRoom {
.cancelOnDisappear(true) Image("ic_lock")
.downsampling( .resizable()
size: CGSize( .frame(width: 20, height: 20)
width: width, }
height: height
)
)
.resizable()
.scaledToFill()
.frame(width: width, height: height, alignment: .center)
.cornerRadius(4.7)
.clipped()
LinearGradient( Spacer()
colors: [Color.black.opacity(0.1), Color.black.opacity(0.8)], }
startPoint: .top,
endPoint: .bottom VStack(spacing: 0) {
) ZStack(alignment: .bottom) {
ZStack {
VStack(alignment: .trailing, spacing: 0) { KFImage(URL(string: item.creatorProfileImage))
HStack(spacing: 0) { .cancelOnDisappear(true)
HStack(spacing: 1) { .resizable()
if item.price > 0 { .frame(width: 72, height: 72)
Image("ic_can_white") .clipShape(Circle())
} }
.frame(width: 84, height: 84)
Text(item.price > 0 ? "\(item.price)" : "무료") .overlay {
.font(.custom(Font.medium.rawValue, size: 12)) Circle()
.foregroundColor(Color.white) .strokeBorder(lineWidth: 3)
} .foregroundColor(.button)
.padding(.horizontal, 7.3)
.padding(.vertical, 4)
.background(item.price > 0 ? Color.mainRed3 : Color.gray11)
.cornerRadius(13.3)
Spacer()
if item.isPrivateRoom {
Image("ic_lock")
.resizable()
.frame(width: 20, height: 20)
.padding(2.7)
.background(Color.gray33.opacity(0.7))
.clipShape(Circle())
}
} }
.padding(.horizontal, 3.3)
.padding(.top, 3.3)
Spacer() Image("img_live")
.resizable()
.frame(width: 50, height: 18)
}
Spacer()
Text(item.creatorNickname)
.font(.custom(Font.preRegular.rawValue, size: 16))
.foregroundColor(.white)
.padding(.horizontal, 2)
Text(item.title)
.font(.custom(Font.preRegular.rawValue, size: 12))
.foregroundColor(Color(hex: "#B0BEC5"))
.lineLimit(1)
.truncationMode(.tail)
.padding(.top, 4)
.padding(.horizontal, 2)
Spacer()
if item.price > 0 {
HStack(spacing: 2) {
Image("ic_can_circle")
.resizable()
.frame(width: 16, height: 16)
Text("\(item.price)")
.font(.custom(Font.preRegular.rawValue, size: 14))
.foregroundColor(.white)
}
.padding(.vertical, 4)
.frame(maxWidth: .infinity)
.background(Color(hex: "3b5ff1"))
.cornerRadius(999)
.padding(.horizontal, 2)
.padding(.bottom, 2)
} else {
Text("무료")
.font(.custom(Font.preRegular.rawValue, size: 14))
.foregroundColor(Color(hex: "#263238"))
.padding(.vertical, 4)
.frame(maxWidth: .infinity)
.background(Color.white)
.cornerRadius(999)
.padding(.horizontal, 2)
.padding(.bottom, 2)
} }
} }
.frame(width: width, height: height)
Text("\(item.title)")
.font(.custom(Font.medium.rawValue, size: 12))
.foregroundColor(Color(hex: "eeeeee"))
.lineLimit(2)
.fixedSize(horizontal: false, vertical: true)
if item.tags.count > 0 {
Text("\(item.tags.map { "#\($0)" }.joined(separator: " "))")
.font(.custom(Font.medium.rawValue, size: 11))
.foregroundColor(Color(hex: "3bb9f1"))
}
HStack(spacing: 5.3) {
KFImage(URL(string: item.creatorProfileImage))
.cancelOnDisappear(true)
.downsampling(
size: CGSize(
width: 21.3,
height: 21.3
)
)
.resizable()
.scaledToFill()
.frame(width: 21.3, height: 21.3, alignment: .center)
.clipShape(Circle())
Text("\(item.creatorNickname)")
.font(.custom(Font.medium.rawValue, size: 10))
.foregroundColor(Color(hex: "777777"))
}
} }
.frame(width: width) .padding(10)
.frame(width: 144, height: 204, alignment: .top)
.background(Color(hex: "263238"))
.cornerRadius(16)
} }
} }
@@ -120,14 +110,14 @@ struct LiveNowItemView_Previews: PreviewProvider {
numberOfPeople: 5, numberOfPeople: 5,
coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png", coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
isAdult: true, isAdult: true,
price: 20, price: 0,
tags: ["팬미팅", "힐링"], tags: ["팬미팅", "힐링"],
channelName: nil, channelName: nil,
creatorProfileImage: "https://test-cf.sodalive.net/profile/default-profile.png", creatorProfileImage: "https://test-cf.sodalive.net/profile/default-profile.png",
creatorNickname: "user8", creatorNickname: "user8",
creatorId: 19, creatorId: 19,
isReservation: false, isReservation: false,
isPrivateRoom: true isPrivateRoom: false
) )
) )
} }

View File

@@ -21,28 +21,28 @@ struct SectionLiveNowView: View {
LazyVStack(spacing: 13.3) { LazyVStack(spacing: 13.3) {
HStack(spacing: 0) { HStack(spacing: 0) {
Text("지금 ") Text("지금 ")
.font(.custom(Font.bold.rawValue, size: 18.3)) .font(.custom(Font.preBold.rawValue, size: 24))
.foregroundColor(Color(hex: "eeeeee")) .foregroundColor(.button)
Text("라이브중") Text("라이브중")
.font(.custom(Font.bold.rawValue, size: 18.3)) .font(.custom(Font.preBold.rawValue, size: 24))
.foregroundColor(Color(hex: "ff5c49")) .foregroundColor(.white)
Spacer() Spacer()
if items.count > 0 { if items.count > 0 {
Text("전체보기") Text("전체보기")
.font(.custom(Font.light.rawValue, size: 11.3)) .font(.custom(Font.preRegular.rawValue, size: 14))
.foregroundColor(Color(hex: "bbbbbb")) .foregroundColor(Color(hex: "78909C"))
.onTapGesture { AppState.shared.setAppStep(step: .liveNowAll(onClickParticipant: onClickParticipant)) } .onTapGesture { AppState.shared.setAppStep(step: .liveNowAll(onClickParticipant: onClickParticipant)) }
} }
} }
.padding(.horizontal, 13.3) .padding(.horizontal, 24)
.frame(width: screenSize().width) .frame(maxWidth: .infinity)
if items.count > 0 { if items.count > 0 {
ScrollView(.horizontal, showsIndicators: false) { ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .top, spacing: 10) { HStack(alignment: .top, spacing: 16) {
ForEach(items, id: \.self) { item in ForEach(items, id: \.self) { item in
LiveNowItemView(item: item) LiveNowItemView(item: item)
.contentShape(Rectangle()) .contentShape(Rectangle())
@@ -68,7 +68,7 @@ struct SectionLiveNowView: View {
} }
} }
} }
.padding(.horizontal, 13.3) .padding(.horizontal, 24)
} }
} else { } else {
VStack(spacing: 0) { VStack(spacing: 0) {
@@ -85,8 +85,9 @@ struct SectionLiveNowView: View {
.padding(.vertical, 8) .padding(.vertical, 8)
} }
.padding(.vertical, 16.7) .padding(.vertical, 16.7)
.frame(width: screenSize().width - 26.7) .frame(maxWidth: .infinity)
.background(Color(hex: "13181b")) .background(Color(hex: "13181b"))
.padding(.horizontal, 24)
.cornerRadius(4.7) .cornerRadius(4.7)
} }
@@ -104,7 +105,7 @@ struct SectionLiveNowView: View {
RoundedRectangle(cornerRadius: 26.7) RoundedRectangle(cornerRadius: 26.7)
.stroke(Color.gray90, lineWidth: 1) .stroke(Color.gray90, lineWidth: 1)
) )
.padding(.horizontal, 13.3) .padding(.horizontal, 24)
.onTapGesture { .onTapGesture {
onClickRefresh() onClickRefresh()
} }