From ced009a0bfaa83a28e2b8daeaa49f1e59ee0c9c3 Mon Sep 17 00:00:00 2001
From: yewon830 <wonderwall00@naver.com>
Date: Wed, 21 Aug 2024 21:55:30 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat=20:=20openvidu=20browser=20=ED=8A=9C?=
 =?UTF-8?q?=ED=86=A0=EB=A6=AC=EC=96=BC=20=EC=BD=94=EB=93=9C=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81,=20=ED=83=80=EC=9E=85=EC=8A=A4=ED=81=AC=EB=A6=BD?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B0=8F=20=ED=95=A8=EC=88=98=ED=98=95=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B3=80=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/package.json                            |   1 +
 front/server/signalingServer.ts               |  75 ----
 front/src/App.css                             |   3 +
 front/src/App.tsx                             |   1 +
 front/src/components/VideoCall/OvVideo.tsx    |  22 +
 front/src/components/VideoCall/UserVideo.css  |  18 +
 .../VideoCall/UserVideoComponents.tsx         |  30 ++
 .../components/VideoCall/VideoCallBoxList.tsx | 384 +++++++++++++-----
 .../VideoCall/registerServiceWorker.js        | 117 ++++++
 front/src/components/VideoCall/video.css      | 231 +++++++++++
 front/yarn.lock                               |  72 +++-
 11 files changed, 780 insertions(+), 174 deletions(-)
 delete mode 100644 front/server/signalingServer.ts
 create mode 100644 front/src/components/VideoCall/OvVideo.tsx
 create mode 100644 front/src/components/VideoCall/UserVideo.css
 create mode 100644 front/src/components/VideoCall/UserVideoComponents.tsx
 create mode 100644 front/src/components/VideoCall/registerServiceWorker.js
 create mode 100644 front/src/components/VideoCall/video.css

diff --git a/front/package.json b/front/package.json
index 30c588e7..72f19126 100644
--- a/front/package.json
+++ b/front/package.json
@@ -18,6 +18,7 @@
     "axios": "^1.7.2",
     "express": "^4.19.2",
     "jwt-decode": "^4.0.0",
+    "openvidu-browser": "^2.30.1",
     "phaser": "^3.80.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/front/server/signalingServer.ts b/front/server/signalingServer.ts
deleted file mode 100644
index 91827928..00000000
--- a/front/server/signalingServer.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import express from 'express';
-import http from 'http';
-import { Server as socketIo } from 'socket.io';
-
-interface Room{
-  users: string[]
-}
-
-
-const app = express(); // express 애플리케이션 인스턴스 생성
-const server = http.createServer(app); // hTTP 서버 생성, 이 서버가 Express 애플리케이션 처리
-
-// socket.io 서버 인스턴스 
-const io = new socketIo(server, {
-  cors: {
-    origin: true, // FIXME :보안을 위해 CORS 설정 구체화 해줘야 함
-  },
-});
-
-const totalRooms :{[key: string] : Room} = {}; // {방의 이름 : [user 소켓 id]}의 객체
-
-// 클라이언트가 socket.io 서버에 연결 되어있을 때
-io.on('connection', (socket: any) => {
-    console.log(`Client connected. socket: ${socket.id}`);
-  
-    // 채팅을 위한 방에 접속
-    socket.on('join', (data: { room: string }) => {    
-      if(!data?.room) return;
-      socket.join(data.room);
-      // 방이 없으면 새로운 방을 만든다.
-      if(!totalRooms[data.room]){
-        totalRooms[data.room] = {users: []};
-      }
-      //방에 사용자를 추가
-      totalRooms[data.room].users.push(socket.id);
-      socket.room = data.room;
-
-      console.log(`Join room ${data.room}. Socket ${socket.id}`);
-    });
-  
-    // peer가 제안 :: SDP 방식(제안-응답)
-    socket.on('offer', (data: { sdp: string; room: string }) => {
-      socket.to(data.room).emit('offer', { sdp: data.sdp, sender: socket.id });
-    });
-
-    // peer가 응답
-    socket.on('answer', (data: { sdp: string; room: string }) => {
-      socket.to(data.room).emit('answer', { sdp: data.sdp, sender: socket.id });
-    });
-  
-    // peer가 자신이 데이터를 보낼 수 있는 네트워크 경로를 찾기 위해 ICE 프로세스 수행
-    socket.on('candidate', (data: { candidate: string; room: string }) => {
-      socket.to(data.room).emit('candidate', { candidate: data.candidate, sender: socket.id });
-    });
-  
-    // 연결 종료
-    socket.on('disconnect', () => {
-      // 방에서 사용자 제거
-      if(socket.room && totalRooms[socket.room]){
-        totalRooms[socket.room].users = totalRooms[socket.room].users.filter(
-          (id) => id !==socket.id
-        )
-        //사용자가 한명도 없으면 방 없앰
-        if(totalRooms[socket.room].users.length ===0){
-          delete totalRooms[socket.room];
-        }
-      }
-      console.log('Client disconnected');
-    });
-  });
-
-// 포트 실행
-server.listen(5001, () => {  // 포트 번호
-  console.log('Listening on port 5001');
-});
\ No newline at end of file
diff --git a/front/src/App.css b/front/src/App.css
index e69de29b..0e6befce 100644
--- a/front/src/App.css
+++ b/front/src/App.css
@@ -0,0 +1,3 @@
+.stream-container {
+	padding: 0;
+}
\ No newline at end of file
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 099d9b0a..777ec312 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -7,6 +7,7 @@ import { ServerMap } from "./components/Phaser/ServerMap";
 import Home from "./pages/Home";
 import Join from "./pages/Join";
 import Login from "./pages/Login";
