0126수현

client/src/Components/Chat.js

@@ -94,13 +94,13 @@ function Chat(props) {
             <Row > {props.roomCode} </Row>
           </Col>
           <Col md="auto">
-            <Button variant="light" onClick={() => setExit(true)}>{'='}</Button>
+            <Button variant="light" onClick={() => setExit(!exit)}>{'='}</Button>
           </Col>
         </Row>
         {exit ?
-          <Row>
-            <Col>퇴장하시겠습니까?</Col>
-            <Col md="auto"><Button variant="light" onClick={exitAndCloseRoom}>{"나가기"}</Button></Col>
+          <Row style={{margin: "1%", backgroundColor: "#F8F9FA", borderRadius: "30px", height: "50px"}}>
+            <Col style={{fontWeight:"bold", margin: "1%"}}>퇴장하시겠습니까?</Col>
+            <Col md="auto"><Button variant="light" onClick={exitAndCloseRoom} style={{fontWeight:"bold"}}>{"나가기"}</Button></Col>
           </Row>
           : null}
         <p>{props.newUser}님이 입장하셨습니다.</p>

client/src/Components/ClosedList.js

@@ -30,7 +30,7 @@ function ClosedList(props) {
   return (
     <div>
       {list.map((item, index) =>
-        <ListGroup key={index}>
+        <ListGroup key={index} >
           <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
             {item.roomName}
           </ListGroup.Item>

client/src/Pages/HomePage.js

 import React, { useState, useEffect } from 'react';
-import { Row, Col, Button } from 'react-bootstrap';
+import { Row, Col, Button, Navbar, Nav } from 'react-bootstrap';
 import Tabs from 'react-bootstrap/Tabs';
 import Tab from 'react-bootstrap/Tab';
 import ClosedList from '../Components/ClosedList';
@@ -105,7 +105,7 @@ function Home() {
 
 
   useEffect(() => {
-    if (!(singleChat == "")){
+    if (!(singleChat == "")) {
       socket.emit("chat", {
         roomInfo: roomCode,
         sendInfo: {
@@ -133,14 +133,22 @@ function Home() {
       <Menu />
       <Row className="mr-0">
         <Col className="list" md={5}>
+          {/* <Navbar>
+            <Navbar.Toggle aria-controls="basic-navbar-nav" />
+            <Navbar.Collapse>
+              <Nav> */}
           <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
             <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-              <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom}/>
+              <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
             </Tab>
             <Tab eventKey="open" title="공개방" onClick={handleChatc}>
-              <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom}/>
+              <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
             </Tab>
           </Tabs>
+          {/* </Nav>
+            </Navbar.Collapse>
+          </Navbar> */}
+
         </Col>
         <Col style={{ padding: "0" }}>
           <>
@@ -152,7 +160,7 @@ function Home() {
               </div>
             }
             {chat ?
-              <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} setSingleChat={setSingleChat} setRecievedMsg={setRecievedMsg} setSingleUser={setSingleUser} setSingleImg={setSingleImg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom}/>
+              <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} setSingleChat={setSingleChat} setRecievedMsg={setRecievedMsg} setSingleUser={setSingleUser} setSingleImg={setSingleImg} 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">