✨ feat: (FE) - 방 나갔을때 cleanup 로직 추가

Author: seyoung8239

frontend/src/components/BottomBar/BottomBar.tsx

@@ -30,6 +30,7 @@ import { socketEmit } from '@api/socket.api';
 import { SOCKET_EVENT_TYPE } from '@constants/socket.constant';
 import useSafeNavigate from '@hooks/useSafeNavigate';
 import { PAGE_TYPE } from '@constants/page.constant';
+import useCleanupRoom from '@hooks/useCleanupRoom';
 
 interface Props {
 	mainController?: React.ReactNode;
@@ -43,6 +44,7 @@ enum DRAWER_TYPE {
 
 const BottomBar = ({ mainController }: Props) => {
 	const { safeNavigate } = useSafeNavigate();
+	const cleanupRoom = useCleanupRoom();
 	const [isMicOn, setIsMicOn] = useState(true);
 	const [isCameraOn, setIsCameraOn] = useState(true);
 
@@ -78,6 +80,7 @@ const BottomBar = ({ mainController }: Props) => {
 
 	const handleLeaveRoom = () => {
 		socketEmit(SOCKET_EVENT_TYPE.LEAVE_ROOM);
+		cleanupRoom();
 		safeNavigate(PAGE_TYPE.LANDING_PAGE);
 	};
 

frontend/src/hooks/useCleanupRoom.ts

@@ -0,0 +1,27 @@
+import { meInRoomState, othersInRoomState, roomUUIDState } from '@store/room.store';
+import { webRTCUserMapState } from '@store/webRTC.store';
+import { useCallback } from 'react';
+import { useResetRecoilState } from 'recoil';
+import useCleanupInterview from './useCleanupInterview';
+
+const useCleanupRoom = () => {
+	const cleanupInterview = useCleanupInterview();
+	const roomUUIDRefresher = useResetRecoilState(roomUUIDState);
+	const ohtersRefresher = useResetRecoilState(othersInRoomState);
+	const meRefresher = useResetRecoilState(meInRoomState);
+	const webRTCUserMapRefresher = useResetRecoilState(webRTCUserMapState);
+
+	const cleanupRoom = useCallback(() => {
+		console.log('cleanup room');
+		roomUUIDRefresher();
+		ohtersRefresher();
+		meRefresher();
+		webRTCUserMapRefresher();
+
+		cleanupInterview();
+	}, []);
+
+	return cleanupRoom;
+};
+
+export default useCleanupRoom;

frontend/src/pages/Lobby/Lobby.tsx

@@ -25,15 +25,12 @@ interface joinInterviewResponseType {
 }
 
 const Lobby = () => {
+	usePreventLeave();
 	const { safeNavigate } = useSafeNavigate();
 	const [me, setMe] = useRecoilState<UserType>(meInRoomState);
 	const [others, setOthers] = useRecoilState<UserType[]>(othersInRoomState);
-
-	usePreventLeave();
-
 	const [webRTCUserList, setWebRTCUserList] = useRecoilState(webRTCUserMapState);
 	const { startConnection } = useWebRTCSignaling(webRTCUserList, setWebRTCUserList);
-
 	const streamList = useRecoilValue(webRTCStreamSelector);
 
 	useEffect(() => {

frontend/src/service/socket.ts

@@ -1,3 +1,3 @@
 import { io } from 'socket.io-client';
 
-export const socket = io('/socket');
+export const socket = io('/socket');