merge-all

client/src/components/Room/RoomHeader.js

-import { Link } from 'react-router-dom'
+import { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import roomApi from '../../apis/room.api';
+import catchErrors from '../../context/catchError';
+
+const INIT_ROOM = {
+  profileimg: "",
+};
+
 
 const RoomHeader = () => {
+  const {roomId}=useParams();
+  const [room, setRoom] = useState([INIT_ROOM]);
+  const [error, setError] = useState("")
+  async function getRoom(Id) {
+    try {
+      const Room = await roomApi.getRoom([Id]);
+        setRoom({profileimg: Room[0].profileimg})
+        console.log(room)
+      }
+     catch (error) {
+      catchErrors(error, setError);
+    }
+  }
+
+  useEffect(() => {
+    getRoom(roomId);
+  }, [roomId]);
+
   return (
     <div
       className="d-flex justify-content-between align-items-center p-2"
@@ -9,7 +35,7 @@ const RoomHeader = () => {
       <div className="d-flex align-items-center">
         <img
           className="rounded-circle"
-          src="/cherry.jpg"
+          src={`/roomUploads/${room.profileimg}`}
           width="40px"
           height="40px"
         />

client/src/components/Room/Screen.js

@@ -31,9 +31,12 @@ const Screen = () => {
   };
 
   useEffect(() => {
-    let newSocket = io("http://localhost:8080");
+    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);
     });
 
@@ -53,6 +56,7 @@ const Screen = () => {
     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);
@@ -83,6 +87,7 @@ const Screen = () => {
 
     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;
@@ -139,6 +144,7 @@ const Screen = () => {
       });
       console.log("create sender offer success");
       await sendPC.setLocalDescription(new RTCSessionDescription(sdp));
+      console.log(sdp, "안", newSocket.id, "녕", roomId);
 
       newSocket.emit("senderOffer", {
         sdp,
@@ -158,6 +164,7 @@ const Screen = () => {
       });
       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,
@@ -238,12 +245,12 @@ const Screen = () => {
 
   return (
     <div className="container">
+      {/* {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" }}
         >
-          {console.log(users)}
           <img
             className="rounded-circle me-2"
             src="/cherry.jpg"
@@ -265,8 +272,8 @@ const Screen = () => {
           autoPlay
         />
         {/* {users.map((user, index) => {
-          return <Video key={index} stream={user.stream} />;
-        })} */}
+            return <Video key={index} stream={user.stream} />;
+          })} */}
       </div>
     </div>
   );

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"
+import axios from 'axios'
+import { useEffect, useState } from 'react'
+import { Link, Redirect } from 'react-router-dom'
+import userApi from '../apis/user.api'
+import catchErrors from '../context/catchError'
+
 const INIT_USER = {
-  name: "",
-  idNumber1: "",
-  idNumber2: "",
-  email: "",
-  password: "",
-  checkpw: "",
-  phone: "",
-};
+  name: '',
+  email: '',
+  password: '',
+  checkpw: '',
+  phone: '',
+}
 
 const Signup = () => {
-  const [user, setUser] = useState(INIT_USER);
-  const [error, setError] = useState("");
-  const [disabled, setDisabled] = useState(false);
-  const [success, setSuccess] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [user, setUser] = useState(INIT_USER)
+  const [error, setError] = useState('')
+  const [disabled, setDisabled] = useState(false)
+  const [success, setSuccess] = useState(false)
 
   useEffect(() => {
-    setDisabled(
-      !(
-        user.name &&
-        user.idNumber1 &&
-        user.idNumber2 &&
-        user.email &&
-        user.password &&
-        user.checkpw
-      )
-    );
-  }, [user]);
+    setDisabled(!(user.name && user.email && user.password && user.checkpw))
+  }, [user])
 
   function handleChange(event) {
-    const { name, value } = event.target;
-    setUser({ ...user, [name]: value });
-    // console.log(user);
+    const { name, value } = event.target
+    setUser({ ...user, [name]: value })
+    // console.log('user정보', user)
   }
 
