Merge remote-tracking branch 'origin/woojiweon' into seoyeon2

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/App.js

@@ -15,7 +15,7 @@ function App() {
       {/* <AuthProvider> */}
       <Switch>
         <Route exact path="/" component={HomeGuestPage} />
-        <Route exact path="/user" component={HomeUserPage} />
+        <Route exact path="/user/:id" component={HomeUserPage} />
         <Route exact path="/signup" component={SingupPage} />
         <Route exact path="/login" component={LoginPage} />
         <Route path="/profile/:id/update" component={InfoUpdatePage} />

client/src/apis/room.api.js

@@ -5,8 +5,8 @@ const getRoom = async (payload) => {
   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">
+            <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/CreateRoom.js

@@ -3,11 +3,11 @@ import { Redirect, useParams } from "react-router-dom";
 import roomApi from "../../apis/room.api";
 import catchErrors from "../../context/catchError";
 
-const userId = localStorage.getItem('user');
+const id = localStorage.getItem('user');
 const INIT_ROOM = {
     name: '',
-    owner: userId,
-    member: userId,
+    owner: id,
+    member: id,
     profileimg: '',
 }
 
@@ -43,9 +43,9 @@ const CreateRoom = () => {
     }
 
     if (success) {
-        console.log('success', success)
+        // console.log('success', success)
         alert('룸생성이 완료되었습니다!')
-        window.location.href='/user'
+        window.location.href=`/user/${id}`
     }
 
     const { name, owner, member, profileimg } = room;

client/src/components/Home/JoinRoom.js

@@ -3,77 +3,84 @@ import { Redirect } from "react-router-dom";
 import roomApi from "../../apis/room.api";
 import catchErrors from "../../context/catchError";
 
-const userId = localStorage.getItem("user");
+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: userId, 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) {
-    return <Redirect to="/user" />;
-  }
 
-  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>
+    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">
+                    {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/Home/RoomSingle.js

@@ -37,7 +37,7 @@ const RoomSingle = () => {
 
   return (
     <Link
-      to={`/room/${id}/${channelId}`}
+      to={`/room/${roomId}/${channelId}`}
       className="text-decoration-none text-dark"
     >
       <div

client/src/components/Login.js

@@ -4,6 +4,7 @@ import userApi from '../apis/user.api'
 import catchErrors from '../context/catchError'
 import { handleLogin } from '../context/auth'
 const INIT_USER = {
+  userId: '9999',
   email: '',
   password: '',
 }
@@ -13,6 +14,7 @@ const Login = () => {
   const [disabled, setDisabled] = useState(true)
   const [error, setError] = useState('')
   const [success, setSuccess] = useState(false)
+  const [id, setId] = useState('')
 
   useEffect(() => {
     const isUser = Object.values(user).every((el) => Boolean(el))
@@ -30,6 +32,8 @@ const Login = () => {
       // setLoading(true);
       // setError("");
       const data = await userApi.login(user)
+      console.log(data)
+      setId(data.id)
       handleLogin(data.id)
       setSuccess(true)
     } catch (error) {
@@ -41,7 +45,7 @@ const Login = () => {
   }
   if (success) {
     alert('로그인 되었습니다');
-    window.location.href='/user'
+    window.location.href=`/user/${id}`
   }
 
   const { email, password } = user

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">
+          <Link to={`/user/${id}`}>
             <img src="/BORA.png" style={{ width: '160px' }} />
           </Link>
         </div>

client/src/components/Room/RightHamburger.js

@@ -105,7 +105,7 @@ const RightHamberger = () => {
                                     </div>
                                     <div className="row mb-3">
                                         <div className="d-flex justify-content-evenly">
-                                            {/* <Link to="/user"> */}
+                                            {/* <Link to="/user/:id"> */}
                                             <button
                                                 type="submit"
                                                 className="col-2 p-1 btn btn-primary"

client/src/pages/InvitePage.js

@@ -10,7 +10,7 @@ const InvitePage = () => {
 
   function Invitereject() {
     // if () //초대받은 사람이 로그인 o
-    //   <Link to="/user"></Link>//유저 페이지로 이동.
+    //   <Link to="/user/:id"></Link>//유저 페이지로 이동.
     // else //로그인x
     //   <Link to="/"></Link> //메인화면으로 이동.
   }

controllers/room.controller.js

@@ -42,14 +42,19 @@ 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 id = nanoid();
+  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)) {
-    const id = nanoid();
+  while (Id) {
+    const id = nanoid()
     const Id = await Room.findOne({ where: { id: id } });
   }
   try {
@@ -60,28 +65,24 @@ 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추가
-      user_Id.roomNumber.push(id);
-    } else {
-      //첫 roomNumber인 경우
-      user_Id.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 } }
-    );
-    res.json(newRoom);
+    await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: userId } })
+    res.json(newRoom)
   } catch (error) {
     console.log(error);
     res.status(500).send("방생성 에러");
@@ -102,7 +103,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, () => {

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;