오픈채팅방

client/src/Pages/HomePage.js

@@ -26,6 +26,7 @@ function Home() {
     const [chat, setChat] = useState(false);
     const [open, setOpen] = useState(false);
     const [room, setRoom] = useState(INIT_ROOM)
+    const [show, setShow] = useState(true)
 
     //소켓
     const [singleChat, setSingleChat] = useState('')
@@ -57,19 +58,24 @@ function Home() {
         console.log(roomInf.data)
         console.log(roomInf.data.[0])
         setRoom(roomInf.data.[0])
+        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) {
+        if (tf.data) {
             alert('참가되었습니다.')
         } else {
             alert('이미 참가된 방입니다.')
         }
     }
 
+    function enterButton() {
+        setOpen(false)
+    }
+
     const sendMsg = (e) => {
         e.preventDefault()
     }
@@ -104,29 +110,34 @@ function Home() {
                     </Tabs>
                 </Col>
                 <Col style={{ padding: "0" }}>
-                    {chat ?
-                        <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomName={roomName} />
-                        : <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>}
-
-                    {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>▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
-                                    <Button className="d-flex flex-end mt-4" variant="primary" type="submit" onClick={attendListRoom}> 참가 </Button>
-                                </div>
-                            </div>
-                        </div> :
-                        <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>}
+                    {show ? <>
+                        {chat ?
+                            <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomName={roomName} />
+                            : <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>}
+                    </> : <>
+                            {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-success" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
+                                                <Button variant="outline-success" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
+                                            </Row>
+                                        </div>
+                                    </div>
+                                </div> :
+                                <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>}
+                        </>}
                 </Col>
             </Row>
             <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />

server/controllers/room.controller.js

@@ -73,29 +73,21 @@ const getOpenList = async (req, res) => {
 // }
 
 const changemember = async (req, res) => {
-    // const memberId = req.memberId
     const { userId, roomId } = req.body
-    console.log('userId:',userId)
     let room = await Room.findOne({ roomId: roomId }).select('member')
-    console.log('room.member:',room.member)
     const isPresent = room.member.indexOf(userId)
-    console.log('isPresent',isPresent)
     try {
         if (isPresent<0) {
-            // const member = room.member.toString()
-            // console.log('member:', member)
             const memberId = room.member.push(userId)
-            console.log('memberId:',memberId)
             await Room.updateOne({ 'roomId': roomId }, { 'member': room.member })
+            console.log('room.member 업데이트 완료')
             return res.json(true)
         }
         else {
             return res.json(false)
         }
         res.end()
-
     } catch (error) {
-        console.log(error)
         res.status(500).send('멤버 업데이트 실패')
     }
 }