[Feat] 게임 대기 중 준비 상태를 플레이어 모두가 공유하는 기능 추가

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'
       }`}

packages/frontend/src/components/gamePage/leftSection/MainDisplay.tsx

@@ -18,6 +18,7 @@ import EndingResult from './GamePhases/EndingResult';
 import { usePeerConnectionStore } from '@/states/store/peerConnectionStore';
 import VideoStream from '@/components/gamePage/stream/VideoStream';
 import { useLocalStreamStore } from '@/states/store/localStreamStore';
+import { useSpeakingControl } from '@/hooks/useSpeakingControl';
 
 export default function MainDisplay() {
   const { userId } = useAuthStore();
@@ -28,6 +29,8 @@ export default function MainDisplay() {
   const [selectedVote, setSelectedVote] = useState<string | null>(null);
   const [isVoteSubmitted, setIsVoteSubmitted] = useState(false);
   const { gameStartData, currentSpeaker, endSpeaking, votePinoco } = useGameSocket(setGamePhase);
+  const { endSpeakingEarly } = useSpeakingControl(currentSpeaker, userId);
+
   const { endingResult } = useEnding(setGamePhase);
   const { submitGuess } = useGuessing(isPinoco, setGamePhase);
   const { voteResult, deadPerson, isDeadPersonPinoco } = useVoteResult(
@@ -103,6 +106,14 @@ export default function MainDisplay() {
             <div className="absolute p-2 text-lg rounded-lg top-16 left-4 text-white-default bg-slate-950">
               📢 {currentSpeaker}
             </div>
+            {currentSpeaker === userId && (
+              <button
+                className="mt-4 px-6 py-2 bg-green-default text-white-default rounded-lg hover:bg-green-200 hover:text-black self-end ml-auto"
+                onClick={endSpeakingEarly}
+              >
+                발언 종료
+              </button>
+            )}
           </div>
         )}
 

packages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx

@@ -3,24 +3,50 @@ import VideoStream from '@/components/gamePage/stream/VideoStream';
 import { useAuthStore } from '@/states/store/authStore';
 import { useLocalStreamStore } from '@/states/store/localStreamStore';
 import { usePeerConnectionStore } from '@/states/store/peerConnectionStore';
+import { useReadyStatus } from '@/hooks/useReadyStatus';
 
 export default function VideoFeed() {
   const localStream = useLocalStreamStore((state) => state.localStream);
   const remoteStreams = usePeerConnectionStore((state) => state.remoteStreams);
   const { userId } = useAuthStore();
   const feedHeight = 'h-[180px]';
+  const { isUserReady } = useReadyStatus();
 
   return (
     <>
-      <VideoStream stream={localStream} userName={userId} isLocal={true} height={feedHeight} />
-      {Array.from(remoteStreams).map(([userId, stream]) => (
-        <VideoStream
-          key={userId}
-          stream={stream}
-          userName={userId}
-          isLocal={false}
-          height={feedHeight}
-        />
+      <div
+        className={`relative ${
+          isUserReady(userId || '') ? 'border-4 border-white' : ''
+        } rounded-lg`}
+      >
+        <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>
+        )}
+      </div>
+      {Array.from(remoteStreams).map(([remoteUserId, stream]) => (
+        <div
+          key={remoteUserId}
+          className={`relative ${
+            isUserReady(remoteUserId) ? 'border-4 border-white' : ''
+          } rounded-lg`}
+        >
+          <VideoStream
+            stream={stream}
+            userName={remoteUserId}
+            isLocal={false}
+            height={feedHeight}
+          />
+          {isUserReady(remoteUserId) && (
+            <div className="absolute bottom-2 right-2 animate-spin-slow">
+              <span className="px-2 py-1 text-orange-500 font-bold bg-white rounded-full">
+                READY
+              </span>
+            </div>
+          )}
+        </div>
       ))}
       {[...Array(Math.max(0, 5 - remoteStreams.size))].map((_, idx) => (
         <VideoStream

packages/frontend/src/hooks/useReadyStatus.ts

@@ -0,0 +1,9 @@
+import { useGameSocket } from '@/hooks/useGameSocket';
+
+export const useReadyStatus = () => {
+  const { readyUsers } = useGameSocket();
+
+  const isUserReady = (userId: string) => readyUsers.includes(userId);
+
+  return { isUserReady };
+};

packages/frontend/src/hooks/useSpeakingControl.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { useSocketStore } from '@/states/store/socketStore';
+
+export const useSpeakingControl = (currentSpeaker: string | null, userId: string | null) => {
+  const socket = useSocketStore((state) => state.socket);
+
+  const endSpeakingEarly = () => {
+    if (!socket || currentSpeaker !== userId) return;
+    socket.emit('end_speaking');
+  };
+  return { endSpeakingEarly };
+};