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

.gitignore

 node_modules
 package-lock.json
-
-uploads
\ No newline at end of file

client/src/Components/Chat.js

@@ -4,12 +4,16 @@ import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap';
 import { isAuthenticated } from '../utils/auth';
 import catchErrors from '../utils/catchErrors';
 
-
 function Chat(props) {
   // let defaultname = sessionStorage.getItem('name');
 
+  const [sender, setSender] = useState([])
+
   const [inner, setInner] = useState([''])
   const [chat, setChat] = useState([])   //object로 key는 보낸사람 value는 메세지
+
+  const [img, setImg] = useState([])
+
   const [disabled, setDisabled] = useState(true)
   const [user, setUser] = useState('')
   const [error, setError] = useState('');
@@ -28,17 +32,20 @@ function Chat(props) {
   function handleChange(e) {
     e.preventDefault()
     setInner(e.target.value)
-    console.log(e.target.value)
     setDisabled(false)
   }
 
   function sendMsgCH(e) {
     e.preventDefault()
+
+    props.setSingleImg(user.profileimg)
+    props.setSingleUser(user.nickname)
+    // props.setSingleUser(sessionStorage.getItem('name'))
     props.setSingleChat(inner)
+
     props.sendMsg(e)
     setInner('')
     setDisabled(true)
-    console.log(chat)
   }
 
   function handleClick(e) {
@@ -51,80 +58,69 @@ function Chat(props) {
   }, [userId])
 
   useEffect(() => {
+    setImg([...img, props.singleImg])
+    setSender([...sender, props.singleUser])
     setChat([...chat, props.singleChat])
-    console.log('UseEffect singlechat', chat)
-    // check()
   }, [props.singleChat])
 
   useEffect(() => {
+    setImg([...img, props.recievedImg])
+    setSender([...sender, props.recievedUser])
     setChat([...chat, props.recievedMsg])
-    console.log('UseEffect recievechat', chat)
   }, [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()
   return (
-    <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
+    <>
+      <Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
         <h2>해당 방에 대한 참여코드는 {props.roomCode} 입니다.</h2>
         <p>{props.newUser}님이 입장하셨습니다.</p>
         {chat.map((value, index) => {
           if (!(value == '')) {
+            if (!(sender[index] === user.nickname)) {
               return (
-            <Row key={index} className='m-1 ml-3' >
+                <Row key={index} className='m-1' >
                   <Col xs={2}>
-                {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 />}
+                    <Image src={img && `/images/${img[index]}`} style={{ width: "50px", height: "50px" }} roundedCircle />
                   </Col>
                   <Col xs={8}>
-                <Row><strong>{user.nickname}의 {index}</strong></Row>
+                    <Row><strong>{sender[index]}</strong></Row>
                     <Row className='d-flex flex-wrap-nowrap'>
-                  <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>
-                  <Col className='ml-4'>{new Date().toLocaleTimeString()}</Col>
+                      <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>
               )
             } else {
-          return null
-        }
-
-      })
-      }
-      {/* 내가 보낸 메세지 띄우기 */}
-      {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 key={index} className='m-1 justify-content-end'>
+                  <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={handleClick} >{`<`}</Button>
-      <Form onSubmit={sendMsgCH}>
-        <Form.Group className='d-flex flex-wrap-nowrap justify-content-center ml-2 mr-2'>
+
+        <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
+
+
+      </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>
-    </div >
+    </>
 
 
   );
@@ -132,3 +128,4 @@ function Chat(props) {
 
 
 export default Chat;
+

client/src/Pages/HomePage.js

@@ -25,16 +25,12 @@ function Home() {
   const [roomCode, setRoomCode] = useState('')
   const [newUser, setNewUser] = useState('')
 
-    //방참가
+  const [singleUser, setSingleUser] = useState('')
+  const [recievedUser, setRecievedUser] = useState('')
 
-    const [roomName, setRoomName] = useState('')
+  const [singleImg, setSingleImg] = useState('')
+  const [recievedImg, setRecievedImg] = useState('')
 
-    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 관련 시작
   function enterChatRoom(rCode) {    //방 입장하기
@@ -42,10 +38,14 @@ function Home() {
     socket.emit('newUser', { rmIf: rCode, userInfo: userName })
     console.log(`joinRoom : ${rCode} 입장`)
   }
+  const [roomName, setRoomName] = useState('')
 
-    const sendMsg = (e) => {
-        e.preventDefault()
-    }
+  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)
@@ -55,8 +55,11 @@ function Home() {
     if (!(singleChat == '')) {
       socket.emit("chat", {
         roomInfo: roomCode,
-                username: userName,
+        sendInfo: {
           msg: singleChat,
+          sender: singleUser,
+          img: singleImg
+        }
       })
       setSingleChat([''])
     }
@@ -65,8 +68,9 @@ function Home() {
 
   useEffect(() => {
     socket.on("sendedMSG", (msg) => {
-            console.log('msg',msg)
-            setRecievedMsg(msg)
+      setRecievedImg(sendInfo.img)
+      setRecievedUser(sendInfo.sender)
+      setRecievedMsg(sendInfo.msg)
     })
   }, [])
 
@@ -86,7 +90,7 @@ function Home() {
         </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" }}>
+          {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>
               생성
                         </Button>

client/src/Pages/ProfilePage.js

@@ -6,7 +6,6 @@ import axios from 'axios'
 import catchErrors from '../utils/catchErrors'
 import { isAuthenticated } from '../utils/auth';
 
-
 const INIT_USER = {
     username: '',
     email: '',
@@ -83,7 +82,7 @@ function ProfilePage() {
                 <Row >
                     <Col sm={4}>
                         <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 className='ml-3 mt-3 justify-content-center'>
                             <Form className="d-flex">

server/models/User.js

@@ -30,7 +30,8 @@ const UserSchema = new mongoose.Schema({
         //플러스 옵션을 주면 찾을 수 있음(mongoose에서 용법찾아봐야됨)
     },
     profileimg: {
-        type: String
+        type: String,
+        default : '3cd14b9bcb2007f324fcb82e0b566cce',
     },
 }, {
     //옵셥을 정의함.

server/routes/user.routes.js

@@ -14,4 +14,6 @@ router.route(`/users/:userId`)
 
 router.param('userId', userCtrl.userById)
 
+
+
 export default router
\ No newline at end of file

server/server.js

@@ -42,8 +42,8 @@ io.on("connection", (socket) => { // 기본 연결
 
     const chat = await new Chat({
       room: room._id,
-      username: data.username,
-      message: data.msg
+      username: data.sendInfo.sender,
+      message: data.sendInfo.msg
     }).save()
     console.log('resChat확인', chat)