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

76c3e723 · 이재연 · 427c6ec6 · 0e228dad · 427c6ec6 · 76c3e723
Commit 76c3e723 authored Aug 09, 2021 by 이재연
--- a/client/.env
+++ b/client/.env
-REACT_APP_KAKAO_KEY=783f1ca14e1f14bc6442eedcd37c76a1
-REACT_FETCH_URL=http://localhost:3000
\ No newline at end of file
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -22,4 +22,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .env
\ No newline at end of file
+kakao.config.json
\ No newline at end of file
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -23,7 +23,7 @@ function App() {
        <Route path="/profile/:id" component={ProfilePage} />
        <Route path="/room/:roomId/main" component={InitRoomPage} />
        <Route path="/room/:roomId/:channelId" component={RoomPage} />
-        <Route path="/room/Invite" component={InvitePage} />
+        <Route path="/invite/:roomId" component={InvitePage} />
      </Switch>
      {/* </AuthProvider> */}
    </Router>

--- a/client/src/apis/room.api.js
+++ b/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;
 };
@@ -20,6 +22,11 @@ const join = async (payload) => {
  return data;
 };
+const changename = async (payload) => {
+  const { data } = await axios.put("/api/room/changename", payload);
+  return data;
+};
 const joinChannel = async (payload) => {
  const { data } = await axios.post("/api/room/joinChannel", payload);
  return data;
@@ -30,12 +37,19 @@ const doubleJoin = async (payload) => {
  return data;
 };
 // const makeChannel = async (payload) => {
 //   const { data } = await axios.post("/api/room/makeChannel", payload);
 //   return data;
 // };
-const roomApi = { getRoom, exitRoom, create, join, joinChannel, doubleJoin };
+const roomApi = {
+  getRoom,
+  exitRoom,
+  create,
+  join,
+  changename,
+  joinChannel,
+  doubleJoin,
+};
 export default roomApi;
--- a/client/src/components/Home/RoomSingle.js
+++ b/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,36 +45,40 @@ const RoomSingle = () => {
      {room &&
        room.map((el) => (
          <div>
-            {room[0] === INIT_ROOM ? (<div></div>): (
+            {room[0] === INIT_ROOM ? (
-            <Link
+              <div></div>
-              to={`/room/${el.roomId}/${channelId}`}
+            ) : (
-              className="text-decoration-none text-dark"
+              <Link
-            >
+                to={`/room/${el.roomId}/${channelId}`}
-              <div
+                className="text-decoration-none text-dark"
-                className="d-flex mx-4 my-2 p-2"
+                key={el.roomId}
-                style={{ backgroundColor: "#C4C4C4" }}
              >
-                <div style={{ width: "37px", height: "37px" }}>
-                  <img
-                    src={`/roomUploads/${el.profileimg}`}
-                    className="rounded-circle"
-                    style={{ width: "37px", height: "37px" }}
-                  />
-                </div>
                <div
-                  className="mx-3 mt-2"
+                  className="d-flex mx-4 my-2 p-2"
-                  style={{
+                  style={{ backgroundColor: "#C4C4C4" }}
-                    width: "250px",
-                    overflow: "scroll",
-                    whiteSpace: "nowrap",
-                    msOverflowStyle: "none",
-                  }}
                >
-                  {el.name}
+                  <div style={{ width: "37px", height: "37px" }}>
+                    <img
+                      src={`/roomUploads/${el.profileimg}`}
+                      className="rounded-circle"
+                      style={{ width: "37px", height: "37px" }}
+                    />
+                  </div>
+                  <div
+                    className="mx-3 mt-2"
+                    style={{
+                      width: "250px",
+                      overflow: "scroll",
+                      whiteSpace: "nowrap",
+                      msOverflowStyle: "none",
+                    }}
+                  >
+                    {el.name}
+                  </div>
+                  <div className="ms-auto mt-2"> {el.member}/100 </div>
                </div>
-                <div className="ms-auto mt-2"> {el.member}/100 </div>
+              </Link>
-              </div>
+            )}
-            </Link>)}
          </div>
        ))}
    </div>

--- a/client/src/components/KakaoShareButton.js
+++ b/client/src/components/KakaoShareButton.js
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import kakao_key from "../kakao.config.json";
+import userApi from "../apis/user.api";
+import catchErrors from "../context/catchError";
+const INIT_invite = {
+  id: "",
+  name: "",
+};
+const KakaoShareButton = (porps) => {
+  const [inviteperson, setProfile] = useState(INIT_invite);
+  const [error, setError] = useState("");
+  const { roomId } = useParams();
+  const invitepersonId = localStorage.getItem("user");
+  async function getProfile(userID) {
+    try {
+      const data = await userApi.getUser(userID);
+      setProfile(data);
+    } catch (error) {
+      catchErrors(error, setError);
+    }
+  }
+  useEffect(() => {
+    getProfile(invitepersonId);
+  }, []);
-const KakaoShareButton = () => {
  useEffect(() => {
    createKakaoButton();
  }, []);
-  const ad = "이름"
+  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) {
@@ -12,33 +49,32 @@ const KakaoShareButton = () => {
      // 중복 initialization 방지
      if (!kakao.isInitialized()) {
        // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
-        kakao.init(process.env.REACT_APP_KAKAO_KEY);
+        kakao.init(kakao_key[0].kakao_key);
      }
      kakao.Link.createDefaultButton({
-        container: '#kakao-link-btn',
+        container: "#kakao-link-btn",
-        objectType: 'text',
+        objectType: "text",
-        text:
+        text: `${inviteperson.name}님이 당신을 화상회의에 초대했습니다! 초대된 방 코드:${roomId}`,
-          `${ad}`,
-          //'기본 템플릿으로 제공되는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오링크는 다른 템플릿을 이용해 보낼 수 있습니다.',
        link: {
-          mobileWebUrl:
+          mobileWebUrl: `http://localhost:3000/invite/${roomId}`,
-            'http://localhost:3000/room/Invite',
+          webUrl: `http://localhost:3000/invite/${roomId}`,
-          webUrl:
-            'http://localhost:3000/room/Invite',
        },
      });
    }
  };
  return (
    <div className="kakao-share-button">
      {/* Kakao share button */}
-      <button 
+      <button
-      id="kakao-link-btn"
+        id="kakao-link-btn"
-      type="submit" 
+        type="submit"
-      className="col-2 p-1 btn btn-primary"
+        className="col-2 p-1 btn btn-primary"
-      data-bs-dismiss="modal"
+        data-bs-dismiss="modal"
-      style={{ width: "120px" }}
+        style={{ width: "120px" }}
-      >카카오로 초대
+        onClick={() => console.log("안녕")}
+      >
+        카카오로 초대
      </button>
    </div>
  );

--- a/client/src/components/Room/ChannelSingle.js
+++ b/client/src/components/Room/ChannelSingle.js
@@ -23,7 +23,7 @@ const ChannelSingle = (props) => {
        if (A) {
          await roomApi.doubleJoin({ roomId: roomId, index1: A.index1, index2: A.index2, joinChName: A.joinChName })
        }
-        const roomA = await roomApi.joinChannel({ roomId: roomId, channelName: e, plusUser: data.name, index: index1 })
+        await roomApi.joinChannel({ roomId: roomId, channelName: e, plusUser: data.name, index: index1 })
        setRoomName(e)
        setSuccess(true)
      } else {
@@ -66,38 +66,36 @@ const ChannelSingle = (props) => {
  return (
    <div>
      <div className="overflow-auto" style={{ height: '610px' }}>
-        {props.channel.map((el) => (
+        {props.channel.map((el,i) => (
-          <div className="mb-3">
+          <div className="mb-3" key={`channel${i}`}>
-            <Link to={`/room/${roomId}/${el.channelName}`}>
+            <div
-              <div
+              className="m-3 p-1 row"
-                className="m-3 p-1 row"
+              style={{ backgroundColor: '#E0CEE8' }}
-                style={{ backgroundColor: '#E0CEE8' }}
+              onClick={() => joinChannel(el.channelName)}
-                onClick={() => joinChannel(el.channelName)}
+            >
-              >
+              {el.channelName === channelId ? (
-                {el.channelName === channelId ? (
+                <img
-                  <img
+                  className="col-auto mt-2"
-                    className="col-auto mt-2"
+                  src="/fullSpeaker.png"
-                    src="/fullSpeaker.png"
+                  width="25px"
-                    width="25px"
+                  height="25px"
-                    height="25px"
+                />
-                  />
+              ) : (
-                ) : (
+                <img
-                  <img
+                  className="col-auto mt-2"
-                    className="col-auto mt-2"
+                  src="/emptySpeaker.png"
-                    src="/emptySpeaker.png"
+                  width="25px"
-                    width="25px"
+                  height="25px"
-                    height="25px"
+                />
-                  />
+              )}
-                )}
+              <h5 className="col mt-2" style={{ color: 'black' }}>
-                <h5 className="col mt-2" style={{ color: 'black' }}>
+                {el.channelName}
-                  {el.channelName}
+              </h5>
-                </h5>
+            </div>
-              </div>
-            </Link>
            {el.joinUser &&
-              el.joinUser.map((e) => (
+              el.joinUser.map((e,i) => (
-                <div>
+                <div key={`member${i}`}>
                  <ul className="mx-5" style={{ color: '#76D079' }}>
                    <li>
                      <p style={{ color: 'black' }}>{e}</p>

--- a/client/src/components/Room/RightHamburger.js
+++ b/client/src/components/Room/RightHamburger.js
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { Link, useParams } from "react-router-dom";
 import ChannelSingle from "./ChannelSingle";
 import RoomApi from "../../apis/room.api";
 import catchErrors from "../../context/catchError";
+import KakaoShareButton from "../KakaoShareButton";
+import Roomnamechange from "./Roomnamechange";
 const INIT_ROOM = {
  name: "",
+  owner: "",
 };
 const INIT_CHANNEL = {
@@ -22,7 +25,13 @@ const RightHamburger = () => {
  async function getRoom(roomId) {
    try {
      const data = await RoomApi.getRoom([roomId]);
-      setRoom({ ...room, name: data[0].name });
+      const roomdata = [];
+      roomdata.push({
+        name: data[0].name,
+        owner: data[0].owner,
+      });
+      console.log(roomdata);
+      setRoom(roomdata);
    } catch (error) {
      catchErrors(error, setError);
    }
@@ -106,7 +115,7 @@ const RightHamburger = () => {
              color: "#000000",
            }}
          >
-            {room.name}
+            {room[0].name}
          </p>
          <h6 className="mt-2" id="roomId">
            {" "}
@@ -159,13 +168,7 @@ const RightHamburger = () => {
                  </div>
                  <div className="row mb-3">
                    <div className="d-flex justify-content-evenly">
-                      <button
+                      <KakaoShareButton />
-                        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"
@@ -196,21 +199,66 @@ const RightHamburger = () => {
              >
                퇴장
              </button>
-              {/* {admin ? (
+              {room[0].owner == id ? (
-              <button
+                <button
-                type="button"
+                  type="button"
-                className="m-3 rounded"
+                  className="m-3 rounded"
-                style={{
+                  data-bs-toggle="modal"
-                  height: "30px",
+                  data-bs-target="#Roomsetting"
-                  fontWeight: "bold",
+                  style={{
-                  backgroundColor: "#E0CEE8",
+                    height: "30px",
-                  color: "black",
+                    fontWeight: "bold",
-                  border: "1px #D64D61",
+                    backgroundColor: "#E0CEE8",
-                }}
+                    color: "black",
+                    border: "1px #D64D61",
+                  }}
+                >
+                  설정
+                </button>
+              ) : null}
+              <div
+                className="modal fade"
+                id="Roomsetting"
+                tabIndex="-1"
+                aria-labelledby="RoomsettingLabel"
+                aria-hidden="true"
              >
-                설정
+                <div className="modal-dialog">
-              </button>
+                  <div className="modal-content">
-            ) : null} */}
+                    <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"
+                          data-bs-dismiss="modal"
+                          style={{
+                            weight: "100px",
+                            height: "60px",
+                            backgroundColor: "#f5cfe3",
+                            borderRadius: "5px",
+                            color: "black",
+                            border: "1px #f5cfe3",
+                          }}
+                        >
+                          채널 이름 변경
+                        </button> */}
+                        <Roomnamechange />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
              <div
                className="modal fade"

--- a/client/src/components/Room/Roomnamechange.js
+++ b/client/src/components/Room/Roomnamechange.js
+import { useParams } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import RoomApi from "../../apis/room.api";
+import catchErrors from "../../context/catchError";
+const INIT_Room = {
+  id: "",
+  name: "",
+};
+const Roomnamechange = () => {
+  const { roomId } = useParams();
+  const [Room, setRoom] = useState(INIT_Room);
+  const [error, setError] = useState("");
+  Room.id = roomId;
+  async function getdata(Roomdata) {
+    try {
+      const data = await RoomApi.getRoom([Roomdata]);
+      setRoom(data);
+      console.log(data);
+    } catch (error) {
+      catchErrors(error, setError);
+    }
+  }
+  useEffect(() => {
+    getdata(roomId);
+  }, []);
+  const updateinfo = (event) => {
+    const { name, value } = event.target;
+    setRoom({ ...Room, [name]: value });
+    console.log(Room);
+  };
+  const changeinfo = async (event) => {
+    const req = await RoomApi.changename(Room);
+  };
+  return (
+    <div className="d-flex flex-row-reverse">
+      <button
+        type="submit"
+        data-bs-toggle="modal"
+        data-bs-target="#changeRoomname"
+        style={{
+          weight: "100px",
+          height: "60px",
+          backgroundColor: "#f5cfe3",
+          borderRadius: "5px",
+          color: "black",
+          border: "1px #f5cfe3",
+        }}
+      >
+        방 이름 변경
+      </button>
+      <div
+        className="modal fade"
+        id="changeRoomname"
+        tabIndex="-1"
+        aria-labelledby="changeRoomnameLabel"
+        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-center" style={{ margin:"0px"}}>
+                {/* <Link to="/user/:id"> */}
+                <p style={{marginTop: "31px", marginBottom: "0px"}}>방 이름: </p>
+                <input
+                  onChange={updateinfo}
+                  name="name"
+                  value={Room.name}
+                  type="text"
+                  className="form-control my-4 "
+                  placeholder="변경할 방 이름 입력"
+                  style={{
+                    background: "#fcf4ff",
+                    borderTop: "0",
+                    borderRight: "0",
+                    borderLeft: "0",
+                    borderBottom: "1",
+                    borderColor: "#d4cafb",
+                    height: "38px",
+                    width: "130px",
+                    marginTop: "0px",
+                    marginBottom: "0px"
+                  }}
+                />
+                </div>
+                <div className="d-flex justify-content-evenly">
+                {/* <Link to={`/room/${roomId}/${Room.channel}`}> */}
+                <button
+                  onClick={changeinfo}
+                  type="button"
+                  className="col-2 p-1 btn btn-primary"
+                >
+                  저장
+                </button>
+                {/* </Link> */}
+                <button
+                  type="submit"
+                  className="col-2 p-1 btn btn-primary"
+                  data-bs-dismiss="modal"
+                >
+                  취소
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Roomnamechange;
--- a/client/src/kakao.config.json
+++ b/client/src/kakao.config.json
+[
+    {
+        "kakao_key" : "db04e9a8403d8955211052864937034a"
+    }
+]
\ No newline at end of file
--- a/client/src/pages/InvitePage.js
+++ b/client/src/pages/InvitePage.js
 import Header from "../components/Header";
 const InvitePage = () => {
-  function GoInvitedroom() {
+  const usercheck = localStorage.getItem("user");
-    // if() : //초대받은 사람이 로그인 o
-    // roomid = //서버에서 받아온 방 번호 저장
+  function goInvitedroom() {
-    // //초대받은 사람의 참여한  방 목록에 roomid 추가
+    let check1= null;
-    // else //로그인x
+    let check2= null;
-    // //로그인 하게 보냄.
+    if (usercheck)
+      check1 = window.confirm("카카오톡으로 전달된 초대코드를 사용해 참여해 주세요")
+      if(check1)
+      window.location.href=`/user/${usercheck}`
+    else 
+      check2 = window.confirm("로그인이 필요합니다.")
+      if(check2)
+        window.location.href="/"
  }
-  function Invitereject() {
+  function invitereject() {
-    // if () //초대받은 사람이 로그인 o
+    if(usercheck)
-    //   <Link to="/user/:id"></Link>//유저 페이지로 이동.
+    window.location.href=`/user/${usercheck}`
-    // else //로그인x
+    else
-    //   <Link to="/"></Link> //메인화면으로 이동.
+    window.location.href="/"
  }
  return (
@@ -22,62 +30,47 @@ const InvitePage = () => {
      <div className="d-flex justify-content-evenly">
        {/* 위 사진,이름 */}
        <div
-          style={{
+          // style={{
-            width: "100%",
+          //   width: "100%",
-            height: "140px",
+          //   height: "140px",
-            textAlign: "center",
+          //   textAlign: "center",
-            border: "3px",
+          //   border: "3px",
-            borderStyle: "none solid solid",
+          //   borderStyle: "none solid solid",
-            borderColor: "red",
+          //   borderColor: "red",
-            fontSize: "12px",
+          //   fontSize: "12px",
-          }}
+          // }}
        >
-          {/* 방 부분 */}
+          {/* 방 부분
          <p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p>
          <img style={{ width: "90px", height: "90px" }}></img>
          <p style={{ marginBottom: "0px", fontSize: "16px" }}>
-            방 id: {/*${roomid}*/}
+            방 id: ${roomid}
-          </p>
+          </p> */}
        </div>
-        {/* <div
-          style={{
-            width: "207px",
-            height: "140px",
-            textAlign: "center",
-            border: "3px",
-            borderStyle: "none solid solid none",
-            borderColor: "red",
-            fontSize: "12px",
-          }}
-        >
-          초대한 사람 부분 
-          <p style={{ marginBottom: "0px", fontSize: "16px" }}>초대한 사람</p>
-          <img src={UserImage} style={{ width: "90px", height: "90px" }}></img>
-          <p style={{ marginBottom: "0px", fontSize: "16px" }}>
-            이름: {/*${nickname} 
-          </p>
-        </div>*/}
      </div>
      <div
-        style={{
+        // style={{
-          width: "80%",
+        //   width: "80%",
-          height: "200px",
+        //   height: "200px",
-          textAlign: "center",
+        //   textAlign: "center",
-          fontSize: "18px",
+        //   fontSize: "18px",
-          marginLeft: "10%",
+        //   marginLeft: "10%",
-          marginRight: "10%",
+        //   marginRight: "10%",
-        }}
+        // }}
      >
        {/* 아래 텍스트 */}
-        <p>
+        <p align= "center" style={{
-          <br></br>
+          fontSize: "30px",
-          축하합니다! 친구{/*${InvitePerson.nickname}*/}가 화상회의방{" "}
+          marginTop: "120px",
-          {/*${InvitedRoo.roomid}*/}로 초대하였습니다.
+          marginBottom: "80px"
-          <br></br>
+        }}>
-          <br></br>
+          축하합니다! 친구가 당신을
-          초대를 수락하시겠습니까?
+          <br/>
+          화상회의에 초대했습니다.
+          <br/>
+          <br/>
+          <b>초대를 수락하시겠습니까?</b>
        </p>
      </div>
@@ -88,7 +81,8 @@ const InvitePage = () => {
          className="col-2 p-1 btn btn-primary"
          data-bs-dismiss="modal"
          style={{ width: "120px" }}
-          onClick={GoInvitedroom}
+          onClick={goInvitedroom}
        >
          수락
        </button>
@@ -97,7 +91,7 @@ const InvitePage = () => {
          className="col-2 p-1 btn btn-primary"
          data-bs-dismiss="modal"
          style={{ width: "120px" }}
-          onClick={Invitereject}
+          onClick={invitereject}
        >
          거절
        </button>

--- a/server/controllers/room.controller.js
+++ b/server/controllers/room.controller.js
@@ -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,17 +44,19 @@ 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 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 {
@@ -68,21 +70,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추가
+    if (user_Id.roomNumber) {
-      user_Id.roomNumber.push(id)
+      //다른 roomNumber가 이미 들어가 있는 경우 id추가
-    }
+      user_Id.roomNumber.push(id);
-    else { //첫 roomNumber인 경우 
+    } else {
-      user_Id.roomNumber = [id]
+      //첫 roomNumber인 경우
+      user_Id.roomNumber = [id];
    }
    // console.log('user_Id.roomNumber2:', user_Id.roomNumber)
-    await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: userId } })
+    await User.update(
-    res.json(newRoom)
+      { roomNumber: user_Id.roomNumber },
+      { where: { id: userId } }
+    );
+    res.json(newRoom);
  } catch (error) {
    console.log(error);
    res.status(500).send("방생성 에러");
@@ -94,7 +100,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("에러");
@@ -102,46 +108,51 @@ const getRoom = async (req, res) => {
 };
 const exitRoom = async (req, res) => {
-  const { id, roomId } = req.params
+  const { id, roomId } = req.params;
-  console.log(id, roomId)
+  console.log(id, roomId);
  const room = await Room.findOne({ where: { id: roomId } });
-  console.log(room.member)
+  console.log(room.member);
-  const index = room.member.indexOf(id)
+  const index = room.member.indexOf(id);
-  console.log('index', index)
+  console.log("index", index);
-  room.member.splice(index, 1)
+  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)
+  console.log(user.roomNumber);
-  const index2 = user.roomNumber.indexOf(id)
+  const index2 = user.roomNumber.indexOf(id);
-  console.log('index', index2)
+  console.log("index", index2);
-  user.roomNumber.splice(index2, 1)
+  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);
+  try {
+    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 { roomId, channelName, plusUser, index } = req.body;
-  console.log('연결성공')
  const room = await Room.findOne({ where: { id: roomId } });
-  room.channel[index][channelName].push(plusUser)
+  room.channel[index][channelName].push(plusUser);
-  console.log('확인2', room.channel[index])
-  console.log('확인2', room.channel)
  await Room.update({ channel: room.channel }, { where: { id: roomId } });
-  return res.json(true)
+  return res.json(true);
-}
+};
 const doubleJoin = async (req, res) => {
-  console.log('연결성공', req.body)
+  const { roomId, index1, index2, joinChName } = req.body;
-  const { roomId, index1, index2, joinChName } = req.body
-  console.log(index1)
  const room = await Room.findOne({ where: { id: roomId } });
-  console.log(room.channel[index1][joinChName])
+  room.channel[index1][joinChName].splice(index2, 1);
-  room.channel[index1][joinChName].splice(index2, 1)
-  console.log(room.channel[index1][joinChName])
-  console.log('room.channel', room.channel)
  await Room.update({ channel: room.channel }, { where: { id: roomId } });
-  return res.json(true)
+  return res.json(true);
-}
+};
 // const makeChannel = async (req, res) => {
 //   const { roomId, channelName } = req.body
@@ -149,5 +160,12 @@ const doubleJoin = async (req, res) => {
 // }
 export default {
-  joinRoom, roomImgUpload, createRoom, getRoom, exitRoom, joinChannel, doubleJoin,
+  joinRoom,
+  roomImgUpload,
+  createRoom,
+  getRoom,
+  exitRoom,
+  changename,
+  joinChannel,
+  doubleJoin,
 };
--- a/server/index.js
+++ b/server/index.js
@@ -23,21 +23,21 @@ sequelize
      roomNumber : ["1234567abc","abc7654321"],
    });
-    await Room.create({
+    // await Room.create({
-      id: "1234567abc",
+    //   id: "1234567abc",
-      name: "room",
+    //   name: "room",
-      owner: 8888,
+    //   owner: 8888,
-      member: ['8888','9999'],
+    //   member: [8888],
-      profileimg: "23bf0d83f161b5bf066f0a81beeb4e78",
+    //   profileimg: "defaultimg",
-    });
+    // });
-    await Room.create({
+    // await Room.create({
-      id: "abc7654321",
+    //   id: "abc7654321",
-      name: "room1",
+    //   name: "room1",
-      owner: 9999,
+    //   owner: 9999,
-      member: ['9999'],
+    //   member: [9999],
-      profileimg: "23bf0d83f161b5bf066f0a81beeb4e78",
+    //   profileimg: "defaultimg",
-    });
+    // });
    app.listen(appConfig.port, () => {
      console.log(`Server is running on port ${appConfig.port}`);

--- a/server/routes/room.route.js
+++ b/server/routes/room.route.js
@@ -6,6 +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("/changename").put(roomCrtl.changename);
 router.route("/joinChannel").post(roomCrtl.joinChannel);
 router.route("/doubleJoin").post(roomCrtl.doubleJoin);
 // router.route("/makeChannel").post(roomCrtl.makeChannel);