From 0c4925d7e52247e944c5c80b533f153f0f061378 Mon Sep 17 00:00:00 2001
From: today-is-first <diligent0644@gmail.com>
Date: Thu, 28 Nov 2024 11:09:10 +0900
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?=
 =?UTF-8?q?=EB=B9=84=EB=94=94=EC=98=A4=20=EB=B9=84=EC=9C=A8=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gamePage/leftSection/MainDisplay.tsx       | 13 ++++++++++---
 .../gamePage/leftSection/VideoFeed.tsx         | 18 +++++++++++++++---
 .../components/gamePage/stream/VideoStream.tsx |  7 +++++--
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/components/gamePage/leftSection/MainDisplay.tsx b/packages/frontend/src/components/gamePage/leftSection/MainDisplay.tsx
index 778c2d80..a3948e46 100644
--- a/packages/frontend/src/components/gamePage/leftSection/MainDisplay.tsx
+++ b/packages/frontend/src/components/gamePage/leftSection/MainDisplay.tsx
@@ -17,6 +17,7 @@ import VoteResult from './GamePhases/VoteResult';
 import EndingResult from './GamePhases/EndingResult';
 import { usePeerConnectionStore } from '@/states/store/peerConnectionStore';
 import VideoStream from '@/components/gamePage/stream/VideoStream';
+import { useLocalStreamStore } from '@/states/store/localStreamStore';
 
 export default function MainDisplay() {
   const { userId } = useAuthStore();
@@ -34,8 +35,13 @@ export default function MainDisplay() {
     setGamePhase,
     setSelectedVote,
   );
-  const remoteStreams = usePeerConnectionStore((state) => state.remoteStreams);
-  const currentStream = remoteStreams.get(currentSpeaker || '');
+  function getCurrentStream() {
+    const localStream = useLocalStreamStore.getState().localStream;
+    const remoteStreams = usePeerConnectionStore.getState().remoteStreams;
+    if (currentSpeaker === userId) return localStream;
+    const currentStream = remoteStreams.get(currentSpeaker || '');
+    return currentStream;
+  }
 
   useEffect(() => {
     if (gameStartData) {
@@ -85,9 +91,10 @@ export default function MainDisplay() {
           <div className="flex flex-col items-center justify-center h-full">
             <div className="w-4/6 p-4">
               <VideoStream
-                stream={currentStream || null}
+                stream={getCurrentStream() || null}
                 userName={currentSpeaker}
                 isLocal={true}
+                height="h-full"
               />
             </div>
             <div className="absolute top-16 left-4 text-lg p-2 text-white-default bg-slate-950 rounded-lg">
diff --git a/packages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx b/packages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx
index 6b53413d..9c27e7a8 100644
--- a/packages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx
+++ b/packages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx
@@ -8,15 +8,27 @@ export default function VideoFeed() {
   const localStream = useLocalStreamStore((state) => state.localStream);
   const remoteStreams = usePeerConnectionStore((state) => state.remoteStreams);
   const { userId } = useAuthStore();
+  const feedHeight = 'h-[180px]';
 
   return (
     <>
-      <VideoStream stream={localStream} userName={userId} isLocal={true} />
+      <VideoStream stream={localStream} userName={userId} isLocal={true} height={feedHeight} />
       {Array.from(remoteStreams).map(([userId, stream]) => (
-        <VideoStream key={userId} stream={stream} userName={userId} isLocal={false} />
+        <VideoStream
+          key={userId}
+          stream={stream}
+          userName={userId}
+          isLocal={false}
+          height={feedHeight}
+        />
       ))}
       {[...Array(Math.max(0, 5 - remoteStreams.size))].map((_, idx) => (
-        <VideoStream key={`empty-${idx}`} stream={null} userName={`빈 슬롯 ${idx + 1}`} />
+        <VideoStream
+          key={`empty-${idx}`}
+          stream={null}
+          userName={`빈 슬롯 ${idx + 1}`}
+          height={feedHeight}
+        />
       ))}
     </>
   );
diff --git a/packages/frontend/src/components/gamePage/stream/VideoStream.tsx b/packages/frontend/src/components/gamePage/stream/VideoStream.tsx
index 83aa7992..17307e0c 100644
--- a/packages/frontend/src/components/gamePage/stream/VideoStream.tsx
+++ b/packages/frontend/src/components/gamePage/stream/VideoStream.tsx
@@ -4,9 +4,10 @@ interface IVideoStreamProps {
   userName: string | null;
   stream: MediaStream | null;
   isLocal?: boolean;
+  height?: string;
 }
 
-export default function VideoStream({ userName, stream, isLocal }: IVideoStreamProps) {
+export default function VideoStream({ userName, stream, isLocal, height }: IVideoStreamProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
@@ -23,7 +24,9 @@ export default function VideoStream({ userName, stream, isLocal }: IVideoStreamP
   }, [stream]);
 
   return (
-    <div className="aspect-video relative w-full overflow-hidden bg-gray-700 rounded-lg min-h-32">
+    <div
+      className={`${height} aspect-video relative w-full overflow-hidden bg-gray-700 rounded-lg min-h-32`}
+    >
       <video
         ref={videoRef}
         muted={isLocal}

From e7c54436f54022785295debb6de0a5dbb5c6afef Mon Sep 17 00:00:00 2001
From: today-is-first <diligent0644@gmail.com>
Date: Thu, 28 Nov 2024 11:09:27 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=EA=B2=8C=EC=9E=84=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=83=81=EB=8B=A8=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/gamePage/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/src/pages/gamePage/index.tsx b/packages/frontend/src/pages/gamePage/index.tsx
index a0762a31..bb3cd7e8 100644
--- a/packages/frontend/src/pages/gamePage/index.tsx
+++ b/packages/frontend/src/pages/gamePage/index.tsx
@@ -22,7 +22,6 @@ export default function GamePage() {
   return (
     <>
       <BackgroundImage gradientClass="bg-white/30" />
-      <Header />
       <div className="relative flex w-full h-screen">
         <LeftGameSection />
         <RightGameSection />