e

client/src/Components/Chat.js

@@ -87,7 +87,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

@@ -18,7 +18,8 @@ function OpenList(props) {
   function enterChatRoomCH(e) {
     console.log('e확인', e.target)
     const roomCode = e.target.name
-    props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
+    // props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
+    props.openListroom(roomCode)
     props.setRoomCode(roomCode)
     // props.clearChat()
   }

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,10 +53,10 @@ 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);
+    const handleChatc = () => setOpen(true);
 
     socket.on("sendUser", (data) => {
         setNewUser(data)
@@ -70,6 +70,7 @@ function Home() {
         console.log(roomInf.data)
         console.log(roomInf.data[0])
         setRoom(roomInf.data[0])
+        setOpen(true)
         setShow(false)
     }
 
@@ -124,22 +125,29 @@ function Home() {
                         <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 eventKey="open" title="공개방" onClick={handleChatc}>
+                            <OpenList openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
                         </Tab>
                     </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} />
+                    <>
+                        {(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}
+                        {(!show && open) ? 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">
+                    </>
+                    {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>
@@ -152,12 +160,7 @@ function Home() {
                                 </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>}
-            </>}
+                    </div> : null}
                 </Col>
             </Row>
             <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
@@ -167,4 +170,3 @@ function Home() {
 }
 
 export default Home;
-