[Fix] 초기 유저 접속시 로딩 섹션이 깜빡이는 현상 수정

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

@@ -1,3 +1,4 @@
+import { useNavigate } from '@tanstack/react-router';
 import { SOCKET_EVENTS } from '@repo/mediasoup';
 
 import CameraOffIc from '@/assets/icons/camera-off.svg?react';
@@ -12,7 +13,7 @@
 import ExitDialog from '@/components/live/ExitDialog';
 import SettingDialog from '@/components/live/SettingDialog';
 import { useLocalStreamAction, useLocalStreamState } from '@/contexts/localStream/context';
-import { useMediasoupAction, useMediasoupState } from '@/contexts/mediasoup/context';
+import { useMediasoupState } from '@/contexts/mediasoup/context';
 import useModal from '@/hooks/useModal';
 
 interface ControlBarProps {
@@ -21,6 +22,8 @@
 }
 
 const ControlBar = ({ isOwner, onTicleEnd }: ControlBarProps) => {
+  const navigate = useNavigate({ from: '/live/$ticleId' });
+
   const {
     isOpen: isOpenExitModal,
     onClose: onCloseExitModal,
@@ -36,27 +39,25 @@
   const { socketRef } = useMediasoupState();
   const { video, screen, audio } = useLocalStreamState();
 
-  const { disconnect } = useMediasoupAction();
   const {
     closeStream,
     pauseStream,
     resumeStream,
     startScreenStream,
     startCameraStream,
     startMicStream,
-    closeScreenStream,
   } = useLocalStreamAction();
 
   const toggleScreenShare = async () => {
     const { paused, stream } = screen;
 
     try {
       if (stream && !paused) {
-        closeScreenStream();
+        closeStream('screen');
       } else {
         startScreenStream();
       }
     } catch (_) {
       closeStream('screen');
     }
   };
@@ -97,7 +98,7 @@
       onTicleEnd();
     }
 
-    disconnect();
+    navigate({ to: '/', replace: true });
   };
 
   return (

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

@@ -1,4 +1,5 @@
-import { StreamData } from '@/components/live/StreamView';
+import { client } from '@repo/mediasoup';
+
 import PaginationControls from '@/components/live/StreamView/List/PaginationControls';
 import SubVideoGrid from '@/components/live/StreamView/List/SubVideoGrid';
 import VideoPlayer from '@/components/live/StreamView/List/VideoPlayer';
@@ -7,11 +8,11 @@ import usePagination from '@/hooks/usePagination';
 const ITEMS_PER_SUB_GRID = 4;
 
 interface PinnedListProps {
-  pinnedVideoStreamData: StreamData;
+  pinnedVideoStreamData: client.RemoteStream;
 
-  addPinnedVideo: (stream: StreamData) => void;
+  addPinnedVideo: (stream: client.RemoteStream) => void;
   removePinnedVideo: () => void;
-  getAudioMutedState: (stream: StreamData) => boolean;
+  getAudioMutedState: (stream: client.RemoteStream) => boolean;
 }
 
 function PinnedGrid({

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

@@ -65,7 +65,7 @@ function SubVideoGrid({
             nickname={streamData.nickname}
             stream={streamData.stream ?? null}
             isMicOn={streamData && getAudioMutedState(streamData)}
-            mediaType={streamData.consumer?.appData?.mediaTypes}
+            mediaType={streamData.consumer?.appData?.mediaTypes ?? streamData.mediaType}
           />
         </div>
       ))}

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

@@ -1,13 +1,14 @@
-import { StreamData } from '@/components/live/StreamView';
+import { client } from '@repo/mediasoup';
+
 import PaginationControls from '@/components/live/StreamView/List/PaginationControls';
 import VideoGrid from '@/components/live/StreamView/List/VideoGrid';
 import usePagination from '@/hooks/usePagination';
 
 const ITEMS_PER_GRID = 9;
 
 interface UnPinnedListProps {
-  addPinnedVideo: (stream: StreamData) => void;
-  getAudioMutedState: (stream: StreamData) => boolean;
+  addPinnedVideo: (stream: client.RemoteStream) => void;
+  getAudioMutedState: (stream: client.RemoteStream) => boolean;
 }
 
 function UnPinnedGrid({ addPinnedVideo, getAudioMutedState }: UnPinnedListProps) {

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

@@ -1,6 +1,5 @@
 import { cva } from 'class-variance-authority';
-
-import { StreamData } from '@/components/live/StreamView';
+import { client } from '@repo/mediasoup';
 
 import VideoPlayer from './VideoPlayer';
 
@@ -17,9 +16,9 @@ const containerVariants = cva('h-full flex-1 justify-center gap-5', {
 });
 
 interface VideoGridProps {
-  videoStreamData: StreamData[];
-  onVideoClick: (stream: StreamData) => void;
-  getAudioMutedState: (stream: StreamData) => boolean;
+  videoStreamData: client.RemoteStream[];
+  onVideoClick: (stream: client.RemoteStream) => void;
+  getAudioMutedState: (stream: client.RemoteStream) => boolean;
 }
 
 function VideoGrid({ videoStreamData, onVideoClick, getAudioMutedState }: VideoGridProps) {
@@ -36,7 +35,7 @@ function VideoGrid({ videoStreamData, onVideoClick, getAudioMutedState }: VideoG
             nickname={streamData.nickname}
             stream={streamData.stream ?? null}
             isMicOn={streamData && getAudioMutedState(streamData)}
-            mediaType={streamData.consumer?.appData?.mediaTypes}
+            mediaType={streamData.consumer?.appData?.mediaTypes ?? streamData.mediaType}
           />
         </div>
       ))}

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

@@ -1,21 +1,9 @@
-import { types } from 'mediasoup-client';
-import { MediaTypes } from '@repo/mediasoup';
-
 import AudioStreams from '@/components/live/StreamView/AudioStreams';
 import PinnedGrid from '@/components/live/StreamView/List/Pinned';
 import UnPinnedGrid from '@/components/live/StreamView/List/UnPinned';
 import useAudioState from '@/hooks/useAudioState';
 import usePinnedVideo from '@/hooks/usePinnedVideo';
 
-export interface StreamData {
-  socketId: string;
-  nickname: string;
-  consumer?: types.Consumer<{ mediaTypes: MediaTypes; nickname: string }>;
-  kind?: types.MediaKind;
-  stream?: MediaStream | null;
-  paused?: boolean;
-}
-
 const StreamView = () => {
   const { pinnedVideoStreamData, removePinnedVideo, selectPinnedVideo } = usePinnedVideo();
   const { getAudioMutedState } = useAudioState();

apps/web/src/contexts/localStream/context.ts

@@ -28,11 +28,10 @@ interface StreamActionContextProps {
   startCameraStream: () => void;
   startMicStream: () => void;
   startScreenStream: () => void;
-  closeScreenStream: () => void;
   pauseStream: (type: MediaTypes) => void;
   resumeStream: (type: MediaTypes) => void;
   closeStream: (type: MediaTypes) => void;
-  closeLocalStream: () => void;
+  clearLocalStream: () => void;
 
   setSelectedVideoDeviceId: (deviceId: string) => void;
   setSelectedAudioDeviceId: (deviceId: string) => void;

apps/web/src/contexts/localStream/provider.tsx

@@ -15,11 +15,10 @@ export const LocalStreamProvider = ({ children }: StreamProviderProps) => {
     startCameraStream,
     startMicStream,
     startScreenStream,
-    closeScreenStream,
     pauseStream,
     resumeStream,
     closeStream,
-    closeLocalStream,
+    clearLocalStream,
 
     videoDevices,
     audioDevices,
@@ -51,8 +50,7 @@ export const LocalStreamProvider = ({ children }: StreamProviderProps) => {
     startMicStream,
     startCameraStream,
     startScreenStream,
-    closeScreenStream,
-    closeLocalStream,
+    clearLocalStream,
     setSelectedVideoDeviceId,
     setSelectedAudioDeviceId,
     setSelectedAudioOutputDeviceId,

apps/web/src/contexts/mediasoup/context.ts

@@ -20,7 +20,7 @@ export interface MediasoupState {
 }
 
 interface MediasoupActionContextProps {
-  disconnect: () => void;
+  clearMediasoup: () => void;
   createDevice: (rtpCapabilities: client.RtpCapabilities) => Promise<client.Device>;
   createSendTransport: (device: client.Device) => Promise<void>;
   createRecvTransport: (device: client.Device) => Promise<void>;

apps/web/src/contexts/mediasoup/provider.tsx

@@ -26,23 +26,17 @@ export const MediasoupProvider = ({ children }: MediasoupProviderProps) => {
     connectExistProducer,
   } = useProducer({ socketRef, transportsRef });
 
-  const disconnect = () => {
+  const clearMediasoup = () => {
     const { recvTransport, sendTransport } = transportsRef.current;
-    const { audio, video, screen } = producersRef.current;
-
-    socketRef.current?.disconnect();
 
     sendTransport?.close();
     recvTransport?.close();
 
-    audio?.close();
-    video?.close();
-    screen?.close();
+    socketRef.current?.disconnect();
 
     socketRef.current = null;
     deviceRef.current = null;
     transportsRef.current = { sendTransport: null, recvTransport: null };
-    producersRef.current = { audio: null, video: null, screen: null };
   };
 
   const state = {
@@ -55,7 +49,7 @@ export const MediasoupProvider = ({ children }: MediasoupProviderProps) => {
   };
 
   const actions = {
-    disconnect,
+    clearMediasoup,
     createDevice,
     createRecvTransport,
     createSendTransport,

apps/web/src/contexts/remoteStream/context.ts

@@ -19,6 +19,9 @@ interface MediasoupActionContextProps {
   pauseRemoteStream: (producerId: string) => void;
   resumeRemoteStream: (producerId: string) => void;
   clearRemoteStream: () => void;
+  addInitialRemoteStream: (
+    initialStream: Pick<client.RemoteStream, 'nickname' | 'socketId'>
+  ) => void;
 }
 
 export const RemoteStreamStateContext = createContext<RemoteStreamState | undefined>(undefined);

apps/web/src/contexts/remoteStream/provider.tsx

@@ -23,6 +23,7 @@ export const RemoteStreamProvider = ({ children }: RemoteStreamProviderProps) =>
     resumeAudioConsumers,
     resumeVideoConsumers,
     pauseVideoConsumers,
+    addInitialRemoteStream,
   } = useRemoteStream();
 
   const state = { audioStreams, videoStreams };
@@ -37,6 +38,7 @@ export const RemoteStreamProvider = ({ children }: RemoteStreamProviderProps) =>
     resumeAudioConsumers,
     resumeVideoConsumers,
     pauseVideoConsumers,
+    addInitialRemoteStream,
   } as const;
 
   return (