From 9c497a93620fc44bed73b6bc4e5875369f077fb0 Mon Sep 17 00:00:00 2001
From: YeongGi Yoon <yeonggi@kakao.com>
Date: Thu, 30 Jun 2022 14:45:51 +0900
Subject: [PATCH 1/3] rtc in progress

---
 .env                                          |   3 +-
 package.json                                  |   2 +-
 src/App.tsx                                   |   4 +-
 src/components/hooks/useStartPeerSession.ts   |   2 +
 .../room/rtc/PeerConnectionSession.ts         |  26 +-
 src/components/room/video/RemoteVideo.tsx     |   2 +
 src/components/room/video/VideoControls.tsx   |   1 -
 src/index.tsx                                 |  14 +-
 src/pages/Room.tsx                            |   6 +-
 src/utils/PeerConnectionSession.ts            |   0
 yarn.lock                                     | 237 ++++++++++++------
 11 files changed, 195 insertions(+), 102 deletions(-)
 delete mode 100644 src/utils/PeerConnectionSession.ts

diff --git a/.env b/.env
index 2ca641e3..06dac0d2 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,3 @@
+SKIP_PREFLIGHT_CHECK=true
 REACT_APP_SERVER=http://172.16.101.93:8282/rooms
-REACT_APP_SOCKET_URL=http://172.16.101.93:8282/rooms
+REACT_APP_SOCKET_URL=http:/localhost:3333/chat
diff --git a/package.json b/package.json
index 79912fc4..3f6ae0a5 100644
--- a/package.json
+++ b/package.json
@@ -6,13 +6,13 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/socket.io-client": "^3.0.0",
     "@types/uuid": "^8.3.4",
     "history": "5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",
-    "socket.io": "^4.5.1",
     "socket.io-client": "^4.5.1",
     "styled-components": "^5.3.5",
     "typescript": "^4.7.4",
diff --git a/src/App.tsx b/src/App.tsx
index c3d04ec2..42799370 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,7 @@ import Layout from './components/layout/Layout';
 import Login from './pages/Login';
 import Room from './pages/Room';
 
