라이브 방

- 스피커 수가 증가함에 따라 UI가 화면에서 넘치던 버그 수정
2024-09-24 21:54:47 +09:00 · 2024-09-24 21:54:47 +09:00 · e34a172779
parent 9c051ff1e0
commit e34a172779
4 changed files with 64 additions and 84 deletions
--- a/SodaLive/Sources/Live/Room/V2/Component/View/LiveRoomInfoCreatorView.swift
+++ b/SodaLive/Sources/Live/Room/V2/Component/View/LiveRoomInfoCreatorView.swift
@ -67,6 +67,7 @@ struct LiveRoomInfoCreatorView: View {
                    Text(creatorNickname)
                        .font(.custom(Font.medium.rawValue, size: 12))
                        .foregroundColor(.gray77)
+                        .lineLimit(1)
                    
                    if isShowFollowingButton {
                        Image(isFollowing ? "btn_following" : "btn_follow")
@ -75,8 +76,8 @@ struct LiveRoomInfoCreatorView: View {
                }
            }
        }
-        .padding(.vertical, 8)
-        .padding(.horizontal, 5.3)
+        .padding(8)
+        .frame(width: screenSize().width / 2.5, alignment: .leading)
        .overlay(
            RoundedRectangle(cornerRadius: 5.3)
                .stroke(Color.graybb, lineWidth: 1)
@ -87,7 +88,7 @@ struct LiveRoomInfoCreatorView: View {
 struct LiveRoomInfoCreatorView_Previews: PreviewProvider {
    static var previews: some View {
        LiveRoomInfoCreatorView(
-            roomTitle: "오늘 라이브방송은 OOO 입니다.",
+            roomTitle: "qwer",
            creatorNickname: "도화",
            creatorProfileUrl: "https://cf.sodalive.net/profile/26/26-profile-ddf78b4d-0300-4c50-9c84-5d8a95fd5fe2-4892-1705256364320",
            isMute: false,
--- a/SodaLive/Sources/Live/Room/V2/Component/View/LiveRoomInfoGuestView.swift
+++ b/SodaLive/Sources/Live/Room/V2/Component/View/LiveRoomInfoGuestView.swift
@ -108,23 +108,28 @@ struct LiveRoomInfoGuestView: View {
                        onClickFollow: { onClickFollow(isFollowing) },
                        onClickProfile: { onClickProfile(creatorId) }
                    )
-                    .frame(width: 180, alignment: .leading)
                    
                    Spacer()
                    
-                    ForEach(0..<speakerList.count, id: \.self) { index in
-                        let speaker = speakerList[index]
-                        
-                        if speaker.id != UInt(creatorId) {
-                            LiveRoomInfoSpeakerView(
-                                nickname: speaker.nickname,
-                                profileUrl: speaker.profileImage,
-                                isMute: muteSpeakerList.contains(UInt(speaker.id)),
-                                isActiveSpeaker: activeSpeakerList.contains(UInt(speaker.id)),
-                                onClickProfile: { onClickProfile(speaker.id) }
-                            )
+                    ScrollView(.horizontal, showsIndicators: false) {
+                        HStack(spacing: 8) {
+                            ForEach(0..<speakerList.count, id: \.self) { index in
+                                let speaker = speakerList[index]
+                                
+                                if speaker.id != UInt(creatorId) {
+                                    LiveRoomInfoSpeakerView(
+                                        nickname: speaker.nickname,
+                                        profileUrl: speaker.profileImage,
+                                        isMute: muteSpeakerList.contains(UInt(speaker.id)),
+                                        isActiveSpeaker: activeSpeakerList.contains(UInt(speaker.id)),
+                                        onClickProfile: { onClickProfile(speaker.id) }
+                                    )
+                                }
+                            }
                        }
+                        .rotationEffect(Angle(degrees: 180))
                    }
+                    .rotationEffect(Angle(degrees: 180))
                }
                
                HStack(spacing: 5.3) {
@ -184,13 +189,19 @@ struct LiveRoomInfoGuestView: View {
        .padding(.horizontal, 13.3)
        .padding(.top, 16)
        .background(Color.gray22)
+        .onAppear {
+            UIScrollView.appearance().bounces = false
+        }
+        .onDisappear {
+            UIScrollView.appearance().bounces = true
+        }
    }
 }

 struct LiveRoomInfoGuestView_Previews: PreviewProvider {
    static var previews: some View {
        LiveRoomInfoGuestView(
-            title: "오늘의 라이브방송은 OOO입니다.",
+            title: "qwer",
            totalDonationCan: 123456,
            isOnBg: true,
            isOnNotice: false,
@ -218,25 +229,7 @@ struct LiveRoomInfoGuestView_Previews: PreviewProvider {
                    nickname: "LUNA",
                    profileImage: "https://cf.sodalive.net/profile/4679/4679-profile-41e83399-234e-4541-8591-f961a025cfaa-5819-1699536915310",
                    role: .SPEAKER
-                ),
-                LiveRoomMember(
-                    id: 4,
-                    nickname: "도화",
-                    profileImage: "https://cf.sodalive.net/profile/26/26-profile-ddf78b4d-0300-4c50-9c84-5d8a95fd5fe2-4892-1705256364320",
-                    role: .SPEAKER
-                ),
-                LiveRoomMember(
-                    id: 5,
-                    nickname: "도화",
-                    profileImage: "https://cf.sodalive.net/profile/26/26-profile-ddf78b4d-0300-4c50-9c84-5d8a95fd5fe2-4892-1705256364320",
-                    role: .SPEAKER
-                ),
-                LiveRoomMember(
-                    id: 6,
-                    nickname: "도화",
-                    profileImage: "https://cf.sodalive.net/profile/26/26-profile-ddf78b4d-0300-4c50-9c84-5d8a95fd5fe2-4892-1705256364320",
-                    role: .SPEAKER
-                ),
+                )
            ],
            muteSpeakerList: [],
            activeSpeakerList: [],
--- a/SodaLive/Sources/Live/Room/V2/Component/View/LiveRoomInfoHostView.swift
+++ b/SodaLive/Sources/Live/Room/V2/Component/View/LiveRoomInfoHostView.swift
@ -106,23 +106,28 @@ struct LiveRoomInfoHostView: View {
                        onClickFollow: {},
                        onClickProfile: {}
                    )
-                    .frame(width: 180, alignment: .leading)
                    
                    Spacer()
                    
-                    ForEach(0..<speakerList.count, id: \.self) { index in
-                        let speaker = speakerList[index]
-                        
-                        if speaker.id != UInt(creatorId) {
-                            LiveRoomInfoSpeakerView(
-                                nickname: speaker.nickname,
-                                profileUrl: speaker.profileImage,
-                                isMute: muteSpeakerList.contains(UInt(speaker.id)),
-                                isActiveSpeaker: activeSpeakerList.contains(UInt(speaker.id)),
-                                onClickProfile: { onClickProfile(speaker.id) }
-                            )
+                    ScrollView(.horizontal, showsIndicators: false) {
+                        HStack(spacing: 8) {
+                            ForEach(0..<speakerList.count, id: \.self) { index in
+                                let speaker = speakerList[index]
+                                
+                                if speaker.id != UInt(creatorId) {
+                                    LiveRoomInfoSpeakerView(
+                                        nickname: speaker.nickname,
+                                        profileUrl: speaker.profileImage,
+                                        isMute: muteSpeakerList.contains(UInt(speaker.id)),
+                                        isActiveSpeaker: activeSpeakerList.contains(UInt(speaker.id)),
+                                        onClickProfile: { onClickProfile(speaker.id) }
+                                    )
+                                }
+                            }
                        }
+                        .rotationEffect(Angle(degrees: 180))
                    }
+                    .rotationEffect(Angle(degrees: 180))
                }
                
                HStack(spacing: 5.3) {
@ -199,6 +204,12 @@ struct LiveRoomInfoHostView: View {
        .padding(.horizontal, 13.3)
        .padding(.top, 16)
        .background(Color.gray22)
+        .onAppear {
+            UIScrollView.appearance().bounces = false
+        }
+        .onDisappear {
+            UIScrollView.appearance().bounces = true
+        }
    }
 }

@ -228,31 +239,7 @@ struct LiveRoomInfoHostView_Previews: PreviewProvider {
                    nickname: "청령",
                    profileImage: "https://cf.sodalive.net/profile/13/13-profile-fabb75e0-2870-4d99-900e-1d9aa63e605b-685-1704859996417",
                    role: .SPEAKER
-                ),
-                LiveRoomMember(
-                    id: 3,
-                    nickname: "LUNA",
-                    profileImage: "https://cf.sodalive.net/profile/4679/4679-profile-41e83399-234e-4541-8591-f961a025cfaa-5819-1699536915310",
-                    role: .SPEAKER
-                ),
-                LiveRoomMember(
-                    id: 4,
-                    nickname: "도화",
-                    profileImage: "https://cf.sodalive.net/profile/26/26-profile-ddf78b4d-0300-4c50-9c84-5d8a95fd5fe2-4892-1705256364320",
-                    role: .SPEAKER
-                ),
-                LiveRoomMember(
-                    id: 5,
-                    nickname: "도화",
-                    profileImage: "https://cf.sodalive.net/profile/26/26-profile-ddf78b4d-0300-4c50-9c84-5d8a95fd5fe2-4892-1705256364320",
-                    role: .SPEAKER
-                ),
-                LiveRoomMember(
-                    id: 6,
-                    nickname: "도화",
-                    profileImage: "https://cf.sodalive.net/profile/26/26-profile-ddf78b4d-0300-4c50-9c84-5d8a95fd5fe2-4892-1705256364320",
-                    role: .SPEAKER
-                ),
+                )
            ],
            muteSpeakerList: [],
            activeSpeakerList: [],
--- a/SodaLive/Sources/Live/Room/V2/Component/View/LiveRoomInfoSpeakerView.swift
+++ b/SodaLive/Sources/Live/Room/V2/Component/View/LiveRoomInfoSpeakerView.swift
@ -19,32 +19,31 @@ struct LiveRoomInfoSpeakerView: View {
    let onClickProfile: () -> Void
    
    var body: some View {
-        VStack(spacing: 2.7) {
+        VStack(spacing: 5) {
            ZStack(alignment: .center) {
                KFImage(URL(string: profileUrl))
                    .resizable()
-                    .frame(width: 26.7, height: 26.7)
+                    .frame(width: 25, height: 25)
                    .clipShape(Circle())
-                    .overlay(
-                        Circle()
-                            .stroke(
-                                Color.button,
-                                lineWidth: isActiveSpeaker ? 3 : 0
-                            )
-                    )
                
                if isMute {
                    Image("ic_mute")
                        .resizable()
-                        .frame(width: 30, height: 30)
+                        .frame(width: 25, height: 25)
                }
            }
+            .overlay(
+                Circle()
+                    .stroke(
+                        Color.button,
+                        lineWidth: isActiveSpeaker ? 3 : 0
+                    )
+            )
            
            Text(nickname)
-                .font(.custom(Font.medium.rawValue, fixedSize: 10.7))
+                .font(.custom(Font.medium.rawValue, fixedSize: 8.7))
                .foregroundColor(.gray77)
        }
-        .frame(width: 30, height: 30)
        .onTapGesture { onClickProfile() }
    }
 }