klaus/sodalive-ios
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(chat-settings-view): 대화설정

Browse Source 
- 배경 이미지 숨김
- 대화 초기화 기능 추가
This commit is contained in:
Yu Sung
2025-09-04 10:20:22 +09:00
parent b06ffcc97c
commit f6af20bd7e
5 changed files with 426 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
SodaLive/Sources/Chat/Talk/Room/ChatRoomRepository.swift
View File

@@ -58,4 +58,8 @@ class ChatRoomRepository {
func purchaseChatQuota() -> AnyPublisher<Response, MoyaError> { func purchaseChatQuota() -> AnyPublisher<Response, MoyaError> {
return talkApi.requestPublisher(.purchaseChatQuota(request: ChatQuotaPurchaseRequest())) return talkApi.requestPublisher(.purchaseChatQuota(request: ChatQuotaPurchaseRequest()))
} }
func resetChatRoom(roomId: Int) -> AnyPublisher<Response, MoyaError> {
return talkApi.requestPublisher(.resetChatRoom(roomId: roomId, request: ChatRoomResetRequest()))
}
} }

406
SodaLive/Sources/Chat/Talk/Room/ChatRoomView.swift
View File

@@ -19,202 +19,208 @@ struct ChatRoomView: View {
var body: some View { var body: some View {
BaseView(isLoading: $viewModel.isLoading) { BaseView(isLoading: $viewModel.isLoading) {
ChatRoomBgView(url: viewModel.chatRoomBgImageUrl) if !viewModel.isHideBg {
ChatRoomBgView(url: viewModel.chatRoomBgImageUrl)
}
VStack(spacing: 0) { if !viewModel.isResetting {
HStack(spacing: 12) { VStack(spacing: 0) {
Image("ic_back") HStack(spacing: 12) {
.resizable() Image("ic_back")
.frame(width: 24, height: 24) .resizable()
.onTapGesture { .frame(width: 24, height: 24)
AppState.shared.back() .onTapGesture {
} AppState.shared.back()
}
KFImage(URL(string: viewModel.characterProfileUrl))
.placeholder {
Image(systemName: "person.crop.circle")
.resizable()
.scaledToFit()
}
.resizable()
.frame(width: 36, height: 36)
.clipShape(Circle())
VStack(alignment: .leading, spacing: 4) {
Text(viewModel.characterName)
.font(.custom(Font.preBold.rawValue, size: 12))
.foregroundColor(.white)
.lineLimit(1)
.truncationMode(.tail)
Text(viewModel.characterType.rawValue) KFImage(URL(string: viewModel.characterProfileUrl))
.font(.custom(Font.preBold.rawValue, size: 10)) .placeholder {
.foregroundColor(.white) Image(systemName: "person.crop.circle")
.padding(.horizontal, 4) .resizable()
.padding(.vertical, 2) .scaledToFit()
.background( }
Color(hex: .resizable()
viewModel.characterType == .Clone ? .frame(width: 36, height: 36)
"0020C9" : "009D68" .clipShape(Circle())
)
) VStack(alignment: .leading, spacing: 4) {
.cornerRadius(6) Text(viewModel.characterName)
.font(.custom(Font.preBold.rawValue, size: 12))
.foregroundColor(.white)
.lineLimit(1)
.truncationMode(.tail)
Text(viewModel.characterType.rawValue)
.font(.custom(Font.preBold.rawValue, size: 10))
.foregroundColor(.white)
.padding(.horizontal, 4)
.padding(.vertical, 2)
.background(
Color(hex:
viewModel.characterType == .Clone ?
"0020C9" : "009D68"
)
)
.cornerRadius(6)
}
Spacer()
HStack(spacing: 4) {
Image("ic_can")
.resizable()
.frame(width: 20, height: 20)
Text("\(can)")
.font(.custom(Font.preRegular.rawValue, size: 16))
.foregroundColor(.white)
}
.padding(.horizontal, 10)
.padding(.vertical, 5)
.background(Color(hex: "263238"))
.cornerRadius(30)
Image("ic_seemore_vertical_white")
.resizable()
.frame(width: 24, height: 24)
.onTapGesture {
viewModel.isShowingChatSettingsView = true
}
} }
.padding(.horizontal, 16)
.padding(.vertical, 8)
.frame(width: screenSize().width, height: 60)
Spacer() HStack(spacing: 8) {
Image(systemName: "info.circle.fill")
HStack(spacing: 4) {
Image("ic_can")
.resizable() .resizable()
.frame(width: 20, height: 20) .frame(width: 20, height: 20)
Text("\(can)") Text(
.font(.custom(Font.preRegular.rawValue, size: 16)) viewModel.characterType == .Character
.foregroundColor(.white) ? "보이스온 AI캐릭터톡은 대화의 자유도가 높아 대화에 참여하는 당신은 누구든 될 수 있습니다.\n세계관 속 캐릭터로 대화를 하거나 새로운 인물로 캐릭터와 당신만의 스토리를 만들어보세요.\n※ AI캐릭터톡은 오픈베타 서비스 중이며, 캐릭터의 대화가 어색하거나 불완전할 수 있습니다."
: "AI Clone은 크리에이터의 정보를 기반으로 대화하지만, 모든 정보를 완벽하게 반영하거나 실제 대화와 일치하지 않을 수 있습니다."
)
.font(.custom(Font.preRegular.rawValue, size: 12))
.foregroundColor(.white)
Image(systemName: "chevron.up")
.resizable()
.scaledToFit()
.frame(width: 20)
} }
.padding(.horizontal, 10) .padding(12)
.padding(.vertical, 5) .background(Color(hex: "13181B").opacity(0.7))
.background(Color(hex: "263238")) .cornerRadius(16)
.cornerRadius(30) .frame(width: screenSize().width - 48)
Image("ic_seemore_vertical_white") GeometryReader { geometry in
.resizable() ScrollViewReader { proxy in
.frame(width: 24, height: 24) ScrollView(.vertical, showsIndicators: false) {
.onTapGesture {} LazyVStack(spacing: 16) {
} ForEach(0..<viewModel.messages.count, id: \.self) { index in
.padding(.horizontal, 16) let message = viewModel.messages[index]
.padding(.vertical, 8) if message.mine {
.frame(width: screenSize().width, height: 60) UserMessageItemView(message: message)
.id(index)
HStack(spacing: 8) { } else {
Image(systemName: "info.circle.fill") AiMessageItemView(
.resizable() message: message,
.frame(width: 20, height: 20) characterName: viewModel.characterName
) {
Text( if message.hasAccess {
viewModel.characterType == .Character viewModel.showImageViewer(message.imageUrl)
? "보이스온 AI캐릭터톡은 대화의 자유도가 높아 대화에 참여하는 당신은 누구든 될 수 있습니다.\n세계관 속 캐릭터로 대화를 하거나 새로운 인물로 캐릭터와 당신만의 스토리를 만들어보세요.\n※ AI캐릭터톡은 오픈베타 서비스 중이며, 캐릭터의 대화가 어색하거나 불완전할 수 있습니다." } else {
: "AI Clone은 크리에이터의 정보를 기반으로 대화하지만, 모든 정보를 완벽하게 반영하거나 실제 대화와 일치하지 않을 수 있습니다." viewModel.selectedMessage = message
) viewModel.selectedMessageIndex = index
.font(.custom(Font.preRegular.rawValue, size: 12)) }
.foregroundColor(.white) }
Image(systemName: "chevron.up")
.resizable()
.scaledToFit()
.frame(width: 20)
}
.padding(12)
.background(Color(hex: "13181B").opacity(0.7))
.cornerRadius(16)
.frame(width: screenSize().width - 48)
GeometryReader { geometry in
ScrollViewReader { proxy in
ScrollView(.vertical, showsIndicators: false) {
LazyVStack(spacing: 16) {
ForEach(0..<viewModel.messages.count, id: \.self) { index in
let message = viewModel.messages[index]
if message.mine {
UserMessageItemView(message: message)
.id(index) .id(index)
} else { }
AiMessageItemView( }
message: message,
characterName: viewModel.characterName if viewModel.showQuotaNoticeView {
) { ChatQuotaNoticeItemView(remainingTime: viewModel.countdownText) {
if message.hasAccess { viewModel.purchaseChatQuota()
viewModel.showImageViewer(message.imageUrl) }
} else { .id(viewModel.messages.count)
viewModel.selectedMessage = message .padding(.bottom, 12)
viewModel.selectedMessageIndex = index .onAppear {
withAnimation(.easeOut(duration: 0.3)) {
proxy.scrollTo(viewModel.messages.count, anchor: .bottom)
} }
} }
.id(index) }
if viewModel.showSendingMessage {
TypingIndicatorItemView(
characterName: viewModel.characterName,
characterProfileUrl: viewModel.characterProfileUrl
)
.id(viewModel.messages.count)
} }
} }
.padding(.horizontal, 24)
if viewModel.showQuotaNoticeView { .frame(minHeight: geometry.size.height, alignment: .bottom)
ChatQuotaNoticeItemView(remainingTime: viewModel.countdownText) {
viewModel.purchaseChatQuota()
}
.id(viewModel.messages.count)
.padding(.bottom, 12)
.onAppear {
withAnimation(.easeOut(duration: 0.3)) {
proxy.scrollTo(viewModel.messages.count, anchor: .bottom)
}
}
}
if viewModel.showSendingMessage {
TypingIndicatorItemView(
characterName: viewModel.characterName,
characterProfileUrl: viewModel.characterProfileUrl
)
.id(viewModel.messages.count)
}
} }
.padding(.horizontal, 24) .onChange(of: viewModel.messages.count) { _ in
.frame(minHeight: geometry.size.height, alignment: .bottom) if !viewModel.messages.isEmpty {
} withAnimation(.easeOut(duration: 0.3)) {
.onChange(of: viewModel.messages.count) { _ in proxy.scrollTo(
if !viewModel.messages.isEmpty { viewModel.showSendingMessage ?
withAnimation(.easeOut(duration: 0.3)) { viewModel.messages.count :
proxy.scrollTo( viewModel.messages.count - 1,
viewModel.showSendingMessage ? anchor: .bottom
viewModel.messages.count : )
viewModel.messages.count - 1, }
anchor: .bottom
)
} }
} }
} }
} }
}
.frame(width: screenSize().width)
.frame(maxHeight: .infinity)
if !viewModel.showQuotaNoticeView {
HStack(spacing: 8) {
HStack(spacing: 0) {
ZStack(alignment: .leading) {
if viewModel.messageText.isEmpty {
Text("메시지를 입력하세요.")
.font(.custom(Font.preRegular.rawValue, size: 14))
.foregroundColor(Color(hex: "78909C"))
}
TextField("", text: $viewModel.messageText)
.font(.custom(Font.preRegular.rawValue, size: 14))
.foregroundColor(.white)
.onSubmit {
viewModel.sendMessage()
}
}
.frame(maxWidth: .infinity)
}
.padding(.horizontal, 16)
.padding(.vertical, 13)
.background(Color(hex: "263238"))
.cornerRadius(999)
.overlay(
RoundedRectangle(cornerRadius: 999)
.stroke(Color(hex: "263238"), lineWidth: 1)
)
Button(action: {
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
viewModel.sendMessage()
}) {
Image("ic_message_send")
.resizable()
.frame(width: 24, height: 24)
}
}
.padding(.horizontal, 12)
.padding(.vertical, 12)
.frame(width: screenSize().width) .frame(width: screenSize().width)
.frame(maxHeight: .infinity)
if !viewModel.showQuotaNoticeView {
HStack(spacing: 8) {
HStack(spacing: 0) {
ZStack(alignment: .leading) {
if viewModel.messageText.isEmpty {
Text("메시지를 입력하세요.")
.font(.custom(Font.preRegular.rawValue, size: 14))
.foregroundColor(Color(hex: "78909C"))
}
TextField("", text: $viewModel.messageText)
.font(.custom(Font.preRegular.rawValue, size: 14))
.foregroundColor(.white)
.onSubmit {
viewModel.sendMessage()
}
}
.frame(maxWidth: .infinity)
}
.padding(.horizontal, 16)
.padding(.vertical, 13)
.background(Color(hex: "263238"))
.cornerRadius(999)
.overlay(
RoundedRectangle(cornerRadius: 999)
.stroke(Color(hex: "263238"), lineWidth: 1)
)
Button(action: {
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
viewModel.sendMessage()
}) {
Image("ic_message_send")
.resizable()
.frame(width: 24, height: 24)
}
}
.padding(.horizontal, 12)
.padding(.vertical, 12)
.frame(width: screenSize().width)
}
} }
} }
@@ -232,6 +238,54 @@ struct ChatRoomView: View {
viewModel.selectedMessageIndex = -1 viewModel.selectedMessageIndex = -1
} }
} }
if viewModel.isShowingChatSettingsView {
ChatSettingsView(
isShowing: $viewModel.isShowingChatSettingsView,
isHideBg: $viewModel.isHideBg,
onTapChangeBg: { viewModel.isShowingChangeBgView = true },
onTapResetChatRoom: { viewModel.isShowingChatResetConfirmDialog = true }
)
}
if viewModel.isShowingChangeBgView {
ChatBgSelectionView()
}
if viewModel.isShowingChatResetConfirmDialog {
ZStack {
Color.black.opacity(0.7)
SodaDialog(
title: "대화 초기화",
desc: "지금까지의 대화가 모두 초기화 되고 새롭게 대화를 시작합니다.",
confirmButtonTitle: "30캔으로 초기화",
confirmButtonAction: {
viewModel.resetChatRoom()
viewModel.isShowingChatResetConfirmDialog = false
},
cancelButtonTitle: "취소",
cancelButtonAction: {
viewModel.isShowingChatResetConfirmDialog = false
}
)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
if viewModel.isResetting {
ZStack {
Color.black.opacity(0.7)
VStack(spacing: 0) {
ActivityIndicatorView()
.frame(width: 100, height: 100)
Text("대화 초기화 중...")
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
} }
.sheet(isPresented: $viewModel.isShowImageViewer) { .sheet(isPresented: $viewModel.isShowImageViewer) {
ImageViewerView( ImageViewerView(

82
SodaLive/Sources/Chat/Talk/Room/ChatRoomViewModel.swift
View File

@@ -11,6 +11,7 @@ import Moya
final class ChatRoomViewModel: ObservableObject { final class ChatRoomViewModel: ObservableObject {
// MARK: - Published State // MARK: - Published State
@Published var isResetting: Bool = false
@Published var isLoading: Bool = false @Published var isLoading: Bool = false
@Published var errorMessage: String = "" @Published var errorMessage: String = ""
@Published var isShowPopup = false @Published var isShowPopup = false
@@ -36,6 +37,15 @@ final class ChatRoomViewModel: ObservableObject {
@Published var isShowImageViewer = false @Published var isShowImageViewer = false
@Published var selectedImageIndex: Int = 0 @Published var selectedImageIndex: Int = 0
@Published var isHideBg = false {
didSet {
UserDefaults.standard.set(isHideBg, forKey: bgHideKey())
}
}
@Published var isShowingChatSettingsView = false
@Published var isShowingChangeBgView = false
@Published var isShowingChatResetConfirmDialog = false
var ownedImageUrls: [String] { var ownedImageUrls: [String] {
return messages return messages
.filter { $0.hasAccess } .filter { $0.hasAccess }
@@ -54,7 +64,6 @@ final class ChatRoomViewModel: ObservableObject {
private var timer: Timer? private var timer: Timer?
// MARK: - Actions // MARK: - Actions
@MainActor
func sendMessage() { func sendMessage() {
guard !messageText.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty else { guard !messageText.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty else {
return return
@@ -118,10 +127,10 @@ final class ChatRoomViewModel: ObservableObject {
.store(in: &subscription) .store(in: &subscription)
} }
@MainActor
func enterRoom(roomId: Int) { func enterRoom(roomId: Int) {
isLoading = true isLoading = true
self.roomId = roomId self.roomId = roomId
self.isHideBg = UserDefaults.standard.bool(forKey: bgHideKey())
repository.enterChatRoom( repository.enterChatRoom(
roomId: roomId, roomId: roomId,
@@ -291,6 +300,47 @@ final class ChatRoomViewModel: ObservableObject {
.store(in: &subscription) .store(in: &subscription)
} }
func resetChatRoom() {
isResetting = true
repository.resetChatRoom(roomId: roomId)
.sink { result in
switch result {
case .finished:
DEBUG_LOG("finish")
case .failure(let error):
ERROR_LOG(error.localizedDescription)
}
} receiveValue: { [weak self] response in
let responseData = response.data
self?.isResetting = false
do {
let jsonDecoder = JSONDecoder()
let decoded = try jsonDecoder.decode(ApiResponse<CreateChatRoomResponse>.self, from: responseData)
if let data = decoded.data, decoded.success {
self?.resetData()
self?.getMemberInfo()
self?.enterRoom(roomId: data.chatRoomId)
} else {
if let message = decoded.message {
self?.errorMessage = message
} else {
self?.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
}
self?.isShowPopup = true
}
} catch {
ERROR_LOG(String(describing: error))
self?.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
self?.isShowPopup = true
}
}
.store(in: &subscription)
}
func showImageViewer(_ imageUrl: String?) { func showImageViewer(_ imageUrl: String?) {
if let imageUrl = imageUrl { if let imageUrl = imageUrl {
selectedImageIndex = ownedImageUrls.firstIndex(of: imageUrl) ?? 0 selectedImageIndex = ownedImageUrls.firstIndex(of: imageUrl) ?? 0
@@ -298,6 +348,30 @@ final class ChatRoomViewModel: ObservableObject {
} }
} }
private func resetData() {
characterProfileUrl = ""
characterName = "Character Name"
characterType = .Character
chatRoomBgImageUrl = nil
roomId = 0
countdownText = "00:00:00"
showQuotaNoticeView = false
showSendingMessage = false
messageText = ""
messages = []
selectedMessage = nil
selectedMessageIndex = -1
isShowImageViewer = false
selectedImageIndex = 0
isShowingChatSettingsView = false
isShowingChangeBgView = false
isShowingChatResetConfirmDialog = false
}
private func checkQuotaStatus() { private func checkQuotaStatus() {
isLoading = true isLoading = true
@@ -420,4 +494,8 @@ final class ChatRoomViewModel: ObservableObject {
private func bgImageIdKey() -> String { private func bgImageIdKey() -> String {
return "chat_bg_image_id_room_\(roomId)" return "chat_bg_image_id_room_\(roomId)"
} }
private func bgHideKey() -> String {
return "chat_bg_hide_room_\(roomId)"
}
} }

104
SodaLive/Sources/Chat/Talk/Room/Settings/ChatSettingsView.swift
View File

@@ -8,11 +8,111 @@
import SwiftUI import SwiftUI
struct ChatSettingsView: View { struct ChatSettingsView: View {
@Binding var isShowing: Bool
@Binding var isHideBg: Bool
let onTapChangeBg: () -> Void
let onTapResetChatRoom: () -> Void
var body: some View { var body: some View {
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/) VStack(spacing: 0) {
DetailNavigationBar(title: "대화 설정") {
isShowing = false
}
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 0) {
VStack(spacing: 0) {
Toggle(isOn: $isHideBg) {
Text("배경 이미지 숨김")
.font(.custom(Font.preBold.rawValue, size: 18))
.foregroundColor(Color(hex: "B0BEC5"))
}
.toggleStyle(.switch)
.tint(Color.button)
.padding(.horizontal, 24)
.padding(.vertical, 12)
Rectangle()
.foregroundColor(Color.white.opacity(0.14))
.frame(maxWidth: .infinity)
.frame(height: 1)
}
VStack(spacing: 0) {
HStack {
Text("배경 이미지 변경")
.font(.custom(Font.preBold.rawValue, size: 18))
.foregroundColor(Color(hex: "B0BEC5"))
.padding(.horizontal, 24)
.padding(.vertical, 12)
Spacer()
}
Rectangle()
.foregroundColor(Color.white.opacity(0.14))
.frame(maxWidth: .infinity)
.frame(height: 1)
}
.onTapGesture { onTapChangeBg() }
HStack(spacing: 0) {
VStack(alignment: .leading, spacing: 6) {
Text("대화 초기화")
.font(.custom(Font.preBold.rawValue, size: 18))
.foregroundColor(Color(hex: "B0BEC5"))
HStack(alignment: .top, spacing: 0) {
Text("⚠️ ")
.font(.custom(Font.preRegular.rawValue, size: 16))
.foregroundColor(.white.opacity(0.7))
Text("지금까지의 대화가 모두 초기화 되고, 이용자가 새로운 캐릭터가 되어 새롭게 대화를 시작합니다.")
.font(.custom(Font.preRegular.rawValue, size: 16))
.foregroundColor(.white.opacity(0.7))
.fixedSize(horizontal: false, vertical: true)
}
}
Spacer()
HStack(spacing: 4) {
Image("ic_can")
.resizable()
.frame(width: 24, height: 24)
Text("30")
.font(.custom(Font.preBold.rawValue, size: 16))
.foregroundColor(Color(hex: "263238"))
}
.padding(.vertical, 3)
.padding(.horizontal, 10)
.background(Color(hex: "B5E7FA"))
.cornerRadius(30)
.overlay {
RoundedRectangle(cornerRadius: 30)
.stroke(lineWidth: 1)
.foregroundColor(.button)
}
}
.padding(.horizontal, 24)
.padding(.vertical, 12)
.onTapGesture { onTapResetChatRoom() }
}
}
}
.background(Color.black)
} }
} }
#Preview { #Preview {
ChatSettingsView() ChatSettingsView(
isShowing: .constant(true),
isHideBg: .constant(false),
onTapChangeBg: {},
onTapResetChatRoom: {}
)
} }

10
SodaLive/Sources/Chat/Talk/TalkApi.swift
View File

@@ -19,6 +19,7 @@ enum TalkApi {
case purchaseChatQuota(request: ChatQuotaPurchaseRequest) case purchaseChatQuota(request: ChatQuotaPurchaseRequest)
case purchaseMessage(roomId: Int, messageId: Int64, request: ChatMessagePurchaseRequest) case purchaseMessage(roomId: Int, messageId: Int64, request: ChatMessagePurchaseRequest)
case resetChatRoom(roomId: Int, request: ChatRoomResetRequest)
} }
extension TalkApi: TargetType { extension TalkApi: TargetType {
@@ -49,6 +50,9 @@ extension TalkApi: TargetType {
case .purchaseMessage(let roomId, let messageId, _): case .purchaseMessage(let roomId, let messageId, _):
return "/api/chat/room/\(roomId)/messages/\(messageId)/purchase" return "/api/chat/room/\(roomId)/messages/\(messageId)/purchase"
case .resetChatRoom(let roomId, _):
return "/api/chat/room/\(roomId)/reset"
} }
} }
@@ -77,6 +81,9 @@ extension TalkApi: TargetType {
case .purchaseMessage: case .purchaseMessage:
return .post return .post
case .resetChatRoom:
return .post
} }
} }
@@ -123,6 +130,9 @@ extension TalkApi: TargetType {
case .purchaseMessage(_, _, let request): case .purchaseMessage(_, _, let request):
return .requestJSONEncodable(request) return .requestJSONEncodable(request)
case .resetChatRoom(_, let request):
return .requestJSONEncodable(request)
} }
} }