Merge remote-tracking branch 'origin/woojiweon2' into byoungyun1

client/.gitignore

@@ -23,3 +23,5 @@ yarn-debug.log*
 yarn-error.log*
 
 .env
+
+kakao.config.json
\ No newline at end of file

client/package-lock.json

@@ -14078,9 +14078,9 @@
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
     },
     "tar": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
-      "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.5.tgz",
+      "integrity": "sha512-FiK6MQyyaqd5vHuUjbg/NpO8BuEGeSXcmlH7Pt/JkugWS8s0w8nKybWjHDJiwzCAIKZ66uof4ghm4tBADjcqRA==",
       "requires": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",

client/public/index.html

@@ -39,5 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
   </body>
 </html>

client/src/apis/room.api.js

 import axios from "axios";
 
 const getRoom = async (id) => {
-  const { data } = await axios.post('/api/room/getRoom', id);
+  const { data } = await axios.post("/api/room/getRoom", id);
   return data;
 };
 
 const exitRoom = async (ID) => {
-  const { data } = await axios.delete(`/api/room/exitRoom/${ID.id}/${ID.roomId}`);
+  const { data } = await axios.delete(
+    `/api/room/exitRoom/${ID.id}/${ID.roomId}`
+  );
   return data;
 };
 
@@ -21,15 +23,47 @@ const join = async (payload) => {
 };
 
 const changename = async (payload) => {
-  const { data } = await axios.put("/api/room/changename", payload)
+  const { data } = await axios.put("/api/room/changename", payload);
   return data;
-}
+};
 
 const profileimg = async (formData) => {
   const { data } = await axios.put("/api/room/profileimg", formData);
   return data;
 };
 
-const roomApi = { getRoom, exitRoom, create, join, changename, profileimg };
+const joinChannel = async (payload) => {
+  const { data } = await axios.post("/api/room/joinChannel", payload);
+  return data;
+};
+
+const doubleJoin = async (payload) => {
+  const { data } = await axios.post("/api/room/doubleJoin", payload);
+  return data;
+};
+
+const makeChannel = async (payload) => {
+  console.log("안녕", payload)
+  const { data } = await axios.put("/api/room/makeChannel", payload);
+  return data;
+};
+
+const channelDelete = async (payload) => {
+  const { data } = await axios.put("/api/room/channelDelete", payload);
+  return data;
+};
+
+const roomApi = {
+  getRoom,
+  exitRoom,
+  create,
+  join,
+  changename,
+  joinChannel,
+  doubleJoin,
+  profileimg,
+  makeChannel,
+  channelDelete
+};
 
 export default roomApi;

client/src/components/Home/RoomSingle.js

