퇴장완료!예예~~~

client/src/apis/room.api.js

@@ -5,6 +5,11 @@ const getRoom = async (id) => {
   return data;
 };
 
+const exitRoom = async (ID) => {
+  const { data } = await axios.delete(`/api/room/exitRoom/${ID.id}/${ID.roomId}`);
+  return data;
+};
+
 const create = async (formData) => {
   const { data } = await axios.post("/api/room/create", formData);
   return data;
@@ -15,6 +20,6 @@ const join = async (payload) => {
   return data;
 };
 
-const roomApi = { getRoom, create, join };
+const roomApi = { getRoom, exitRoom, create, join };
 
 export default roomApi;

client/src/components/Home/RoomSingle.js

@@ -6,7 +6,7 @@ import catchErrors from "../../context/catchError";
 
 const id = localStorage.getItem("user");
 const INIT_ROOM = {
-  roomId:"",
+  roomId: "",
   name: "",
   profileimg: "",
   member: "",
@@ -15,7 +15,7 @@ const RoomSingle = () => {
   const [room, setRoom] = useState([INIT_ROOM]);
   const [error, setError] = useState("");
   const channelId = 'main';
-  const {roomId}=useParams(room.roomId);
+  const { roomId } = useParams(room.roomId);
   async function getJoinRoom(Id) {
     try {
       const User = await userApi.getUser(Id);
@@ -24,7 +24,7 @@ const RoomSingle = () => {
       let roomlist = [];
       for (let prop in Room) {
         roomlist.push({
-          roomId:Room[prop].id,
+          roomId: Room[prop].id,
           name: Room[prop].name,
           profileimg: Room[prop].profileimg,
           member: Room[prop].member.length,
@@ -38,12 +38,15 @@ const RoomSingle = () => {
   useEffect(() => {
     getJoinRoom(id);
   }, [id]);
+  console.log(room)
 
   const { profileimg } = room;
   return (
     <div>
       {room &&
         room.map((el) => (
+          <div>
+            {room === INIT_ROOM ? (<div></div>): (
             <Link
               to={`/room/${el.roomId}/${channelId}`}
               className="text-decoration-none text-dark"
@@ -72,7 +75,8 @@ const RoomSingle = () => {
                 </div>
                 <div className="ms-auto mt-2"> {el.member}/100 </div>
               </div>
-          </Link>
+            </Link>)}
+          </div>
         ))}
     </div>
   );

client/src/components/Room/ChannelSingle.js

-import { Link, Route, Switch, useParams } from "react-router-dom";
+import { Link, useParams } from 'react-router-dom'
 
 const ChannelSingle = (props) => {
-  const { roomId } = useParams();
-  console.log("props", props.channel);
+  const { roomId, channelId } = useParams()
+  console.log('props', props.channel)
+  console.log('hi', channelId)
   return (
     <div>
-      <div className="overflow-auto" style={{ height: "610px" }}>
+      <div className="overflow-auto" style={{ height: '610px' }}>
         {props.channel.map((el) => (
           <div className="mb-3">
-            <Link to={`${roomId}/${el.channelName}`}>
+            <Link to={`/room/${roomId}/${el.channelName}`}>
               <div
                 className="m-3 p-1 row"
-                style={{ backgroundColor: "#E0CEE8" }}
+                style={{ backgroundColor: '#E0CEE8' }}
               >
+                {el.channelName === channelId ? (
                   <img
                     className="col-auto mt-2"
                     src="/fullSpeaker.png"
                     width="25px"
                     height="25px"
                   />
-                <h5 className="col mt-2" style={{ color: "black" }}>
+                ) : (
+                  <img
+                    className="col-auto mt-2"
+                    src="/emptySpeaker.png"
+                    width="25px"
+                    height="25px"
+                  />
+                )}
+                <h5 className="col mt-2" style={{ color: 'black' }}>
                   {el.channelName}
                 </h5>
-              </div>{" "}
+              </div>
             </Link>
 
             {el.joinName &&
               el.joinName.map((e) => (
                 <div>
-                  <ul className="mx-5" style={{ color: "#76D079" }}>
+                  <ul className="mx-5" style={{ color: '#76D079' }}>
                     <li>
-                      <p style={{ color: "black" }}>{e}</p>
+                      <p style={{ color: 'black' }}>{e}</p>
                     </li>
                   </ul>
                 </div>
@@ -39,7 +49,7 @@ const ChannelSingle = (props) => {
         ))}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default ChannelSingle;
+export default ChannelSingle
\ No newline at end of file

client/src/components/Room/RightHamburger.js

 import { useState, useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import ChannelSingle from "./ChannelSingle";
 import Rightimg from "../../images/RightHamburgerImg.png";
 import RoomApi from "../../apis/room.api";
@@ -10,42 +10,40 @@ const INIT_CHANNEL = {
     channelName: "",
     joinName: [],
 };
-
-const INIT_ROOM = {
-  name: "",
-};
 const RightHamburger = () => {
     const [channel, setChannel] = useState([INIT_CHANNEL]);
-  const [room, setRoom] = useState([INIT_ROOM]);
     const { roomId } = useParams();
     const [error, setError] = useState("");
+    const id = localStorage.getItem('user');
 
-  async function getroom(Id) {
+    async function exitRoom() {
+        console.log('id, roomid정보', id, roomId)
         try {
-      const Room = await roomApi.getRoom([Id]);
-      setRoom({...room, name:Room[0].name})
+            const data = await roomApi.exitRoom({ id, roomId })
+            console.log(data)
         } catch (error) {
             catchErrors(error, setError);
         }
+
+
     }
 
     async function getChannel(roomId) {
         // console.log('roomId', roomId)
-    const ID = roomId;
+        const ID = roomId
         try {
             const data = await roomApi.getRoom([ID]);
-      const Channel = data[0].channel;
-      // console.log('방데이터:', Channel)
+            const Channel = data[0].channel
+            console.log('방데이터:', Channel)
             const channelList = [];
-      for (const prop in Channel) {
-        // Channel의 항목(prop)으로 작업을 실행합니다
+            for (const prop in Channel) { // Channel의 항목(prop)으로 작업을 실행합니다
                 for (const key in Channel[prop]) {
-          // console.log(key)
-          // console.log(prop)
-          // console.log(Channel[prop][key])
+                    console.log(key)
+                    console.log(prop)
+                    console.log(Channel[prop][key])
                     channelList.push({
                         channelName: key,
-            joinName: Channel[prop][key],
+                        joinName: Channel[prop][key]
                     });
                 }
             }
@@ -57,16 +55,9 @@ const RightHamburger = () => {
     // console.log(channel)
 
     useEffect(() => {
+        // console.log('roomId', roomId)
         getChannel(roomId);
-    getroom(roomId)
     }, [roomId]);
-
-  function roomIdCopy() {
-    const t = document.querySelector("#roomId").innerText;
-    console.log(t);
-    navigator.clipboard.writeText(t);
-    document.execCommand("copy");
-  }
     return (
         <div>
             <div>
@@ -103,7 +94,7 @@ const RightHamburger = () => {
                             color: "#000000",
                         }}
                     >
-            {room.name}
+                        방 이름{/*Room.name*/}
                     </p>
                     <h6 className="mt-2" id="roomId">
                         {" "}
@@ -120,77 +111,6 @@ const RightHamburger = () => {
                 <ChannelSingle channel={channel} />
                 <div>
                     <div className="d-flex flex-row-reverse">
-            <button
-              type="button"
-              className="m-3 rounded"
-              data-bs-toggle="modal"
-              data-bs-target="#inviteRoom"
-              style={{
-                height: "30px",
-                fontWeight: "bold",
-                backgroundColor: "#E0CEE8",
-                color: "black",
-                border: "1px #D64D61",
-              }}
-            >
-              초대
-            </button>
-            <div
-              className="modal fade"
-              id="inviteRoom"
-              tabIndex="-1"
-              aria-labelledby="exitRoomLabel"
-              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">
-                      <button
-                        type="submit"
-                        className="col-2 p-1 btn btn-primary"
-                        style={{ width: "120px" }}
-                      >
-                        카카오로 초대
-                      </button>
-                      {/*
-                                            <button
-                                                type="submit"
-                                                className="col-2 p-1 btn btn-primary"
-                                                data-bs-toggle="modal"
-                                                data-bs-target="#copyRoomId"
-                                                onClick={roomIdCopy}
-                                                style={{ width: "120px" }}
-                                            >
-                                                방 Id 복사
-</button> */}
-                      <button
-                        type="submit"
-                        className="col-2 p-1 btn btn-primary"
-                        data-bs-dismiss="modal"
-                        style={{ width: "120px" }}
-                        onClick={roomIdCopy}
-                      >
-                        방 Id 복사
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div>
-              <div>
                         <button
                             type="button"
                             className="m-3 rounded text-white"
@@ -244,18 +164,21 @@ const RightHamburger = () => {
                                     </div>
                                     <div className="row mb-3">
                                         <div className="d-flex justify-content-evenly">
-                          {/* <Link to="/user/:id"> */}
+                                            <Link to={`/user/${id}`} className="col-2 p-1 btn btn-primary">
+                                            {/* <div onSubmit={exitSubmit}> */}
                                             <button
-                            type="submit"
-                            className="col-2 p-1 btn btn-primary"
+                                                type="button"
+                                                onClick={exitRoom}
+                                                className="btn btn-primary"
                                                 data-bs-dismiss="modal"
                                             >
                                                 예
                                             </button>
-                          {/* </Link> */}
+                                            {/* </div> */}
+                                            </Link>
                                             <button
                                                 type="submit"
-                            className="col-2 p-1 btn btn-primary"
+                                                className="btn btn-primary"
                                                 data-bs-dismiss="modal"
                                             >
                                                 아니요
@@ -269,8 +192,6 @@ const RightHamburger = () => {
                 </div>
             </div>
         </div>
-      </div>
-    </div>
     );
 };
 

server/controllers/room.controller.js

@@ -2,7 +2,6 @@ import { Room, User } from "../models/index.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);
 
@@ -44,6 +43,7 @@ const joinRoom = async (req, res) => {
   }
 };
 
+const multer = require("multer");
 const upLoadRoomImg = multer({ dest: "roomUploads/" });
 const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]);
 
@@ -91,10 +91,10 @@ const createRoom = async (req, res) => {
 };
 
 const getRoom = async (req, res) => {
-  console.log("fhgfghdgfdgf:", req.body);
+  // console.log("fhgfghdgfdgf:", req.body);
   try {
-    const roomlist = await Room.findAll({ where: { id: req.body} });
-    console.log(roomlist);
+    const roomlist = await Room.findAll({ where: { id: req.body } });
+    // console.log(roomlist);
     res.json(roomlist)
   } catch (error) {
     console.log(error);
@@ -102,6 +102,24 @@ const getRoom = async (req, res) => {
   }
 };
 
+const exitRoom = async (req, res) => {
+  const { id, roomId } = req.params
+  console.log(id, roomId)
+  const room = await Room.findOne({ where: { id: roomId } });
+  console.log(room.member)
+  const index = room.member.indexOf(id)
+  console.log('index',index)
+  room.member.splice(index,1)
+  await Room.update({ member: room.member }, { where: { id: roomId } });
+
+  const user = await User.findOne({ where: { id: id } });
+  console.log(user.roomNumber)
+  const index2 = user.roomNumber.indexOf(id)
+  console.log('index',index2)
+  user.roomNumber.splice(index2,1)
+  await User.update({ roomNumber: user.roomNumber }, { where: { id: id } });
+}
+
 export default {
-  joinRoom, roomImgUpload, createRoom, getRoom
+  joinRoom, roomImgUpload, createRoom, getRoom, exitRoom,
 };

server/index.js

@@ -27,7 +27,7 @@ sequelize
       id: "1234567abc",
       name: "room",
       owner: 8888,
-      member: [8888],
+      member: ['8888', '9999'],
       profileimg: "defaultimg",
     });
 
@@ -35,7 +35,7 @@ sequelize
       id: "abc7654321",
       name: "room1",
       owner: 9999,
-      member: [9999],
+      member: ['9999'],
       profileimg: "defaultimg",
     });
 

server/models/room.model.js

-import pkg from 'sequelize';
-const { DataTypes } = pkg;
+import { DataTypes } from "sequelize";
 
 const RoomModel = (sequelize) => {
   const Room = sequelize.define(
@@ -16,7 +15,7 @@ const RoomModel = (sequelize) => {
         type: DataTypes.INTEGER,
       },
       member: {
-        type: DataTypes.ARRAY(DataTypes.INTEGER),
+        type: DataTypes.ARRAY(DataTypes.STRING),
         //type: DataTypes.STRING,
       },
       profileimg: {