diff --git "a/client/public/Asset/\352\262\214\354\236\204/0.jpeg" "b/client/public/Asset/\352\262\214\354\236\204/0.jpeg"
deleted file mode 100644
index 59f4a0dd..00000000
Binary files "a/client/public/Asset/\352\262\214\354\236\204/0.jpeg" and /dev/null differ
diff --git "a/client/public/Asset/\352\262\214\354\236\204/1.gif" "b/client/public/Asset/\352\262\214\354\236\204/1.gif"
deleted file mode 100644
index cb615007..00000000
Binary files "a/client/public/Asset/\352\262\214\354\236\204/1.gif" and /dev/null differ
diff --git "a/client/public/Asset/\352\262\214\354\236\204/2.png" "b/client/public/Asset/\352\262\214\354\236\204/2.png"
deleted file mode 100644
index 76b74527..00000000
Binary files "a/client/public/Asset/\352\262\214\354\236\204/2.png" and /dev/null differ
diff --git a/client/src/Component/Atom/Video.tsx b/client/src/Component/Atom/Video.tsx
index 0a582150..2e43382e 100644
--- a/client/src/Component/Atom/Video.tsx
+++ b/client/src/Component/Atom/Video.tsx
@@ -2,23 +2,10 @@ import React, { useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 
-const GameStyle = css`
-  top: -10%;
-  width: 150px;
-  height: 150px;
-`;
-
-const GatherStyle = css`
-  width: 150px;
-  height: 150px;
-`;
-
-const containerStyle = (props: { type: string }) => css`
+const containerStyle = css`
   width: 240px;
   height: 240px;
   border: 1px solid #000000;
-  ${props.type === "Game" && GameStyle}
-  ${props.type === "Gather" && GatherStyle}
 `;
 
 const VideoContainer = styled.video`
@@ -29,11 +16,10 @@ const VideoContainer = styled.video`
 
 interface Props {
   stream: MediaStream;
-  type: string;
   muted?: boolean;
 }
 
-export const Video = ({ type, stream, muted }: Props) => {
+export const Video = ({ stream, muted }: Props) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [isMuted, setIsMuted] = useState<boolean>(false);
 
@@ -45,7 +31,7 @@ export const Video = ({ type, stream, muted }: Props) => {
   }, [stream, muted]);
 
   return (
-    <div css={containerStyle({ type })}>
+    <div css={containerStyle}>
       <VideoContainer ref={videoRef} muted={isMuted} autoPlay />
     </div>
   );
diff --git a/client/src/Component/Molecules/Chat/ChatInput.tsx b/client/src/Component/Molecules/Chat/ChatInput.tsx
deleted file mode 100644
index 953a1d91..00000000
--- a/client/src/Component/Molecules/Chat/ChatInput.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { ChangeEvent, ChangeEventHandler, useRef } from "react";
-import { css } from "@emotion/react";
-import { useRecoilValue } from "recoil";
-import { Input } from "@Atom/.";
-import { chatTarget } from "../../../Recoil/Atom";
-import { userState } from "@Recoil/UserData";
-import ClientSocket from "../../../Socket";
-import { postChat } from "@Util/data";
-const ImageSendButton = "/Asset/ImageSendButton.svg";
-const SendButton = "/Asset/SendButton.svg";
-
-const InputContainer = css`
-  display: flex;
-  justify-content: center;
-  padding-top: 10px;
-  align-items: center;
-  height: fit-content;
-`;
-
-const sendImageStyle = css`
-  background-image: url(${ImageSendButton});
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 25px;
-  height: 25px;
-  margin-right: 10px;
-  cursor: pointer;
-`;
-
-const sendButtonStyle = css`
-  background-image: url(${SendButton});
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 25px;
-  height: 25px;
-  margin-left: 10px;
-  cursor: pointer;
-`;
-
-const ImageInputStlye = css`
-  display: none;
-`;
-
-export const ChatInput = () => {
-  const { chatRoomId } = useRecoilValue(chatTarget);
-  const { id: uid } = useRecoilValue(userState);
-
-  const messageRef = useRef<HTMLInputElement>(null);
-  const imageInputTag = useRef<HTMLInputElement | null>(null);
-
-  const handleSendMessageClick = () => {
-    if (!messageRef.current) return;
-    if (!messageRef.current.value) return;
-
-    const chat = messageRef.current.value;
-
-    const { socket } = new ClientSocket(uid);
-    socket?.emit("sendChat", { chatRoomId, message: { from: uid, message: chat, read: false, source: "" } });
-    messageRef.current.value = "";
-  };
-
-  const handleEnterPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.code !== "Enter") return;
-    handleSendMessageClick();
-  };
-
-  const handleImageButtonClick = () => {
-    (imageInputTag.current as HTMLInputElement).click();
-  };
-
-  const changeImage: ChangeEventHandler<HTMLInputElement> = (event: ChangeEvent<HTMLInputElement>) => {
-    if (!event.target.files) return;
-
-    postChat(chatRoomId, uid, event.target.files[0]);
-  };
-
-  return (
-    <div css={InputContainer}>
-      <div css={sendImageStyle} onClick={handleImageButtonClick} />
-      <Input placeholder="메시지를 입력하세요" ref={messageRef} onKeyPress={handleEnterPress} />
-      <div css={sendButtonStyle} onClick={handleSendMessageClick} />
-      <input ref={imageInputTag} type="file" accept="image/*" css={ImageInputStlye} onChange={changeImage} />
-    </div>
-  );
-};
diff --git a/client/src/Component/Molecules/Chat/ChatInput/ChatInput.hook.tsx b/client/src/Component/Molecules/Chat/ChatInput/ChatInput.hook.tsx
new file mode 100644
index 00000000..0021469b
--- /dev/null
+++ b/client/src/Component/Molecules/Chat/ChatInput/ChatInput.hook.tsx
@@ -0,0 +1,40 @@
+import { postChat } from "@Util/data";
+import { ChangeEvent, ChangeEventHandler, useRef } from "react";
+import ClientSocket from "Socket";
+
+type chatRoomInfo = {
+  uid: string;
+  chatRoomId: number;
+};
+
+export const useChatMessageControl = ({ uid, chatRoomId }: chatRoomInfo) => {
+  const messageRef = useRef<HTMLInputElement>(null);
+  const sendMessage = () => {
+    if (!messageRef.current?.value) return;
+    sendChat({ uid, chatRoomId, message: messageRef.current.value });
+    messageRef.current.value = "";
+  };
+  const handleEnterPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.code !== "Enter") return;
+    sendMessage();
+  };
+  return { messageRef, sendMessage, handleEnterPress };
+};
+
+type sendChatPropsType = chatRoomInfo & { message: string };
+const sendChat = ({ uid, chatRoomId, message }: sendChatPropsType) => {
+  const { socket } = new ClientSocket(uid);
+  socket?.emit("sendChat", { chatRoomId, message: { from: uid, message, read: false, source: "" } });
+};
+
+export const useChatImageControl = ({ uid, chatRoomId }: chatRoomInfo) => {
+  const imageInputTag = useRef<HTMLInputElement>(null);
+  const handleImageButtonClick = () => (imageInputTag.current as HTMLInputElement).click();
+
+  const changeImage: ChangeEventHandler<HTMLInputElement> = (event: ChangeEvent<HTMLInputElement>) => {
+    if (!event.target.files) return;
+    postChat(chatRoomId, uid, event.target.files[0]);
+  };
+
+  return { imageInputTag, handleImageButtonClick, changeImage };
+};
diff --git a/client/src/Component/Molecules/Chat/ChatInput/ChatInput.tsx b/client/src/Component/Molecules/Chat/ChatInput/ChatInput.tsx
new file mode 100644
index 00000000..f7d5e6b1
--- /dev/null
+++ b/client/src/Component/Molecules/Chat/ChatInput/ChatInput.tsx
@@ -0,0 +1,57 @@
+import { css } from "@emotion/react";
+import { useRecoilValue } from "recoil";
+import { Input } from "@Atom/.";
+import { userChatRoomInfo } from "@Recoil/ChatData";
+import { useChatImageControl, useChatMessageControl } from "./ChatInput.hook";
+
+export const ChatInput = () => {
+  const { chatRoomId, id: uid } = useRecoilValue(userChatRoomInfo);
+  const { messageRef, sendMessage, handleEnterPress } = useChatMessageControl({ uid, chatRoomId });
+  const { imageInputTag, handleImageButtonClick, changeImage } = useChatImageControl({ uid, chatRoomId });
+
+  return (
+    <div css={InputContainer}>
+      <div css={sendImageStyle} aria-hidden="true" onClick={handleImageButtonClick} />
+      <Input placeholder="메시지를 입력하세요" ref={messageRef} onKeyPress={handleEnterPress} />
+      <div css={sendButtonStyle} aria-hidden="true" onClick={sendMessage} />
+      <input ref={imageInputTag} type="file" accept="image/*" css={ImageInputStlye} onChange={changeImage} />
+    </div>
+  );
+};
+
+const ImageSendButton = "/Asset/ImageSendButton.svg";
+const SendButton = "/Asset/SendButton.svg";
+
+const InputContainer = css`
+  display: flex;
+  justify-content: center;
+  padding-top: 10px;
+  align-items: center;
+  height: fit-content;
+`;
+
+const sendImageStyle = css`
+  background-image: url(${ImageSendButton});
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 25px;
+  height: 25px;
+  margin-right: 10px;
+  cursor: pointer;
+`;
+
+const sendButtonStyle = css`
+  background-image: url(${SendButton});
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 25px;
+  height: 25px;
+  margin-left: 10px;
+  cursor: pointer;
+`;
+
+const ImageInputStlye = css`
+  display: none;
+`;
diff --git a/client/src/Component/Molecules/Chat/ChatRoomBasic.tsx b/client/src/Component/Molecules/Chat/ChatRoomBasic.tsx
deleted file mode 100644
index 324dcedc..00000000
--- a/client/src/Component/Molecules/Chat/ChatRoomBasic.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-console */
-
-import React, { useEffect, useRef, useState } from "react";
-import { useRecoilValue } from "recoil";
-// import { Socket } from "socket.io-client";
-import { css } from "@emotion/react";
-import { Video, Button } from "@Atom/.";
-import { chatTarget } from "@Recoil/Atom";
-import { userState } from "@Recoil/UserData";
-import { IWebRTCUser } from "@Util/type";
-import ClientSocket from "../../../Socket";
-import { userExitEvent, allUsersEvent, userEnterEvent, getSenderAnswerEvent, getSenderCandidateEvent, getReceiverAnswerEvent, getReceiverCandidateEvent } from "../../../Socket/util";
-import { getLocalStream } from "../../../Socket/webRTC";
-
-const GameVideoStyle = css`
-  top: -10%;
-  width: 150px;
-  height: 150px;
-`;
-
-const GatherVideoStyle = css`
-  width: 150px;
-  height: 150px;
-`;
-
-const videoStyle = (props: { type: string }) => css`
-  width: 240px;
-  height: 240px;
-  border: 1px solid #000000;
-  ${props.type === "Game" && GameVideoStyle}
-  ${props.type === "Gather" && GatherVideoStyle}
-`;
-
-const GameStyle = css`
-  top: 0%;
-  width: 240px;
-  height: 80vh;
-  overflow-x: scroll;
-  flex-direction: column;
-  justify-content: center;
-`;
-
-const GatherStyle = css`
-  top: 0%;
-  width: 560px;
-  height: 150px;
-`;
-
-const containerStyle = (props: { type: string }) => css`
-  margin: 0 auto;
-  width: 520px;
-  height: 520px;
-  overflow-y: scroll;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 30px;
-  padding-top: 0;
-  position: relative;
-  ${props.type === "Game" && GameStyle}
-  ${props.type === "Gather" && GatherStyle}
-`;
-const GameButtonContainerStyle = css`
-  display: flex;
-  margin-left: 1vw;
-  position: absolute;
-  width: 30vw;
-  left: 30vw;
-  top: 79vh;
-  justify-content: space-around;
-`;
-
-const buttonContainerStyle = (props: { type: string }) => css`
-  display: flex;
-  margin-left: 1vw;
-  position: absolute;
-  top: 83.5%;
-  ${props.type === "Game" && GameButtonContainerStyle}
-`;
-
-const chatRoomBasicStyle = (props: { type: string }) => css`
-  ${props.type === "Game" && GameRoomStyle}
-`;
-const GameRoomStyle = css`
-  position: absolute;
-`;
-
-export const ChatRoomBasic = ({ type }: { type: string }) => {
-  const { chatRoomId } = useRecoilValue(chatTarget);
-  const { id } = useRecoilValue(userState);
-  const [users, setUsers] = useState<Array<IWebRTCUser>>([]);
-
-  const localStreamRef = useRef<MediaStream>();
-  const localVideoRef = useRef<HTMLVideoElement>(null);
-  const { socket } = new ClientSocket(id);
-  const handleUserExitEvent = (socketId: string) => {
-    userExitEvent(socketId, setUsers);
-  };
-
-  const handleAllUserEvent = (data: { users: Array<{ id: string }> }) => {
-    if (!socket) return;
-    allUsersEvent(data, String(chatRoomId), socket, setUsers);
-  };
-
-  const handleUserEnterEvent = (data: { id: string }) => {
-    if (!socket) return;
-    userEnterEvent(data, String(chatRoomId), socket, setUsers);
-  };
-
-  /* eslint consistent-return: "error" */
-
-  useEffect(() => {
-    getLocalStream(localStreamRef, localVideoRef, setUsers, String(chatRoomId), socket);
-    socket!.on("userEnter", handleUserEnterEvent);
-    socket!.on("allUsers", handleAllUserEvent);
-    socket!.on("userExit", handleUserExitEvent);
-    socket!.on("getSenderAnswer", getSenderAnswerEvent);
-    socket!.on("getSenderCandidate", getSenderCandidateEvent);
-    socket!.on("getReceiverAnswer", getReceiverAnswerEvent);
-    socket!.on("getReceiverCandidate", getReceiverCandidateEvent);
-    return () => {
-      const { sendPC } = ClientSocket;
-      if (sendPC) sendPC.close();
-      users.forEach((user) => handleUserExitEvent(user.id));
-      socket!.emit("leaveRoom");
-      socket!.off("userEnter", handleUserEnterEvent);
-      socket!.off("allUsers", handleAllUserEvent);
-      socket!.off("userExit", handleUserExitEvent);
-      socket!.off("getSenderAnswer", getSenderAnswerEvent);
-      socket!.off("getSenderCandidate", getSenderCandidateEvent);
-      socket!.off("getReceiverAnswer", getReceiverAnswerEvent);
-      socket!.off("getReceiverCandidate", getReceiverCandidateEvent);
-      localStreamRef.current?.getTracks().forEach((track) => track.stop());
-    };
-  }, []);
-
-  const getPcStats = async (pc: RTCPeerConnection) => {
-    await pc.getStats();
-  };
-
-  useEffect(() => {
-    const { sendPC } = ClientSocket;
-    if (!sendPC) return;
-    getPcStats(sendPC);
-  }, [users]);
-
-  function muteMic() {
-    if (!localStreamRef || !localStreamRef.current) return;
-    localStreamRef.current.getAudioTracks().forEach((track: MediaStreamTrack) => {
-      track.enabled = !track.enabled;
-    });
-  }
-
-  function muteCam() {
-    if (!localStreamRef || !localStreamRef.current) return;
-    localStreamRef.current.getVideoTracks().forEach((track: MediaStreamTrack) => {
-      track.enabled = !track.enabled;
-    });
-  }
-  return (
-    <div css={chatRoomBasicStyle({ type })}>
-      <div css={containerStyle({ type })}>
-        <video css={videoStyle({ type })} muted ref={localVideoRef} autoPlay />
-        {users?.map((user) => {
-          return <Video stream={user.stream} key={user.id} type={type} />;
-        })}
-      </div>
-      <div css={buttonContainerStyle({ type })}>
-        <Button size="Small" onClick={muteCam}>
-          cam On/Off
-        </Button>
-        <Button size="Small" onClick={muteMic}>
-          mic On/Off
-        </Button>
-      </div>
-    </div>
-  );
-};
diff --git a/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.hook.tsx b/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.hook.tsx
new file mode 100644
index 00000000..122577bc
--- /dev/null
+++ b/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.hook.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useRef } from "react";
+import { IWebRTCUser } from "@Util/type";
+import ClientSocket from "Socket";
+import { getSenderAnswerEvent, getSenderCandidateEvent, getReceiverAnswerEvent, getReceiverCandidateEvent, allUsersEvent, userEnterEvent, userExitEvent } from "Socket/util";
+import { getLocalStream } from "Socket/webRTC";
+
+type userType = {
+  users: IWebRTCUser[];
+  setUsers: React.Dispatch<React.SetStateAction<IWebRTCUser[]>>;
+};
+
+export const useVideoSocketEvent = ({ id, chatRoomId, userState }: { id: string; chatRoomId: number; userState: userType }) => {
+  const { socket } = new ClientSocket(id);
+  const { users, setUsers } = userState;
+  const localStreamRef = useRef<MediaStream>();
+  const localVideoRef = useRef<HTMLVideoElement>(null);
+
+  const handleUserExitEvent = (socketId: string) => userExitEvent(socketId, setUsers);
+  const handleAllUserEvent = (data: { users: Array<{ id: string }> }) => allUsersEvent(data, String(chatRoomId), socket, setUsers);
+  const handleUserEnterEvent = (data: { id: string }) => userEnterEvent(data, String(chatRoomId), socket, setUsers);
+
+  useEffect(() => {
+    getLocalStream(localStreamRef, localVideoRef, setUsers, String(chatRoomId), socket);
+    socket!.on("userEnter", handleUserEnterEvent);
+    socket!.on("allUsers", handleAllUserEvent);
+    socket!.on("userExit", handleUserExitEvent);
+    socket!.on("getSenderAnswer", getSenderAnswerEvent);
+    socket!.on("getSenderCandidate", getSenderCandidateEvent);
+    socket!.on("getReceiverAnswer", getReceiverAnswerEvent);
+    socket!.on("getReceiverCandidate", getReceiverCandidateEvent);
+    return () => {
+      const { sendPC } = ClientSocket;
+      if (sendPC) sendPC.close();
+      users.forEach((user) => handleUserExitEvent(user.id));
+      socket!.emit("leaveRoom");
+      socket!.off("userEnter", handleUserEnterEvent);
+      socket!.off("allUsers", handleAllUserEvent);
+      socket!.off("userExit", handleUserExitEvent);
+      socket!.off("getSenderAnswer", getSenderAnswerEvent);
+      socket!.off("getSenderCandidate", getSenderCandidateEvent);
+      socket!.off("getReceiverAnswer", getReceiverAnswerEvent);
+      socket!.off("getReceiverCandidate", getReceiverCandidateEvent);
+      localStreamRef.current?.getTracks().forEach((track) => track.stop());
+    };
+  }, []);
+
+  return { localStreamRef, localVideoRef };
+};
diff --git a/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.tsx b/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.tsx
new file mode 100644
index 00000000..6d41c4fe
--- /dev/null
+++ b/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+import { useRecoilValue } from "recoil";
+// import { Socket } from "socket.io-client";
+import { css } from "@emotion/react";
+import { Video, Button } from "@Atom/.";
+import { IWebRTCUser } from "@Util/type";
+import { userChatRoomInfo } from "@Recoil/ChatData";
+import ClientSocket from "../../../../Socket";
+import { useVideoSocketEvent } from "./ChatRoomBasic.hook";
+
+export const ChatRoomBasic = () => {
+  const { chatRoomId, id } = useRecoilValue(userChatRoomInfo);
+  const [users, setUsers] = useState<IWebRTCUser[]>([]);
+  const { localStreamRef, localVideoRef } = useVideoSocketEvent({ id, chatRoomId, userState: { users, setUsers } });
+  const muteMicCam = () => localStreamRef.current?.getAudioTracks().forEach((track: MediaStreamTrack) => (track.enabled = !track.enabled));
+
+  useEffect(() => {
+    ClientSocket.sendPC.getStats();
+  }, [users]);
+
+  return (
+    <div>
+      <div css={containerStyle}>
+        <video css={videoStyle} muted ref={localVideoRef} autoPlay />
+        {users?.map((user) => (
+          <Video stream={user.stream} key={user.id} />
+        ))}
+      </div>
+      <div css={buttonContainerStyle}>
+        <Button size="Small" onClick={muteMicCam}>
+          cam On/Off
+        </Button>
+        <Button size="Small" onClick={muteMicCam}>
+          mic On/Off
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const videoStyle = css`
+  width: 240px;
+  height: 240px;
+  border: 1px solid #000000;
+`;
+
+const containerStyle = css`
+  margin: 0 auto;
+  width: 520px;
+  height: 520px;
+  overflow-y: scroll;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 30px;
+  padding-top: 0;
+  position: relative;
+`;
+
+const buttonContainerStyle = css`
+  display: flex;
+  margin-left: 1vw;
+  position: absolute;
+  top: 83.5%;
+`;
diff --git a/client/src/Component/Molecules/Chat/ChatRoomFooter.tsx b/client/src/Component/Molecules/Chat/ChatRoomFooter.tsx
deleted file mode 100644
index 2d3bc8b9..00000000
--- a/client/src/Component/Molecules/Chat/ChatRoomFooter.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { css } from "@emotion/react";
-import { Button } from "@Atom/Button";
-import useDropDownCloseEvent from "@Hook/useDropDownCloseEvent";
-import { LargeModal } from "@Core/.";
-import { gameDatas, getGameDatas } from "@Util/constant";
-import { LinkButton } from "@Core/LinkButton";
-import { VideoSupport } from "./VideoSupport";
-
-const oneGame = "/Asset/게임/0.jpeg";
-const twoGame = "/Asset/게임/1.gif";
-const threeGame = "/Asset/게임/2.png";
-const gameImages = [oneGame, twoGame, threeGame];
-
-const footerStyle = css`
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 0 50px;
-  position: absolute;
-  bottom: 10%;
-  right: 5%;
-`;
-
-const gameTitleStype = ({ color }: { color: string }) => css`
-  text-align: center;
-  font-family: Georgia, Serif;
-  margin-bottom: 10px;
-  font-size: 22px;
-  color: ${color};
-`;
-
-export const ChatRoomFooter = () => {
-  const [openGame, setOpenGame] = useState<boolean>(false);
-  const [index, setIndex] = useState<number>(0);
-  const [datas, setDatas] = useState<any>(null);
-
-  const searchParams = new URLSearchParams(useLocation().search);
-  const chatRoomID = Number(searchParams.get("chatRoomId"));
-
-  const gameURL = `/ChatRoom/Game?index=${index + 1}&chatRoomId=${chatRoomID}`;
-
-  const handleGameButtonClick = () => {
-    setOpenGame(true);
-  };
-
-  const handleCloseButtonClick = () => {
-    setOpenGame(false);
-    setIndex(0);
-  };
-  const inCreaseIndex = (): void => {
-    if (index === gameDatas.length - 1) return;
-    setIndex((prev) => prev + 1);
-  };
-
-  const decreaseIndex = (): void => {
-    if (index === 0) return;
-    setIndex((prev) => prev - 1);
-  };
-
-  useEffect(() => {
-    setDatas(getGameDatas(index));
-  }, [index]);
-
-  const modalGameRef = useRef<HTMLDivElement>(null);
-  useDropDownCloseEvent(modalGameRef, () => setOpenGame(false));
-
-  return (
-    <div css={footerStyle}>
-      <VideoSupport type="basic" />
-      <div style={{ display: "flex" }}>
-        <div ref={modalGameRef}>
-          <Button size="Small" onClick={handleGameButtonClick}>
-            게임하기
-          </Button>
-          {openGame && (
-            <LargeModal index={index} length={datas?.length ?? 0} inCreaseIndex={inCreaseIndex} decreaseIndex={decreaseIndex}>
-              <div>
-                <div css={gameTitleStype({ color: datas.color })}>{datas.title}</div>
-                <img alt="game" src={gameImages[index]} width="200px" height="200px" />
-              </div>
-              <LinkButton url={gameURL} type="Large" onClick={handleCloseButtonClick} content="게임 시작하기" />
-            </LargeModal>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/client/src/Component/Molecules/Chat/ChatRoomGame.tsx b/client/src/Component/Molecules/Chat/ChatRoomGame.tsx
deleted file mode 100644
index d25fdc62..00000000
--- a/client/src/Component/Molecules/Chat/ChatRoomGame.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable consistent-return */
-
-import React from "react";
-import { css } from "@emotion/react";
-import { useLocation } from "react-router";
-import { gameDatas } from "../../../Util/constant";
-
-const containerStyle = css`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 20vw;
-  width: 50vw;
-  height: 70vh;
-  border: 1px solid #000000;
-  /* margin-top: 10%; */
-`;
-
-const ButtonContainerStyle = css`
-  margin-top: 5%;
-  display: flex;
-  justify-content: flex-end;
-  margin-right: 10%;
-`;
-
-export const ChatRoomGame = () => {
-  const searchParams = new URLSearchParams(useLocation().search);
-  const index = Number(searchParams.get("index"));
-
-  return (
-    <>
-      <div css={ButtonContainerStyle} />
-      <div css={containerStyle}>
-        <iframe title={gameDatas[index - 1].title} src={gameDatas[index - 1].src} width="100%" height="100%" />
-      </div>
-    </>
-  );
-};
diff --git a/client/src/Component/Molecules/Chat/VideoSupport.tsx b/client/src/Component/Molecules/Chat/VideoSupport.tsx
index d21bce67..1a3a6086 100644
--- a/client/src/Component/Molecules/Chat/VideoSupport.tsx
+++ b/client/src/Component/Molecules/Chat/VideoSupport.tsx
@@ -1,14 +1,6 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-const flexStyle = css`
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  width: 250px;
-  height: 100px;
-`;
-
 const supportStyle = css`
   width: 100px;
   height: 100px;
@@ -16,16 +8,17 @@ const supportStyle = css`
   border: 1px solid #000000;
 `;
 
-const containerStyle = (props: { type: string }) => css`
-  width: 200px;
-  height: 250px;
-  ${props.type === "basic" && flexStyle}
+const containerStyle = css`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 250px;
+  height: 100px;
 `;
 
-export const VideoSupport = (props: { type: string }) => {
-  const { type } = props;
+export const VideoSupport = () => {
   return (
-    <div css={containerStyle({ type })}>
+    <div css={containerStyle}>
       <div css={supportStyle} />
       <div css={supportStyle} />
     </div>
diff --git a/client/src/Component/Molecules/index.tsx b/client/src/Component/Molecules/index.tsx
index f896055f..772ce563 100644
--- a/client/src/Component/Molecules/index.tsx
+++ b/client/src/Component/Molecules/index.tsx
@@ -3,11 +3,9 @@ export * from "./MainPage/MainHeaderCenter";
 export * from "./MainPage/MainBodyLeftButtonContainer";
 export * from "./MainPage/MainBodyRight.ButtonContainer";
 
-export * from "./Chat/ChatInput";
+export * from "./Chat/ChatInput/ChatInput";
 export * from "./Chat/ChatProfileInfoContainer";
-export * from "./Chat/ChatRoomBasic";
-export * from "./Chat/ChatRoomFooter";
-export * from "./Chat/ChatRoomGame";
+export * from "./Chat/ChatRoomBasic/ChatRoomBasic";
 export * from "./Chat/Chats";
 export * from "./Chat/NotReadNum";
 
diff --git a/client/src/Component/Organism/Chat/ChatListDetail.tsx b/client/src/Component/Organism/Chat/ChatListDetail.tsx
index e0e32f24..33427091 100644
--- a/client/src/Component/Organism/Chat/ChatListDetail.tsx
+++ b/client/src/Component/Organism/Chat/ChatListDetail.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useRecoilValue } from "recoil";
-import { ChatInput } from "@Molecules/Chat/ChatInput";
+import { ChatInput } from "@Molecules/Chat/ChatInput/ChatInput";
 import { LinkButton } from "@Core/LinkButton";
 import { chatTarget } from "@Recoil/Atom";
 import { ChatDetail } from "./ChatDetail/ChatDetail";
diff --git a/client/src/Component/Page/ChatListPage/ChatRoom.tsx b/client/src/Component/Page/ChatListPage/ChatRoom.tsx
index bddd6f9e..dd71ab21 100644
--- a/client/src/Component/Page/ChatListPage/ChatRoom.tsx
+++ b/client/src/Component/Page/ChatListPage/ChatRoom.tsx
@@ -2,11 +2,10 @@ import React, { useEffect } from "react";
 import { css } from "@emotion/react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { useLocation } from "react-router-dom";
-import { ChatRoomLeft } from "../../Template/ChatRoomLeft/ChatRoomLeft";
-import { ChatRoomRight } from "../../Template/ChatRoomRight/ChatRoomRight";
-import { checkLogin, passToLoginPage } from "../../../Util";
-import { chatTarget } from "../../../Recoil/Atom";
 import { chatsState } from "@Recoil/ChatData";
+import { ChatRoomLeft } from "@Template/ChatRoomLeft/ChatRoomLeft";
+import { ChatRoomRight } from "@Template/ChatRoomRight/ChatRoomRight";
+import { chatTarget } from "@Recoil/Atom";
 
 const ChatRoomStyle = css`
   width: 400px;
@@ -15,8 +14,6 @@ const ChatRoomStyle = css`
 `;
 
 export const ChatRoom: React.FC = () => {
-  if (!checkLogin()) passToLoginPage();
-
   const setChatInfo = useSetRecoilState(chatTarget);
   const chatDatas = useRecoilValue(chatsState);
   const searchParams = new URLSearchParams(useLocation().search);
diff --git a/client/src/Component/Page/Page/UserPage.tsx b/client/src/Component/Page/Page/UserPage.tsx
index d57a205d..2b2df215 100644
--- a/client/src/Component/Page/Page/UserPage.tsx
+++ b/client/src/Component/Page/Page/UserPage.tsx
@@ -1,5 +1,5 @@
 import { Routes, Route, Navigate } from "react-router-dom";
-import { CowDogPage, TeamSettingPage, MyPage, ChatListPage, RequestPage } from "..";
+import { CowDogPage, TeamSettingPage, MyPage, ChatListPage, RequestPage, ChatRoom } from "..";
 
 export const UserPage = () => {
   return (
@@ -9,7 +9,7 @@ export const UserPage = () => {
       <Route path="/mypage/*" element={<MyPage />} />
       <Route path="/chatList" element={<ChatListPage />} />
       <Route path="/Request" element={<RequestPage />} />
-      {/* <Route path="/ChatRoom" element={<ChatRoom />} /> */}
+      <Route path="/ChatRoom" element={<ChatRoom />} />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );
diff --git a/client/src/Component/Template/ChatRoomLeft/ChatRoomLeft.tsx b/client/src/Component/Template/ChatRoomLeft/ChatRoomLeft.tsx
index f85a7d72..0f5d89bb 100644
--- a/client/src/Component/Template/ChatRoomLeft/ChatRoomLeft.tsx
+++ b/client/src/Component/Template/ChatRoomLeft/ChatRoomLeft.tsx
@@ -1,4 +1,4 @@
-import { ChatInput } from "@Molecules/Chat/ChatInput";
+import { ChatInput } from "@Molecules/Chat/ChatInput/ChatInput";
 import { ChatDetail } from "@Organism/Chat/ChatDetail/ChatDetail";
 
 export const ChatRoomLeft = () => {
diff --git a/client/src/Component/Template/ChatRoomRight/ChatRoomRight.hook.tsx b/client/src/Component/Template/ChatRoomRight/ChatRoomRight.hook.tsx
index b026b1a3..50668532 100644
--- a/client/src/Component/Template/ChatRoomRight/ChatRoomRight.hook.tsx
+++ b/client/src/Component/Template/ChatRoomRight/ChatRoomRight.hook.tsx
@@ -1,17 +1,12 @@
-import { useLocation, useNavigate } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import { chatTarget } from "@Recoil/Atom";
+import { useMovePage } from "@Hook/useMovePage";
+import { useGetParams } from "@Hook/useGetParams";
 
 export const useHandleCloseRoom = () => {
   const { chatRoomId } = useRecoilValue(chatTarget);
-  const searchParams = new URLSearchParams(useLocation().search);
-  const navigate = useNavigate();
-
-  const handleCloseRoomClick = () => {
-    const isGameIn = Number(searchParams.get("index"));
-    if (!isGameIn) navigate("/chatList");
-    else navigate(`/ChatRoom?chatRoomId=${chatRoomId}`);
-  };
-
+  const checkIndex = useGetParams("index");
+  const [goBack, goChatList] = useMovePage([`/ChatRoom?chatRoomId=${chatRoomId}`, "/chatList"]);
+  const handleCloseRoomClick = () => (checkIndex ? goBack() : goChatList());
   return handleCloseRoomClick;
 };
diff --git a/client/src/Component/Template/ChatRoomRight/ChatRoomRight.tsx b/client/src/Component/Template/ChatRoomRight/ChatRoomRight.tsx
index 03f8bd0a..806beb5f 100644
--- a/client/src/Component/Template/ChatRoomRight/ChatRoomRight.tsx
+++ b/client/src/Component/Template/ChatRoomRight/ChatRoomRight.tsx
@@ -1,25 +1,11 @@
-/* eslint-disable no-nested-ternary */
-
-import { useMemo } from "react";
-import { Route, Routes } from "react-router-dom";
 import { css } from "@emotion/react";
 import { Button } from "@Atom/.";
-import { checkGameInUrl, checkGatherInUrl } from "@Util/.";
-import { ChatRoomBasic } from "@Molecules/Chat/ChatRoomBasic";
-import { ChatRoomFooter } from "@Molecules/Chat/ChatRoomFooter";
-import { ChatRoomGame } from "@Molecules/Chat/ChatRoomGame";
+import { ChatRoomBasic } from "@Molecules/Chat/ChatRoomBasic/ChatRoomBasic";
+import { VideoSupport } from "@Molecules/Chat/VideoSupport";
 import { useHandleCloseRoom } from "./ChatRoomRight.hook";
 
-const headerStyle = css`
-  display: flex;
-  justify-content: end;
-  padding: 30px;
-`;
-
 export const ChatRoomRight = () => {
-  const roomType = useMemo(() => (checkGameInUrl() ? "Game" : checkGatherInUrl() ? "Gather" : "Basic"), []);
   const handleCloseRoomClick = useHandleCloseRoom();
-
   return (
     <div style={{ width: "100%" }}>
       <div css={headerStyle}>
@@ -27,11 +13,25 @@ export const ChatRoomRight = () => {
           나가기
         </Button>
       </div>
-      <ChatRoomBasic type={roomType} />
-      <Routes>
-        <Route path="/ChatRoom/Game" element={<ChatRoomGame />} />
-      </Routes>
-      {roomType === "Basic" && <ChatRoomFooter />}
+      <ChatRoomBasic />
+      <div css={footerStyle}>
+        <VideoSupport />
+      </div>
     </div>
   );
 };
+
+const headerStyle = css`
+  display: flex;
+  justify-content: end;
+  padding: 30px;
+`;
+const footerStyle = css`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 50px;
+  position: absolute;
+  bottom: 10%;
+  right: 5%;
+`;
diff --git a/client/src/Recoil/ChatData.tsx b/client/src/Recoil/ChatData.tsx
index c7679a4c..6c72675f 100644
--- a/client/src/Recoil/ChatData.tsx
+++ b/client/src/Recoil/ChatData.tsx
@@ -2,6 +2,8 @@ import { atom, selector } from "recoil";
 import { getFetch } from "../Util/data";
 import { ChatInfoType, joinChatType } from "../Util/type";
 import { CHAT_INFO_URL, JOIN_CHAT_URL } from "../Util/URL";
+import { chatTarget } from "./Atom";
+import { userState } from "./UserData";
 
 export const joinChatRoomState = atom<joinChatType[]>({
   key: "joinChatRoomState",
@@ -26,3 +28,12 @@ export const chatSelector = selector<ChatInfoType[]>({
     return getFetch({ url: CHAT_INFO_URL, query: "" });
   },
 });
+
+export const userChatRoomInfo = selector({
+  key: "userChatRoomInfo",
+  get: ({ get }) => {
+    const { chatRoomId } = get(chatTarget);
+    const { id } = get(userState);
+    return { chatRoomId, id };
+  },
+});
diff --git a/client/src/Socket/util.ts b/client/src/Socket/util.ts
index 5394c606..e57f0406 100644
--- a/client/src/Socket/util.ts
+++ b/client/src/Socket/util.ts
@@ -6,12 +6,14 @@ import { createReceivePC } from "./webRTC";
 
 // const socket = ClientSocket.instance.socket as Socket;
 
-export const userEnterEvent = (data: { id: string }, chatRoomId: string, socket: Socket, setUsers: Function) => {
+export const userEnterEvent = (data: { id: string }, chatRoomId: string, socket: Socket | undefined, setUsers: Function) => {
+  if (!socket) return;
   if (data.id === ClientSocket?.instance?.socket?.id) return;
   createReceivePC(data.id, socket, chatRoomId, setUsers);
 };
 
-export const allUsersEvent = (data: { users: Array<{ id: string }> }, chatRoomId: string, socket: Socket, setUsers: Function) => {
+export const allUsersEvent = (data: { users: Array<{ id: string }> }, chatRoomId: string, socket: Socket | undefined, setUsers: Function) => {
+  if (!socket) return;
   data.users.forEach((user) => createReceivePC(user.id, socket, chatRoomId, setUsers));
 };
 
diff --git a/client/src/util/constant.ts b/client/src/util/constant.ts
index 0808de22..0d9091ed 100644
--- a/client/src/util/constant.ts
+++ b/client/src/util/constant.ts
@@ -21,12 +21,3 @@ export const MENU_LIST: menuListType = {
     { link: "", name: "로그아웃" },
   ],
 };
-
-export const gameDatas = [
-  { title: "라이어게임 Web17", src: "https://liarking.kro.kr", color: "#000000" },
-  { title: "부트리스 Web24", src: "https://boostris.com/login", color: "#154089" },
-  { title: "부덕사운드 Web2", src: "https://booducksound.kro.kr", color: "#c3e3f0" },
-];
-export function getGameDatas(index: number) {
-  return gameDatas[index];
-}
diff --git a/client/src/util/index.ts b/client/src/util/index.ts
index 8753f147..f97dc1a3 100644
--- a/client/src/util/index.ts
+++ b/client/src/util/index.ts
@@ -36,14 +36,6 @@ export const checkLogin = () => {
   return isLogin === "true";
 };
 
-export const checkGameInUrl = () => {
-  return window.location.href.includes("Game");
-};
-
-export const checkGatherInUrl = () => {
-  return window.location.href.includes("Gather");
-};
-
 export const isNumber = (n: string) => /^-?[\d.]+(?:e-?\d+)?$/.test(n);
 
 export const fileReader = ({ data, handler }: { data: Blob; handler: Function }) => {