[FE] FIX: myRole, roomId 받아오는 방법 변경 #256

src/frontend/src/components/Sidebar/UserList/index.tsx

@@ -5,7 +5,6 @@ import { RedBlackTree } from '@/hooks/utils/RedBlackTree';
 
 import { SidebarType } from '@/types/enums/SidebarType';
 import { ProfileType } from '@/types/enums/ProfileType';
-import { UserRole } from '@/types/enums/UserRole';
 
 import { roomApi } from '@/api/endpoints/room/room.api';
 import { useWebSocketStore } from '@/stores/useWebSocketStore';
@@ -31,8 +30,8 @@ const compareUsers = (a: IUser, b: IUser): number => {
 export const UserList = () => {
   const treeRef = useRef<RedBlackTree<IUser> | null>(null);
   const [, setVersion] = useState(0);
-  const { currentRoom } = useCurrentRoomStore();
-  const roomId = currentRoom?.roomDetails.roomInfo[0]?.roomId;
+  const currentRoom = useCurrentRoomStore(state => state.currentRoom);
+  const roomId = useCurrentRoomStore(state => state.roomId);
   const { subscribeRoomUserInfo, subscribeRoomRoleChange } = useWebSocketStore.getState();
 
   useEffect(() => {
@@ -132,7 +131,7 @@ export const UserList = () => {
                 nickname={member.nickname}
                 imgUrl={member.profileImg}
                 userRole={member.role}
-                myRole={UserRole.CREATOR}
+                myRole={currentRoom?.myRole || 2}
                 sidebarType={SidebarType.USERLIST}
                 onCancel={() => setActiveProfile(null)}
               />

src/frontend/src/components/Sidebar/VoiceChat/index.tsx

@@ -4,16 +4,16 @@ import { UserListFooter } from '@/components/Sidebar/UserList/UserListFooter';
 
 import { SidebarType } from '@/types/enums/SidebarType';
 import { ProfileType } from '@/types/enums/ProfileType';
-import { UserRole } from '@/types/enums/UserRole';
 
 import { Container, UserList, ProfileWrapper } from './index.css';
 import { CurrentRoomUserDto } from '@/api/endpoints/room/room.interface';
 import { RoomProfileModal } from '@/components/Modal/RoomProfileModal';
 import { useCurrentRoomStore } from '@/stores/useCurrentRoomStore';
 export const VoiceChat = () => {
   const [activeProfile, setActiveProfile] = useState<number | null>(null);
-  const { currentRoom } = useCurrentRoomStore();
-  const roomId = currentRoom?.roomDetails.roomInfo[0]?.roomId;
+
+  const currentRoom = useCurrentRoomStore(state => state.currentRoom);
+  const roomId = useCurrentRoomStore(state => state.roomId);
   const handleProfileClick = (id: number) => {
     setActiveProfile(prevId => (prevId === id ? null : id));
   };
@@ -46,7 +46,7 @@ export const VoiceChat = () => {
                 imgUrl={member.profileImageUrl}
                 userId={member.userId}
                 userRole={member.role}
-                myRole={UserRole.CREATOR}
+                myRole={currentRoom?.myRole || 2}
                 sidebarType={SidebarType.VOICECHAT}
                 roomId={roomId}
                 onCancel={() => setActiveProfile(null)}

src/frontend/src/components/YoutubePlayer/index.tsx

@@ -7,10 +7,11 @@
 
 export const YouTubePlayer = () => {
   const { videoQueue } = useVideoStore();
-  const { roomId } = useCurrentRoomStore.getState();
+  const currentRoom = useCurrentRoomStore(state => state.currentRoom);
+  const myRole = currentRoom?.myRole;
+  const roomId = useCurrentRoomStore(state => state.roomId);
   const { client, subTopic } = useWebSocketStore();
   const pubTopic = useWebSocketStore.getState().pubTopic;
-  const myRole = useCurrentRoomStore.getState().currentRoom?.myRole;
   const isWatchOnly = myRole === UserRole.MEMBER;
 
   const playerRef = useRef<YT.Player | null>(null);
@@ -176,7 +177,7 @@
       // 동일 영상 id라면 재생 다시 시작 안 함
       console.log('같은 영상입니다');
     }
   }, [videoQueue, currentPlayingVideo]);
 
   return (
     <Container>