Merge pull request #226 from boostcampwm-2024/feature/#221

[Feat] 방장 표시 기능 구현
boostcampwm-2024 · Dec 3, 2024 · b1f038a · b1f038a
2 parents 0bd8de1 + 7ae2ae6
commit b1f038a
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 26 deletions.
diff --git a/packages/frontend/public/images/videoStream/videoPoster.png b/packages/frontend/public/images/videoStream/videoPoster.png
diff --git a/packages/frontend/src/components/gamePage/leftSection/GameButtons/ReadyButton.tsx b/packages/frontend/src/components/gamePage/leftSection/GameButtons/ReadyButton.tsx
@@ -14,7 +14,7 @@ export default function ReadyButton() {
 
   return (
     <Button
-      buttonText={isReady ? '준비완료✅' : '준비하기🤔'}
+      buttonText={isReady ? '준비완료' : '준비하기'}
       className={`max-w-xs text-xl transition-all text-white-default ${
         isReady ? 'bg-green-default' : 'bg-black opacity-90'
       }`}

diff --git a/packages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx b/packages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import VideoStream from '@/components/gamePage/stream/VideoStream';
 import { useAuthStore } from '@/store/authStore';
 import { useLocalStreamStore } from '@/store/localStreamStore';
@@ -11,29 +10,44 @@ export default function VideoFeed() {
   const { userId } = useAuthStore();
   const feedHeight = 'h-[180px]';
   const readyUsers = useRoomStore((state) => state.readyUsers);
+  const hostUserId = useRoomStore((state) => state.hostUserId);
   const isUserReady = (userId: string) => readyUsers.includes(userId);
+  const isHost = (userId: string) => userId === hostUserId;
 
   return (
     <>
       <div
-        className={`relative rounded-lg`}
-        style={{
-          boxShadow: isUserReady(userId || '') ? '0 0 0 4px white' : '',
-        }}
+        className={`relative rounded-lg ${
+          isHost(userId || '')
+            ? 'border-4 border-blue-500'
+            : isUserReady(userId || '')
+              ? 'border-4 border-white'
+              : ''
+        }`}
       >
         <VideoStream stream={localStream} userName={userId} isLocal={true} height={feedHeight} />
         {isUserReady(userId || '') && (
           <div className="absolute bottom-2 right-2">
             <span className="px-2 py-1 text-orange-500 font-bold bg-white rounded-full">READY</span>
           </div>
         )}
+        {isHost(userId || '') && (
+          <div className="absolute top-2 right-2">
+            <span className="px-2 py-1 text-blue-500 font-bold bg-white rounded-full">HOST</span>
+          </div>
+        )}
       </div>
+
       {Array.from(remoteStreams).map(([remoteUserId, stream]) => (
         <div
           key={remoteUserId}
-          className={`relative ${
-            isUserReady(remoteUserId) ? 'border-4 border-white' : ''
-          } rounded-lg`}
+          className={`relative rounded-lg ${
+            isHost(remoteUserId)
+              ? 'border-4 border-blue-500'
+              : isUserReady(remoteUserId)
+                ? 'border-4 border-white'
+                : ''
+          }`}
         >
           <VideoStream
             stream={stream}
@@ -48,8 +62,14 @@ export default function VideoFeed() {
               </span>
             </div>
           )}
+          {isHost(remoteUserId) && (
+            <div className="absolute top-2 right-2">
+              <span className="px-2 py-1 text-blue-500 font-bold bg-white rounded-full">HOST</span>
+            </div>
+          )}
         </div>
       ))}
+
       {[...Array(Math.max(0, 5 - remoteStreams.size))].map((_, idx) => (
         <VideoStream
           key={`empty-${idx}`}

diff --git a/packages/frontend/src/components/gamePage/rightSection/LeaveButton.tsx b/packages/frontend/src/components/gamePage/rightSection/LeaveButton.tsx
@@ -20,7 +20,7 @@ export default function LeaveButton() {
     socket.emit('leave_room');
     signalingSocket.emit('leave_room');
     setChatHistory([]);
-    setRoomData(null, false, false);
+    setRoomData(null, false, false, '');
     navigate('/lobby');
   }
 

diff --git a/packages/frontend/src/hooks/useChatSocket.ts b/packages/frontend/src/hooks/useChatSocket.ts
@@ -22,7 +22,7 @@ interface IUserJoined {
 export const useChatSocket = (gsid: string, userId: string) => {
   const { userId: myUserId } = useAuthStore();
   const addChatEntry = useChatStore((state) => state.addChatEntry);
-  const { addUser, removeUser, setIsHost } = useRoomStore();
+  const { addUser, removeUser, setHostUserId, setIsHost, removeReadyUser } = useRoomStore();
   const socket = useSocketStore((state) => state.socket);
 
   useEffect(() => {
@@ -38,16 +38,27 @@ export const useChatSocket = (gsid: string, userId: string) => {
 
     socket.on('user_left', (data: IUserLeft) => {
       removeUser(data.userId);
-      if (data.hostUserId === userId) {
-        setIsHost(true);
-      } else {
-        setIsHost(false);
-      }
+      setHostUserId(data.hostUserId);
+
+      removeReadyUser(data.hostUserId);
+      console.log('준비유저 업데이트 완료');
+
       addChatEntry({
         userId: `[알림]`,
         message: `${data.userId}님이 퇴장하셨습니다.`,
         chatType: ChatType.NOTICE,
       });
+
+      if (data.hostUserId === myUserId) {
+        setIsHost(true);
+        addChatEntry({
+          userId: `[알림]`,
+          message: `방장이 변경되었습니다. 당신이 새로운 방장입니다.`,
+          chatType: ChatType.NOTICE,
+        });
+      } else {
+        setIsHost(false);
+      }
     });
 
     socket.on('user_joined', (data: IUserJoined) => {
@@ -64,12 +75,21 @@ export const useChatSocket = (gsid: string, userId: string) => {
       socket.off('user_left');
       socket.off('user_joined');
     };
-  }, [gsid, socket, addChatEntry, addUser, removeUser, setIsHost, userId, myUserId]);
+  }, [
+    gsid,
+    socket,
+    addChatEntry,
+    addUser,
+    removeUser,
+    setHostUserId,
+    setIsHost,
+    myUserId,
+    removeReadyUser,
+  ]);
 
   const sendChatEntry = (message: string) => {
     if (!socket || !message.trim()) return;
 
-    // 서버로 메시지 전송
     socket.emit('send_message', { gsid, message });
   };
 

diff --git a/packages/frontend/src/hooks/useCreateRoom.ts b/packages/frontend/src/hooks/useCreateRoom.ts
@@ -17,7 +17,7 @@ export default function useCreateRoom() {
     socket.emit('create_room');
 
     socket.on('create_room_success', (data: { gsid: string; isHost: boolean }) => {
-      setRoomData(data.gsid, data.isHost, false);
+      setRoomData(data.gsid, data.isHost, false, userId);
       setAllUsers([userId]);
       signalingSocket.emit('create_room', { gsid: data.gsid });
       navigate(`/game/${data.gsid}`);

diff --git a/packages/frontend/src/hooks/useJoinRoom.ts b/packages/frontend/src/hooks/useJoinRoom.ts
@@ -7,8 +7,7 @@ import { useSignalingSocketStore } from '@/store/signalingSocketStore';
 export default function useJoinRoom() {
   const navigate = useNavigate();
   const userId = useAuthStore((state) => state.userId);
-  const setRoomData = useRoomStore((state) => state.setRoomData);
-  const { setAllUsers } = useRoomStore();
+  const { setRoomData, setAllUsers, setReadyUsers, setHostUserId } = useRoomStore();
   const socket = useSocketStore((state) => state.socket);
   const signalingSocket = useSignalingSocketStore((state) => state.signalingSocket);
 
@@ -17,8 +16,10 @@ export default function useJoinRoom() {
 
     socket.emit('join_room', { gsid });
     socket.on('join_room_success', (data) => {
-      setRoomData(gsid, data.isHost, false);
+      setRoomData(gsid, data.isHost, false, data.hostUserId);
       setAllUsers(data.userIds);
+      setReadyUsers(data.readyUserIds);
+      setHostUserId(data.hostUserId);
       signalingSocket.emit('join_room', { gsid });
       navigate(`/game/${gsid}`);
     });

diff --git a/packages/frontend/src/pages/lobbyPage/index.tsx b/packages/frontend/src/pages/lobbyPage/index.tsx
@@ -22,7 +22,7 @@ export default function LobbyPage() {
     if (gsid) {
       socket?.emit('leave_room');
       setChatHistory([]);
-      setRoomData(null, false, false);
+      setRoomData(null, false, false, '');
     }
   }, []);
 

diff --git a/packages/frontend/src/store/roomStore.ts b/packages/frontend/src/store/roomStore.ts
@@ -7,7 +7,13 @@ interface IRoomState {
   isPinoco: boolean;
   allUsers: Set<string>;
   readyUsers: string[];
-  setRoomData: (gsid: string | null, isHost: boolean, isPinoco: boolean) => void;
+  hostUserId: string | null;
+  setRoomData: (
+    gsid: string | null,
+    isHost: boolean,
+    isPinoco: boolean,
+    hostUserId: string,
+  ) => void;
   setIsPinoco: (isPinoco: boolean) => void;
   setAllUsers: (allUsers: string[]) => void;
   addUser: (userId: string) => void;
@@ -16,6 +22,7 @@ interface IRoomState {
   setReadyUsers: (readyUsers: string[]) => void;
   addReadyUser: (userId: string) => void;
   removeReadyUser: (userId: string) => void;
+  setHostUserId: (hostUserId: string) => void;
 }
 export const useRoomStore = create<IRoomState>()(
   persist(
@@ -25,8 +32,10 @@ export const useRoomStore = create<IRoomState>()(
       isPinoco: false,
       allUsers: new Set(),
       readyUsers: [],
+      hostUserId: null,
 
-      setRoomData: (gsid, isHost, isPinoco) => set({ gsid, isHost, isPinoco }),
+      setRoomData: (gsid, isHost, isPinoco, hostUserId) =>
+        set({ gsid, isHost, isPinoco, hostUserId }),
       setIsPinoco: (isPinoco) => set({ isPinoco }),
       setAllUsers: (allUsers) => set({ allUsers: new Set(allUsers) }),
       addUser: (userId) =>
@@ -38,7 +47,6 @@ export const useRoomStore = create<IRoomState>()(
           allUsers: new Set([...state.allUsers].filter((id) => id !== userId)),
         })),
       setIsHost: (isHost) => set({ isHost }),
-
       setReadyUsers: (readyUsers) => set({ readyUsers }),
       addReadyUser: (userId) =>
         set((state) => ({
@@ -48,6 +56,7 @@ export const useRoomStore = create<IRoomState>()(
         set((state) => ({
           readyUsers: state.readyUsers.filter((id) => id !== userId),
         })),
+      setHostUserId: (hostUserId) => set({ hostUserId }),
     }),
     { name: 'room-storage' },
   ),