+import VideoCallBoxList from "./components/VideoCall/VideoCallBoxList";
 
 function App() {
   return (
diff --git a/front/src/components/VideoCall/OvVideo.tsx b/front/src/components/VideoCall/OvVideo.tsx
new file mode 100644
index 00000000..3fd9caaa
--- /dev/null
+++ b/front/src/components/VideoCall/OvVideo.tsx
@@ -0,0 +1,22 @@
+import { StreamManager } from 'openvidu-browser';
+import React, { useRef, useEffect } from 'react';
+
+
+interface OpenViduVideoComponentProps {
+    streamManager: StreamManager | undefined;
+}
+
+// 최종적으로 미디어 스트림을 표시하는 최종 HTMl 래핑.
+const OpenViduVideoComponent: React.FC<OpenViduVideoComponentProps> = ({ streamManager }) => {
+    const videoRef = useRef<HTMLVideoElement>(null); // videoRef의 타입을 HTMLVideoElement로 지정
+
+    useEffect(() => {
+        if (streamManager && videoRef.current) {
+            streamManager.addVideoElement(videoRef.current);
+        }
+    }, [streamManager]);
+
+    return <video autoPlay ref={videoRef} />;
+}
+
+export default OpenViduVideoComponent;
\ No newline at end of file
diff --git a/front/src/components/VideoCall/UserVideo.css b/front/src/components/VideoCall/UserVideo.css
new file mode 100644
index 00000000..f3ad692f
--- /dev/null
+++ b/front/src/components/VideoCall/UserVideo.css
@@ -0,0 +1,18 @@
+video {
+    width: 100%;
+    height: auto;
+    float: left;
+    cursor: pointer;
+}
+.streamcomponent div {
+    position: absolute;
+    background: #f8f8f8;
+    padding-left: 5px;
+    padding-right: 5px;
+    color: #777777;
+    font-weight: bold;
+    border-bottom-right-radius: 4px;
+}
+p{
+    margin: 0;
+}
\ No newline at end of file
diff --git a/front/src/components/VideoCall/UserVideoComponents.tsx b/front/src/components/VideoCall/UserVideoComponents.tsx
new file mode 100644
index 00000000..0aecb25f
--- /dev/null
+++ b/front/src/components/VideoCall/UserVideoComponents.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import OpenViduVideoComponent from './OvVideo';
+import './UserVideo.css';
+import { StreamManager } from 'openvidu-browser';
+
+
+interface UserVideoComponentProps {
+    streamManager: StreamManager
+}
+// 모든 사용자 비디오 표시, 클릭이벤트 처리
+const UserVideoComponent: React.FC<UserVideoComponentProps> = ({ streamManager }) => {
+    const getNicknameTag = (): string => {
+        // Gets the nickName of the user
+        return JSON.parse(streamManager!.stream.connection.data).clientData;
+    }
+
+    return (
+        <div>
+            {streamManager !== undefined ? (
+                <div className="streamcomponent">
+                    {/* OpenViduVideoComponent : 사용자 비디오 */}
+                    <OpenViduVideoComponent streamManager={streamManager} />
+                    <div><p>{getNicknameTag()}</p></div>
+                </div>
+            ) : null}
+        </div>
+    );
+}
+
+export default UserVideoComponent;
\ No newline at end of file
diff --git a/front/src/components/VideoCall/VideoCallBoxList.tsx b/front/src/components/VideoCall/VideoCallBoxList.tsx
index e7176ecf..20d99773 100644
--- a/front/src/components/VideoCall/VideoCallBoxList.tsx
+++ b/front/src/components/VideoCall/VideoCallBoxList.tsx
@@ -1,104 +1,292 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import VideoCallBoxListItem from './VideoCallBoxListItem'
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-import { Box } from '@mui/material';
+import { Device, OpenVidu, Publisher, Session, StreamManager, } from 'openvidu-browser';
+
 import axios from 'axios';
-import { useParams } from 'react-router';
-import { ServerMember } from '../../types/server';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import './video.css';
+import UserVideoComponent from './UserVideoComponents';
+
+// 서버 주소 (현재는 튜토리얼 서버)
+const APPLICATION_SERVER_URL = "http://localhost:5000/";
 
+
+// 화상회의 주요 구성 요소 컴포넌트 : 화상회의 참여 및 관리 기능
 const VideoCallBoxList = () => {
-  const [curVideoCallBoxPage, setCurVideoCallBoxPage] = useState(0);
-  const [slicedMemberList, setSlicedMemberList] = useState<ServerMember[]>([]); // 페이징 처리 된 멤버 리스트
-  const [serverMemberList, setServerMemberList] = useState([]);
-  // const serverId = useParams();
-
-  // FIXME : 해당 API axios 인터셉터 개발되면 수정 필요
-  const accessToken = localStorage.getItem('dicoTown_AccessToken');
-  const getServerMember = useCallback(()=>{
-    axios.get(`http://kpring.duckdns.org/server/api/v1/server/66795ea1981fc767b76ca9d0`,{
-      headers: {'Authorization': `${accessToken}`}
-    })
-    .then(response=>{
-      setServerMemberList(response.data.data.users);
-    })
-    .catch(err=>console.log(err))
-  },[accessToken])
-
-
-  // 마지막 페이지 수
-  const lastPage = useMemo(()=>{
-    const memberCnt = serverMemberList.length;
-    let lastPage = 0;
-    if(memberCnt%4 === 0){
-      lastPage = Math.floor(memberCnt/4) - 1
-    }else{
-      lastPage = Math.floor(memberCnt/4)
-    }
-    return lastPage
-  },[serverMemberList])
-
-  // 화면 공유 박스 이전 페이지 이동 핸들링 함수
-  const handleBoxPagePrev = useCallback(()=>{
-    let curPage = curVideoCallBoxPage;
-    if(curPage!==0){
-      setCurVideoCallBoxPage(curPage - 1)
-    }
-  },[curVideoCallBoxPage])
-
-  // 화면 공유 박스 다음 페이지 이동 핸들링 함수
-  const handleBoxPageNext = useCallback(()=>{
-    if(curVideoCallBoxPage!==lastPage){
-      let curPage = curVideoCallBoxPage;
-      setCurVideoCallBoxPage(curPage + 1)
-    }
-  },[curVideoCallBoxPage,lastPage])
-
-
-  // 화면공유 멤버 리스트 슬라이싱 함수 
-  const sliceMemberList = useCallback(()=>{
-    const newMemberList = serverMemberList.slice(curVideoCallBoxPage*4, (curVideoCallBoxPage*4)+4);
-    setSlicedMemberList(newMemberList)
-  },[curVideoCallBoxPage, serverMemberList])
-
-  // 무한루프 방지를 위해 useEffect 분리
-  useEffect(()=>{
-    getServerMember();
-  },[getServerMember])
-
-  useEffect(() => {
-    sliceMemberList();
-  }, [sliceMemberList]);
+    const [mySessionId, setMySessionId] = useState('SessionA') //세션 아이디
+    const [myUserName, setMyUserName] = useState(`Participant${Math.floor(Math.random() * 100)}`) //참가자 닉네임
+    const [session, setSession] = useState<Session | ''>('');
+    const [mainStreamManager, setMainStreamManager] = useState<Publisher | null >(null);
+    const [publisher, setPublisher] = useState<Publisher | null>(null); //로컬 웹캠 스트림
+    const [subscribers, setSubscribers] = useState<StreamManager[]>([]); // 화상 통화에서 다른 사용자 활성 스트림 저장
+    const [currentVideoDevice, setCurrentVideoDevice] = useState<Device | null>(null);
+
+    const OV = useRef(new OpenVidu());
+
+    const handleChangeSessionId = useCallback((e : React.ChangeEvent<HTMLInputElement>) => {
+        setMySessionId(e.target.value);
+    }, []);
+
+    const handleChangeUserName = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setMyUserName(e.target.value);
+    }, []);
+
+    const handleMainVideoStream = useCallback((stream: StreamManager) => {
+      const publisher = stream as Publisher; // 타입 변환
   
-  return (
-    <Box sx={{width: '880px', height:'160px', display:'flex', alignItems:'center'}}>
-      <ArrowBackIosIcon 
-      sx={{
-        color: `${curVideoCallBoxPage === 0 ? 'gray': 'black'}`,
-        cursor: 'pointer'
-      }}
-      onClick={handleBoxPagePrev} />
-      <Box   sx={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-        height: '100%',
-        width: '100%'
-      }}>
-        {
-            slicedMemberList.map((member,index)=>(
-                <VideoCallBoxListItem key={index} member={member}/>
-            ))
+      if (mainStreamManager !== publisher) {
+          setMainStreamManager(publisher);
+      }
+  }, [mainStreamManager]);
+
+    const joinSession = useCallback(() => {
+        const mySession = OV.current.initSession();
+
+        mySession.on('streamCreated', (event) => {
+            const subscriber = mySession.subscribe(event.stream, undefined);
+            setSubscribers((subscribers) => [...subscribers, subscriber]);
+        });
+
+        mySession.on('streamDestroyed', (event) => {
+            deleteSubscriber(event.stream.streamManager);
+        });
+
+        mySession.on('exception', (exception) => {
+            console.warn(exception);
+        });
+
+        setSession(mySession);
+    }, []);
+
+    useEffect(() => {
+        if (session) {
+            // Get a token from the OpenVidu deployment
+            getToken().then(async (token) => {
+                try {
+                    await session.connect(token, { clientData: myUserName });
+
+                    let publisher = await OV.current.initPublisherAsync(undefined, {
+                        audioSource: undefined,
+                        videoSource: undefined,
+                        publishAudio: true,
+                        publishVideo: true,
+                        resolution: '640x480',
+                        frameRate: 30,
+                        insertMode: 'APPEND',
+                        mirror: false,
+                    });
+
+                    session.publish(publisher);
+
+                    const devices = await OV.current.getDevices();
+                    const videoDevices = devices.filter(device => device.kind === 'videoinput');
+                    const currentVideoDeviceId = publisher.stream.getMediaStream().getVideoTracks()[0].getSettings().deviceId;
+                    const currentVideoDevice = videoDevices.find(device => device.deviceId === currentVideoDeviceId);
+
+                    setMainStreamManager(publisher);
+                    setPublisher(publisher);
+                    if (currentVideoDevice) {
+                      setCurrentVideoDevice(currentVideoDevice);
+                  } else {
+                      setCurrentVideoDevice(null); // 필요에 따라 null로 설정
+                  }
+                } catch (error) {
+                  if (error instanceof Error) {
+                    console.log(error.message)
+                  } else {
+                    console.log(String(error))
+                  }
+                }
+            });
         }
-      </Box>
-      <ArrowForwardIosIcon 
-      sx={{
-        color: `${curVideoCallBoxPage === 0 ? 'gray': 'black'}`,
-        cursor: 'pointer'
-      }}
-      onClick={handleBoxPageNext}
-      />
-    </Box>
-  )
-}
+    }, [session, myUserName]);
+
+
+    const leaveSession = useCallback(() => {
+        // Leave the session
+        if (session) {
+            session.disconnect();
+        }
+    
+        // Reset all states and OpenVidu object
+        OV.current = new OpenVidu();
+        setSession('');
+        setSubscribers([]);
+        setMySessionId('SessionA');
+        setMyUserName('Participant' + Math.floor(Math.random() * 100));
+        setMainStreamManager(null);
+        setPublisher(null);
+    }, [session]);
+
+    const switchCamera = useCallback(async () => {
+        try {
+            const devices = await OV.current.getDevices();
+            const videoDevices = devices.filter(device => device.kind === 'videoinput');
+    
+            if (videoDevices && videoDevices.length > 1 && currentVideoDevice) {
+                const newVideoDevice = videoDevices.filter(device => device.deviceId !== currentVideoDevice.deviceId);
+    
+                if (newVideoDevice.length > 0) {
+                    const newPublisher = OV.current.initPublisher(undefined, {
+                        videoSource: newVideoDevice[0].deviceId,
+                        publishAudio: true,
+                        publishVideo: true,
+                        mirror: true,
+                    });
+    
+                    if (session) {
+                      if (mainStreamManager){
+                        await session.unpublish(mainStreamManager);
+                      }
+                        
+                        await session.publish(newPublisher);
+                        setCurrentVideoDevice(newVideoDevice[0]);
+                        setMainStreamManager(newPublisher);
+                        setPublisher(newPublisher);
+                    }
+                }
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    }, [currentVideoDevice, session, mainStreamManager]);
+
+    const deleteSubscriber = useCallback((streamManager : StreamManager) => {
+        setSubscribers((prevSubscribers) => {
+            const index = prevSubscribers.indexOf((streamManager));
+            if (index > -1) {
+                const newSubscribers = [...prevSubscribers];
+                newSubscribers.splice(index, 1);
+                return newSubscribers;
+            } else {
+                return prevSubscribers;
+            }
+        });
+    }, []);
 
-export default VideoCallBoxList
\ No newline at end of file
+    useEffect(() => {
+        const handleBeforeUnload = () => {
+            leaveSession();
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    }, [leaveSession]);
+
+    /**
+     * --------------------------------------------
+     * GETTING A TOKEN FROM YOUR APPLICATION SERVER
+     * --------------------------------------------
+     * The methods below request the creation of a Session and a Token to
+     * your application server. This keeps your OpenVidu deployment secure.
+     *
+     * In this sample code, there is no user control at all. Anybody could
+     * access your application server endpoints! In a real production
+     * environment, your application server must identify the user to allow
+     * access to the endpoints.
+     *
+     * Visit https://docs.openvidu.io/en/stable/application-server to learn
+     * more about the integration of OpenVidu in your application server.
+     */
+    const getToken = useCallback(async () => {
+        return createSession(mySessionId).then(sessionId =>
+            createToken(sessionId),
+        );
+    }, [mySessionId]);
+
+    const createSession = async (sessionId : string) => {
+        const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions', { customSessionId: sessionId }, {
+            headers: { 'Content-Type': 'application/json', },
+        });
+        return response.data; // The sessionId
+    };
+
+    const createToken = async (sessionId : string) => {
+        const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', {}, {
+            headers: { 'Content-Type': 'application/json', },
+        });
+        return response.data; // The token
+    };
+    return (
+        <div className="container">
+            {session === '' ? (
+                <div id="join">
+                    <div id="join-dialog" className="jumbotron vertical-center">
+                        <h1> Join a video session </h1>
+                        <form className="form-group" onSubmit={joinSession}>
+                            <p>
+                                <label>Participant: </label>
+                                <input
+                                    className="form-control"
+                                    type="text"
+                                    id="userName"
+                                    value={myUserName}
+                                    onChange={handleChangeUserName}
+                                    required
+                                />
+                            </p>
+                            <p>
+                                <label> Session: </label>
+                                <input
+                                    className="form-control"
+                                    type="text"
+                                    id="sessionId"
+                                    value={mySessionId}
+                                    onChange={handleChangeSessionId}
+                                    required
+                                />
+                            </p>
+                            <p className="text-center">
+                                <input className="btn btn-lg btn-success" name="commit" type="submit" value="JOIN" />
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            ) : null}
+
+            {session !== undefined ? (
+                <div id="session">
+                    <div id="session-header">
+                        <h1 id="session-title">{mySessionId}</h1>
+                        <input
+                            className="btn btn-large btn-danger"
+                            type="button"
+                            id="buttonLeaveSession"
+                            onClick={leaveSession}
+                            value="Leave session"
+                        />
+                        <input
+                            className="btn btn-large btn-success"
+                            type="button"
+                            id="buttonSwitchCamera"
+                            onClick={switchCamera}
+                            value="Switch Camera"
+                        />
+                    </div>
+
+                    {mainStreamManager !== null ? (
+                        <div id="main-video" className="col-md-6">
+                            {mainStreamManager && <UserVideoComponent streamManager={mainStreamManager} />} 
+
+                        </div>
+                    ) : null}
+                    <div id="video-container" className="col-md-6">
+                        {publisher !== null ? (
+                            <div className="stream-container col-md-6 col-xs-6" onClick={() => handleMainVideoStream(publisher)}>
+                                { publisher && <UserVideoComponent
+                                    streamManager={publisher} />}
+                            </div>
+                        ) : null}
+                        {subscribers.map((sub, i) => (
+                            <div key={sub.id} className="stream-container col-md-6 col-xs-6" onClick={() => handleMainVideoStream(sub)}>
+                                <span>{sub.id}</span>
+                                <UserVideoComponent streamManager={sub} />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    );
+}
+export default VideoCallBoxList;
\ No newline at end of file
diff --git a/front/src/components/VideoCall/registerServiceWorker.js b/front/src/components/VideoCall/registerServiceWorker.js
new file mode 100644
index 00000000..9979c1f0
--- /dev/null
+++ b/front/src/components/VideoCall/registerServiceWorker.js
@@ -0,0 +1,117 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+    window.location.hostname === 'localhost' ||
+      // [::1] is the IPv6 localhost address.
+      window.location.hostname === '[::1]' ||
+      // 127.0.0.1/8 is considered localhost for IPv4.
+      window.location.hostname.match(
+        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+      )
+  );
+  
+  export default function register() {
+    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+      // The URL constructor is available in all browsers that support SW.
+      const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+      if (publicUrl.origin !== window.location.origin) {
+        // Our service worker won't work if PUBLIC_URL is on a different origin
+        // from what our page is served on. This might happen if a CDN is used to
+        // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+        return;
+      }
+  
+      window.addEventListener('load', () => {
+        const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+  
+        if (isLocalhost) {
+          // This is running on localhost. Lets check if a service worker still exists or not.
+          checkValidServiceWorker(swUrl);
+  
+          // Add some additional logging to localhost, pointing developers to the
+          // service worker/PWA documentation.
+          navigator.serviceWorker.ready.then(() => {
+            console.log(
+              'This web app is being served cache-first by a service ' +
+                'worker. To learn more, visit https://goo.gl/SC7cgQ'
+            );
+          });
+        } else {
+          // Is not local host. Just register service worker
+          registerValidSW(swUrl);
+        }
+      });
+    }
+  }
+  
+  function registerValidSW(swUrl) {
+    navigator.serviceWorker
+      .register(swUrl)
+      .then(registration => {
+        registration.onupdatefound = () => {
+          const installingWorker = registration.installing;
+          installingWorker.onstatechange = () => {
+            if (installingWorker.state === 'installed') {
+              if (navigator.serviceWorker.controller) {
+                // At this point, the old content will have been purged and
+                // the fresh content will have been added to the cache.
+                // It's the perfect time to display a "New content is
+                // available; please refresh." message in your web app.
+                console.log('New content is available; please refresh.');
+              } else {
+                // At this point, everything has been precached.
+                // It's the perfect time to display a
+                // "Content is cached for offline use." message.
+                console.log('Content is cached for offline use.');
+              }
+            }
+          };
+        };
+      })
+      .catch(error => {
+        console.error('Error during service worker registration:', error);
+      });
+  }
+  
+  function checkValidServiceWorker(swUrl) {
+    // Check if the service worker can be found. If it can't reload the page.
+    fetch(swUrl)
+      .then(response => {
+        // Ensure service worker exists, and that we really are getting a JS file.
+        if (
+          response.status === 404 ||
+          response.headers.get('content-type').indexOf('javascript') === -1
+        ) {
+          // No service worker found. Probably a different app. Reload the page.
+          navigator.serviceWorker.ready.then(registration => {
+            registration.unregister().then(() => {
+              window.location.reload();
+            });
+          });
+        } else {
+          // Service worker found. Proceed as normal.
+          registerValidSW(swUrl);
+        }
+      })
+      .catch(() => {
+        console.log(
+          'No internet connection found. App is running in offline mode.'
+        );
+      });
+  }
+  
+  export function unregister() {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.ready.then(registration => {
+        registration.unregister();
+      });
+    }
+  }
\ No newline at end of file
diff --git a/front/src/components/VideoCall/video.css b/front/src/components/VideoCall/video.css
new file mode 100644
index 00000000..52a913dc
--- /dev/null
+++ b/front/src/components/VideoCall/video.css
@@ -0,0 +1,231 @@
+html {
+	position: relative;
+	min-height: 100%;
+}
+
+nav {
+	height: 50px;
+	width: 100%;
+	z-index: 1;
+	background-color: #4d4d4d !important;
+	border-color: #4d4d4d !important;
+	border-top-right-radius: 0 !important;
+	border-top-left-radius: 0 !important;
+}
+
+.navbar-header {
+	width: 100%;
+}
+
+.nav-icon {
+	padding: 5px 15px 5px 15px;
+	float: right;
+}
+
+nav a {
+	color: #ccc !important;
+}
+
+nav i.fa {
+	font-size: 40px;
+	color: #ccc;
+}
+
+nav a:hover {
+	color: #a9a9a9 !important;
+}
+
+nav i.fa:hover {
+	color: #a9a9a9;
+}
+
+#main-container {
+	padding-bottom: 80px;
+}
+
+.vertical-center {
+	position: absolute;
+	top: 56%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.horizontal-center {
+	margin: 0 auto;
+}
+
+.form-control {
+	color: #0088aa;
+	font-weight: bold;
+}
+
+.form-control:focus {
+	border-color: #0088aa;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
+}
+
+input.btn {
+	font-weight: bold;
+}
+
+.btn {
+	font-weight: bold !important;
+}
+
+.btn-success {
+	background-color: #06d362 !important;
+	border-color: #06d362;
+}
+
+.btn-success:hover {
+	background-color: #1abd61 !important;
+	border-color: #1abd61;
+}
+
+.footer {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	height: 60px;
+	background-color: #4d4d4d;
+}
+
+.footer .text-muted {
+	margin: 20px 0;
+	float: left;
+	color: #ccc;
+}
+
+.openvidu-logo {
+	height: 35px;
+	float: right;
+	margin: 12px 0;
+	-webkit-transition: all 0.1s ease-in-out;
+	-moz-transition: all 0.1s ease-in-out;
+	-o-transition: all 0.1s ease-in-out;
+	transition: all 0.1s ease-in-out;
+}
+
+.openvidu-logo:hover {
+	-webkit-filter: grayscale(0.5);
+	filter: grayscale(0.5);
+}
+
+.demo-logo {
+	margin: 0;
+	height: 22px;
+	float: left;
+	padding-right: 8px;
+}
+
+a:hover .demo-logo {
+	-webkit-filter: brightness(0.7);
+	filter: brightness(0.7);
+}
+
+#join-dialog h1 {
+	color: #4d4d4d;
+	font-weight: bold;
+	text-align: center;
+}
+
+#img-div {
+	text-align: center;
+	position: absolute;
+	top: 19%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+#img-div img {
+    height: 15%;
+    width: 42.5%;
+}
+
+#join-dialog label {
+	color: #0088aa;
+}
+
+#join-dialog input.btn {
+	margin-top: 15px;
+}
+
+#session-header {
+	margin-bottom: 20px;
+}
+
+#session-title {
+	display: inline-block;
+}
+
+#buttonLeaveSession, #buttonSwitchCamera {
+	float: right;
+	margin-top: 20px;
+}
+
+#video-container video {
+	position: relative;
+	float: left;
+	cursor: pointer;
+}
+
+#video-container p {
+	display: inline-block;
+	background: #f8f8f8;
+	padding-right: 5px;
+	padding-left: 5px;
+	color: #777777;
+	font-weight: bold;
+	border-bottom-right-radius: 4px;
+}
+
+/*video {
+	width: 100%;
+	height: auto;
+}*/
+
+#main-video p {
+	position: absolute;
+	display: inline-block;
+	background: #f8f8f8;
+	padding-right: 5px;
+	padding-left: 5px;
+	left: 0;
+	font-size: 22px;
+	color: #777777;
+	font-weight: bold;
+	border-bottom-right-radius: 4px;
+}
+
+#main-video video {
+	cursor: initial;
+}
+
+#session img {
+	width: 100%;
+	height: auto;
+	display: inline-block;
+	object-fit: contain;
+	vertical-align: baseline;
+}
+
+#session #video-container img {
+	position: relative;
+	float: left;
+	width: 50%;
+	cursor: pointer;
+	object-fit: cover;
+	height: 180px;
+}
+
+
+/* xs ans md screen resolutions*/
+
+@media screen and (max-width: 991px) {
+	.vertical-center {
+		width: 85%;
+		padding-top: 10px;
+		top: 57%;
+	}
+}
\ No newline at end of file
diff --git a/front/yarn.lock b/front/yarn.lock
index 249abe9a..85af234c 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -4904,7 +4904,7 @@ eventemitter3@^5.0.1:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
   integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
 
