From 9f39f24da8065ca85e316b4f2e3dd469de044ee5 Mon Sep 17 00:00:00 2001 From: Yu Sung Date: Tue, 22 Jul 2025 01:46:04 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=20-=20=EC=A7=80=EA=B8=88=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=20=EC=A4=91=20UI=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- SodaLive/Sources/Live/LiveView.swift | 24 +-- .../Sources/Live/Now/LiveNowItemView.swift | 166 ++++++++---------- .../Sources/Live/Now/SectionLiveNowView.swift | 25 +-- 3 files changed, 103 insertions(+), 112 deletions(-) diff --git a/SodaLive/Sources/Live/LiveView.swift b/SodaLive/Sources/Live/LiveView.swift index e86c38b..fb2ba6c 100644 --- a/SodaLive/Sources/Live/LiveView.swift +++ b/SodaLive/Sources/Live/LiveView.swift @@ -121,19 +121,19 @@ struct LiveView: View { .onAppear { viewModel.getSummary() } - - if !appState.isShowPlayer && role == MemberRole.CREATOR.rawValue { - Image("btn_make_live") - .padding(.trailing, 16) - .padding(.bottom, 16) - .onTapGesture { - if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty { - AppState.shared.setAppStep(step: .createLive(timeSettingMode: .NOW, onSuccess: onCreateSuccess)) - } else { - AppState.shared.setAppStep(step: .login) - } + } + + if !appState.isShowPlayer && role == MemberRole.CREATOR.rawValue { + Image("btn_make_live") + .padding(.trailing, 16) + .padding(.bottom, 16) + .onTapGesture { + if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty { + AppState.shared.setAppStep(step: .createLive(timeSettingMode: .NOW, onSuccess: onCreateSuccess)) + } else { + AppState.shared.setAppStep(step: .login) } - } + } } } diff --git a/SodaLive/Sources/Live/Now/LiveNowItemView.swift b/SodaLive/Sources/Live/Now/LiveNowItemView.swift index f2ee24d..ee24131 100644 --- a/SodaLive/Sources/Live/Now/LiveNowItemView.swift +++ b/SodaLive/Sources/Live/Now/LiveNowItemView.swift @@ -12,99 +12,89 @@ struct LiveNowItemView: View { let item: GetRoomListResponse - let width: CGFloat = 128 - let height: CGFloat = 179 - var body: some View { - VStack(alignment: .leading, spacing: 8) { - ZStack { - KFImage(URL(string: item.coverImageUrl)) - .cancelOnDisappear(true) - .downsampling( - size: CGSize( - width: width, - height: height - ) - ) - .resizable() - .scaledToFill() - .frame(width: width, height: height, alignment: .center) - .cornerRadius(4.7) - .clipped() + ZStack(alignment: .top) { + HStack(spacing: 0) { + if item.isPrivateRoom { + Image("ic_lock") + .resizable() + .frame(width: 20, height: 20) + } - LinearGradient( - colors: [Color.black.opacity(0.1), Color.black.opacity(0.8)], - startPoint: .top, - endPoint: .bottom - ) - - VStack(alignment: .trailing, spacing: 0) { - HStack(spacing: 0) { - HStack(spacing: 1) { - if item.price > 0 { - Image("ic_can_white") - } - - Text(item.price > 0 ? "\(item.price)" : "무료") - .font(.custom(Font.medium.rawValue, size: 12)) - .foregroundColor(Color.white) - } - .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()) - } + Spacer() + } + + VStack(spacing: 0) { + ZStack(alignment: .bottom) { + ZStack { + KFImage(URL(string: item.creatorProfileImage)) + .cancelOnDisappear(true) + .resizable() + .frame(width: 72, height: 72) + .clipShape(Circle()) + } + .frame(width: 84, height: 84) + .overlay { + Circle() + .strokeBorder(lineWidth: 3) + .foregroundColor(.button) } - .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, coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png", isAdult: true, - price: 20, + price: 0, tags: ["팬미팅", "힐링"], channelName: nil, creatorProfileImage: "https://test-cf.sodalive.net/profile/default-profile.png", creatorNickname: "user8", creatorId: 19, isReservation: false, - isPrivateRoom: true + isPrivateRoom: false ) ) } diff --git a/SodaLive/Sources/Live/Now/SectionLiveNowView.swift b/SodaLive/Sources/Live/Now/SectionLiveNowView.swift index eabae12..d910a5f 100644 --- a/SodaLive/Sources/Live/Now/SectionLiveNowView.swift +++ b/SodaLive/Sources/Live/Now/SectionLiveNowView.swift @@ -21,28 +21,28 @@ struct SectionLiveNowView: View { LazyVStack(spacing: 13.3) { HStack(spacing: 0) { Text("지금 ") - .font(.custom(Font.bold.rawValue, size: 18.3)) - .foregroundColor(Color(hex: "eeeeee")) + .font(.custom(Font.preBold.rawValue, size: 24)) + .foregroundColor(.button) Text("라이브중") - .font(.custom(Font.bold.rawValue, size: 18.3)) - .foregroundColor(Color(hex: "ff5c49")) + .font(.custom(Font.preBold.rawValue, size: 24)) + .foregroundColor(.white) Spacer() if items.count > 0 { Text("전체보기") - .font(.custom(Font.light.rawValue, size: 11.3)) - .foregroundColor(Color(hex: "bbbbbb")) + .font(.custom(Font.preRegular.rawValue, size: 14)) + .foregroundColor(Color(hex: "78909C")) .onTapGesture { AppState.shared.setAppStep(step: .liveNowAll(onClickParticipant: onClickParticipant)) } } } - .padding(.horizontal, 13.3) - .frame(width: screenSize().width) + .padding(.horizontal, 24) + .frame(maxWidth: .infinity) if items.count > 0 { ScrollView(.horizontal, showsIndicators: false) { - HStack(alignment: .top, spacing: 10) { + HStack(alignment: .top, spacing: 16) { ForEach(items, id: \.self) { item in LiveNowItemView(item: item) .contentShape(Rectangle()) @@ -68,7 +68,7 @@ struct SectionLiveNowView: View { } } } - .padding(.horizontal, 13.3) + .padding(.horizontal, 24) } } else { VStack(spacing: 0) { @@ -85,8 +85,9 @@ struct SectionLiveNowView: View { .padding(.vertical, 8) } .padding(.vertical, 16.7) - .frame(width: screenSize().width - 26.7) + .frame(maxWidth: .infinity) .background(Color(hex: "13181b")) + .padding(.horizontal, 24) .cornerRadius(4.7) } @@ -104,7 +105,7 @@ struct SectionLiveNowView: View { RoundedRectangle(cornerRadius: 26.7) .stroke(Color.gray90, lineWidth: 1) ) - .padding(.horizontal, 13.3) + .padding(.horizontal, 24) .onTapGesture { onClickRefresh() }