0126머지후

client/src/Components/Chat.js

@@ -4,15 +4,23 @@ 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 INIT_CHAT = {
+  msg: '',
+  sender: '',
+  img: '',
+  time: ''
+}
+function Chat(props) {
+  //const [sender, setSender] = useState([])
 
+  //const [roomName, setRoomName] = useState('')
   const [inner, setInner] = useState([''])
-  const [chat, setChat] = useState([])   //object로 key는 보낸사람 value는 메세지
+  const [chat, setChat] = useState([INIT_CHAT])   //object로 key는 보낸사람 value는 메세지
 
-  const [img, setImg] = useState([])
+  const simpleTime = new Date().toLocaleTimeString()
+  const usualTime = simpleTime.substring(0, simpleTime.length - 3)
+  const realTime = new Date().toISOString()
 
   const [disabled, setDisabled] = useState(true)
   const [user, setUser] = useState('')
@@ -35,15 +43,16 @@ function Chat(props) {
     e.preventDefault()
     setInner(e.target.value)
     setDisabled(false)
+    //console.log(chat)
   }
 
   function sendMsgCH(e) {
     e.preventDefault()
 
+    props.setSingleTime(usualTime)
     props.setSingleImg(user.profileimg)
     props.setSingleUser(user.nickname)
     props.setSingleChat(inner)
-
     props.sendMsg(e)
     setInner('')
     setDisabled(true)
@@ -52,40 +61,73 @@ function Chat(props) {
   function handleClick() {
     props.closeChatRoom(props.roomCode)
     props.setRecievedMsg('')
-    console.log(chat)
     props.handleChatc()
+    props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
+    console.log('나간시간', realTime, usualTime)
+    setChat([''])
+
+    props.handleChatc()
+    props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
+  }
+
+  function settingtime(hour) {
+    let newhour = parseInt(hour) + 9
+    if (newhour >= 24) {
+      newhour -= 24
+    }
+    if (newhour >= 13) {
+      newhour -= 12
+      newhour = '오후 ' + newhour
+    } else {
+      newhour = '오전 ' + newhour
+    }
+    return newhour
   }
 
-  async function exitAndCloseRoom(){
+  //이전 채팅 내용에 대한 것 불러오기
+  //프사 닉네임 메세지가 각각의 배열로 들어가서 띄워지는 방식
+  async function getPreviousChat() {
+    const respond = await axios.get('/room/getChatInfo', { params: { 'roomCode': props.roomCode } })
+    console.log(respond)
+    const info = respond.data
+
+    let intochat = []
+    for (let prop in info) {
+      let hour = info[prop].createdAt.split('T')[1].split(':')
+      hour = settingtime(hour[0]) + ':' + hour[1]
+      intochat.push({ msg: info[prop].message, sender: info[prop].username, img: info[prop].profileimg, time: hour })
+    }
+    setChat(intochat)
+  }
+
+  async function exitAndCloseRoom() {
     props.exitRoom(props.roomCode)
     setExit(false)
     props.handleChatc()
   }
 
-
   useEffect(() => {
     getProfile(userId)
   }, [userId])
 
   useEffect(() => {
-    setImg([...img, props.singleImg])
-    setSender([...sender, props.singleUser])
-    setChat([...chat, props.singleChat])
-    console.log('chat', chat)
-    console.log('sender', sender)
+    setChat([...chat, { msg: props.singleChat, sender: props.singleUser, img: props.singleImg, time: props.singleTime }])
   }, [props.singleChat])
 
   useEffect(() => {
-    setImg([...img, props.recievedImg])
-    setSender([...sender, props.recievedUser])
-    setChat([...chat, props.recievedMsg])
+    setChat([...chat, { msg: props.recievedMsg, sender: props.recievedUser, img: props.recievedImg, time: props.recievedTime }])
   }, [props.recievedMsg])
 
-  const time = new Date().toLocaleTimeString()
+  useEffect(() => {
+    getPreviousChat()
+    // console.log('겟 룸네임', chat)
+  }, [props.roomCode])
+
+
   return (
     <>
-      <Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
-        <Row className="justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px" }}>
+      <Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "9174ad", background: '' }}>
+        <Row className="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "9174ad", height: "80px", margin: "1%" }}>
           <Col md="auto">
             <Button variant="light" onClick={handleClick} >{`<`}</Button>
           </Col>
@@ -103,30 +145,35 @@ function Chat(props) {
             <Col md="auto"><Button variant="light" onClick={exitAndCloseRoom} style={{fontWeight:"bold"}}>{"나가기"}</Button></Col>
           </Row>
           : null}
-        <p>{props.newUser}님이 입장하셨습니다.</p>
         {chat.map((value, index) => {
-          if (!(value == '')) {
-            if (!(sender[index] === user.nickname)) {
+          if (!(value.msg === '')) {
+            if (value.sender === "system") {
+              return (
+                <Row className='border' style={{ background: "#FFFAFA" }}>
+                  {value.msg}
+                </Row>
+              )
+            } else if (!(value.sender === user.nickname)) {
               return (
                 <Row key={index} className='m-1' >
                   <Col xs={2}>
-                    <Image src={img && `/images/${img[index]}`} style={{ width: "50px", height: "50px" }} roundedCircle />
+                    <Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle />
                   </Col>
                   <Col xs={8}>
-                    <Row><strong>{sender[index]}</strong></Row>
+                    <Row><strong>{value.sender}</strong></Row>
                     <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 className='border' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Row>
+                      <Col className='ml-1'>{value.time}</Col>
                     </Row>
                   </Col>
                 </Row>
               )
             } else {
-              return (
+              return ( //내가 보낸 메시지
                 <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>
+                    <Col className='mr-1'>{value.time}</Col>
+                    <Row className='mr-2' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: '3px', fontSize: 'x-large' }}>{value.msg}</Row>
                   </Row>
                 </Row>
               )
@@ -140,9 +187,8 @@ function Chat(props) {
       </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%' }}>
-            전송
+          <Form.Control  name='chat' type="text" value={inner} onChange={handleChange} style={{ borderColor: "#9174ad" }}  />
+          <Button className="ml-1" type="submit" disabled={disabled} style={{ width: '25%', backgroundColor: "#9174ad", borderColor: "#9174ad" }}>전송
           </Button>
         </Form.Group>
       </Form>

client/src/Components/ClosedList.js

-import React, { useState, useEffect } from 'react'
-import { ListGroup } from 'react-bootstrap';
-import axios from 'axios'
+import React from 'react'
+import { Badge, ListGroup } from 'react-bootstrap';
 
+const INIT_LIST = [{
+  interest: '',
+  isOpen: '',
+  memeber: [],
+  roomId: '',
+  roomName: '',
+}]
 function ClosedList(props) {
 
-  const [list, setList] = useState([]);
-
-  useEffect(() => {
-    getClosedList();
-  }, [props.roomCode]);
-
-  async function getClosedList() {
-    const userid = sessionStorage.getItem('userId')
-    let res = await axios.get('/room/closedlist', { params: { '_id': userid } })
-    setList(res.data)
-  }
-
   function enterChatRoomCH(e) {
-    if (props.roomCode){
+    if (props.roomCode) {
       props.closeChatRoom(props.roomCode)
     }
     const roomCode = e.target.name
@@ -25,18 +19,57 @@ function ClosedList(props) {
     props.enterChatRoom(roomCode)
     props.setRoomCode(roomCode)
     props.setRoomName(roomName)
+
+    // console.log('rrrrrrrrrrrrrrr', props.closedlist)
+    // console.log('1111111111111111111', props.leaveInfo, typeof (props.leaveInfo))
   }
 
+  // const [checknew, setChecknew] = useState([])
+  // const [unreadnumber, setUnreadnumber] = useState([''])
+  // async function dbChat() {
+  //   for (let i = 0; i <= props.closedlist.length - 1; i++) {
+  //     const respond = await axios.get('/room/dbChat', { params: { 'roomId': props.closedlist[i].roomId } })
+  //     setChecknew(respond.data)
+  //   }
+  // }
+  // useEffect(() => {
+  //   dbChat()
+  // }, [props.singleChat, props.recievedMsg])
+
+  // useEffect(() => {
+  //   // console.log('chat 클라이언트 변경!')
+  //   unreadMessage()
+  // }, [checknew])
+
+  // async function unreadMessage() {
+  //   //여기서 나간시간과 db의 메세지와 시간비교해서 개수를 count해주면 됨
+  //   //물론 그 방 별로 찾아서 list를 맵써서 하던?
+  //   // console.log('ddddddddd', list[0].roomId)
+
+  //   setUnreadnumber([''])
+  //   let arr = []
+  //   for (let i = 0; i <= props.closedlist.length - 1; i++) {
+  //     const respond = await axios.get('/room/unreadMessage', { params: { 'leaveInfo': props.leaveInfo, 'roomId': props.closedlist[i].roomId } })
+  //     // setUnreadnumber([...unreadnumber, respond.data])
+  //     arr = [...arr, respond.data]
+  //   }
+  //   setUnreadnumber(arr)
+  //   // console.log('클라이언트 클로즈드 카운드', unreadnumber, list.length)
+
+  // }
+
   return (
     <div>
-      {list.map((item, index) =>
-        <ListGroup key={index} >
+      {props.closedlist.map((item, index) =>
+        <ListGroup key={index}>
           <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
             {item.roomName}
+            {/* {[index] ? <Badge className='ml-2' pill variant='danger'>{unreadnumber[index]}</Badge> : ''} */}
           </ListGroup.Item>
         </ListGroup>
-      )}
-    </div>
+      )
+      }
+    </div >
   )
 }
 

client/src/Components/EnterRoom.js

@@ -8,8 +8,7 @@ function EnterRoom(props) {
     const [enterCode, setEnterCode] = useState('');
     const [error, setError] = useState('');
 
-    const userId = sessionStorage.getItem('userId'); //sessionStorage에 저장된 userId가져옴
-    
+    const userId = sessionStorage.getItem('userId');
 
     function handleChange(event) {
         const { name, value } = event.target
@@ -23,13 +22,16 @@ function EnterRoom(props) {
             setError('')
             let res = await axios.post('/room/enterRoom', { enterCode })
             await axios.put('/room/member', { userId: userId, roomId: enterCode })
+            const response = await axios.get('/users/check', { params: { '_id': userId } })
+            const userNick = response.data.nickname;
             props.setRoomName(res.data)
             props.setRoomCode(enterCode)
+            props.setSysmsg(`${userNick}님이 들어왔습니다.`)
             props.enterChatRoom(enterCode)
             props.handleCloseEnter()
             props.handleChato()
             setEnterCode('')
-        } catch (error){
+        } catch (error) {
             catchErrors(error, setError)
         }
     }

client/src/Components/Menu.js

 import React from 'react'
-import { Navbar, Nav, Button } from 'react-bootstrap';
+import { Navbar, Nav } from 'react-bootstrap';
 import { handleLogout } from '../utils/auth';
 
 
@@ -8,22 +8,27 @@ function Menu() {
   const name = sessionStorage.getItem('name');
 
   return (
-    <Navbar bg="dark" variant="dark">
-      <Navbar.Brand href="/home">YDK Messenger</Navbar.Brand>
+    <Navbar style={{ backgroundColor: "#61477a" }} variant="dark">
+      <div className="container-fluid">
+        <Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
         {name ?
           <>
-          <div className='ml-1 mr-2' style={{ color: 'white' }}>{name}님 환영합니다</div>
-          <Nav className="mr-auto">
+            <Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}>
+              <Nav.Item className="mt-2 mr-4">{name}님 환영합니다</Nav.Item>
               <Nav.Link href="/profile">Profile</Nav.Link>
+              <Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link>
             </Nav>
-          <Button className="ml-auto" onClick={() => handleLogout()} variant="light">Logout</Button>
           </>
-        : <Nav className="ml-auto">
-          <Nav.Link href='/login'>로그인</Nav.Link>
-          <Nav.Link href='/signup'>회원가입</Nav.Link>
-        </Nav>}
+          : <>
+            <Nav className="nav navbar-nav">
+              <Nav.Link href="/login">Login</Nav.Link>
+              <Nav.Link href="/signup">Signup</Nav.Link>
+            </Nav>
+          </>}
+      </div>
     </Navbar>
   )
 }
 
+
 export default Menu

client/src/Components/OpenList.js

-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { ListGroup } from 'react-bootstrap';
-import axios from 'axios'
 
 function OpenList(props) {
-  const [openlist, setOpenlist] = useState([])
-
-  useEffect(() => {
-    getOpenList();
-  }, [props.roomCode]);
-
-  async function getOpenList() {
-    let res = await axios.get('/room/openlist')
-    setOpenlist(res.data)
-  }
-
 
   function enterChatRoomCH(e) {
     if (props.roomCode){
@@ -30,7 +18,7 @@ function OpenList(props) {
 
   return (
     <div>
-      {openlist.map((item, index) =>
+      {props.openlist.map((item, index) =>
         <ListGroup key={index}>
           <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}>
             {item.roomName}

client/src/Components/RoomMake.js

-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import axios from 'axios';
 import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
 import catchErrors from '../utils/catchErrors';
@@ -11,19 +11,13 @@ const INIT_ROOM = {
 
 function RoomMake(props) {
     const [room, setRoom] = useState(INIT_ROOM);
-    const [disabled, setDisabled] = useState(true);
     const [error, setError] = useState('');
 
-    useEffect(() => {
-        const isRoom = Object.values(room).every(el => Boolean(el))
-        isRoom ? setDisabled(false) : setDisabled(true)
-    }, [room])
-
     const member = sessionStorage.getItem('userId');
     function handleChange(event) {
         const { name, value } = event.target
-        setRoom({ ...room, [name]: value , member})
-        console.log(room)
+        setRoom({ ...room, [name]: value, member })
+        // console.log(room)
     }
 
     async function handleSubmit(event) {
@@ -36,7 +30,7 @@ function RoomMake(props) {
             props.handleCloseModal()
             props.handleChato()
             setRoom(INIT_ROOM)
-        } catch (error){    
+        } catch (error) {
             catchErrors(error, setError)
         }
     }

client/src/Pages/HomePage.js

 import React, { useState, useEffect } from 'react';
-import { Row, Col, Button, Navbar, Nav } from 'react-bootstrap';
-import Tabs from 'react-bootstrap/Tabs';
-import Tab from 'react-bootstrap/Tab';
+import { Row, Col, Button, Tabs, Tab } from 'react-bootstrap';
 import ClosedList from '../Components/ClosedList';
 import OpenList from '../Components/OpenList';
 import Menu from '../Components/Menu';
@@ -19,10 +17,17 @@ const INIT_ROOM = {
   roomId: '',
   member: '',
 }
+const INIT_LIST = [{
+  interest: '',
+  isOpen: '',
+  memeber: [],
+  roomId: '',
+  roomName: '',
+}]
 
 function Home() {
   const userName = sessionStorage.getItem('name')
-  const userId = sessionStorage.getItem('userId');
+  const userId = sessionStorage.getItem('userId')
 
   const [showModal, setShowModal] = useState(false);
   const [showEnter, setShowEnter] = useState(false);
@@ -35,7 +40,7 @@ function Home() {
   const [singleChat, setSingleChat] = useState('')
   const [recievedMsg, setRecievedMsg] = useState('')
   const [roomCode, setRoomCode] = useState('')
-  const [newUser, setNewUser] = useState('')
+  const [sysmsg, setSysmsg] = useState('')
   const [roomName, setRoomName] = useState('')
 
   const [singleUser, setSingleUser] = useState('')
@@ -44,25 +49,27 @@ function Home() {
   const [singleImg, setSingleImg] = useState('')
   const [recievedImg, setRecievedImg] = useState('')
 
+  const [singleTime, setSingleTime] = useState('')
+  const [recievedTime, setRecievedTime] = useState('')
+  const [leaveInfo, setLeaveInfo] = useState([{ roomName: "", leaveTime: "" }])
+
   const handleCloseModal = () => setShowModal(false);
   const handleShowModal = () => setShowModal(true);
   const handleCloseEnter = () => setShowEnter(false);
   const handleShowEnter = () => setShowEnter(true);
   const handleChato = () => setChat(true);
   const handleChatc = () => setChat(false);
+  const [closedlist, setClosedList] = useState(INIT_LIST);
+  const [openlist, setOpenlist] = useState([])
 
-
-  //SOCKET 방 enter, close, exit  event
-  function enterChatRoom(rCode) {    //방 입장하기
+  //SOCKET 관련 시작
+  async function enterChatRoom(rCode) {    //방 입장하기
     socket.emit('joinRoom', rCode)
     socket.emit('newUser', { rmIf: rCode, userInfo: userName })
     console.log(`joinRoom : ${rCode} 입장`)
+    //여기서 채팅 불러와서 넘겨주던가 해야할거 같은데
   }
 
-  socket.on("sendUser", (data) => {
-    setNewUser(data)
-  })
-
   function closeChatRoom(rCode) {
     socket.emit('closeRoom', rCode)
     console.log(`${rCode}방 보기 중단`)
@@ -74,13 +81,22 @@ function Home() {
     setRoomCode("")
   }
 
+  async function getClosedList() {
+    const userid = sessionStorage.getItem('userId')
+    let res = await axios.get('/room/closedlist', { params: { '_id': userid } })
+    setClosedList(res.data)
+  }
+
+  async function getOpenList() {
+    let res = await axios.get('/room/openlist')
+    console.log('getOpenlist', res.data)
+    setOpenlist(res.data)
+  }
+
   //오픈채팅방에서 참가하기
   async function openListroom(roomId) {
     console.log(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])
     setOpen(true)
     setShow(false)
@@ -89,8 +105,11 @@ function Home() {
   async function attendListRoom() {
     const roomId = room.roomId
     const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
+    const response = await axios.get('/users/check', { params: { '_id': userId } })
+    const userNick = response.data.nickname;
     if (tf.data) {
       alert('참가되었습니다.')
+      setSysmsg(`${userNick}님이 들어왔습니다.`)
     } else {
       alert('이미 참가된 방입니다.')
     }
@@ -103,24 +122,42 @@ function Home() {
     e.preventDefault()
   }
 
+  useEffect(() => {
+    getClosedList();
+    getOpenList();
+  }, [roomCode]);
 
   useEffect(() => {
-    if (!(singleChat == "")) {
+    if (!(singleChat === "")) {
       socket.emit("chat", {
         roomInfo: roomCode,
         sendInfo: {
           msg: singleChat,
           sender: singleUser,
-          img: singleImg
+          img: singleImg,
+          time: singleTime
         }
       })
       setSingleChat("")
     }
   }, [singleChat])
 
+  useEffect(() => {
+    if (!(sysmsg === '')) {
+      socket.emit("chat", {
+        roomInfo: roomCode,
+        sendInfo: {
+          msg: sysmsg,
+          sender: "system",
+        }
+      })
+      setSysmsg('')
+    }
+  }, [sysmsg])
 
   useEffect(() => {
     socket.on("sendedMSG", (sendInfo) => {
+      setRecievedTime(sendInfo.time)
       setRecievedImg(sendInfo.img)
       setRecievedUser(sendInfo.sender)
       setRecievedMsg(sendInfo.msg)
@@ -139,10 +176,10 @@ function Home() {
               <Nav> */}
           <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
             <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-              <ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
+              <ClosedList closedlist={closedlist} singleChat={singleChat} recievedMsg={recievedMsg} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
             </Tab>
             <Tab eventKey="open" title="공개방" onClick={handleChatc}>
-              <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
+              <OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
             </Tab>
           </Tabs>
           {/* </Nav>
@@ -155,12 +192,12 @@ function Home() {
             {(show || chat) ?
               null
               : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
-                <Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
-                <Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
+                <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
+                <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
               </div>
             }
             {chat ?
-              <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} />
+              <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} closeChatRoom={closeChatRoom} exitRoom={exitRoom} />
               : null}
             {open ?
               <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
@@ -171,8 +208,8 @@ function Home() {
                     <h5>▷ 참여인원 : {room.member.length}</h5>
                     <h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
                     <Row className='justify-content-center'>
-                      <Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
-                      <Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
+                      <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
+                      <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
                     </Row>
                   </div>
                 </div>
@@ -182,10 +219,9 @@ function Home() {
         </Col>
       </Row>
       <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
-      <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
+      <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} sysmsg={sysmsg} setSysmsg={setSysmsg} />
     </>
   );
 }
 
 export default Home;
\ No newline at end of file
-

client/src/Pages/LogInPage.js

 import React, { useState, useEffect } from 'react';
 import axios from 'axios'
-import { Button, Form, Container, Navbar, Spinner, Alert } from 'react-bootstrap';
+import { Button, Form, Container, Spinner, Alert } from 'react-bootstrap';
 import catchErrors from '../utils/catchErrors'
-import { Link, Redirect } from 'react-router-dom'
+import { Redirect } from 'react-router-dom'
 import { handleLogin } from '../utils/auth'
 import Menu from '../Components/Menu';
 
@@ -91,11 +91,12 @@ function LogIn() {
                         <Button
                             disabled={disabled || loading}
                             type="submit"
-                            variant="outline-success"
+                            variant="outline"
                             size="lg"
                             className="mr-4"
+                            style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white', font: 'dark' }}
                             block>
-                            {loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' />} {' '} 로그인
+                            {loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' style={{ color: "#b49dc9" }} />} {' '} 로그인
                                 </Button>
                         {error && <Alert variant='danger'>
                             {error}

client/src/Pages/ProfilePage.js

@@ -113,7 +113,7 @@ function ProfilePage() {
                             </Col>
                             <Col xs={3}>
                                 <Form className="d-flex" onSubmit={handleSubmitHidVis}>
-                                    <Button className="ml-3 d-flex justify-content-end" variant="outline-primary" size="sm" type='submit'>수정</Button>
+                                    <Button className="ml-3 d-flex justify-content-end" variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white' }} size="sm" type='submit'>수정</Button>
                                 </Form>
                             </Col>
                         </Row>
@@ -123,9 +123,9 @@ function ProfilePage() {
                         </Row>
                         <Row className='m-3 justify-content-center'>
                             <Form onSubmit={handleSubmit}>
-                                <Button variant="outline-success" size="sm" className="mr-4" type='submit'>저장</Button>
+                                <Button variant="outline-success" size="sm" className="mr-4" type='submit' variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>저장</Button>
                                 <Link to='/'>
-                                    <Button variant="outline-success" size="sm" className="ml-4" >홈 화면으로</Button>
+                                    <Button variant="outline-success" size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>홈 화면으로</Button>
                                 </Link>
                             </Form>
                         </Row>

client/src/Pages/SignUpPage.js

 import React, { useState, useEffect } from 'react';
 import axios from 'axios'
-import { Button, Form, Container, Alert, Navbar } from 'react-bootstrap';
+import { Button, Form, Container, Alert, Spinner} from 'react-bootstrap';
 import catchErrors from '../utils/catchErrors';
 import { Redirect } from 'react-router-dom';
 import Menu from '../Components/Menu';
@@ -18,6 +18,7 @@ function SingUp() {
     const [error, setError] = useState('')
     const [disabled, setDisabled] = useState(true)
     const [success, setSuccess] = useState(false)    
+    const [loading, setLoading] = useState(false)
 
     useEffect(() => {
         const isUser = Object.values(user).every(el => Boolean(el))
@@ -32,22 +33,15 @@ function SingUp() {
     async function handleSubmit(event) {
         event.preventDefault();
 
-        //빈문자열 입력 시 오류 문자 출력
-        //const form = event.currentTarget;
-        //if (form.checkValidity() === false) {
-        //    event.preventDefault();
-        //    event.stopPropagation();
-        //    //event.stopPropagation() : 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.
-        //}
-        //setValidated(true);
-        // console.log(user)
-
         try {
+            setLoading(true)
             setError('')
             await axios.post('/users/signup', user)
             setSuccess(true)
         } catch (error) {
             catchErrors(error, setError)
+        } finally {
+            setLoading(false)
         }
     }
 
@@ -57,11 +51,9 @@ function SingUp() {
         return <Redirect to='/login' />
     }
 
-
     return (
         <>
             <Menu />
-
             <Form onSubmit={handleSubmit} className='vh-100 flex-column align-items-center justify-content-center mt-2'>
                 <Container className="d-flex justify-content-center">
                     <div className="mt-5 p-5 shadow w-75">
@@ -127,10 +119,12 @@ function SingUp() {
                         <Button
                             disabled={disabled}
                             type='submit'
-                            variant="outline-success"
+                            variant="outline"
                             size="lg"
                             className="mr-4"
-                            block>가입</Button>
+                            style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white', font: 'dark' }}
+                            block>
+                            {loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' style={{ color: "#b49dc9" }} />}가입</Button>
                         {error && <Alert variant='danger'>
                             {error}
                         </Alert>}

client/src/utils/auth.js

@@ -10,7 +10,7 @@ export async function handleLogout() {
     sessionStorage.clear();
     await axios.get('/auth/logout')
     //login페이지로 이동
-    window.location.href='/login'
+    // window.location.href='/login'
 }
 
 export function isAuthenticated() {

server/controllers/room.controller.js

 import Room from "../models/Room.js"
 import { customAlphabet } from 'nanoid'
 import isLength from 'validator/lib/isLength.js'
+import Chat from "../models/Chat.js"
 
 const nanoid = customAlphabet('1234567890abcdef', 10)
 
@@ -56,7 +57,7 @@ const getOpenList = async (req, res) => {
 
 const getRoomName = async (req, res) => {
     const roomId = req.query.roomCode
-    console.log(req.query.roomCode)
+    console.log('getRoomName', req.query.roomCode)
 
     try {
         let roominfo = await Room.findOne({ roomId: roomId }).select('roomName')
@@ -82,7 +83,6 @@ const changemember = async (req, res) => {
         else {
             return res.json(false)
         }
-        res.end()
     } catch (error) {
         res.status(500).send('멤버 업데이트 실패')
     }
@@ -107,7 +107,6 @@ const deleteUserId = async (req, res) => {
 const roomInf = async (req, res) => {
     try {
         console.log(req.query.roomId)
-        // let roomInf = await Room.findOne({ member: req.query.roomId }).select('interest roomId member').exec()
         let roomInf = await Room.find({ roomId: req.query.roomId })
         console.log('room_member로 정보 가져오기:', roomInf)
         return res.json(roomInf)
@@ -116,4 +115,43 @@ const roomInf = async (req, res) => {
     }
 }
 
-export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, deleteUserId, roomInf }
+const unreadMessage = async (req, res) => {
+    let leaveInfo = req.query.leaveInfo
+    const roomId = req.query.roomId
+    let leaveTime = ''
+    console.log('서버에서 초기 leaveInfo',leaveInfo)
+    for (let i = 1; i < leaveInfo.length; i++) {    //일단 형식좀 맞추고
+        leaveInfo[i] = JSON.parse(leaveInfo[i])
+    }
+
+    //findOne으로 해보자
+    for (let i = 1; i <= leaveInfo.length - 1; i++) {   //그 방의 id와 나간기록의 방과 일치하는지 확인하고
+        if (leaveInfo[i].roomName === roomId) {
+            leaveTime = leaveInfo[i].leaveTime  //그 방에서 나간 시간을 찾아옴
+            break;
+        }
+    }
+
+    const room_id = await Room.find({ roomId: roomId }).select('_id')   //id로 _id를 찾아와서
+    let unreadMsg = await Chat.find({ room: room_id }).select('createdAt')  //그 방의 메세지와 전송시간을 가져옴
+    let count = 0
+    //mongoose 시간비교 방법이 있음 (gte...)
+    for (let i = 0; i <= unreadMsg.length - 1; i++) {
+        const dbtime = Date.parse(unreadMsg[i].createdAt)
+        const parsedleaveTime = Date.parse(leaveTime)
+        if (parsedleaveTime < dbtime) {         //시간 비교를하고 이후에 온 메세지의 개수를 count함
+            console.log('이번째부터 나중에온 메세지', i)
+            count += 1
+        }
+    }
+    res.json(count)
+}
+
+const dbChat = async (req, res) => {
+    const roomId = req.query.roomId
+    const room_id = await Room.find({ roomId: roomId }).select('_id')
+    let chatlist = await Chat.find({ room: room_id }).select('message')
+    res.json(chatlist)
+}
+
+export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, roomInf, unreadMessage, dbChat, deleteUserId }

server/controllers/roomEnter.controller.js

 import Room from "../models/Room.js"
+import Chat from "../models/Chat.js";
+import User from "../models/User.js";
 
 const roomEnter = async (req, res) => {
     const roomId = req.body.enterCode
-    // console.log(req)
 
     try {
         const room = await Room.findOne({ roomId })
         if (!room) {
             return res.status(404).send(`참여코드가 존재하지 않습니다.`)
         }
-
         console.log('roomId존재')
-
         const name = await Room.findOne({ roomId: roomId }).select('roomName')
         return res.json(name.roomName)
 
@@ -22,4 +21,17 @@ const roomEnter = async (req, res) => {
     }
 }
 
-export default { roomEnter }
+const getChatInfo = async (req, res) => {
\ No newline at end of file
+    const roomId = req.query.roomCode
+    try {
+        const room_id = await Room.find({ roomId: roomId }).select('_id')  //roomId로 해당 방의 _id를 찾아옴
+        let infolist = await Chat.find({ room: room_id }).select('message username createdAt profileimg')
+        res.json(infolist)
+    } catch (error) {
+        res.status(500).send('이전 채팅 정보 불러오기를 실패하였습니다!')
+    }
+}
+
+
+
+export default { roomEnter, getChatInfo }
\ No newline at end of file

server/controllers/user.controller.js

@@ -9,7 +9,6 @@ const profileUpload = upload.fields([
     { name: 'imageUrl', maxCount: 1 },
 ])
 
-
 const signup = async (req, res) => {
 
     const { username, nickname, email, password } = req.body
@@ -84,6 +83,15 @@ const getProfile = (req, res) => {
     res.json(req.user)
 }
 
+const checkUser = async (req, res) => {
+    try {
+        const info = await User.findOne({ _id: req.query._id })
+        return res.json(info)
+    } catch (error) {
+        console.log(error)
+        res.status(500).send('사용자 검색 실패')
+    }
+}
 
 const loginNavbar = async (req, res) => {
     try {
@@ -94,5 +102,5 @@ const loginNavbar = async (req, res) => {
     }
 }
 
-export default { signup, profileUpload, update, userById, getProfile, loginNavbar }
+export default { signup, profileUpload, update, userById, getProfile, loginNavbar, checkUser }
 // {} : 객체로 return함

server/models/Chat.js

@@ -16,6 +16,10 @@ const ChatSchema = new mongoose.Schema({
         type: String,
         required: true
     },
+    profileimg :{
+        type: String,
+        default: '3cd14b9bcb2007f324fcb82e0b566cce'
+    }
 }, {
     timestamps: true
 })

server/models/Room.js

@@ -25,7 +25,7 @@ const RoomSchema = new mongoose.Schema({
     member: {
         type: Array,
         required: true,
-    }
+    },
 }, {
     timestamps: true
 })

server/models/User.js

@@ -3,6 +3,7 @@
 import mongoose from 'mongoose'
 
 const { String } = mongoose.Schema.Types
+const { Array } = mongoose.Schema.Types
 //원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴.
 //object의 id를 쓸때에도 추가시켜줘야됨.
 
@@ -31,14 +32,16 @@ const UserSchema = new mongoose.Schema({
     },
     profileimg: {
         type: String,
-        default : '3cd14b9bcb2007f324fcb82e0b566cce',
+        default: '3cd14b9bcb2007f324fcb82e0b566cce',
     },
+    entrylog: {
+        type: Array,
+    }
 }, {
-    //옵셥을 정의함.
+   
     timestamps: true
-    //기본이 false로 되어있음
-    //user가 추가될때마다 createdAt(만들어진 시간 저장)과 updatedAt(수정될때 시간이 변경되어 저장)가 추가되어 시간을 저장함.
+   
 })
 
 export default mongoose.models.User || mongoose.model('User', UserSchema)
-//user라는 이름이 있으면 앞을 return하고 없으면 뒤를 실행함
+

server/routes/auth.routes.js

@@ -10,11 +10,6 @@ router.route('/auth/login')
 
 router.route('/auth/logout')
     .get(authCtrl.logout)
-// /api/users/signup로 들어오는 것을 post (method) 를 통해 useCtrl.signup 이것이 처리함
-//browser에서 주소창에 치고 들어가면 get (method) 을 타고 들어간것임
-//post를 띄우고 싶으면 앱에서 ARC실행해서 post를 실행하게 만들면됨.
-//객체에 접근할때는 .을 찍고 접근함/ ex) .hello
-//express middleware : (req, res) => {}
-//node(req(client의 정보), res)를 넘겨줌.
+
 
 export default router
\ No newline at end of file

server/routes/room.routers.js

@@ -22,6 +22,14 @@ router.route('/room/member')
 router.route('/room/getRoomName')
     .get(roomCtrl.getRoomName)
 
+// router.route('/room/unreadMessage')
+//     .get(roomCtrl.unreadMessage)
+router.route('/room/unreadMessage')
+    .get(roomCtrl.unreadMessage)
+
+router.route('/room/dbChat')
+    .get(roomCtrl.dbChat)
+
 router.route('/room/deleteMem')
     .put(roomCtrl.deleteUserId)
 

server/routes/roomEnter.routers.js

@@ -5,4 +5,9 @@ const router = express.Router()
 
 router.route('/room/enterRoom')
     .post(roomEnterCtrl.roomEnter)
+
+router.route('/room/getChatInfo')
+    .get(roomEnterCtrl.getChatInfo)
+
+
 export default router
\ No newline at end of file