-function Router() {
+function App() {
   return (
     <BrowserRouter>
       <Routes>
@@ -23,4 +23,4 @@ function Router() {
   );
 }
 
-export default Router;
+export default App;
diff --git a/src/components/hooks/useStartPeerSession.ts b/src/components/hooks/useStartPeerSession.ts
index 707df484..df5c5070 100644
--- a/src/components/hooks/useStartPeerSession.ts
+++ b/src/components/hooks/useStartPeerSession.ts
@@ -20,6 +20,7 @@ export const useStartPeerSession = (
       peerVideoConnection.joinRoom(room);
       peerVideoConnection.onAddUser((user: any) => {
         setConnectedUsers((users: any): any => [...users, user]);
+
         peerVideoConnection.addPeerConnection(
           `${user}`,
           userMediaStream,
@@ -58,6 +59,7 @@ export const useStartPeerSession = (
       peerVideoConnection.onAnswerMade((socket: any) =>
         peerVideoConnection.callUser(socket),
       );
+      console.log(peerVideoConnection);
     }
 
     return () => {
diff --git a/src/components/room/rtc/PeerConnectionSession.ts b/src/components/room/rtc/PeerConnectionSession.ts
index f22e4848..25ed9872 100644
--- a/src/components/room/rtc/PeerConnectionSession.ts
+++ b/src/components/room/rtc/PeerConnectionSession.ts
@@ -1,5 +1,5 @@
 /* eslint-disable lines-between-class-members */
-import { Socket, io } from 'socket.io-client';
+import io from 'socket.io-client';
 
 const { RTCPeerConnection, RTCSessionDescription } = window;
 
@@ -10,9 +10,9 @@ class PeerConnectionSession {
   peerConnections: { [key: string]: any } = {};
   senders: any = [];
   listeners: { [key: string]: any } = {};
-  socket: Socket;
+  socket: any;
 
-  constructor(socket: Socket) {
+  constructor(socket: any) {
     this.socket = socket;
     this.onCallMade();
   }
@@ -21,7 +21,6 @@ class PeerConnectionSession {
     this.peerConnections[id] = new RTCPeerConnection({
       iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
     });
-
     stream.getTracks().forEach((track: any) => {
       this.senders.push(this.peerConnections[id].addTrack(track, stream));
     });
@@ -93,7 +92,7 @@ class PeerConnectionSession {
   }
 
   onCallMade() {
-    this.socket.on('call-made', async (data) => {
+    this.socket.on('call-made', async (data: any) => {
       await this.peerConnections[data.socket].setRemoteDescription(
         new RTCSessionDescription(data.offer),
       );
@@ -110,21 +109,24 @@ class PeerConnectionSession {
   }
 
   onAddUser(callback: any) {
-    this.socket.on(`${this.mRoom}-add-user`, async ({ user }) => {
+    this.socket.on(`${this.mRoom}-add-user`, async ({ user }: any) => {
       callback(user);
     });
   }
 
   onRemoveUser(callback: any) {
-    this.socket.on(`${this.mRoom}-remove-user`, ({ socketId }) => {
+    this.socket.on(`${this.mRoom}-remove-user`, ({ socketId }: any) => {
       callback(socketId);
     });
   }
 
   onUpdateUserList(callback: any) {
-    this.socket.on(`${this.mRoom}-update-user-list`, ({ users, current }) => {
-      callback(users, current);
-    });
+    this.socket.on(
+      `${this.mRoom}-update-user-list`,
+      ({ users, current }: any) => {
+        callback(users, current);
+      },
+    );
   }
 
   onAnswerMade(callback: any) {
@@ -146,7 +148,7 @@ class PeerConnectionSession {
 }
 
 export const createPeerConnectionContext = () => {
-  const socket = io(process.env.REACT_APP_SOCKET_URL as string);
-
+  const socket = io('http://172.16.101.93:8282/room');
+  console.log(socket);
   return new PeerConnectionSession(socket);
 };
diff --git a/src/components/room/video/RemoteVideo.tsx b/src/components/room/video/RemoteVideo.tsx
index 86c965f1..473b4358 100644
--- a/src/components/room/video/RemoteVideo.tsx
+++ b/src/components/room/video/RemoteVideo.tsx
@@ -17,6 +17,8 @@ export function RemoteVideo(props: any) {
         if (stream) {
           setMediaStream(stream);
           clearInterval(interval);
+          console.log(interval);
+          console.log(interval);
         }
       }
       console.log(mediaStream);
diff --git a/src/components/room/video/VideoControls.tsx b/src/components/room/video/VideoControls.tsx
index 8475ddac..94e58875 100644
--- a/src/components/room/video/VideoControls.tsx
+++ b/src/components/room/video/VideoControls.tsx
@@ -20,7 +20,6 @@ export function VideoControls(isScreenShared: any, onScreenShare: any) {
         <Button onClick={handleScreenShare}>
           {isScreenShared ? 'Cancel Sharing' : 'Share Screen'}
         </Button>
-        ;
       </div>
     </div>
   );
diff --git a/src/index.tsx b/src/index.tsx
index 1c845bb8..8a47dc36 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import { StrictMode } from 'react';
+// import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from 'styled-components';
 import App from './App';
@@ -9,10 +9,10 @@ const rootElement = document.getElementById('root');
 if (!rootElement) throw new Error('Failed to find the root element');
 const root = createRoot(rootElement);
 root.render(
-  <StrictMode>
-    <ThemeProvider theme={defaultTheme}>
-      <GlobalStyle />
-      <App />
-    </ThemeProvider>
-  </StrictMode>,
+  // <StrictMode>
+  <ThemeProvider theme={defaultTheme}>
+    <GlobalStyle />
+    <App />
+  </ThemeProvider>,
+  // </StrictMode>,
 );
diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx
index 836ffc62..a27a84ed 100644
--- a/src/pages/Room.tsx
+++ b/src/pages/Room.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { useRef } from 'react';
 import styled from 'styled-components';
-import { useParams } from 'react-router-dom';
+// import { useParams } from 'react-router-dom';
 import {
   useCalculateVideoLayout,
   useStartPeerSession,
@@ -14,7 +14,8 @@ import {
 } from '../components/room/video';
 
 export default function MainPage() {
-  const { room } = useParams();
+  // room에 useParams로 방 할당필요
+  const room = 'test';
   const galleryRef = useRef<HTMLDivElement | null>(null);
   const localVideoRef = useRef<HTMLVideoElement | null>(null);
   const mainRef = useRef(null);
@@ -22,7 +23,6 @@ export default function MainPage() {
   const userMediaStream = useCreateMediaStream(localVideoRef);
   const { connectedUsers, shareScreen, cancelScreenSharing, isScreenShared } =
     useStartPeerSession(room, userMediaStream, localVideoRef);
-
   useCalculateVideoLayout(galleryRef, connectedUsers.length + 1);
 
   async function handleScreenSharing(share: any) {
diff --git a/src/utils/PeerConnectionSession.ts b/src/utils/PeerConnectionSession.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/yarn.lock b/yarn.lock
index 56d0c150..81ae63c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1828,11 +1828,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/component-emitter@^1.2.10":
-  version "1.2.11"
-  resolved "https://registry.yarnpkg.com/@types/component-emitter/-/component-emitter-1.2.11.tgz#50d47d42b347253817a39709fef03ce66a108506"
-  integrity sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==
-
 "@types/connect-history-api-fallback@^1.3.5":
   version "1.3.5"
   resolved "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz"
@@ -1848,16 +1843,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/cookie@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
-  integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
-
-"@types/cors@^2.8.12":
-  version "2.8.12"
-  resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.12.tgz#6b2c510a7ad7039e98e7b8d3d6598f4359e5c080"
-  integrity sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==
-
 "@types/eslint-scope@^3.7.3":
   version "3.7.3"
   resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz"
@@ -1985,7 +1970,7 @@
   resolved "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
-"@types/node@*", "@types/node@>=10.0.0", "@types/node@^18.0.0":
+"@types/node@*", "@types/node@^18.0.0":
   version "18.0.0"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.0.0.tgz"
   integrity sha512-cHlGmko4gWLVI27cGJntjs/Sj8th9aYwplmZFwmmgYQQvL5NUsgVJG7OddLvNfLqYS31KFN0s3qlaD9qCaxACA==
@@ -2073,6 +2058,13 @@
     "@types/mime" "^1"
     "@types/node" "*"
 
+"@types/socket.io-client@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/socket.io-client/-/socket.io-client-3.0.0.tgz#d0b8ea22121b7c1df68b6a923002f9c8e3cefb42"
+  integrity sha512-s+IPvFoEIjKA3RdJz/Z2dGR4gLgysKi8owcnrVwNjgvc01Lk68LJDDsG2GRqegFITcxmvCMYM7bhMpwEMlHmDg==
+  dependencies:
+    socket.io-client "*"
+
 "@types/sockjs@^0.3.33":
   version "0.3.33"
   resolved "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz"
@@ -2423,6 +2415,11 @@ adjust-sourcemap-loader@^4.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.npmjs.org/after/-/after-0.8.2.tgz"
+  integrity sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
@@ -2605,6 +2602,11 @@ array.prototype.reduce@^1.0.4:
     es-array-method-boxes-properly "^1.0.0"
     is-string "^1.0.7"
 
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz"
+  integrity sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==
+
 arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz"
@@ -2625,6 +2627,11 @@ astral-regex@^2.0.0:
   resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
+
 async@^3.2.3:
   version "3.2.4"
   resolved "https://registry.npmjs.org/async/-/async-3.2.4.tgz"
@@ -2826,6 +2833,11 @@ babel-preset-react-app@^10.0.1:
     babel-plugin-macros "^3.1.0"
     babel-plugin-transform-react-remove-prop-types "^0.4.24"
 
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz"
+  integrity sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -2836,10 +2848,10 @@ balanced-match@^2.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz"
   integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
-base64id@2.0.0, base64id@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/base64id/-/base64id-2.0.0.tgz#2770ac6bc47d312af97a8bf9a634342e0cd25cb6"
-  integrity sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==
+base64-arraybuffer@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz"
+  integrity sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==
 
 batch@0.6.1:
   version "0.6.1"
@@ -2866,6 +2878,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+blob@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz"
+  integrity sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==
+
 bluebird@^3.5.5:
   version "3.7.2"
   resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
@@ -3226,11 +3243,21 @@ commondir@^1.0.1:
   resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz"
   integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz"
+  integrity sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==
+
 component-emitter@~1.3.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
+  resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
+component-inherit@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz"
+  integrity sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==
+
 compressible@~2.0.16:
   version "2.0.18"
   resolved "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz"
@@ -3295,11 +3322,6 @@ cookie@0.5.0:
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
-cookie@~0.4.1:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
-  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
-
 core-js-compat@^3.21.0, core-js-compat@^3.22.1:
   version "3.23.2"
   resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.23.2.tgz"
@@ -3323,14 +3345,6 @@ core-util-is@~1.0.0:
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cors@~2.8.5:
-  version "2.8.5"
-  resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
-  integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
-  dependencies:
-    object-assign "^4"
-    vary "^1"
-
 cosmiconfig@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz"
@@ -3625,6 +3639,13 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 decamelize-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz"
@@ -3928,6 +3949,23 @@ encodeurl@~1.0.2:
   resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+engine.io-client@~3.4.0:
+  version "3.4.4"
+  resolved "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.4.4.tgz"
+  integrity sha512-iU4CRr38Fecj8HoZEnFtm2EiKGbYZcPn3cHxqNGl/tmdWRf60KhK+9vE0JeSjgnlS/0oynEfLgKbT9ALpim0sQ==
+  dependencies:
+    component-emitter "~1.3.0"
+    component-inherit "0.0.3"
+    debug "~3.1.0"
+    engine.io-parser "~2.2.0"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parseqs "0.0.6"
+    parseuri "0.0.6"
+    ws "~6.1.0"
+    xmlhttprequest-ssl "~1.5.4"
+    yeast "0.1.2"
+
 engine.io-client@~6.2.1:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.2.2.tgz#c6c5243167f5943dcd9c4abee1bfc634aa2cbdd0"
@@ -3939,27 +3977,22 @@ engine.io-client@~6.2.1:
     ws "~8.2.3"
     xmlhttprequest-ssl "~2.0.0"
 
+engine.io-parser@~2.2.0:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.1.tgz"
+  integrity sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "~0.0.7"
+    base64-arraybuffer "0.1.4"
+    blob "0.0.5"
+    has-binary2 "~1.0.2"
+
 engine.io-parser@~5.0.3:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
   integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
 
-engine.io@~6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.2.0.tgz#003bec48f6815926f2b1b17873e576acd54f41d0"
-  integrity sha512-4KzwW3F3bk+KlzSOY57fj/Jx6LyRQ1nbcyIadehl+AnXjKT7gDO0ORdRi/84ixvMKTym6ZKuxvbzN62HDDU1Lg==
-  dependencies:
-    "@types/cookie" "^0.4.1"
-    "@types/cors" "^2.8.12"
-    "@types/node" ">=10.0.0"
-    accepts "~1.3.4"
-    base64id "2.0.0"
-    cookie "~0.4.1"
-    cors "~2.8.5"
-    debug "~4.3.1"
-    engine.io-parser "~5.0.3"
-    ws "~8.2.3"
-
 enhanced-resolve@^5.9.3:
   version "5.9.3"
   resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz"
@@ -4870,6 +4903,18 @@ has-bigints@^1.0.1, has-bigints@^1.0.2:
   resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz"
   integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
 
+has-binary2@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz"
+  integrity sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==
+  dependencies:
+    isarray "2.0.1"
+
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz"
+  integrity sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
@@ -5153,6 +5198,11 @@ indent-string@^4.0.0:
   resolved "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz"
+  integrity sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
@@ -5383,6 +5433,11 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz"
+  integrity sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==
+
 isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
@@ -6550,7 +6605,7 @@ nwsapi@^2.2.0:
   resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz"
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
 
-object-assign@^4, object-assign@^4.1.1:
+object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -6786,6 +6841,16 @@ parse5@6.0.1:
   resolved "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
+parseqs@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz"
+  integrity sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==
+
+parseuri@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz"
+  integrity sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz"
@@ -8259,10 +8324,22 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
-socket.io-adapter@~2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz#b50a4a9ecdd00c34d4c8c808224daa1a786152a6"
-  integrity sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==
+socket.io-client@*:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.3.1.tgz"
+  integrity sha512-YXmXn3pA8abPOY//JtYxou95Ihvzmg8U6kQyolArkIyLd0pgVhrfor/iMsox8cn07WCOOvvuJ6XKegzIucPutQ==
+  dependencies:
+    backo2 "1.0.2"
+    component-bind "1.0.0"
+    component-emitter "~1.3.0"
+    debug "~3.1.0"
+    engine.io-client "~3.4.0"
+    has-binary2 "~1.0.2"
+    indexof "0.0.1"
+    parseqs "0.0.6"
+    parseuri "0.0.6"
+    socket.io-parser "~3.3.0"
+    to-array "0.1.4"
 
 socket.io-client@^4.5.1:
   version "4.5.1"
@@ -8274,14 +8351,14 @@ socket.io-client@^4.5.1:
     engine.io-client "~6.2.1"
     socket.io-parser "~4.2.0"
 
-socket.io-parser@~4.0.4:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.0.5.tgz#cb404382c32324cc962f27f3a44058cf6e0552df"
-  integrity sha512-sNjbT9dX63nqUFIOv95tTVm6elyIU4RvB1m8dOeZt+IgWwcWklFDOdmGcfo3zSiRsnR/3pJkjY5lfoGqEe4Eig==
+socket.io-parser@~3.3.0:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.2.tgz"
+  integrity sha512-FJvDBuOALxdCI9qwRrO/Rfp9yfndRtc1jSgVgV8FDraihmSP/MLGD5PEuJrNfjALvcQ+vMDM/33AWOYP/JSjDg==
   dependencies:
-    "@types/component-emitter" "^1.2.10"
     component-emitter "~1.3.0"
-    debug "~4.3.1"
+    debug "~3.1.0"
+    isarray "2.0.1"
 
 socket.io-parser@~4.2.0:
   version "4.2.1"
@@ -8291,18 +8368,6 @@ socket.io-parser@~4.2.0:
     "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.1"
 
-socket.io@^4.5.1:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.5.1.tgz#aa7e73f8a6ce20ee3c54b2446d321bbb6b1a9029"
-  integrity sha512-0y9pnIso5a9i+lJmsCdtmTTgJFFSvNQKDnPQRz28mGNnxbmqYg2QPtJTLFxhymFZhAIn50eHAKzJeiNaKr+yUQ==
-  dependencies:
-    accepts "~1.3.4"
-    base64id "~2.0.0"
-    debug "~4.3.2"
-    engine.io "~6.2.0"
-    socket.io-adapter "~2.4.0"
-    socket.io-parser "~4.0.4"
-
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz"
@@ -8593,7 +8658,7 @@ style-search@^0.1.0:
 
 styled-components@^5.3.5:
   version "5.3.5"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
+  resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz"
   integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
@@ -8881,6 +8946,11 @@ tmpl@1.0.5:
   resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz"
   integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
 
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz"
+  integrity sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
@@ -9159,7 +9229,7 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-vary@^1, vary@~1.1.2:
+vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
@@ -9615,6 +9685,13 @@ ws@^8.4.2:
   resolved "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz"
   integrity sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==
 
+ws@~6.1.0:
+  version "6.1.4"
+  resolved "https://registry.npmjs.org/ws/-/ws-6.1.4.tgz"
+  integrity sha512-eqZfL+NE/YQc1/ZynhojeV8q+H050oR8AZ2uIev7RU10svA9ZnJUddHcOUZTJLinZ9yEfdA2kSATS2qZK5fhJA==
+  dependencies:
+    async-limiter "~1.0.0"
+
 ws@~8.2.3:
   version "8.2.3"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
@@ -9630,6 +9707,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xmlhttprequest-ssl@~1.5.4:
+  version "1.5.5"
+  resolved "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz"
+  integrity sha512-/bFPLUgJrfGUL10AIv4Y7/CUt6so9CLtB/oFxQSHseSDNNCdC6vwwKEqwLN6wNPBg9YWXAiMu8jkf6RPRS/75Q==
+
 xmlhttprequest-ssl@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
@@ -9673,6 +9755,11 @@ yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz"
+  integrity sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"

From c613b7483a3b35e94d968ddefd0a36fabc9adca5 Mon Sep 17 00:00:00 2001
From: YeongGi Yoon <yeonggi@kakao.com>
Date: Thu, 30 Jun 2022 19:35:42 +0900
Subject: [PATCH 2/3] refactoring ing...

---
 .../hooks/useCalculateVideoLayout.ts          | 36 -------------
 src/components/room/video/RemoteVideo.tsx     | 37 -------------
 src/components/room/video/VideoControls.tsx   | 26 ----------
 .../video => rtc/components}/LocalVideo.tsx   |  2 +-
 .../components}/PeerConnectionSession.ts      |  1 +
 src/components/rtc/components/RemoteVideo.tsx | 35 +++++++++++++
 .../video.tsx => rtc/components/Video.tsx}    |  0
 .../{room/video => rtc/components}/index.ts   |  2 -
 src/components/{ => rtc}/hooks/index.ts       |  1 -
 .../{ => rtc}/hooks/useCreateMediaStream.ts   |  4 +-
 .../{ => rtc}/hooks/useStartPeerSession.ts    |  2 +-
 src/pages/Room.tsx                            | 52 +++++--------------
 12 files changed, 54 insertions(+), 144 deletions(-)
 delete mode 100644 src/components/hooks/useCalculateVideoLayout.ts
 delete mode 100644 src/components/room/video/RemoteVideo.tsx
 delete mode 100644 src/components/room/video/VideoControls.tsx
 rename src/components/{room/video => rtc/components}/LocalVideo.tsx (86%)
 rename src/components/{room/rtc => rtc/components}/PeerConnectionSession.ts (98%)
 create mode 100644 src/components/rtc/components/RemoteVideo.tsx
 rename src/components/{room/video/video.tsx => rtc/components/Video.tsx} (100%)
 rename src/components/{room/video => rtc/components}/index.ts (51%)
 rename src/components/{ => rtc}/hooks/index.ts (64%)
 rename src/components/{ => rtc}/hooks/useCreateMediaStream.ts (81%)
 rename src/components/{ => rtc}/hooks/useStartPeerSession.ts (97%)

diff --git a/src/components/hooks/useCalculateVideoLayout.ts b/src/components/hooks/useCalculateVideoLayout.ts
deleted file mode 100644
index 6744dce5..00000000
--- a/src/components/hooks/useCalculateVideoLayout.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useEffect, RefObject } from 'react';
-import { calculateLayout } from '../../utils/helper';
-
-export const useCalculateVideoLayout = (
-  gallery: RefObject<HTMLDivElement>,
-  videoCount: number,
-) => {
-  useEffect(() => {
-    const recalculateLayout = () => {
-      const headerHeight =
-        document.getElementsByTagName('header')?.[0]?.offsetHeight;
-      const aspectRatio = 16 / 9;
-      const screenWidth = document.body.getBoundingClientRect().width;
-      const screenHeight =
-        document.body.getBoundingClientRect().height - headerHeight;
-
-      const { width, height, cols } = calculateLayout(
-        screenWidth,
-        screenHeight,
-        videoCount,
-        aspectRatio,
-      );
-
-      gallery.current?.style?.setProperty('--width', `${width}px`);
-      gallery.current?.style?.setProperty('--height', `${height}px`);
-      gallery.current?.style?.setProperty('--cols', `${cols}`);
-    };
-
-    recalculateLayout();
-    window.addEventListener('resize', recalculateLayout);
-
-    return () => {
-      window.removeEventListener('resize', recalculateLayout);
-    };
-  }, [gallery, videoCount]);
-};
diff --git a/src/components/room/video/RemoteVideo.tsx b/src/components/room/video/RemoteVideo.tsx
deleted file mode 100644
index 473b4358..00000000
--- a/src/components/room/video/RemoteVideo.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Video, VideoContainer } from './video';
-
-export function RemoteVideo(props: any) {
-  type MediaProvider = MediaStream | MediaSource | Blob;
-  const [mediaStream, setMediaStream] = useState<MediaProvider>();
-
-  const { id } = props;
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const videoStream = document.getElementById(
-        id,
-      ) as HTMLVideoElement | null;
-      if (videoStream !== null) {
-        const stream = videoStream.srcObject;
-        if (stream) {
-          setMediaStream(stream);
-          clearInterval(interval);
-          console.log(interval);
-          console.log(interval);
-        }
-      }
-      console.log(mediaStream);
-    }, 100);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [id]);
-
-  return (
-    <VideoContainer>
-      <Video autoPlay playsInline muted />
-    </VideoContainer>
-  );
-}
diff --git a/src/components/room/video/VideoControls.tsx b/src/components/room/video/VideoControls.tsx
deleted file mode 100644
index 94e58875..00000000
--- a/src/components/room/video/VideoControls.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Button } from '../../atoms/Button';
-
-export function VideoControls(isScreenShared: any, onScreenShare: any) {
-  const handleScreenShare = () => {
-    onScreenShare(!isScreenShared);
-  };
-
-  return (
-    // replace with styled component
-    <div
-      style={{
-        position: 'absolute',
-        bottom: '24px',
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-      }}
-    >
-      <div>
-        <Button onClick={handleScreenShare}>
-          {isScreenShared ? 'Cancel Sharing' : 'Share Screen'}
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/room/video/LocalVideo.tsx b/src/components/rtc/components/LocalVideo.tsx
similarity index 86%
rename from src/components/room/video/LocalVideo.tsx
rename to src/components/rtc/components/LocalVideo.tsx
index a3845e90..2d9b2bef 100644
--- a/src/components/room/video/LocalVideo.tsx
+++ b/src/components/rtc/components/LocalVideo.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { Video, VideoContainer } from './video';
+import { Video, VideoContainer } from './Video';
 
 export const LocalVideo = forwardRef<
   HTMLVideoElement,
diff --git a/src/components/room/rtc/PeerConnectionSession.ts b/src/components/rtc/components/PeerConnectionSession.ts
similarity index 98%
rename from src/components/room/rtc/PeerConnectionSession.ts
rename to src/components/rtc/components/PeerConnectionSession.ts
index 25ed9872..fe2b3446 100644
--- a/src/components/room/rtc/PeerConnectionSession.ts
+++ b/src/components/rtc/components/PeerConnectionSession.ts
@@ -18,6 +18,7 @@ class PeerConnectionSession {
   }
 
   addPeerConnection(id: any, stream: any, callback: any) {
+    console.log('mOnConnected', this.mOnConnected);
     this.peerConnections[id] = new RTCPeerConnection({
       iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
     });
diff --git a/src/components/rtc/components/RemoteVideo.tsx b/src/components/rtc/components/RemoteVideo.tsx
new file mode 100644
index 00000000..77f1db12
--- /dev/null
+++ b/src/components/rtc/components/RemoteVideo.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/destructuring-assignment */
+import React, { useEffect, useState } from 'react';
+import { Video, VideoContainer } from './Video';
+
+export function RemoteVideo(props: any) {
+  type MediaProvider = MediaStream | MediaSource | Blob;
+  const [mediaStream, setMediaStream] = useState<MediaProvider>();
+
+  useEffect(() => {
+    console.log('props', props);
+    const interval = setInterval(() => {
+      const remote = document.getElementById(
+        props.id,
+      ) as HTMLVideoElement | null;
+      const stream = remote?.srcObject;
+
+      if (stream) {
+        setMediaStream(stream);
+        clearInterval(interval);
+        console.log(mediaStream);
+      }
+    }, 100);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [props.id]);
+
+  return (
+    <VideoContainer>
+      <Video {...props} />
+    </VideoContainer>
+  );
+}
diff --git a/src/components/room/video/video.tsx b/src/components/rtc/components/Video.tsx
similarity index 100%
rename from src/components/room/video/video.tsx
rename to src/components/rtc/components/Video.tsx
diff --git a/src/components/room/video/index.ts b/src/components/rtc/components/index.ts
similarity index 51%
rename from src/components/room/video/index.ts
rename to src/components/rtc/components/index.ts
index 6efe5189..27233d74 100644
--- a/src/components/room/video/index.ts
+++ b/src/components/rtc/components/index.ts
@@ -1,4 +1,2 @@
 export * from './LocalVideo';
 export * from './RemoteVideo';
-export * from './video';
-export * from './VideoControls';
diff --git a/src/components/hooks/index.ts b/src/components/rtc/hooks/index.ts
similarity index 64%
rename from src/components/hooks/index.ts
rename to src/components/rtc/hooks/index.ts
index f89ffc29..d58332d7 100644
--- a/src/components/hooks/index.ts
+++ b/src/components/rtc/hooks/index.ts
@@ -1,3 +1,2 @@
-export * from './useCalculateVideoLayout';
 export * from './useCreateMediaStream';
 export * from './useStartPeerSession';
diff --git a/src/components/hooks/useCreateMediaStream.ts b/src/components/rtc/hooks/useCreateMediaStream.ts
similarity index 81%
rename from src/components/hooks/useCreateMediaStream.ts
rename to src/components/rtc/hooks/useCreateMediaStream.ts
index 5112088b..261de5e3 100644
--- a/src/components/hooks/useCreateMediaStream.ts
+++ b/src/components/rtc/hooks/useCreateMediaStream.ts
@@ -4,11 +4,11 @@ import { RefObject, useEffect, useState } from 'react';
 export const useCreateMediaStream = (
   localVideoRef: RefObject<HTMLVideoElement>,
 ) => {
-  const [userMediaStream, setUserMediaStream] = useState(null);
+  const [userMediaStream, setUserMediaStream] = useState<MediaStream>();
 
   useEffect(() => {
     const createMediaStream = async () => {
-      const stream: any = await navigator.mediaDevices.getUserMedia({
+      const stream: MediaStream = await navigator.mediaDevices.getUserMedia({
         video: {
           width: { min: 640, ideal: 1920 },
           height: { min: 400, ideal: 1080 },
diff --git a/src/components/hooks/useStartPeerSession.ts b/src/components/rtc/hooks/useStartPeerSession.ts
similarity index 97%
rename from src/components/hooks/useStartPeerSession.ts
rename to src/components/rtc/hooks/useStartPeerSession.ts
index df5c5070..c6b3d03e 100644
--- a/src/components/hooks/useStartPeerSession.ts
+++ b/src/components/rtc/hooks/useStartPeerSession.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { RefObject, useEffect, useMemo, useState } from 'react';
-import { createPeerConnectionContext } from '../room/rtc/PeerConnectionSession';
+import { createPeerConnectionContext } from '../components/PeerConnectionSession';
 
 export const useStartPeerSession = (
   room: any,
diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx
index a27a84ed..1f0d4260 100644
--- a/src/pages/Room.tsx
+++ b/src/pages/Room.tsx
@@ -3,15 +3,10 @@ import { useRef } from 'react';
 import styled from 'styled-components';
 // import { useParams } from 'react-router-dom';
 import {
-  useCalculateVideoLayout,
   useStartPeerSession,
   useCreateMediaStream,
-} from '../components/hooks';
-import {
-  LocalVideo,
-  RemoteVideo,
-  VideoControls,
-} from '../components/room/video';
+} from '../components/rtc/hooks';
+import { LocalVideo, RemoteVideo } from '../components/rtc/components';
 
 export default function MainPage() {
   // room에 useParams로 방 할당필요
@@ -21,32 +16,26 @@ export default function MainPage() {
   const mainRef = useRef(null);
 
   const userMediaStream = useCreateMediaStream(localVideoRef);
-  const { connectedUsers, shareScreen, cancelScreenSharing, isScreenShared } =
-    useStartPeerSession(room, userMediaStream, localVideoRef);
-  useCalculateVideoLayout(galleryRef, connectedUsers.length + 1);
-
-  async function handleScreenSharing(share: any) {
-    if (share) {
-      await shareScreen();
-    } else {
-      await cancelScreenSharing();
-    }
-  }
+  const { connectedUsers } = useStartPeerSession(
+    room,
+    userMediaStream,
+    localVideoRef,
+  );
+  console.log('users', connectedUsers);
 
   return (
     <Main ref={mainRef}>
       <Gallery ref={galleryRef}>
         <Header>방번호</Header>
+        <p>ME</p>
         <LocalVideo ref={localVideoRef} />
-        {connectedUsers.map((user: any) => (
-          <RemoteVideo key={user} id={user} autoPlay playsInline />
+        {connectedUsers.map((user: string) => (
+          <>
+            <p>{user}</p>
+            <RemoteVideo key={user} id={user} autoPlay playsInline />
+          </>
         ))}
-        <Button>화면 공유 ON</Button>
       </Gallery>
-      <VideoControls
-        isScreenShared={isScreenShared}
-        onScreenShare={handleScreenSharing}
-      />
     </Main>
   );
 }
@@ -63,20 +52,7 @@ const Header = styled.header`
   font-size: 5rem;
 `;
 
-const Button = styled.button`
-  color: white;
-  cursor: pointer;
-  padding: 2rem;
-  width: 15rem;
-  margin: 0 auto;
-  font-size: 2rem;
-  background-color: gray;
-  border-radius: 1rem;
-`;
-
 const Gallery = styled.div`
-  display: flex;
   justify-content: center;
-  flex-wrap: wrap;
   max-width: calc(var(--width) * var(--cols));
 `;

From d554b81db935e04f2467737dde96d59f748b82ba Mon Sep 17 00:00:00 2001
From: YeongGi Yoon <yeonggi@kakao.com>
Date: Fri, 1 Jul 2022 14:28:49 +0900
Subject: [PATCH 3/3] refactor rtc

---
 .../rtc/components/PeerConnectionSession.ts   | 61 +++++++++----------
 src/components/rtc/components/RemoteVideo.tsx |  2 +-
 .../rtc/hooks/useStartPeerSession.ts          | 42 ++++++-------
 .../useStartPeerSession.interface.ts          |  4 +-
 src/pages/Room.tsx                            |  2 +-
 tsconfig.json                                 |  2 +-
 6 files changed, 53 insertions(+), 60 deletions(-)

diff --git a/src/components/rtc/components/PeerConnectionSession.ts b/src/components/rtc/components/PeerConnectionSession.ts
index fe2b3446..ec560192 100644
--- a/src/components/rtc/components/PeerConnectionSession.ts
+++ b/src/components/rtc/components/PeerConnectionSession.ts
@@ -4,35 +4,37 @@ import io from 'socket.io-client';
 const { RTCPeerConnection, RTCSessionDescription } = window;
 
 class PeerConnectionSession {
-  mOnConnected: any;
-  mOnDisconnected: any;
-  mRoom: any;
-  peerConnections: { [key: string]: any } = {};
-  senders: any = [];
-  listeners: { [key: string]: any } = {};
-  socket: any;
-
-  constructor(socket: any) {
+  mOnConnected;
+  mOnDisconnected;
+  mRoom;
+  peerConnections = {};
+  senders = [];
+  listeners = {};
+  socket;
+
+  constructor(socket) {
     this.socket = socket;
     this.onCallMade();
   }
 
-  addPeerConnection(id: any, stream: any, callback: any) {
-    console.log('mOnConnected', this.mOnConnected);
+  addPeerConnection(id, stream, callback) {
     this.peerConnections[id] = new RTCPeerConnection({
       iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
     });
-    stream.getTracks().forEach((track: any) => {
+    stream.getTracks().forEach((track) => {
       this.senders.push(this.peerConnections[id].addTrack(track, stream));
     });
 
-    this.listeners[id] = (event: any) => {
+    this.listeners[id] = (event) => {
       let fn;
       if (this.peerConnections[id].connectionState === 'connected') {
+        console.log('mOnConnected', this.mOnConnected);
         fn = this.mOnConnected;
       } else if (this.peerConnections[id].connectionState === 'disconnected') {
+        console.log('mOnDisconnected', this.mOnDisconnected);
         fn = this.mOnDisconnected;
       } else {
+        console.log('mRoom', this.mRoom);
         fn = this.mRoom;
       }
       if (fn === null) {
@@ -48,7 +50,7 @@ class PeerConnectionSession {
     this.peerConnections[id].ontrack = function ({
       streams: [stream],
     }: {
-      streams: any;
+      streams;
     }) {
       console.log({ id, stream });
       callback(stream);
@@ -79,21 +81,21 @@ class PeerConnectionSession {
     }
   }
 
-  onConnected(callback: any) {
+  onConnected(callback) {
     this.mOnConnected = callback;
   }
 
-  onDisconnected(callback: any) {
+  onDisconnected(callback) {
     this.mOnDisconnected = callback;
   }
 
-  joinRoom(room: any) {
+  joinRoom(room) {
     this.mRoom = room;
     this.socket.emit('joinRoom', room);
   }
 
   onCallMade() {
-    this.socket.on('call-made', async (data: any) => {
+    this.socket.on('call-made', async (data) => {
       await this.peerConnections[data.socket].setRemoteDescription(
         new RTCSessionDescription(data.offer),
       );
@@ -109,29 +111,26 @@ class PeerConnectionSession {
     });
   }
 
-  onAddUser(callback: any) {
-    this.socket.on(`${this.mRoom}-add-user`, async ({ user }: any) => {
+  onAddUser(callback) {
+    this.socket.on(`${this.mRoom}-add-user`, async ({ user }) => {
       callback(user);
     });
   }
 
-  onRemoveUser(callback: any) {
-    this.socket.on(`${this.mRoom}-remove-user`, ({ socketId }: any) => {
+  onRemoveUser(callback) {
+    this.socket.on(`${this.mRoom}-remove-user`, ({ socketId }) => {
       callback(socketId);
     });
   }
 
-  onUpdateUserList(callback: any) {
-    this.socket.on(
-      `${this.mRoom}-update-user-list`,
-      ({ users, current }: any) => {
-        callback(users, current);
-      },
-    );
+  onUpdateUserList(callback) {
+    this.socket.on(`${this.mRoom}-update-user-list`, ({ users, current }) => {
+      callback(users, current);
+    });
   }
 
-  onAnswerMade(callback: any) {
-    this.socket.on('answer-made', async (data: any) => {
+  onAnswerMade(callback) {
+    this.socket.on('answer-made', async (data) => {
       await this.peerConnections[data.socket].setRemoteDescription(
         new RTCSessionDescription(data.answer),
       );
diff --git a/src/components/rtc/components/RemoteVideo.tsx b/src/components/rtc/components/RemoteVideo.tsx
index 77f1db12..e57fafa7 100644
--- a/src/components/rtc/components/RemoteVideo.tsx
+++ b/src/components/rtc/components/RemoteVideo.tsx
@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from 'react';
 import { Video, VideoContainer } from './Video';
 
-export function RemoteVideo(props: any) {
+export function RemoteVideo(props) {
   type MediaProvider = MediaStream | MediaSource | Blob;
   const [mediaStream, setMediaStream] = useState<MediaProvider>();
 
diff --git a/src/components/rtc/hooks/useStartPeerSession.ts b/src/components/rtc/hooks/useStartPeerSession.ts
index c6b3d03e..2240cbfd 100644
--- a/src/components/rtc/hooks/useStartPeerSession.ts
+++ b/src/components/rtc/hooks/useStartPeerSession.ts
@@ -3,28 +3,26 @@ import { RefObject, useEffect, useMemo, useState } from 'react';
 import { createPeerConnectionContext } from '../components/PeerConnectionSession';
 
 export const useStartPeerSession = (
-  room: any,
-  userMediaStream: any,
+  room: string,
+  userMediaStream: MediaStream,
   localVideoRef: RefObject<HTMLVideoElement>,
 ) => {
-  const peerVideoConnection: any = useMemo(
-    () => createPeerConnectionContext(),
-    [],
-  );
+  const peerVideoConnection = useMemo(() => createPeerConnectionContext(), []);
 
   const [displayMediaStream, setDisplayMediaStream] = useState<MediaStream>();
   const [connectedUsers, setConnectedUsers] = useState([]);
 
   useEffect(() => {
     if (userMediaStream) {
+      console.log('mediaStream', userMediaStream);
       peerVideoConnection.joinRoom(room);
-      peerVideoConnection.onAddUser((user: any) => {
-        setConnectedUsers((users: any): any => [...users, user]);
+      peerVideoConnection.onAddUser((user: string) => {
+        setConnectedUsers((users) => [...users, user]);
 
         peerVideoConnection.addPeerConnection(
           `${user}`,
           userMediaStream,
-          (_stream: any) => {
+          (_stream) => {
             if (user) {
               const box = <HTMLVideoElement>document.getElementById(user);
               box.srcObject = _stream;
@@ -40,13 +38,13 @@ export const useStartPeerSession = (
         peerVideoConnection.removePeerConnection(socketId);
       });
 
-      peerVideoConnection.onUpdateUserList(async (users: any) => {
+      peerVideoConnection.onUpdateUserList(async (users) => {
         setConnectedUsers(users);
-        users.forEach((user: any) => {
+        users.forEach((user: string) => {
           peerVideoConnection.addPeerConnection(
             `${user}`,
             userMediaStream,
-            (_stream: any) => {
+            (_stream) => {
               if (user) {
                 const box = <HTMLVideoElement>document.getElementById(user);
                 box.srcObject = _stream;
@@ -56,7 +54,7 @@ export const useStartPeerSession = (
         });
       });
 
-      peerVideoConnection.onAnswerMade((socket: any) =>
+      peerVideoConnection.onAnswerMade((socket) =>
         peerVideoConnection.callUser(socket),
       );
       console.log(peerVideoConnection);
@@ -65,22 +63,20 @@ export const useStartPeerSession = (
     return () => {
       if (userMediaStream) {
         peerVideoConnection.clearConnections();
-        userMediaStream?.getTracks()?.forEach((track: any) => track.stop());
+        userMediaStream?.getTracks()?.forEach((track) => track.stop());
       }
     };
   }, [peerVideoConnection, room, userMediaStream]);
 
   const cancelScreenSharing = async () => {
     const senders = await peerVideoConnection.senders.filter(
-      (sender: any) => sender.track.kind === 'video',
+      (sender) => sender.track.kind === 'video',
     );
 
     if (senders) {
-      senders.forEach((sender: any) =>
+      senders.forEach((sender) =>
         sender.replaceTrack(
-          userMediaStream
-            .getTracks()
-            .find((track: any) => track.kind === 'video'),
+          userMediaStream.getTracks().find((track) => track.kind === 'video'),
         ),
       );
     }
@@ -89,7 +85,7 @@ export const useStartPeerSession = (
       localVideoRef.current.srcObject = userMediaStream;
     }
     if (displayMediaStream) {
-      displayMediaStream.getTracks().forEach((track: any) => track.stop());
+      displayMediaStream.getTracks().forEach((track) => track.stop());
     }
     setDisplayMediaStream(undefined);
   };
@@ -99,13 +95,11 @@ export const useStartPeerSession = (
       displayMediaStream || (await navigator.mediaDevices.getDisplayMedia());
 
     const senders = await peerVideoConnection.senders.filter(
-      (sender: any) => sender.track.kind === 'video',
+      (sender) => sender.track.kind === 'video',
     );
 
     if (senders) {
-      senders.forEach((sender: any) =>
-        sender.replaceTrack(stream.getTracks()[0]),
-      );
+      senders.forEach((sender) => sender.replaceTrack(stream.getTracks()[0]));
     }
 
     stream.getVideoTracks()[0].addEventListener('ended', () => {
diff --git a/src/interface/useStartPeerSession.interface.ts b/src/interface/useStartPeerSession.interface.ts
index 84c7c3e4..9801c0df 100644
--- a/src/interface/useStartPeerSession.interface.ts
+++ b/src/interface/useStartPeerSession.interface.ts
@@ -1,7 +1,7 @@
 import { RefObject } from 'react';
 
 export default interface useStartPeerSession {
-  room: any;
-  userMediaStream: any;
+  room;
+  userMediaStream;
   localVideoRef: RefObject<HTMLVideoElement> | null;
 }
diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx
index 1f0d4260..73322b8f 100644
--- a/src/pages/Room.tsx
+++ b/src/pages/Room.tsx
@@ -31,7 +31,7 @@ export default function MainPage() {
         <LocalVideo ref={localVideoRef} />
         {connectedUsers.map((user: string) => (
           <>
-            <p>{user}</p>
+            <p>USER : {user}</p>
             <RemoteVideo key={user} id={user} autoPlay playsInline />
           </>
         ))}
diff --git a/tsconfig.json b/tsconfig.json
index 1ae7578b..6122a33a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -76,7 +76,7 @@
     "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
     /* Type Checking */
-    "strict": true /* Enable all strict type-checking options. */,
+    "strict": false /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */