Skip to content

GitLab

Commit 501b8de9 authored by 우지원's avatar 우지원
Browse files

e

parent 108b1b94
Hide whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ 501b8de9
...@@ -126,8 +126,8 @@ function Chat(props) { ...@@ -126,8 +126,8 @@ function Chat(props) {
return ( return (
<> <>
<Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "9174ad", background: '' }}> <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%" }}> <Row className="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#9174ad", height: "80px", margin: "1%" }}>
<Col md="auto"> <Col md="auto">
<Button variant="light" onClick={handleClick} >{`<`}</Button> <Button variant="light" onClick={handleClick} >{`<`}</Button>
</Col> </Col>
...@@ -145,49 +145,51 @@ function Chat(props) { ...@@ -145,49 +145,51 @@ function Chat(props) {
<Col md="auto"><Button variant="light" onClick={exitAndCloseRoom}>{"나가기"}</Button></Col> <Col md="auto"><Button variant="light" onClick={exitAndCloseRoom}>{"나가기"}</Button></Col>
</Row> </Row>
: null} : null}
{chat.map((value, index) => { <div className="m-2" style={{ overflow: 'auto', padding: '20px', margin: "1%", height: "370px" }}>
if (!(value.msg === '')) { {chat.map((value, index) => {
if (value.sender === "system") { if (!(value.msg === '')) {
return ( if (value.sender === "system") {
<Row className='border' style={{ background: "#FFFAFA" }}> return (
{value.msg} <Row className='border' style={{ background: "#FFFAFA" }}>
</Row> {value.msg}
) </Row>
} else if (!(value.sender === user.nickname)) { )
return ( } else if (!(value.sender === user.nickname)) {
<Row key={index} className='m-1' > return (
<Col xs={2}> <Row key={index} className='m-1' >
<Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle /> <Col xs={2}>
</Col> <Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle />
<Col xs={8}> </Col>
<Row><strong>{value.sender}</strong></Row> <Col xs={8}>
<Row className='d-flex flex-wrap-nowrap'> <Row><strong>{value.sender}</strong></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> <Row className='d-flex flex-wrap-nowrap'>
<Col className='ml-1'>{value.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 ( //내가 보낸 메시지
<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> </Row>
</Col>
</Row>
)
} 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: "#d6c8e3", borderRadius: '3px', fontSize: 'x-large' }}>{value.msg}</Row>
</Row> </Row>
</Row> )
) }
} else {
return null
} }
} else { })
return null
} }
}) </div>
}
</Container > </Container >
<Form onSubmit={sendMsgCH} fluid> <Form onSubmit={sendMsgCH} fluid>
<Form.Group className='d-flex flex-wrap-nowrap justify-content-center m-3'> <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" }} /> <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 className="ml-1" type="submit" disabled={disabled} style={{ width: '25%', backgroundColor: "#9174ad", borderColor: "#9174ad" }}>전송
</Button> </Button>
</Form.Group> </Form.Group>
......
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