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

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/.env

+REACT_APP_KAKAO_KEY=783f1ca14e1f14bc6442eedcd37c76a1
+REACT_FETCH_URL=http://localhost:3000
\ No newline at end of file

client/src/App.js

@@ -6,6 +6,8 @@ import ProfilePage from "./pages/ProfilePage";
 import RoomPage from "./pages/RoomPage";
 import InfoUpdatePage from "./pages/InfoUpdatePage";
 import InvitePage from "./pages/InvitePage";
+import SingupPage from "./components/SignUp";
+import LoginPage from "./components/Login"
 
 function App() {
   return (
@@ -13,10 +15,24 @@ 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} />
         <Route path="/profile/:id" component={ProfilePage} />
-        <Route path="/room/:roomId/:channelId" component={RoomPage} />
+        <Route path="/room/:roomId/:channelId" component={RoomPage}>
+        {/* <Switch>
+          <Route path={"/room/:roomId/meeting"}>
+            <></>
+          </Route>
+          <Route path={"/room/:roomId/normal"}>
+            <></>
+          </Route>
+          <Route path={"/room/:roomId/notice"}>
+            <></>
+          </Route>
+        </Switch> */}
+        </Route>
         <Route path="/room/Invite" component={InvitePage} />
       </Switch>
       {/* </AuthProvider> */}

client/src/apis/room.api.js

 import axios from "axios";
 
-const getRoom = async (id) => {
-  const { data } = await axios.get(`/api/room/getRoom/${id}`);
+const getRoom = async (payload) => {
+  const { data } = await axios.post(`/api/room/getRoom`,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/apis/user.api.js

 import axios from "axios";
 
 const getUser = async (id) => {
-  // console.log('id222:',id.userID)
+
   const { data } = await axios.get(`/api/getUser/${id}`);
   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

@@ -5,14 +5,13 @@ const AddRoom = () => {
   return (
     <div>
       <div className="mx-4 my-3 d-flex justify-content-between">
-        <div className="fs-4">
-          참여중인 방목록
-        </div>
+        <div className="fs-4">참여중인 방목록</div>
         <button
           type="button"
           className="py-1 px-2"
           data-bs-toggle="modal"
           data-bs-target="#myModal"
+          // data-bs-dismiss="modal"
           style={{
             display: "flex",
             flexDirection: "column",
@@ -54,7 +53,8 @@ const AddRoom = () => {
                       backgroundColor: "#E0CEE8",
                       borderColor: "#E0CEE8",
                     }}
-                  >방참여하기
+                  >
+                    방참여하기
                   </button>
                   <div
                     className="modal fade"
@@ -83,7 +83,8 @@ const AddRoom = () => {
                       backgroundColor: "#f5cfe3",
                       borderColor: "#f5cfe3",
                     }}
-                  >방생성하기
+                  >
+                    방생성하기
                   </button>
                   <div
                     className="modal fade"

client/src/components/Home/CreateRoom.js

@@ -3,7 +3,7 @@ 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 INIT_ROOM = {
     name: '',
     owner: userId,
@@ -23,17 +23,26 @@ const CreateRoom = () => {
     }, [room]);
 
     function handleChange(event) {
-        // console.log(room)
-        const { name, value } = event.target
-        setRoom({ ...room, [name]: value })
+        const { name, value, files } = event.target;
+        if (files) {
+            setRoom({ ...room, [name]: files[0] })
+        } else {
+            setRoom({ ...room, [name]: value })
+        }
+        console.log(room)
     }
 
     async function handleSubmit(e) {
         e.preventDefault()
-        // console.log('룸룸', room)
+        let formData = new FormData();
+        console.log('profileimg:', room.profileimg)
+        console.log('name:', room.name)
+        formData.append("name", room.name);
+        formData.append("userId", id);
+        formData.append("profileimg", room.profileimg);
         try {
-            const res = await roomApi.create(room)
-            // console.log(res)
+            const res = await roomApi.create(formData)
+            console.log(res)
             const Id = res.id
             console.log(Id)
             alert(`방참여코드는 ${Id}입니다`)
@@ -46,9 +55,10 @@ const CreateRoom = () => {
     }
 
     if (success) {
-        console.log('success', success)
+        // console.log('success', success)
         alert('룸생성이 완료되었습니다!')
-        return <Redirect to='/user' />
+        window.location.href=`/user/${id}`
+        // return <Redirect to={`/user/${id}`} />
     }
 
     const { name, owner, member, profileimg } = room;
@@ -57,7 +67,9 @@ const CreateRoom = () => {
         <div className="modal-content" >
             <form onSubmit={handleSubmit}>
                 <div className="modal-header">
-                    <div className="modal-title" id="makeModal">방생성하기</div>
+                    <div className="modal-title" id="makeModal">
+                        방생성하기
+                    </div>
                     <button
                         type="button"
                         className="btn-close"
@@ -66,6 +78,7 @@ const CreateRoom = () => {
                     ></button>
                 </div>
                 <div className="modal-body">
+                    {error && <div className="alert alert-danger">{error}</div>}
                     <h6>방프로필사진</h6>
                     <div className="mb-4">
                         <input
@@ -74,7 +87,7 @@ const CreateRoom = () => {
                             onChange={handleChange}
                             accept="image/*"
                             name="profileimg"
-                            value={room.profileimg} />
+                        />
                     </div>
                     <h6>방이름</h6>
                     <div className="input-group">
@@ -86,7 +99,6 @@ const CreateRoom = () => {
                             aria-describedby="basic-addon1"
                             onChange={handleChange}
                             name="name"
-                            value={room.name}
                         />
                     </div>
                     <div className="modal-footer">

client/src/components/Home/HomeProfile.js

@@ -6,28 +6,27 @@ import catchErrors from "../../context/catchError";
 const userprofile = localStorage.getItem("user");
 const INIT_USER = {
   id: userprofile,
-  email: '',
-  img: '',
-}
+  email: "",
+  img: "",
+};
 
 const HomeProfile = () => {
-  const [user, setUser] = useState(INIT_USER)
-
+  const [user, setUser] = useState(INIT_USER);
+  const [error, setError]= useState("");
+  
   async function getSetUser(userID) {
     try {
-      console.log('userID', userID)
-      const data = await userApi.getUser(userID)
-      console.log(data)
-      setUser(data)
-      // console.log(user)
+      const data = await userApi.getUser(userID);
+
+      setUser(data);
     } catch (error) {
-      // catchErrors(error, setError)
+      catchErrors(error, setError);
     }
   }
 
   useEffect(() => {
-    getSetUser(userprofile)
-  }, [userprofile])
+    getSetUser(userprofile);
+  }, [userprofile]);
 
   return (
     <Link to={`/profile/${user.id}`} className="text-decoration-none text-dark">

client/src/components/Home/JoinRoom.js

@@ -3,10 +3,10 @@ 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 [roomId, setRoomId] = useState("");
     const [disabled, setDisabled] = useState(true);
     const [error, setError] = useState("");
     const [success, setSuccess] = useState(false);
@@ -26,7 +26,7 @@ const JoinRoom = () => {
         try {
             // setLoading(true);
             setError("");
-            const data = await roomApi.join({ userId: userId, roomId: roomId });
+            const data = await roomApi.join({ userId: id, roomId: roomId });
             setSuccess(true);
         } catch (error) {
             catchErrors(error, setError);
@@ -34,8 +34,12 @@ const JoinRoom = () => {
             // setLoading(false);
         }
     }
+
     if (success) {
-        return <Redirect to="/user" />;
+        // console.log('success', success)
+        alert('룸참여가 완료되었습니다!')
+        window.location.href=`/user/${id}`
+        // return <Redirect to={`/user/${id}`} />;
     }
 
     return (
@@ -53,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"
@@ -66,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/Home/RoomSingle.js

@@ -2,32 +2,39 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom'
 import roomApi from '../../apis/room.api';
 import userApi from '../../apis/user.api';
+import catchErrors from '../../context/catchError';
 
+const id = localStorage.getItem('user');
+const INIT_ROOM={
+  name:"",
+  profileimg:"",
+  member:"",
+}
 const RoomSingle = () => {
-  const [roomNum, setRoomNum] = useState('')
-  const [room, setRoom] = useState([])
-  // const roomId = localStorage.getItem('user');
-  const roomId = "abc7654321"
+  const [room, setRoom] = useState(INIT_ROOM)
+  const [error,setError]=useState('')
   const channelId = 1
-  const A = []
+  const roomId = "1234567abc"
+
+  async function getJoinRoom(Id) {
+    try {
+      const User = await userApi.getUser(Id)
+      const RoomNumArr = User.roomNumber
+      const Room= await roomApi.getRoom(RoomNumArr)
+      console.log(Room[0])
+      const rrr=Room[0]
+      const memcount= rrr.member.length
+      setRoom({...room, name:rrr.name, profileimg: rrr.profileimg, member:memcount})
+      console.log(room)
 
-  // async function getJoinRoom(Id) {
-  //   try {
-  //     console.log('id:',id)
-  //     const User = await userApi.getUser({id: Id})
-  //     console.log('User1:',User)
-  //     console.log('User2:',User.roomNumber)
-  //     const RoomNumArr = User.roomNumber
-  //     console.log('setRoomNum:',RoomNumArr)
-  //     const Room = await roomApi.getRoom(RoomNumArr)
-  //   } catch (error) {
-  //     // catchErrors(error, setError)
-  //   }
-  // }
+    } catch (error) {
+      catchErrors(error, setError)
+    }
+  }
 
-  // useEffect(() => {
-  //   getJoinRoom(id)
-  // }, [id])
+  useEffect(() => {
+    getJoinRoom(id)
+  }, [id])
 
   return (
     <Link
@@ -39,11 +46,11 @@ const RoomSingle = () => {
         style={{ backgroundColor: '#C4C4C4' }}
       >
         <div style={{ width: '37px', height: '37px' }}>
-          <img
-            src="BORA.png"
+          {/* <img
+            src={`/roomUploads/${profileimg}`}
             className="rounded-circle"
             style={{ width: '37px', height: '37px' }}
-          />
+          /> */}
         </div>
         <div
           className="mx-3 mt-2"
@@ -54,9 +61,9 @@ const RoomSingle = () => {
             msOverflowStyle:'none',
           }}
         >
-          데계 재미있는 수학과 데계데계데계 재미있는 수학과
+          {room.name}
         </div>
-        <div className="ms-auto mt-2"> 15/34 </div>
+        <div className="ms-auto mt-2"> {room.member}/100 </div>
       </div>
 
     </Link>

client/src/components/Login.js

 import { useEffect, useState } from 'react'
-import { Redirect } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import userApi from '../apis/user.api'
-import catchErrors from "../context/catchError";
-import { handleLogin } from '../context/auth';
+import catchErrors from '../context/catchError'
+import { handleLogin } from '../context/auth'
 const INIT_USER = {
+  userId: '9999',
   email: '',
   password: '',
 }
 
 const Login = () => {
-  // const { loading, login, catchErrorAuth } = useAuth()
   const [user, setUser] = useState(INIT_USER)
   const [disabled, setDisabled] = useState(true)
   const [error, setError] = useState('')
@@ -28,10 +28,10 @@ const Login = () => {
 
   async function handleSubmit(e) {
     e.preventDefault()
-    console.log('로그인')
     try {
       // setLoading(true);
       // setError("");
+      console.log('user정보:', user)
       const data = await userApi.login(user)
       console.log(data)
       setId(data.id)
@@ -45,63 +45,59 @@ const Login = () => {
     }
   }
   if (success) {
-    alert('로그인 되었습니다')
-    return <Redirect to={`/user/${id}`} />
+    alert('로그인 되었습니다');
+    window.location.href = `/user/${id}`
   }
 
   const { email, password } = user
 
   return (
-    <div className="modal-content">
-      {error && <div className="alert alert-danger">{error}</div>}
+    <div className="container">
       <form onSubmit={handleSubmit}>
-        <div className="modal-header">
-          <h5 className="modal-title" id="loginModalLabel">
-            로그인
-          </h5>
-          <button
-            type="button"
-            className="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
+        <div className="m-3 d-flex justify-content-center">
+          <Link to="/">
+            <img src="/BORA.png" style={{ width: '160px' }} />
+          </Link>
         </div>
-        <div className="modal-body">
-          <div>
-            <label>아이디</label>
-            <input
-              className="form-control"
-              id="email"
-              type="text"
-              name="email"
-              placeholder="아이디를 입력하세요"
-              value={email}
-              onChange={handleChange}
-            />
+        <div className="row mt-5 d-flex align-items-center">
+          <h2 style={{ textAlign: 'center' }}>로그인</h2>
+          {error && <div className="alert alert-danger">{error}</div>}
+          <div className="form-group">
+            <div className="mt-5">
+              <label>아이디</label>
+              <input
+                className="form-control"
+                id="email"
+                type="text"
+                name="email"
+                placeholder="아이디를 입력하세요"
+                value={email}
+                onChange={handleChange}
+              />
+            </div>
+            <div className="mt-3">
+              <label>비밀번호</label>
+              <input
+                className="form-control"
+                id="password"
+                type="password"
+                name="password"
+                placeholder="비밀번호를 입력하세요"
+                value={password}
+                onChange={handleChange}
+              />
+            </div>
           </div>
-          <div>
-            <label>비밀번호</label>
-            <input
-              className="form-control"
-              id="loginPassword"
-              type="password"
-              name="password"
-              placeholder="비밀번호를 입력하세요"
-              value={password}
-              onChange={handleChange}
-            />
+          <div className="mt-4 d-flex justify-content-center">
+            <button
+              type="submit"
+              className="btn btn-primary"
+              disabled={disabled}
+            >
+              로그인
+            </button>
           </div>
         </div>
-        <div className="modal-footer">
-          <button
-            type="submit"
-            className="btn btn-primary"
-            disabled={disabled}
-            data-bs-dismiss="modal"
-          >
-            로그인
-          </button>
-        </div>
       </form>
     </div>
   )

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>