Skip to content

GitLab

Commit 9ce059d6 authored by 우지원's avatar 우지원
Browse files

ui 색상통일

parent 47898049
Hide whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ 9ce059d6
...@@ -88,8 +88,8 @@ function Chat(props) { ...@@ -88,8 +88,8 @@ function Chat(props) {
const time = new Date().toLocaleTimeString() const time = new Date().toLocaleTimeString()
return ( return (
<> <>
<Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}> <Container id="chat" style={{ padding: '20px', border: "2px solid", height: "520px", margin: "1%", borderColor: "#9174ad", background: '' }}>
<Row className="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px", margin: "1%" }}> <Row className="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#9174ad", height: "80px", margin: "1%" }}>
<Col md="auto"> <Col md="auto">
<Button variant="light" onClick={handleClick} >{`<`}</Button> <Button variant="light" onClick={handleClick} >{`<`}</Button>
</Col> </Col>
...@@ -98,52 +98,49 @@ function Chat(props) { ...@@ -98,52 +98,49 @@ function Chat(props) {
<Row > {props.roomCode} </Row> <Row > {props.roomCode} </Row>
</Col> </Col>
</Row> </Row>
<p>{props.newUser}님이 입장하셨습니다.</p> <div className="m-2" style={{ overflow: 'auto', padding: '20px', margin: "1%", height: "380px" }}>
{chat.map((value, index) => { <p>{props.newUser}님이 입장하셨습니다.</p>
if (!(value == '')) { {chat.map((value, index) => {
if (!(sender[index] === user.nickname)) { if (!(value == '')) {
return ( if (!(sender[index] === user.nickname)) {
<Row key={index} className='m-1' > return (
<Col xs={2}> <Row key={index} className='m-1' >
<Image src={img && `/images/${img[index]}`} style={{ width: "50px", height: "50px" }} roundedCircle /> <Col xs={2}>
</Col> <Image src={img && `/images/${img[index]}`} style={{ width: "50px", height: "50px" }} roundedCircle />
<Col xs={8}> </Col>
<Row><strong>{sender[index]}</strong></Row> <Col xs={8}>
<Row className='d-flex flex-wrap-nowrap'> <Row><strong>{sender[index]}</strong></Row>
<Row className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Row> <Row className='d-flex flex-wrap-nowrap'>
<Col className='ml-1'>{time}</Col> <Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Row>
<Col className='ml-1'>{time}</Col>
</Row>
</Col>
</Row>
)
} else {
return (
<Row key={index} className='m-1 justify-content-end'>
<Row className='d-flex flex-wrap-nowrap' >
<Col className='mr-1'>{time}</Col>
<Row className='mr-2' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
</Row> </Row>
</Col>
</Row>
)
} else {
return (
<Row key={index} className='m-1 justify-content-end'>
<Row className='d-flex flex-wrap-nowrap' >
<Col className='mr-1'>{time}</Col>
<Row className='mr-2' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
</Row> </Row>
</Row> )
) }
} else {
return null
} }
} else { })
return null
} }
}) </div>
}
</Container > </Container >
<Form onSubmit={sendMsgCH} fluid> <Form onSubmit={sendMsgCH}>
<Form.Group className='d-flex flex-wrap-nowrap justify-content-center m-3'> <Form.Group className="d-flex justify-content-center flex-wrap-nowrap mt-2 ml-4" style={{ width: '95%' }}>
<Form.Control className='border border-warning' name='chat' type="text" value={inner} onChange={handleChange} style={{ width: '85%' }} /> <Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ borderColor: "#9174ad" }} />
<Button variant="warning" type="submit" disabled={disabled} style={{ width: '10%' }}> <Button className="ml-1" type="submit" disabled={disabled} style={{ width: '25%', backgroundColor: "#9174ad", borderColor: "#9174ad" }}>전송</Button>
전송
</Button>
</Form.Group> </Form.Group>
</Form> </Form>
</> </>
); );
} }
......
client/src/Components/Menu.js
View file @ 9ce059d6
import React from 'react' import React from 'react'
import { Navbar, Nav, Button } from 'react-bootstrap'; import { Navbar, Nav, Button, Row, Col } from 'react-bootstrap';
import { handleLogout } from '../utils/auth'; import { handleLogout } from '../utils/auth';
...@@ -8,22 +8,54 @@ function Menu() { ...@@ -8,22 +8,54 @@ function Menu() {
const name = sessionStorage.getItem('name'); const name = sessionStorage.getItem('name');
return ( return (
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="/home">YDK Messenger</Navbar.Brand> // <Navbar bg="dark" variant="dark" expand="lg">
{name ? // <Navbar.Brand href="/home">YDK Messenger</Navbar.Brand>
<> // <Navbar.Toggle aria-controls="basic-navbar-nav" />
<div className='ml-1 mr-2' style={{ color: 'white' }}>{name}님 환영합니다</div> // <Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto"> // {name ?
<Nav.Link href="/profile">Profile</Nav.Link> // <>
</Nav> // <Nav.Item className="mt-2" style={{ color: 'white' }}>{name}님 환영합니다</Nav.Item>
<Button className="ml-auto" onClick={() => handleLogout()} variant="light">Logout</Button> // <Nav.Item className="ml-auto">
</> // <Nav.Link href="/profile" style={{ color: 'white' }}>Profile</Nav.Link>
: <Nav className="ml-auto"> // </Nav.Item>
<Nav.Link href='/login'>로그인</Nav.Link> // <Nav.Item>
<Nav.Link href='/signup'>회원가입</Nav.Link> // <Nav.Link onClick={() => handleLogout()} href="login" style={{ color: 'white' }}>Logout</Nav.Link>
</Nav>} // </Nav.Item>
// </>
// : <>
// <Nav.Item className="ml-auto">
// <Nav.Link href='/login' style={{ color: 'white' }}>로그인</Nav.Link>
// </Nav.Item>
// <Nav.Item>
// <Nav.Link href='/signup' style={{ color: 'white' }}>회원가입</Nav.Link>
// </Nav.Item>
// </>}
// </Navbar.Collapse>
// </Navbar>
// style={{ borderColor: "#BDBDBD" }}
<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> </Navbar>
) )
} }
export default Menu export default Menu
client/src/Pages/HomePage.js
View file @ 9ce059d6
...@@ -119,50 +119,54 @@ function Home() { ...@@ -119,50 +119,54 @@ function Home() {
return ( return (
<> <>
<Menu /> <Menu />
<Row className="mr-0"> {userName ? <>
<Col className="list" md={5}> <Row className="mr-0">
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example"> <Col className="list" md={5}>
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} > <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} /> <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
</Tab> <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
<Tab eventKey="open" title="공개방" onClick={handleChatc}> </Tab>
<OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} /> <Tab eventKey="open" title="공개방" onClick={handleChatc}>
</Tab> <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
</Tabs> </Tab>
</Col> </Tabs>
<Col style={{ padding: "0" }}> </Col>
<> <Col className="mr-3">
{(show || chat) ? <>
null {(show || chat) ?
: <div style={{ position: "fixed", bottom: "20px", right: "30px" }}> null
<Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button> <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
</div> <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
} </div>
{chat ? }
<Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} recievedMsg={recievedMsg} setRecievedMsg={setRecievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} roomCode={roomCode} roomName={roomName} /> {chat ?
: null} <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} recievedMsg={recievedMsg} setRecievedMsg={setRecievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} roomCode={roomCode} roomName={roomName} />
{open ? : null}
<div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark"> {open ?
<div className="d-flex justify-content-center"> <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
<div className="mt-5 p-5 shadow w-75"> <div className="d-flex justify-content-center">
<h2 className="d-flex justify-content-center mb-3">현재 {room.roomName}방 입니다.</h2> <div className="mt-5 p-5 shadow w-75">
<h5>▷ 관심분야 : {room.interest}</h5> <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName}방 입니다.</h2>
<h5>▷ 참여인원 : {room.member.length}</h5> <h5>▷ 관심분야 : {room.interest}</h5>
<h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5> <h5>▷ 참여인원 : {room.member.length}</h5>
<Row className='justify-content-center'> <h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
<Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button> <Row className='justify-content-center'>
<Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button> <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }}
</Row> size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
<Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }}
size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
</Row>
</div>
</div> </div>
</div> </div>
</div> : null}
: null} </>
</> <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
</Col> <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
</Row> </Col>
<RoomMake showModal={showModal} handleCloseModal={handleCloseModal} /> </Row>
<EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} /> </> : window.location.href = '/login'}
</> </>
); );
} }
......
client/src/Pages/LogInPage.js
View file @ 9ce059d6
...@@ -91,11 +91,12 @@ function LogIn() { ...@@ -91,11 +91,12 @@ function LogIn() {
<Button <Button
disabled={disabled || loading} disabled={disabled || loading}
type="submit" type="submit"
variant="outline-success" variant="outline"
size="lg" size="lg"
className="mr-4" className="mr-4"
style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white', font: 'dark' }}
block> block>
{loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' />} {' '} 로그인 {loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' style={{ color: "#b49dc9" }} />} {' '} 로그인
</Button> </Button>
{error && <Alert variant='danger'> {error && <Alert variant='danger'>
{error} {error}
......
client/src/Pages/ProfilePage.js
View file @ 9ce059d6
...@@ -113,7 +113,7 @@ function ProfilePage() { ...@@ -113,7 +113,7 @@ function ProfilePage() {
</Col> </Col>
<Col xs={3}> <Col xs={3}>
<Form className="d-flex" onSubmit={handleSubmitHidVis}> <Form className="d-flex" onSubmit={handleSubmitHidVis}>
<Button className="ml-3 d-flex justify-content-end" variant="outline-primary" size="sm" type='submit'>수정</Button> <Button className="ml-3 d-flex justify-content-end" variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white' }} size="sm" type='submit'>수정</Button>
</Form> </Form>
</Col> </Col>
</Row> </Row>
...@@ -123,9 +123,9 @@ function ProfilePage() { ...@@ -123,9 +123,9 @@ function ProfilePage() {
</Row> </Row>
<Row className='m-3 justify-content-center'> <Row className='m-3 justify-content-center'>
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<Button variant="outline-success" size="sm" className="mr-4" type='submit'>저장</Button> <Button variant="outline-success" size="sm" className="mr-4" type='submit' variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>저장</Button>
<Link to='/'> <Link to='/'>
<Button variant="outline-success" size="sm" className="ml-4" >홈 화면으로</Button> <Button variant="outline-success" size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>홈 화면으로</Button>
</Link> </Link>
</Form> </Form>
</Row> </Row>
......
client/src/Pages/SignUpPage.js
View file @ 9ce059d6
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios' import axios from 'axios'
import { Button, Form, Container, Alert, Navbar } from 'react-bootstrap'; import { Button, Form, Container, Alert, Spinner, Navbar } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
...@@ -17,7 +17,8 @@ function SingUp() { ...@@ -17,7 +17,8 @@ function SingUp() {
const [user, setUser] = useState(INIT_USER) const [user, setUser] = useState(INIT_USER)
const [error, setError] = useState('') const [error, setError] = useState('')
const [disabled, setDisabled] = useState(true) const [disabled, setDisabled] = useState(true)
const [success, setSuccess] = useState(false) const [success, setSuccess] = useState(false)
const [loading, setLoading] = useState(false)
useEffect(() => { useEffect(() => {
const isUser = Object.values(user).every(el => Boolean(el)) const isUser = Object.values(user).every(el => Boolean(el))
...@@ -43,11 +44,14 @@ function SingUp() { ...@@ -43,11 +44,14 @@ function SingUp() {
// console.log(user) // console.log(user)
try { try {
setLoading(true)
setError('') setError('')
await axios.post('/users/signup', user) await axios.post('/users/signup', user)
setSuccess(true) setSuccess(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} finally {
setLoading(false)
} }
} }
...@@ -127,10 +131,12 @@ function SingUp() { ...@@ -127,10 +131,12 @@ function SingUp() {
<Button <Button
disabled={disabled} disabled={disabled}
type='submit' type='submit'
variant="outline-success" variant="outline"
size="lg" size="lg"
className="mr-4" className="mr-4"
block>가입</Button> style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white', font: 'dark' }}
block>
{loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' style={{ color: "#b49dc9" }} />}가입</Button>
{error && <Alert variant='danger'> {error && <Alert variant='danger'>
{error} {error}
</Alert>} </Alert>}
......
client/src/utils/auth.js
View file @ 9ce059d6
...@@ -10,7 +10,7 @@ export async function handleLogout() { ...@@ -10,7 +10,7 @@ export async function handleLogout() {
sessionStorage.clear(); sessionStorage.clear();
await axios.get('/auth/logout') await axios.get('/auth/logout')
//login페이지로 이동 //login페이지로 이동
window.location.href='/login' // window.location.href='/login'
} }
export function isAuthenticated() { export function isAuthenticated() {
......
server/models/Room.js
View file @ 9ce059d6
...@@ -25,7 +25,7 @@ const RoomSchema = new mongoose.Schema({ ...@@ -25,7 +25,7 @@ const RoomSchema = new mongoose.Schema({
member: { member: {
type: Array, type: Array,
required: true, required: true,
} },
}, { }, {
timestamps: true timestamps: true
}) })
......
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