유료방 입장 팝업 - UI 수정, 알림 문구 수정

This commit is contained in:
Yu Sung 2024-01-22 19:19:47 +09:00
parent ac49b4e2ad
commit 31bd137f4d
6 changed files with 92 additions and 30 deletions

View File

@ -11,6 +11,7 @@ struct LivePaymentDialog: View {
let title: String
let desc: String
let desc2: String?
let confirmButtonTitle: String
let confirmButtonAction: () -> Void
let cancelButtonTitle: String
@ -25,40 +26,48 @@ struct LivePaymentDialog: View {
.font(.custom(Font.bold.rawValue, size: 18.3))
.foregroundColor(Color.graybb)
if let startDateTime = startDateTime, let nowDateTime = nowDateTime {
HStack(spacing: 0) {
VStack(alignment: .leading, spacing: 13.3) {
Text("시작 시각")
Text(desc)
.font(.custom(Font.medium.rawValue, size: 15))
.foregroundColor(Color.graybb)
.multilineTextAlignment(.center)
.lineSpacing(6)
.padding(.top, 21.3)
if let startDateTime = startDateTime, let nowDateTime = nowDateTime, let desc = desc2 {
VStack(spacing: 13.3) {
HStack(spacing: 6.7) {
Text("- 시작 시각 : ")
.font(.custom(Font.medium.rawValue, size: 13.3))
.foregroundColor(Color.graybb)
Text("현재 시각")
.font(.custom(Font.medium.rawValue, size: 13.3))
.foregroundColor(Color.graybb)
}
.frame(maxWidth: .infinity)
VStack(alignment: .leading, spacing: 13.3) {
Text(startDateTime)
.font(.custom(Font.medium.rawValue, size: 13.3))
.foregroundColor(Color.graybb)
}
HStack(spacing: 6.7) {
Text("- 현재 시각 :")
.font(.custom(Font.medium.rawValue, size: 13.3))
.foregroundColor(Color.graybb)
.multilineTextAlignment(.leading)
Text(nowDateTime)
.font(.custom(Font.medium.rawValue, size: 13.3))
.foregroundColor(Color.graybb)
}
.frame(maxWidth: .infinity)
}
.padding(13.3)
.padding(.vertical, 13.3)
.padding(.horizontal, 26.7)
.background(Color.gray30)
.cornerRadius(13.3)
.padding(.top, 21.3)
}
Text(desc)
.font(.custom(Font.medium.rawValue, size: 15))
.foregroundColor(Color.graybb)
.padding(.top, startDateTime != nil && nowDateTime != nil ? 16.7 : 21.3)
Text(desc)
.font(.custom(Font.medium.rawValue, size: 15))
.foregroundColor(Color.graybb)
.lineSpacing(6)
.padding(.top, 21.3)
}
HStack(spacing: 13.3) {
Text("취소")
@ -72,6 +81,7 @@ struct LivePaymentDialog: View {
RoundedRectangle(cornerRadius: 8)
.stroke(Color(hex: "3bb9f1"), lineWidth: 1)
)
.onTapGesture { cancelButtonAction() }
Text("결제 후 입장")
.font(.custom(Font.bold.rawValue, size: 18.3))
@ -79,6 +89,7 @@ struct LivePaymentDialog: View {
.frame(maxWidth: .infinity)
.background(Color.button)
.cornerRadius(10)
.onTapGesture { confirmButtonAction() }
}
.padding(.top, 45)
}
@ -92,8 +103,9 @@ struct LivePaymentDialog: View {
#Preview {
LivePaymentDialog(
title: "100캔으로 입장",
desc: "'테스트' 라이브에 참여하기 위해 결제합니다.'테스트' 라이브에 참여하기 위해 결제합니다.'테스트' 라이브에 참여하기 위해 결제합니다.",
title: "유료 라이브 입장",
desc: "OO캔을 차감하고\n라이브에 입장 하시겠습니까?",
desc2: "라이브가 시작한 지 1시간 10분이 지났습니다. 라이브에 입장 후 30분 이내에 라이브가 종료될 수도 있습니다.",
confirmButtonTitle: "",
confirmButtonAction: {},
cancelButtonTitle: "",

View File

@ -212,13 +212,16 @@ struct UserProfileView: View {
ZStack {
if viewModel.isShowPaymentDialog {
SodaDialog(
LivePaymentDialog(
title: viewModel.paymentDialogTitle,
desc: viewModel.paymentDialogDesc,
desc2: viewModel.paymentDialogDesc2,
confirmButtonTitle: viewModel.paymentDialogConfirmTitle,
confirmButtonAction: viewModel.paymentDialogConfirmAction,
cancelButtonTitle: viewModel.paymentDialogCancelTitle,
cancelButtonAction: viewModel.hidePaymentPopup
cancelButtonAction: viewModel.hidePaymentPopup,
startDateTime: viewModel.liveStartDate,
nowDateTime: viewModel.nowDate
)
}

View File

@ -24,6 +24,7 @@ final class UserProfileViewModel: ObservableObject {
@Published var paymentDialogTitle = ""
@Published var paymentDialogDesc = ""
@Published var paymentDialogDesc2 = ""
@Published var isShowPaymentDialog = false
@Published var paymentDialogConfirmAction = {}
@Published var paymentDialogConfirmTitle = ""
@ -50,6 +51,9 @@ final class UserProfileViewModel: ObservableObject {
@Published var isShowCheersReportView = false
@Published var isShowCheersDeleteView = false
@Published var liveStartDate: String? = nil
@Published var nowDate: String? = nil
let paymentDialogCancelTitle = "취소"
func getCreatorProfile(userId: Int) {
@ -201,8 +205,24 @@ final class UserProfileViewModel: ObservableObject {
}
self.isShowPasswordDialog = true
} else {
self.paymentDialogTitle = "\($0.price)캔으로 입장"
self.paymentDialogDesc = "'\($0.title)' 라이브에 참여하기 위해 결제합니다."
let fromFormatter = DateFormatter()
fromFormatter.dateFormat = "yyyy.MM.dd EEE hh:mm a"
fromFormatter.locale = Locale(identifier: "en_US_POSIX")
let beginDate = fromFormatter.date(from: $0.beginDateTime)!
let now = Date()
let timeInterval = now.timeIntervalSince(beginDate)
let hours = Int(timeInterval / 3600)
let minutes = Int((timeInterval.truncatingRemainder(dividingBy: 3600)) / 60)
if hours >= 1 {
self.liveStartDate = beginDate.convertDateFormat(dateFormat: "yyyy-MM-dd, HH:mm")
self.nowDate = now.convertDateFormat(dateFormat: "yyyy-MM-dd, HH:mm")
self.paymentDialogDesc2 = "라이브를 시작한 지 \(hours)시간 \(minutes)분이 지났습니다. 라이브에 입장 후 30분 이내에 라이브가 종료될 수도 있습니다."
}
self.paymentDialogTitle = "유료 라이브 입장"
self.paymentDialogDesc = "\($0.price)캔을 차감하고\n라이브에 입장 하시겠습니까?"
self.paymentDialogConfirmTitle = "결제 후 참여하기"
self.paymentDialogConfirmAction = { [unowned self] in
hidePaymentPopup()

View File

@ -91,13 +91,16 @@ struct LiveView: View {
}
if viewModel.isShowPaymentDialog {
SodaDialog(
LivePaymentDialog(
title: viewModel.paymentDialogTitle,
desc: viewModel.paymentDialogDesc,
desc2: viewModel.paymentDialogDesc2,
confirmButtonTitle: viewModel.paymentDialogConfirmTitle,
confirmButtonAction: viewModel.paymentDialogConfirmAction,
cancelButtonTitle: viewModel.paymentDialogCancelTitle,
cancelButtonAction: viewModel.hidePopup
cancelButtonAction: viewModel.hidePopup,
startDateTime: viewModel.liveStartDate,
nowDateTime: viewModel.nowDate
)
}

View File

@ -34,6 +34,7 @@ final class LiveViewModel: ObservableObject {
@Published var paymentDialogTitle = ""
@Published var paymentDialogDesc = ""
@Published var paymentDialogDesc2 = ""
@Published var isShowPaymentDialog = false
@Published var paymentDialogConfirmAction = {}
@Published var paymentDialogConfirmTitle = ""
@ -48,6 +49,9 @@ final class LiveViewModel: ObservableObject {
}
}
@Published var liveStartDate: String? = nil
@Published var nowDate: String? = nil
let paymentDialogCancelTitle = "취소"
var page = 1
@ -71,6 +75,7 @@ final class LiveViewModel: ObservableObject {
paymentDialogTitle = ""
paymentDialogDesc = ""
paymentDialogDesc2 = ""
paymentDialogConfirmAction = {}
secretOrPasswordDialogCan = 0
@ -438,8 +443,24 @@ final class LiveViewModel: ObservableObject {
}
self.isShowPasswordDialog = true
} else {
self.paymentDialogTitle = "\($0.price)캔으로 입장"
self.paymentDialogDesc = "'\($0.title)' 라이브에 참여하기 위해 결제합니다."
let fromFormatter = DateFormatter()
fromFormatter.dateFormat = "yyyy.MM.dd EEE hh:mm a"
fromFormatter.locale = Locale(identifier: "en_US_POSIX")
let beginDate = fromFormatter.date(from: $0.beginDateTime)!
let now = Date()
let timeInterval = now.timeIntervalSince(beginDate)
let hours = Int(timeInterval / 3600)
let minutes = Int((timeInterval.truncatingRemainder(dividingBy: 3600)) / 60)
if hours >= 1 {
self.liveStartDate = beginDate.convertDateFormat(dateFormat: "yyyy-MM-dd, HH:mm")
self.nowDate = now.convertDateFormat(dateFormat: "yyyy-MM-dd, HH:mm")
self.paymentDialogDesc2 = "라이브를 시작한 지 \(hours)시간 \(minutes)분이 지났습니다. 라이브에 입장 후 30분 이내에 라이브가 종료될 수도 있습니다."
}
self.paymentDialogTitle = "유료 라이브 입장"
self.paymentDialogDesc = "\($0.price)캔을 차감하고\n라이브에 입장 하시겠습니까?"
self.paymentDialogConfirmTitle = "결제 후 참여하기"
self.paymentDialogConfirmAction = { [unowned self] in
hidePopup()

View File

@ -128,13 +128,16 @@ struct HomeView: View {
}
if liveViewModel.isShowPaymentDialog {
SodaDialog(
LivePaymentDialog(
title: liveViewModel.paymentDialogTitle,
desc: liveViewModel.paymentDialogDesc,
desc2: liveViewModel.paymentDialogDesc2,
confirmButtonTitle: liveViewModel.paymentDialogConfirmTitle,
confirmButtonAction: liveViewModel.paymentDialogConfirmAction,
cancelButtonTitle: liveViewModel.paymentDialogCancelTitle,
cancelButtonAction: liveViewModel.hidePopup
cancelButtonAction: liveViewModel.hidePopup,
startDateTime: liveViewModel.liveStartDate,
nowDateTime: liveViewModel.nowDate
)
}