0129 머지완

client/src/Components/Chat.js

@@ -160,7 +160,7 @@ function Chat(props) {
                   <Col className="ml-2">
                     <Row><strong>{value.sender}</strong></Row>
                     <Row xs="auto" className='d-flex flex-wrap-nowrap'>
-                      <Row style={{ width: 'max-content', maxWidth: '80%', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Row>
+                      <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>

client/src/Components/Menu.js

@@ -11,26 +11,28 @@ function Menu(props) {
 
   return (
     <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>
+      <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="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>
+              <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="/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">
-            <Nav.Link href="/login">Login</Nav.Link>
-            <Nav.Link href="/signup">Signup</Nav.Link>
-          </Nav>
+          <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>
   )

client/src/Pages/HomePage.js

@@ -178,7 +178,7 @@ function Home() {
       <Menu style={{ weight: "100%", height: "10%" }} />
       <Row className="mr-0" style={{ weight: "100%", height: "80%" }}>
         <Col className="list" md={5}>
-          <Sdiv chat={chat}>
+          <Sdiv chat={chat} open={open}>
             <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
               <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
                 <ClosedList closedlist={closedlist} singleChat={singleChat} recievedMsg={recievedMsg} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
@@ -224,8 +224,8 @@ function Home() {
 
 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 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'
 import catchErrors from '../utils/catchErrors'
 import { isAuthenticated } from '../utils/auth';
@@ -125,9 +123,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>
-                                <Link to='/'>
-                                    <Button size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>홈 화면으로</Button>
-                                </Link>
+                                <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

@@ -7,6 +7,15 @@
     right: 0;
 }
 
+.showTextBFLogin {
+    display: flex;
+    flex-direction: row;
+    margin-right: 5px;
+    margin-left: 5px;
+    position: absolute;
+    right: 0;
+}
+
 .showIcon {
     display: none;
 }