Skip to content

GitLab

"client/src/git@compmath.korea.ac.kr:students/eue.git" did not exist on "ec4d4f56af546ed3efac6d4d2712fe57aff5f29f"
Commit f7b7d734 authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

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

parents 0a100f42 7ed274d3
Hide whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ f7b7d734
...@@ -3,7 +3,8 @@ import React, { useState, useEffect } from 'react'; ...@@ -3,7 +3,8 @@ import React, { useState, useEffect } from 'react';
import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap'; import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap';
import { isAuthenticated } from '../utils/auth'; import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
import { BsCaretLeftFill, BsList, BsExclamationCircleFill, BsCheck, BsX } from "react-icons/bs";
import { FiSend } from "react-icons/fi";
const INIT_CHAT = { const INIT_CHAT = {
msg: '', msg: '',
...@@ -13,7 +14,7 @@ const INIT_CHAT = { ...@@ -13,7 +14,7 @@ const INIT_CHAT = {
} }
function Chat(props) { function Chat(props) {
const [sender, setSender] = useState([]) //const [sender, setSender] = useState([])
//const [roomName, setRoomName] = useState('') //const [roomName, setRoomName] = useState('')
const [inner, setInner] = useState(['']) const [inner, setInner] = useState([''])
...@@ -84,7 +85,6 @@ function Chat(props) { ...@@ -84,7 +85,6 @@ function Chat(props) {
props.setRecievedMsg('') props.setRecievedMsg('')
props.handleChatc() props.handleChatc()
setChat(['']) setChat([''])
recordEntryLog() recordEntryLog()
props.setRoomCode('') props.setRoomCode('')
} }
...@@ -124,7 +124,6 @@ function Chat(props) { ...@@ -124,7 +124,6 @@ function Chat(props) {
props.handleChatc() props.handleChatc()
} }
useEffect(() => { useEffect(() => {
getProfile(userId) getProfile(userId)
}, [userId]) }, [userId])
...@@ -143,29 +142,32 @@ function Chat(props) { ...@@ -143,29 +142,32 @@ 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" }}>
<Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}> <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}>
<Row className="justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px" }}> <a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
<Col md="auto"> <div style={{ justifyContent: "center" }}>
<Button variant="light" onClick={handleClick} >{`<`}</Button> <p style={{ color: "#333333", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </p>
</Col> <p style={{ color: "#333333", fontSize: "0.8em", textAlign: "center", margin: "0.5px 0px 0px 0px" }}> {props.roomCode} </p>
<Col> </div>
<Row style={{ fontWeight: "bold", fontSize: "x-large" }}> {props.roomName} </Row> <a href="#;" onClick={() => setExit(!exit)} style={{ margin: "0px 15px 0px 0px" }}><BsList size="20" color="#333333" /></a>
<Row > {props.roomCode} </Row> </div>
</Col> {exit ?
<Col md="auto"> <div id="chat-exit-check" style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center", margin: "1%", backgroundColor: "#30284D", borderRadius: "5px", height: "50px" }}>
<Button variant="light" onClick={() => setExit(true)}>{'='}</Button> <p style={{ width: "70%", color: "#FAFAFA", fontSize: "1em", margin: "0px 10px 0px 20px" }}><BsExclamationCircleFill size="1em" color="#F2D788" /> 퇴장하시겠습니까?</p>
</Col> <a href="#;" onClick={exitAndCloseRoom}><BsCheck size="1em" color="#F2D788" /></a>
</Row> <a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
{exit ? </div>
<Row> : null}
<Col>퇴장하시겠습니까?</Col> <div id="chat-body" style={{ overflow: 'auto', padding: '15px', width: "100%", height: "400px", margin: "1%", background: '' }}>
<Col md="auto"><Button variant="light" onClick={exitAndCloseRoom}>{"나가기"}</Button></Col>
</Row>
: null}
{chat.map((value, index) => { {chat.map((value, index) => {
if (!(value.msg === '')) { if (!(value.msg === '')) {
if (!(value.sender === user.nickname)) { if (value.sender === "system") {
return (
<Row style={{ background: "#F5F5F5", border: "none", justifyContent: "center" }}>
{value.msg}
</Row>
)
} else if (!(value.sender === user.nickname)) {
return ( return (
<Row key={index} className='m-1' > <Row key={index} className='m-1' >
<Col xs={2}> <Col xs={2}>
...@@ -174,22 +176,18 @@ function Chat(props) { ...@@ -174,22 +176,18 @@ function Chat(props) {
<Col xs={8}> <Col xs={8}>
<Row><strong>{value.sender}</strong></Row> <Row><strong>{value.sender}</strong></Row>
<Row className='d-flex flex-wrap-nowrap'> <Row className='d-flex flex-wrap-nowrap'>
<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.msg}</Row> <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> <Col className='ml-1'>{value.time}</Col>
</Row> </Row>
</Col> </Col>
</Row> </Row>
) )
} else if (sender[index] === "") {
return (
{ value }
)
} else { } else {
return ( //내가 보낸 메시지 return ( //내가 보낸 메시지
<Row key={index} className='m-1 justify-content-end'> <Row key={index} className='m-1 justify-content-end'>
<Row className='d-flex flex-wrap-nowrap' > <Row className='d-flex flex-wrap-nowrap' >
<Col className='mr-1'>{value.time}</Col> <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: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value.msg}</Row> <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>
</Row> </Row>
</Row> </Row>
) )
...@@ -199,19 +197,20 @@ function Chat(props) { ...@@ -199,19 +197,20 @@ function Chat(props) {
} }
}) })
} }
</div>
</Container > <div id="chat-low-side" style={{ width: "95%", height: "60px", position: "absolute", bottom: "0", padding: "10px 5px 5px 10px" }}>
<Form onSubmit={sendMsgCH} fluid> <div id="chat-form" style={{ width: "100%", height: "100%", borderStyle: "solid", borderWidth: "2px", borderColor: "#C1C1C1", borderRadius: "25px", padding: "3px 2px 2px 3px" }}>
<Form.Group className='d-flex flex-wrap-nowrap justify-content-center m-3'> <Form onSubmit={sendMsgCH}>
<Form.Control className='border border-warning' name='chat' type="text" value={inner} onChange={handleChange} style={{ width: '85%' }} /> <Form.Group style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}>
<Button variant="warning" type="submit" disabled={disabled} style={{ width: '10%' }}> <Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ width: "80%", height: "90%", borderColor: "#FFFFFF" }} />
전송 <Button type="submit" disabled={disabled} style={{ justifyContent: "center", width: "10%", height: "90%", borderRadius: "20px", backgroundColor: "#C1C1C1", borderColor: "#FFFFFF" }}>
</Button> <FiSend size="16px" color="#FAFAFA" />
</Form.Group> </Button>
</Form> </Form.Group>
</> </Form>
</div>
</div>
</div>
); );
} }
......
client/src/Components/ClosedList.js
View file @ f7b7d734
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { Badge, ListGroup } from 'react-bootstrap'; import { Badge, ListGroup } from 'react-bootstrap';
import "../Pages/Home.css";
import axios from 'axios' import axios from 'axios'
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
...@@ -44,7 +45,7 @@ function ClosedList(props) { ...@@ -44,7 +45,7 @@ function ClosedList(props) {
useEffect(() => { // 누군가 보내면 다시 개수 셈 useEffect(() => { // 누군가 보내면 다시 개수 셈
console.log('chat 클라이언트 변경!') console.log('chat 클라이언트 변경!')
props.unreadMessage() props.unreadMessage()
console.log('새 메세지가 도착했습니다.',props.leftInfo) console.log('새 메세지가 도착했습니다.', props.leftInfo)
}, [props.checknew]) }, [props.checknew])
useEffect(() => { //일단 들오면 실행해야지 useEffect(() => { //일단 들오면 실행해야지
...@@ -53,7 +54,7 @@ function ClosedList(props) { ...@@ -53,7 +54,7 @@ function ClosedList(props) {
let count=[] let count = []
const [unread, setUnread] = useState([]) const [unread, setUnread] = useState([])
useEffect(() => { //unread정보가 들어오면 재정비해서 뿌려주기 위한 작업! useEffect(() => { //unread정보가 들어오면 재정비해서 뿌려주기 위한 작업!
for (let i = 0; i < props.unreadnumber.length; i++) { for (let i = 0; i < props.unreadnumber.length; i++) {
...@@ -66,7 +67,8 @@ function ClosedList(props) { ...@@ -66,7 +67,8 @@ function ClosedList(props) {
<div> <div>
{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}
className='rounded-0'>
{item.roomName} {item.roomName}
{unread[index] ? <Badge className='ml-2' pill variant='danger'>{unread[index]}</Badge> : ''} {unread[index] ? <Badge className='ml-2' pill variant='danger'>{unread[index]}</Badge> : ''}
</ListGroup.Item> </ListGroup.Item>
......
client/src/Components/EnterRoom.js
View file @ f7b7d734
...@@ -23,7 +23,6 @@ function EnterRoom(props) { ...@@ -23,7 +23,6 @@ function EnterRoom(props) {
let res = await axios.post('/room/enterRoom', { enterCode }) let res = await axios.post('/room/enterRoom', { enterCode })
await axios.put('/room/member', { userId: userId, roomId: enterCode }) await axios.put('/room/member', { userId: userId, roomId: enterCode })
const response = await axios.get('/users/check', { params: { '_id': userId } }) const response = await axios.get('/users/check', { params: { '_id': userId } })
// console.log('res확인22', response.data.nickname)
const userNick = response.data.nickname; const userNick = response.data.nickname;
props.setRoomName(res.data) props.setRoomName(res.data)
props.setRoomCode(enterCode) props.setRoomCode(enterCode)
...@@ -53,7 +52,7 @@ function EnterRoom(props) { ...@@ -53,7 +52,7 @@ function EnterRoom(props) {
</Form.Group> </Form.Group>
<Form.Group as={Row}> <Form.Group as={Row}>
<Col sm={{ span: 5, offset: 4 }}> <Col sm={{ span: 5, offset: 4 }}>
<Button type="submit">참가</Button> <Button type="submit" style={{backgroundColor:"#9174ad", borderColor:"#9174ad"}} >참가</Button>
</Col> </Col>
</Form.Group> </Form.Group>
</Form> </Form>
......
client/src/Components/Menu.js
View file @ f7b7d734
import React from 'react' import React from 'react'
import { Navbar, Nav, Button } from 'react-bootstrap'; import { Navbar, Nav } from 'react-bootstrap';
import { handleLogout } from '../utils/auth'; import { handleLogout } from '../utils/auth';
...@@ -8,22 +8,27 @@ function Menu() { ...@@ -8,22 +8,27 @@ function Menu() {
const name = sessionStorage.getItem('name'); const name = sessionStorage.getItem('name');
return ( return (
<Navbar bg="dark" variant="dark"> <Navbar style={{ backgroundColor: "#61477a" }} variant="dark">
<Navbar.Brand href="/home">YDK Messenger</Navbar.Brand> <div className="container-fluid">
{name ? <Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
<> {name ?
<div className='ml-1 mr-2' style={{ color: 'white' }}>{name}님 환영합니다</div> <>
<Nav className="mr-auto"> <Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}>
<Nav.Link href="/profile">Profile</Nav.Link> <Nav.Item className="mt-2 mr-4">{name}님 환영합니다</Nav.Item>
</Nav> <Nav.Link href="/profile">Profile</Nav.Link>
<Button className="ml-auto" onClick={() => handleLogout()} variant="light">Logout</Button> <Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link>
</> </Nav>
: <Nav className="ml-auto"> </>
<Nav.Link href='/login'>로그인</Nav.Link> : <>
<Nav.Link href='/signup'>회원가입</Nav.Link> <Nav className="nav navbar-nav">
</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/Components/OpenList.js
View file @ f7b7d734
import React, { useState, useEffect } from 'react' import React from 'react'
import { ListGroup } from 'react-bootstrap'; import { ListGroup } from 'react-bootstrap';
import axios from 'axios' import "../Pages/Home.css";
function OpenList(props) { function OpenList(props) {
function enterChatRoomCH(e) { function enterChatRoomCH(e) {
if (props.roomCode){ if (props.roomCode) {
props.closeChatRoom(props.roomCode) props.closeChatRoom(props.roomCode)
} }
console.log('e확인', e.target)
const roomCode = e.target.name const roomCode = e.target.name
// props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
props.openListroom(roomCode) props.openListroom(roomCode)
props.setRoomCode(roomCode) props.setRoomCode(roomCode)
// props.clearChat()
} }
return ( return (
<div> <div>
{props.openlist.map((item, index) => {props.openlist.map((item, index) =>
<ListGroup key={index}> <ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}> <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} className='rounded-0'>
{item.roomName} {item.roomName}
</ListGroup.Item> </ListGroup.Item>
</ListGroup> </ListGroup>
......
client/src/Components/RoomMake.js
View file @ f7b7d734
...@@ -28,7 +28,6 @@ function RoomMake(props) { ...@@ -28,7 +28,6 @@ function RoomMake(props) {
const Id = res.data.roomId const Id = res.data.roomId
alert(`방암호는 ${Id}입니다`) alert(`방암호는 ${Id}입니다`)
props.handleCloseModal() props.handleCloseModal()
props.handleChato()
setRoom(INIT_ROOM) setRoom(INIT_ROOM)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
...@@ -62,7 +61,6 @@ function RoomMake(props) { ...@@ -62,7 +61,6 @@ function RoomMake(props) {
<option>언어</option> <option>언어</option>
<option>취미</option> <option>취미</option>
</Form.Control> </Form.Control>
{/* <Form.Control type="text" /> */}
</Col> </Col>
</Form.Group> </Form.Group>
<Form.Group as={Row} controlId="chatIsOpen"> <Form.Group as={Row} controlId="chatIsOpen">
...@@ -82,7 +80,7 @@ function RoomMake(props) { ...@@ -82,7 +80,7 @@ function RoomMake(props) {
} }
<Form.Group as={Row}> <Form.Group as={Row}>
<Col sm={{ span: 5, offset: 4 }}> <Col sm={{ span: 5, offset: 4 }}>
<Button type="submit" >방 생성</Button> <Button type="submit" style={{backgroundColor:"#9174ad", borderColor:"#9174ad"}} >방 생성</Button>
</Col> </Col>
</Form.Group> </Form.Group>
</Form> </Form>
......
client/src/Pages/Home.css 0 → 100644
View file @ f7b7d734
.nav-tabs .nav-item.nav-link {
color: silver !important;
}
.nav-tabs .nav-item.nav-link.active {
color:slateblue !important;
}
.list-group-item-action{
border-top: none;
}
client/src/Pages/HomePage.js
View file @ f7b7d734
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Row, Col, Button, Tabs, Tab, Form } from 'react-bootstrap'; import { Row, Col, Button, Tabs, Tab, Form } from 'react-bootstrap';
import styled from 'styled-components';
import ClosedList from '../Components/ClosedList'; import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList'; import OpenList from '../Components/OpenList';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
...@@ -8,6 +9,7 @@ import Chat from "../Components/Chat"; ...@@ -8,6 +9,7 @@ import Chat from "../Components/Chat";
import RoomMake from "../Components/RoomMake" import RoomMake from "../Components/RoomMake"
import EnterRoom from "../Components/EnterRoom" import EnterRoom from "../Components/EnterRoom"
import axios from 'axios'; import axios from 'axios';
import "./Home.css"
const socket = io(); const socket = io();
...@@ -59,7 +61,12 @@ function Home() { ...@@ -59,7 +61,12 @@ function Home() {
const [singleTime, setSingleTime] = useState('') const [singleTime, setSingleTime] = useState('')
const [recievedTime, setRecievedTime] = useState('') const [recievedTime, setRecievedTime] = useState('')
const handleCloseModal = () => setShowModal(false); const handleCloseModal = () => {
setShowModal(false);
getClosedList()
getOpenList()
}
const handleShowModal = () => setShowModal(true); const handleShowModal = () => setShowModal(true);
const handleCloseEnter = () => setShowEnter(false); const handleCloseEnter = () => setShowEnter(false);
const handleShowEnter = () => setShowEnter(true); const handleShowEnter = () => setShowEnter(true);
...@@ -72,7 +79,9 @@ function Home() { ...@@ -72,7 +79,9 @@ function Home() {
async function enterChatRoom(rCode) { //방 입장하기 async function enterChatRoom(rCode) { //방 입장하기
socket.emit('joinRoom', rCode) socket.emit('joinRoom', rCode)
socket.emit('newUser', { rmIf: rCode, userInfo: userName }) socket.emit('newUser', { rmIf: rCode, userInfo: userName })
setShow(true)
console.log(`joinRoom : ${rCode} 입장`) console.log(`joinRoom : ${rCode} 입장`)
console.log('show:', show)
//여기서 채팅 불러와서 넘겨주던가 해야할거 같은데 //여기서 채팅 불러와서 넘겨주던가 해야할거 같은데
console.log('HomePage/enterChatRoom 끝났습니다') console.log('HomePage/enterChatRoom 끝났습니다')
} }
...@@ -84,8 +93,10 @@ function Home() { ...@@ -84,8 +93,10 @@ function Home() {
async function exitRoom(roomId) { async function exitRoom(roomId) {
const response = await axios.get('/users/check', { params: { '_id': userId } })
const userNick = response.data.nickname;
await axios.put('/room/deleteMem', { userId: userId, roomId: roomId }) await axios.put('/room/deleteMem', { userId: userId, roomId: roomId })
console.log(`${roomId}방 ${userId} 탈퇴`) setSysmsg(`${userNick}님이 나갔습니다.`)
setRoomCode("") setRoomCode("")
} }
...@@ -98,19 +109,16 @@ function Home() { ...@@ -98,19 +109,16 @@ function Home() {
async function getOpenList() { async function getOpenList() {
let res = await axios.get('/room/openlist') let res = await axios.get('/room/openlist')
// console.log('getOpenlist', res.data)
setOpenlist(res.data) setOpenlist(res.data)
} }
//오픈채팅방에서 참가하기
async function openListroom(roomId) { async function openListroom(roomId) {
console.log(roomId)
const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } }) const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } })
setRoom(roomInf.data[0]) setRoom(roomInf.data[0])
setOpen(true)
setShow(false) setShow(false)
setOpen(true)
} }
//오픈채팅방에서 참가하기
async function attendListRoom() { async function attendListRoom() {
const roomId = room.roomId const roomId = room.roomId
const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId }) const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
...@@ -119,6 +127,7 @@ function Home() { ...@@ -119,6 +127,7 @@ function Home() {
if (tf.data) { if (tf.data) {
alert('참가되었습니다.') alert('참가되었습니다.')
setSysmsg(`${userNick}님이 들어왔습니다.`) setSysmsg(`${userNick}님이 들어왔습니다.`)
getClosedList()
} else { } else {
alert('이미 참가된 방입니다.') alert('이미 참가된 방입니다.')
} }
...@@ -158,7 +167,6 @@ function Home() { ...@@ -158,7 +167,6 @@ function Home() {
sendInfo: { sendInfo: {
msg: sysmsg, msg: sysmsg,
sender: "system", sender: "system",
// time: singleTime
} }
}) })
setSysmsg('') setSysmsg('')
...@@ -214,45 +222,42 @@ function Home() { ...@@ -214,45 +222,42 @@ function Home() {
<> <>
<Menu /> <Menu />
<Row className="mr-0"> <Row className="mr-0">
<Col className="list" md={5}> <Col className="list" md={5} style={{ overflow: 'auto', height: "80%" }}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" > <Sdiv chat={chat}>
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} > <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
<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 eventKey="closed" title="내 채팅" onClick={handleChato} >
</Tab> <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 eventKey="open" title="공개방" onClick={handleChatc}> </Tab>
<OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} /> <Tab eventKey="open" title="공개방" onClick={handleChatc}>
</Tab> <OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
</Tabs> </Tab>
</Tabs>
</Sdiv>
</Col> </Col>
<Col style={{ padding: "0" }}> <Col style={{ padding: "5px", marginLeft: "15px" }}>
<> {show ? <>
{(show || chat) ? {chat ? <Chat leftInfo={leftInfo} setLeftInfo={setLeftInfo} handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} setRoomCode={setRoomCode} />
null
: <div style={{ position: "fixed", bottom: "20px", right: "30px" }}> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button> <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
<Button variant="secondary" 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">
{chat ? <div className="d-flex justify-content-center">
<Chat leftInfo={leftInfo} setLeftInfo={setLeftInfo} handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} setRoomCode={setRoomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} closedlist={closedlist} /> <div className="mt-5 p-5 shadow w-75">
: null} <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName} 입니다.</h2>
{open ? <h5>▷ 관심분야 : {room.interest}</h5>
<div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark"> <h5>▷ 참여인원 : {room.member.length}</h5>
<div className="d-flex justify-content-center"> <h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
<div className="mt-5 p-5 shadow w-75"> <Row className='justify-content-center'>
<h2 className="d-flex justify-content-center mb-3">현재 {room.roomName}방 입니다.</h2> <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
<h5>▷ 관심분야 : {room.interest}</h5> <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
<h5>▷ 참여인원 : {room.member.length}</h5> </Row>
<h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
<Row className='justify-content-center'>
<Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
<Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
</Row>
</div>
</div> </div>
</div> </div>
: null} </div> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
</> <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>} </>}
</Col> </Col>
</Row> </Row>
<RoomMake showModal={showModal} handleCloseModal={handleCloseModal} /> <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
...@@ -261,5 +266,12 @@ function Home() { ...@@ -261,5 +266,12 @@ function Home() {
); );
} }
export default Home; const Sdiv = styled.div`
@media screen and (max-width: 768px) {
display: ${({ chat }) => {
return chat === false ? 'block' : 'none'
}}
}
`
export default Home;
\ No newline at end of file
client/src/Pages/LogInPage.js
View file @ f7b7d734
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios' import axios from 'axios'
import { Button, Form, Container, Navbar, Spinner, Alert } from 'react-bootstrap'; import { Button, Form, Container, Spinner, Alert } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors' import catchErrors from '../utils/catchErrors'
import { Link, Redirect } from 'react-router-dom' import { Redirect } from 'react-router-dom'
import { handleLogin } from '../utils/auth' import { handleLogin } from '../utils/auth'
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
...@@ -38,8 +38,6 @@ function LogIn() { ...@@ -38,8 +38,6 @@ function LogIn() {
setSucces(true) setSucces(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
//setError(error.response.data)
//error객체가 들어감.
} finally { } finally {
setLoading(false) setLoading(false)
} }
...@@ -91,11 +89,12 @@ function LogIn() { ...@@ -91,11 +89,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 @ f7b7d734
...@@ -126,7 +126,7 @@ function ProfilePage() { ...@@ -126,7 +126,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>
...@@ -136,10 +136,9 @@ function ProfilePage() { ...@@ -136,10 +136,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 size="sm" className="mr-4" type='submit' variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>저장</Button>
<Link to='/'> <Button href='/' size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>홈 화면으로</Button>
<Button variant="outline-success" size="sm" className="ml-4" >홈 화면으로</Button>
</Link>
</Form> </Form>
</Row> </Row>
</Col> </Col>
......
client/src/Pages/SignUpPage.js
View file @ f7b7d734
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} 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))
...@@ -32,22 +33,15 @@ function SingUp() { ...@@ -32,22 +33,15 @@ function SingUp() {
async function handleSubmit(event) { async function handleSubmit(event) {
event.preventDefault(); event.preventDefault();
//빈문자열 입력 시 오류 문자 출력
//const form = event.currentTarget;
//if (form.checkValidity() === false) {
// event.preventDefault();
// event.stopPropagation();
// //event.stopPropagation() : 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.
//}
//setValidated(true);
// 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)
} }
} }
...@@ -57,11 +51,9 @@ function SingUp() { ...@@ -57,11 +51,9 @@ function SingUp() {
return <Redirect to='/login' /> return <Redirect to='/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-100 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">
...@@ -127,10 +119,12 @@ function SingUp() { ...@@ -127,10 +119,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 @ f7b7d734
...@@ -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/controllers/room.controller.js
View file @ f7b7d734
import Room from "../models/Room.js" import Room from "../models/Room.js"
import { customAlphabet } from 'nanoid' import { customAlphabet } from 'nanoid'
import isLength from 'validator/lib/isLength.js' import isLength from 'validator/lib/isLength.js'
//import AccessInfo from '../models/AccessInfo.js'
import Chat from "../models/Chat.js" import Chat from "../models/Chat.js"
import EntryLog from "../models/EntryLog.js" import EntryLog from "../models/EntryLog.js"
...@@ -70,25 +69,6 @@ const getRoomName = async (req, res) => { ...@@ -70,25 +69,6 @@ const getRoomName = async (req, res) => {
} }
} }
// const sysMsg = async (req, res) => {
// try {
// console.log('sysreq', req.query)
// let rmif = await Room.find({ roomId: req.query.roomCode })
// console.log('rmif', rmif)
// let rmid = await AccessInfo.find({ room: rmif._id })
// console.log('rmid', rmid)
// if (rmid.isEnt) {
// let msg = `${rmif.nickname}이 들어왔습니다`
// } else {
// }
// } catch (error) {
// res.status(500).send('')
// }
// }
const changemember = async (req, res) => { const changemember = async (req, res) => {
const { userId, roomId } = req.body const { userId, roomId } = req.body
// console.log(roomId) // console.log(roomId)
...@@ -127,10 +107,7 @@ const deleteUserId = async (req, res) => { ...@@ -127,10 +107,7 @@ const deleteUserId = async (req, res) => {
const roomInf = async (req, res) => { const roomInf = async (req, res) => {
try { try {
// console.log(req.query.roomId)
// let roomInf = await Room.findOne({ member: req.query.roomId }).select('interest roomId member').exec()
let roomInf = await Room.find({ roomId: req.query.roomId }) let roomInf = await Room.find({ roomId: req.query.roomId })
// console.log('room_member로 정보 가져오기:', roomInf)
return res.json(roomInf) return res.json(roomInf)
} catch (error) { } catch (error) {
alert('올바르지 못한 접근입니다.') alert('올바르지 못한 접근입니다.')
...@@ -145,7 +122,7 @@ const unreadMessage = async (req, res) => { ...@@ -145,7 +122,7 @@ const unreadMessage = async (req, res) => {
for (const key in Object.keys(leaveInfo)) { for (const key in Object.keys(leaveInfo)) {
leaveInfo[key] = JSON.parse(leaveInfo[key]) //형식좀 제대로 맞춰주고 leaveInfo[key] = JSON.parse(leaveInfo[key]) //형식좀 제대로 맞춰주고
} }
let countArr = [] let countArr = []
for (const key in Object.keys(leaveInfo)) { for (const key in Object.keys(leaveInfo)) {
const room = await Room.findOne({ roomId: leaveInfo[key].roomCode }) //들어온 방 코드로 그 방의 정보 찾아옴 const room = await Room.findOne({ roomId: leaveInfo[key].roomCode }) //들어온 방 코드로 그 방의 정보 찾아옴
......
server/controllers/roomEnter.controller.js
View file @ f7b7d734
...@@ -5,16 +5,13 @@ import EntryLog from "../models/EntryLog.js"; ...@@ -5,16 +5,13 @@ import EntryLog from "../models/EntryLog.js";
const roomEnter = async (req, res) => { const roomEnter = async (req, res) => {
const roomId = req.body.enterCode const roomId = req.body.enterCode
// console.log(req)
try { try {
const room = await Room.findOne({ roomId }) const room = await Room.findOne({ roomId })
if (!room) { if (!room) {
return res.status(404).send(`참여코드가 존재하지 않습니다.`) return res.status(404).send(`참여코드가 존재하지 않습니다.`)
} }
console.log('roomId존재') console.log('roomId존재')
const name = await Room.findOne({ roomId: roomId }).select('roomName') const name = await Room.findOne({ roomId: roomId }).select('roomName')
return res.json(name.roomName) return res.json(name.roomName)
......
server/controllers/user.controller.js
View file @ f7b7d734
...@@ -86,7 +86,6 @@ const getProfile = (req, res) => { ...@@ -86,7 +86,6 @@ const getProfile = (req, res) => {
const checkUser = async (req, res) => { const checkUser = async (req, res) => {
try { try {
const info = await User.findOne({ _id: req.query._id }) const info = await User.findOne({ _id: req.query._id })
console.log('info 확인', info)
return res.json(info) return res.json(info)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
......
server/models/Room.js
View file @ f7b7d734
...@@ -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
}) })
......
server/models/User.js
View file @ f7b7d734
...@@ -35,11 +35,10 @@ const UserSchema = new mongoose.Schema({ ...@@ -35,11 +35,10 @@ const UserSchema = new mongoose.Schema({
default: '3cd14b9bcb2007f324fcb82e0b566cce', default: '3cd14b9bcb2007f324fcb82e0b566cce',
}, },
}, { }, {
//옵셥을 정의함.
timestamps: true timestamps: true
//기본이 false로 되어있음
//user가 추가될때마다 createdAt(만들어진 시간 저장)과 updatedAt(수정될때 시간이 변경되어 저장)가 추가되어 시간을 저장함.
}) })
export default mongoose.models.User || mongoose.model('User', UserSchema) export default mongoose.models.User || mongoose.model('User', UserSchema)
//user라는 이름이 있으면 앞을 return하고 없으면 뒤를 실행함
server/routes/auth.routes.js
View file @ f7b7d734
...@@ -10,11 +10,6 @@ router.route('/auth/login') ...@@ -10,11 +10,6 @@ router.route('/auth/login')
router.route('/auth/logout') router.route('/auth/logout')
.get(authCtrl.logout) .get(authCtrl.logout)
// /api/users/signup로 들어오는 것을 post (method) 를 통해 useCtrl.signup 이것이 처리함
//browser에서 주소창에 치고 들어가면 get (method) 을 타고 들어간것임
//post를 띄우고 싶으면 앱에서 ARC실행해서 post를 실행하게 만들면됨.
//객체에 접근할때는 .을 찍고 접근함/ ex) .hello
//express middleware : (req, res) => {}
//node(req(client의 정보), res)를 넘겨줌.
export default router export default router
\ No newline at end of file
server/server.js
View file @ f7b7d734
...@@ -33,13 +33,7 @@ io.on("connection", (socket) => { // 기본 연결 ...@@ -33,13 +33,7 @@ io.on("connection", (socket) => { // 기본 연결
let roomInfo = data; let roomInfo = data;
socket.leave(roomInfo); //클라이언트에서 data에 적힌 room정보를 브로드캐스팅 받지 않는다. socket.leave(roomInfo); //클라이언트에서 data에 적힌 room정보를 브로드캐스팅 받지 않는다.
}); });
socket.on('newUser', (data) => {
// console.log('newUser', data)
let userInfo = data.userInfo;
io.to(data.rmIf).emit('sendUser', userInfo)
})
socket.on('chat', async (data) => { socket.on('chat', async (data) => {
// console.log('roomname확인', data) // console.log('roomname확인', data)
const room = await Room.findOne({ roomId: data.roomInfo }) const room = await Room.findOne({ roomId: data.roomInfo })
...@@ -76,4 +70,4 @@ server.listen(3030, () => { ...@@ -76,4 +70,4 @@ server.listen(3030, () => {
}) })
export default server export default server
// module.exports = server; // module.exports = server;
\ 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