diff --git a/SodaLive/Sources/Live/Now/LiveNowItemView.swift b/SodaLive/Sources/Live/Now/LiveNowItemView.swift index 51cc2f1..ea7de7e 100644 --- a/SodaLive/Sources/Live/Now/LiveNowItemView.swift +++ b/SodaLive/Sources/Live/Now/LiveNowItemView.swift @@ -23,91 +23,114 @@ struct LiveNowItemView: View { private var resolvedHeight: CGFloat { resolvedWidth * defaultHeight / defaultWidth } + + private var tagsToShow: [String] { + Array(item.tags.prefix(2)) + } var body: some View { - ZStack(alignment: .top) { - HStack(spacing: 0) { - if item.isPrivateRoom { - Image("ic_lock") - .resizable() - .frame(width: 20, height: 20) - } - - Spacer() - } - - VStack(spacing: 0) { - ZStack(alignment: .bottom) { - ZStack { - DownsampledKFImage( - url: URL(string: item.creatorProfileImage), - size: CGSize(width: 72, height: 72) - ) - .clipShape(Circle()) - } - .frame(width: 84, height: 84) - .overlay { - Circle() - .strokeBorder(lineWidth: 3) - .foregroundColor(.button) + VStack(spacing: 8) { + ZStack(alignment: .top) { + HStack(spacing: 0) { + if item.isPrivateRoom { + Image("ic_lock") + .resizable() + .frame(width: 20, height: 20) } - Image("img_live") - .resizable() - .frame(width: 50, height: 18) + Spacer() } - Spacer() - - Text(item.creatorNickname) - .appFont(size: 16, weight: .regular) - .foregroundColor(.white) - .padding(.horizontal, 2) - - Text(item.title) - .appFont(size: 12, weight: .regular) - .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") - .resizable() - .scaledToFit() - .frame(width: 16) + VStack(spacing: 0) { + ZStack(alignment: .bottom) { + ZStack { + DownsampledKFImage( + url: URL(string: item.creatorProfileImage), + size: CGSize(width: 72, height: 72) + ) + .clipShape(Circle()) + } + .frame(width: 84, height: 84) + .overlay { + Circle() + .strokeBorder(lineWidth: 3) + .foregroundColor(.button) + } - Text("\(item.price)") - .appFont(size: 14, weight: .regular) - .foregroundColor(.white) + Image("img_live") + .resizable() + .frame(width: 50, height: 18) } - .padding(.vertical, 4) - .frame(maxWidth: .infinity) - .background(Color(hex: "3b5ff1")) - .cornerRadius(999) - .padding(.horizontal, 2) - .padding(.bottom, 2) - } else { - Text("무료") - .appFont(size: 14, weight: .regular) - .foregroundColor(Color(hex: "#263238")) + + Spacer() + + Text(item.creatorNickname) + .appFont(size: 16, weight: .regular) + .foregroundColor(.white) + .padding(.horizontal, 2) + + Text(item.title) + .appFont(size: 12, weight: .regular) + .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") + .resizable() + .scaledToFit() + .frame(width: 16) + + Text("\(item.price)") + .appFont(size: 14, weight: .regular) + .foregroundColor(.white) + } .padding(.vertical, 4) .frame(maxWidth: .infinity) - .background(Color.white) + .background(Color(hex: "3b5ff1")) .cornerRadius(999) .padding(.horizontal, 2) .padding(.bottom, 2) + } else { + Text("무료") + .appFont(size: 14, weight: .regular) + .foregroundColor(Color(hex: "#263238")) + .padding(.vertical, 4) + .frame(maxWidth: .infinity) + .background(Color.white) + .cornerRadius(999) + .padding(.horizontal, 2) + .padding(.bottom, 2) + } } } + .padding(10) + .frame(width: resolvedWidth, height: resolvedHeight, alignment: .top) + .background(Color(hex: "263238")) + .cornerRadius(16) + + if !tagsToShow.isEmpty { + HStack(spacing: 4) { + ForEach(tagsToShow, id: \.self) { tag in + Text(tag) + .appFont(size: 12, weight: .regular) + .foregroundColor(.white) + .padding(.horizontal, 8) + .padding(.vertical, 4) + .background(Color(hex: "37474F")) + .cornerRadius(8) + } + + Spacer() + } + .padding(.horizontal, 4) + } } - .padding(10) - .frame(width: resolvedWidth, height: resolvedHeight, alignment: .top) - .background(Color(hex: "263238")) - .cornerRadius(16) } }