💄 [Design]: 시청 페이지 비디오 비율 조정

Author: zero0205

apps/client/src/pages/Broadcast/BroadcastPlayer.tsx

@@ -127,20 +127,20 @@ function BroadcastPlayer({
         autoPlay
         muted
         playsInline
-        className={`absolute top-0 left-0 w-full h-full bg-surface-alt ${isVideoEnabled ? '' : 'hidden'}`}
+        className={`absolute top-0 left-0 w-full h-full bg-black ${isVideoEnabled ? '' : 'hidden'}`}
       />
       <video
         ref={screenShareRef}
         autoPlay
         muted
         playsInline
-        className={`absolute top-0 left-0 w-full h-full bg-surface-alt ${isScreenSharing ? '' : 'hidden'}`}
+        className={`absolute top-0 left-0 w-full h-full bg-black ${isScreenSharing ? '' : 'hidden'}`}
       />
       <canvas
         ref={canvasRef}
         width={RESOLUTION_OPTIONS['high'].width}
         height={RESOLUTION_OPTIONS['high'].height}
-        className={`absolute top-0 left-0 w-full h-full bg-surface-alt object-cover ${
+        className={`absolute top-0 left-0 w-full h-full bg-black object-cover ${
           !isScreenSharing || !isVideoEnabled ? 'hidden' : ''
         }`}
       />

apps/client/src/pages/Live/LiveCamperInfo.tsx

@@ -19,7 +19,7 @@ function LiveCamperInfo({ liveId }: { liveId: string }) {
       ) : isLoading ? (
         <LoadingCharacter size={100} />
       ) : (
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-row h-full w-full justify-between">
           <div className="flex flex-col gap-4 pr-24">
             {/* 제목 */}
             <h1 className="text-text-strong font-bold text-2xl">{data.title}</h1>

apps/client/src/pages/Live/LivePlayer.tsx

@@ -85,7 +85,7 @@ function LivePlayer({ mediaStream, socket, transportId, errors }: LivePlayerProp
             ref={videoRef}
             autoPlay
             muted={isAudioEnabled ? false : true}
-            className="w-full max-w-[1280px] h-auto"
+            className="absolute top-0 left-0 h-full w-full bg-surface-alt"
           />
           <div className="absolute bottom-4 left-0 right-0 px-6 text-text-default h-6 flex flex-row justify-between items-center">
             <div className="flex flex-row space-x-6 items-center">

apps/client/src/pages/Live/index.tsx

@@ -60,14 +60,16 @@ export default function Live() {
         <ErrorCharacter size={400} message="방 정보가 없습니다." />
       ) : (
         <>
-          <div className="flex flex-col flex-grow gap-4 h-full ml-8 mb-5">
+          <div className="flex flex-col flex-1 gap-4 ml-8">
             <LivePlayer
               mediaStream={mediaStream}
               transportId={transportInfo?.transportId}
               socket={socket}
               errors={{ socketError, transportError, consumerError }}
             />
-            <LiveCamperInfo liveId={liveId} />
+            <div className="flex justify-center items-center h-36 w-full">
+              <LiveCamperInfo liveId={liveId} />
+            </div>
           </div>
           <div className="flex h-full w-80 pr-5">
             <ChatContainer roomId={liveId} isProducer={false} />