0127미디어쿼리2

client/src/Components/Chat.js

@@ -128,18 +128,18 @@ function Chat(props) {
   return (
     <div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "580px", position: "relative" }}>
       <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}>
-        <a onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
+        <a  href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
         <div style={{ justifyContent: "center" }}>
           <p style={{ color: "#333333", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </p>
           <p style={{ color: "#333333", fontSize: "0.8em", textAlign: "center", margin: "0.5px 0px 0px 0px" }}> {props.roomCode} </p>
         </div>
-        <a onClick={() => setExit(!exit)} style={{ margin: "0px 15px 0px 0px" }}><BsList size="20" color="#333333" /></a>
+        <a href="#;" onClick={() => setExit(!exit)} style={{ margin: "0px 15px 0px 0px" }}><BsList size="20" color="#333333" /></a>
       </div>
       {exit ?
         <div id="chat-exit-check" style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center", margin: "1%", backgroundColor: "#30284D", borderRadius: "5px", height: "50px" }}>
           <p style={{ width: "70%", color: "#FAFAFA", fontSize: "1em", margin: "0px 10px 0px 20px" }}><BsExclamationCircleFill size="1em" color="#F2D788" />  퇴장하시겠습니까?</p>
-          <a onClick={exitAndCloseRoom}><BsCheck size="1em" color="#F2D788" /></a>
-          <a onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
+          <a href="#;" onClick={exitAndCloseRoom}><BsCheck size="1em" color="#F2D788" /></a>
+          <a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
         </div>
         : null}
       <div id="chat-body" style={{ overflow: 'auto', padding: '15px', width: "100%", height: "400px", margin: "1%", background: '' }}>

client/src/Components/ClosedList.js

 import React from 'react'
 import { Badge, ListGroup } from 'react-bootstrap';
 
-const INIT_LIST = [{
-  interest: '',
-  isOpen: '',
-  memeber: [],
-  roomId: '',
-  roomName: '',
-}]
 function ClosedList(props) {
 
   function enterChatRoomCH(e) {

client/src/Components/Menu.js

-import React from 'react'
+import React, { useState } from 'react'
 import { Navbar, Nav } from 'react-bootstrap';
 import { handleLogout } from '../utils/auth';
-
+import styled from 'styled-components';
+import { BsPeopleCircle  } from "react-icons/bs";
+import { AiOutlineLogout } from "react-icons/ai";
 
 function Menu() {
+  const [showIcon, setShowIcon] = useState(false);
 
   const name = sessionStorage.getItem('name');
 
+  console.log('showIcon', showIcon)
   return (
-    <Navbar style={{ backgroundColor: "#61477a" }} variant="dark">
-      <div className="container-fluid">
-        <Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
-        {name ?
-          <>
-            <Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}>
-              <Nav.Item className="mt-2 mr-4">{name}님 환영합니다</Nav.Item>
-              <Nav.Link href="/profile">Profile</Nav.Link>
-              <Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link>
-            </Nav>
-          </>
-          : <>
-            <Nav className="nav navbar-nav">
-              <Nav.Link href="/login">Login</Nav.Link>
-              <Nav.Link href="/signup">Signup</Nav.Link>
-            </Nav>
-          </>}
-      </div>
-    </Navbar>
+    <MenuDiv setShowIcon={setShowIcon}>
+      <Navbar style={{ backgroundColor: "#61477a", heigth: "100%" }} variant="dark">
+        <div className="container-fluid">
+          <Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
+          {name ?
+            <>
+              <Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}>
+                <Nav.Item className="mt-2 mr-4">{name}님 환영합니다</Nav.Item>
+                { showIcon ?
+                <a href="/profile"><BsPeopleCircle size="15" color="#FFFFFF"/></a>
+                :<Nav.Link href="/profile">Profile</Nav.Link>}
+                { showIcon ?
+                <a href="/login" onClick={() => handleLogout()}><AiOutlineLogout size="15" color="#FFFFFF"/></a>
+                :<Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link>}
+              </Nav>
+            </>
+            : <>
+              <Nav className="nav navbar-nav">
+                <Nav.Link href="/login">Login</Nav.Link>
+                <Nav.Link href="/signup">Signup</Nav.Link>
+              </Nav>
+            </>}
+        </div>
+      </Navbar>
+    </MenuDiv>
   )
 }
 
+const MenuDiv = styled.div`
+@media (max-width: 500px) {
+    display: 'none';
+   }
+`
+
 
 export default Menu

client/src/Pages/HomePage.js

@@ -170,14 +170,10 @@ function Home() {
   }, [])
 
   return (
-    <>
-      <Menu />
-      <Row className="mr-0">
+    <div style={{weight: "100vw", height:"100vh", backgroundColor: "#4A5D7E"}}>
+      <Menu style={{weight:"100%", height: "10%"}}/>
+      <Row className="mr-0" style={{weight:"100%", height: "80%"}}>
         <Col className="list" md={5}>
-          {/* <Navbar>
-            <Navbar.Toggle aria-controls="basic-navbar-nav" />
-            <Navbar.Collapse>
-              <Nav> */}
           <Sdiv chat={chat}>
             <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
               <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
@@ -188,9 +184,6 @@ function Home() {
               </Tab>
             </Tabs>
           </Sdiv>
-          {/* </Nav>
-            </Navbar.Collapse>
-          </Navbar> */}
         </Col>
         <Col style={{ padding: "5px", marginLeft: "15px" }}>
           <>
@@ -204,7 +197,7 @@ function Home() {
             {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 ?
+            {(open && !chat) ?
               <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">
@@ -225,7 +218,7 @@ function Home() {
       </Row>
       <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
       <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} sysmsg={sysmsg} setSysmsg={setSysmsg} />
-    </>
+    </div>
   );
 }