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

client/src/Components/Chat.js

@@ -142,7 +142,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" }}>
@@ -158,7 +158,7 @@ function Chat(props) {
           <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: '' }}>
+      <div id="chat-body" style={{ overflow: 'auto', padding: '15px', width: "100%", height: "75%", margin: "1%", background: '' }}>
         {chat.map((value, index) => {
           if (!(value.msg === '')) {
             if (value.sender === "system") {
@@ -169,25 +169,25 @@ function Chat(props) {
               )
             } else if (!(value.sender === user.nickname)) {
               return (
-                <Row key={index} className='m-1' >
-                  <Col xs={2}>
-                    <Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle />
+                <Row key={index} className='d-flex flex-wrap-nowrap mt-2' style={{ width: "95%", maxWidth: '95%' }}>
+                  <Col xs="auto">
+                    <Image src={value.img && `/images/${value.img}`} style={{ width: "55px", height: "55px" }} roundedCircle />
                   </Col>
-                  <Col xs={8}>
+                  <Col className="ml-2">
                     <Row><strong>{value.sender}</strong></Row>
-                    <Row className='d-flex flex-wrap-nowrap'>
-                      <Row className='border' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Row>
-                      <Col className='ml-1'>{value.time}</Col>
+                    <Row xs="auto" className='d-flex flex-wrap-nowrap'>
+                      <Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Row>
+                      <Col className="ml-1">{value.time}</Col>
                     </Row>
                   </Col>
                 </Row>
               )
             } else {
               return ( //내가 보낸 메시지
-                <Row key={index} className='m-1 justify-content-end'>
+                <Row key={index} className='mt-2 justify-content-end' style={{ width: "100%" }}>
                   <Row className='d-flex flex-wrap-nowrap' >
-                    <Col className='mr-1'>{value.time}</Col>
-                    <Row className='mr-2' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: 'px', fontSize: 'x-large' }}>{value.msg}</Row>
+                    <Col xs="auto" className="ml-3">{value.time}</Col>
+                    <Col className='mr-1' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Col>
                   </Row>
                 </Row>
               )

client/src/Components/ClosedList.js

@@ -38,10 +38,8 @@ function ClosedList(props) {
 
   }
 
-  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   //안읽은 메세지 count하는 부분
 
-
   useEffect(() => { // 누군가 보내면 다시 개수 셈
     console.log('chat 클라이언트 변경!')
     props.unreadMessage()
@@ -64,7 +62,8 @@ function ClosedList(props) {
   }, [props.unreadnumber])
 
   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}
@@ -76,6 +75,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>
-        {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>
+    <div className="container-fluid" style={{ display: "flex", flexDirection: "row", backgroundColor: "#61477a", heigth: "100%", position: "relative" }}>
+      <a href="/" className="navbar-brand" href="/home" style={{ color: 'white', alignItems: "center" }}>{'YDK Messenger'}</a>
+      {name ?
+        <>
+          <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>
+        </>
+        : <>
+          <div className="nav navbar-nav" style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+            <div className="showTextBFLogin">
+              <a href="/login" style={{ color:"#FFFFFF", marginRight: "15px" }}>{'Login'}</a>
+              <a href="/signup" style={{ color:"#FFFFFF" }}>{'Signup'}</a>
+            </div>
+          </div>
+        </>}
+    </div>
   )
 }
 
-
 export default Menu

client/src/Components/OpenList.js

@@ -14,7 +14,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} className='rounded-0'>

client/src/Pages/HomePage.js

@@ -219,12 +219,12 @@ function Home() {
   }, [])
 
   return (
-    <>
-      <Menu />
-      <Row className="mr-0">
-        <Col className="list" md={5} style={{ overflow: 'auto', height: "80%" }}>
-          <Sdiv chat={chat}>
-            <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example"  >
+    <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} open={open}>
+            <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
               <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
                 <ClosedList closedlist={closedlist} leftInfo={leftInfo} checknew={checknew} unreadMessage={unreadMessage} unreadnumber={unreadnumber} setUnreadnumber={setUnreadnumber} userId={userId} singleChat={singleChat} recievedMsg={recievedMsg} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
               </Tab>
@@ -241,10 +241,11 @@ function Home() {
                 <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
                 <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} 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>
+                <div className="mt-5 p-5 mr-2" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', position: "relative" }}>
+                  <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>
@@ -262,14 +263,14 @@ 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>
   );
 }
 
 const Sdiv = styled.div`
     @media screen and (max-width: 768px) {
-     display: ${({ chat }) => {
-    return chat === false ? 'block' : 'none'
+     display: ${({ chat, open }) => {
+    return (chat || open) ? 'none' : 'block'
   }}
    }
 `

client/src/Pages/LogInPage.js

@@ -54,7 +54,7 @@ function LogIn() {
     return (
         <>
             <Menu />
-            <Form onSubmit={handleSubmit} className='vh-100 flex-column align-items-center justify-content-center mt-2'>
+            <Form onSubmit={handleSubmit} className='vh-85 flex-column align-items-center justify-content-center mt-2'>
                 <Container className="d-flex justify-content-center">
                     <div className="mt-5 p-5 shadow w-75">
                         <h2 className="text-center">로그인</h2>

client/src/Pages/ProfilePage.js

 import React, { useState, useEffect } from 'react'
 import Menu from '../Components/Menu';
 import { Image, Button, Container, Form, Row, Col } from 'react-bootstrap';
-import { BrowserRouter as Link } from 'react-router-dom';
 import axios from 'axios'
 import catchErrors from '../utils/catchErrors'
 import { isAuthenticated } from '../utils/auth';
@@ -137,8 +136,7 @@ function ProfilePage() {
                         <Row className='m-3 justify-content-center'>
                             <Form onSubmit={handleSubmit}>
                                 <Button size="sm" className="mr-4" type='submit' variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>저장</Button>
-                                <Button href='/' size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>홈 화면으로</Button>
-
+                                <Button href="/" size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>홈 화면으로</Button>
                             </Form>
                         </Row>
                     </Col>

client/src/menu.css

+.showText {
+    display: flex;
+    flex-direction: row;
+    margin-right: 5px;
+    margin-left: 5px;
+    position: absolute;
+    right: 0;
+}
+
+.showTextBFLogin {
+    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