-events@^3.2.0:
+events@3.3.0, events@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
@@ -5199,6 +5199,13 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+freeice@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/freeice/-/freeice-2.2.2.tgz#f66b3e0f67c2fda835161f76d4884881cde83be4"
+  integrity sha512-XNoIxDHufqPIBSLpp4IrFPnoc+hv/0RwdOGhIoggIDC2ZKf5r6OoixbeoFJSmZOAq2aYiEUArhuQ8zVVrM5C4w==
+  dependencies:
+    normalice "^1.0.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -5422,6 +5429,13 @@ handle-thing@^2.0.0:
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
   integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
+hark@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/hark/-/hark-1.2.3.tgz#959981400f561be5580ecd4321a9f55b16bacbd0"
+  integrity sha512-u68vz9SCa38ESiFJSDjqK8XbXqWzyot7Cj6Y2b6jk2NJ+II3MY2dIrLMg/kjtIAun4Y1DHF/20hfx4rq1G5GMg==
+  dependencies:
+    wildemitter "^1.2.0"
+
 harmony-reflect@^1.4.6:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
@@ -6674,6 +6688,11 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
+jsnlog@2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/jsnlog/-/jsnlog-2.30.0.tgz#6feb20bf44fee693b255e31f92f739b21b4188f9"
+  integrity sha512-o3ROQVkhek+dkc7/9TXlB4TNtxUpYsRLOBJHZYk3Vy0B5zRBmfv9tyr56PrjcgEXuy06ARgfLTANY0+ImhzzGA==
+
 json-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
