feat(creator-channel): 닉네임, 팔로워 표시 UI 수정

This commit is contained in:
Yu Sung
2025-10-17 09:53:04 +09:00
parent 39f744f925
commit efd4da6a9d

View File

@@ -27,290 +27,333 @@ struct UserProfileView: View {
GeometryReader { proxy in GeometryReader { proxy in
BaseView(isLoading: $viewModel.isLoading) { BaseView(isLoading: $viewModel.isLoading) {
ZStack(alignment: .top) { ZStack(alignment: .top) {
VStack(spacing: 0) { ScrollView(.vertical, showsIndicators: false) {
ScrollView(.vertical, showsIndicators: false) { LazyVStack(spacing: 48) {
LazyVStack(spacing: 48) { if let creatorProfile = viewModel.creatorProfile {
if let creatorProfile = viewModel.creatorProfile { ZStack(alignment: .bottomLeading) {
ZStack(alignment: .bottomLeading) { KFImage(URL(string: creatorProfile.creator.profileUrl))
KFImage(URL(string: creatorProfile.creator.profileUrl)) .cancelOnDisappear(true)
.cancelOnDisappear(true) .downsampling(size: CGSize(width: screenSize().width, height: screenSize().width))
.downsampling(size: CGSize(width: screenSize().width, height: screenSize().width)) .resizable()
.resizable() .aspectRatio(1, contentMode: .fill)
.aspectRatio(1, contentMode: .fill) .frame(maxWidth: screenSize().width)
.frame(maxWidth: screenSize().width) .clipped()
.clipped()
}
if let item = creatorProfile.latestContent { VStack(alignment: .leading, spacing: 8) {
HStack(spacing: 16) { HStack(spacing: 8) {
KFImage(URL(string: item.coverImageUrl)) Text(creatorProfile.creator.nickname)
.cancelOnDisappear(true) .font(.custom(Font.preBold.rawValue, size: 32))
.downsampling(size: CGSize(width: 133, height: 133)) .foregroundColor(.white)
.resizable()
.scaledToFill()
.frame(width: 133, height: 133, alignment: .top)
.clipped()
.cornerRadius(12)
VStack(alignment: .leading, spacing: 8) { if creatorProfile.creator.creatorId != UserDefaults.int(forKey: .userId) {
Text("최신 콘텐츠") Image(
.font(.custom(Font.preMedium.rawValue, size: 12)) creatorProfile.creator.isFollow ?
.foregroundColor(.button) creatorProfile.creator.isNotify ? "btn_following_big": "btn_following_no_alarm_big"
.padding(.horizontal, 7) : "btn_follow_big"
.padding(.vertical, 4)
.background(Color(hex: "263238"))
.cornerRadius(4)
.overlay {
RoundedRectangle(cornerRadius: 4)
.strokeBorder(lineWidth: 1)
.foregroundColor(.button)
}
HStack(spacing: 8) {
if item.isScheduledToOpen {
Text("오픈예정")
.font(.custom(Font.preMedium.rawValue, size: 12))
.foregroundColor(Color(hex: "3bb9f1"))
.padding(2.6)
.background(Color(hex: "003851"))
.cornerRadius(2.6)
}
Text(item.themeStr)
.font(.custom(Font.preMedium.rawValue, size: 12))
.foregroundColor(Color(hex: "3bac6a"))
.padding(2.6)
.background(Color(hex: "28312b"))
.cornerRadius(2.6)
Text(item.duration!)
.font(.custom(Font.preMedium.rawValue, size: 12))
.foregroundColor(Color(hex: "777777"))
.padding(2.6)
.background(Color(hex: "222222"))
.cornerRadius(2.6)
if item.isPointAvailable {
Text("포인트")
.font(.custom(Font.preMedium.rawValue, size: 12))
.foregroundColor(.white)
.padding(2.6)
.background(Color(hex: "7849bc"))
.cornerRadius(2.6)
}
}
Text(item.title)
.font(.custom(Font.preMedium.rawValue, size: 18))
.foregroundColor(Color.white)
.multilineTextAlignment(.leading)
HStack(spacing: 14) {
HStack(spacing: 6) {
Image("ic_heart_777")
.resizable()
.frame(width: 24, height: 24)
Text("\(item.likeCount)")
.font(.custom(Font.preMedium.rawValue, size: 18))
.foregroundColor(Color(hex: "777777"))
}
HStack(spacing: 6) {
Image("ic_message_square_777")
.resizable()
.frame(width: 24, height: 24)
Text("\(item.commentCount)")
.font(.custom(Font.preMedium.rawValue, size: 18))
.foregroundColor(Color(hex: "777777"))
}
}
}
Spacer()
}
.frame(maxWidth: .infinity)
.frame(alignment: .leading)
.padding(.horizontal, 24)
.onTapGesture {
AppState.shared
.setAppStep(step: .contentDetail(contentId: item.contentId))
}
}
if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) || creatorProfile.liveRoomList.count > 0 {
VStack(alignment: .leading, spacing: 14) {
HStack(spacing: 0) {
Text("라이브")
.font(.custom(Font.preBold.rawValue, size: 26))
.foregroundColor(Color.white)
Spacer()
}
if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) {
HStack(spacing: 8) {
Text("룰렛 설정")
.font(.custom(Font.preBold.rawValue, size: 16))
.foregroundColor(Color.grayee)
.padding(.vertical, 12)
.frame(maxWidth: .infinity)
.background(Color.button)
.cornerRadius(12)
.onTapGesture { isShowRouletteSettings = true }
Text("메뉴 설정")
.font(.custom(Font.preBold.rawValue, size: 16))
.foregroundColor(Color.grayee)
.padding(.vertical, 12)
.frame(maxWidth: .infinity)
.background(Color.button)
.cornerRadius(12)
.onTapGesture { isShowMenuSettings = true }
}
}
if creatorProfile.liveRoomList.count > 0 {
UserProfileLiveView(
userId: userId,
liveRoomList: creatorProfile.liveRoomList,
onClickParticipant: { liveRoom in
if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) {
viewModel.errorMessage = "현재 라이브 중입니다."
viewModel.isShowPopup = true
} else {
AppState.shared.isShowPlayer = false
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
viewModel.enterLiveRoom(roomId: liveRoom.roomId)
}
}
},
onClickReservation: { liveRoom in
if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) {
viewModel.errorMessage = "내가 만든 라이브는 예약할 수 없습니다."
viewModel.isShowPopup = true
} else {
viewModel.reservationLiveRoom(roomId: liveRoom.roomId)
}
}
) )
.resizable()
.frame(width: 83.3, height: 26.7)
.onTapGesture {
if creatorProfile.creator.isFollow {
isShowFollowNotifyDialog = true
} else {
viewModel.creatorFollow()
}
}
} }
} }
.padding(.horizontal, 24)
}
if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) || creatorProfile.contentList.count > 0 { if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) {
UserProfileContentView( Text("팔로워 리스트")
userId: userId, .font(.custom(Font.preBold.rawValue, size: 16))
items: creatorProfile.contentList, .foregroundColor(Color.black)
totalContentCount: creatorProfile.totalContentCount, .padding(.vertical, 8)
ownedContentCount: creatorProfile.ownedContentCount .frame(maxWidth: .infinity)
) .background(Color.white)
.padding(.horizontal, 24) .cornerRadius(999)
.onTapGesture {
AppState.shared.setAppStep(step: .followerList(userId: creatorProfile.creator.creatorId))
}
} else {
VStack(alignment: .leading, spacing: 9.3) {
Text("팔로워 \(creatorProfile.creator.notificationRecipientCount)")
.font(.custom(Font.preMedium.rawValue, size: 16))
.foregroundColor(Color.white)
}
}
} }
.padding(24)
}
if let item = creatorProfile.latestContent {
HStack(spacing: 16) {
KFImage(URL(string: item.coverImageUrl))
.cancelOnDisappear(true)
.downsampling(size: CGSize(width: 133, height: 133))
.resizable()
.scaledToFill()
.frame(width: 133, height: 133, alignment: .top)
.clipped()
.cornerRadius(12)
VStack(alignment: .leading, spacing: 8) {
Text("최신 콘텐츠")
.font(.custom(Font.preMedium.rawValue, size: 12))
.foregroundColor(.button)
.padding(.horizontal, 7)
.padding(.vertical, 4)
.background(Color(hex: "263238"))
.cornerRadius(4)
.overlay {
RoundedRectangle(cornerRadius: 4)
.strokeBorder(lineWidth: 1)
.foregroundColor(.button)
}
HStack(spacing: 8) {
if item.isScheduledToOpen {
Text("오픈예정")
.font(.custom(Font.preMedium.rawValue, size: 12))
.foregroundColor(Color(hex: "3bb9f1"))
.padding(2.6)
.background(Color(hex: "003851"))
.cornerRadius(2.6)
}
Text(item.themeStr)
.font(.custom(Font.preMedium.rawValue, size: 12))
.foregroundColor(Color(hex: "3bac6a"))
.padding(2.6)
.background(Color(hex: "28312b"))
.cornerRadius(2.6)
Text(item.duration!)
.font(.custom(Font.preMedium.rawValue, size: 12))
.foregroundColor(Color(hex: "777777"))
.padding(2.6)
.background(Color(hex: "222222"))
.cornerRadius(2.6)
if item.isPointAvailable {
Text("포인트")
.font(.custom(Font.preMedium.rawValue, size: 12))
.foregroundColor(.white)
.padding(2.6)
.background(Color(hex: "7849bc"))
.cornerRadius(2.6)
}
}
Text(item.title)
.font(.custom(Font.preMedium.rawValue, size: 18))
.foregroundColor(Color.white)
.multilineTextAlignment(.leading)
HStack(spacing: 14) {
HStack(spacing: 6) {
Image("ic_heart_777")
.resizable()
.frame(width: 24, height: 24)
Text("\(item.likeCount)")
.font(.custom(Font.preMedium.rawValue, size: 18))
.foregroundColor(Color(hex: "777777"))
}
HStack(spacing: 6) {
Image("ic_message_square_777")
.resizable()
.frame(width: 24, height: 24)
Text("\(item.commentCount)")
.font(.custom(Font.preMedium.rawValue, size: 18))
.foregroundColor(Color(hex: "777777"))
}
}
}
Spacer()
}
.frame(maxWidth: .infinity)
.frame(alignment: .leading)
.padding(.horizontal, 24)
.onTapGesture {
AppState.shared
.setAppStep(step: .contentDetail(contentId: item.contentId))
}
}
if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) || creatorProfile.liveRoomList.count > 0 {
VStack(alignment: .leading, spacing: 14) { VStack(alignment: .leading, spacing: 14) {
HStack(spacing: 0) { HStack(spacing: 0) {
Text("커뮤니티") Text("라이브")
.font(.custom(Font.preBold.rawValue, size: 26)) .font(.custom(Font.preBold.rawValue, size: 26))
.foregroundColor(Color.white) .foregroundColor(Color.white)
.padding(.horizontal, 24)
Spacer() Spacer()
} }
if viewModel.communityPostList.count > 0 {
ScrollView(.horizontal, showsIndicators: false) {
LazyHStack(spacing: 14) {
if UserDefaults.int(forKey: .userId) == creatorProfile.creator.creatorId {
CreatorCommunityWriteItemView()
.onTapGesture {
AppState.shared.setAppStep(
step: .creatorCommunityWrite(
onSuccess: creatorCommunityWriteSuccess
)
)
}
}
ForEach(0..<viewModel.communityPostList.count, id: \.self) { index in if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) {
let item = viewModel.communityPostList[index] HStack(spacing: 8) {
CreatorCommunityItemView(item: item) Text("룰렛 설정")
.frame(width: 320) .font(.custom(Font.preBold.rawValue, size: 16))
.onTapGesture { .foregroundColor(Color.grayee)
AppState.shared .padding(.vertical, 12)
.setAppStep( .frame(maxWidth: .infinity)
step: .creatorCommunityAll(creatorId: userId) .background(Color.button)
) .cornerRadius(12)
} .onTapGesture { isShowRouletteSettings = true }
.background(
GeometryReader { geo in
Color.clear
.preference(key: HeightPreferenceKey.self, value: geo.size.height)
}
)
}
CreatorCommunityMoreItemView { Text("메뉴 설정")
AppState.shared .font(.custom(Font.preBold.rawValue, size: 16))
.setAppStep( .foregroundColor(Color.grayee)
step: .creatorCommunityAll(creatorId: userId) .padding(.vertical, 12)
) .frame(maxWidth: .infinity)
} .background(Color.button)
} .cornerRadius(12)
.padding(.horizontal, 24) .onTapGesture { isShowMenuSettings = true }
.frame(height: maxCommunityPostHeight)
.onPreferenceChange(HeightPreferenceKey.self) { value in
if let current = maxCommunityPostHeight {
maxCommunityPostHeight = max(current, value)
} else {
maxCommunityPostHeight = value
}
}
}
} else {
if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) {
CreatorCommunityNoPostsItemView(
onSuccess: creatorCommunityWriteSuccess
)
.padding(.horizontal, 24)
} }
} }
}
if !creatorProfile.seriesList.isEmpty { if creatorProfile.liveRoomList.count > 0 {
UserProfileSeriesView( UserProfileLiveView(
creatorId: creatorProfile.creator.creatorId, userId: userId,
items: creatorProfile.seriesList liveRoomList: creatorProfile.liveRoomList,
) onClickParticipant: { liveRoom in
if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) {
viewModel.errorMessage = "현재 라이브 중입니다."
viewModel.isShowPopup = true
} else {
AppState.shared.isShowPlayer = false
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
viewModel.enterLiveRoom(roomId: liveRoom.roomId)
}
}
},
onClickReservation: { liveRoom in
if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) {
viewModel.errorMessage = "내가 만든 라이브는 예약할 수 없습니다."
viewModel.isShowPopup = true
} else {
viewModel.reservationLiveRoom(roomId: liveRoom.roomId)
}
}
)
}
} }
.padding(.horizontal, 24)
}
if creatorProfile.userDonationRanking.count > 0 { if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) || creatorProfile.contentList.count > 0 {
UserProfileDonationView(userId: userId, donationRankingResponse: creatorProfile.userDonationRanking) UserProfileContentView(
}
UserProfileFanTalkView(
userId: userId, userId: userId,
cheers: creatorProfile.cheers, items: creatorProfile.contentList,
errorPopup: { message in totalContentCount: creatorProfile.totalContentCount,
viewModel.errorMessage = message ownedContentCount: creatorProfile.ownedContentCount
viewModel.isShowPopup = true )
}, .padding(.horizontal, 24)
reportPopup: { cheerId in }
viewModel.cheersId = cheerId
viewModel.isShowCheersReportView = true VStack(alignment: .leading, spacing: 14) {
}, HStack(spacing: 0) {
deletePopup: { cheerId in Text("커뮤니티")
viewModel.cheersId = cheerId .font(.custom(Font.preBold.rawValue, size: 26))
viewModel.isShowCheersDeleteView = true .foregroundColor(Color.white)
}, .padding(.horizontal, 24)
profilePopup: {
self.memberId = $0 Spacer()
self.isShowMemberProfilePopup = true }
}, if viewModel.communityPostList.count > 0 {
isLoading: $viewModel.isLoading ScrollView(.horizontal, showsIndicators: false) {
LazyHStack(spacing: 14) {
if UserDefaults.int(forKey: .userId) == creatorProfile.creator.creatorId {
CreatorCommunityWriteItemView()
.onTapGesture {
AppState.shared.setAppStep(
step: .creatorCommunityWrite(
onSuccess: creatorCommunityWriteSuccess
)
)
}
}
ForEach(0..<viewModel.communityPostList.count, id: \.self) { index in
let item = viewModel.communityPostList[index]
CreatorCommunityItemView(item: item)
.frame(width: 320)
.onTapGesture {
AppState.shared
.setAppStep(
step: .creatorCommunityAll(creatorId: userId)
)
}
.background(
GeometryReader { geo in
Color.clear
.preference(key: HeightPreferenceKey.self, value: geo.size.height)
}
)
}
CreatorCommunityMoreItemView {
AppState.shared
.setAppStep(
step: .creatorCommunityAll(creatorId: userId)
)
}
}
.padding(.horizontal, 24)
.frame(height: maxCommunityPostHeight)
.onPreferenceChange(HeightPreferenceKey.self) { value in
if let current = maxCommunityPostHeight {
maxCommunityPostHeight = max(current, value)
} else {
maxCommunityPostHeight = value
}
}
}
} else {
if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) {
CreatorCommunityNoPostsItemView(
onSuccess: creatorCommunityWriteSuccess
)
.padding(.horizontal, 24)
}
}
}
if !creatorProfile.seriesList.isEmpty {
UserProfileSeriesView(
creatorId: creatorProfile.creator.creatorId,
items: creatorProfile.seriesList
) )
} }
if creatorProfile.userDonationRanking.count > 0 {
UserProfileDonationView(userId: userId, donationRankingResponse: creatorProfile.userDonationRanking)
}
UserProfileFanTalkView(
userId: userId,
cheers: creatorProfile.cheers,
errorPopup: { message in
viewModel.errorMessage = message
viewModel.isShowPopup = true
},
reportPopup: { cheerId in
viewModel.cheersId = cheerId
viewModel.isShowCheersReportView = true
},
deletePopup: { cheerId in
viewModel.cheersId = cheerId
viewModel.isShowCheersDeleteView = true
},
profilePopup: {
self.memberId = $0
self.isShowMemberProfilePopup = true
},
isLoading: $viewModel.isLoading
)
} }
} }
} }