From d243a091a5ca99b1d484b95d1c87750ad132764e Mon Sep 17 00:00:00 2001
From: Hyeona01 <sha0209@dgu.ac.kr>
Date: Tue, 26 Nov 2024 13:49:04 +0900
Subject: [PATCH] =?UTF-8?q?FE:=20[feat]=20=EC=83=88=EB=A1=9C=EA=B3=A0?=
 =?UTF-8?q?=EC=B9=A8=EC=8B=9C=20zustand=20=EC=B4=88=EA=B8=B0=ED=99=94=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0=20#53?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../eyesee-user/src/app/exam-room/page.tsx    | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/frontend/eyesee-user/src/app/exam-room/page.tsx b/src/frontend/eyesee-user/src/app/exam-room/page.tsx
index f8eaf9d..8f80933 100644
--- a/src/frontend/eyesee-user/src/app/exam-room/page.tsx
+++ b/src/frontend/eyesee-user/src/app/exam-room/page.tsx
@@ -1,31 +1,37 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
-import { api } from "@/apis";
+import React, { useEffect, useRef } from "react";
 import NextButton from "@/components/common/NextButton";
 import { useUserIdStore } from "@/store/useUserIdStore";
 import { useStore } from "@/store/useStore";
 
 const RealTimeVideoPage = () => {
-  const { userId } = useUserIdStore();
-
   const videoRef = useRef<HTMLVideoElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const socketRef = useRef<WebSocket | null>(null);
 
-  // WebSocket 연결 설정
+  const userId = useStore(useUserIdStore, (state) => state.userId);
+
   const setupWebSocket = () => {
-    // TODO: 웹소캣 서버
-    console.log(userId);
+    if (!userId) {
+      console.error(
+        "userId가 설정되지 않았습니다. WebSocket 연결을 중단합니다."
+      );
+      return;
+    }
+
     const socket = new WebSocket(
-      // `${process.env.NEXT_PUBLIC_WEBSOCKET_KEY}/${userId}`
-      `wss://43.201.224.93.nip.io/ws/${userId}`
+      `${process.env.NEXT_PUBLIC_WEBSOCKET_KEY}/${userId}`
+      // `${
+      //   process.env.NEXT_PUBLIC_WEBSOCKET_KEY || "wss://43.201.224.93:8000/ws"
+      // }/${userId}`
     );
+
     socket.onopen = () => {
-      console.log("WebSocket 연결 성공");
+      console.log(`WebSocket 연결 성공: ${userId}`);
     };
     socket.onerror = (error) => {
-      console.error("WebSocket 오류:", error);
+      console.error("WebSocket 오류 발생:", error);
     };
     socket.onclose = () => {
       console.log("WebSocket 연결 종료");
@@ -102,6 +108,12 @@ const RealTimeVideoPage = () => {
   useEffect(() => {
     const initialize = async () => {
       // await callStartRecordingApi(); // 시작 API 호출
+
+      if (!userId) {
+        console.error("userId가 설정되지 않았습니다. 초기화를 중단합니다.");
+        return;
+      }
+
       setupWebSocket();
       await startStreaming();
 
@@ -119,7 +131,7 @@ const RealTimeVideoPage = () => {
     };
 
     initialize();
-  }, []);
+  }, [userId]);
 
   return (
     <div className="flex flex-col items-center justify-center h-screen">