Commit 0ab8917f authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0127에러뜸

parent 7b2efa8f
......@@ -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>
<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 ?
<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>
<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>
);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment