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

client/src/Components/Chat.js

@@ -3,7 +3,8 @@ import React, { useState, useEffect } from 'react';
 import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap';
 import { isAuthenticated } from '../utils/auth';
 import catchErrors from '../utils/catchErrors';
-
+import { BsCaretLeftFill, BsList, BsExclamationCircleFill, BsCheck, BsX } from "react-icons/bs";
+import { FiSend } from "react-icons/fi";
 
 const INIT_CHAT = {
   msg: '',
@@ -13,7 +14,7 @@ const INIT_CHAT = {
 }
 
 function Chat(props) {
-  const [sender, setSender] = useState([])
+  //const [sender, setSender] = useState([])
 
   //const [roomName, setRoomName] = useState('')
   const [inner, setInner] = useState([''])
@@ -84,7 +85,6 @@ function Chat(props) {
     props.setRecievedMsg('')
     props.handleChatc()
     setChat([''])
-
     recordEntryLog()
     props.setRoomCode('')
   }
@@ -124,7 +124,6 @@ function Chat(props) {
     props.handleChatc()
   }
 
-
   useEffect(() => {
     getProfile(userId)
   }, [userId])
@@ -143,29 +142,32 @@ function Chat(props) {
 
 
   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" }}>
-          <Col md="auto">
-            <Button variant="light" onClick={handleClick} >{`<`}</Button>
-          </Col>
-          <Col>
-            <Row style={{ fontWeight: "bold", fontSize: "x-large" }}> {props.roomName} </Row>
-            <Row > {props.roomCode} </Row>
-          </Col>
-          <Col md="auto">
-            <Button variant="light" onClick={() => setExit(true)}>{'='}</Button>
-          </Col>
-        </Row>
-        {exit ?
-          <Row>
-            <Col>퇴장하시겠습니까?</Col>
-            <Col md="auto"><Button variant="light" onClick={exitAndCloseRoom}>{"나가기"}</Button></Col>
-          </Row>
-          : null}
+    <div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "580px", position: "relative" }}>
+      <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}>
+        <a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
+        <div style={{ justifyContent: "center" }}>
+          <p style={{ color: "#333333", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </p>
+          <p style={{ color: "#333333", fontSize: "0.8em", textAlign: "center", margin: "0.5px 0px 0px 0px" }}> {props.roomCode} </p>
+        </div>
+        <a href="#;" onClick={() => setExit(!exit)} style={{ margin: "0px 15px 0px 0px" }}><BsList size="20" color="#333333" /></a>
+      </div>
+      {exit ?
+        <div id="chat-exit-check" style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center", margin: "1%", backgroundColor: "#30284D", borderRadius: "5px", height: "50px" }}>
+          <p style={{ width: "70%", color: "#FAFAFA", fontSize: "1em", margin: "0px 10px 0px 20px" }}><BsExclamationCircleFill size="1em" color="#F2D788" />  퇴장하시겠습니까?</p>
+          <a href="#;" onClick={exitAndCloseRoom}><BsCheck size="1em" color="#F2D788" /></a>
+          <a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
+        </div>
+        : null}
+      <div id="chat-body" style={{ overflow: 'auto', padding: '15px', width: "100%", height: "400px", margin: "1%", background: '' }}>
         {chat.map((value, index) => {
           if (!(value.msg === '')) {
-            if (!(value.sender === user.nickname)) {
+            if (value.sender === "system") {
+              return (
+                <Row style={{ background: "#F5F5F5", border: "none", justifyContent: "center" }}>
+                  {value.msg}
+                </Row>
+              )
+            } else if (!(value.sender === user.nickname)) {
               return (
                 <Row key={index} className='m-1' >
                   <Col xs={2}>
@@ -174,22 +176,18 @@ function Chat(props) {
                   <Col xs={8}>
                     <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.msg}</Row>
+                      <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 if (sender[index] === "") {
-              return (
-                { value }
-              )
             } else {
               return ( //내가 보낸 메시지
                 <Row key={index} className='m-1 justify-content-end'>
                   <Row className='d-flex flex-wrap-nowrap' >
                     <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: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value.msg}</Row>
+                    <Row className='mr-2' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: 'px', fontSize: 'x-large' }}>{value.msg}</Row>
                   </Row>
                 </Row>
               )
@@ -199,19 +197,20 @@ 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%' }}>
-            전송
-          </Button>
-        </Form.Group>
-      </Form>
-    </>
-
-
+      </div>
+      <div id="chat-low-side" style={{ width: "95%", height: "60px", position: "absolute", bottom: "0", padding: "10px 5px 5px 10px" }}>
+        <div id="chat-form" style={{ width: "100%", height: "100%", borderStyle: "solid", borderWidth: "2px", borderColor: "#C1C1C1", borderRadius: "25px", padding: "3px 2px 2px 3px" }}>
+          <Form onSubmit={sendMsgCH}>
+            <Form.Group style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}>
+              <Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ width: "80%", height: "90%", borderColor: "#FFFFFF" }} />
+              <Button type="submit" disabled={disabled} style={{ justifyContent: "center", width: "10%", height: "90%", borderRadius: "20px", backgroundColor: "#C1C1C1", borderColor: "#FFFFFF" }}>
+                <FiSend size="16px" color="#FAFAFA" />
+              </Button>
+            </Form.Group>
+          </Form>
+        </div>
+      </div>
+    </div>
   );
 }
 

client/src/Components/ClosedList.js

 import React, { useState, useEffect } from 'react'
 import { Badge, ListGroup } from 'react-bootstrap';
+import "../Pages/Home.css";
 import axios from 'axios'
 import catchErrors from '../utils/catchErrors';
 
@@ -44,7 +45,7 @@ function ClosedList(props) {
   useEffect(() => { // 누군가 보내면 다시 개수 셈
     console.log('chat 클라이언트 변경!')
     props.unreadMessage()
-    console.log('새 메세지가 도착했습니다.',props.leftInfo)
+    console.log('새 메세지가 도착했습니다.', props.leftInfo)
   }, [props.checknew])
 
   useEffect(() => { //일단 들오면 실행해야지
@@ -53,7 +54,7 @@ function ClosedList(props) {
 
 
 
-  let count=[]
+  let count = []
   const [unread, setUnread] = useState([])
   useEffect(() => { //unread정보가 들어오면 재정비해서 뿌려주기 위한 작업!
     for (let i = 0; i < props.unreadnumber.length; i++) {
@@ -66,7 +67,8 @@ function ClosedList(props) {
     <div>
       {props.closedlist.map((item, index) =>
         <ListGroup key={index}>
-          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
+          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}
+            className='rounded-0'>
             {item.roomName}
             {unread[index] ? <Badge className='ml-2' pill variant='danger'>{unread[index]}</Badge> : ''}
           </ListGroup.Item>

client/src/Components/EnterRoom.js

@@ -23,7 +23,6 @@ function EnterRoom(props) {
             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 } })
-            // console.log('res확인22', response.data.nickname)
             const userNick = response.data.nickname;
             props.setRoomName(res.data)
             props.setRoomCode(enterCode)
@@ -53,7 +52,7 @@ function EnterRoom(props) {
                         </Form.Group>
                         <Form.Group as={Row}>
                             <Col sm={{ span: 5, offset: 4 }}>
-                                <Button type="submit">참가</Button>
+                                <Button type="submit" style={{backgroundColor:"#9174ad", borderColor:"#9174ad"}} >참가</Button>
                             </Col>
                         </Form.Group>
                     </Form>

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>
-      {name ?
-        <>
-          <div className='ml-1 mr-2' style={{ color: 'white' }}>{name}님 환영합니다</div>
-          <Nav className="mr-auto">
-            <Nav.Link href="/profile">Profile</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>}
+    <Navbar style={{ backgroundColor: "#61477a" }} variant="dark">
+      <div className="container-fluid">
+        <Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
+        {name ?
+          <>
+            <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>
+          </>
+          : <>
+            <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'
+import "../Pages/Home.css";
 
 function OpenList(props) {
 
   function enterChatRoomCH(e) {
-    if (props.roomCode){
+    if (props.roomCode) {
       props.closeChatRoom(props.roomCode)
     }
-    
-    console.log('e확인', e.target)
     const roomCode = e.target.name
-    // props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
     props.openListroom(roomCode)
     props.setRoomCode(roomCode)
-    // props.clearChat()
   }
 
   return (
     <div>
       {props.openlist.map((item, index) =>
         <ListGroup key={index}>
-          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}>
+          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} className='rounded-0'>
             {item.roomName}
           </ListGroup.Item>
         </ListGroup>

client/src/Components/RoomMake.js

@@ -28,7 +28,6 @@ function RoomMake(props) {
             const Id = res.data.roomId
             alert(`방암호는 ${Id}입니다`)
             props.handleCloseModal()
-            props.handleChato()
             setRoom(INIT_ROOM)
         } catch (error) {
             catchErrors(error, setError)
@@ -62,7 +61,6 @@ function RoomMake(props) {
                                 <option>언어</option>
                                 <option>취미</option>
                             </Form.Control>
-                            {/* <Form.Control type="text" /> */}
                         </Col>
                     </Form.Group>
                     <Form.Group as={Row} controlId="chatIsOpen">
@@ -82,7 +80,7 @@ function RoomMake(props) {
                     }
                     <Form.Group as={Row}>
                         <Col sm={{ span: 5, offset: 4 }}>
-                            <Button type="submit" >방 생성</Button>
+                            <Button type="submit" style={{backgroundColor:"#9174ad", borderColor:"#9174ad"}} >방 생성</Button>
                         </Col>
                     </Form.Group>
                 </Form>

client/src/Pages/Home.css

+.nav-tabs .nav-item.nav-link {
+  color: silver !important;
+}
+
+.nav-tabs .nav-item.nav-link.active {
+  color:slateblue !important;
+}
+
+.list-group-item-action{
+  border-top: none;
+}

client/src/Pages/HomePage.js

 import React, { useState, useEffect } from 'react';
 import { Row, Col, Button, Tabs, Tab, Form } from 'react-bootstrap';
+import styled from 'styled-components';
 import ClosedList from '../Components/ClosedList';
 import OpenList from '../Components/OpenList';
 import Menu from '../Components/Menu';
@@ -8,6 +9,7 @@ import Chat from "../Components/Chat";
 import RoomMake from "../Components/RoomMake"
 import EnterRoom from "../Components/EnterRoom"
 import axios from 'axios';
+import "./Home.css"
 
 const socket = io();
 
@@ -59,7 +61,12 @@ function Home() {
   const [singleTime, setSingleTime] = useState('')
   const [recievedTime, setRecievedTime] = useState('')
 
-  const handleCloseModal = () => setShowModal(false);
+  const handleCloseModal = () => {
+    setShowModal(false);
+    getClosedList()
+    getOpenList()
+
+  }
   const handleShowModal = () => setShowModal(true);
   const handleCloseEnter = () => setShowEnter(false);
   const handleShowEnter = () => setShowEnter(true);
@@ -72,7 +79,9 @@ function Home() {
   async function enterChatRoom(rCode) {    //방 입장하기
     socket.emit('joinRoom', rCode)
     socket.emit('newUser', { rmIf: rCode, userInfo: userName })
+    setShow(true)
     console.log(`joinRoom : ${rCode} 입장`)
+    console.log('show:', show)
     //여기서 채팅 불러와서 넘겨주던가 해야할거 같은데
     console.log('HomePage/enterChatRoom 끝났습니다')
   }
@@ -84,8 +93,10 @@ function Home() {
 
 
   async function exitRoom(roomId) {
+    const response = await axios.get('/users/check', { params: { '_id': userId } })
+    const userNick = response.data.nickname;
     await axios.put('/room/deleteMem', { userId: userId, roomId: roomId })
-    console.log(`${roomId}방 ${userId} 탈퇴`)
+    setSysmsg(`${userNick}님이 나갔습니다.`)
     setRoomCode("")
   }
 
@@ -98,19 +109,16 @@ function Home() {
 
   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 } })
     setRoom(roomInf.data[0])
-    setOpen(true)
     setShow(false)
+    setOpen(true)
   }
-
+  //오픈채팅방에서 참가하기
   async function attendListRoom() {
     const roomId = room.roomId
     const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
@@ -119,6 +127,7 @@ function Home() {
     if (tf.data) {
       alert('참가되었습니다.')
       setSysmsg(`${userNick}님이 들어왔습니다.`)
+      getClosedList()
     } else {
       alert('이미 참가된 방입니다.')
     }
@@ -158,7 +167,6 @@ function Home() {
         sendInfo: {
           msg: sysmsg,
           sender: "system",
-          // time: singleTime
         }
       })
       setSysmsg('')
@@ -214,45 +222,42 @@ function Home() {
     <>
       <Menu />
       <Row className="mr-0">
-        <Col className="list" md={5}>
-          <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
-            <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-              <ClosedList closedlist={closedlist} leftInfo={leftInfo} checknew={checknew} unreadMessage={unreadMessage} unreadnumber={unreadnumber} setUnreadnumber={setUnreadnumber} userId={userId} singleChat={singleChat} recievedMsg={recievedMsg} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
-            </Tab>
-            <Tab eventKey="open" title="공개방" onClick={handleChatc}>
-              <OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
-            </Tab>
-          </Tabs>
+        <Col className="list" md={5} style={{ overflow: 'auto', height: "80%" }}>
+          <Sdiv chat={chat}>
+            <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example"  >
+              <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
+                <ClosedList closedlist={closedlist} leftInfo={leftInfo} checknew={checknew} unreadMessage={unreadMessage} unreadnumber={unreadnumber} setUnreadnumber={setUnreadnumber} userId={userId} singleChat={singleChat} recievedMsg={recievedMsg} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
+              </Tab>
+              <Tab eventKey="open" title="공개방" onClick={handleChatc}>
+                <OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
+              </Tab>
+            </Tabs>
+          </Sdiv>
         </Col>
-        <Col style={{ padding: "0" }}>
-          <>
-            {(show || chat) ?
-              null
+        <Col style={{ padding: "5px", marginLeft: "15px" }}>
+          {show ? <>
+            {chat ? <Chat leftInfo={leftInfo} setLeftInfo={setLeftInfo} handleChatc={handleChatc} 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} setRoomCode={setRoomCode} />
               : <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>
-              </div>
-            }
-            {chat ?
-              <Chat leftInfo={leftInfo} setLeftInfo={setLeftInfo} handleChatc={handleChatc} 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} setRoomCode={setRoomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} closedlist={closedlist} />
-              : null}
-            {open ?
-              <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
-                <div className="d-flex justify-content-center">
-                  <div className="mt-5 p-5 shadow w-75">
-                    <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName}방 입니다.</h2>
-                    <h5>▷ 관심분야 : {room.interest}</h5>
-                    <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>
-                    </Row>
-                  </div>
+                <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>} </>
+            : <> {open ? <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
+              <div className="d-flex justify-content-center">
+                <div className="mt-5 p-5 shadow w-75">
+                  <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName} 입니다.</h2>
+                  <h5>▷ 관심분야 : {room.interest}</h5>
+                  <h5>▷ 참여인원 : {room.member.length}</h5>
+                  <h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
+                  <Row className='justify-content-center'>
+                    <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>
-              : null}
-          </>
+            </div> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
+                <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>} </>}
         </Col>
       </Row>
       <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
@@ -261,5 +266,12 @@ function Home() {
   );
 }
 
-export default Home;
+const Sdiv = styled.div`
+    @media screen and (max-width: 768px) {
+     display: ${({ chat }) => {
+    return chat === false ? 'block' : 'none'
+  }}
+   }
+`
 
+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';
 
@@ -38,8 +38,6 @@ function LogIn() {
             setSucces(true)
         } catch (error) {
             catchErrors(error, setError)
-            //setError(error.response.data)
-            //error객체가 들어감. 
         } finally {
             setLoading(false)
         }
@@ -91,11 +89,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

@@ -126,7 +126,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>
@@ -136,10 +136,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>
-                                <Link to='/'>
-                                    <Button variant="outline-success" size="sm" className="ml-4" >홈 화면으로</Button>
-                                </Link>
+                                <Button size="sm" className="mr-4" type='submit' variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>저장</Button>
+                                <Button href='/' size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>홈 화면으로</Button>
+
                             </Form>
                         </Row>
                     </Col>

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';
@@ -17,7 +17,8 @@ function SingUp() {
     const [user, setUser] = useState(INIT_USER)
     const [error, setError] = useState('')
     const [disabled, setDisabled] = useState(true)
-    const [success, setSuccess] = useState(false)
+    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 AccessInfo from '../models/AccessInfo.js'
 import Chat from "../models/Chat.js"
 import EntryLog from "../models/EntryLog.js"
 
@@ -70,25 +69,6 @@ const getRoomName = async (req, res) => {
     }
 }
 
-// const sysMsg = async (req, res) => {
-//     try {
-//         console.log('sysreq', req.query)
-//         let rmif = await Room.find({ roomId: req.query.roomCode })
-//         console.log('rmif', rmif)
-//         let rmid = await AccessInfo.find({ room: rmif._id })
-//         console.log('rmid', rmid)
-
-//         if (rmid.isEnt) {
-//             let msg = `${rmif.nickname}이 들어왔습니다`
-//         } else {
-
-//         }
-
-//     } catch (error) {
-//         res.status(500).send('')
-//     }
-// }
-
 const changemember = async (req, res) => {
     const { userId, roomId } = req.body
     // console.log(roomId)
@@ -127,10 +107,7 @@ 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)
     } catch (error) {
         alert('올바르지 못한 접근입니다.')
@@ -145,7 +122,7 @@ const unreadMessage = async (req, res) => {
         for (const key in Object.keys(leaveInfo)) {
             leaveInfo[key] = JSON.parse(leaveInfo[key]) //형식좀 제대로 맞춰주고
         }
-        
+
         let countArr = []
         for (const key in Object.keys(leaveInfo)) {
             const room = await Room.findOne({ roomId: leaveInfo[key].roomCode })    //들어온 방 코드로 그 방의 정보 찾아옴

server/controllers/roomEnter.controller.js

@@ -5,16 +5,13 @@ import EntryLog from "../models/EntryLog.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)
 

server/controllers/user.controller.js

@@ -86,7 +86,6 @@ const getProfile = (req, res) => {
 const checkUser = async (req, res) => {
     try {
         const info = await User.findOne({ _id: req.query._id })
-        console.log('info 확인', info)
         return res.json(info)
     } catch (error) {
         console.log(error)

server/models/Room.js

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

server/models/User.js

@@ -35,11 +35,10 @@ const UserSchema = new mongoose.Schema({
         default: '3cd14b9bcb2007f324fcb82e0b566cce',
     },
 }, {
-    //옵셥을 정의함.
+   
     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/server.js

@@ -33,13 +33,7 @@ io.on("connection", (socket) => { // 기본 연결
     let roomInfo = data;
     socket.leave(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 })
@@ -76,4 +70,4 @@ server.listen(3030, () => {
 })
 
 export default server
-// module.exports = server;
+// module.exports = server;
\ No newline at end of file