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>
@@ -51,14 +52,14 @@ const Header = () => {
                 <div className="row mb-3">
                   <div className="d-flex justify-content-evenly">
                     <Link to="/" className="col-2 p-1 btn btn-primary">
-                    <button
-                      type="submit"
-                      className="btn btn-primary"
-                      onClick={() => handleLogout()}
-                      data-bs-dismiss="modal"
-                    >
-                      예
-                    </button>
+                      <button
+                        type="submit"
+                        className="btn btn-primary"
+                        onClick={() => handleLogout()}
+                        data-bs-dismiss="modal"
+                      >
+                        예
+                      </button>
                     </Link>
                     <button
                       type="submit"

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

@@ -6,77 +6,81 @@ import catchErrors from "../../context/catchError";
 const id = localStorage.getItem("user");
 
 const JoinRoom = () => {
-  const [roomId, setRoomId] = useState("");
-  const [disabled, setDisabled] = useState(true);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState(false);
+    const [roomId, setRoomId] = useState("");
+    const [disabled, setDisabled] = useState(true);
+    const [error, setError] = useState("");
+    const [success, setSuccess] = useState(false);
 
-  useEffect(() => {
-    const isRoom = Object.values(roomApi).every((el) => Boolean(el));
-    isRoom ? setDisabled(false) : setDisabled(true);
-  }, [roomId]);
+    useEffect(() => {
+        const isRoom = Object.values(roomApi).every((el) => Boolean(el));
+        isRoom ? setDisabled(false) : setDisabled(true);
+    }, [roomId]);
 
-  function handleChange(event) {
-    const { value } = event.target;
-    setRoomId(value);
-  }
+    function handleChange(event) {
+        const { value } = event.target;
+        setRoomId(value);
+    }
 
-  async function handleSubmit(e) {
-    e.preventDefault();
-    try {
-      // setLoading(true);
-      setError("");
-      const data = await roomApi.join({ userId: id, roomId: roomId });
-      setSuccess(true);
-    } catch (error) {
-      catchErrors(error, setError);
-    } finally {
-      // setLoading(false);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        try {
+            // setLoading(true);
+            setError("");
+            const data = await roomApi.join({ userId: id, roomId: roomId });
+            setSuccess(true);
+        } catch (error) {
+            catchErrors(error, setError);
+        } finally {
+            // setLoading(false);
+        }
     }
-  }
 
-  if (success) {
-    // console.log('success', success)
-    alert('룸참여가 완료되었습니다!')
-    return <Redirect to={`/user/${id}`} />;
-  }
+    if (success) {
+        // console.log('success', success)
+        alert('룸참여가 완료되었습니다!')
+        window.location.href=`/user/${id}`
+        // return <Redirect to={`/user/${id}`} />;
+    }
 
-  return (
-    <div className="modal-content">
-      <form onSubmit={handleSubmit}>
-        <div className="modal-header">
-          <div className="modal-title" id="joinModal">
-            방참여하기
-          </div>
-          <button
-            type="button"
-            className="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
-        </div>
-        <div className="modal-body">
-          <div className="input-group mb-3">
-            <input
-              type="text"
-              className="form-control"
-              placeholder="참여코드를 입력하세요"
-              aria-label="참여코드를 입력하세요"
-              aria-describedby="basic-addon1"
-              name="roomId"
-              value={roomId}
-              onChange={handleChange}
-            />
-          </div>
-          <div className="modal-footer">
-            <button type="submit" className="btn btn-primary">
-              확인
-            </button>
-          </div>
+    return (
+        <div className="modal-content">
+            <form onSubmit={handleSubmit}>
+                <div className="modal-header">
+                    <div className="modal-title" id="joinModal">
+                        방참여하기
+                    </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="roomId"
+                            value={roomId}
+                            onChange={handleChange}
+                        />
+                    </div>
+                    <div className="modal-footer">
+                        <button
+                            type="submit"
+                            className="btn btn-primary">
+                            확인
+                        </button>
+                    </div>
+                </div>
+            </form>
         </div>
-      </form>
-    </div>
-  );
+    );
 };
 
 export default JoinRoom;

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;