feat: 라이브 페이지 권한 체크 추가

frontend/src/pages/LivePage/LivePage.jsx

@@ -1,31 +1,29 @@
 import { LiveRoom } from '../../components/LiveRoom';
 import { useParams } from 'react-router-dom';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { LiveKitRoom } from '@livekit/components-react';
 import instance from '../../utils/axios/instance';
 import { API_URL, ROOM_URL } from '../../constants';
-import useBoundStore from '../../store';
 import '@livekit/components-styles';
 import LoadingIndicator from '../../components/LoadingIndicator.jsx/LoadingIndicator';
 
 export default function LivePage() {
   const { roomId } = useParams();
+  const [liveToken, setLiveToken] = useState(null);
   const generateToken = useCallback(async () => {
     await instance.post(`${API_URL}/video/makeroom/${roomId}`);
-    const { data } = await instance.post(`${API_URL}/video/joinroom/${roomId}`);
+    const { data } = await instance.post(`${API_URL}/video/joinroom/${roomId}`).catch(() => {
+      alert('방에 입장할 수 없습니다.');
+    });
 
     return data.token;
   }, [roomId]);
 
-  const liveToken = useBoundStore((state) => state.liveToken);
-
   useEffect(() => {
-    if (!liveToken) {
-      generateToken().then((token) => {
-        useBoundStore.setState({ liveToken: token });
-      });
-    }
-  }, [generateToken, liveToken]);
+    generateToken().then((token) => {
+      setLiveToken(token);
+    });
+  }, [generateToken]);
 
   return liveToken ? (
     <LiveKitRoom
@@ -33,6 +31,9 @@ export default function LivePage() {
       serverUrl={ROOM_URL}
       connect={true}
       data-lk-theme="default"
+      onDisconnected={() => {
+        instance.post(`${API_URL}/video/deleteroom/${roomId}`).catch(() => {});
+      }}
     >
       <LiveRoom />
     </LiveKitRoom>

frontend/src/store/index.js

@@ -3,7 +3,6 @@ import { userTypeSlice } from './userTypeSlice';
 import { tokenSlice } from './tokenSlice';
 import { userNameSlice } from './userNameSlice';
 import { persist } from 'zustand/middleware';
-import { liveSlice } from './liveSlice';
 
 const useBoundStore = create(
   persist(
@@ -11,7 +10,6 @@ const useBoundStore = create(
       ...userTypeSlice(...a),
       ...tokenSlice(...a),
       ...userNameSlice(...a),
-      ...liveSlice(...a),
     }),
     { name: 'bound-store' }
   )

frontend/src/store/liveSlice.js

@@ -1,6 +0,0 @@
-export const liveSlice = (set) => ({
-  liveToken: null,
-  setLiveToken: (liveToken) => set({ liveToken }),
-  participants: 0,
-  setParticipants: (participants) => set({ participants }),
-});