From f201e4b4b94a6719d4dbfedffbaf6cb777dac002 Mon Sep 17 00:00:00 2001
From: zizonyoungjun <naya700@naver.com>
Date: Sun, 1 Dec 2024 23:03:14 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A4=80=EB=B9=84=20=EC=97=AC=EB=B6=80?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20=ED=94=8C=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=96=B4=EB=93=A4=EC=9D=98=20=EB=B9=84=EB=94=94=EC=98=A4?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=EC=97=90=20READY=EB=A5=BC=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gamePage/leftSection/VideoFeed.tsx        | 44 +++++++++++++++----
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx b/packages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx
index 9c27e7a..31f042b 100644
--- a/packages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx
+++ b/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