0127에러뜸

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,26 +126,23 @@ function Chat(props) {
 
 
   return (
-    <>
-      <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>
-          <Col>
-            <Row style={{ fontWeight: "bold", fontSize: "x-large" }}> {props.roomName} </Row>
-            <Row > {props.roomCode} </Row>
-          </Col>
-          <Col md="auto">
-            <Button variant="light" onClick={() => setExit(!exit)}>{'='}</Button>
-          </Col>
-        </Row>
-        {exit ?
-          <Row style={{margin: "1%", backgroundColor: "#F8F9FA", borderRadius: "30px", height: "50px"}}>
-            <Col style={{fontWeight:"bold", margin: "1%"}}>퇴장하시겠습니까?</Col>
-            <Col md="auto"><Button variant="light" onClick={exitAndCloseRoom} style={{fontWeight:"bold"}}>{"나가기"}</Button></Col>
-          </Row>
-          : null}
+    <div id="chat" style={{display:"flex", flexDirection:"column", justifyContent:"space-between", padding:'15px', width:"100%", height:"600px", position:"relative"}}>
+      <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", borderColor: "9174ad", width: "100%", height: "80px" }}>
+        <a onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#513B66" /></a>
+        <div style={{ justifyContent: "center" }}>
+          <p style={{ color: "#513B66", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </p>
+          <p style={{ 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="#513B66" /></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 onClick={exitAndCloseRoom}><BsCheck size="1em" color="#F2D788" /></a>
+          <a onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
+        </div>
+        : null}
+      <Container id="chat-body" style={{ overflow: 'auto', padding: '15px', width:"100%", margin: "1%", background: '' }}>
         {chat.map((value, index) => {
           if (!(value.msg === '')) {
             if (value.sender === "system") {
@@ -183,18 +181,16 @@ function Chat(props) {
           }
         })
         }
-
       </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" }}>전송
+      <Form onSubmit={sendMsgCH} style={{width:"100%", height:"40px", position:"absolute", bottom:"0"}}>
+        <Form.Group style={{display:"flex", flexDirection:"row", justifyContent:"space-evenly"}}>
+          <Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ borderColor: "#9174ad", width:"75%" }} />
+          <Button className="ml-1" type="submit" disabled={disabled} style={{ width: "15%", backgroundColor: "#513B66" }}>
+            <FiSend size="1em" color="FAFAFA" />
           </Button>
         </Form.Group>
       </Form>
-    </>
-
-
+    </div>
   );
 }
 

package.json

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