From 478d48eea821fed5c78075ba0df858048074e2dc Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Thu, 8 Aug 2024 13:32:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B0=95=EC=82=AC=EA=B0=80=20=EA=B0=95?=
 =?UTF-8?q?=EC=9D=98=20=ED=83=AD=20=EB=8B=AB=EC=9D=84=20=EB=95=8C=20?=
 =?UTF-8?q?=EA=B0=95=EC=9D=98=20=EC=A2=85=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/LiveRoom/LiveRoom.jsx | 24 +++++++++++++++++--
 frontend/src/pages/LivePage/LivePage.jsx      | 14 +++++------
 2 files changed, 28 insertions(+), 10 deletions(-)

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 (
     <div className={styles.wrapper}>
       <header className={styles.header}>
-        <h1 className={styles.title}>{room.name}</h1>
+        <h1 className={styles.title}>{roomName}</h1>
         <div className={styles.roomInfo}>
           <span>참가자</span>
           <span>{participants.length}명</span>
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();
+          });
       }}
     >
       <Suspense fallback={<LoadingIndicator fill />}>