@@ -7029,6 +7048,11 @@ mime@1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
+mime@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
+  integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -7170,6 +7194,11 @@ node-releases@^2.0.14:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
+normalice@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalice/-/normalice-1.0.1.tgz#03435c2eecd5631a6bca02da3930ec3e345a80f7"
+  integrity sha512-wF2/tv9q/K8S+RqCgll5yC6z/zcXNr+rEHfGIw8A6D58vjfJo+kp749MI6cAHv72LE7nwv92Qi6tZhIeMOOJpg==
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -7348,6 +7377,22 @@ open@^8.0.9, open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
+openvidu-browser@^2.30.1:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/openvidu-browser/-/openvidu-browser-2.30.1.tgz#98151fee267d84cfd4155c981f32ed7a07fe7982"
+  integrity sha512-R4OxEmr5syHisPxL8ndViqwYkUfe/muMPhwD1LhqnwObVDDZwI5LQTEVWSp2X8wc3GhWgNdQbsArpKqBUf3bzQ==
+  dependencies:
+    events "3.3.0"
+    freeice "2.2.2"
+    hark "1.2.3"
+    inherits "2.0.4"
+    jsnlog "2.30.0"
+    mime "3.0.0"
+    platform "1.3.6"
+    semver "7.6.2"
+    uuid "9.0.1"
+    wolfy87-eventemitter "5.2.9"
+
 optionator@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -7557,6 +7602,11 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+platform@1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