-  async function handleSubmit() {
-    console.log(user)
+  async function handleSubmit(e) {
+    e.preventDefault()
     try {
-      const data = await userApi.signup(user)
-      setLoading(true);
-      setError("");
-      // const success = await login(user.email, user.password);
-      // const data = await axios.post("/api/room/1/1",user)
-      console.log(data);
-      setSuccess(true);
+      // console.log('checkPassword:',checkPassword())
+      // const passwordMatch = checkPassword()
+      if (checkPassword()) {
+        const res = await userApi.signup(user)
+        console.log('서버연결됬나요', res)
+        console.log('회원가입')
+        setSuccess(true)
+        setError('')
+      }
     } catch (error) {
-      // catchErrors(error, setError);
+      console.log('에러발생')
+      catchErrors(error, setError)
     } finally {
-      setLoading(false);
+      // setLoading(false);
     }
   }
 
-  if (success) {
-    alert('회원가입 되었습니다.')
-    return <Redirect to="/" />;
+  function checkPassword(event) {
+    const p1 = user.password
+    const p2 = user.checkpw
+    if (p1 !== p2) {
+      alert('비밀번호가 일치하지 않습니다.')
+      return false
+    } else {
+      return true
+    }
   }
 
+  if (success) {
+    alert('회원가입이 완료되었습니다!')
+    window.location.href = '/'
+  }
 
-  const { name, idNumber1, idNumber2, id, password, checkpw, phone } = user;
+  const { name, id, password, checkpw, phone } = user
   return (
-    <div className="modal-content">
+    <div className="container">
+      {error && <div className="alert alert-danger">{error}</div>}
       <form onSubmit={handleSubmit}>
-        <div className="modal-header">
-          <h5 className="modal-title" id="loginModalLabel">
-            회원가입
-          </h5>
-          <button
-            type="button"
-            className="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
+        <div className="m-3 d-flex justify-content-center">
+          <Link to="/">
+            <img src="/BORA.png" style={{ width: '160px' }} />
+          </Link>
         </div>
-        <div className="modal-body">
+        <div className="row mt-4">
+          <h5 style={{ textAlign: 'center' }}>회원가입</h5>
+        </div>
+        <div className="form-group">
           <div className="p-2">
             <label className="p-1">이름</label>
             <input
@@ -91,38 +90,6 @@ const Signup = () => {
               onChange={handleChange}
             />
           </div>
-          <div className="p-2">
-            <label className="p-1">주민등록번호</label>
-            <div className="d-flex text-center">
-              <div className="col-4">
-                <input
-                  className="mt-2 form-control"
-                  id="idNumber1"
-                  type="text"
-                  name="idNumber1"
-                  placeholder="●●●●●●"
-                  maxLength='6'
-                  value={idNumber1}
-                  onChange={handleChange}
-                />
-              </div>
-              <div className="col-1 pt-3 ps-2">ㅡ</div>
-              <div className="col-1">
-                <input
-                  className="mt-2 ms-2 form-control"
-                  id="idNumber2"
-                  type="text"
-                  style={{width:'35px'}}
-                  name="idNumber2"
-                  placeholder="●"
-                  value={idNumber2}
-                  onChange={handleChange}
-                  maxLength='1'
-                />
-              </div>
-              <div className="pt-3 ps-4">* * * * * *</div>
-            </div>
-          </div>
           <div className="p-2">
             <label className="p-1">아이디</label>
             <input
@@ -160,7 +127,7 @@ const Signup = () => {
             />
           </div>
           <div className="p-2">
-            <label className="p-1">전화번호(선택)</label>
+            <label className="p-1">전화번호</label>
             <input
               className="form-control"
               id="phone"
@@ -171,15 +138,21 @@ const Signup = () => {
               onChange={handleChange}
             />
           </div>
-        </div>
-        <div className="modal-footer">
-          <button type="submit" className="btn btn-primary" disabled={disabled}>
-            회원가입
-          </button>
+          {/* {console.log(disabled)} */}
+          <div className="mt-3 d-flex justify-content-center">
+            <button
+              type="submit"
+              className="btn btn-primary"
+              onClick={handleSubmit}
+              disabled={disabled}
+            >
+              회원가입
+            </button>
+          </div>
         </div>
       </form>
     </div>
-  );
-};
+  )
+}
 
-export default Signup;
+export default Signup

client/src/pages/HomeGuestPage.js

+import { Link } from "react-router-dom";
 import Login from "../components/Login";
 import SignUp from "../components/SignUp";
 
@@ -6,44 +7,22 @@ const HomeGuestPage = () => {
     <div className="d-flex flex-column justify-content-center h-100 font-weight-bold">
       <img src="BORA.PNG" className="w-100 p-4" />
       <div className="d-flex flex-column align-items-center">
+        <Link to="/login">
         <button
           type="button"
-          className="col-4 btn btn-info"
-          data-bs-toggle="modal"
-          data-bs-target="#loginModal"
+          className="row-4 btn btn-info"
         >
           로그인
         </button>
-        <div
-          className="modal fade"
-          id="loginModal"
-          tabIndex="-1"
-          aria-labelledby="loginModalLabel"
-          aria-hidden="true"
-        >
-          <div className="modal-dialog">
-            <Login />
-          </div>
-        </div>
+        </Link>
+        <Link to="/signup">
         <button
           type="button"
-          className="col-4 btn btn-info"
-          data-bs-toggle="modal"
-          data-bs-target="#signupModal"
+          className="row-4 btn btn-info"
         >
           회원가입
         </button>
-      </div>
-      <div
-        className="modal fade"
-        id="signupModal"
-        tabIndex="-1"
-        aria-labelledby="signupModalLabel"
-        aria-hidden="true"
-      >
-        <div className="modal-dialog">
-          <SignUp />
-        </div>
+        </Link>
       </div>
     </div>
   );

client/src/pages/InitRoomPage.js

+import ChannelList from '../components/Room/ChannelList'
+import InitRoom from '../components/Room/InitRoom'
+
+const InitRoomPage = () => {
+  return (
+    <div>
+      <ChannelList />
+      <InitRoom />
+    </div>
+  )
+}
+
+export default InitRoomPage

client/src/pages/InvitePage.js

@@ -10,7 +10,7 @@ const InvitePage = () => {
 
   function Invitereject() {
     // if () //초대받은 사람이 로그인 o
-    //   <Link to="/user"></Link>//유저 페이지로 이동.
+    //   <Link to="/user/:id"></Link>//유저 페이지로 이동.
     // else //로그인x
     //   <Link to="/"></Link> //메인화면으로 이동.
   }

server/.gitignore

@@ -2,4 +2,5 @@ node_modules/
 package-lock.json
 config/
 env.development
-/uploads
+/uploads
\ No newline at end of file
+/roomUploads
\ No newline at end of file

server/controllers/room.controller.js

 import { Room, User } from "../models/index.js";
-import { customAlphabet } from 'nanoid'
-import isLength from 'validator/lib/isLength.js'
+import { customAlphabet } from "nanoid";
+import isLength from "validator/lib/isLength.js";
+import RoomModel from "../models/room.model.js";
+import multer from "multer";
 
-const nanoid = customAlphabet('1234567890abcdef', 10)
+const nanoid = customAlphabet("1234567890abcdef", 10);
 
 const joinRoom = async (req, res) => {
-  const { userId, roomId } = req.body
+  const { userId, roomId } = req.body;
   const room_Id = await Room.findOne({ where: { id: roomId } });
-  if (Boolean(room_Id)) { //roomId에 일치하는 방이 존재할때
+  if (Boolean(room_Id)) {
+    //roomId에 일치하는 방이 존재할때
     //roomId에 일치하는 방의 member정보에 userId 저장하기
     //member정보에 userId가 이미 저장되어 있는지 확인 -> 이미 참여된 방인지 확인
     const includeUserId = room_Id.member.includes(parseInt(userId));
-    // console.log('Include확인:',includeUserId) 
-    if (!includeUserId) { //아직 참여되지 않은 방인경우
-      room_Id.member.push(userId) //member에 userId추가
+    // console.log('Include확인:',includeUserId)
+    if (!includeUserId) {
+      //아직 참여되지 않은 방인경우
+      room_Id.member.push(userId); //member에 userId추가
       // console.log('room_Id.member2:', room_Id.member)
-      await Room.update({ 'member': room_Id.member }, { where: { id: roomId } })
+      await Room.update({ member: room_Id.member }, { where: { id: roomId } });
 
       //userId에 일치하는 사용자의 roomNumber에 roomId저장하기
       const user_Id = await User.findOne({ where: { id: userId } });
-      if (Boolean(user_Id.roomNumber)) { //다른 roomNumber가 이미 들어가 있는 경우 roomId추가
-        user_Id.roomNumber.push(roomId)
-      }
-      else { //첫 roomNumber인 경우 
-        user_Id.roomNumber = [roomId]
+      if (Boolean(user_Id.roomNumber)) {
+        //다른 roomNumber가 이미 들어가 있는 경우 roomId추가
+        user_Id.roomNumber.push(roomId);
+      } else {
+        //첫 roomNumber인 경우
+        user_Id.roomNumber = [roomId];
       }
       // console.log('user_Id.roomNumber2:', user_Id.roomNumber)
-      await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: userId } })
+      await User.update(
+        { roomNumber: user_Id.roomNumber },
+        { where: { id: userId } }
+      );
+      res.json(true)
     } else {
-      return res.status(422).send('이미 참여된 방입니다.')
+      return res.status(422).send("이미 참여된 방입니다.");
     }
   } else {
-    return res.status(422).send('참여코드와 일치하는 방이 존재하지 않습니다.')
+    return res.status(422).send("참여코드와 일치하는 방이 존재하지 않습니다.");
   }
 };
 
+const upLoadRoomImg = multer({ dest: "roomUploads/" });
+const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]);
+
 const createRoom = async (req, res) => {
-  // console.log('룸정보', req.body)
-  const { name, owner, member, profileimg } = req.body;
+  const { userId, name } = req.body;
+  const avatar = req.files["profileimg"][0];
+  const img = avatar.filename;
   const id = nanoid()
   const Id = await Room.findOne({ where: { id: id } });
   // console.log('id:', id)
-  while (Boolean(Id)) {
+  while (Id) {
     const id = nanoid()
     const Id = await Room.findOne({ where: { id: id } });
   }
   try {
     if (!isLength(name, { min: 3, max: 20 })) {
-      return res.status(422).send('방이름은 3-20자여야 합니다.')
+      return res.status(422).send("방이름은 3-20자여야 합니다.");
     }
     //새로운 RoomDB생성
     const newRoom = {
       id: id,
       name: name,
-      owner: owner,
-      member: [member],
-      profileimg: profileimg,
+      owner: userId,
+      member: [userId],
+      profileimg: img,
     }
     // console.log('newRoom:', newRoom)
-    await Room.create(newRoom)
+    await Room.create(newRoom);
 
     //user.roomNumber에 id추가
-    const user_Id = await User.findOne({ where: { id: owner } });
+    const user_Id = await User.findOne({ where: { id: userId } });
     if (user_Id.roomNumber) { //다른 roomNumber가 이미 들어가 있는 경우 id추가
       user_Id.roomNumber.push(id)
     }
@@ -69,18 +82,26 @@ const createRoom = async (req, res) => {
       user_Id.roomNumber = [id]
     }
     // console.log('user_Id.roomNumber2:', user_Id.roomNumber)
-    await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: owner } })
+    await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: userId } })
     res.json(newRoom)
   } catch (error) {
-    console.log(error)
-    res.status(500).send('방생성 에러')
+    console.log(error);
+    res.status(500).send("방생성 에러");
   }
