Skip to content

GitLab

Commit 174f88d0 authored by 우지원's avatar 우지원
Browse files

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

parents 8abb9799 a09f29f3
Hide whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ 174f88d0
...@@ -89,7 +89,7 @@ function Chat(props) { ...@@ -89,7 +89,7 @@ function Chat(props) {
<Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}> <Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", 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: "#FFD75F", height: "80px", margin: "1%" }}>
<Col md="auto"> <Col md="auto">
<Button variant="light" onClick={props.handleChatc} >{`<`}</Button> <Button variant="light" onClick={handleClick} >{`<`}</Button>
</Col> </Col>
<Col> <Col>
<Row style={{ fontWeight: "bold", fontSize: "x-large" }}> {roomName} </Row> <Row style={{ fontWeight: "bold", fontSize: "x-large" }}> {roomName} </Row>
...@@ -130,8 +130,6 @@ function Chat(props) { ...@@ -130,8 +130,6 @@ function Chat(props) {
}) })
} }
<Button variant="light" onClick={handleClick} >{`<`}</Button>
</Container > </Container >
<Form onSubmit={sendMsgCH} fluid> <Form onSubmit={sendMsgCH} fluid>
<Form.Group className='d-flex flex-wrap-nowrap justify-content-center m-3'> <Form.Group className='d-flex flex-wrap-nowrap justify-content-center m-3'>
......
client/src/Pages/HomePage.js
View file @ 174f88d0
...@@ -14,143 +14,157 @@ import axios from 'axios'; ...@@ -14,143 +14,157 @@ import axios from 'axios';
const socket = io(); const socket = io();
const INIT_ROOM = { const INIT_ROOM = {
roomName: '', roomName: '',
interest: '', interest: '',
roomId: '', roomId: '',
member: '', member: '',
} }
function Home() { function Home() {
const userName = sessionStorage.getItem('name') const userName = sessionStorage.getItem('name')
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [showEnter, setShowEnter] = useState(false); const [showEnter, setShowEnter] = useState(false);
const [chat, setChat] = useState(false); const [chat, setChat] = useState(false);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [room, setRoom] = useState(INIT_ROOM) const [room, setRoom] = useState(INIT_ROOM)
const [show, setShow] = useState(false) const [show, setShow] = useState(false)
//소켓 //소켓
const [singleChat, setSingleChat] = useState('') const [singleChat, setSingleChat] = useState('')
const [recievedMsg, setRecievedMsg] = useState('') const [recievedMsg, setRecievedMsg] = useState('')
const [roomCode, setRoomCode] = useState('') const [roomCode, setRoomCode] = useState('')
const [newUser, setNewUser] = useState('') const [newUser, setNewUser] = useState('')
const [singleUser, setSingleUser] = useState('') const [singleUser, setSingleUser] = useState('')
const [recievedUser, setRecievedUser] = useState('') const [recievedUser, setRecievedUser] = useState('')
const [singleImg, setSingleImg] = useState('') const [singleImg, setSingleImg] = useState('')
const [recievedImg, setRecievedImg] = useState('') const [recievedImg, setRecievedImg] = useState('')
//SOCKET 관련 시작 //SOCKET 관련 시작
function enterChatRoom(rCode) { //방 입장하기 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 })
console.log(`joinRoom : ${rCode} 입장`) console.log(`joinRoom : ${rCode} 입장`)
}
const [roomName, setRoomName] = useState('')
const handleCloseModal = () => setShowModal(false);
const handleShowModal = () => setShowModal(true);
const handleCloseEnter = () => setShowEnter(false);
const handleShowEnter = () => setShowEnter(true);
const handleChato = () => setChat(true);
const handleChatc = () => setChat(false);
socket.on("sendUser", (data) => {
setNewUser(data)
})
//오픈채팅방에서 참가하기
async function openListroom(roomId) {
console.log(roomId)
const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } })
console.log(roomInf)
console.log(roomInf.data)
console.log(roomInf.data[0])
setRoom(roomInf.data[0])
setOpen(true)
setShow(false)
}
async function attendListRoom() {
const userId = sessionStorage.getItem('userId'); //sessionStorage에 저장된 userId가져옴
const roomId = room.roomId
const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
if (tf.data) {
alert('참가되었습니다.')
} else {
alert('이미 참가된 방입니다.')
} }
const [roomName, setRoomName] = useState('') }
const handleCloseModal = () => setShowModal(false); function enterButton() {
const handleShowModal = () => setShowModal(true); setOpen(false)
const handleCloseEnter = () => setShowEnter(false); }
const handleShowEnter = () => setShowEnter(true); const sendMsg = (e) => {
const handleChato = () => setChat(true); e.preventDefault()
const handleChatc = () => setChat(false); }
socket.on("sendUser", (data) => {
setNewUser(data) useEffect(() => {
}) if (!(singleChat == '')) {
socket.emit("chat", {
//오픈채팅방에서 참가하기 roomInfo: roomCode,
async function openListroom(roomId) { sendInfo: {
console.log(roomId) msg: singleChat,
const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } }) sender: singleUser,
console.log(roomInf) img: singleImg
console.log(roomInf.data)
console.log(roomInf.data[0])
setRoom(roomInf.data[0])
setOpen(true)
setShow(false)
}
async function attendListRoom() {
const userId = sessionStorage.getItem('userId'); //sessionStorage에 저장된 userId가져옴
const roomId = room.roomId
const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
if (tf.data) {
alert('참가되었습니다.')
} else {
alert('이미 참가된 방입니다.')
} }
})
setSingleChat([''])
} }
}, [singleChat])
function enterButton() {
setOpen(false)
}
const sendMsg = (e) => {
e.preventDefault()
}
useEffect(() => { useEffect(() => {
socket.on("sendedMSG", (sendInfo) => { socket.on("sendedMSG", (sendInfo) => {
setRecievedImg(sendInfo.img) setRecievedImg(sendInfo.img)
setRecievedUser(sendInfo.sender) setRecievedUser(sendInfo.sender)
setRecievedMsg(sendInfo.msg) setRecievedMsg(sendInfo.msg)
}) })
}, []) }, [])
return ( return (
<> <>
<Menu /> <Menu />
<Row className="mr-0"> <Row className="mr-0">
<Col className="list" md={5}> <Col className="list" md={5}>
<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 enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} /> <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
</Tab> </Tab>
<Tab eventKey="open" title="공개방" onClick={handleChato}> <Tab eventKey="open" title="공개방" onClick={handleChatc}>
<OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} /> <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
</Tab> </Tab>
</Tabs> </Tabs>
</Col> </Col>
<Col style={{ padding: "0" }}> <Col style={{ padding: "0" }}>
<> <>
{(show || chat) ? {(show || chat) ?
null 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 variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
<Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button> <Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
</div> </div>
} }
{chat ? {chat ?
<Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} roomName={roomName} /> <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} roomCode={roomCode} roomName={roomName} />
: null} : null}
{open ? {open ?
<div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark"> <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 shadow w-75">
<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>
<Row className='justify-content-center'> <Row className='justify-content-center'>
<Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button> <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> <Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
</Row> </Row>
</div> </div>
</div> </div>
</div> </div>
: null} : null}
</> </>
</Col> </Col>
</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} /> <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
</> </>
); );
} }
export default Home export default Home;
\ No newline at end of file
server/controllers/room.controller.js
View file @ 174f88d0
...@@ -39,7 +39,7 @@ const makeRoom = async (req, res) => { ...@@ -39,7 +39,7 @@ const makeRoom = async (req, res) => {
const getClosedList = async (req, res) => { const getClosedList = async (req, res) => {
try { try {
console.log('req확인', req.query._id) console.log('req확인', req.query._id)
let list = await Room.find({ member: [req.query._id] }) let list = await Room.find({ member: req.query._id })
console.log('c_list가져오기', list) console.log('c_list가져오기', list)
return res.json(list) return res.json(list)
} catch (error) { } catch (error) {
...@@ -50,7 +50,7 @@ const getClosedList = async (req, res) => { ...@@ -50,7 +50,7 @@ const getClosedList = async (req, res) => {
const getOpenList = async (req, res) => { const getOpenList = async (req, res) => {
try { try {
let list = await Room.find({ isOpen: true }) let list = await Room.find({ isOpen: true })
console.log('o_list가져오기', list.roomName) console.log('o_list가져오기', list)
return res.json(list) return res.json(list)
} catch (error) { } catch (error) {
res.status(500).send('리스트 불러오기를 실패하였습니다!') res.status(500).send('리스트 불러오기를 실패하였습니다!')
......
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