Commit 0bece6ad authored by Choi Ga Young's avatar Choi Ga Young
Browse files

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

parents 78b14ec0 dc646958
...@@ -7,7 +7,6 @@ import catchErrors from '../utils/catchErrors'; ...@@ -7,7 +7,6 @@ import catchErrors from '../utils/catchErrors';
function Chat(props) { function Chat(props) {
const [sender, setSender] = useState([]) const [sender, setSender] = useState([])
const [roomName, setRoomName] = useState('')
const [inner, setInner] = useState(['']) const [inner, setInner] = useState([''])
const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지 const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지
...@@ -21,7 +20,10 @@ function Chat(props) { ...@@ -21,7 +20,10 @@ function Chat(props) {
const [user, setUser] = useState('') const [user, setUser] = useState('')
const [error, setError] = useState(''); const [error, setError] = useState('');
const [exit, setExit] = useState(false);
const userId = isAuthenticated() const userId = isAuthenticated()
async function getProfile(userId) { async function getProfile(userId) {
try { try {
const response = await axios.get(`/users/${userId}`) const response = await axios.get(`/users/${userId}`)
...@@ -31,16 +33,6 @@ function Chat(props) { ...@@ -31,16 +33,6 @@ function Chat(props) {
} }
} }
async function getRoomName(roomCode) {
try {
let res = await axios.get('/room/getRoomName', { params: { 'roomCode': roomCode } })
console.log(res.data)
setRoomName(res.data)
} catch (error) {
catchErrors(error, setError)
}
}
function handleChange(e) { function handleChange(e) {
e.preventDefault() e.preventDefault()
setInner(e.target.value) setInner(e.target.value)
...@@ -61,11 +53,9 @@ function Chat(props) { ...@@ -61,11 +53,9 @@ function Chat(props) {
} }
function handleClick() { function handleClick() {
setChat([''])
props.closeChatRoom(props.roomCode)
props.setRecievedMsg('') props.setRecievedMsg('')
console.log('chat1', chat)
setChat(['초기화 '])
console.log('chat2', chat)
props.handleChatc() props.handleChatc()
props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }]) props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
console.log('나간시간', realTime, usualTime) console.log('나간시간', realTime, usualTime)
...@@ -132,6 +122,13 @@ function Chat(props) { ...@@ -132,6 +122,13 @@ function Chat(props) {
setTime(timelist) setTime(timelist)
} }
async function exitAndCloseRoom(){
props.exitRoom(props.roomCode)
setExit(false)
props.handleChatc()
}
useEffect(() => { useEffect(() => {
getProfile(userId) getProfile(userId)
}, [userId]) }, [userId])
...@@ -141,6 +138,8 @@ function Chat(props) { ...@@ -141,6 +138,8 @@ function Chat(props) {
setImg([...img, props.singleImg]) setImg([...img, props.singleImg])
setSender([...sender, props.singleUser]) setSender([...sender, props.singleUser])
setChat([...chat, props.singleChat]) setChat([...chat, props.singleChat])
console.log('chat', chat)
console.log('sender', sender)
}, [props.singleChat]) }, [props.singleChat])
useEffect(() => { useEffect(() => {
...@@ -159,20 +158,29 @@ function Chat(props) { ...@@ -159,20 +158,29 @@ function Chat(props) {
console.log('겟 룸네임', chat) console.log('겟 룸네임', chat)
}, [props.roomCode]) }, [props.roomCode])
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={{ 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="justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px" }}>
<Col md="auto"> <Col md="auto">
<Button variant="light" onClick={handleClick} >{`<`}</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" }}> {props.roomName} </Row>
<Row > {props.roomCode}</Row> <Row > {props.roomCode} </Row>
</Col>
<Col md="auto">
<Button variant="light" onClick={() => setExit(true)}>{'='}</Button>
</Col> </Col>
</Row> </Row>
{exit ?
<Row>
<Col>퇴장하시겠습니까?</Col>
<Col md="auto"><Button variant="light" onClick={exitAndCloseRoom}>{"나가기"}</Button></Col>
</Row>
: null}
<p>{props.newUser}님이 입장하셨습니다.</p>
{chat.map((value, index) => { {chat.map((value, index) => {
if (!(value == '')) { if (!(value == '')) {
if (!(sender[index] === user.nickname)) { if (!(sender[index] === user.nickname)) {
......
...@@ -21,11 +21,14 @@ function ClosedList(props) { ...@@ -21,11 +21,14 @@ function ClosedList(props) {
} }
function enterChatRoomCH(e) { function enterChatRoomCH(e) {
if (props.roomCode){
props.closeChatRoom(props.roomCode)
}
const roomCode = e.target.name const roomCode = e.target.name
const roomName = e.target.value const roomName = e.target.value
props.enterChatRoom(roomCode) props.enterChatRoom(roomCode)
props.setRoomCode(roomCode) props.setRoomCode(roomCode)
props.setRoomName(roomName)
} }
......
...@@ -17,6 +17,10 @@ function OpenList(props) { ...@@ -17,6 +17,10 @@ function OpenList(props) {
function enterChatRoomCH(e) { function enterChatRoomCH(e) {
if (props.roomCode){
props.closeChatRoom(props.roomCode)
}
console.log('e확인', e.target) console.log('e확인', e.target)
const roomCode = e.target.name const roomCode = e.target.name
// props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함 // props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
......
...@@ -34,6 +34,7 @@ function Home() { ...@@ -34,6 +34,7 @@ function Home() {
const [recievedMsg, setRecievedMsg] = useState('') const [recievedMsg, setRecievedMsg] = useState('')
const [roomCode, setRoomCode] = useState('') const [roomCode, setRoomCode] = useState('')
const [sysmsg, setSysmsg] = useState('') const [sysmsg, setSysmsg] = useState('')
const [roomName, setRoomName] = useState('')
const [singleUser, setSingleUser] = useState('') const [singleUser, setSingleUser] = useState('')
const [recievedUser, setRecievedUser] = useState('') const [recievedUser, setRecievedUser] = useState('')
...@@ -45,6 +46,12 @@ function Home() { ...@@ -45,6 +46,12 @@ function Home() {
const [recievedTime, setRecievedTime] = useState('') const [recievedTime, setRecievedTime] = useState('')
const [leaveInfo, setLeaveInfo] = useState(['']) const [leaveInfo, setLeaveInfo] = 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 관련 시작 //SOCKET 관련 시작
async function enterChatRoom(rCode) { //방 입장하기 async function enterChatRoom(rCode) { //방 입장하기
...@@ -55,21 +62,21 @@ function Home() { ...@@ -55,21 +62,21 @@ function Home() {
} }
const [roomName, setRoomName] = useState('') const [roomName, setRoomName] = useState('')
const handleCloseModal = () => setShowModal(false); function closeChatRoom(rCode) {
const handleShowModal = () => setShowModal(true); socket.emit('closeRoom', rCode)
const handleCloseEnter = () => setShowEnter(false); console.log(`${rCode}방 보기 중단`)
const handleShowEnter = () => setShowEnter(true); }
const handleChato = () => setChat(true);
const handleChatc = () => setChat(false);
async function exitRoom(roomId) {
await axios.put('/room/deleteMem', { userId: userId, roomId: roomId })
console.log(`${roomId}${userId} 탈퇴`)
setRoomCode("")
}
//오픈채팅방에서 참가하기 //오픈채팅방에서 참가하기
async function openListroom(roomId) { async function openListroom(roomId) {
console.log(roomId) console.log(roomId)
const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': 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]) setRoom(roomInf.data[0])
setOpen(true) setOpen(true)
setShow(false) setShow(false)
...@@ -95,9 +102,8 @@ function Home() { ...@@ -95,9 +102,8 @@ function Home() {
e.preventDefault() e.preventDefault()
} }
useEffect(() => { useEffect(() => {
if (!(singleChat == '')) { if (!(singleChat == "")){
socket.emit("chat", { socket.emit("chat", {
roomInfo: roomCode, roomInfo: roomCode,
sendInfo: { sendInfo: {
...@@ -107,7 +113,7 @@ function Home() { ...@@ -107,7 +113,7 @@ function Home() {
time: singleTime time: singleTime
} }
}) })
setSingleChat(['']) setSingleChat("")
} }
}, [singleChat]) }, [singleChat])
...@@ -132,6 +138,7 @@ function Home() { ...@@ -132,6 +138,7 @@ function Home() {
setRecievedImg(sendInfo.img) setRecievedImg(sendInfo.img)
setRecievedUser(sendInfo.sender) setRecievedUser(sendInfo.sender)
setRecievedMsg(sendInfo.msg) setRecievedMsg(sendInfo.msg)
console.log(sendInfo.msg)
}) })
}, []) }, [])
...@@ -140,12 +147,12 @@ function Home() { ...@@ -140,12 +147,12 @@ function Home() {
<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 leaveInfo={leaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} /> <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom}/>
</Tab> </Tab>
<Tab eventKey="open" title="공개방" onClick={handleChatc}> <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} closeChatRoom={closeChatRoom}/>
</Tab> </Tab>
</Tabs> </Tabs>
</Col> </Col>
...@@ -159,7 +166,7 @@ function Home() { ...@@ -159,7 +166,7 @@ function Home() {
</div> </div>
} }
{chat ? {chat ?
<Chat handleChatc={handleChatc} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} 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} /> <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} setSingleChat={setSingleChat} setRecievedMsg={setRecievedMsg} setSingleUser={setSingleUser} setSingleImg={setSingleImg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom}/>
: 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">
......
...@@ -41,7 +41,6 @@ const makeRoom = async (req, res) => { ...@@ -41,7 +41,6 @@ const makeRoom = async (req, res) => {
const getClosedList = async (req, res) => { const getClosedList = async (req, res) => {
try { try {
let list = await Room.find({ member: req.query._id }) let list = await Room.find({ member: req.query._id })
// console.log('c_list가져오기', list)
return res.json(list) return res.json(list)
} catch (error) { } catch (error) {
res.status(500).send('리스트 불러오기를 실패하였습니다!') res.status(500).send('리스트 불러오기를 실패하였습니다!')
...@@ -51,7 +50,6 @@ const getClosedList = async (req, res) => { ...@@ -51,7 +50,6 @@ 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)
return res.json(list) return res.json(list)
} catch (error) { } catch (error) {
res.status(500).send('리스트 불러오기를 실패하였습니다!') res.status(500).send('리스트 불러오기를 실패하였습니다!')
...@@ -110,6 +108,22 @@ const changemember = async (req, res) => { ...@@ -110,6 +108,22 @@ const changemember = async (req, res) => {
} }
} }
const deleteUserId = async (req, res) => {
console.log(req.body)
const { userId, roomId } = req.body
let room = await Room.findOne({ roomId: roomId }).select('member')
console.log('deletetest', room)
const memIndex = room.member.indexOf(userId)
try {
room.member.splice(memIndex, 1)
await Room.updateOne({ 'roomId': roomId }, { 'member': room.member })
console.log(`${roomId}${userId}삭제완료`)
return res.json(true)
} catch (error) {
res.status(500).send('멤버 업데이트 실패')
}
}
const roomInf = async (req, res) => { const roomInf = async (req, res) => {
try { try {
console.log(req.query.roomId) console.log(req.query.roomId)
...@@ -163,4 +177,4 @@ const roomInf = async (req, res) => { ...@@ -163,4 +177,4 @@ const roomInf = async (req, res) => {
// } // }
export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, roomInf } export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, deleteUserId, roomInf }
...@@ -31,4 +31,7 @@ router.route('/room/getRoomName') ...@@ -31,4 +31,7 @@ router.route('/room/getRoomName')
// router.route('/room/dbChat') // router.route('/room/dbChat')
// .get(roomCtrl.dbChat) // .get(roomCtrl.dbChat)
router.route('/room/deleteMem')
.put(roomCtrl.deleteUserId)
export default router export default router
...@@ -29,6 +29,18 @@ io.on("connection", (socket) => { // 기본 연결 ...@@ -29,6 +29,18 @@ io.on("connection", (socket) => { // 기본 연결
socket.join(roomInfo); //클라이언트에서 data에 적힌 room으로 참여시킴 socket.join(roomInfo); //클라이언트에서 data에 적힌 room으로 참여시킴
}); });
socket.on('closeRoom', (data) => {
console.log('close_data확인', data)
let roomInfo = data;
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 })
...@@ -48,7 +60,6 @@ io.on("connection", (socket) => { // 기본 연결 ...@@ -48,7 +60,6 @@ io.on("connection", (socket) => { // 기본 연결
socket.on('disconnect', () => { socket.on('disconnect', () => {
console.log('disconnected from server id=', socket.id) console.log('disconnected from server id=', socket.id)
}) })
}); });
app.use(bodyParser.json()); app.use(bodyParser.json());
......
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