diff --git a/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsOptionView.swift b/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsOptionView.swift index 961738a..7208b9e 100644 --- a/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsOptionView.swift +++ b/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsOptionView.swift @@ -13,6 +13,7 @@ struct RouletteSettingsOptionView: View { let index: Int let onClickDelete: () -> Void + let calculateTotalPercentage: () -> Void var body: some View { VStack(spacing: 6.7) { @@ -55,6 +56,8 @@ struct RouletteSettingsOptionView: View { if newValue.count > 5 { option.percentage = String(newValue.prefix(5)) } + + calculateTotalPercentage() } Text("%") @@ -76,7 +79,8 @@ struct RouletteSettingsOptionView_Previews: PreviewProvider { RouletteSettingsOptionView( option: RouletteOption(title: "옵션1", percentage: ""), index: 2, - onClickDelete: {} + onClickDelete: {}, + calculateTotalPercentage: {} ) } } diff --git a/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsView.swift b/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsView.swift index 3034550..4ab5ca9 100644 --- a/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsView.swift +++ b/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsView.swift @@ -64,7 +64,7 @@ struct RouletteSettingsView: View { HStack(spacing: 0) { Text("룰렛을 활성화 하시겠습니까?") .font(.custom(Font.bold.rawValue, size: 16)) - .foregroundColor(Color(hex: "eeeeee")) + .foregroundColor(Color.grayee) Spacer() @@ -80,7 +80,7 @@ struct RouletteSettingsView: View { VStack(alignment: .leading, spacing: 13.3) { Text("룰렛 금액 설정") .font(.custom(Font.bold.rawValue, size: 16)) - .foregroundColor(Color(hex: "eeeeee")) + .foregroundColor(Color.grayee) HStack(spacing: 8) { TextField("룰렛 금액을 입력해 주세요 (최소 5캔)", text: Binding( @@ -94,19 +94,19 @@ struct RouletteSettingsView: View { .autocapitalization(.none) .disableAutocorrection(true) .font(.custom(Font.medium.rawValue, size: 13.3)) - .foregroundColor(Color(hex: "eeeeee")) + .foregroundColor(Color.grayee) .keyboardType(.numberPad) .padding(.horizontal, 13.3) .padding(.vertical, 16.7) .frame(maxWidth: .infinity) - .background(Color(hex: "222222")) + .background(Color.gray22) .cornerRadius(6.7) Spacer() Text("캔") .font(.custom(Font.bold.rawValue, size: 16.7)) - .foregroundColor(Color(hex: "eeeeee")) + .foregroundColor(Color.grayee) } } .padding(.top, 26.7) @@ -114,12 +114,12 @@ struct RouletteSettingsView: View { VStack(alignment: .leading, spacing: 21.3) { Text("룰렛 옵션 설정") .font(.custom(Font.bold.rawValue, size: 16)) - .foregroundColor(Color(hex: "eeeeee")) + .foregroundColor(Color.grayee) HStack(spacing: 0) { Text("※ 룰렛 옵션은 최소 2개,\n최대 10개까지 설정할 수 있습니다.") .font(.custom(Font.medium.rawValue, size: 13.3)) - .foregroundColor(Color(hex: "ff5c49")) + .foregroundColor(Color.mainRed) Spacer() @@ -129,12 +129,26 @@ struct RouletteSettingsView: View { } .padding(.top, 26.7) + HStack(spacing: 0) { + Text("옵션 확률 합계") + .font(.custom(Font.medium.rawValue, size: 14.7)) + .foregroundColor(Color.grayee) + + Spacer() + + Text("( \(String(format: "%.2f", viewModel.totalPercentage))% )") + .font(.custom(Font.medium.rawValue, size: 14.7)) + .foregroundColor(Color.grayee) + } + .padding(.top, 21.3) + LazyVStack(spacing: 21.3) { ForEach(viewModel.options.indices, id: \.self) { index in RouletteSettingsOptionView( option: viewModel.options[index], index: index, - onClickDelete: { viewModel.deleteOption(index: index) } + onClickDelete: { viewModel.deleteOption(index: index) }, + calculateTotalPercentage: { viewModel.calculateTotalPercentage() } ) } } @@ -149,13 +163,13 @@ struct RouletteSettingsView: View { HStack(spacing: 13.3) { Text("미리보기") .font(.custom(Font.bold.rawValue, size: 18.3)) - .foregroundColor(Color(hex: "3bb9f1")) + .foregroundColor(Color.button) .padding(.vertical, 16) .frame(maxWidth: .infinity) .overlay( RoundedRectangle(cornerRadius: 10) .strokeBorder(lineWidth: 1) - .foregroundColor(Color(hex: "3bb9f1")) + .foregroundColor(Color.button) ) .onTapGesture { viewModel.onClickPreview() @@ -166,7 +180,7 @@ struct RouletteSettingsView: View { .foregroundColor(.white) .padding(.vertical, 16) .frame(maxWidth: .infinity) - .background(Color(hex: "3bb9f1")) + .background(Color.button) .cornerRadius(10) .onTapGesture { viewModel.createOrUpdateRoulette { @@ -176,12 +190,12 @@ struct RouletteSettingsView: View { } } .padding(13.3) - .background(Color(hex: "222222")) + .background(Color.gray22) .cornerRadius(16.7, corners: [.topLeft, .topRight]) if proxy.safeAreaInsets.bottom > 0 { Rectangle() - .foregroundColor(Color(hex: "222222")) + .foregroundColor(Color.gray22) .frame(width: screenSize().width, height: 15.3) } } @@ -206,7 +220,7 @@ struct RouletteSettingsView: View { .padding(.vertical, 13.3) .frame(width: geo.size.width - 66.7, alignment: .center) .font(.custom(Font.medium.rawValue, size: 12)) - .background(Color(hex: "9970ff")) + .background(Color.button) .foregroundColor(Color.white) .multilineTextAlignment(.center) .cornerRadius(20) diff --git a/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsViewModel.swift b/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsViewModel.swift index 839b5b8..5701ba8 100644 --- a/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsViewModel.swift +++ b/SodaLive/Sources/Live/Room/Routlette/Config/RouletteSettingsViewModel.swift @@ -46,20 +46,19 @@ final class RouletteSettingsViewModel: ObservableObject { private var rouletteId = 0 @Published var rouletteList = [GetNewRouletteResponse]() + @Published var totalPercentage = Float(0) + func addOption() { if (options.count >= 10) { return } options.append(RouletteOption(title: "", percentage: "")) + calculateTotalPercentage() } func deleteOption(index: Int) { options.remove(at: index) - } - - private func removeAllAndAddOptions(options: [RouletteOption]) { - self.options.removeAll() - self.options.append(contentsOf: options) + calculateTotalPercentage() } func getAllRoulette(creatorId: Int) { @@ -311,7 +310,9 @@ final class RouletteSettingsViewModel: ObservableObject { let options = roulette.items.map { RouletteOption(title: $0.title, percentage: String($0.percentage)) } - removeAllAndAddOptions(options: options) + + self.options.removeAll() + self.options.append(contentsOf: options) } else { self.canText = "" self.isActive = false @@ -322,5 +323,21 @@ final class RouletteSettingsViewModel: ObservableObject { self.addOption() } } + + calculateTotalPercentage() + } + + func calculateTotalPercentage() { + let totalPercent = options.map { + let percentage = Float($0.percentage) + + if let percentage = percentage { + return percentage + } else { + return Float(0) + } + }.reduce(0, +) + + self.totalPercentage = totalPercent } }