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

client/src/components/Home/RoomSingle.js

@@ -38,7 +38,6 @@ const RoomSingle = () => {
   useEffect(() => {
     getJoinRoom(id);
   }, [id]);
-  console.log(room)
 
   const { profileimg } = room;
   return (
@@ -46,7 +45,7 @@ const RoomSingle = () => {
       {room &&
         room.map((el) => (
           <div>
-            {room === INIT_ROOM ? (<div></div>): (
+            {room[0] === INIT_ROOM ? (<div></div>): (
             <Link
               to={`/room/${el.roomId}/${channelId}`}
               className="text-decoration-none text-dark"

client/src/components/Login.js

@@ -45,22 +45,33 @@ const Login = () => {
     }
   }
   if (success) {
-    alert('로그인 되었습니다');
+    alert('로그인 되었습니다')
     window.location.href = `/user/${id}`
   }
 
   const { email, password } = user
 
   return (
-    <div className="container">
-      <form onSubmit={handleSubmit}>
-        <div className="m-3 d-flex justify-content-center">
+    <div>
+      <div>
+        <form
+          style={{ backgroundColor: '#FCF4FF' }}
+          className="flex-column align-items-center justify-content-center p-2"
+        >
+          <div className="d-flex justify-content-center">
             <Link to="/">
               <img src="/BORA.png" style={{ width: '160px' }} />
             </Link>
           </div>
+        </form>
+      </div>
+      <div
+        style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
+      ></div>
+      <div className="container">
+        <form onSubmit={handleSubmit}>
         <div className="row mt-5 d-flex align-items-center">
-          <h2 style={{ textAlign: 'center' }}>로그인</h2>
+          <h5 style={{ textAlign: 'center' }}>로그인</h5>
           {error && <div className="alert alert-danger">{error}</div>}
           <div className="form-group">
             <div className="mt-5">
@@ -100,6 +111,7 @@ const Login = () => {
         </div>
       </form>
       </div>
+    </div>
   )
 }
 

client/src/components/Room/InitRoom.js

@@ -17,7 +17,9 @@ const InitRoom = () => {
   async function getRoom(roomId) {
     try {
       const data = await roomApi.getRoom([roomId]);
-      setRoom(data[0]);
+      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/RightHamburger.js

 import { useState, useEffect } from "react";
 import { Link, useParams } from "react-router-dom";
 import ChannelSingle from "./ChannelSingle";
-import Rightimg from "../../images/RightHamburgerImg.png";
 import RoomApi from "../../apis/room.api";
-import roomApi from "../../apis/room.api";
 import catchErrors from "../../context/catchError";
 
+const INIT_ROOM = {
+  name: "",
+};
+
 const INIT_CHANNEL = {
   channelName: "",
   joinName: [],
 };
 const RightHamburger = () => {
   const [channel, setChannel] = useState([INIT_CHANNEL]);
+  const [room, setRoom] = useState([INIT_ROOM]);
   const { roomId } = useParams();
   const [error, setError] = useState("");
-    const id = localStorage.getItem('user');
+  const id = localStorage.getItem("user");
 
-    async function exitRoom() {
-        console.log('id, roomid정보', id, roomId)
+  async function getRoom(roomId) {
     try {
-            const data = await roomApi.exitRoom({ id, roomId })
-            console.log(data)
+      const data = await RoomApi.getRoom([roomId]);
+      setRoom({ ...room, name: data[0].name });
     } catch (error) {
       catchErrors(error, setError);
     }
+  }
 
-
+  async function exitRoom() {
+    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) {
-        // console.log('roomId', roomId)
-        const ID = roomId
+    const ID = roomId;
     try {
-            const data = await roomApi.getRoom([ID]);
-            const Channel = data[0].channel
-            console.log('방데이터:', Channel)
+      const data = await RoomApi.getRoom([ID]);
+      const Channel = data[0].channel;
+      console.log("방데이터:", Channel);
       const channelList = [];
-            for (const prop in Channel) { // Channel의 항목(prop)으로 작업을 실행합니다
+      for (const prop in Channel) {
+        // Channel의 항목(prop)으로 작업을 실행합니다
         for (const key in Channel[prop]) {
-                    console.log(key)
-                    console.log(prop)
-                    console.log(Channel[prop][key])
+          console.log(key);
+          console.log(prop);
+          console.log(Channel[prop][key]);
           channelList.push({
             channelName: key,
-                        joinName: Channel[prop][key]
+            joinName: Channel[prop][key],
           });
         }
       }
@@ -52,12 +62,20 @@ const RightHamburger = () => {
       catchErrors(error, setError);
     }
   }
+
   // console.log(channel)
 
   useEffect(() => {
-        // console.log('roomId', roomId)
     getChannel(roomId);
+    getRoom(roomId);
   }, [roomId]);
+
+  function roomIdCopy() {
+    const t = document.querySelector("#roomId").innerText;
+    console.log(t);
+    navigator.clipboard.writeText(t);
+    document.execCommand("copy");
+  }
   return (
     <div>
       <div>
@@ -71,7 +89,7 @@ const RightHamburger = () => {
           aria-label="Toggle navigation"
           style={{ border: "#f4c1f2" }}
         >
-                    <img src={Rightimg} width="50px" height="30px" />
+          <img src="/RightHamburgerImg.png" width="50px" height="30px" />
         </button>
       </div>
       <div
@@ -94,7 +112,7 @@ const RightHamburger = () => {
               color: "#000000",
             }}
           >
-                        방 이름{/*Room.name*/}
+            {room.name}
           </p>
           <h6 className="mt-2" id="roomId">
             {" "}
@@ -107,9 +125,67 @@ const RightHamburger = () => {
             aria-label="Close"
           ></button>
         </div>
-
-                <ChannelSingle channel={channel} />
         <div>
+          <ChannelSingle channel={channel} />
+          <div className="d-flex flex-row-reverse">
+            <button
+              type="button"
+              className="m-3 rounded"
+              data-bs-toggle="modal"
+              data-bs-target="#inviteRoom"
+              style={{
+                height: "30px",
+                fontWeight: "bold",
+                backgroundColor: "#E0CEE8",
+                color: "black",
+                border: "1px #D64D61",
+              }}
+            >
+              초대
+            </button>
+            <div
+              className="modal fade"
+              id="inviteRoom"
+              tabIndex="-1"
+              aria-labelledby="exitRoomLabel"
+              aria-hidden="true"
+            >
+              <div className="modal-dialog">
+                <div className="modal-content">
+                  <div className="modal-header">
+                    <button
+                      type="button"
+                      className="btn-close"
+                      data-bs-dismiss="modal"
+                      aria-label="Close"
+                    ></button>
+                  </div>
+                  <div className="modal-body d-flex justify-content-center">
+                    어떤 방식으로 초대하시겠습니까?
+                  </div>
+                  <div className="row mb-3">
+                    <div className="d-flex justify-content-evenly">
+                      <button
+                        type="submit"
+                        className="col-2 p-1 btn btn-primary"
+                        style={{ width: "120px" }}
+                      >
+                        카카오로 초대
+                      </button>
+                      <button
+                        type="submit"
+                        className="col-2 p-1 btn btn-primary"
+                        data-bs-dismiss="modal"
+                        style={{ width: "120px" }}
+                        onClick={roomIdCopy}
+                      >
+                        방 Id 복사
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
             <div className="d-flex flex-row-reverse">
               <button
                 type="button"
@@ -164,8 +240,10 @@ const RightHamburger = () => {
                     </div>
                     <div className="row mb-3">
                       <div className="d-flex justify-content-evenly">
-                                            <Link to={`/user/${id}`} className="col-2 p-1 btn btn-primary">
-                                            {/* <div onSubmit={exitSubmit}> */}
+                        <Link
+                          to={`/user/${id}`}
+                          className="col-2 p-1 btn btn-primary"
+                        >
                           <button
                             type="button"
                             onClick={exitRoom}
@@ -174,7 +252,6 @@ const RightHamburger = () => {
                           >
                             예
                           </button>
-                                            {/* </div> */}
                         </Link>
                         <button
                           type="submit"
@@ -192,6 +269,7 @@ const RightHamburger = () => {
           </div>
         </div>
       </div>
+    </div>
   );
 };
 

client/src/components/SignUp.js

@@ -66,17 +66,28 @@ const Signup = () => {
 
   const { name, id, password, checkpw, phone } = user
   return (
-    <div className="container">
-      {error && <div className="alert alert-danger">{error}</div>}
-      <form onSubmit={handleSubmit}>
-        <div className="m-3 d-flex justify-content-center">
+    <div>
+      <div>
+        <form
+          style={{ backgroundColor: '#FCF4FF' }}
+          className="flex-column align-items-center justify-content-center p-2"
+        >
+          <div className="d-flex justify-content-center">
             <Link to="/">
               <img src="/BORA.png" style={{ width: '160px' }} />
             </Link>
           </div>
+        </form>
+      </div>
+      <div
+        style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
+      ></div>
+      <div className="container">
+        <form onSubmit={handleSubmit}>
           <div className="row mt-4">
             <h5 style={{ textAlign: 'center' }}>회원가입</h5>
           </div>
+          {error && <div className="alert alert-danger">{error}</div>}
           <div className="form-group">
             <div className="p-2">
               <label className="p-1">이름</label>
@@ -152,6 +163,7 @@ const Signup = () => {
           </div>
         </form>
       </div>
+    </div>
   )
 }
 

server/app.js

@@ -19,6 +19,10 @@ const io = new Server(server, {
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(cookieParser());
+app.use('/uploads', express.static('uploads'))
+app.use('/roomUploads', express.static('roomUploads'))
+
+
 
 app.use("/api", mainRouter);
 

server/controllers/room.controller.js

@@ -2,7 +2,7 @@ import { Room, User } from "../models/index.js";
 import { customAlphabet } from "nanoid";
 import isLength from "validator/lib/isLength.js";
 import RoomModel from "../models/room.model.js";
-
+import multer from "multer";
 const nanoid = customAlphabet("1234567890abcdef", 10);
 
 const joinRoom = async (req, res) => {
@@ -43,7 +43,6 @@ const joinRoom = async (req, res) => {
   }
 };
 
-const multer = require("multer");
 const upLoadRoomImg = multer({ dest: "roomUploads/" });
 const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]);