From 07076d6cea721324a4f323e437162483115dc439 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Thu, 5 Dec 2024 23:14:33 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=8B=B0=ED=81=B4=20=EC=A2=85=EB=A3=8C?=
 =?UTF-8?q?=20status=20=EB=B3=80=EA=B2=BD=20=EC=8B=9C=EC=A0=90=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/live/ControlBar/index.tsx  | 23 +++++++++++++++++++
 apps/web/src/hooks/mediasoup/useMediasoup.ts  |  4 ++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/live/ControlBar/index.tsx b/apps/web/src/components/live/ControlBar/index.tsx
index c9e594a2..8be9f453 100644
--- a/apps/web/src/components/live/ControlBar/index.tsx
+++ b/apps/web/src/components/live/ControlBar/index.tsx
@@ -1,4 +1,5 @@
 import { useParams, useNavigate } from '@tanstack/react-router';
+import { useEffect } from 'react';
 import { SOCKET_EVENTS } from '@repo/mediasoup';
 
 import CameraOffIc from '@/assets/icons/camera-off.svg?react';
@@ -12,6 +13,7 @@ import SettingIc from '@/assets/icons/setting.svg?react';
 import ToggleButton from '@/components/live/ControlBar/ToggleButton';
 import ExitDialog from '@/components/live/ExitDialog';
 import SettingDialog from '@/components/live/SettingDialog';
+import { ENV } from '@/constants/env';
 import { useLocalStreamAction, useLocalStreamState } from '@/contexts/localStream/context';
 import { useMediasoupState } from '@/contexts/mediasoup/context';
 import useModal from '@/hooks/useModal';
@@ -103,6 +105,27 @@ const ControlBar = ({ isOwner, onTicleEnd }: ControlBarProps) => {
     navigate({ to: '/', replace: true });
   };
 
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+    };
+
+    const handleUnload = () => {
+      if (isOwner) {
+        const blob = new Blob([], { type: 'application/json' });
+        navigator.sendBeacon(`${ENV.API_URL}/dashboard/${ticleId}/end`, blob);
+      }
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    window.addEventListener('unload', handleUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      window.removeEventListener('unload', handleUnload);
+    };
+  }, []);
+
   return (
     <>
       <div className="flex items-center justify-start gap-x-[14px]">
diff --git a/apps/web/src/hooks/mediasoup/useMediasoup.ts b/apps/web/src/hooks/mediasoup/useMediasoup.ts
index e3e7db48..9c37157e 100644
--- a/apps/web/src/hooks/mediasoup/useMediasoup.ts
+++ b/apps/web/src/hooks/mediasoup/useMediasoup.ts
@@ -102,11 +102,11 @@ const useMediasoup = () => {
       clearMediasoup();
     };
 
-    window.addEventListener('beforeunload', clearAll);
+    window.addEventListener('unload', clearAll);
 
     return () => {
       clearAll();
-      window.removeEventListener('beforeunload', clearAll);
+      window.removeEventListener('unload', clearAll);
     };
   }, []);
 };