Merge pull request #365 from boostcampwm-2024/fix/#364/type-error

[Fix] 병합 과정 발생한 타입 에러 수정

apps/media/package.json

@@ -33,7 +33,7 @@
     "@repo/types": "workspace:*",
     "fluent-ffmpeg": "^2.1.3",
     "mediasoup": "^3.15.0",
-    "node-fetch": "^3.3.2",
+    "node-fetch": "^2.7.0",
     "reflect-metadata": "^0.2.0",
     "rxjs": "^7.8.1",
     "socket.io": "^4.8.1"

apps/web/src/components/live/ControlBar/index.tsx

@@ -1,5 +1,4 @@
-import { useParams } from '@tanstack/react-router';
-import { useNavigate } from '@tanstack/react-router';
+import { useParams, useNavigate } from '@tanstack/react-router';
 import { SOCKET_EVENTS } from '@repo/mediasoup';
 
 import CameraOffIc from '@/assets/icons/camera-off.svg?react';

apps/web/src/components/live/SettingDialog/AiSummary.tsx

@@ -5,22 +5,32 @@ import { SOCKET_EVENTS } from '@repo/mediasoup';
 import Button from '@/components/common/Button';
 import { useMediasoupState } from '@/contexts/mediasoup/context';
 
+interface GetIsRecordingRes {
+  isRecording: boolean;
+}
+
 function AiSummary() {
   const [isRecording, setIsRecording] = useState<boolean>(false);
   const { socketRef } = useMediasoupState();
-  const socket = socketRef.current;
   const { ticleId: roomId } = useParams({ from: '/_authenticated/live/$ticleId' });
 
   const handleRecordStart = () => {
+    const socket = socketRef.current;
+
     if (!socket) return;
+
     socket.emit(SOCKET_EVENTS.startRecord, { roomId });
     setIsRecording(true);
   };
 
   useEffect(() => {
+    const socket = socketRef.current;
+
     if (!socket) return;
-    socket.emit(SOCKET_EVENTS.getIsRecording, { roomId }, (res) => {
-      const { isRecording } = res;
+
+    socket.emit(SOCKET_EVENTS.getIsRecording, { roomId }, (data: GetIsRecordingRes) => {
+      const { isRecording } = data;
+
       setIsRecording(isRecording);
     });
   }, []);

apps/web/src/components/live/StreamView/List/SubVideoGrid.tsx

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 import { useEffect, useRef, useState } from 'react';
+import { client } from '@repo/mediasoup';
 
-import { StreamData } from '@/components/live/StreamView';
 import VideoPlayer from '@/components/live/StreamView/List/VideoPlayer';
 
 const highlightVariants = cva(`h-full w-full overflow-hidden rounded-lg border-2`, {
@@ -17,10 +17,10 @@ const highlightVariants = cva(`h-full w-full overflow-hidden rounded-lg border-2
 });
 
 interface SubVideoGridProps {
-  videoStreamData: StreamData[];
-  pinnedVideoStreamData: StreamData | null;
-  onVideoClick: (stream: StreamData) => void;
-  getAudioMutedState: (stream: StreamData) => boolean;
+  videoStreamData: client.RemoteStream[];
+  pinnedVideoStreamData: client.RemoteStream | null;
+  onVideoClick: (stream: client.RemoteStream) => void;
+  getAudioMutedState: (stream: client.RemoteStream) => boolean;
 }
 
 function SubVideoGrid({

apps/web/src/hooks/useAuthInfo.ts

@@ -24,6 +24,7 @@ const useAuthInfo = (): AuthInfoReturn => {
     }
 
     setAuthInfo({
+      userId: user.id.toString(),
       nickname: user.nickname,
       profileImageUrl: user.profileImageUrl,
       provider: user.provider,