fix : 방 id queryString으로 변환 및 UI 수정

Lee-Dongwook · Oct 21, 2024 · 2473c02 · 2473c02
1 parent 4518276
commit 2473c02
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 15 deletions.
diff --git a/client/next.config.mjs b/client/next.config.mjs
@@ -5,6 +5,9 @@ const nextConfig = {
     serverComponentsExternalPackages: ["mongoose"],
     serverActions: true,
   },
+  images: {
+    domains: ["via.placeholder.com"],
+  },
   webpack(config) {
     config.experiments = { ...config.experiments, topLevelAwait: true };
 
@@ -26,4 +29,4 @@ const nextConfig = {
   },
 };
 
-export default withNextVideo(nextConfig);
+export default withNextVideo(nextConfig);
diff --git a/client/src/components/Chat/index.tsx b/client/src/components/Chat/index.tsx
@@ -52,7 +52,7 @@ export default function Chat({ roomId }: ChatProps) {
   };
 
   return (
-    <div className="flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg shadow-md">
+    <div className="flex flex-col h-96 bg-white border border-black dark:bg-gray-800 rounded-lg shadow-md">
       <div className="flex-1 p-4 overflow-y-auto">
         {messages.map((msg, index) => (
           <div

diff --git a/client/src/components/VideoChat/index.tsx b/client/src/components/VideoChat/index.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Image from "next/image";
 import { io } from "socket.io-client";
 import Peer from "peerjs";
 
@@ -11,13 +13,18 @@ interface VideoChatProps {
 }
 
 export default function VideoChat({ roomId }: VideoChatProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
   const localVideoRef = useRef<HTMLVideoElement | null>(null);
   const remoteVideoRef = useRef<HTMLVideoElement | null>(null);
   const peerRef = useRef<Peer | null>(null);
   const [peerId, setPeerId] = useState<string | null>(null);
+  const [remoteStreamAvailable, setRemoteStreamAvailable] = useState(false);
 
   useEffect(() => {
-    const peer = new Peer("", {
+    const existingPeerId = searchParams.get("peerId");
+
+    const peer = new Peer(existingPeerId || "", {
       host: "localhost",
       port: 4000,
       path: "/myapp",
@@ -26,6 +33,10 @@ export default function VideoChat({ roomId }: VideoChatProps) {
     peer.on("open", (id) => {
       setPeerId(id);
       socket.emit("join-room", roomId, id);
+
+      if (!existingPeerId) {
+        router.replace(`?peerId=${id}`);
+      }
     });
 
     navigator.mediaDevices
@@ -41,6 +52,7 @@ export default function VideoChat({ roomId }: VideoChatProps) {
           call.on("stream", (remoteStream) => {
             if (remoteVideoRef.current) {
               remoteVideoRef.current.srcObject = remoteStream;
+              setRemoteStreamAvailable(true); // 원격 스트림이 수신되었음을 표시
             }
           });
         });
@@ -50,6 +62,7 @@ export default function VideoChat({ roomId }: VideoChatProps) {
           call.on("stream", (remoteStream) => {
             if (remoteVideoRef.current) {
               remoteVideoRef.current.srcObject = remoteStream;
+              setRemoteStreamAvailable(true); // 원격 스트림이 수신되었음을 표시
             }
           });
         });
@@ -61,13 +74,24 @@ export default function VideoChat({ roomId }: VideoChatProps) {
       peer.destroy();
       socket.disconnect();
     };
-  }, [roomId]);
+  }, [roomId, searchParams, router]);
 
   return (
-    <div className="flex flex-col items-center space-y-4">
+    <div className="flex flex-row justify-center items-center space-x-4">
       <video ref={localVideoRef} autoPlay muted className="w-1/2 rounded-lg" />
-      <video ref={remoteVideoRef} autoPlay className="w-1/2 rounded-lg" />
-      {peerId && <p>Peer ID: {peerId}</p>}
+
+      {/* 원격 비디오 또는 기본 이미지 */}
+      {remoteStreamAvailable ? (
+        <video ref={remoteVideoRef} autoPlay className="w-1/2 rounded-lg" />
+      ) : (
+        <Image
+          src="https://via.placeholder.com/400x300?text=Waiting+for+remote+stream"
+          alt="Waiting for remote stream..."
+          width={300}
+          height={300}
+          className="w-1/2 rounded-lg object-cover"
+        />
+      )}
     </div>
   );
 }
diff --git a/client/src/template/VideoChatPage.tsx b/client/src/template/VideoChatPage.tsx
@@ -10,16 +10,12 @@ interface VideoChatPageProps {
 
 export default function VideoChatPage({ roomId }: VideoChatPageProps) {
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
-      <div className="flex flex-col lg:flex-row items-start space-y-4 lg:space-y-0 lg:space-x-6 p-4 lg:p-8">
-        <div className="w-full lg:w-2/3 flex justify-center">
-          <VideoChat roomId={roomId} />
-        </div>
+    <div className="flex flex-row lg:flex-row p-4 lg:p-8 space-y-4 lg:space-y-0 lg:space-x-6">
+      <div className="w-full lg:w-2/3 flex justify-center">
+        <VideoChat roomId={roomId} />
       </div>
+
       <div className="w-full lg:w-1/3 flex flex-col space-y-4">
-        <h2 className="text-xl font-bold text-gray-800 dark:text-gray-100">
-          채팅
-        </h2>
         <Chat roomId={roomId} />
       </div>
     </div>