diff --git a/client/src/components/common/toast/style.ts b/client/src/components/common/toast/style.ts index 436f385e..9c380359 100644 --- a/client/src/components/common/toast/style.ts +++ b/client/src/components/common/toast/style.ts @@ -8,7 +8,7 @@ export const NotificationContainer = styled.div` font-size: 14px; - z-index: 10; + z-index: 1000; `; export const Notification = styled.div` diff --git a/client/src/components/room/new-view/index.tsx b/client/src/components/room/new-view/index.tsx index 539bbccb..107f7b5b 100644 --- a/client/src/components/room/new-view/index.tsx +++ b/client/src/components/room/new-view/index.tsx @@ -43,11 +43,6 @@ function RoomModal() { else if (isAnonymous) setRoomView('selectModeView'); else { setRoomView('inRoomView'); - setToastList({ - type: 'success', - title: '방 생성', - description: '성공적으로 방이 생성됐습니다!', - }); } }) .catch((err) => { diff --git a/client/src/hooks/useRtc.tsx b/client/src/hooks/useRtc.tsx index 3c61f4f5..32cb27dc 100644 --- a/client/src/hooks/useRtc.tsx +++ b/client/src/hooks/useRtc.tsx @@ -1,7 +1,7 @@ import { MutableRefObject, RefObject, useCallback, useRef, useEffect, useState, Dispatch, } from 'react'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { Socket } from 'socket.io-client'; import useSocket from '@src/hooks/useSocket'; @@ -9,6 +9,8 @@ import { bindTrailingArgs } from '@src/utils'; import roomDocumentIdState from '@atoms/room-document-id'; import userTypeState, { IUser } from '@atoms/user'; import anonymousState from '@atoms/anonymous'; +import roomViewState from '@atoms/room-view-type'; +import toastListSelector from '@selectors/toast-list'; export interface IRTC { socketId?: string, @@ -24,16 +26,12 @@ export const useLocalStream = (): [MutableRefObject, RefObje const myVideoRef = useRef(null); const getLocalStream = useCallback(async () => { - try { - myStreamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); - if (myVideoRef.current) myVideoRef.current.srcObject = myStreamRef.current; + myStreamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); + if (myVideoRef.current) myVideoRef.current.srcObject = myStreamRef.current; myStreamRef.current! .getAudioTracks() // eslint-disable-next-line .forEach((track: MediaStreamTrack) => (track.enabled = !track.enabled)); - } catch (e) { - console.error(e); - } }, []); return [myStreamRef, myVideoRef, getLocalStream]; @@ -116,14 +114,33 @@ export const useRtc = (): [ const socket = useSocket('/room'); const [myStreamRef, myVideoRef, getLocalStream] = useLocalStream(); const setPeerConnection = useSetPeerConnection(setParticipants, myStreamRef); + const setRoomView = useSetRecoilState(roomViewState); + const setToastList = useSetRecoilState(toastListSelector); + useEffect(() => { if (!socket) return; const init = async () => { - await getLocalStream(); - socket.emit('room:join', { - roomDocumentId, userDocumentId: user.userDocumentId, socketId: socket!.id, isAnonymous, - }); + try { + await getLocalStream(); + if (!myStreamRef.current) throw new Error('NOT_ALLOW_MIC'); + socket.emit('room:join', { + roomDocumentId, userDocumentId: user.userDocumentId, socketId: socket!.id, isAnonymous, + }); + setToastList({ + type: 'success', + title: '방 생성', + description: '성공적으로 방이 생성됐습니다!', + }); + } catch (error) { + console.error(error); + setToastList({ + type: 'danger', + title: '장치 허용', + description: '마이크를 허용하지 않을 경우 방에 참가할 수 없습니다.', + }); + setRoomView('createRoomView'); + } }; init(); @@ -188,10 +205,10 @@ export const useRtc = (): [ return []; }); - myStreamRef.current!.getTracks() - .forEach((track: MediaStreamTrack) => { - track.stop(); - }); + myStreamRef.current?.getTracks() + .forEach((track: MediaStreamTrack) => { + track.stop(); + }); }; }, [socket, setPeerConnection]);