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) { ...@@ -142,7 +142,7 @@ function Chat(props) {
return ( 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" }}> <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> <a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
<div style={{ justifyContent: "center" }}> <div style={{ justifyContent: "center" }}>
...@@ -158,7 +158,7 @@ function Chat(props) { ...@@ -158,7 +158,7 @@ function Chat(props) {
<a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a> <a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
</div> </div>
: null} : 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) => { {chat.map((value, index) => {
if (!(value.msg === '')) { if (!(value.msg === '')) {
if (value.sender === "system") { if (value.sender === "system") {
...@@ -169,25 +169,25 @@ function Chat(props) { ...@@ -169,25 +169,25 @@ function Chat(props) {
) )
} else if (!(value.sender === user.nickname)) { } else if (!(value.sender === user.nickname)) {
return ( return (
<Row key={index} className='m-1' > <Row key={index} className='d-flex flex-wrap-nowrap mt-2' style={{ width: "95%", maxWidth: '95%' }}>
<Col xs={2}> <Col xs="auto">
<Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle /> <Image src={value.img && `/images/${value.img}`} style={{ width: "55px", height: "55px" }} roundedCircle />
</Col> </Col>
<Col xs={8}> <Col className="ml-2">
<Row><strong>{value.sender}</strong></Row> <Row><strong>{value.sender}</strong></Row>
<Row className='d-flex flex-wrap-nowrap'> <Row xs="auto" 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> <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> <Col className="ml-1">{value.time}</Col>
</Row> </Row>
</Col> </Col>
</Row> </Row>
) )
} else { } else {
return ( //내가 보낸 메시지 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' > <Row className='d-flex flex-wrap-nowrap' >
<Col className='mr-1'>{value.time}</Col> <Col xs="auto" className="ml-3">{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 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>
</Row> </Row>
) )
......
...@@ -38,10 +38,8 @@ function ClosedList(props) { ...@@ -38,10 +38,8 @@ function ClosedList(props) {
} }
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//안읽은 메세지 count하는 부분 //안읽은 메세지 count하는 부분
useEffect(() => { // 누군가 보내면 다시 개수 셈 useEffect(() => { // 누군가 보내면 다시 개수 셈
console.log('chat 클라이언트 변경!') console.log('chat 클라이언트 변경!')
props.unreadMessage() props.unreadMessage()
...@@ -64,7 +62,8 @@ function ClosedList(props) { ...@@ -64,7 +62,8 @@ function ClosedList(props) {
}, [props.unreadnumber]) }, [props.unreadnumber])
return ( return (
<div> <div style={{height: "80vh"}}>
<div style={{overflow: 'auto', height:"100%"}}>
{props.closedlist.map((item, index) => {props.closedlist.map((item, index) =>
<ListGroup key={index}> <ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName} <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}
...@@ -76,6 +75,7 @@ function ClosedList(props) { ...@@ -76,6 +75,7 @@ function ClosedList(props) {
) )
} }
</div > </div >
</div>
) )
} }
......
import React from 'react' import React from 'react'
import { Navbar, Nav } from 'react-bootstrap'; import { Nav } from 'react-bootstrap';
import { handleLogout } from '../utils/auth'; import { handleLogout } from '../utils/auth';
import { BsPeopleCircle } from "react-icons/bs";
import { AiOutlineLogout } from "react-icons/ai";
import "../menu.css";
function Menu(props) {
function Menu() {
const name = sessionStorage.getItem('name'); const name = sessionStorage.getItem('name');
return ( return (
<Navbar style={{ backgroundColor: "#61477a" }} variant="dark"> <div className="container-fluid" style={{ display: "flex", flexDirection: "row", backgroundColor: "#61477a", heigth: "100%", position: "relative" }}>
<div className="container-fluid"> <a href="/" className="navbar-brand" href="/home" style={{ color: 'white', alignItems: "center" }}>{'YDK Messenger'}</a>
<Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
{name ? {name ?
<> <>
<Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}> <div className="nav navbar-nav mr-auto" style={{ color: 'white', display: "flex", flexDirection: "row", alignItems: "center" }}>
<Nav.Item className="mt-2 mr-4">{name} 환영합니다</Nav.Item> <p className="mt-2 mr-4">{`${name}님 환영합니다`}</p>
<Nav.Link href="/profile">Profile</Nav.Link> <div className="showText">
<Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link> <a href="/profile" style={{ color: "#FFFFFF", marginRight: "15px" }}>{'Profile'}</a>
</Nav> <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"> <div className="nav navbar-nav" style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
<Nav.Link href="/login">Login</Nav.Link> <div className="showTextBFLogin">
<Nav.Link href="/signup">Signup</Nav.Link> <a href="/login" style={{ color:"#FFFFFF", marginRight: "15px" }}>{'Login'}</a>
</Nav> <a href="/signup" style={{ color:"#FFFFFF" }}>{'Signup'}</a>
</div>
</div>
</>} </>}
</div> </div>
</Navbar>
) )
} }
export default Menu export default Menu
...@@ -14,7 +14,7 @@ function OpenList(props) { ...@@ -14,7 +14,7 @@ function OpenList(props) {
} }
return ( return (
<div> <div style={{overflow: 'auto', height: "80vh"}}>
{props.openlist.map((item, index) => {props.openlist.map((item, index) =>
<ListGroup key={index}> <ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} className='rounded-0'> <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} className='rounded-0'>
......
...@@ -219,11 +219,11 @@ function Home() { ...@@ -219,11 +219,11 @@ function Home() {
}, []) }, [])
return ( return (
<> <div style={{ weight: "100vw", height: "100vh", backgroundColor: "" }}>
<Menu /> <Menu style={{ weight: "100%", height: "10%" }} />
<Row className="mr-0"> <Row className="mr-0" style={{ weight: "100%", height: "80%" }}>
<Col className="list" md={5} style={{ overflow: 'auto', height: "80%" }}> <Col className="list" md={5}>
<Sdiv chat={chat}> <Sdiv chat={chat} open={open}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" > <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} > <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} /> <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() { ...@@ -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={handleShowModal} size="lg" block>생성</Button>
<Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button> <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
</div>} </> </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="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75"> <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> <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName} 입니다.</h2>
<h5> 관심분야 : {room.interest}</h5> <h5> 관심분야 : {room.interest}</h5>
<h5> 참여인원 : {room.member.length}</h5> <h5> 참여인원 : {room.member.length}</h5>
<h5 className="mb-3"> 방코드(방코드를 통해서도 참여할 있습니다.) : {room.roomId}</h5> <h5 className="mb-3"> 방코드(방코드를 통해서도 참여할 있습니다.) : {room.roomId}</h5>
...@@ -262,14 +263,14 @@ function Home() { ...@@ -262,14 +263,14 @@ function Home() {
</Row> </Row>
<RoomMake showModal={showModal} handleCloseModal={handleCloseModal} /> <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
<EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} sysmsg={sysmsg} setSysmsg={setSysmsg} /> <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} sysmsg={sysmsg} setSysmsg={setSysmsg} />
</> </div>
); );
} }
const Sdiv = styled.div` const Sdiv = styled.div`
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
display: ${({ chat }) => { display: ${({ chat, open }) => {
return chat === false ? 'block' : 'none' return (chat || open) ? 'none' : 'block'
}} }}
} }
` `
......
...@@ -54,7 +54,7 @@ function LogIn() { ...@@ -54,7 +54,7 @@ function LogIn() {
return ( return (
<> <>
<Menu /> <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"> <Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75"> <div className="mt-5 p-5 shadow w-75">
<h2 className="text-center">로그인</h2> <h2 className="text-center">로그인</h2>
......
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
import { Image, Button, Container, Form, Row, Col } from 'react-bootstrap'; import { Image, Button, Container, Form, Row, Col } from 'react-bootstrap';
import { BrowserRouter as Link } from 'react-router-dom';
import axios from 'axios' import axios from 'axios'
import catchErrors from '../utils/catchErrors' import catchErrors from '../utils/catchErrors'
import { isAuthenticated } from '../utils/auth'; import { isAuthenticated } from '../utils/auth';
...@@ -137,8 +136,7 @@ function ProfilePage() { ...@@ -137,8 +136,7 @@ function ProfilePage() {
<Row className='m-3 justify-content-center'> <Row className='m-3 justify-content-center'>
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<Button size="sm" className="mr-4" type='submit' variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>저장</Button> <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> </Form>
</Row> </Row>
</Col> </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