diff --git a/SodaLive/Sources/Chat/Character/Detail/CharacterDetailResponse.swift b/SodaLive/Sources/Chat/Character/Detail/CharacterDetailResponse.swift index 1aa935a..41345ef 100644 --- a/SodaLive/Sources/Chat/Character/Detail/CharacterDetailResponse.swift +++ b/SodaLive/Sources/Chat/Character/Detail/CharacterDetailResponse.swift @@ -10,6 +10,8 @@ struct CharacterDetailResponse: Decodable { let name: String let description: String let mbti: String? + let gender: String? + let age: Int? let imageUrl: String let personalities: CharacterPersonalityResponse? let backgrounds: CharacterBackgroundResponse? diff --git a/SodaLive/Sources/Chat/Character/Detail/CharacterDetailView.swift b/SodaLive/Sources/Chat/Character/Detail/CharacterDetailView.swift index 4af6a6b..a9301ef 100644 --- a/SodaLive/Sources/Chat/Character/Detail/CharacterDetailView.swift +++ b/SodaLive/Sources/Chat/Character/Detail/CharacterDetailView.swift @@ -167,19 +167,85 @@ extension CharacterDetailView { // MARK: - Character Image Section extension CharacterDetailView { private var characterImageSection: some View { - // 배경 이미지 - KFImage(URL(string: viewModel.characterDetail?.imageUrl ?? "https://picsum.photos/400")) - .resizable() - .scaledToFill() - .frame(width: screenSize().width, height: screenSize().width, alignment: .top) - .clipped() + ZStack { + if let imageUrl = viewModel.characterDetail?.imageUrl{ + // 배경 이미지 + KFImage(URL(string: imageUrl)) + .resizable() + .scaledToFill() + .frame(width: screenSize().width, height: screenSize().width, alignment: .top) + .clipped() + } + } } } // MARK: - Profile Section extension CharacterDetailView { private var profileSection: some View { - VStack(alignment: .leading, spacing: 8) { + VStack(alignment: .leading, spacing: 16) { + if viewModel.characterDetail?.mbti != nil || + viewModel.characterDetail?.gender != nil || + viewModel.characterDetail?.age != nil + { + HStack(spacing: 4) { + if let gender = viewModel.characterDetail?.gender { + Text(gender) + .font(.custom(Font.preRegular.rawValue, size: 14)) + .foregroundColor( + gender == "남성" ? + Color.button : + Color.mainRed + ) + .padding(.horizontal, 7) + .padding(.vertical, 3) + .background(Color(hex: "263238")) + .cornerRadius(4) + .overlay { + RoundedRectangle(cornerRadius: 4) + .stroke(lineWidth: 1) + .foregroundColor( + gender == "남성" ? + Color.button : + Color.mainRed + ) + } + } + + if let age = viewModel.characterDetail?.age { + Text("\(age)세") + .font(.custom(Font.preRegular.rawValue, size: 14)) + .foregroundColor(Color(hex: "B0BEC5")) + .padding(.horizontal, 7) + .padding(.vertical, 3) + .background(Color(hex: "263238")) + .cornerRadius(4) + .overlay { + RoundedRectangle(cornerRadius: 4) + .stroke(lineWidth: 1) + .foregroundColor(.white.opacity(0.5)) + } + + } + + if let mbti = viewModel.characterDetail?.mbti { + Text(mbti) + .font(.custom(Font.preRegular.rawValue, size: 14)) + .foregroundColor(Color(hex: "B0BEC5")) + .padding(.horizontal, 7) + .padding(.vertical, 3) + .background(Color(hex: "263238")) + .cornerRadius(4) + .overlay { + RoundedRectangle(cornerRadius: 4) + .stroke(lineWidth: 1) + .foregroundColor(.white.opacity(0.5)) + } + + } + } + } + // 이름과 상태 HStack(spacing: 8) { Text(viewModel.characterDetail?.name ?? "")