Merge remote-tracking branch 'origin/young' into jiweon827

client/src/Components/Chat.js

@@ -89,7 +89,7 @@ function Chat(props) {
       <Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
         <Row className="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px", margin: "1%" }}>
           <Col md="auto">
-            <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
+            <Button variant="light" onClick={handleClick} >{`<`}</Button>
           </Col>
           <Col>
             <Row style={{ fontWeight: "bold", fontSize: "x-large" }}> {roomName} </Row>
@@ -130,8 +130,6 @@ function Chat(props) {
         })
         }
 
-        <Button variant="light" onClick={handleClick} >{`<`}</Button>
-
       </Container >
       <Form onSubmit={sendMsgCH} fluid>
         <Form.Group className='d-flex flex-wrap-nowrap justify-content-center m-3'>

client/src/Pages/HomePage.js

@@ -14,143 +14,157 @@ import axios from 'axios';
 const socket = io();
 
 const INIT_ROOM = {
-    roomName: '',
-    interest: '',
-    roomId: '',
-    member: '',
+  roomName: '',
+  interest: '',
+  roomId: '',
+  member: '',
 }
 
 function Home() {
-    const userName = sessionStorage.getItem('name')
-
-    const [showModal, setShowModal] = useState(false);
-    const [showEnter, setShowEnter] = useState(false);
-    const [chat, setChat] = useState(false);
-    const [open, setOpen] = useState(false);
-    const [room, setRoom] = useState(INIT_ROOM)
-    const [show, setShow] = useState(false)
-
-    //소켓
-    const [singleChat, setSingleChat] = useState('')
-    const [recievedMsg, setRecievedMsg] = useState('')
-    const [roomCode, setRoomCode] = useState('')
-    const [newUser, setNewUser] = useState('')
-
-    const [singleUser, setSingleUser] = useState('')
-    const [recievedUser, setRecievedUser] = useState('')
-
-    const [singleImg, setSingleImg] = useState('')
-    const [recievedImg, setRecievedImg] = useState('')
-
-
-    //SOCKET 관련 시작
-    function enterChatRoom(rCode) {    //방 입장하기
-        socket.emit('joinRoom', rCode)
-        socket.emit('newUser', { rmIf: rCode, userInfo: userName })
-        console.log(`joinRoom : ${rCode} 입장`)
+  const userName = sessionStorage.getItem('name')
+
+  const [showModal, setShowModal] = useState(false);
+  const [showEnter, setShowEnter] = useState(false);
+  const [chat, setChat] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [room, setRoom] = useState(INIT_ROOM)
+  const [show, setShow] = useState(false)
+
+  //소켓
+  const [singleChat, setSingleChat] = useState('')
+  const [recievedMsg, setRecievedMsg] = useState('')
+  const [roomCode, setRoomCode] = useState('')
+  const [newUser, setNewUser] = useState('')
+
+  const [singleUser, setSingleUser] = useState('')
+  const [recievedUser, setRecievedUser] = useState('')
+
+  const [singleImg, setSingleImg] = useState('')
+  const [recievedImg, setRecievedImg] = useState('')
+
+
+  //SOCKET 관련 시작
+  function enterChatRoom(rCode) {    //방 입장하기
+    socket.emit('joinRoom', rCode)
+    socket.emit('newUser', { rmIf: rCode, userInfo: userName })
+    console.log(`joinRoom : ${rCode} 입장`)
+  }
+  const [roomName, setRoomName] = useState('')
+
+  const handleCloseModal = () => setShowModal(false);
+  const handleShowModal = () => setShowModal(true);
+  const handleCloseEnter = () => setShowEnter(false);
+  const handleShowEnter = () => setShowEnter(true);
+  const handleChato = () => setChat(true);
+  const handleChatc = () => setChat(false);
+
+  socket.on("sendUser", (data) => {
+    setNewUser(data)
+  })
+
+  //오픈채팅방에서 참가하기
+  async function openListroom(roomId) {
+    console.log(roomId)
+    const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } })
+    console.log(roomInf)
+    console.log(roomInf.data)
+    console.log(roomInf.data[0])
+    setRoom(roomInf.data[0])
+    setOpen(true)
+    setShow(false)
+  }
+
+  async function attendListRoom() {
+    const userId = sessionStorage.getItem('userId'); //sessionStorage에 저장된 userId가져옴
+    const roomId = room.roomId
+    const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
+    if (tf.data) {
+      alert('참가되었습니다.')
+    } else {
+      alert('이미 참가된 방입니다.')
     }
-    const [roomName, setRoomName] = useState('')
-
-    const handleCloseModal = () => setShowModal(false);
-    const handleShowModal = () => setShowModal(true);
-    const handleCloseEnter = () => setShowEnter(false);
-    const handleShowEnter = () => setShowEnter(true);
-    const handleChato = () => setChat(true);
-    const handleChatc = () => setChat(false);
-
-    socket.on("sendUser", (data) => {
-        setNewUser(data)
-    })
-
-    //오픈채팅방에서 참가하기
-    async function openListroom(roomId) {
-        console.log(roomId)
-        const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } })
-        console.log(roomInf)
-        console.log(roomInf.data)
-        console.log(roomInf.data[0])
-        setRoom(roomInf.data[0])
-        setOpen(true)
-        setShow(false)
-    }
-
-
-
-    async function attendListRoom() {
-        const userId = sessionStorage.getItem('userId'); //sessionStorage에 저장된 userId가져옴
-        const roomId = room.roomId
-        const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
-        if (tf.data) {
-            alert('참가되었습니다.')
-        } else {
-            alert('이미 참가된 방입니다.')
+  }
+
+  function enterButton() {
+    setOpen(false)
+  }
+  const sendMsg = (e) => {
+    e.preventDefault()
+  }
+
+
+  useEffect(() => {
+    if (!(singleChat == '')) {
+      socket.emit("chat", {
+        roomInfo: roomCode,
+        sendInfo: {
+          msg: singleChat,
+          sender: singleUser,
+          img: singleImg
         }
+      })
+      setSingleChat([''])
     }
+  }, [singleChat])
 
-    function enterButton() {
-        setOpen(false)
-    }
-    const sendMsg = (e) => {
-        e.preventDefault()
-    }
 
-    useEffect(() => {
-        socket.on("sendedMSG", (sendInfo) => {
-            setRecievedImg(sendInfo.img)
-            setRecievedUser(sendInfo.sender)
-            setRecievedMsg(sendInfo.msg)
-        })
-    }, [])
-
-    return (
-        <>
-            <Menu />
-            <Row className="mr-0">
-                <Col className="list" md={5}>
-                    <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
-                        <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-                            <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
-                        </Tab>
-                        <Tab eventKey="open" title="공개방" onClick={handleChato}>
-                            <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
-                        </Tab>
-                    </Tabs>
-                </Col>
-                <Col style={{ padding: "0" }}>
-                    <>
-                        {(show || chat) ?
-                            null
-                            : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
-                                <Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
-                                <Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
-                            </div>
-                        }
-                        {chat ?
-                            <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} roomName={roomName} />
-                            : null}
-                        {open ?
-                            <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
-                                <div className="d-flex justify-content-center">
-                                    <div className="mt-5 p-5 shadow w-75">
-                                        <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName}방 입니다.</h2>
-                                        <h5>▷ 관심분야 : {room.interest}</h5>
-                                        <h5>▷ 참여인원 : {room.member.length}</h5>
-                                        <h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
-                                        <Row className='justify-content-center'>
-                                            <Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
-                                            <Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
-                                        </Row>
-                                    </div>
-                                </div>
-                            </div>
-                            : null}
-                    </>
-                </Col>
-            </Row>
-            <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
-            <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
-        </>
-    );
+  useEffect(() => {
+    socket.on("sendedMSG", (sendInfo) => {
+      setRecievedImg(sendInfo.img)
+      setRecievedUser(sendInfo.sender)
+      setRecievedMsg(sendInfo.msg)
+    })
+  }, [])
+
+  return (
+    <>
+      <Menu />
+      <Row className="mr-0">
+        <Col className="list" md={5}>
+          <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
+            <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
+              <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
+            </Tab>
+            <Tab eventKey="open" title="공개방" onClick={handleChatc}>
+              <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
+            </Tab>
+          </Tabs>
+        </Col>
+        <Col style={{ padding: "0" }}>
+          <>
+            {(show || chat) ?
+              null
+              : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
+                <Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
+                <Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
+              </div>
+            }
+            {chat ?
+              <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} roomCode={roomCode} roomName={roomName} />
+              : null}
+            {open ?
+              <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
+                <div className="d-flex justify-content-center">
+                  <div className="mt-5 p-5 shadow w-75">
+                    <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName}방 입니다.</h2>
+                    <h5>▷ 관심분야 : {room.interest}</h5>
+                    <h5>▷ 참여인원 : {room.member.length}</h5>
+                    <h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
+                    <Row className='justify-content-center'>
+                      <Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
+                      <Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
+                    </Row>
+                  </div>
+                </div>
+              </div>
+              : null}
+          </>
+        </Col>
+      </Row>
+      <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
+      <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
+    </>
+  );
 }
 
-export default Home
\ No newline at end of file
+export default Home;

server/controllers/room.controller.js

@@ -39,7 +39,7 @@ const makeRoom = async (req, res) => {
 const getClosedList = async (req, res) => {
     try {
         console.log('req확인', req.query._id)
-        let list = await Room.find({ member: [req.query._id] })
+        let list = await Room.find({ member: req.query._id })
         console.log('c_list가져오기', list)
         return res.json(list)
     } catch (error) {
@@ -50,7 +50,7 @@ const getClosedList = async (req, res) => {
 const getOpenList = async (req, res) => {
     try {
         let list = await Room.find({ isOpen: true })
-        console.log('o_list가져오기', list.roomName)
+        console.log('o_list가져오기', list)
         return res.json(list)
     } catch (error) {
         res.status(500).send('리스트 불러오기를 실패하였습니다!')