0802

app.js

@@ -14,6 +14,7 @@ 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);
 
 let receiverPCs = {};

client/src/apis/room.api.js

@@ -5,8 +5,8 @@ const getRoom = async (id) => {
   return data;
 };
 
-const create = async (payload) => {
-  const { data } = await axios.post("/api/room/create", payload);
+const create = async (formData) => {
+  const { data } = await axios.post("/api/room/create", formData);
   return data;
 };
 

client/src/components/Header.js

@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom'
 import { handleLogout } from '../context/auth'
 
 const Header = () => {
+  const id = localStorage.getItem('user');
   return (
     <div>
       <form
@@ -10,7 +11,7 @@ const Header = () => {
       >
         <div className="d-flex justify-content-end">
           <div>
-            <Link to="/user/:id">
+            <Link to={`/user/${id}`}>
               <img src="/BORA.png" style={{ width: '160px' }} />
             </Link>
           </div>

client/src/components/Home/AddRoom.js

@@ -11,6 +11,7 @@ const AddRoom = () => {
           className="py-1 px-2"
           data-bs-toggle="modal"
           data-bs-target="#myModal"
+          // data-bs-dismiss="modal"
           style={{
             display: "flex",
             flexDirection: "column",
@@ -72,6 +73,7 @@ const AddRoom = () => {
                     className="p-3"
                     data-bs-toggle="modal"
                     data-bs-target="#makeModal"
+                    // data-bs-dismiss="modal"
                     style={{
                       display: "flex",
                       flexDirection: "column",

client/src/components/Home/JoinRoom.js

@@ -38,7 +38,8 @@ const JoinRoom = () => {
     if (success) {
         // console.log('success', success)
         alert('룸참여가 완료되었습니다!')
-    return <Redirect to={`/user/${id}`} />;
+        window.location.href=`/user/${id}`
+        // return <Redirect to={`/user/${id}`} />;
     }
 
     return (
@@ -56,6 +57,7 @@ const JoinRoom = () => {
                     ></button>
                 </div>
                 <div className="modal-body">
+                    {error && <div className="alert alert-danger">{error}</div>}
                     <div className="input-group mb-3">
                         <input
                             type="text"
@@ -69,7 +71,9 @@ const JoinRoom = () => {
                         />
                     </div>
                     <div className="modal-footer">
-            <button type="submit" className="btn btn-primary">
+                        <button
+                            type="submit"
+                            className="btn btn-primary">
                             확인
                         </button>
                     </div>

client/src/components/Login.js

 import { useEffect, useState } from 'react'
-import { Redirect } from 'react-router-dom'
+import { Redirect} from 'react-router-dom'
 import userApi from '../apis/user.api'
 import catchErrors from "../context/catchError";
 import { handleLogin } from '../context/auth';
 const INIT_USER = {
+  userId: '9999',
   email: '',
   password: '',
 }

client/src/components/Profile/InfoUpdate.js

@@ -34,6 +34,7 @@ const InfoUpdate = () => {
 
   const handleChange = async (event) => {
     const { files } = event.target;
+    console.log('files:',files)
     let formData = new FormData();
     formData.append("img", files[0]);
     formData.append("id", userprofile);

client/src/components/Room/ChannelList.js

@@ -4,12 +4,14 @@ import LeftHamburger from './LeftHamburger';
 import RightHamburger from './RightHamburger';
 
 const ChannelList = () => {
+  const id = localStorage.getItem('user');
+
   return (
     <div>
       <nav className="navbar navbar-light d-flex justify-content-between">
         <LeftHamburger />
         <div>
-          <Link to="/user/:id">
+          <Link to={`/user/${id}`}>
             <img src="/BORA.png" style={{ width: '160px' }} />
           </Link>
         </div>

controllers/room.controller.js

@@ -35,13 +35,18 @@ const joinRoom = async (req, res) => {
   }
 };
 
+const multer = require("multer");
+const upLoadRoomImg = multer({ dest: "roomUploads/" });
+const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]);
+
 const createRoom = async (req, res) => {
-  // console.log('룸정보', req.body)
-  const { name, owner, member, profileimg } = req.body;
+  const { userId, name } = req.body;
+  const avatar = req.files["profileimg"][0];
+  const img = avatar.filename;
   const id = nanoid()
   const Id = await Room.findOne({ where: { id: id } });
   // console.log('id:', id)
-  while (Boolean(Id)) {
+  while (Id) {
     const id = nanoid()
     const Id = await Room.findOne({ where: { id: id } });
   }
@@ -53,23 +58,23 @@ const createRoom = async (req, res) => {
     const newRoom = {
       id: id,
       name: name,
-      owner: owner,
-      member: [member],
-      profileimg: profileimg,
+      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: owner } });
-    if (Boolean(user_Id.roomNumber)) { //다른 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]
     }
     // console.log('user_Id.roomNumber2:', user_Id.roomNumber)
-    await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: owner } })
+    await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: userId } })
     res.json(newRoom)
   } catch (error) {
     console.log(error)
@@ -82,5 +87,5 @@ const getRoom = async (req, res) => {
 }
 
 export default {
-  joinRoom, createRoom, getRoom
+  joinRoom, roomImgUpload, createRoom, getRoom
 };

index.js

@@ -28,7 +28,7 @@ sequelize
       name: "room",
       owner: 8888,
       member: [8888,9999],
-      profileimg: "C:\fakepath\스크린샷(1).png",
+      profileimg: "ef0930f6be18ce73380d952337a6de1f",
     });
 
     await Room.create({
@@ -36,7 +36,7 @@ sequelize
       name: "room1",
       owner: 9999,
       member: [9999],
-      profileimg: "C:\fakepath\스크린샷(1).png",
+      profileimg: "ef0930f6be18ce73380d952337a6de1f",
     });
 
     app.listen(appConfig.port, () => {

models/room.model.js

@@ -20,7 +20,7 @@ const RoomModel = (sequelize) => {
       },
       profileimg: {
         type: DataTypes.STRING,
-        defaultValue: "/user.png"
+        defaultValue:'defaultimg'
       },
       channel: {
         type: DataTypes.ARRAY(DataTypes.JSON),

routes/room.route.js

@@ -3,7 +3,7 @@ import roomCrtl from "../controllers/room.controller.js";
 
 const router = express.Router();
 router.route("/getRoom").post(roomCrtl.getRoom);
-router.route("/create").post(roomCrtl.createRoom);
+router.route("/create").post(roomCrtl.roomImgUpload, roomCrtl.createRoom);
 router.route("/join").put(roomCrtl.joinRoom);
 
 export default router;