+  integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
@@ -8796,6 +8846,11 @@ selfsigned@^2.1.1:
     "@types/node-forge" "^1.3.0"
     node-forge "^1"
 
+semver@7.6.2:
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.2.tgz#1e3b34759f896e8f14d6134732ce798aeb0c6e13"
+  integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
+
 semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
@@ -9823,6 +9878,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
@@ -10117,6 +10177,16 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+wildemitter@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/wildemitter/-/wildemitter-1.2.1.tgz#9da3b5ca498e4378628d1783145493c70a10b774"
+  integrity sha512-UMmSUoIQSir+XbBpTxOTS53uJ8s/lVhADCkEbhfRjUGFDPme/XGOb0sBWLx5sTz7Wx/2+TlAw1eK9O5lw5PiEw==
+
+wolfy87-eventemitter@5.2.9:
+  version "5.2.9"
+  resolved "https://registry.yarnpkg.com/wolfy87-eventemitter/-/wolfy87-eventemitter-5.2.9.tgz#e879f770b30fbb6512a8afbb330c388591099c2a"
+  integrity sha512-P+6vtWyuDw+MB01X7UeF8TaHBvbCovf4HPEMF/SV7BdDc1SMTiBy13SRD71lQh4ExFTG1d/WNzDGDCyOKSMblw==
+
 word-wrap@^1.2.5, word-wrap@~1.2.3:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"

From ac367fad2143c06fda7c98b418ae8608d083526f Mon Sep 17 00:00:00 2001
From: yewon830 <wonderwall00@naver.com>
Date: Fri, 30 Aug 2024 01:49:33 +0900
Subject: [PATCH 2/4] =?UTF-8?q?[feat]=20=ED=99=94=EB=A9=B4=EA=B3=B5?=
 =?UTF-8?q?=EC=9C=A0=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...OvVideo.tsx => OpenViduVideoComponent.tsx} |  2 +-
 front/src/components/VideoCall/UserVideo.css  | 18 ----
 .../VideoCall/UserVideoComponents.tsx         | 11 ++-
 .../components/VideoCall/VideoCallBoxList.tsx | 91 ++++++++++---------
 front/src/components/VideoCall/video.css      | 10 +-
 5 files changed, 57 insertions(+), 75 deletions(-)
 rename front/src/components/VideoCall/{OvVideo.tsx => OpenViduVideoComponent.tsx} (88%)

diff --git a/front/src/components/VideoCall/OvVideo.tsx b/front/src/components/VideoCall/OpenViduVideoComponent.tsx
similarity index 88%
rename from front/src/components/VideoCall/OvVideo.tsx
rename to front/src/components/VideoCall/OpenViduVideoComponent.tsx
index 3fd9caaa..92f50fe0 100644
--- a/front/src/components/VideoCall/OvVideo.tsx
+++ b/front/src/components/VideoCall/OpenViduVideoComponent.tsx
@@ -16,7 +16,7 @@ const OpenViduVideoComponent: React.FC<OpenViduVideoComponentProps> = ({ streamM
         }
     }, [streamManager]);
 
