Merge remote-tracking branch 'origin/seoyeon2' into jaeyeoniiiiii

app.js

 // express 설정 파일
 import express from "express";
-import fs from "fs";
+import cors from "cors";
+import socketio from "socket.io";
+import http from "http";
+import wrtc from "wrtc";
 import cookieParser from "cookie-parser";
 import mainRouter from "./routes/index.js";
 
-
-
 const app = express();
-
+app.use(cors());
+const server = http.createServer(app);
 app.use(express.json());
-// app.use('/uploads', express.static('uploads'))
 app.use(express.urlencoded({ extended: true }));
 app.use(cookieParser());
 
 app.use("/api", mainRouter);
 
-export default app;
+let receiverPCs = {};
+let senderPCs = {};
+let users = {};
+let socketToRoom = {};
+
+const pc_config = {
+  iceServers: [
+    // {
+    //   urls: 'stun:[STUN_IP]:[PORT]',
+    //   'credentials': '[YOR CREDENTIALS]',
+    //   'username': '[USERNAME]'
+    // },
+    {
+      urls: "stun:stun.l.google.com:19302",
+    },
+  ],
+};
+
+const isIncluded = (array, id) => {
+  let len = array.length;
+  for (let i = 0; i < len; i++) {
+    if (array[i].id === id) return true;
+  }
+  return false;
+};
+
+const createReceiverPeerConnection = (socketID, socket, roomID) => {
+  let pc = new wrtc.RTCPeerConnection(pc_config);
+
+  if (receiverPCs[socketID]) receiverPCs[socketID] = pc;
+  else receiverPCs = { ...receiverPCs, [socketID]: pc };
+
+  pc.onicecandidate = (e) => {
+    //console.log(`socketID: ${socketID}'s receiverPeerConnection icecandidate`);
+    socket.to(socketID).emit("getSenderCandidate", {
+      candidate: e.candidate,
+    });
+  };
+
+  pc.oniceconnectionstatechange = (e) => {
+    //console.log(e);
+  };
+
+  pc.ontrack = (e) => {
+    if (users[roomID]) {
+      if (!isIncluded(users[roomID], socketID)) {
+        users[roomID].push({
+          id: socketID,
+          stream: e.streams[0],
+        });
+      } else return;
+    } else {
+      users[roomID] = [
+        {
+          id: socketID,
+          stream: e.streams[0],
+        },
+      ];
+    }
+    socket.broadcast.to(roomID).emit("userEnter", { id: socketID });
+  };
+
+  return pc;
+};
+
+const createSenderPeerConnection = (
+  receiverSocketID,
+  senderSocketID,
+  socket,
+  roomID
+) => {
+  let pc = new wrtc.RTCPeerConnection(pc_config);
+
+  if (senderPCs[senderSocketID]) {
+    senderPCs[senderSocketID].filter((user) => user.id !== receiverSocketID);
+    senderPCs[senderSocketID].push({ id: receiverSocketID, pc: pc });
+  } else
+    senderPCs = {
+      ...senderPCs,
+      [senderSocketID]: [{ id: receiverSocketID, pc: pc }],
+    };
+
+  pc.onicecandidate = (e) => {
+    //console.log(`socketID: ${receiverSocketID}'s senderPeerConnection icecandidate`);
+    socket.to(receiverSocketID).emit("getReceiverCandidate", {
+      id: senderSocketID,
+      candidate: e.candidate,
+    });
+  };
+
+  pc.oniceconnectionstatechange = (e) => {
+    //console.log(e);
+  };
+
+  const sendUser = users[roomID].filter((user) => user.id === senderSocketID);
+  sendUser[0].stream.getTracks().forEach((track) => {
+    pc.addTrack(track, sendUser[0].stream);
+  });
+
+  return pc;
+};
+
+const getOtherUsersInRoom = (socketID, roomID) => {
+  let allUsers = [];
+
+  if (!users[roomID]) return allUsers;
+
+  let len = users[roomID].length;
+  for (let i = 0; i < len; i++) {
+    if (users[roomID][i].id === socketID) continue;
+    allUsers.push({ id: users[roomID][i].id });
+  }
+
+  return allUsers;
+};
+
+const deleteUser = (socketID, roomID) => {
+  let roomUsers = users[roomID];
+  if (!roomUsers) return;
+  roomUsers = roomUsers.filter((user) => user.id !== socketID);
+  users[roomID] = roomUsers;
+  if (roomUsers.length === 0) {
+    delete users[roomID];
+  }
+  delete socketToRoom[socketID];
+};
+
+const closeRecevierPC = (socketID) => {
+  if (!receiverPCs[socketID]) return;
+
+  receiverPCs[socketID].close();
+  delete receiverPCs[socketID];
+};
+
+const closeSenderPCs = (socketID) => {
+  if (!senderPCs[socketID]) return;
+
+  let len = senderPCs[socketID].length;
+  for (let i = 0; i < len; i++) {
+    senderPCs[socketID][i].pc.close();
+    let _senderPCs = senderPCs[senderPCs[socketID][i].id];
+    let senderPC = _senderPCs.filter((sPC) => sPC.id === socketID);
+    if (senderPC[0]) {
+      senderPC[0].pc.close();
+      senderPCs[senderPCs[socketID][i].id] = _senderPCs.filter(
+        (sPC) => sPC.id !== socketID
+      );
+    }
+  }
+
+  delete senderPCs[socketID];
+};
+
+const io = socketio.listen(server);
+
+io.sockets.on("connection", (socket) => {
+  console.log("socket connection complete")
+  socket.on("joinRoom", (data) => {
+    try {
+      let allUsers = getOtherUsersInRoom(data.id, data.roomID);
+      io.to(data.id).emit("allUsers", { users: allUsers });
+    } catch (error) {
+      console.log(error);
+    }
+  });
+
+  socket.on("senderOffer", async (data) => {
+    try {
+      socketToRoom[data.senderSocketID] = data.roomID;
+      let pc = createReceiverPeerConnection(
+        data.senderSocketID,
+        socket,
+        data.roomID
+      );
+      await pc.setRemoteDescription(data.sdp);
+      let sdp = await pc.createAnswer({
+        offerToReceiveAudio: true,
+        offerToReceiveVideo: true,
+      });
+      await pc.setLocalDescription(sdp);
+      socket.join(data.roomID);
+      io.to(data.senderSocketID).emit("getSenderAnswer", { sdp });
+    } catch (error) {
+      console.log(error);
+    }
+  });
+
+  socket.on("senderCandidate", async (data) => {
+    try {
+      let pc = receiverPCs[data.senderSocketID];
+      await pc.addIceCandidate(new wrtc.RTCIceCandidate(data.candidate));
+    } catch (error) {
+      console.log(error);
+    }
+  });
+
+  socket.on("receiverOffer", async (data) => {
+    try {
+      let pc = createSenderPeerConnection(
+        data.receiverSocketID,
+        data.senderSocketID,
+        socket,
+        data.roomID
+      );
+      await pc.setRemoteDescription(data.sdp);
+      let sdp = await pc.createAnswer({
+        offerToReceiveAudio: false,
+        offerToReceiveVideo: false,
+      });
+      await pc.setLocalDescription(sdp);
+      io.to(data.receiverSocketID).emit("getReceiverAnswer", {
+        id: data.senderSocketID,
+        sdp,
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  });
+
+  socket.on("receiverCandidate", async (data) => {
+    try {
+      const senderPC = senderPCs[data.senderSocketID].filter(
+        (sPC) => sPC.id === data.receiverSocketID
+      );
+      await senderPC[0].pc.addIceCandidate(
+        new wrtc.RTCIceCandidate(data.candidate)
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  });
+
+  socket.on("disconnect", () => {
+    try {
+      let roomID = socketToRoom[socket.id];
+
+      deleteUser(socket.id, roomID);
+      closeRecevierPC(socket.id);
+      closeSenderPCs(socket.id);
+
+      socket.broadcast.to(roomID).emit("userExit", { id: socket.id });
+    } catch (error) {
+      console.log(error);
+    }
+  });
+});
+
+export default server;

client/package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
     "bootstrap": "^5.0.2",
+    "nanoid": "^3.1.23",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -23,6 +24,9 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+  "nodemonConfig":{
+    "ignore":["test/*","docs/*","client/*"]
+  },
   "eslintConfig": {
     "extends": [
       "react-app",

client/src/apis/room.api.js

 import axios from "axios";
 
-const login = async (payload) => {
-  const { data } = await axios.post("/api/login", payload);
+const create = async (payload) => {
+  const { data } = await axios.post("/api/room/create", payload);
   return data;
 };
 
-const signup = async (payload) => {
-  const { data } = await axios.post("/api/signup", payload);
+const join = async (payload) => {
+  const { data } = await axios.put("/api/room/join", payload);
   return data;
 };
 
-const roomApi = { login, signup };
+const roomApi = { create, join };
 
 export default roomApi;

client/src/apis/user.api.js

 import axios from "axios";
 
+const getUser = async (payload) => {
+  const { data } = await axios.post("/api/getUser", payload);
+  return data;
+};
+
 const login = async (payload) => {
   const { data } = await axios.post("/api/login", payload);
   return data;

client/src/components/Header.js

 import { Link } from 'react-router-dom'
+import { handleLogout } from '../context/auth'
+
 const Header = () => {
   return (
     <div>
@@ -6,10 +8,70 @@ const Header = () => {
         style={{ backgroundColor: '#FCF4FF' }}
         className="flex-column align-items-center justify-content-center p-2"
       >
-        <div className="d-flex justify-content-center">
-          <Link to="/">
-            <img src="/BORA.png" style={{ width: '160px' }} />
-          </Link>
+        <div className="d-flex justify-content-end">
+          <div>
+            <Link to="/user">
+              <img src="/BORA.png" style={{ width: '160px' }} />
+            </Link>
+          </div>
+          <button
+            type="button"
+            className=" mt-3 ms-5 rounded"
+            data-bs-toggle="modal"
+            data-bs-target="#logout"
+            style={{
+              height: '30px',
+              backgroundColor: '#E0CEE8',
+              color: 'black',
+              border: '1px #E0CEE8',
+            }}
+          >
+            로그아웃
+          </button>
+          <div
+            className="modal fade"
+            id="logout"
+            tabIndex="-1"
+            aria-labelledby="logoutLabel"
+            aria-hidden="true"
+          >
+            <div className="modal-dialog">
+              <div className="modal-content">
+                <div className="modal-header">
+                  <button
+                    type="button"
+                    className="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"
+                  ></button>
+                </div>
+                <div className="modal-body d-flex justify-content-center">
+                  로그아웃 하시겠습니까?
+                </div>
+                <div className="row mb-3">
+                  <div className="d-flex justify-content-evenly">
+                    <Link to="/" className="col-2 p-1 btn btn-primary">
+                    <button
+                      type="submit"
+                      className="btn btn-primary"
+                      onClick={() => handleLogout()}
+                      data-bs-dismiss="modal"
+                    >
+                      예
+                    </button>
+                    </Link>
+                    <button
+                      type="submit"
+                      className="col-2 p-1 btn btn-primary"
+                      data-bs-dismiss="modal"
+                    >
+                      아니요
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </form>
       <div

client/src/components/Home/AddRoom.js

-import { useEffect, useState } from "react";
-import axios from 'axios'
-
-const INIT_ROOM = {
-  roomName: '',
-  owner: '123456',
-  member: '123456',
-  profileimg: [],
-}
+import CreateRoom from "./CreateRoom";
+import JoinRoom from "./JoinRoom";
 
 const AddRoom = () => {
-  const [room, setRoom] = useState(INIT_ROOM)
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState(false)
-  const [disabled, setDisabled] = useState(true)
-
-  useEffect(() => {
-    setDisabled(
-      !(
-        room.name &&
-        room.owner &&
-        room.member &&
-        room.profileimg
-      )
-    );
-  }, [room]);
-
-  //LocalStorage에 user id를 저장할때 id를 owner, member에 저장하기
-  //const userId = localStorage.getItem('id')
-  // setRoom({...room, [owner]: userId})
-  // setRoom({...room, [member]: userId})
-
-  function handleChange(event) {
-    const { name, value } = event.target
-    setRoom({ ...room, [name]: value })
-    console.log(room)
-  }
-
-  async function handleSubmit(event) {
-    event.preventDefault()
-    try {
-      console.log('룸룸', room)
-      let res = await axios.post("/room/create", room)
-      const Id = res.data.id
-      alert(`방참여코드는 ${Id}입니다`)
-      setSuccess(true)
-    } catch (error) {
-      // catchErrors(error, setError);
-    } finally {
-      // setLoading(false);
-    }
-  }
-
-  if (success) {
-    console.log('success', success)
-    alert('룸생성이 완료되었습니다!')
-    //return <Redirect to='/' />
-  }
-
-  const { name, owner, member, profileimg } = room;
-
   return (
     <div>
       <div className="mx-4 my-3 d-flex justify-content-between">
@@ -102,6 +45,7 @@ const AddRoom = () => {
                     className="p-3"
                     data-bs-toggle="modal"
                     data-bs-target="#joinModal"
+                    // data-bs-dismiss="modal"
                     style={{
                       display: "flex",
                       flexDirection: "column",
@@ -110,11 +54,19 @@ const AddRoom = () => {
                       backgroundColor: "#E0CEE8",
                       borderColor: "#E0CEE8",
                     }}
+                  >방참여하기
+                  </button>
+                  <div
+                    className="modal fade"
+                    id="joinModal"
+                    tabIndex="-1"
+                    aria-labelledby="joinModalLabel"
+                    aria-hidden="true"
                   >
-                    <div style={{ width: "6rem" }} >
-                      방참여하기
+                    <div className="modal-dialog">
+                      <JoinRoom />
                     </div>
-                  </button>
+                  </div>
                 </div>
                 <div className="col-6 d-flex justify-content-center">
                   <button
@@ -122,6 +74,7 @@ const AddRoom = () => {
                     className="p-3"
                     data-bs-toggle="modal"
                     data-bs-target="#makeModal"
+                    // data-bs-dismiss="modal"
                     style={{
                       display: "flex",
                       flexDirection: "column",
@@ -130,95 +83,19 @@ const AddRoom = () => {
                       backgroundColor: "#f5cfe3",
                       borderColor: "#f5cfe3",
                     }}
+                  >방생성하기
+                  </button>
+                  <div
+                    className="modal fade"
+                    id="makeModal"
+                    tabIndex="-1"
+                    aria-labelledby="makeModalLabel"
+                    aria-hidden="true"
                   >
-                    <div style={{ width: "6rem" }} >
-                      방생성하기
+                    <div className="modal-dialog">
+                      <CreateRoom />
                     </div>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* 방참여하기 모달 */}
-      <div className="form" onSubmit={handleSubmit}>
-        <div className="modal" id="joinModal" tabIndex="-1" aria-hidden="true">
-          <div className="modal-dialog">
-            <div className="modal-content">
-              <div className="modal-header">
-                <div>방참여하기</div>
-                <button
-                  type="button"
-                  className="btn-close"
-                  data-bs-dismiss="modal"
-                  aria-label="Close"
-                ></button>
-              </div>
-              <div className="modal-body">
-                <div className="input-group mb-3">
-                  <input
-                    type="text"
-                    className="form-control"
-                    placeholder="참여코드를 입력하세요"
-                    aria-label="참여코드를 입력하세요"
-                    aria-describedby="basic-addon1"
-                  />
-                </div>
-                <div className="modal-footer">
-                  <button type="submit" className="btn btn-primary">
-                    확인
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-
-      {/* 방생성하기 모달 */}
-      <div className="form" onSubmit={handleSubmit}>
-        <div className="modal" id="makeModal" tabIndex="-1" aria-hidden="true">
-          <div className="modal-dialog">
-            <div className="modal-content">
-              <div className="modal-header">
-                <div>방생성하기</div>
-                <button
-                  type="button"
-                  className="btn-close"
-                  data-bs-dismiss="modal"
-                  aria-label="Close"
-                ></button>
-              </div>
-              <div className="modal-body">
-                <h6>방프로필사진</h6>
-                <div className="mb-4">
-                  <input
-                    type="file"
-                    className="upload-hidden"
-                    onChange={handleChange}
-                    name="profileimg"
-                    value={room.profileimg} />
-                </div>
-                <h6>방이름</h6>
-                <div className="input-group">
-                  <input
-                    type="text"
-                    className="form-control"
-                    placeholder="방이름을 입력해주세요"
-                    aria-label="방이름 입력해주세요"
-                    aria-describedby="basic-addon1"
-                    onChange={handleChange}
-                    name="name"
-                    value={room.name}
-                  />
-                </div>
-                <div className="modal-footer">
-                  <button type="submit" className="btn btn-primary">
-                    생성
-                  </button>
+                  </div>
                 </div>
               </div>
             </div>

client/src/components/Home/CreateRoom.js

+import { useEffect, useState } from "react";
+import { Redirect } from "react-router-dom";
+import roomApi from "../../apis/room.api";
+
+const userId = localStorage.getItem('user');
+console.log(userId)
+const INIT_ROOM = {
+    name: '',
+    owner: userId,
+    member: userId,
+    profileimg: '',
+}
+
+const CreateRoom = () => {
+    const [room, setRoom] = useState(INIT_ROOM)
+    const [error, setError] = useState("");
+    const [success, setSuccess] = useState(false)
+    const [disabled, setDisabled] = useState(true)
+
+    useEffect(() => {
+        const isRoom = Object.values(roomApi).every((el) => Boolean(el));
+        isRoom ? setDisabled(false) : setDisabled(true);
+    }, [room]);
+
+    function handleChange(event) {
+        console.log(room)
+        const { name, value } = event.target
+        setRoom({ ...room, [name]: value })
+    }
+    console.log(room)
+
+    async function handleSubmit(e) {
+        e.preventDefault()
+        console.log('룸룸', room)
+        try {
+            const res = await roomApi.create(room)
+            // console.log(res)
+            const Id = res.id
+            console.log(Id)
+            alert(`방참여코드는 ${Id}입니다`)
+            setSuccess(true)
+        } catch (error) {
+            // catchErrors(error, setError);
+        } finally {
+            // setLoading(false);
+        }
+    }
+
+    if (success) {
+        console.log('success', success)
+        alert('룸생성이 완료되었습니다!')
+        return <Redirect to='/user' />
+    }
+
+    const { name, owner, member, profileimg } = room;
+
+    return (
+        <div className="modal-content" >
+            <form onSubmit={handleSubmit}>
+                <div className="modal-header">
+                    <div className="modal-title" id="makeModal">방생성하기</div>
+                    <button
+                        type="button"
+                        className="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
+                    ></button>
+                </div>
+                <div className="modal-body">
+                    <h6>방프로필사진</h6>
+                    <div className="mb-4">
+                        <input
+                            type="file"
+                            className="upload-hidden"
+                            onChange={handleChange}
+                            accept="image/*"
+                            name="profileimg"
+                            value={room.profileimg} />
+                    </div>
+                    <h6>방이름</h6>
+                    <div className="input-group">
+                        <input
+                            type="text"
+                            className="form-control"
+                            placeholder="방이름을 입력해주세요"
+                            aria-label="방이름 입력해주세요"
+                            aria-describedby="basic-addon1"
+                            onChange={handleChange}
+                            name="name"
+                            value={room.name}
+                        />
+                    </div>
+                    <div className="modal-footer">
+                        <button type="submit" className="btn btn-primary">
+                            생성
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div >
+    );
+};
+
+export default CreateRoom;
\ No newline at end of file

client/src/components/Home/HomeProfile.js

 import { Link } from "react-router-dom";
+import { useState, useEffect } from "react";
+import userApi from "../../apis/user.api";
+
+const userprofile = localStorage.getItem("user");
+console.log(userprofile)
+const INIT_USER = {
+  id: userprofile,
+  name: '',
+  img: '',
+}
 
 const HomeProfile = () => {
-  const id = 1;
+  const [user, setUser] = useState(INIT_USER)
+
+  async function getSetUser(userID) {
+    try {
+      // `/users/${userId}`랑 userId랑 같은지 확인
+      console.log('userID',userID)
+      const data = await userApi.getUser({id: userID})
+      console.log(data)
+      setUser(data)
+      console.log(user)
+    } catch (error) {
+      // catchErrors(error, setError)
+    }
+  }
+
+  useEffect(() => {
+    console.log('예에에에에ㅔ에에')
+    getSetUser(userprofile)
+  }, [userprofile])
+
   return (
-    <Link to={`/profile/${id}`} className="text-decoration-none text-dark">
+    <Link to={`/profile/${user}`} className="text-decoration-none text-dark">
       <form className="flex-column align-items-center justify-content-center m-2">
         <div className="d-flex justify-content-center">
           <img
-            src="cherry.jpg"
+            // src="cherry.jpg"
             className="rounded-circle"
             style={{
               width: "157px",
               height: "157px",
             }}
+            value={user.img}
           />
         </div>
-        <h1 className="d-flex justify-content-center"> CHERRY </h1>
-        <h2 className="d-flex justify-content-center"> #0805 </h2>
+        <h1 className="d-flex justify-content-center"> {user.name} </h1>
+        <h2 className="d-flex justify-content-center"> #{user.id} </h2>
       </form>
       <div
         style={{ backgroundColor: "#262626", width: "auto", height: "2px" }}

client/src/components/Home/JoinRoom.js

+import { useEffect, useState } from "react";
+import { Redirect } from "react-router-dom";
+import roomApi from "../../apis/room.api";
+
+const userId = localStorage.getItem('user');
+
+const JoinRoom = () => {
+    const [roomId, setRoomId] = useState('');
+    const [disabled, setDisabled] = useState(true);
+    const [error, setError] = useState("");
+    const [success, setSuccess] = useState(false);
+
+    useEffect(() => {
+        const isRoom = Object.values(roomApi).every((el) => Boolean(el));
+        isRoom ? setDisabled(false) : setDisabled(true);
+    }, [roomId]);
+
+    function handleChange(event) {
+        const { value } = event.target;
+        setRoomId(value);
+        console.log(roomId);
+    }
+
+    async function handleSubmit(e) {
+        e.preventDefault();
+        try {
+            // setLoading(true);
+            // setError("");
+            console.log('userId:', userId)
+            console.log('roomId:', roomId)
+            const data = await roomApi.join({ userId: userId, roomId: roomId });
+            console.log(data);
+            setSuccess(true);
+        } catch (error) {
+            // catchErrors(error, setError);
+        } finally {
+            // setLoading(false);
+        }
+    }
+    if (success) {
+        return <Redirect to="/user" />;
+    }
+
+    return (
+        <div className="modal-content">
+            <form onSubmit={handleSubmit}>
+                <div className="modal-header">
+                    <div className="modal-title" id="joinModal">방참여하기</div>
+                    <button
+                        type="button"
+                        className="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
+                    ></button>
+                </div>
+                <div className="modal-body">
+                    <div className="input-group mb-3">
+                        <input
+                            type="text"
+                            className="form-control"
+                            placeholder="참여코드를 입력하세요"
+                            aria-label="참여코드를 입력하세요"
+                            aria-describedby="basic-addon1"
+                            name="roomId"
+                            value={roomId}
+                            onChange={handleChange}
+                        />
+                    </div>
+                    <div className="modal-footer">
+                        <button type="submit" className="btn btn-primary">
+                            확인
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default JoinRoom;
\ No newline at end of file

client/src/components/Login.js

-import { useEffect, useState } from "react";
-import { Redirect } from "react-router-dom";
-import userApi from "../apis/user.api";
+import { useEffect, useState } from 'react'
+import { Redirect } from 'react-router-dom'
+import userApi from '../apis/user.api'
+import catchErrors from "../context/catchError";
+import { handleLogin } from '../context/auth';
 const INIT_USER = {
-  email: "",
-  password: "",
-};
+  email: '',
+  password: '',
+}
 
 const Login = () => {
-  //   const { error, loading, login } = useAuth();
-  const [user, setUser] = useState(INIT_USER);
-  const [disabled, setDisabled] = useState(true);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState(false);
+  // const { loading, login, catchErrorAuth } = useAuth()
+  const [user, setUser] = useState(INIT_USER)
+  const [disabled, setDisabled] = useState(true)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState(false)
 
   useEffect(() => {
-    const isUser = Object.values(user).every((el) => Boolean(el));
-    isUser ? setDisabled(false) : setDisabled(true);
-  }, [user]);
+    const isUser = Object.values(user).every((el) => Boolean(el))
+    isUser ? setDisabled(false) : setDisabled(true)
+  }, [user])
 
   function handleChange(event) {
-    const { name, value } = event.target;
-    setUser({ ...user, [name]: value });
+    const { name, value } = event.target
+    setUser({ ...user, [name]: value })
   }
 
   async function handleSubmit(e) {
-    e.preventDefault();
+    e.preventDefault()
+    console.log('로그인')
     try {
       // setLoading(true);
       // setError("");
-      const data = await userApi.login(user);
-      console.log(data);
-      setSuccess(true);
+      const data = await userApi.login(user)
+      console.log(data)
+      handleLogin(data.id)
+      setSuccess(true)
     } catch (error) {
-      // catchErrors(error, setError);
+      console.log('error in login', error)
+      catchErrors(error, setError)
     } finally {
       // setLoading(false);
     }
   }
-  if (success) {
-    return <Redirect to="/user" />;
-  }
-
   if (success) {
     alert('로그인 되었습니다')
+    return <Redirect to="/user" />
   }
 
-  const { email, password } = user;
+  const { email, password } = user
 
   return (
     <div className="modal-content">
+      {error && <div className="alert alert-danger">{error}</div>}
       <form onSubmit={handleSubmit}>
         <div className="modal-header">
           <h5 className="modal-title" id="loginModalLabel">
@@ -88,13 +91,18 @@ const Login = () => {
           </div>
         </div>
         <div className="modal-footer">
-          <button type="submit" className="btn btn-primary" disabled={disabled}>
+          <button
+            type="submit"
+            className="btn btn-primary"
+            disabled={disabled}
+            data-bs-dismiss="modal"
+          >
             로그인
           </button>
         </div>
       </form>
     </div>
-  );
-};
+  )
+}
 
-export default Login;
+export default Login

client/src/components/Profile/InfoUpdate.js

@@ -44,7 +44,7 @@ const InfoUpdate = () => {
               type="button"
               className="btn btn-outline-white "
               style={{
-                background: "#E8B7FF",
+                background: "#d4cafb",
                 fontSize: "13px",
                 fontWeight: "bold",
               }}
@@ -105,7 +105,7 @@ const InfoUpdate = () => {
                   borderRight: "0",
                   borderLeft: "0",
                   borderBottom: "1",
-                  borderColor: "#E8B7FF",
+                  borderColor: "#d4cafb",
                   height: "38px",
                   width: "130px",
                 }}
@@ -139,7 +139,7 @@ const InfoUpdate = () => {
                 type="button"
                 className="btn btn-outline-white ms-2"
                 style={{
-                  background: "#E8B7FF",
+                  background: "#d4cafb",
                   fontSize: "13px",
                   fontWeight: "bold",
                 }}

client/src/components/Profile/Profile.js

@@ -18,7 +18,7 @@ const Profile = () => {
                 type="button"
                 className="btn btn-outline-white "
                 style={{
-                  background: "#E8B7FF",
+                  background: "#d4cafb",
                   fontSize: "13px",
                   fontWeight: "bold",
                 }}

client/src/components/Room/RightHamburger.js

@@ -62,12 +62,12 @@ const RightHamberger = () => {
                             style={{
                                 height: '30px',
                                 fontWeight: 'bold',
-                                backgroundColor: '#D64D61',
+                                backgroundColor: '#d86da6',
                                 color: 'black',
-                                border: '1px #D64D61',
+                                border: '1px #d86da6',
                             }}
                         >
-                            퇴장
+                            퇴장    
                         </button>
                         {admin ? <button
                             type="button"

client/src/components/Room/Screen.js

+import React, { useState } from "react";
+import io from "socket.io-client";
+import { useRef } from "react";
+import { useEffect } from "react";
+import Video from "./Video";
+import { useParams } from "react-router-dom";
+
 const Screen = () => {
-  const user = '00'
+  const [socket, setSocket] = useState(null);
+  const [users, setUsers] = useState([]);
+  const { roomId, channelId } = useParams();
+
+  const user = "00";
+  let localVideoRef = useRef(null);
+
+  let sendPC;
+  let receivePCs;
+
+  // 방화벽 등의 보호장치를 거쳐 ip로 연결하기 위한 설정
+  const pc_config = {
+    iceServers: [
+      // {
+      //   urls: 'stun:[STUN_IP]:[PORT]',
+      //   'credentials': '[YOR CREDENTIALS]',
+      //   'username': '[USERNAME]'
+      // },
+      {
+        urls: "stun:stun.l.google.com:19302",
+      },
+    ],
+  };
+
+  useEffect(() => {
+    let newSocket = io.connect("http://localhost:8080");
+    let localStream;
+    // console.log("newSocket", newSocket.id);
+    //
+    newSocket.on("userEnter", (data) => {
+      console.log(data);
+      createReceivePC(data.id, newSocket);
+    });
+
+    newSocket.on("allUsers", (data) => {
+      let len = data.users.length;
+      for (let i = 0; i < len; i++) {
+        createReceivePC(data.users[i].id, newSocket);
+      }
+    });
+
+    newSocket.on("userExit", (data) => {
+      receivePCs[data.id].close();
+      delete receivePCs[data.id];
+      setUsers((users) => users.filter((user) => user.id !== data.id));
+    });
+
+    newSocket.on("getSenderAnswer", async (data) => {
+      try {
+        console.log("get sender answer");
+        console.log(data.sdp);
+        await sendPC.setRemoteDescription(new RTCSessionDescription(data.sdp));
+      } catch (error) {
+        console.log(error);
+      }
+    });
+
+    newSocket.on("getSenderCandidate", async (data) => {
+      try {
+        console.log("get sender candidate");
+        if (!data.candidate) return;
+        sendPC.addIceCandidate(new RTCIceCandidate(data.candidate));
+        console.log("candidate add success");
+      } catch (error) {
+        console.log(error);
+      }
+    });
+
+    newSocket.on("getReceiverAnswer", async (data) => {
+      try {
+        console.log(`get socketID(${data.id})'s answer`);
+        let pc = receivePCs[data.id];
+        await pc.setRemoteDescription(data.sdp);
+        console.log(`socketID(${data.id})'s set remote sdp success`);
+      } catch (error) {
+        console.log(error);
+      }
+    });
+
+    newSocket.on("getReceiverCandidate", async (data) => {
+      try {
+        console.log(data);
+        console.log(`get socketID(${data.id})'s candidate`);
+        let pc = receivePCs[data.id];
+        if (!data.candidate) return;
+        pc.addIceCandidate(new RTCIceCandidate(data.candidate));
+        console.log(`socketID(${data.id})'s candidate add success`);
+      } catch (error) {
+        console.log(error);
+      }
+    });
+
+    setSocket(newSocket);
+
+    navigator.mediaDevices
+      .getUserMedia({
+        audio: true,
+        video: {
+          width: 375,
+          height: 260,
+        },
+      })
+      .then((stream) => {
+        if (localVideoRef.current) localVideoRef.current.srcObject = stream;
+
+        localStream = stream;
+
+        sendPC = createSenderPeerConnection(newSocket, localStream);
+        createSenderOffer(newSocket);
+
+        newSocket.emit("joinRoom", {
+          id: newSocket.id,
+          roomID: roomId,
+        });
+      })
+      .catch((error) => {
+        console.log(`getUserMedia error: ${error}`);
+      });
+  }, []);
+
+  const createReceivePC = (id, newSocket) => {
+    try {
+      console.log(`socketID(${id}) user entered`);
+      let pc = createReceiverPeerConnection(id, newSocket);
+      createReceiverOffer(pc, newSocket, id);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const createSenderOffer = async (newSocket) => {
+    try {
+      let sdp = await sendPC.createOffer({
+        offerToReceiveAudio: false,
+        offerToReceiveVideo: false,
+      });
+      console.log("create sender offer success");
+      await sendPC.setLocalDescription(new RTCSessionDescription(sdp));
+      console.log(sdp, "안", newSocket.id, "녕", roomId);
+
+      newSocket.emit("senderOffer", {
+        sdp,
+        senderSocketID: newSocket.id,
+        roomID: roomId,
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const createReceiverOffer = async (pc, newSocket, senderSocketID) => {
+    try {
+      let sdp = await pc.createOffer({
+        offerToReceiveAudio: true,
+        offerToReceiveVideo: true,
+      });
+      console.log("create receiver offer success");
+      await pc.setLocalDescription(new RTCSessionDescription(sdp));
+      console.log(sdp, newSocket.id, senderSocketID, roomId);
+      newSocket.emit("receiverOffer", {
+        sdp,
+        receiverSocketID: newSocket.id,
+        senderSocketID,
+        roomID: roomId,
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const createSenderPeerConnection = (newSocket, localStream) => {
+    let pc = new RTCPeerConnection(pc_config);
+
+    pc.onicecandidate = (e) => {
+      if (e.candidate) {
+        console.log("sender PC onicecandidate");
+        newSocket.emit("senderCandidate", {
+          candidate: e.candidate,
+          senderSocketID: newSocket.id,
+        });
+      }
+    };
+
+    pc.oniceconnectionstatechange = (e) => {
+      console.log(e);
+    };
+
+    if (localStream) {
+      console.log("localstream add");
+      localStream.getTracks().forEach((track) => {
+        pc.addTrack(track, localStream);
+      });
+    } else {
+      console.log("no local stream");
+    }
+
+    // return pc
+    return pc;
+  };
+
+  const createReceiverPeerConnection = (socketID, newSocket) => {
+    let pc = new RTCPeerConnection(pc_config);
+
+    // add pc to peerConnections object
+    receivePCs = { ...receivePCs, [socketID]: pc };
+
+    pc.onicecandidate = (e) => {
+      if (e.candidate) {
+        console.log("receiver PC onicecandidate");
+        newSocket.emit("receiverCandidate", {
+          candidate: e.candidate,
+          receiverSocketID: newSocket.id,
+          senderSocketID: socketID,
+        });
+      }
+    };
+
+    pc.oniceconnectionstatechange = (e) => {
+      console.log(e);
+    };
+
+    pc.ontrack = (e) => {
+      console.log("ontrack success");
+      setUsers((oldUsers) => oldUsers.filter((user) => user.id !== socketID));
+      setUsers((oldUsers) => [
+        ...oldUsers,
+        {
+          id: socketID,
+          stream: e.streams[0],
+        },
+      ]);
+    };
+
+    // return pc
+    return pc;
+  };
 
   return (
     <div className="container">
-      <div className="row">
-        <div className="col mt-3 d-flex justify-content-space-between" style={{ backgroundColor: '#FCF4FF' }}>
+      {/* {console.log(users)} */}
+      <div className="mt-3" style={{ backgroundColor: "#FCF4FF" }}>
+        <div
+          className="m-2 d-flex fw-bold text-center"
+          style={{ color: "#4A4251", fontSize: "20px" }}
+        >
           <img
-            className="rounded-circle"
+            className="rounded-circle me-2"
             src="/cherry.jpg"
             width="40px"
             height="40px"
           />
-          <p
-            className="m-2"
-            style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}
-          >
-            {user}님이 화면공유중...
-            <br />
-          </p>
-          <div className="col m-5"></div>
+          {user}님이 화면공유중...
         </div>
+        <video
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            width: 375,
+            height: 260,
+            backgroundColor: "black",
+          }}
+          muted
+          ref={localVideoRef}
+          autoPlay
+        />
+        {/* {users.map((user, index) => {
+            return <Video key={index} stream={user.stream} />;
+          })} */}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Screen
+export default Screen;

client/src/components/Room/User.js

@@ -2,7 +2,7 @@ const User = () => {
   return (
     <div className="container">
       <div className="row">
-        <div className="col" style={{ backgroundColor: "#DEC7F5", position:'absolute', bottom:'58px', width: '414px'}}>
+        <div className="col" style={{ backgroundColor: "#ded0fa", position:'absolute', bottom:'58px', width: '414px'}}>
           <p
             className="m-2"
             style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}

client/src/components/SignUp.js

 import axios from "axios";
 import { useEffect, useState } from "react";
+import { Redirect } from "react-router-dom";
 import userApi from "../apis/user.api";
-
+// import catchErrors from "../context/catchError";
+// import auth from "../context/auth_context"
 const INIT_USER = {
   name: "",
   idNumber1: "",
@@ -17,6 +19,7 @@ const Signup = () => {
   const [error, setError] = useState("");
   const [disabled, setDisabled] = useState(false);
   const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     setDisabled(
@@ -40,11 +43,13 @@ const Signup = () => {
   async function handleSubmit() {
     try {
       const data = await userApi.signup(user)
+      // const data = await axios.post("https://localhost:8080/api/room/1/1",user)
       setLoading(true);
       setError("");
-      //   const success = await login(user.email, user.password);
+      // const success = await login(user.email, user.password);
+      // const data = await axios.post("/api/room/1/1",user)
       console.log(data);
-      setSuccess(success);
+      setSuccess(true);
     } catch (error) {
       // catchErrors(error, setError);
     } finally {
@@ -54,6 +59,7 @@ const Signup = () => {
 
   if (success) {
     alert('회원가입 되었습니다.')
+    return <Redirect to="/" />;
   }
 
 

client/src/context/auth.js

+import axios from 'axios'
+
+export function handleLogin(userId) {
+  localStorage.setItem("user", userId)
+}
+
+export async function handleLogout() {
+  alert("로그아웃되었습니다.")
+  localStorage.removeItem("user")
+  await axios.get('/api/auth/logout') 
+  window.location.href='/'
+}
+
+export function isAuthenticated() {
+  const userId = localStorage.getItem('loginStatus')
+  if (userId) {
+      return userId
+  }else{
+      return false
+  }
+}

client/src/context/auth_context.js

 import axios from "axios";
 import { createContext, FC, useCallback, useContext, useState } from "react";
-import authApi from "../apis/auth.api";
+import authApi from "../apis/user.api";
 import { getLocalUser } from "../utils/auth";
 import baseUrl from "../utils/baseUrl";
 import catchErrors from "../utils/catchErrors";

client/src/context/catchError.js

+function catchErrors(error, displayError) {
+    let errorMsg
+
+    if (error.response) {
+        errorMsg = error.response.data
+        console.log(errorMsg)
+    }else if (error.requset) {
+        errorMsg = error.requset
+        console.log(errorMsg)
+    } else {
+        errorMsg = error.message
+        console.log(errorMsg)
+    }
+    displayError(errorMsg)
+}
+
+export default catchErrors

client/src/scss/custom.scss

-$primary: #e8b7ff;
+$primary: #f5cfe3;
 $secondary: #df99ff;
 $info: #fcf4ff;
 $warning: #ff0000;