Merge remote-tracking branch 'origin/sooModalTest' into jiweon827

client/src/Components/Chat.js

@@ -126,7 +126,7 @@ 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" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "90vh", position: "relative" }}>
       <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}>
         <a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
         <div style={{ justifyContent: "center" }}>

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) {
@@ -20,46 +13,11 @@ function ClosedList(props) {
     props.setRoomCode(roomCode)
     props.setRoomName(roomName)
 
-    // console.log('rrrrrrrrrrrrrrr', props.closedlist)
-    // console.log('1111111111111111111', props.leaveInfo, typeof (props.leaveInfo))
   }
 
-  // const [checknew, setChecknew] = useState([])
-  // const [unreadnumber, setUnreadnumber] = useState([''])
-  // async function dbChat() {
-  //   for (let i = 0; i <= props.closedlist.length - 1; i++) {
-  //     const respond = await axios.get('/room/dbChat', { params: { 'roomId': props.closedlist[i].roomId } })
-  //     setChecknew(respond.data)
-  //   }
-  // }
-  // useEffect(() => {
-  //   dbChat()
-  // }, [props.singleChat, props.recievedMsg])
-
-  // useEffect(() => {
-  //   // console.log('chat 클라이언트 변경!')
-  //   unreadMessage()
-  // }, [checknew])
-
-  // async function unreadMessage() {
-  //   //여기서 나간시간과 db의 메세지와 시간비교해서 개수를 count해주면 됨
-  //   //물론 그 방 별로 찾아서 list를 맵써서 하던?
-  //   // console.log('ddddddddd', list[0].roomId)
-
-  //   setUnreadnumber([''])
-  //   let arr = []
-  //   for (let i = 0; i <= props.closedlist.length - 1; i++) {
-  //     const respond = await axios.get('/room/unreadMessage', { params: { 'leaveInfo': props.leaveInfo, 'roomId': props.closedlist[i].roomId } })
-  //     // setUnreadnumber([...unreadnumber, respond.data])
-  //     arr = [...arr, respond.data]
-  //   }
-  //   setUnreadnumber(arr)
-  //   // console.log('클라이언트 클로즈드 카운드', unreadnumber, list.length)
-
-  // }
-
   return (
-    <div>
+    <div style={{height: "80vh"}}>
+    <div style={{overflow: 'auto', height:"100%"}}>
       {props.closedlist.map((item, index) =>
         <ListGroup key={index}>
           <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
@@ -70,6 +28,7 @@ function ClosedList(props) {
       )
       }
     </div >
+    </div>
   )
 }
 

client/src/Components/Menu.js

 import React from 'react'
-import { Navbar, Nav } from 'react-bootstrap';
+import { Nav } from 'react-bootstrap';
 import { handleLogout } from '../utils/auth';
+import { BsPeopleCircle } from "react-icons/bs";
+import { AiOutlineLogout } from "react-icons/ai";
+import "../menu.css";
 
-
-function Menu() {
+function Menu(props) {
 
   const name = sessionStorage.getItem('name');
 
   return (
-    <Navbar style={{ backgroundColor: "#61477a" }} variant="dark">
-      <div className="container-fluid">
-        <Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
+    <div className="container-fluid" style={{ display: "flex", flexDirection: "row", backgroundColor: "#61477a", heigth: "100%", position: "relative" }}>
+      <p className="navbar-brand" href="/home" style={{color: 'white', alignItems: "center"}}>YDK Messenger</p>
       {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>
+          <div className="nav navbar-nav mr-auto" style={{ color: 'white', display: "flex", flexDirection: "row", alignItems: "center"}}>
+            <p className="mt-2 mr-4">{name}님 환영합니다</p>
+            <div className="showText">
+              <a href="/profile" style={{color:"#FFFFFF", marginRight: "15px"}}>{'Profile'}</a>
+              <a onClick={() => handleLogout()} href="/login" style={{color:"#FFFFFF"}}>{'logout'}</a>
+            </div>
+            <div className="showIcon">
+              <a href="/profile" style={{marginRight: "15px"}}><BsPeopleCircle size="25" color="#FFFFFF" /></a>
+              <a href="/login" onClick={() => handleLogout()}><AiOutlineLogout size="25" color="#FFFFFF" /></a>
+            </div>
+          </div>
         </>
         : <>
           <Nav className="nav navbar-nav">
@@ -26,9 +33,7 @@ function Menu() {
           </Nav>
         </>}
     </div>
-    </Navbar>
   )
 }
 
-
 export default Menu

client/src/Components/OpenList.js

@@ -13,7 +13,7 @@ function OpenList(props) {
   }
 
   return (
-    <div>
+    <div style={{overflow: 'auto', height: "80vh"}}>
       {props.openlist.map((item, index) =>
         <ListGroup key={index}>
           <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}>

client/src/Pages/HomePage.js

@@ -174,10 +174,10 @@ function Home() {
   }, [])
 
   return (
-    <>
-      <Menu />
-      <Row className="mr-0">
-        <Col className="list" md={5} style={{ overflow: 'auto', height: "80%" }}>
+    <div style={{ weight: "100vw", height: "100vh", backgroundColor: "" }}>
+      <Menu style={{ weight: "100%", height: "10%" }} />
+      <Row className="mr-0" style={{ weight: "100%", height: "80%" }}>
+        <Col className="list" md={5}>
           <Sdiv chat={chat}>
             <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
               <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
@@ -218,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>
   );
 }
 

client/src/Pages/ProfilePage.js

 import React, { useState, useEffect } from 'react'
 import Menu from '../Components/Menu';
+import styled from 'styled-components';
 import { Image, Button, Container, Form, Row, Col } from 'react-bootstrap';
 import { BrowserRouter as Link } from 'react-router-dom';
 import axios from 'axios'

client/src/menu.css

+.showText {
+    display: flex;
+    flex-direction: row;
+    margin-right: 5px;
+    margin-left: 5px;
+    position: absolute;
+    right: 0;
+}
+
+.showIcon {
+    display: none;
+}
+
+@media screen and (max-width: 768px) {
+    .showText {
+      display: none;
+    }
+
+    .showIcon {
+        display: flex;
+        flex-direction: row;
+        margin-right: 5px;
+        margin-left: 5px;
+        position: absolute;
+        right: 0;
+    }
+}
\ No newline at end of file