-    return <video autoPlay ref={videoRef} />;
+    return <video className='rounded-lg w-2/6 relative' autoPlay ref={videoRef} />;
 }
 
 export default OpenViduVideoComponent;
\ No newline at end of file
diff --git a/front/src/components/VideoCall/UserVideo.css b/front/src/components/VideoCall/UserVideo.css
index f3ad692f..e69de29b 100644
--- a/front/src/components/VideoCall/UserVideo.css
+++ b/front/src/components/VideoCall/UserVideo.css
@@ -1,18 +0,0 @@
-video {
-    width: 100%;
-    height: auto;
-    float: left;
-    cursor: pointer;
-}
-.streamcomponent div {
-    position: absolute;
-    background: #f8f8f8;
-    padding-left: 5px;
-    padding-right: 5px;
-    color: #777777;
-    font-weight: bold;
-    border-bottom-right-radius: 4px;
-}
-p{
-    margin: 0;
-}
\ No newline at end of file
diff --git a/front/src/components/VideoCall/UserVideoComponents.tsx b/front/src/components/VideoCall/UserVideoComponents.tsx
index 0aecb25f..69024d83 100644
--- a/front/src/components/VideoCall/UserVideoComponents.tsx
+++ b/front/src/components/VideoCall/UserVideoComponents.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import OpenViduVideoComponent from './OvVideo';
+import OpenViduVideoComponent from './OpenViduVideoComponent';
 import './UserVideo.css';
 import { StreamManager } from 'openvidu-browser';