@@ -14,7 +14,7 @@ const INIT_ROOM = {
 const RoomSingle = () => {
   const [room, setRoom] = useState([INIT_ROOM]);
   const [error, setError] = useState("");
-  const channelId = 'main';
+  const channelId = "main";
   const { roomId } = useParams(room.roomId);
   async function getJoinRoom(Id) {
     try {
@@ -45,10 +45,13 @@ const RoomSingle = () => {
       {room &&
         room.map((el) => (
           <div>
-            {room[0] === INIT_ROOM ? (<div></div>): (
+            {room[0] === INIT_ROOM ? (
+              <div></div>
+            ) : (
               <Link
                 to={`/room/${el.roomId}/${channelId}`}
                 className="text-decoration-none text-dark"
+                key={el.roomId}
               >
                 <div
                   className="d-flex mx-4 my-2 p-2"
@@ -74,7 +77,8 @@ const RoomSingle = () => {
                   </div>
                   <div className="ms-auto mt-2"> {el.member}/100 </div>
                 </div>
-            </Link>)}
+              </Link>
+            )}
           </div>
         ))}
     </div>

client/src/components/KakaoShareButton.js

@@ -6,12 +6,12 @@ import catchErrors from "../context/catchError";
 
 const INIT_invite = {
   id: "",
-  name:"",
-}
+  name: "",
+};
 
 const KakaoShareButton = (porps) => {
   const [inviteperson, setProfile] = useState(INIT_invite);
-  const [error,setError]=useState("");
+  const [error, setError] = useState("");
   const { roomId } = useParams();
   const invitepersonId = localStorage.getItem("user");
 
@@ -32,16 +32,6 @@ const KakaoShareButton = (porps) => {
     createKakaoButton();
   }, []);
 
-  useEffect(() => {
-    const script = document.createElement('script')
-    script.src = 'https://developers.kakao.com/sdk/js/kakao.js'
-    script.async = true
-    document.body.appendChild(script)
-    return () => {
-      document.body.removeChild(script)
-    }
-  }, [])
-
   const createKakaoButton = () => {
     // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
     if (window.Kakao) {
@@ -52,15 +42,12 @@ const KakaoShareButton = (porps) => {
         kakao.init(kakao_key[0].kakao_key);
       }
       kakao.Link.createDefaultButton({
-        container: '#kakao-link-btn',
-        objectType: 'text',
-        text:
-          `${inviteperson.name}님이 당신을 화상회의에 초대했습니다! 초대된 방 코드:${roomId}`,
+        container: "#kakao-link-btn",
+        objectType: "text",
+        text: `${inviteperson.name}님이 당신을 화상회의에 초대했습니다! 초대된 방 코드:${roomId}`,
         link: {
-          mobileWebUrl:
-            `http://localhost:3000/invite/${roomId}`,
-          webUrl:
-            `http://localhost:3000/invite/${roomId}`,
+          mobileWebUrl: `http://localhost:3000/invite/${roomId}`,
+          webUrl: `http://localhost:3000/invite/${roomId}`,
         },
       });
     }
@@ -75,7 +62,8 @@ const KakaoShareButton = (porps) => {
         className="col-2 p-1 btn btn-primary"
         data-bs-dismiss="modal"
         style={{ width: "120px" }}
-      >카카오로 초대
+      >
+        카카오로 초대
       </button>
     </div>
   );

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/ChannelList.js

-import { Link } from 'react-router-dom'
-import React, { useState } from 'react';
+import { Link, useParams } from 'react-router-dom'
+import React, { useEffect, useState } from 'react';
 import RightHamburger from './RightHamburger';
+import roomApi from '../../apis/room.api';
+import catchErrors from '../../context/catchError';
+import userApi from '../../apis/user.api';
+
+const INIT_CHANNEL = {
+  channelName: "",
+  joinUser: [],
+};
+
 
 const ChannelList = () => {
+  const { roomId } = useParams();
+  const [error, setError] = useState("");
+  const [channel, setChannel] = useState([INIT_CHANNEL]);
   const id = localStorage.getItem('user');
 
+  async function getChannel(roomId) {
+    try {
+      const data = await roomApi.getRoom([roomId]);
+      const Channel = data[0].channel;
+      const channelList = [];
+      for (const prop in Channel) {
+        for (const el in Channel[prop]) {
+          channelList.push({
+            channelName: el,
+            joinUser: Channel[prop][el],
+          });
+        }
+      }
+      setChannel(channelList);
+    } catch (error) {
+      catchErrors(error, setError);
+    }
+  }
+
+  async function exitChannel() {
+    try {
+      const data = await userApi.getUser(id);
+      const A = doubleJoinCheck(data.name)
+      if (A) {
+        await roomApi.doubleJoin({ roomId: roomId, index1: A.index1, index2: A.index2, joinChName: A.joinChName })
+      }
+    } catch (error) {
+      catchErrors(error, setError);
+    }
+  }
+
+  function doubleJoinCheck(e) {
+    for (const index in channel) {
+      for (const el in channel[index].joinUser) {
+        if (channel[index].joinUser[el] === e) {
+          const doublejoinCh = channel[index].channelName
+          const A = {
+            index1: index,
+            index2: el,
+            joinChName: doublejoinCh,
+          }
+          return A
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    getChannel(roomId);
+  }, [roomId])
+
   return (
     <div>
       <nav className="navbar navbar-light ">
         <div className="col-2"></div>
-        <div>
+        <div onClick={exitChannel}>
           <Link to={`/user/${id}`}>
             <img src="/BORA.png" style={{ width: '160px' }} />
           </Link>

client/src/components/Room/ChannelSingle.js

+import { useState } from 'react'
 import { Link, 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()
-  console.log('props', props.channel)
-  console.log('hi', channelId)
+  console.log(props.channel);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const [roomName, setRoomName] = useState('');
+  const { roomId, channelId } = useParams();
+  const userId = localStorage.getItem('user')
+
+
+  async function joinChannel(e) {
+    console.log(e, userId)
+    try {
+      const data = await userApi.getUser(userId);
+      const index1 = indexCheck(e)
+      const A = doubleJoinCheck(data.name)
+      const mem = props.channel[index1].joinUser
+      const joinCh = mem.includes(data.name);
+      if (!joinCh) {
+        if (A) {
+          await roomApi.doubleJoin({ roomId: roomId, index1: A.index1, index2: A.index2, joinChName: A.joinChName })
+        }
+        await roomApi.joinChannel({ roomId: roomId, channelName: e, plusUser: data.name, index: index1 })
+        setRoomName(e)
+        setSuccess(true)
+      } else {
+        alert('이미 참여된 채널입니다.')
+      }
+    } catch (error) {
+      catchErrors(error, setError);
+    }
+  }
+
+  function indexCheck(e) {
+    for (const index1 in props.channel) {
+      if (props.channel[index1].channelName === e) {
+        return index1
+      }
+    }
+  }
+
+  function doubleJoinCheck(e) {
+    for (const index in props.channel) {
+      for (const el in props.channel[index].joinUser) {
+        if (props.channel[index].joinUser[el] === e) {
+          const doublejoinCh = props.channel[index].channelName
+          const A = {
+            index1: index,
+            index2: el,
+            joinChName: doublejoinCh,
+          }
+          return A
+        }
+      }
+    }
+  }
+
+  if (success) {
+    alert(`${roomName} 채널에 참가되었습니다.`)
+    window.location.href = `/room/${roomId}/${roomName}`
+  }
+
   return (
     <div>
       <div className="overflow-auto" style={{ height: '610px' }}>
-        {props.channel.map((el) => (
-          <div className="mb-3">
-            <Link to={`/room/${roomId}/${el.channelName}`}>
+        {props.channel.map((el,i) => (
+          <div className="mb-3" key={`channel${i}`}>
             <div
               className="m-3 p-1 row"
               style={{ backgroundColor: '#E0CEE8' }}
+              onClick={() => joinChannel(el.channelName)}
             >
               {el.channelName === channelId ? (
                 <img
@@ -33,11 +94,10 @@ const ChannelSingle = (props) => {
                 {el.channelName}
               </h5>
             </div>
-            </Link>
 
-            {el.joinName &&
-              el.joinName.map((e) => (
-                <div>
+            {el.joinUser &&
+              el.joinUser.map((e,i) => (
+                <div key={`member${i}`}>
                   <ul className="mx-5" style={{ color: '#76D079' }}>
                     <li>
                       <p style={{ color: 'black' }}>{e}</p>

client/src/components/Room/Channelsettingchange.js

+import { useState } from "react";
 import { useParams } from "react-router";
-import Createchannel from "./Createchannel";
-import Deletechannel from "./Deletechannel";
+import roomApi from "../../apis/room.api";
 
-const Channelsettingchange = (props) => {
+const INIT_Channel = {
+  id: "",
+  channelName: "",
+  number: "",
+};
+
+const ChannelSettingChange = (props) => {
+  const [Channel, setChannel] = useState(INIT_Channel);
+  const [error, setError] = useState("");
   const { roomId } = useParams();
-  console.log(props);
-  console.log(roomId);
+  //console.log(props.channel.[0].channelName) //각 채널의 채널이름.
+  Channel.id = roomId;
+
+  const updateinfo = (event) => {
+    const { channelName, value } = event.target;
+    setChannel({ ...Channel, channelName: value });
+    console.log(Channel.channelName);
+  };
+
+  async function CreateChannel(e) {
+    let count = 0;
+    for (let a = 0; a < props.channel.length; a++) {
+      if (Channel.channelName === props.channel[a].channelName) {
+        count += 1;
+      }
+    }
+
+    if (count == 1) {
+      window.alert("이미 존재하는 채널 입니다. 다른 이름을 입력해 주십시오.");
+    } else {
+      Channel.number = props.channel.length;
+      window.location.reload();
+      const data = await roomApi.makeChannel(Channel);
+      window.alert("채널이 성공적으로 생성되었습니다.");
+    }
+  }
+
+  async function DeleteChannel(e) { 
+    let count = 0;
+    for (let a = 0; a < props.channel.length; a++) {
+      if (Channel.channelName === props.channel[a].channelName) {//일치하면
+        count = count + 1;
+         Channel.number = a;
+      }
+    }
+
+    if (count === 1){
+      window.location.reload();
+      const data = await roomApi.channelDelete(Channel);
+      window.alert("채널이 성공적으로 삭제되었습니다.");
+    }
+    else {
+      window.alert(
+        "입력한 채널명과 일치하는 채널이 존재하지 않습니다. 다시 확인해 주십시오."
+      );
+    }
+  };
+
   return (
     <div>
       <button
@@ -21,14 +75,14 @@ const Channelsettingchange = (props) => {
           border: "1px #f5cfe3",
         }}
       >
-        채널 설정 변경{/* 방 설정 변경으로 바꾸기 */}
+        채널 설정 변경
       </button>
 
       <div
         className="modal fade"
         id="changechannel"
         tabIndex="-1"
-        aria-labelledby="changechannelsettingLabel"
+        aria-labelledby="changechannelLabel"
         aria-hidden="true"
       >
         <div className="modal-dialog">
@@ -37,8 +91,6 @@ const Channelsettingchange = (props) => {
               <div className="modal-title" id="changechannelsetting">
                 채널 설정 변경
               </div>
-              {/* <Createchannel />
-              <Deletechannel /> */}
               <button
                 type="button"
                 className="btn-close"
@@ -46,6 +98,188 @@ const Channelsettingchange = (props) => {
                 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-center"
+                style={{ margin: "0px" }}
+              ></div>
+              <div className="d-flex justify-content-evenly">
+                <button
+                  type="submit"
+                  data-bs-toggle="modal"
+                  data-bs-target="#channelcreate"
+                  style={{
+                    weight: "100px",
+                    height: "60px",
+                    backgroundColor: "#f5cfe3",
+                    borderRadius: "5px",
+                    color: "black",
+                    border: "1px #f5cfe3",
+                  }}
+                >
+                  채널 생성
+                </button>
+                <button
+                  type="submit"
+                  data-bs-toggle="modal"
+                  data-bs-target="#channeldelete"
+                  style={{
+                    weight: "100px",
+                    height: "60px",
+                    backgroundColor: "#f5cfe3",
+                    borderRadius: "5px",
+                    color: "black",
+                    border: "1px #f5cfe3",
+                  }}
+                >
+                  채널 삭제
+                </button>
+
+                {/* 채널생성 모달 */}
+                <div
+                  className="modal fade"
+                  id="channelcreate"
+                  tabIndex="-1"
+                  aria-labelledby="channelcreateLabel"
+                  aria-hidden="true"
+                >
+                  <div className="modal-dialog">
+                    <div className="modal-content">
+                      <div className="modal-header">
+                        <div className="modal-title" id="createchannel">
+                          채널 생성
+                        </div>
+                        <button
+                          type="button"
+                          className="btn-close"
+                          data-bs-dismiss="modal"
+                          aria-label="Close"
+                        ></button>
+                      </div>
+
+                      <div className="row mb-3">
+                        <div
+                          className="d-flex justify-content-center"
+                          style={{ margin: "0px" }}
+                        >
+                          <p style={{ marginTop: "31px", marginBottom: "0px" }}>
+                            채널 이름:{" "}
+                          </p>
+                          <input
+                            onChange={updateinfo}
+                            name="channelName"
+                            value={Channel.channelName}
+                            type="text"
+                            className="form-control my-4 "
+                            placeholder="생성할 채널 이름"
+                            style={{
+                              background: "#fcf4ff",
+                              borderTop: "0",
+                              borderRight: "0",
+                              borderLeft: "0",
+                              borderBottom: "1",
+                              borderColor: "#d4cafb",
+                              height: "38px",
+                              width: "170px",
+                              marginTop: "0px",
+                              marginBottom: "0px",
+                            }}
+                          />
+                        </div>
+                        <div className="d-flex justify-content-evenly">
+                          <button
+                            onClick={CreateChannel}
+                            type="button"
+                            className="col-2 p-1 btn btn-primary"
+                          >
+                            생성
+                          </button>
+                          <button
+                            type="submit"
+                            className="col-2 p-1 btn btn-primary"
+                            data-bs-dismiss="modal"
+                          >
+                            취소
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 채널삭제 모달 */}
+                <div
+                  className="modal fade"
+                  id="channeldelete"
+                  tabIndex="-1"
+                  aria-labelledby="channeldeleteLabel"
+                  aria-hidden="true"
+                >
+                  <div className="modal-dialog">
+                    <div className="modal-content">
+                      <div className="modal-header">
+                        <div className="modal-title" id="deletechannel__">
+                          채널 삭제
+                        </div>
+                        <button
+                          type="button"
+                          className="btn-close"
+                          data-bs-dismiss="modal"
+                          aria-label="Close"
+                        ></button>
+                      </div>
+                      <div className="row mb-3">
+                        <div
+                          className="d-flex justify-content-center"
+                          style={{ margin: "0px" }}
+                        >
+                          <p style={{ marginTop: "31px", marginBottom: "0px" }}>
+                            채널 이름:{" "}
+                          </p>
+                          <input
+                            onChange={updateinfo}
+                            name="channelName"
+                            value={Channel.channelName}
+                            type="text"
+                            className="form-control my-4 "
+                            placeholder="삭제할 채널 이름"
+                            style={{
+                              background: "#fcf4ff",
+                              borderTop: "0",
+                              borderRight: "0",
+                              borderLeft: "0",
+                              borderBottom: "1",
+                              borderColor: "#d4cafb",
+                              height: "38px",
+                              width: "170px",
+                              marginTop: "0px",
+                              marginBottom: "0px",
+                            }}
+                          />
+                        </div>
+                        <div className="d-flex justify-content-evenly">
+                          <button
+                            onClick={DeleteChannel}
+                            type="button"
+                            className="col-2 p-1 btn btn-primary"
+                          >
+                            삭제
+                          </button>
+                          <button
+                            type="submit"
+                            className="col-2 p-1 btn btn-primary"
+                            data-bs-dismiss="modal"
+                          >
+                            취소
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -53,4 +287,4 @@ const Channelsettingchange = (props) => {
   );
 };
 
-export default Channelsettingchange;
+export default ChannelSettingChange;

client/src/components/Room/Createchannel.js

-
-/* 만들 채널의 이름을 입력받고(지금부터 "이름"이라 하자.), 그걸로 {"이름": []}의 형태로 체널을 만든다. 그후, 그 json파일을 현재 roomId의 channel에 추가한다. */
-const Createchannel = () => {
-    return (
-        <div>
-            
-        </div>
-    );
-};
-
-export default Createchannel;
\ No newline at end of file

client/src/components/Room/Deletechannel.js

-
-/* 삭제할 채널의 이름을 입력받아서 일치하는 채널이름이 있으면 삭제하고, 없으면 그런 이름의 채널이 존재하지 않는다고 알림창을 띄운다. */
-const Deletechannel = () => {
-    return (
-        <div>
-        </div>
-    );
-};
-
-export default Deletechannel;
\ No newline at end of file

client/src/components/Room/InitRoom.js

@@ -17,9 +17,7 @@ const InitRoom = () => {
   async function getRoom(roomId) {
     try {
       const data = await roomApi.getRoom([roomId]);
-      console.log(data)
       setRoom({...room, id:data[0].id, name:data[0].name, profileimg: data[0].profileimg})
-      console.log(room.profileimg)
     } catch (error) {
       catchErrors(error, setError);
     }

client/src/components/Room/MakeChannel.js

+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import roomApi from "../../apis/room.api";
+import catchErrors from "../../context/catchError";
+
+
+const MakeChannel = () => {
+    const { roomId } = useParams();
+    const [channelName, setChannelName] = useState("");
+    const [error, setError] = useState("");
+    const [success, setSuccess] = useState(false);
+
+    function handleChange(event) {
+        const { value } = event.target;
+        setChannelName(value);
+    }
+    console.log(channelName)
+
+    async function handleSubmit(e) {
+        // e.preventDefault();
+        try {
+            const data = await roomApi.makeChannel({ roomId: roomId, channelName: channelName });
+            console.log('서버연결됬나요', data)
+            setSuccess(true);
+        } catch (error) {
+            catchErrors(error, setError);
+        } finally {
+            // setLoading(false);
+        }
+    }
+
+    if (success) {
+        // console.log('success', success)
+        alert('채널생성이 완료되었습니다!')
+        window.location.href = `/room/${roomId}/${channelName}`
+    }
+
+    return (
+        <div className="modal-content">
+            <form
+                onSubmit={handleSubmit}
+            >
+                <div className="modal-header">
+                    <div className="modal-title" id="MakeChannelModal">
+                        채널 생성하기
+                    </div>
+                    <button
+                        type="button"
+                        className="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
+                    ></button>
+                </div>
+                <div className="modal-body">
+                    {error && <div className="alert alert-danger">{error}</div>}
+                    <div className="input-group mb-3">
+                        <input
+                            type="text"
+                            className="form-control"
+                            placeholder="생성할 채널이름을 입력하세요"
+                            aria-label="생성할 채널이름을 입력하세요"
+                            aria-describedby="basic-addon1"
+                            name="channelName"
+                            value={channelName}
+                            onChange={handleChange}
+                        />
+                    </div>
+                    <div className="modal-footer">
+                        <button
+                            type="submit"
+                            className="btn btn-primary">
+                            확인
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default MakeChannel;

client/src/components/Room/RightHamburger.js

@@ -4,8 +4,8 @@ import ChannelSingle from "./ChannelSingle";
 import RoomApi from "../../apis/room.api";
 import catchErrors from "../../context/catchError";
 import KakaoShareButton from "../KakaoShareButton";
-import Roomsettingchange from "./Roomsettingchange";
-import Channelsettingchange from "./Channelsettingchange";
+import RoomSettingChange from "./RoomSettingChange";
+import ChannelSettingChange from "./ChannelSettingChange";
 
 const INIT_ROOM = {
   name: "",
@@ -14,7 +14,7 @@ const INIT_ROOM = {
 
 const INIT_CHANNEL = {
   channelName: "",
-  joinName: [],
+  joinUser: [],
 };
 
 const RightHamburger = () => {
@@ -43,28 +43,22 @@ const RightHamburger = () => {
     console.log("id, roomid정보", id, roomId);
     try {
       const data = await RoomApi.exitRoom({ id, roomId });
-      console.log(data);
     } catch (error) {
       catchErrors(error, setError);
     }
   }
 
   async function getChannel(roomId) {
-    const ID = roomId;
     try {
-      const data = await RoomApi.getRoom([ID]);
+      const data = await RoomApi.getRoom([roomId]);
       const Channel = data[0].channel;
-      console.log("방데이터:", Channel);
       const channelList = [];
       for (const prop in Channel) {
         // Channel의 항목(prop)으로 작업을 실행합니다
-        for (const key in Channel[prop]) {
-          console.log(key);
-          console.log(prop);
-          console.log(Channel[prop][key]);
+        for (const el in Channel[prop]) {
           channelList.push({
-            channelName: key,
-            joinName: Channel[prop][key],
+            channelName: el,
+            joinUser: Channel[prop][el],
           });
         }
       }
@@ -235,6 +229,9 @@ const RightHamburger = () => {
                 <div className="modal-dialog">
                   <div className="modal-content">
                     <div className="modal-header">
+                      <div className="modal-title" id="changechannelsetting">
+                        설정
+                      </div>
                       <button
                         type="button"
                         className="btn-close"
@@ -247,8 +244,8 @@ const RightHamburger = () => {
                     </div>
                     <div className="row mb-3">
                       <div className="d-flex justify-content-evenly">
-                        <Roomsettingchange />
-                        <Channelsettingchange channel={channel} />
+                        <RoomSettingChange />
+                        <ChannelSettingChange channel={channel} />
                       </div>
                     </div>
                   </div>

client/src/components/Room/RoomHeader.js

@@ -9,7 +9,7 @@ const INIT_ROOM = {
 
 
 const RoomHeader = () => {
-  const {roomId}=useParams();
+  const {roomId, channelId}=useParams();
   const [room, setRoom] = useState([INIT_ROOM]);
   const [error, setError] = useState("")
   async function getRoom(Id) {
@@ -47,7 +47,7 @@ const RoomHeader = () => {
             color: '#6c33a2',
           }}
         >
-          # 회의
+          # {channelId}
         </a>
       </div>
     </div>

client/src/components/Room/Roomsettingchange.js

@@ -9,7 +9,7 @@ const INIT_Room = {
   profileimg: "",
 };
 
-const Roomsettingchange = () => {
+const RoomSettingChange = () => {
   const { roomId } = useParams();
   const [Room, setRoom] = useState(INIT_Room);
   const [error, setError] = useState("");
@@ -32,6 +32,7 @@ const Roomsettingchange = () => {
   const updateinfo = (event) => {
     const { name, value } = event.target;
     setRoom({ ...Room, [name]: value });
+    console.log(Room.name);
   };
 
   const handleChange = async (event) => {
@@ -59,7 +60,7 @@ const Roomsettingchange = () => {
   };
 
   return (
-    <div className="d-flex flex-row-reverse">
+    <div>
       <button
         type="submit"
         data-bs-toggle="modal"
@@ -73,7 +74,7 @@ const Roomsettingchange = () => {
           border: "1px #f5cfe3",
         }}
       >
-        방 설정 변경{/* 방 설정 변경으로 바꾸기 */}
+        방 설정 변경
       </button>
 
       <div
@@ -96,11 +97,10 @@ const Roomsettingchange = () => {
                 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-center"
-                style={{ margin: "0px" }}
+                style={{ marginTop: "20px" }}
               >
                 <input
                   type="file"
@@ -165,4 +165,4 @@ const Roomsettingchange = () => {
   );
 };
 
-export default Roomsettingchange;
+export default RoomSettingChange;

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

client/src/pages/InvitePage.js

@@ -7,16 +7,15 @@ import catchErrors from "../context/catchError";
 
 const INIT_PROFILE = {
   id: "",
-  roomNumber: ""
+  roomNumber: "",
 };
 
 // userapi로 유저정보 불러다가, 참여방 목록에 그 방아이디 추가하고, 방에도 그 유저 아이디 추가한 다음에 참가시키기.
 const InvitePage = () => {
   const [profile, setProfile] = useState([INIT_PROFILE]);
-  const [success, setSuccess] = useState(false);
-  const [error,setError]=useState("");
+  const [error, setError] = useState("");
   const usercheck = localStorage.getItem("user");
-  const {roomId} = useParams();
+  const { roomId } = useParams();
 
   async function getProfile(userID) {
     try {
@@ -27,44 +26,49 @@ const InvitePage = () => {
     }
   }
 
-  async function joinroom(userId,roomId) {
+  async function joinroom(userId, roomId) {
     try {
       // setLoading(true);
       setError("");
       const data = await roomApi.join({ userId: userId, roomId: roomId });
-        console.log('서버연결됬나요', data)
-        setSuccess(true);
+      console.log("서버연결됬나요", data);
     } catch (error) {
       catchErrors(error, setError);
     } finally {
       // setLoading(false);
     }
-}
+  }
   useEffect(() => {
     getProfile(usercheck);
   }, []);
 
   function goInvitedroom() {
-    let check1= null;
-    let check2= null;
-    console.log(usercheck);
-    if (usercheck)
-      joinroom(usercheck,roomId);
-      if(success)
-        check1 = window.confirm("방 참여가 완료되었습니다.")
-        if(check1)
+    let check = null;
+    if (usercheck === null) check = false;
+    else check = true;
+
+    if (check === true) {
+      joinroom(usercheck, roomId);
+      window.alert("방 참여가 완료되었습니다.");
       window.location.href=`/user/${usercheck}`
-    else 
-      check2 = window.confirm("로그인이 필요합니다.")
-      if(check2)
-        window.location.href="/"
+    } else {
+      window.alert("로그인이 필요합니다.");
+      window.location.href = `/`;
+    }
   }
 
   function invitereject() {
-    if(usercheck)
-    window.location.href=`/user/${usercheck}`
-    else
-    window.location.href="/"
+    let check = null;
+    if (usercheck === null) check = false;
+    else check = true;
+
+    if (check === true) {
+      window.alert("유저 페이지로 이동합니다.");
+      window.location.href = `/user/${usercheck}`;
+    } else {
+      window.alert("로그인이 필요합니다.");
+      window.location.href = `/`;
+    }
   }
 
   return (
@@ -104,29 +108,32 @@ const InvitePage = () => {
       // }}
       >
         {/* 아래 텍스트 */}
-        <p align= "center" style={{
+        <p
+          align="center"
+          style={{
             fontSize: "30px",
             marginTop: "120px",
-          marginBottom: "80px"
-        }}>
+            marginBottom: "80px",
+          }}
+        >
           축하합니다! 친구가 당신을
-          <br/>
+          <br />
           화상회의에 초대했습니다.
-          <br/>
-          <br/>
+          <br />
+          <br />
           <b>초대를 수락하시겠습니까?</b>
         </p>
       </div>
 
       <div className="d-flex justify-content-evenly">
         {/* 수락, 거절 버튼 */}
+        {console.log(profile.roomNumber)}
         <button
           type="submit"
           className="col-2 p-1 btn btn-primary"
           data-bs-dismiss="modal"
           style={{ width: "120px" }}
           onClick={goInvitedroom}
-          
         >
           수락
         </button>

server/controllers/room.controller.js

@@ -12,7 +12,7 @@ const joinRoom = async (req, res) => {
     //roomId에 일치하는 방이 존재할때
     //roomId에 일치하는 방의 member정보에 userId 저장하기
     //member정보에 userId가 이미 저장되어 있는지 확인 -> 이미 참여된 방인지 확인
-    const includeUserId = room_Id.member.includes(parseInt(userId));
+    const includeUserId = room_Id.member.includes(parseInt(userId));// 이미 참여되어있는데 확인 못하고 있음.
     // console.log('Include확인:',includeUserId)
     if (!includeUserId) {
       //아직 참여되지 않은 방인경우
@@ -34,7 +34,7 @@ const joinRoom = async (req, res) => {
         { roomNumber: user_Id.roomNumber },
         { where: { id: userId } }
       );
-      res.json(true)
+      res.json(true);
     } else {
       return res.status(422).send("이미 참여된 방입니다.");
     }
@@ -44,13 +44,15 @@ const joinRoom = async (req, res) => {
 };
 
 const upLoadRoomImg = multer({ dest: "roomUploads/" });
-const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]);
+const roomImgUpload = upLoadRoomImg.fields([
+  { name: "profileimg", maxCount: 1 },
+]);
 
 const update = async (req, res) => {
   try {
     console.log("id:", req.body.id);
-    const id = req.body.id;//roomId
-    const avatar = req.files["profileimg"][0];//profileimg
+    const id = req.body.id; //roomId
+    const avatar = req.files["profileimg"][0]; //profileimg
     const img = avatar.filename;
     console.log(img);
     await Room.update({ profileimg: img }, { where: { id: id } });
@@ -65,11 +67,11 @@ const createRoom = async (req, res) => {
   const { userId, name } = req.body;
   const avatar = req.files["profileimg"][0];
   const img = avatar.filename;
-  const id = nanoid()
+  const id = nanoid();
   const Id = await Room.findOne({ where: { id: id } });
   // console.log('id:', id)
   while (Id) {
-    const id = nanoid()
+    const id = nanoid();
     const Id = await Room.findOne({ where: { id: id } });
   }
   try {
@@ -83,21 +85,25 @@ const createRoom = async (req, res) => {
       owner: userId,
       member: [userId],
       profileimg: img,
-    }
+    };
     // console.log('newRoom:', newRoom)
     await Room.create(newRoom);
 
     //user.roomNumber에 id추가
     const user_Id = await User.findOne({ where: { id: userId } });
-    if (user_Id.roomNumber) { //다른 roomNumber가 이미 들어가 있는 경우 id추가
-      user_Id.roomNumber.push(id)
-    }
-    else { //첫 roomNumber인 경우 
-      user_Id.roomNumber = [id]
+    if (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: userId } })
-    res.json(newRoom)
+    await User.update(
+      { roomNumber: user_Id.roomNumber },
+      { where: { id: userId } }
+    );
+    res.json(newRoom);
   } catch (error) {
     console.log(error);
     res.status(500).send("방생성 에러");
@@ -109,7 +115,7 @@ const getRoom = async (req, res) => {
   try {
     const roomlist = await Room.findAll({ where: { id: req.body } });
     // console.log(roomlist);
-    res.json(roomlist)
+    res.json(roomlist);
   } catch (error) {
     console.log(error);
     res.status(500).send("에러");
@@ -117,36 +123,79 @@ const getRoom = async (req, res) => {
 };
 
 const exitRoom = async (req, res) => {
-  const { id, roomId } = req.params
-  console.log(id, roomId)
+  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)
+  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)
+  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 } });
-}
+};
 
-const changename = async (req,res) => {
-  const {id, name} = req.body;
-  console.log(req.body)
+const changename = async (req, res) => {
+  const { id, name } = req.body;
+  console.log(req.body);
   try {
-    await Room.update({ 'name': name },{ where: { id: id } })
-    const room1 = await Room.findOne({ where: { id: id } })
-    console.log('Room:',room1)
-  }catch (error) {
+    await Room.update({ name: name }, { where: { id: id } });
+    const room1 = await Room.findOne({ where: { id: id } });
+    console.log("Room:", room1);
+  } catch (error) {
     console.log(error);
     res.status(500).send("에러");
   }
 };
 
+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);
+  await Room.update({ channel: room.channel }, { where: { id: roomId } });
+  return res.json(true);
+};
+
+const doubleJoin = async (req, res) => {
+  const { roomId, index1, index2, joinChName } = req.body;
+  const room = await Room.findOne({ where: { id: roomId } });
+  room.channel[index1][joinChName].splice(index2, 1);
+  await Room.update({ channel: room.channel }, { where: { id: roomId } });
+  return res.json(true);
+};
+
+const makeChannel = async (req, res) => {
+  const { id, channelName, number } = req.body;
+  console.log(req.body);
+  const room = await Room.findOne({ where: { id: id } });
+  room.channel.push({[channelName] : []});
+  await Room.update({channel:room.channel},{where: {id: id}});
+  return res.json(true);
+};
+
+const channelDelete = async (req, res) => {
+  const { id,  number } = req.body;
+  const room = await Room.findOne({ where: { id: id } });
+  room.channel.splice(number, 1 );
+  await Room.update({channel:room.channel},{where: {id: id}});
+  return res.json(true);
+};
+
 export default {
-  joinRoom, roomImgUpload, update, createRoom, getRoom, exitRoom, changename
+  joinRoom,
+  roomImgUpload,
+  createRoom,
+  getRoom,
+  exitRoom,
+  changename,
+  joinChannel,
+  doubleJoin,
+  update,
+  makeChannel,
+  channelDelete
 };