dd

client/src/Components/Chat.js

@@ -85,7 +85,7 @@ function Chat(props) {
   return (
     <>
       <Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
-        <Row class="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px", margin: "1%" }}>
+        <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>
           </Col>

client/src/Components/OpenList.js

@@ -11,6 +11,7 @@ function OpenList(props) {
 
   async function getOpenList() {
     let res = await axios.get('/room/openlist')
+    console.log('getOpenlist', res.data)
     setOpenlist(res.data)
   }
 

client/src/Pages/HomePage.js

@@ -24,7 +24,7 @@ function Home() {
   const userName = sessionStorage.getItem('name')
 
   const [showModal, setShowModal] = useState(false);
-  const [showEnter, setEnter] = useState(false);
+  const [showEnter, setShowEnter] = useState(false);
   const [chat, setChat] = useState(false);
   const [open, setOpen] = useState(false);
   const [room, setRoom] = useState(INIT_ROOM)
@@ -53,8 +53,8 @@ function Home() {
 
   const handleCloseModal = () => setShowModal(false);
   const handleShowModal = () => setShowModal(true);
-  const handleCloseEnter = () => setEnter(false);
-  const handleShowEnter = () => setEnter(true);
+  const handleCloseEnter = () => setShowEnter(false);
+  const handleShowEnter = () => setShowEnter(true);
   const handleChato = () => setChat(true);
   const handleChatc = () => setChat(false);
 
@@ -70,6 +70,7 @@ function Home() {
     console.log(roomInf.data)
     console.log(roomInf.data[0])
     setRoom(roomInf.data[0])
+    setOpen(true)
     setShow(false)
   }
 
@@ -130,34 +131,38 @@ function Home() {
           </Tabs>
         </Col>
         <Col style={{ padding: "0" }}>
-          {show ? <>
-            {chat ?
-              <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} newUser={newUser} setSingleChat={setSingleChat} roomCode={roomCode} singleImg={singleImg} setSingleImg={setSingleImg} recievedImg={recievedImg} singleUser={singleUser} setSingleUser={setSingleUser} recievedUser={recievedUser} />
+          <>
+          <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) ?
+              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>}
-          </> : <>
-              {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>
+            }
+            {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 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>}
-            </>}
+                </div>
+              </div>
+              : null}
+          </>
         </Col>
       </Row>
       <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />

server/server.js

@@ -47,7 +47,7 @@ io.on("connection", (socket) => { // 기본 연결
     console.log('resChat확인', chat)
 
     socket.broadcast.to(data.roomInfo).emit('sendedMSG', data.sendInfo); // sender 제외 특정 방으로
-
+console.log('broad cst실핼')
   });
 
   socket.on('disconnect', () => {