채널참여(DB에저장)가능 - 다른채널에 참가 or 방에서 나갈시 채널퇴장 추가해야됨....

client/src/apis/room.api.js

@@ -20,6 +20,11 @@ const join = async (payload) => {
   return data;
 };
 
-const roomApi = { getRoom, exitRoom, create, join };
+const joinChannel = async (payload) => {
+  const { data } = await axios.put("/api/room/joinChannel", payload);
+  return data;
+};
+
+const roomApi = { getRoom, exitRoom, create, join, joinChannel };
 
 export default roomApi;

client/src/components/Login.js

 import { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, Redirect } from 'react-router-dom'
 import userApi from '../apis/user.api'
 import catchErrors from '../context/catchError'
 import { handleLogin } from '../context/auth'
@@ -46,7 +46,7 @@ const Login = () => {
   }
   if (success) {
     alert('로그인 되었습니다')
-    window.location.href = `/user/${id}`
+    return <Redirect to={`/user/${id}`} />;
   }
 
   const { email, password } = user

client/src/components/Room/ChannelSingle.js

-import { Link, useParams } from 'react-router-dom'
+import { useState, useEffect } from 'react'
+import { Link, Redirect, useParams } from 'react-router-dom'
+import roomApi from '../../apis/room.api';
+import userApi from '../../apis/user.api'
+import catchErrors from "../../context/catchError";
 
 const ChannelSingle = (props) => {
-  const { roomId, channelId } = useParams()
+  const [error, setError] = useState("");
+  const [succes, setSucces] = useState(false);
+  const [roomName, setRoomName] = useState('');
+  const { roomId, channelId } = useParams();
   console.log('props', props.channel)
   console.log('hi', channelId)
+  const userId = localStorage.getItem('user')
+
+
+  async function joinChannel(e) {
+    console.log(e, userId)
+    try {
+      const data = await userApi.getUser(userId);
+      const key = indexCheck(e)
+      console.log(key)
+      const mem = props.channel[key].joinUser
+      console.log(mem)
+      const joinCh = mem.includes(data.name);
+      console.log(joinCh)
+      if (!joinCh) {
+        const roomA = await roomApi.joinChannel({ roomId: roomId, channelName: e, plusUser: data.name, index: key })
+        console.log(roomA)
+        setRoomName(e)
+        setSucces(true)
+      } else {
+        alert('이미 참여된 채널입니다.')
+      }
+    } catch (error) {
+      catchErrors(error, setError);
+    }
+  }
+  
+  function indexCheck(e) {
+    for (const key in props.channel) {
+      console.log('체크', props.channel[key].channelName, e)
+      console.log('체크', props.channel[key].channelName === e)
+      if (props.channel[key].channelName === e) {
+        console.log('key', key)
+        return key
+      }
+    }
+  }
+
+  if(succes){
+    alert(`${roomName} 채널에 참가되었습니다.`)
+    window.location.href=`/room/${roomId}/${roomName}`
+  }
+
   return (
     <div>
       <div className="overflow-auto" style={{ height: '610px' }}>
@@ -13,6 +62,7 @@ const ChannelSingle = (props) => {
               <div
                 className="m-3 p-1 row"
                 style={{ backgroundColor: '#E0CEE8' }}
+                onClick={() => joinChannel(el.channelName)}
               >
                 {el.channelName === channelId ? (
                   <img
@@ -35,8 +85,8 @@ const ChannelSingle = (props) => {
               </div>
             </Link>
 
-            {el.joinName &&
-              el.joinName.map((e) => (
+            {el.joinUser &&
+              el.joinUser.map((e) => (
                 <div>
                   <ul className="mx-5" style={{ color: '#76D079' }}>
                     <li>

client/src/components/Room/RightHamburger.js

@@ -10,7 +10,7 @@ const INIT_ROOM = {
 
 const INIT_CHANNEL = {
   channelName: "",
-  joinName: [],
+  joinUser: [],
 };
 const RightHamburger = () => {
   const [channel, setChannel] = useState([INIT_CHANNEL]);
@@ -53,7 +53,7 @@ const RightHamburger = () => {
           console.log(Channel[prop][key]);
           channelList.push({
             channelName: key,
-            joinName: Channel[prop][key],
+            joinUser: Channel[prop][key],
           });
         }
       }

client/src/components/SignUp.js

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

server/controllers/room.controller.js

@@ -107,18 +107,27 @@ const exitRoom = async (req, res) => {
   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)
+  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)
+  console.log('index', index2)
+  user.roomNumber.splice(index2, 1)
   await User.update({ roomNumber: user.roomNumber }, { where: { id: id } });
 }
 
+const joinChannel = async (req, res) => {
+  const { roomId, channelName, plusUser, index } = req.body
+  const room = await Room.findOne({ where: { id: roomId } });
+  room.channel[index][channelName].push(plusUser)
+  console.log('확인2',room.channel[index])
+  await Room.update({ channel: room.channel }, { where: { id: roomId } });
+  return res.json(true)
+}
+
 export default {
-  joinRoom, roomImgUpload, createRoom, getRoom, exitRoom,
+  joinRoom, roomImgUpload, createRoom, getRoom, exitRoom, joinChannel,
 };

server/index.js

@@ -23,21 +23,21 @@ sequelize
       roomNumber : ["1234567abc","abc7654321"],
     });
 
-    // await Room.create({
-    //   id: "1234567abc",
-    //   name: "room",
-    //   owner: 8888,
-    //   member: [8888],
-    //   profileimg: "defaultimg",
-    // });
+    await Room.create({
+      id: "1234567abc",
+      name: "room",
+      owner: 8888,
+      member: ['8888','9999'],
+      profileimg: "defaultimg",
+    });
 
-    // await Room.create({
-    //   id: "abc7654321",
-    //   name: "room1",
-    //   owner: 9999,
-    //   member: [9999],
-    //   profileimg: "defaultimg",
-    // });
+    await Room.create({
+      id: "abc7654321",
+      name: "room1",
+      owner: 9999,
+      member: ['9999'],
+      profileimg: "defaultimg",
+    });
 
     app.listen(appConfig.port, () => {
       console.log(`Server is running on port ${appConfig.port}`);

server/routes/room.route.js

@@ -6,5 +6,7 @@ router.route("/getRoom").post(roomCrtl.getRoom);
 router.route("/exitRoom/:id/:roomId").delete(roomCrtl.exitRoom);
 router.route("/create").post(roomCrtl.roomImgUpload, roomCrtl.createRoom);
 router.route("/join").put(roomCrtl.joinRoom);
+router.route("/joinChannel").put(roomCrtl.joinChannel);
+
 
 export default router;
\ No newline at end of file