FE: [feat] 웹소켓 통신 파일 형식 통일화 #53

src/frontend/eyesee-user/src/app/exam-room/page.tsx

@@ -3,9 +3,10 @@
 import React, { useEffect, useRef } from "react";
 import { api } from "@/apis";
 import NextButton from "@/components/common/NextButton";
+import { useUserIdStore } from "@/store/useUserIdStore";
 
 const RealTimeVideoPage = () => {
-  const userId = 1; // 임의 값
+  const { userId } = useUserIdStore();
 
   const videoRef = useRef<HTMLVideoElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -15,9 +16,10 @@ const RealTimeVideoPage = () => {
   const setupWebSocket = () => {
     // TODO: 웹소캣 서버
     const socket = new WebSocket(
-      `${process.env.NEXT_PUBLIC_WEBSOCKET_KEY}/${userId}`
+      // "ws://43.201.224.93:8000/ws/1"
+      // `${process.env.NEXT_PUBLIC_WEBSOCKET_KEY}/${userId}`
+      `ws://43.201.224.93:8000/ws/${userId}`
     );
-    // const socket = new WebSocket("ws://localhost:8080/ws/video");
     socket.onopen = () => {
       console.log("WebSocket 연결 성공");
     };
@@ -82,29 +84,14 @@ const RealTimeVideoPage = () => {
       if (context) {
         context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-        // 캡처된 Canvas를 JPEG Blob으로 변환
-        canvas.toBlob(
-          (blob) => {
-            if (blob && socketRef.current) {
-              // 임의 코드(필요시 사용)
-              const payload = {
-                userId: 123,
-                sessionId: 456,
-                time: new Date().toISOString(),
-              };
-
-              const message = {
-                metadata: payload,
-                image: blob,
-              };
-
-              socketRef.current.send(JSON.stringify(message));
-              console.log("이미지 및 메타데이터 전송");
-            }
-          },
-          "image/jpeg",
-          0.7
-        ); // 품질 70%
+        // 캡처된 Canvas를 Base64로 변환
+        const base64Data = canvas.toDataURL("image/jpeg", 0.7); // 품질 70%
+        const base64String = base64Data.split(",")[1]; // "data:image/jpeg;base64," 부분 제거
+
+        if (socketRef.current) {
+          socketRef.current.send(base64String);
+          console.log("Base64 이미지 전송");
+        }
       }
     }
   };

src/frontend/eyesee-user/src/app/information/page.tsx

@@ -5,6 +5,7 @@ import NextButton from "@/components/common/NextButton";
 import SubHeader from "@/components/common/SubHeader";
 import InformationSection from "@/components/information/InformationSection";
 import { useExamStore } from "@/store/useExamStore";
+import { useUserIdStore } from "@/store/useUserIdStore";
 import { UserInfoRequest } from "@/types/exam";
 import { setAccessToken, setRefreshToken } from "@/utils/auth";
 import { informationValidation } from "@/utils/validation";
@@ -13,6 +14,7 @@ import { useEffect, useState } from "react";
 
 const InformationPage = () => {
   const router = useRouter();
+  const { setUserId } = useUserIdStore();
   const { exam } = useExamStore();
   const [isAvailable, setIsAvailable] = useState(false);
   const [information, setInformation] = useState<UserInfoRequest>({
@@ -31,6 +33,7 @@ const InformationPage = () => {
       console.log("응답 데이터:", response); // 성공 시 데이터 처리
       setAccessToken(response.data.access_token);
       setRefreshToken(response.data.refresh_token);
+      setUserId(response.data.userId);
       router.push("/camera");
     } catch (error) {
       console.error("수험 정보 입력 실패:", error); // 실패 시 에러 처리

src/frontend/eyesee-user/src/store/useUserIdStore.ts

@@ -0,0 +1,19 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+type UserIdStore = {
+  userId: number;
+  setUserId: (userId: number) => void;
+};
+
+export const useUserIdStore = create(
+  persist<UserIdStore>(
+    (set) => ({
+      userId: 1,
+      setUserId: (userId) => set({ userId }),
+    }),
+    {
+      name: "userId-storage", // localStorage에 저장될 키 이름
+    }
+  )
+);

src/frontend/eyesee-user/src/types/exam.ts

@@ -41,6 +41,7 @@ export type UserInfoRequest = {
 };
 
 export type UserInfoResponse = {
+  userId: number;
   access_token: string;
   refresh_token: string;
 };