0122 최종수정

client/src/Components/Chat.js

@@ -73,7 +73,7 @@ function Chat(props) {
   const time = new Date().toLocaleTimeString()
   return (
     <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", 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/EnterRoom.js

@@ -24,6 +24,7 @@ function EnterRoom(props) {
             let res = await axios.post('/room/enterRoom', { enterCode })
             await axios.put('/room/member', { userId: userId, roomId: enterCode })
             props.setRoomName(res.data)
+            props.setRoomCode(enterCode)
             props.enterChatRoom(enterCode)
             props.handleCloseEnter()
             props.handleChato()

client/src/Pages/HomePage.js

@@ -22,11 +22,11 @@ const INIT_ROOM = {
 
 function Home() {
     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)
-    const [show, setShow] = useState(true)
+    const [show, setShow] = useState(false)
 
     //소켓
     const [singleChat, setSingleChat] = useState('')
@@ -39,10 +39,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 = () => setOpen(true);
+    const handleChatc = () => setChat(false);
 
 
 
@@ -61,6 +61,7 @@ function Home() {
         console.log(roomInf.data)
         console.log(roomInf.data[0])
         setRoom(roomInf.data[0])
+        setOpen(true)
         setShow(false)
     }
 
@@ -108,46 +109,46 @@ function Home() {
                 <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}/>
+                            <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
                         </Tab>
-                        <Tab eventKey="open" title="공개방" onClick={handleChato}>
-                            <OpenList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode}/>
+                        <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 ?
-                            <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} roomName={roomName} />
+                    <>
+                        {(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} 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 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} handleChato={handleChato}/>
-            <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName}/>
+            <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} handleChato={handleChato} />
+            <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
         </>
     );
 }