diff --git a/frontend/src/components/LiveRoom/LiveRoom.jsx b/frontend/src/components/LiveRoom/LiveRoom.jsx index 614b1a1..69b9c13 100644 --- a/frontend/src/components/LiveRoom/LiveRoom.jsx +++ b/frontend/src/components/LiveRoom/LiveRoom.jsx @@ -16,16 +16,22 @@ import { useTracks, useParticipants, useLocalParticipant, + useRoomContext, } from '@livekit/components-react'; import { RoomEvent, Track } from 'livekit-client'; import { useEffect, useRef, useState } from 'react'; import ChatRoom from '../ChatRoom/ChatRoom'; +import instance from '../../utils/axios/instance'; +import { API_URL } from '../../constants'; +import { useParams } from 'react-router-dom'; export default function LiveRoom() { + const { roomId } = useParams(); const lastAutoFocusedScreenShareTrack = useRef(null); const [role, setRole] = useState(null); - const room = useRoomInfo(); + const { name: roomName } = useRoomInfo(); + const room = useRoomContext(); const participants = useParticipants(); const { localParticipant } = useLocalParticipant(); @@ -87,10 +93,24 @@ export default function LiveRoom() { tracks, ]); + useEffect(() => { + const handleUnload = async () => { + if (room) { + await instance.post(`${API_URL}/video/deleteroom/${roomId}`); + } + }; + + window.addEventListener('beforeunload', handleUnload); + + return () => { + window.removeEventListener('beforeunload', handleUnload); + }; + }, [room, roomId]); + return (
-

{room.name}

+

{roomName}

참가자 {participants.length}명 diff --git a/frontend/src/pages/LivePage/LivePage.jsx b/frontend/src/pages/LivePage/LivePage.jsx index 85e7b8d..88278fe 100644 --- a/frontend/src/pages/LivePage/LivePage.jsx +++ b/frontend/src/pages/LivePage/LivePage.jsx @@ -33,14 +33,12 @@ export default function LivePage() { connect={true} data-lk-theme="default" onDisconnected={() => { - setTimeout(() => { - instance - .post(`${API_URL}/video/deleteroom/${roomId}`) - .catch(() => {}) - .finally(() => { - window.close(); - }); - }, 500); + instance + .post(`${API_URL}/video/deleteroom/${roomId}`) + .catch(() => {}) + .finally(() => { + window.close(); + }); }} > }>