새로운 유저

client/src/Components/Chat.js

@@ -14,6 +14,7 @@ function Chat(props) {
   const [user, setUser] = useState('')
   const [error, setError] = useState('');
   
+
   const userId = isAuthenticated()
   async function getProfile(userId) {
     try {
@@ -74,7 +75,7 @@ function Chat(props) {
   return (
     <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
       <h2>해당 방에 대한 참여코드는 {props.roomCode} 입니다.</h2>
-      {/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */}
+      <p>{props.newUser}님이 입장하셨습니다.</p>
       {chat.map((value, index) => {
         if (!(value == '')) {
           return (
@@ -94,6 +95,7 @@ function Chat(props) {
         } else {
           return null
         }
+
       })
       }
       {/* 내가 보낸 메세지 띄우기 */}
@@ -112,7 +114,6 @@ function Chat(props) {
         }
       })
       }
-
       <Button variant="light" onClick={handleClick} >{`<`}</Button>
       <Form onSubmit={sendMsgCH}>
         <Form.Group className='d-flex flex-wrap-nowrap justify-content-center ml-2 mr-2'>

client/src/Components/OpenList.js

@@ -16,6 +16,7 @@ function OpenList(props) {
 
 
   function enterChatRoomCH(e) {
+    console.log('e확인', e.target)
     const roomCode = e.target.name
     props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
     props.setRoomCode(roomCode)

client/src/Pages/HomePage.js

@@ -23,6 +23,7 @@ function Home() {
     const [singleChat, setSingleChat] = useState('')
     const [recievedMsg, setRecievedMsg] = useState('')
     const [roomCode, setRoomCode] = useState('')
+    const [newUser, setNewUser] = useState('')
 
     //방참가
 
@@ -35,11 +36,10 @@ function Home() {
     const handleChato = () => setChat(true);
     const handleChatc = () => setChat(false);
 
-
-
     //SOCKET 관련 시작
     function enterChatRoom(rCode) {    //방 입장하기
         socket.emit('joinRoom', rCode)
+        socket.emit('newUser', { rmIf: rCode, userInfo: userName })
         console.log(`joinRoom : ${rCode} 입장`)
     }
 
@@ -47,6 +47,10 @@ function Home() {
         e.preventDefault()
     }
 
+    socket.on("sendUser", (data) => {
+        setNewUser(data)
+    })
+
     useEffect(() => {
         if (!(singleChat == '')) {
             socket.emit("chat", {
@@ -61,7 +65,7 @@ function Home() {
 
     useEffect(() => {
         socket.on("sendedMSG", (msg) => {
-            console.log(msg)
+            console.log('msg',msg)
             setRecievedMsg(msg)
         })
     }, [])
@@ -82,7 +86,7 @@ function Home() {
                 </Col>
                 <Col style={{ padding: "0" }}>
 
-                    {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} /> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
+                    {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>

server/server.js

@@ -29,6 +29,12 @@ io.on("connection", (socket) => { // 기본 연결
     socket.join(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) => {
     console.log('roomname확인', data)
     const room = await Room.findOne({ roomId: data.roomInfo })