Skip to content

GitLab

Commit e9b2bd86 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

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

parents ffa2f2f0 0c3abc4c
Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ e9b2bd86
node_modules node_modules
package-lock.json package-lock.json
uploads
\ No newline at end of file
client/src/Components/Chat.js
View file @ e9b2bd86
...@@ -4,12 +4,16 @@ import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap'; ...@@ -4,12 +4,16 @@ 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';
function Chat(props) { function Chat(props) {
// let defaultname = sessionStorage.getItem('name'); // let defaultname = sessionStorage.getItem('name');
const [sender, setSender] = useState([])
const [inner, setInner] = useState(['']) const [inner, setInner] = useState([''])
const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지 const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지
const [img, setImg] = useState([])
const [disabled, setDisabled] = useState(true) const [disabled, setDisabled] = useState(true)
const [user, setUser] = useState('') const [user, setUser] = useState('')
const [error, setError] = useState(''); const [error, setError] = useState('');
...@@ -28,17 +32,20 @@ function Chat(props) { ...@@ -28,17 +32,20 @@ function Chat(props) {
function handleChange(e) { function handleChange(e) {
e.preventDefault() e.preventDefault()
setInner(e.target.value) setInner(e.target.value)
console.log(e.target.value)
setDisabled(false) setDisabled(false)
} }
function sendMsgCH(e) { function sendMsgCH(e) {
e.preventDefault() e.preventDefault()
props.setSingleImg(user.profileimg)
props.setSingleUser(user.nickname)
// props.setSingleUser(sessionStorage.getItem('name'))
props.setSingleChat(inner) props.setSingleChat(inner)
props.sendMsg(e) props.sendMsg(e)
setInner('') setInner('')
setDisabled(true) setDisabled(true)
console.log(chat)
} }
function handleClick(e) { function handleClick(e) {
...@@ -51,80 +58,69 @@ function Chat(props) { ...@@ -51,80 +58,69 @@ function Chat(props) {
}, [userId]) }, [userId])
useEffect(() => { useEffect(() => {
setImg([...img, props.singleImg])
setSender([...sender, props.singleUser])
setChat([...chat, props.singleChat]) setChat([...chat, props.singleChat])
console.log('UseEffect singlechat', chat)
// check()
}, [props.singleChat]) }, [props.singleChat])
useEffect(() => { useEffect(() => {
setImg([...img, props.recievedImg])
setSender([...sender, props.recievedUser])
setChat([...chat, props.recievedMsg]) setChat([...chat, props.recievedMsg])
console.log('UseEffect recievechat', chat)
}, [props.recievedMsg]) }, [props.recievedMsg])
// function check() {
// // if (chat[chat.length-1].user ===chat[chat.length-2].user){ //마지막보낸거랑 그 전꺼랑 보낸사람이 같은지 비교
// if (chat.length === 2) {
// setHidden(false)
// } else {
// setHidden(true)
// }
// console.log(hidden)
// }
const time = new Date().toLocaleTimeString() const time = new Date().toLocaleTimeString()
return ( return (
<div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD", background: '' }}> <>
<h2>해당 방에 대한 참여코드는 {props.roomCode} 입니다.</h2> <Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
<p>{props.newUser}님이 입장하셨습니다.</p> <h2>해당 방에 대한 참여코드는 {props.roomCode} 입니다.</h2>
{chat.map((value, index) => { <p>{props.newUser}님이 입장하셨습니다.</p>
if (!(value == '')) { {chat.map((value, index) => {
return ( if (!(value == '')) {
<Row key={index} className='m-1 ml-3' > if (!(sender[index] === user.nickname)) {
<Col xs={2}> return (
{user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "50px", height: "50px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "50px", height: "50px" }} roundedCircle />} <Row key={index} className='m-1' >
</Col> <Col xs={2}>
<Col xs={8}> <Image src={img && `/images/${img[index]}`} style={{ width: "50px", height: "50px" }} roundedCircle />
<Row><strong>{user.nickname}의 {index}</strong></Row> </Col>
<Row className='d-flex flex-wrap-nowrap'> <Col xs={8}>
<Col className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Col> <Row><strong>{sender[index]}</strong></Row>
<Col className='ml-4'>{new Date().toLocaleTimeString()}</Col> <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}</Row>
<Col className='ml-1'>{time}</Col>
</Row>
</Col>
</Row> </Row>
</Col> )
</Row> } else {
) return (
} else { <Row key={index} className='m-1 justify-content-end'>
return null <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>
)
}
} else {
return null
}
})
} }
}) <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
}
{/* 내가 보낸 메세지 띄우기 */}
{chat.map((value, index) => {
if (!(value == '')) {
return (
<Row key={index} className='m-1 mr-4 justify-content-end'>
<div className='d-flex flex-wrap-nowrap' >
<Row className='mr-4'>{time}</Row>
<Row style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
</div>
</Row>
)
} else {
return null
}
})
}
<Button variant="light" onClick={handleClick} >{`<`}</Button>
<Form onSubmit={sendMsgCH}>
<Form.Group className='d-flex flex-wrap-nowrap justify-content-center ml-2 mr-2'>
<Form.Control className='border border-warning' name='chat' type="text" value={inner} onChange={handleChange} style={{ width: '85%' }} />
<Button variant="warning" type="submit" disabled={disabled} style={{ width: '10%' }}>
전송
</Button>
</Form.Group>
</Form>
</div > </Container >
<Form onSubmit={sendMsgCH} fluid>
<Form.Group className='d-flex flex-wrap-nowrap justify-content-center m-3'>
<Form.Control className='border border-warning' name='chat' type="text" value={inner} onChange={handleChange} style={{ width: '85%' }} />
<Button variant="warning" type="submit" disabled={disabled} style={{ width: '10%' }}>
전송
</Button>
</Form.Group>
</Form>
</>
); );
...@@ -132,3 +128,4 @@ function Chat(props) { ...@@ -132,3 +128,4 @@ function Chat(props) {
export default Chat; export default Chat;
client/src/Pages/HomePage.js
View file @ e9b2bd86
...@@ -13,94 +13,98 @@ import EnterRoom from "../Components/EnterRoom" ...@@ -13,94 +13,98 @@ import EnterRoom from "../Components/EnterRoom"
const socket = io(); const socket = io();
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, setEnter] = useState(false); const [showEnter, setEnter] = useState(false);
const [chat, setChat] = useState(false); const [chat, setChat] = 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 [recievedUser, setRecievedUser] = useState('')
const [roomName, setRoomName] = useState('')
const [singleImg, setSingleImg] = useState('')
const handleCloseModal = () => setShowModal(false); const [recievedImg, setRecievedImg] = useState('')
const handleShowModal = () => setShowModal(true);
const handleCloseEnter = () => setEnter(false);
const handleShowEnter = () => setEnter(true); //SOCKET 관련 시작
const handleChato = () => setChat(true); function enterChatRoom(rCode) { //방 입장하기
const handleChatc = () => setChat(false); socket.emit('joinRoom', rCode)
socket.emit('newUser', { rmIf: rCode, userInfo: userName })
//SOCKET 관련 시작 console.log(`joinRoom : ${rCode} 입장`)
function enterChatRoom(rCode) { //방 입장하기 }
socket.emit('joinRoom', rCode) const [roomName, setRoomName] = useState('')
socket.emit('newUser', { rmIf: rCode, userInfo: userName })
console.log(`joinRoom : ${rCode} 입장`) const handleCloseModal = () => setShowModal(false);
const handleShowModal = () => setShowModal(true);
const handleCloseEnter = () => setEnter(false);
const handleShowEnter = () => setEnter(true);
const handleChato = () => setChat(true);
const handleChatc = () => setChat(false);
socket.on("sendUser", (data) => {
setNewUser(data)
})
useEffect(() => {
if (!(singleChat == '')) {
socket.emit("chat", {
roomInfo: roomCode,
sendInfo: {
msg: singleChat,
sender: singleUser,
img: singleImg
}
})
setSingleChat([''])
} }
}, [singleChat])
const sendMsg = (e) => {
e.preventDefault()
}
socket.on("sendUser", (data) => { useEffect(() => {
setNewUser(data) socket.on("sendedMSG", (msg) => {
setRecievedImg(sendInfo.img)
setRecievedUser(sendInfo.sender)
setRecievedMsg(sendInfo.msg)
}) })
}, [])
useEffect(() => {
if (!(singleChat == '')) { return (
socket.emit("chat", { <>
roomInfo: roomCode, <Menu />
username: userName, <Row className="mr-0">
msg: singleChat, <Col className="list" md={5}>
}) <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
setSingleChat(['']) <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
} <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
}, [singleChat]) </Tab>
<Tab eventKey="open" title="공개방" onClick={handleChato}>
<OpenList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
useEffect(() => { </Tab>
socket.on("sendedMSG", (msg) => { </Tabs>
console.log('msg',msg) </Col>
setRecievedMsg(msg) <Col style={{ padding: "0" }}>
})
}, []) {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} newUser={newUser} setSingleChat={setSingleChat} roomCode={roomCode} singleImg={singleImg} setSingleImg={setSingleImg} recievedImg={recievedImg} singleUser={singleUser} setSingleUser={setSingleUser} recievedUser={recievedUser} /> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShowModal} size="lg" block>
return ( 생성
<>
<Menu />
<Row className="mr-0">
<Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
<ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
</Tab>
<Tab eventKey="open" title="공개방" onClick={handleChato}>
<OpenList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
</Tab>
</Tabs>
</Col>
<Col style={{ padding: "0" }}>
{chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} newUser={newUser} setSingleChat={setSingleChat} roomCode={roomCode} /> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShowModal} size="lg" block>
생성
</Button> </Button>
<Button variant="secondary" onClick={handleShowEnter} size="lg" block> <Button variant="secondary" onClick={handleShowEnter} size="lg" block>
참가 참가
</Button> </Button>
</div>} </div>}
</Col> </Col>
</Row> </Row>
<RoomMake showModal={showModal} handleCloseModal={handleCloseModal} /> <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
<EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomName={setRoomName} /> <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomName={setRoomName} />
</> </>
); );
} }
export default Home; export default Home;
......
client/src/Pages/ProfilePage.js
View file @ e9b2bd86
...@@ -6,7 +6,6 @@ import axios from 'axios' ...@@ -6,7 +6,6 @@ import axios from 'axios'
import catchErrors from '../utils/catchErrors' import catchErrors from '../utils/catchErrors'
import { isAuthenticated } from '../utils/auth'; import { isAuthenticated } from '../utils/auth';
const INIT_USER = { const INIT_USER = {
username: '', username: '',
email: '', email: '',
...@@ -83,8 +82,8 @@ function ProfilePage() { ...@@ -83,8 +82,8 @@ function ProfilePage() {
<Row > <Row >
<Col sm={4}> <Col sm={4}>
<Row className='justify-content-center'> <Row className='justify-content-center'>
{user.profileimg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle /> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />} <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle />
</Row> </Row>
<Row className='ml-3 mt-3 justify-content-center'> <Row className='ml-3 mt-3 justify-content-center'>
<Form className="d-flex"> <Form className="d-flex">
<Form.Group> <Form.Group>
......
server/models/User.js
View file @ e9b2bd86
...@@ -30,7 +30,8 @@ const UserSchema = new mongoose.Schema({ ...@@ -30,7 +30,8 @@ const UserSchema = new mongoose.Schema({
//플러스 옵션을 주면 찾을 수 있음(mongoose에서 용법찾아봐야됨) //플러스 옵션을 주면 찾을 수 있음(mongoose에서 용법찾아봐야됨)
}, },
profileimg: { profileimg: {
type: String type: String,
default : '3cd14b9bcb2007f324fcb82e0b566cce',
}, },
}, { }, {
//옵셥을 정의함. //옵셥을 정의함.
......
server/routes/user.routes.js
View file @ e9b2bd86
...@@ -10,8 +10,10 @@ router.route('/users/signup') ...@@ -10,8 +10,10 @@ router.route('/users/signup')
router.route(`/users/:userId`) router.route(`/users/:userId`)
.get(userCtrl.getProfile) .get(userCtrl.getProfile)
.put(userCtrl.profileUpload, userCtrl.update) .put(userCtrl.profileUpload, userCtrl.update)
router.param('userId', userCtrl.userById) router.param('userId', userCtrl.userById)
export default router export default router
\ No newline at end of file
server/server.js
View file @ e9b2bd86
...@@ -42,8 +42,8 @@ io.on("connection", (socket) => { // 기본 연결 ...@@ -42,8 +42,8 @@ io.on("connection", (socket) => { // 기본 연결
const chat = await new Chat({ const chat = await new Chat({
room: room._id, room: room._id,
username: data.username, username: data.sendInfo.sender,
message: data.msg message: data.sendInfo.msg
}).save() }).save()
console.log('resChat확인', chat) console.log('resChat확인', chat)
......
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