From 2ddaecff33b5bbf8f637e96e7db0e23c089e7b6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=EB=B3=91=EC=9C=A4?= <rnjsquddbs11@korea.ac.kr>
Date: Sat, 7 Aug 2021 17:15:05 +0900
Subject: [PATCH] 0807

---
 client/src/apis/room.api.js                   |  7 ++-
 client/src/components/Home/CreateRoom.js      |  1 +
 .../components/Room/Channelsettingchange.js   | 56 +++++++++++++++++
 client/src/components/Room/Createchannel.js   | 11 ++++
 client/src/components/Room/Deletechannel.js   | 10 ++++
 client/src/components/Room/RightHamburger.js  | 21 ++-----
 ...Roomnamechange.js => Roomsettingchange.js} | 60 +++++++++++++++----
 client/src/pages/InvitePage.js                | 50 +++++++++++++++-
 server/controllers/room.controller.js         | 17 +++++-
 server/routes/room.route.js                   |  1 +
 10 files changed, 203 insertions(+), 31 deletions(-)
 create mode 100644 client/src/components/Room/Channelsettingchange.js
 create mode 100644 client/src/components/Room/Createchannel.js
 create mode 100644 client/src/components/Room/Deletechannel.js
 rename client/src/components/Room/{Roomnamechange.js => Roomsettingchange.js} (65%)

diff --git a/client/src/apis/room.api.js b/client/src/apis/room.api.js
index 0f2c11d..600d3fe 100644
--- a/client/src/apis/room.api.js
+++ b/client/src/apis/room.api.js
@@ -25,6 +25,11 @@ const changename = async (payload) => {
   return data;
 }
 
-const roomApi = { getRoom, exitRoom, create, join, changename };
+const profileimg = async (formData) => {
+  const { data } = await axios.put("/api/room/profileimg", formData);
+  return data;
+};
+
+const roomApi = { getRoom, exitRoom, create, join, changename, profileimg };
 
 export default roomApi;
