Commit d36c5c41 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

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

parents 7ed274d3 1464d40d
......@@ -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>
)
......
......@@ -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>
)
}
......
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" }}>
<a href="/" className="navbar-brand" href="/home" style={{ color: 'white', alignItems: "center" }}>{'YDK Messenger'}</a>
{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">
<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>
</Navbar>
)
}
export default Menu
......@@ -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'>
......
......@@ -219,11 +219,11 @@ function Home() {
}, [])
return (
<>
<Menu />
<Row className="mr-0">
<Col className="list" md={5} style={{ overflow: 'auto', height: "80%" }}>
<Sdiv chat={chat}>
<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} />
......@@ -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'
}}
}
`
......
......@@ -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>
......
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>
......
.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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment