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

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: '',
@@ -125,27 +126,23 @@ function Chat(props) {
 
 
   return (
-    <>
-      <Container id="chat" style={{ 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>
-          <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>
+    <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 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 onClick={() => setExit(!exit)} style={{ margin: "0px 15px 0px 0px" }}><BsList size="20" color="#333333" /></a>
+      </div>
       {exit ?
-          <Row>
-            <Col>퇴장하시겠습니까?</Col>
-            <Col md="auto"><Button variant="light" onClick={exitAndCloseRoom}>{"나가기"}</Button></Col>
-          </Row>
+        <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 onClick={exitAndCloseRoom}><BsCheck size="1em" color="#F2D788" /></a>
+          <a onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
+        </div>
         : null}
-        <div className="m-2" style={{ overflow: 'auto', padding: '20px', margin: "1%", height: "370px" }}>
+      <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 === "system") {
@@ -174,7 +171,7 @@ function Chat(props) {
                 <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: "#d6c8e3", 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>
               )
@@ -185,18 +182,19 @@ function Chat(props) {
         })
         }
       </div>
-
-      </Container >
-      <Form onSubmit={sendMsgCH} fluid>
-        <Form.Group className='d-flex flex-wrap-nowrap justify-content-center m-3'>
-          <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" }}>전송
+      <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/Pages/HomePage.js

 import React, { useState, useEffect } from 'react';
 import { Row, Col, Button, Tabs, Tab } from 'react-bootstrap';
+import styled from 'styled-components';
 import ClosedList from '../Components/ClosedList';
 import OpenList from '../Components/OpenList';
 import Menu from '../Components/Menu';
@@ -170,6 +171,11 @@ function Home() {
       <Menu />
       <Row className="mr-0">
         <Col className="list" md={5}>
+          {/* <Navbar>
+            <Navbar.Toggle aria-controls="basic-navbar-nav" />
+            <Navbar.Collapse>
+              <Nav> */}
+          <Sdiv chat={chat}>
             <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
               <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
                 <ClosedList closedlist={closedlist} singleChat={singleChat} recievedMsg={recievedMsg} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
@@ -178,8 +184,12 @@ function Home() {
                 <OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
               </Tab>
             </Tabs>
+          </Sdiv>
+          {/* </Nav>
+            </Navbar.Collapse>
+          </Navbar> */}
         </Col>
-        <Col style={{ padding: "0" }}>
+        <Col style={{ padding: "5px", marginLeft: "15px" }}>
           <>
             {(show || chat) ?
               null
@@ -216,4 +226,12 @@ function 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

package.json

@@ -27,7 +27,9 @@
     "multer": "^1.4.2",
     "nanoid": "^3.1.20",
     "nodemon": "^2.0.6",
+    "react-icons": "^4.1.0",
     "socket.io": "^3.0.5",
+    "styled-components": "^5.2.1",
     "validator": "^13.5.2"
   }
 }