diff --git a/client/src/components/Home/CreateRoom.js b/client/src/components/Home/CreateRoom.js
index 3e0b4ea..568b25c 100644
--- a/client/src/components/Home/CreateRoom.js
+++ b/client/src/components/Home/CreateRoom.js
@@ -22,6 +22,7 @@ const CreateRoom = () => {
 
     function handleChange(event) {
         const { name, value, files } = event.target;
+        console.log(event.target)
         if (files) {
             setRoom({ ...room, [name]: files[0] })
         } else {
diff --git a/client/src/components/Room/Channelsettingchange.js b/client/src/components/Room/Channelsettingchange.js
new file mode 100644
index 0000000..43667a7
--- /dev/null
+++ b/client/src/components/Room/Channelsettingchange.js
@@ -0,0 +1,56 @@
+import { useParams } from "react-router";
+import Createchannel from "./Createchannel";
+import Deletechannel from "./Deletechannel";
+
+const Channelsettingchange = (props) => {
+  const { roomId } = useParams();
+  console.log(props);
+  console.log(roomId);
+  return (
+    <div>
+      <button
+        type="submit"
+        data-bs-toggle="modal"
+        data-bs-target="#changechannel"
+        style={{
+          weight: "100px",
+          height: "60px",
+          backgroundColor: "#f5cfe3",
+          borderRadius: "5px",
+          color: "black",
+          border: "1px #f5cfe3",
+        }}
+      >
+        채널 설정 변경{/* 방 설정 변경으로 바꾸기 */}
+      </button>
+
+      <div
+        className="modal fade"
+        id="changechannel"
+        tabIndex="-1"
+        aria-labelledby="changechannelsettingLabel"
+        aria-hidden="true"
+      >
+        <div className="modal-dialog">
+          <div className="modal-content">
+            <div className="modal-header">
+              <div className="modal-title" id="changechannelsetting">
+                채널 설정 변경
+              </div>
+              {/* <Createchannel />
+              <Deletechannel /> */}
+              <button
+                type="button"
+                className="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Channelsettingchange;
diff --git a/client/src/components/Room/Createchannel.js b/client/src/components/Room/Createchannel.js
new file mode 100644
index 0000000..8a08509
--- /dev/null
+++ b/client/src/components/Room/Createchannel.js
@@ -0,0 +1,11 @@
+
+/* 만들 채널의 이름을 입력받고(지금부터 "이름"이라 하자.), 그걸로 {"이름": []}의 형태로 체널을 만든다. 그후, 그 json파일을 현재 roomId의 channel에 추가한다. */
+const Createchannel = () => {
+    return (
+        <div>
+            
+        </div>
+    );
+};
+
+export default Createchannel;
\ No newline at end of file
diff --git a/client/src/components/Room/Deletechannel.js b/client/src/components/Room/Deletechannel.js
new file mode 100644
index 0000000..51cd10c
--- /dev/null
+++ b/client/src/components/Room/Deletechannel.js
@@ -0,0 +1,10 @@
+
+/* 삭제할 채널의 이름을 입력받아서 일치하는 채널이름이 있으면 삭제하고, 없으면 그런 이름의 채널이 존재하지 않는다고 알림창을 띄운다. */
+const Deletechannel = () => {
+    return (
+        <div>
+        </div>
+    );
+};
+
+export default Deletechannel;
\ No newline at end of file
diff --git a/client/src/components/Room/RightHamburger.js b/client/src/components/Room/RightHamburger.js
index cdefe77..8b5bd3e 100644
--- a/client/src/components/Room/RightHamburger.js
+++ b/client/src/components/Room/RightHamburger.js
@@ -4,7 +4,8 @@ import ChannelSingle from "./ChannelSingle";
 import RoomApi from "../../apis/room.api";
 import catchErrors from "../../context/catchError";
 import KakaoShareButton from "../KakaoShareButton";
-import Roomnamechange from "./Roomnamechange";
+import Roomsettingchange from "./Roomsettingchange";
+import Channelsettingchange from "./Channelsettingchange";
 
 const INIT_ROOM = {
   name: "",
@@ -15,6 +16,7 @@ const INIT_CHANNEL = {
   channelName: "",
   joinName: [],
 };
+
 const RightHamburger = () => {
   const [channel, setChannel] = useState([INIT_CHANNEL]);
   const [room, setRoom] = useState([INIT_ROOM]);
@@ -245,21 +247,8 @@ const RightHamburger = () => {
                     </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 />
+                        <Roomsettingchange />
+                        <Channelsettingchange channel={channel} />
                       </div>
                     </div>
                   </div>
diff --git a/client/src/components/Room/Roomnamechange.js b/client/src/components/Room/Roomsettingchange.js
similarity index 65%
rename from client/src/components/Room/Roomnamechange.js
rename to client/src/components/Room/Roomsettingchange.js
index 7f37e71..edc9c8b 100644
--- a/client/src/components/Room/Roomnamechange.js
+++ b/client/src/components/Room/Roomsettingchange.js
@@ -6,9 +6,10 @@ import catchErrors from "../../context/catchError";
 const INIT_Room = {
   id: "",
   name: "",
+  profileimg: "",
 };
 
-const Roomnamechange = () => {
+const Roomsettingchange = () => {
   const { roomId } = useParams();
   const [Room, setRoom] = useState(INIT_Room);
   const [error, setError] = useState("");
@@ -17,7 +18,7 @@ const Roomnamechange = () => {
 
   async function getdata(Roomdata) {
     try {
-      const data = await RoomApi.getRoom(Roomdata);
+      const data = await RoomApi.getRoom([Roomdata]);
       setRoom(data);
       console.log(data);
     } catch (error) {
@@ -31,10 +32,29 @@ const Roomnamechange = () => {
   const updateinfo = (event) => {
     const { name, value } = event.target;
     setRoom({ ...Room, [name]: value });
-    console.log(Room);
+  };
+
+  const handleChange = async (event) => {
+    const { files } = event.target;
+    console.log("files:", files);
+    let formData = new FormData();
+    formData.append("profileimg", files[0]);
+    formData.append("id", roomId);
+    try {
+      const res = await RoomApi.profileimg(formData);
+      // if (files) {
+      //   setRoom({ ...Room, profileimg: res });
+      // } else {
+      //   setRoom();
+      // }
+    } catch (error) {
+      catchErrors(error, setError);
+    }
   };
 
   const changeinfo = async (event) => {
+    window.location.reload();
+    // window.location.href = window.location.href;
     const req = await RoomApi.changename(Room);
   };
 
@@ -53,7 +73,7 @@ const Roomnamechange = () => {
           border: "1px #f5cfe3",
         }}
       >
-        방 이름 변경
+        방 설정 변경{/* 방 설정 변경으로 바꾸기 */}
       </button>
 
       <div
@@ -66,6 +86,9 @@ const Roomnamechange = () => {
         <div className="modal-dialog">
           <div className="modal-content">
             <div className="modal-header">
+              <div className="modal-title" id="changeRoomsetting">
+                방 설정 변경
+              </div>
               <button
                 type="button"
                 className="btn-close"
@@ -75,9 +98,26 @@ const Roomnamechange = () => {
             </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
+                className="d-flex justify-content-center"
+                style={{ margin: "0px" }}
+              >
+                <input
+                  type="file"
+                  className="upload-hidden"
+                  onChange={handleChange}
+                  accept="image/*"
+                  name="profileimg"
+                />
+              </div>
+              <div
+                className="d-flex justify-content-center"
+                style={{ margin: "0px" }}
+              >
                 {/* <Link to="/user/:id"> */}
-                <p style={{marginTop: "31px", marginBottom: "0px"}}>방 이름: </p>
+                <p style={{ marginTop: "31px", marginBottom: "0px" }}>
+                  방 이름:{" "}
+                </p>
                 <input
                   onChange={updateinfo}
                   name="name"
@@ -95,11 +135,11 @@ const Roomnamechange = () => {
                     height: "38px",
                     width: "130px",
                     marginTop: "0px",
-                    marginBottom: "0px"
+                    marginBottom: "0px",
                   }}
                 />
-                </div>
-                <div className="d-flex justify-content-evenly">
+              </div>
+              <div className="d-flex justify-content-evenly">
                 {/* <Link to={`/room/${roomId}/${Room.channel}`}> */}
                 <button
                   onClick={changeinfo}
@@ -125,4 +165,4 @@ const Roomnamechange = () => {
   );
 };
 
-export default Roomnamechange;
+export default Roomsettingchange;
diff --git a/client/src/pages/InvitePage.js b/client/src/pages/InvitePage.js
index 62b6bd9..73734da 100644
--- a/client/src/pages/InvitePage.js
+++ b/client/src/pages/InvitePage.js
@@ -1,15 +1,59 @@
 import Header from "../components/Header";
+import { useState, useEffect } from "react";
+import { useParams } from "react-router";
+import roomApi from "../apis/room.api";
+import userApi from "../apis/user.api";
+import catchErrors from "../context/catchError";
 
+const INIT_PROFILE = {
+  id: "",
+  roomNumber: ""
+};
+
+// userapi로 유저정보 불러다가, 참여방 목록에 그 방아이디 추가하고, 방에도 그 유저 아이디 추가한 다음에 참가시키기.
 const InvitePage = () => {
+  const [profile, setProfile] = useState([INIT_PROFILE]);
+  const [success, setSuccess] = useState(false);
+  const [error,setError]=useState("");
   const usercheck = localStorage.getItem("user");
+  const {roomId} = useParams();
+
+  async function getProfile(userID) {
+    try {
+      const data = await userApi.getUser(userID);
+      setProfile(data);
+    } catch (error) {
+      catchErrors(error, setError);
+    }
+  }
+
+  async function joinroom(userId,roomId) {
+    try {
+        // setLoading(true);
+        setError("");
+        const data = await roomApi.join({ userId: userId, roomId: roomId });
+        console.log('서버연결됬나요', data)
+        setSuccess(true);
+    } catch (error) {
+        catchErrors(error, setError);
+    } finally {
+        // setLoading(false);
+    }
+}
+  useEffect(() => {
+    getProfile(usercheck);
+  }, []);
 
   function goInvitedroom() {
     let check1= null;
     let check2= null;
+    console.log(usercheck);
     if (usercheck)
-      check1 = window.confirm("카카오톡으로 전달된 초대코드를 사용해 참여해 주세요")
-      if(check1)
-      window.location.href=`/user/${usercheck}`
+      joinroom(usercheck,roomId);
+      if(success)
+        check1 = window.confirm("방 참여가 완료되었습니다.")
+        if(check1)
+        window.location.href=`/user/${usercheck}`
     else 
       check2 = window.confirm("로그인이 필요합니다.")
       if(check2)
diff --git a/server/controllers/room.controller.js b/server/controllers/room.controller.js
index d6ce715..771bc56 100644
--- a/server/controllers/room.controller.js
+++ b/server/controllers/room.controller.js
@@ -46,6 +46,21 @@ const joinRoom = async (req, res) => {
 const upLoadRoomImg = multer({ dest: "roomUploads/" });
 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 img = avatar.filename;
+    console.log(img);
+    await Room.update({ profileimg: img }, { where: { id: id } });
+    res.json(img);
+  } catch (error) {
+    console.log(error);
+    res.status(500).send("이미지 업데이트 실패");
+  }
+};
+
 const createRoom = async (req, res) => {
   const { userId, name } = req.body;
   const avatar = req.files["profileimg"][0];
@@ -133,5 +148,5 @@ const changename = async (req,res) => {
 };
 
 export default {
-  joinRoom, roomImgUpload, createRoom, getRoom, exitRoom, changename
+  joinRoom, roomImgUpload, update, createRoom, getRoom, exitRoom, changename
 };
diff --git a/server/routes/room.route.js b/server/routes/room.route.js
index c8959a7..4babaa1 100644
--- a/server/routes/room.route.js
+++ b/server/routes/room.route.js
@@ -7,5 +7,6 @@ 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("/profileimg").put(roomCrtl.roomImgUpload, roomCrtl.update)
 
 export default router;
\ No newline at end of file
-- 
GitLab