방방방

client/src/apis/room.api.js

 import axios from "axios";
 
-const getRoom = async (id) => {
-  const { data } = await axios.get(`/api/room/getRoom/${id}`);
+const getRoom = async (payload) => {
+  const { data } = await axios.post(`/api/room/getRoom`,payload);
   return data;
 };
 

client/src/components/Home/CreateRoom.js

@@ -45,7 +45,7 @@ const CreateRoom = () => {
     if (success) {
         console.log('success', success)
         alert('룸생성이 완료되었습니다!')
-        return <Redirect to="/user"/>
+        window.location.href='/user'
     }
 
     const { name, owner, member, profileimg } = room;

client/src/components/Home/RoomSingle.js

@@ -2,29 +2,38 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom'
 import roomApi from '../../apis/room.api';
 import userApi from '../../apis/user.api';
+import catchErrors from '../../context/catchError';
 
+const id = localStorage.getItem('user');
+const INIT_ROOM={
+  name:"",
+  profileimg:"",
+  member:"",
+}
 const RoomSingle = () => {
-  const [roomNum, setRoomNum] = useState('')
-  const [room, setRoom] = useState([])
-  const id = localStorage.getItem('user');
+  const [room, setRoom] = useState(INIT_ROOM)
+  const [error,setError]=useState('')
   const channelId = 1
 
-  // async function getJoinRoom(Id) {
-  //   try {
-  //     const user = await userApi.getUser({id: Id})
-  //     console.log('User1:',user)
-  //     console.log('User2:',user.roomNumber)
-  //     const RoomNumArr = user.roomNumber
-  //     console.log('setRoomNum:',RoomNumArr)
-  //     const Room = await roomApi.getRoom(RoomNumArr)
-  //   } catch (error) {
-  //     // catchErrors(error, setError)
-  //   }
-  // }
+  async function getJoinRoom(Id) {
+    try {
+      const User = await userApi.getUser(Id)
+      const RoomNumArr = User.roomNumber
+      const Room= await roomApi.getRoom(RoomNumArr)
+      console.log(Room[0])
+      const rrr=Room[0]
+      const memcount= rrr.member.length
+      setRoom({...room, name:rrr.name, profileimg: rrr.profileimg, member:memcount})
+      console.log(room)
+
+    } catch (error) {
+      catchErrors(error, setError)
+    }
+  }
 
-  // useEffect(() => {
-  //   getJoinRoom(id)
-  // }, [id])
+  useEffect(() => {
+    getJoinRoom(id)
+  }, [id])
 
   return (
     <Link
@@ -36,11 +45,11 @@ const RoomSingle = () => {
         style={{ backgroundColor: '#C4C4C4' }}
       >
         <div style={{ width: '37px', height: '37px' }}>
-          <img
-            src="BORA.png"
+          {/* <img
+            src={`/roomUploads/${profileimg}`}
             className="rounded-circle"
             style={{ width: '37px', height: '37px' }}
-          />
+          /> */}
         </div>
         <div
           className="mx-3 mt-2"
@@ -51,9 +60,9 @@ const RoomSingle = () => {
             msOverflowStyle:'none',
           }}
         >
-          데계 재미있는 수학과 데계데계데계 재미있는 수학과
+          {room.name}
         </div>
-        <div className="ms-auto mt-2"> 15/34 </div>
+        <div className="ms-auto mt-2"> {room.member}/100 </div>
       </div>
 
     </Link>

client/src/components/Login.js

-import { useEffect, useState } from 'react'
+import { useEffect, useState,useRef } from 'react'
 import { Redirect } from 'react-router-dom'
 import userApi from '../apis/user.api'
 import catchErrors from "../context/catchError";
@@ -27,12 +27,10 @@ const Login = () => {
 
   async function handleSubmit(e) {
     e.preventDefault()
-    console.log('로그인')
     try {
       // setLoading(true);
       // setError("");
       const data = await userApi.login(user)
-      console.log(data)
       handleLogin(data.id)
       setSuccess(true)
     } catch (error) {
@@ -43,8 +41,8 @@ const Login = () => {
     }
   }
   if (success) {
-    alert('로그인 되었습니다')
-    return <Redirect to="/user" />
+    alert('로그인 되었습니다');
+    window.location.href='/user'
   }
 
   const { email, password } = user
@@ -95,7 +93,6 @@ const Login = () => {
             type="submit"
             className="btn btn-primary"
             disabled={disabled}
-            data-bs-dismiss="modal"
           >
             로그인
           </button>

client/src/components/Room/LeftHamburger.js

 import backward from "../../backward.png";
 import ChannelSingle from "./ChannelSingle";
+import catchErrors from "../../context/catchError";
+import roomApi from "../../apis/room.api";
+import { useState } from "react";
+
+const userId = localStorage.getItem('user');
+const INIT_ROOM = {
+    name: '',
+    owner: userId,
+    member: userId,
+    profileimg: '',
+}
 
 const LeftHamberger = () => {
+
     function roomIdCopy() {
         const t = document.querySelector("#roomId").innerText;
         console.log(t);
@@ -47,7 +59,7 @@ const LeftHamberger = () => {
                     </p>
                     <h6 className="mt-2" id="roomId">
                         {" "}
-                        #ASV2AE985{" "}
+                        {" "}
                     </h6>
                     <button
                         type="button"

client/src/components/SignUp.js

@@ -53,7 +53,7 @@ const Signup = () => {
   }
   if (success) {
     alert("회원가입 되었습니다.");
-    <Redirect to="/" />;
+    window.location.href='/'
   }
 
   const { name, id, password, checkpw, phone } = user;

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";
 
-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추가
+    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 } }
+      );
     } else {
-      return res.status(422).send('이미 참여된 방입니다.')
+      return res.status(422).send("이미 참여된 방입니다.");
     }
   } else {
-    return res.status(422).send('참여코드와 일치하는 방이 존재하지 않습니다.')
+    return res.status(422).send("참여코드와 일치하는 방이 존재하지 않습니다.");
   }
 };
 
 const createRoom = async (req, res) => {
   // console.log('룸정보', req.body)
   const { name, owner, member, profileimg } = req.body;
-  const id = nanoid()
+  const id = nanoid();
   const Id = await Room.findOne({ where: { id: id } });
   // console.log('id:', id)
   while (Boolean(Id)) {
-    const id = nanoid()
+    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 = {
@@ -56,31 +63,46 @@ const createRoom = async (req, res) => {
       owner: owner,
       member: [member],
       profileimg: profileimg,
-    }
+    };
     // console.log('newRoom:', newRoom)
-    await Room.create(newRoom)
+    await Room.create(newRoom);
 
     //user.roomNumber에 id추가
     const user_Id = await User.findOne({ where: { id: owner } });
-    if (Boolean(user_Id.roomNumber)) { //다른 roomNumber가 이미 들어가 있는 경우 id추가
-      user_Id.roomNumber.push(id)
-    }
-    else { //첫 roomNumber인 경우 
-      user_Id.roomNumber = [id]
+    if (Boolean(user_Id.roomNumber)) {
+      //다른 roomNumber가 이미 들어가 있는 경우 id추가
+      user_Id.roomNumber.push(id);
+    } else {
+      //첫 roomNumber인 경우
+      user_Id.roomNumber = [id];
     }
     // console.log('user_Id.roomNumber2:', user_Id.roomNumber)
-    await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: owner } })
-    res.json(newRoom)
+    await User.update(
+      { roomNumber: user_Id.roomNumber },
+      { where: { id: owner } }
+    );
+    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);
+  const roomId = req.body
+  try {
+    const roomlist = await Room.findAll({ where: { id: roomId } });
+    console.log(roomlist);
+    res.json(roomlist)
+  } catch (error) {
+    console.log(error);
+    res.status(500).send("에러");
+  }
+};
 
 export default {
-  joinRoom, createRoom, getRoom
+  joinRoom,
+  createRoom,
+  getRoom,
 };

models/room.model.js

@@ -20,7 +20,7 @@ const RoomModel = (sequelize) => {
       },
       profileimg: {
         type: DataTypes.STRING,
-        defaultValue: "/user.png"
+        defaultValue: "defaultimg"
       },
       channel: {
         type: DataTypes.ARRAY(DataTypes.JSON),