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

.gitignore

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

client/src/Components/Chat.js

+import axios from 'axios';
 import React, { useState, useEffect } from 'react';
-import { Form, Button, Row } from 'react-bootstrap';
+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');
+  // let defaultname = sessionStorage.getItem('name');
 
   const [inner, setInner] = useState([''])
   const [chat, setChat] = useState([])   //object로 key는 보낸사람 value는 메세지
+  const [disabled, setDisabled] = useState(true)
+  const [user, setUser] = useState('')
+  const [error, setError] = useState('');
+
+  const userId = isAuthenticated()
+  async function getProfile(userId) {
+    try {
+      const response = await axios.get(`/users/${userId}`)
+      setUser(response.data)
+    } catch (error) {
+      catchErrors(error, setError)
+    }
+  }
 
   function handleChange(e) {
     e.preventDefault()
     setInner(e.target.value)
+    console.log(e.target.value)
+    setDisabled(false)
   }
 
   function sendMsgCH(e) {
@@ -18,40 +36,92 @@ function Chat(props) {
     props.setSingleChat(inner)
     props.sendMsg(e)
     setInner('')
+    setDisabled(true)
+    console.log(chat)
   }
+  useEffect(() => {
+    getProfile(userId)
+  }, [userId])
 
   useEffect(() => {
     setChat([...chat, props.singleChat])
+    console.log('UseEffect singlechat', chat)
+    // check()
   }, [props.singleChat])
 
   useEffect(() => {
     setChat([...chat, props.recievedMsg])
+    console.log('UseEffect recievechat', chat)
   }, [props.recievedMsg])
 
-  return (
 
-    <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
-      <h2>현재 {props.roomName} 입니다.</h2>
-      {      chat.map((value, index) => {
-        if (!(value=='')) {
-          // console.log(`value=${value}=`)
-          return <Row key={index} className='ml-3'>
-            {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
+  // 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: '' }}>
+      <h2>해당 방에 대한 참여코드는 {props.roomCode} 입니다.</h2>
+      {/* 상대방이 보낸 메세지 띄우기 + 같은유저면 프로필 이미지는 생략(chat을 object로 보낸사람과 함께 보내서 구분하자) */}
+      {chat.map((value, index) => {
+        if (!(value == '')) {
+          return (
+            <Row key={index} className='m-1 ml-3' >
+              <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 />}
+              </Col>
+              <Col xs={8}>
+                <Row><strong>{user.nickname}의 {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>
+              </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>
+          )
+        } else {
+          return null
+        }
+      })
+      }
+
+
+
+
+
       <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
       <Form onSubmit={sendMsgCH}>
-        <Form.Group>
-          <Form.Control name='chat' type="text" value={inner} onChange={handleChange} />
-        </Form.Group>
-        <Button variant="primary" type="submit">
+        <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>
+    </div >
 
 
   );

client/src/Components/ChatForm.js

-import React, { useState } from 'react';
-import { Form, Row, Col, Button } from 'react-bootstrap'
-
-function ChatForm(props) {
-    const INIT_SAYING = ''
-    const [saying, setSaying] = useState(INIT_SAYING);
-
-    function handleChange(event) {
-        const { name, value } = event.target
-        setSaying(value)
-        console.log(saying)
-    }
-
-    function handleSubmit(event) {
-        event.preventDefault()
-        // const response = await axios.post('chat/makeChat', chatR)
-        props.setSingleChat()
-        setSaying(INIT_SAYING)
-    }
-
-    return (
-        <Form onSubmit={handleSubmit}>
-            <Row>
-                <Col>
-                    <Form.Group>
-                        <Form.Control name='chat' type='text' onChange={handleChange}>chat</Form.Control>
-                    </Form.Group>
-                </Col>
-                <Col>
-                    <Form.Group>
-                        <Button type="submit">send</Button>
-                    </Form.Group>
-                </Col>
-            </Row>
-        </Form>
-    )
-}
-
-export default ChatForm
\ No newline at end of file

client/src/Components/ClosedList.js

 import React, { useState, useEffect } from 'react'
-import { ListGroup, Row, Col } from 'react-bootstrap';
+import { ListGroup } from 'react-bootstrap';
 import axios from 'axios'
 
 function ClosedList(props) {
@@ -10,32 +10,24 @@ function ClosedList(props) {
     getClosedList();
   }, []);
 
-  const userId = sessionStorage.getItem('userId');
-
   async function getClosedList() {
     const userid = sessionStorage.getItem('userId')
-    console.log('id가져오기', userid)
     let res = await axios.get('/room/closedlist', { params: { '_id': userid } })
-    console.log('가져온거', res)
     setList(res.data)
   }
 
   function enterChatRoomCH(e) {
-    console.log(e.target.name)
-    console.log(e.target)
-    const roomName = e.target.name
-    props.enterChatRoom(roomName) // 각각의 room으로 들어가도록 설정해야 함
-    props.setRoomName(roomName)
+    const roomCode = e.target.name
+    props.enterChatRoom(roomCode)
+    props.setRoomCode(roomCode)
 
   }
 
-  //user.hasOwnProperty('이름');
-
   return (
     <div>
       {list.map((item, index) =>
         <ListGroup key={index}>
-          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomName}>
+          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}>
             {item.roomName}
           </ListGroup.Item>
         </ListGroup>

client/src/Components/EnterRoom.js

 import React, { useState } from 'react'
 import axios from 'axios';
-import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
+import { Row, Col, Modal, Button, Form } from 'react-bootstrap';
 import catchErrors from '../utils/catchErrors'
 
 

client/src/Components/OpenList.js

@@ -11,15 +11,14 @@ function OpenList(props) {
 
   async function getOpenList() {
     let res = await axios.get('/room/openlist')
-    console.log('가져온거o', res)
     setOpenlist(res.data)
   }
 
 
   function enterChatRoomCH(e) {
-    const roomName = e.target.name
-    props.enterChatRoom(roomName) // 각각의 room으로 들어가도록 설정해야 함
-    props.setRoomName(roomName)
+    const roomCode = e.target.name
+    props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
+    props.setRoomCode(roomCode)
     // props.clearChat()
   }
 
@@ -27,7 +26,7 @@ function OpenList(props) {
     <div>
       {openlist.map((item, index) =>
         <ListGroup key={index}>
-          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomName}>
+          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}>
             {item.roomName}
           </ListGroup.Item>
         </ListGroup>

client/src/Components/PrivateRoute.js

-//로그인 한 사람만 route로 이동할 수 있도록 함
 import React from 'react'
 import { Redirect, Route } from 'react-router-dom'
 import { isAuthenticated } from '../utils/auth'
 
 function PrivateRoute({path, children}) {
     if (isAuthenticated()) {
-        //로그인이 됬을 시 정상적으로 작동
         return (
             <Route path={path}>
                 {children}
             </Route>
         )
     } else {
-        //로그인이 되지 않았을 시 로그인페이지로 이동
         return (
             <Redirect to='./login' />
         )

client/src/Pages/HomePage.js

@@ -20,9 +20,12 @@ function Home() {
     //소켓
     const [singleChat, setSingleChat] = useState('')
     const [recievedMsg, setRecievedMsg] = useState('')
-    const [roomName, setRoomName] = useState('')
     const [roomCode, setRoomCode] = useState('')
 
+    //방참가
+
+    const [roomName, setRoomName] = useState('')
+
     const handleCloseModal = () => setShowModal(false);
     const handleShowModal = () => setShowModal(true);
     const handleCloseEnter = () => setEnter(false);
@@ -45,7 +48,7 @@ function Home() {
     useEffect(() => {
         if (!(singleChat == '')) {
             socket.emit("chat", {
-                roomName: roomCode,
+                roomInfo: roomCode,
                 msg: singleChat
             })
             setSingleChat([''])
@@ -67,15 +70,15 @@ function Home() {
                 <Col className="list" md={5}>
                     <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
                         <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-                            <ClosedList enterChatRoom={enterChatRoom} setRoomName={setRoomName}/>
+                            <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} />
                         </Tab>
-                        <Tab eventKey="open" title="공개방" >
-                            <OpenList enterChatRoom={enterChatRoom} setRoomName={setRoomName}/>
+                        <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} setSingleChat={setSingleChat} roomName={roomName} /> : null}
+                    {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} /> : null}
 
                     <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
                         <Button variant="primary" onClick={handleShowModal} size="lg" block>

client/src/Pages/ProfilePage.js

 import React, { useState, useEffect } from 'react'
 import Menu from '../Components/Menu';
-import { Image, Button, Container, Form, Row, Col, Dropdown } from 'react-bootstrap';
+import { Image, Button, Container, Form, Row, Col } from 'react-bootstrap';
 import { BrowserRouter as Link } from 'react-router-dom';
 import axios from 'axios'
 import catchErrors from '../utils/catchErrors'
@@ -76,20 +76,6 @@ function ProfilePage() {
         getProfile(userId)
     }, [userId])
 
-
-    //     const [img, setImg] = useState('')
-    // function bbb(e) {
-    //     const { name } = e.target
-    //     let reader = new FileReader();
-    //     reader.onload = function (e){
-    //         console.log(e.target.result)
-    //         // setImg(e.target.result)
-    //         // setProfileimg
-    //         // console.log(user,name)
-    //         setUser({...user, [name]: e.target.result})
-    //     };
-    //     reader.readAsDataURL(e.target.files[0])
-    //  )
     return (
         <>
             <Menu />
@@ -98,8 +84,6 @@ function ProfilePage() {
                     <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 />}
-                            {/* {user.profileimg ? <><Image id='profileimg' src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle hidden={!hidden}/> */}
-                            {/* <Image id='profileimg' src={user.profileimg} style={{ width: "300px", height: "300px" }} roundedCircle hidden={hidden}/></> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />} */}
                           </Row>
                         <Row className='ml-3 mt-3 justify-content-center'>
                             <Form className="d-flex">
@@ -109,17 +93,6 @@ function ProfilePage() {
                                 </Form.Group>
                             </Form>
                         </Row>
-                        {/* 
-{img?<Image src={img}/> : <h2>아직입니다.</h2>}
-                        <Row className='ml-3 mt-3 justify-content-center'>
-                            <Form className="d-flex">
-                                <Form.Group>
-                                    <Form.Label>프로필 사진 변경</Form.Label>
-                                    <Form.Control type='file' name='profileimg' onChange={bbb} accept='image/*' />
-                                </Form.Group>
-                            </Form>
-                        </Row> */}
-
                     </Col>
                     <Col sm={8}>
                         <Row className='m-5 justify-content-center'>

client/src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.css';
-import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import reportWebVitals from './reportWebVitals';
 import SignUpPage from './Pages/SignUpPage';
 import ProfilePage from './Pages/ProfilePage';

server/server.js

@@ -21,16 +21,15 @@ io.on("connection", (socket) => { // 기본 연결
   console.log("socket connect ok", socket.id)
 
   socket.on('joinRoom', (data)=>{ // joinRoom을 클라이언트가 emit했을 때
-    let roomName=data;
-    socket.join(roomName); //클라이언트에서 data에 적힌 room으로 참여시킴
+    console.log('join_data확인',data)
+    let roomInfo=data;
+    socket.join(roomInfo); //클라이언트에서 data에 적힌 room으로 참여시킴
   });
 
-  // socket.on('chat', (data)=>{
-  //   io.to(data.roomName).emit('chat',data.msg); //roomName에 존재하는 모든 소켓들에게 
-  // })
-
   socket.on('chat', (data) => {
-    socket.broadcast.emit('sendedMSG', data.msg ); // everyone gets it but the sender
+    console.log('roomname확인', data)
+    socket.broadcast.to(data.roomInfo).emit('sendedMSG', data.msg ); // sender 제외 특정 방으로
+  
   });
 
   socket.on('disconnect', () => {
@@ -39,8 +38,6 @@ io.on("connection", (socket) => { // 기본 연결
   
 });
 
-// app.use(express.json())
-//이부분을 body 파싱함
 app.use(bodyParser.json());
 app.use(cors());