+import { Box } from '@mui/material';
 
 
 interface UserVideoComponentProps {
@@ -17,10 +18,10 @@ const UserVideoComponent: React.FC<UserVideoComponentProps> = ({ streamManager }
     return (
         <div>
             {streamManager !== undefined ? (
-                <div className="streamcomponent">
-                    {/* OpenViduVideoComponent : 사용자 비디오 */}
-                    <OpenViduVideoComponent streamManager={streamManager} />
-                    <div><p>{getNicknameTag()}</p></div>
+                <div>
+                    {/* OpenViduVideoComponent : 사용자 비디오 컴포넌트 */}
+                    <OpenViduVideoComponent streamManager={streamManager}/>
+                    <div><p className='absolute bottom-0 left-0 text-white'>{getNicknameTag()}</p></div>
                 </div>
             ) : null}
         </div>
diff --git a/front/src/components/VideoCall/VideoCallBoxList.tsx b/front/src/components/VideoCall/VideoCallBoxList.tsx
index 20d99773..ce60f228 100644
--- a/front/src/components/VideoCall/VideoCallBoxList.tsx
+++ b/front/src/components/VideoCall/VideoCallBoxList.tsx
@@ -2,8 +2,9 @@ import { Device, OpenVidu, Publisher, Session, StreamManager, } from 'openvidu-b
 
 import axios from 'axios';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import './video.css';
+
 import UserVideoComponent from './UserVideoComponents';
+import { Box } from '@mui/material';
 
 // 서버 주소 (현재는 튜토리얼 서버)
 const APPLICATION_SERVER_URL = "http://localhost:5000/";
@@ -12,23 +13,26 @@ const APPLICATION_SERVER_URL = "http://localhost:5000/";
 // 화상회의 주요 구성 요소 컴포넌트 : 화상회의 참여 및 관리 기능
 const VideoCallBoxList = () => {
     const [mySessionId, setMySessionId] = useState('SessionA') //세션 아이디
-    const [myUserName, setMyUserName] = useState(`Participant${Math.floor(Math.random() * 100)}`) //참가자 닉네임
+    const [myUserName, setMyUserName] = useState(`Participant${Math.floor(Math.random() * 100)}`) //참가자 닉네임(지금은 임의로)
     const [session, setSession] = useState<Session | ''>('');
     const [mainStreamManager, setMainStreamManager] = useState<Publisher | null >(null);
-    const [publisher, setPublisher] = useState<Publisher | null>(null); //로컬 웹캠 스트림
-    const [subscribers, setSubscribers] = useState<StreamManager[]>([]); // 화상 통화에서 다른 사용자 활성 스트림 저장
+    const [publisher, setPublisher] = useState<Publisher | null>(null); //영상 송출자 : 로컬 웹캠 스트림
+    const [subscribers, setSubscribers] = useState<StreamManager[]>([]); // 영상 시청자 : 다른 사용자 활성 스트림
     const [currentVideoDevice, setCurrentVideoDevice] = useState<Device | null>(null);
 
     const OV = useRef(new OpenVidu());
 
+    //세션아이디 변경
     const handleChangeSessionId = useCallback((e : React.ChangeEvent<HTMLInputElement>) => {
         setMySessionId(e.target.value);
     }, []);
 
+    // 유저이름 직접 변경
     const handleChangeUserName = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
         setMyUserName(e.target.value);
     }, []);
 
+    // 
     const handleMainVideoStream = useCallback((stream: StreamManager) => {
       const publisher = stream as Publisher; // 타입 변환
   
@@ -37,6 +41,7 @@ const VideoCallBoxList = () => {
       }
   }, [mainStreamManager]);
 
+    // join 버튼을 클릭한 후에 호출됨. (사용자 닉네임 입력, server에서 두개의 토큰을 가져옴)
     const joinSession = useCallback(() => {
         const mySession = OV.current.initSession();
 
@@ -116,12 +121,13 @@ const VideoCallBoxList = () => {
         setPublisher(null);
     }, [session]);
 
+    // 비디오 장치 전환 기능 (이후에는 자동 스위치가 아니라, 목록만 불러와서 사용자가 직접 선택할 수 있게끔 하는게 좋아보임)
     const switchCamera = useCallback(async () => {
         try {
-            const devices = await OV.current.getDevices();
-            const videoDevices = devices.filter(device => device.kind === 'videoinput');
+            const devices = await OV.current.getDevices(); //미디어 장치 목록 가져오기
+            const videoDevices = devices.filter(device => device.kind === 'videoinput'); // 그 중 카메라만 추출
     
-            if (videoDevices && videoDevices.length > 1 && currentVideoDevice) {
+            if (videoDevices && videoDevices.length > 1 && currentVideoDevice) { 
                 const newVideoDevice = videoDevices.filter(device => device.deviceId !== currentVideoDevice.deviceId);
     
                 if (newVideoDevice.length > 0) {
@@ -173,34 +179,35 @@ const VideoCallBoxList = () => {
         };
     }, [leaveSession]);
 
-    /**
+  /**
      * --------------------------------------------
-     * GETTING A TOKEN FROM YOUR APPLICATION SERVER
+     * 애플리케이션 서버에서 토큰 받기
      * --------------------------------------------
-     * The methods below request the creation of a Session and a Token to
-     * your application server. This keeps your OpenVidu deployment secure.
+     * 아래의 메서드는 애플리케이션 서버에 세션과 토큰 생성을 요청합니다.
+     * 이렇게 하면 OpenVidu 배포가 안전하게 유지됩니다.
      *
-     * In this sample code, there is no user control at all. Anybody could
-     * access your application server endpoints! In a real production
-     * environment, your application server must identify the user to allow
-     * access to the endpoints.
+     * 이 샘플 코드에서는 사용자 제어가 전혀 없습니다. 누구든지
+     * 애플리케이션 서버의 엔드포인트에 접근할 수 있습니다! 실제 운영 환경에서는
+     * 애플리케이션 서버가 사용자를 식별하여 엔드포인트에 대한 접근을 허용해야 합니다.
      *
-     * Visit https://docs.openvidu.io/en/stable/application-server to learn
-     * more about the integration of OpenVidu in your application server.
+     * OpenVidu를 애플리케이션 서버에 통합하는 방법에 대한 자세한 내용은
+     * https://docs.openvidu.io/en/stable/application-server 를 방문하세요.
      */
+
+    // 서버에 세션아이디로 getToken
     const getToken = useCallback(async () => {
         return createSession(mySessionId).then(sessionId =>
             createToken(sessionId),
         );
     }, [mySessionId]);
-
+    //세션 id로 세션 생성하고 세션 아이디 반환
     const createSession = async (sessionId : string) => {
         const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions', { customSessionId: sessionId }, {
             headers: { 'Content-Type': 'application/json', },
         });
         return response.data; // The sessionId
     };
-
+    //세션 아이디로 토큰 요청, 토큰 반환
     const createToken = async (sessionId : string) => {
         const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', {}, {
             headers: { 'Content-Type': 'application/json', },
@@ -208,14 +215,13 @@ const VideoCallBoxList = () => {
         return response.data; // The token
     };
     return (
-        <div className="container">
+        <div className='w-100%'>
             {session === '' ? (
                 <div id="join">
                     <div id="join-dialog" className="jumbotron vertical-center">
-                        <h1> Join a video session </h1>
                         <form className="form-group" onSubmit={joinSession}>
                             <p>
-                                <label>Participant: </label>
+                                <label>참가자 이름: </label>
                                 <input
                                     className="form-control"
                                     type="text"
@@ -226,7 +232,7 @@ const VideoCallBoxList = () => {
                                 />
                             </p>
                             <p>
-                                <label> Session: </label>
+                                <label> 서버 이름: </label>
                                 <input
                                     className="form-control"
                                     type="text"
@@ -237,7 +243,7 @@ const VideoCallBoxList = () => {
                                 />
                             </p>
                             <p className="text-center">
-                                <input className="btn btn-lg btn-success" name="commit" type="submit" value="JOIN" />
+                                <input className="text-white bg-black rounded-md" name="commit" type="submit" value="JOIN" />
                             </p>
                         </form>
                     </div>
@@ -247,16 +253,16 @@ const VideoCallBoxList = () => {
             {session !== undefined ? (
                 <div id="session">
                     <div id="session-header">
-                        <h1 id="session-title">{mySessionId}</h1>
+                        <h1 id="session-title">서버 이름 : {mySessionId}</h1>
                         <input
-                            className="btn btn-large btn-danger"
+                            className="text-white bg-black rounded-md"
                             type="button"
                             id="buttonLeaveSession"
                             onClick={leaveSession}
                             value="Leave session"
                         />
                         <input
-                            className="btn btn-large btn-success"
+                            className="text-white bg-black rounded-md"
                             type="button"
                             id="buttonSwitchCamera"
                             onClick={switchCamera}
@@ -264,26 +270,27 @@ const VideoCallBoxList = () => {
                         />
                     </div>
 
-                    {mainStreamManager !== null ? (
+                    {/* {mainStreamManager !== null ? (
                         <div id="main-video" className="col-md-6">
                             {mainStreamManager && <UserVideoComponent streamManager={mainStreamManager} />} 
 
                         </div>
-                    ) : null}
-                    <div id="video-container" className="col-md-6">
+                    ) : null} */}
+                    <Box sx={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
                         {publisher !== null ? (
-                            <div className="stream-container col-md-6 col-xs-6" onClick={() => handleMainVideoStream(publisher)}>
-                                { publisher && <UserVideoComponent
-                                    streamManager={publisher} />}
-                            </div>
-                        ) : null}
-                        {subscribers.map((sub, i) => (
-                            <div key={sub.id} className="stream-container col-md-6 col-xs-6" onClick={() => handleMainVideoStream(sub)}>
-                                <span>{sub.id}</span>
-                                <UserVideoComponent streamManager={sub} />
-                            </div>
-                        ))}
-                    </div>
+                                <div className='test' onClick={() => handleMainVideoStream(publisher)}>
+                                    { publisher && <UserVideoComponent
+                                        streamManager={publisher} />}
+                                </div>
+                            ) : null}
+                            {subscribers.map((sub, i) => (
+                                <div key={sub.id} onClick={() => handleMainVideoStream(sub)}>
+                                    <UserVideoComponent streamManager={sub} />
+                                </div>
+                            ))}
+                    </Box>
+
+                    
                 </div>
             ) : null}
         </div>
diff --git a/front/src/components/VideoCall/video.css b/front/src/components/VideoCall/video.css
index 52a913dc..436c682f 100644
--- a/front/src/components/VideoCall/video.css
+++ b/front/src/components/VideoCall/video.css
@@ -1,4 +1,4 @@
-html {
+/* html {
 	position: relative;
 	min-height: 100%;
 }
@@ -221,11 +221,3 @@ a:hover .demo-logo {
 
 
 /* xs ans md screen resolutions*/
-
-@media screen and (max-width: 991px) {
-	.vertical-center {
-		width: 85%;
-		padding-top: 10px;
-		top: 57%;
-	}
-}
\ No newline at end of file

From 6e9825d2744a9ea4f99238417c2d394d6e47c894 Mon Sep 17 00:00:00 2001
From: yewon830 <wonderwall00@naver.com>
Date: Fri, 30 Aug 2024 21:50:30 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat=20:=20=ED=99=94=EC=83=81=ED=9A=8C?=
 =?UTF-8?q?=EC=9D=98=20=EB=B9=84=EB=94=94=EC=98=A4=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VideoCall/OpenViduVideoComponent.tsx      |   2 +-
 front/src/components/VideoCall/UserVideo.css  |   0
 .../VideoCall/UserVideoComponents.tsx         |  10 +-
 .../components/VideoCall/VideoCallBoxList.tsx |   8 +-
 front/src/components/VideoCall/video.css      | 223 ------------------
 5 files changed, 12 insertions(+), 231 deletions(-)
 delete mode 100644 front/src/components/VideoCall/UserVideo.css
 delete mode 100644 front/src/components/VideoCall/video.css

diff --git a/front/src/components/VideoCall/OpenViduVideoComponent.tsx b/front/src/components/VideoCall/OpenViduVideoComponent.tsx
index 92f50fe0..7581d8d5 100644
--- a/front/src/components/VideoCall/OpenViduVideoComponent.tsx
+++ b/front/src/components/VideoCall/OpenViduVideoComponent.tsx
@@ -16,7 +16,7 @@ const OpenViduVideoComponent: React.FC<OpenViduVideoComponentProps> = ({ streamM
         }
     }, [streamManager]);
 
-    return <video className='rounded-lg w-2/6 relative' autoPlay ref={videoRef} />;
+    return <video className='w-40 h-32 rounded-lg' autoPlay ref={videoRef} />;
 }
 
 export default OpenViduVideoComponent;
\ No newline at end of file
diff --git a/front/src/components/VideoCall/UserVideo.css b/front/src/components/VideoCall/UserVideo.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/front/src/components/VideoCall/UserVideoComponents.tsx b/front/src/components/VideoCall/UserVideoComponents.tsx
index 69024d83..57975243 100644
--- a/front/src/components/VideoCall/UserVideoComponents.tsx
+++ b/front/src/components/VideoCall/UserVideoComponents.tsx
@@ -16,15 +16,15 @@ const UserVideoComponent: React.FC<UserVideoComponentProps> = ({ streamManager }
     }
 
     return (
-        <div>
+        <Box sx={{height: '100%'}}>
             {streamManager !== undefined ? (
-                <div>
+                <Box sx={{width: '100%', height: '100%', backgroundColor: 'black', borderRadius: '10px', position: 'relative'}}>
                     {/* OpenViduVideoComponent : 사용자 비디오 컴포넌트 */}
                     <OpenViduVideoComponent streamManager={streamManager}/>
-                    <div><p className='absolute bottom-0 left-0 text-white'>{getNicknameTag()}</p></div>
-                </div>
+                    <div><p className='text-white absolute bottom-0 left-0'>{getNicknameTag()}</p></div>
+                </Box>
             ) : null}
-        </div>
+        </Box>
     );
 }
 
diff --git a/front/src/components/VideoCall/VideoCallBoxList.tsx b/front/src/components/VideoCall/VideoCallBoxList.tsx
index ce60f228..930a148a 100644
--- a/front/src/components/VideoCall/VideoCallBoxList.tsx
+++ b/front/src/components/VideoCall/VideoCallBoxList.tsx
@@ -276,9 +276,13 @@ const VideoCallBoxList = () => {
 
                         </div>
                     ) : null} */}
-                    <Box sx={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
+                    <Box sx={{ 
+                        display: 'flex', 
+                        gap: '16px',
+                        height: '128px' 
+                        }}>
                         {publisher !== null ? (
-                                <div className='test' onClick={() => handleMainVideoStream(publisher)}>
+                                <div onClick={() => handleMainVideoStream(publisher)} className='h-full'>
                                     { publisher && <UserVideoComponent
                                         streamManager={publisher} />}
                                 </div>
diff --git a/front/src/components/VideoCall/video.css b/front/src/components/VideoCall/video.css
deleted file mode 100644
index 436c682f..00000000
--- a/front/src/components/VideoCall/video.css
+++ /dev/null
@@ -1,223 +0,0 @@
-/* html {
-	position: relative;
-	min-height: 100%;
-}
-
-nav {
-	height: 50px;
-	width: 100%;
-	z-index: 1;
-	background-color: #4d4d4d !important;
-	border-color: #4d4d4d !important;
-	border-top-right-radius: 0 !important;
-	border-top-left-radius: 0 !important;
-}
-
-.navbar-header {
-	width: 100%;
-}
-
-.nav-icon {
-	padding: 5px 15px 5px 15px;
-	float: right;
-}
-
-nav a {
-	color: #ccc !important;
-}
-
-nav i.fa {
-	font-size: 40px;
-	color: #ccc;
-}
-
-nav a:hover {
-	color: #a9a9a9 !important;
-}
-
-nav i.fa:hover {
-	color: #a9a9a9;
-}
-
-#main-container {
-	padding-bottom: 80px;
-}
-
-.vertical-center {
-	position: absolute;
-	top: 56%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-
-.horizontal-center {
-	margin: 0 auto;
-}
-
-.form-control {
-	color: #0088aa;
-	font-weight: bold;
-}
-
-.form-control:focus {
-	border-color: #0088aa;
-	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
-}
-
-input.btn {
-	font-weight: bold;
-}
-
-.btn {
-	font-weight: bold !important;
-}
-
-.btn-success {
-	background-color: #06d362 !important;
-	border-color: #06d362;
-}
-
-.btn-success:hover {
-	background-color: #1abd61 !important;
-	border-color: #1abd61;
-}
-
-.footer {
-	position: absolute;
-	bottom: 0;
-	width: 100%;
-	height: 60px;
-	background-color: #4d4d4d;
-}
-
-.footer .text-muted {
-	margin: 20px 0;
-	float: left;
-	color: #ccc;
-}
-
-.openvidu-logo {
-	height: 35px;
-	float: right;
-	margin: 12px 0;
-	-webkit-transition: all 0.1s ease-in-out;
-	-moz-transition: all 0.1s ease-in-out;
-	-o-transition: all 0.1s ease-in-out;
-	transition: all 0.1s ease-in-out;
-}
-
-.openvidu-logo:hover {
-	-webkit-filter: grayscale(0.5);
-	filter: grayscale(0.5);
-}
-
-.demo-logo {
-	margin: 0;
-	height: 22px;
-	float: left;
-	padding-right: 8px;
-}
-
-a:hover .demo-logo {
-	-webkit-filter: brightness(0.7);
-	filter: brightness(0.7);
-}
-
-#join-dialog h1 {
-	color: #4d4d4d;
-	font-weight: bold;
-	text-align: center;
-}
-
-#img-div {
-	text-align: center;
-	position: absolute;
-	top: 19%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-
-#img-div img {
-    height: 15%;
-    width: 42.5%;
-}
-
-#join-dialog label {
-	color: #0088aa;
-}
-
-#join-dialog input.btn {
-	margin-top: 15px;
-}
-
-#session-header {
-	margin-bottom: 20px;
-}
-
-#session-title {
-	display: inline-block;
-}
-
-#buttonLeaveSession, #buttonSwitchCamera {
-	float: right;
-	margin-top: 20px;
-}
-
-#video-container video {
-	position: relative;
-	float: left;
-	cursor: pointer;
-}
-
-#video-container p {
-	display: inline-block;
-	background: #f8f8f8;
-	padding-right: 5px;
-	padding-left: 5px;
-	color: #777777;
-	font-weight: bold;
-	border-bottom-right-radius: 4px;
-}
-
-/*video {
-	width: 100%;
-	height: auto;
-}*/
-
-#main-video p {
-	position: absolute;
-	display: inline-block;
-	background: #f8f8f8;
-	padding-right: 5px;
-	padding-left: 5px;
-	left: 0;
-	font-size: 22px;
-	color: #777777;
-	font-weight: bold;
-	border-bottom-right-radius: 4px;
-}
-
-#main-video video {
-	cursor: initial;
-}
-
-#session img {
-	width: 100%;
-	height: auto;
-	display: inline-block;
-	object-fit: contain;
-	vertical-align: baseline;
-}
-
-#session #video-container img {
-	position: relative;
-	float: left;
-	width: 50%;
-	cursor: pointer;
-	object-fit: cover;
-	height: 180px;
-}
-
-
-/* xs ans md screen resolutions*/

From 0531001acd316e8adc129228b6846b8fc2e4c563 Mon Sep 17 00:00:00 2001
From: yewon830 <wonderwall00@naver.com>
Date: Fri, 30 Aug 2024 22:01:22 +0900
Subject: [PATCH 4/4] =?UTF-8?q?[style]=20:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20import=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/App.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/src/App.tsx b/front/src/App.tsx
index 777ec312..099d9b0a 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -7,7 +7,6 @@ import { ServerMap } from "./components/Phaser/ServerMap";
 import Home from "./pages/Home";
 import Join from "./pages/Join";
 import Login from "./pages/Login";
-import VideoCallBoxList from "./components/VideoCall/VideoCallBoxList";
 
 function App() {
   return (