-}
+};
 
 const getRoom = async (req, res) => {
-  console.log('req.body:', req.body)
-}
+  console.log("fhgfghdgfdgf:", req.body);
+  try {
+    const roomlist = await Room.findAll({ where: { id: req.body} });
+    console.log(roomlist);
+    res.json(roomlist)
+  } catch (error) {
+    console.log(error);
+    res.status(500).send("에러");
+  }
+};
 
 export default {
-  joinRoom, createRoom, getRoom
+  joinRoom, roomImgUpload, createRoom, getRoom
 };

server/controllers/user.controller.js

@@ -39,7 +39,7 @@ const updateinfo = async (req, res) => {
   };
   await User.update(A, { where: { id: id } });
   const user = await User.findOne({ where: { id: id } });
-  console.log('user:',user)
+  console.log('user:', user)
 };
 const login = async (req, res) => {
   try {
@@ -69,37 +69,40 @@ const login = async (req, res) => {
 };
 
 const signup = async (req, res) => {
-  try {
-    // console.log('sign up= ', req.body)
-    const { name, email, password, gender, phone } = req.body
-    const id = Math.floor(Math.random() * (9999 - 1000) + 1000)
-    // console.log('id:', id)
-    const Id = await User.findOne({ where: { id: id } })
-    // console.log('Id 중복확인:', Id)
-    while (Id) {
-      const id = Math.floor(Math.random() * (9999 - 1000) + 1000);
-      const Id = await User.findOne({ where: { id: id } });
-    }
 
+  console.log('sign up= ', req.body)
+  const { name, email, password, phone } = req.body
+  const id = Math.floor(Math.random() * (9999 - 1000) + 1000)
+  // console.log('id:', id)
+  const Id = await User.findOne({ where: { id: id } })
+  // console.log('Id 중복확인:', Id)
+  while (Id) {
+    const id = Math.floor(Math.random() * (9999 - 1000) + 1000);
+    const Id = await User.findOne({ where: { id: id } });
+  }
+  try {
     const user = await User.findOne({ where: { email: email } });
-    if (user)
+    if (user) {
       return res.status(422).send(`${email} 이미 존재하는 사용자입니다.`);
-
-    if (!isLength(name, { min: 3, max: 10 })) {
-      return res.status(422).send("이름은 3-10자 사이입니다");
-    } else if (!isLength(password, { min: 6 })) {
-      return res.status(422).send("비밀번호는 6자이상 입니다");
-    } else if (!isLength(email, { min: 3, max: 10 })) {
-      return res.status(422).send("아이디는 3-10자 사이입니다");
+    } else {
+      if (!isLength(name, { min: 2, max: 10 })) {
+        return res.status(422).send("이름은 2-10자 사이입니다");
+      } else if (!isLength(password, { min: 6 })) {
+        return res.status(422).send("비밀번호는 6자이상 입니다");
+      } else if (!isLength(email, { min: 3, max: 10 })) {
+        return res.status(422).send("아이디는 3-10자 사이입니다");
+      }
+      const newUser = {
+        id: id,
+        name: name,
+        email: email,
+        password: password,
+        phone: phone,
+      }
+      console.log('newUser:',newUser)
+      await User.create(newUser)
+      res.json(true)
     }
-    const newUser = await User.create({
-      id: id,
-      name: name,
-      email: email,
-      password: password,
-      gender: gender,
-      phone: phone,
-    })
   } catch (error) {
     console.log(error);
     return res.status(500).send("회원가입 중 에러");

server/index.js

@@ -27,8 +27,8 @@ sequelize
       id: "1234567abc",
       name: "room",
       owner: 8888,
-      member: [8888,9999],
-      profileimg: "C:\fakepath\스크린샷(1).png",
+      member: [8888],
+      profileimg: "defaultimg",
     });
 
     await Room.create({
@@ -36,7 +36,7 @@ sequelize
       name: "room1",
       owner: 9999,
       member: [9999],
-      profileimg: "C:\fakepath\스크린샷(1).png",
+      profileimg: "defaultimg",
     });
 
     app.listen(appConfig.port, () => {

server/models/room.model.js

@@ -21,11 +21,11 @@ const RoomModel = (sequelize) => {
       },
       profileimg: {
         type: DataTypes.STRING,
-        defaultValue: "/user.png"
+        defaultValue: "defaultimg"
       },
       channel: {
         type: DataTypes.ARRAY(DataTypes.JSON),
-        defaultValue: [{'회의':""}],
+        defaultValue: [{"회의": ["지원", "재연"]}, {"사담": ["지원", "재연", "서연"]}],
       },
     },
     { timestamps: true }

server/models/user.model.js

 import bcrypt from "bcryptjs";
 import pkg from 'sequelize';
 const { DataTypes } = pkg;
-// import img from 'bora_it\client\public\user.png'
 
 const UserModel = (sequelize) => {
   const User = sequelize.define(
@@ -20,15 +19,12 @@ const UserModel = (sequelize) => {
       password: {
         type: DataTypes.STRING,
       },
-      gender: {
-        type: DataTypes.INTEGER,
-      },
       phone: {
         type: DataTypes.STRING,
       },
       img: {
         type: DataTypes.STRING,
-        // defaultValue: img
+        defaultValue:'defaultimg'
       },
       roomNumber: {
         type: DataTypes.ARRAY(DataTypes.STRING),

server/routes/room.route.js

@@ -3,7 +3,7 @@ import roomCrtl from "../controllers/room.controller.js";
 
 const router = express.Router();
 router.route("/getRoom").post(roomCrtl.getRoom);
-router.route("/create").post(roomCrtl.createRoom);
+router.route("/create").post(roomCrtl.roomImgUpload, roomCrtl.createRoom);
 router.route("/join").put(roomCrtl.joinRoom);
 
 export default router;