오픈

client/src/Components/Chat.js

@@ -66,7 +66,6 @@ function Chat(props) {
     props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
     console.log('나간시간', realTime, usualTime)
     setChat([''])
-
     props.handleChatc()
     props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
   }
@@ -188,7 +187,7 @@ function Chat(props) {
             <Form.Group style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}>
               <Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ width: "80%", height: "90%", borderColor: "#FFFFFF" }} />
               <Button type="submit" disabled={disabled} style={{ justifyContent: "center", width: "10%", height: "90%", borderRadius: "20px", backgroundColor: "#C1C1C1", borderColor: "#FFFFFF" }}>
-                <FiSend size="16px" color="FAFAFA" />
+                <FiSend size="16px" color="#FAFAFA" />
               </Button>
             </Form.Group>
           </Form>

client/src/Pages/HomePage.js

@@ -67,7 +67,9 @@ function Home() {
   async function enterChatRoom(rCode) {    //방 입장하기
     socket.emit('joinRoom', rCode)
     socket.emit('newUser', { rmIf: rCode, userInfo: userName })
+    setShow(true)
     console.log(`joinRoom : ${rCode} 입장`)
+    console.log('show:', show)
     //여기서 채팅 불러와서 넘겨주던가 해야할거 같은데
   }
 
@@ -80,6 +82,7 @@ function Home() {
     await axios.put('/room/deleteMem', { userId: userId, roomId: roomId })
     console.log(`${roomId}방 ${userId} 탈퇴`)
     setRoomCode("")
+    const response = await axios.get('/users/check', { params: { '_id': userId } })
   }
 
   async function getClosedList() {
@@ -99,8 +102,8 @@ function Home() {
     console.log(roomId)
     const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } })
     setRoom(roomInf.data[0])
-    setOpen(true)
     setShow(false)
+    setOpen(true)
   }
 
   async function attendListRoom() {
@@ -190,34 +193,29 @@ function Home() {
           </Navbar> */}
         </Col>
         <Col style={{ padding: "5px", marginLeft: "15px" }}>
-          <>
-            {(show || chat) ?
-              null
+          {show ? <>
+            {chat ? <Chat handleChatc={handleChatc} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} />
               : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
                 <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
                 <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
-              </div>
-            }
-            {chat ?
-              <Chat handleChatc={handleChatc} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} />
-              : 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" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
-                      <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
-                    </Row>
-                  </div>
+              </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" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
+                    <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
+                  </Row>
                 </div>
               </div>
-              : null}
-          </>
+            </div> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
+                <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
+                <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
+              </div>} </>}
         </Col>
       </Row>
       <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
@@ -229,8 +227,8 @@ function Home() {
 const Sdiv = styled.div`
     @media screen and (max-width: 768px) {
      display: ${({ chat }) => {
-     return chat === false ? 'block' : 'none'
-    }}
+    return chat === false ? 'block' : 'none'
+  }}
    }
 `