Commit 7082d454 authored by 우지원's avatar 우지원
Browse files

채팅방

parent 554c02b8
...@@ -142,7 +142,7 @@ function Chat(props) { ...@@ -142,7 +142,7 @@ function Chat(props) {
<a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a> <a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
</div> </div>
: null} : null}
<div id="chat-body" style={{ overflow: 'auto', paddingRight: '15px', width: "100%", height: "400px", margin: "1%", background: '' }}> <div id="chat-body" style={{ overflow: 'auto', paddingRight: '15px', width: "95vw", height: "400px", background: '' }}>
{chat.map((value, index) => { {chat.map((value, index) => {
if (!(value.msg === '')) { if (!(value.msg === '')) {
if (value.sender === "system") { if (value.sender === "system") {
...@@ -153,11 +153,11 @@ function Chat(props) { ...@@ -153,11 +153,11 @@ function Chat(props) {
) )
} else if (!(value.sender === user.nickname)) { } else if (!(value.sender === user.nickname)) {
return ( return (
<Row key={index} className='d-flex flex-wrap-nowrap mt-2'> <Row key={index} className='d-flex flex-wrap-nowrap mt-2' style={{width:"100%"}}>
<Col xs="auto"> <Col xs="auto">
<Image src={value.img && `/images/${value.img}`} style={{ width: "55px", height: "55px" }} roundedCircle /> <Image src={value.img && `/images/${value.img}`} style={{ width: "55px", height: "55px" }} roundedCircle />
</Col> </Col>
<Col className="ml-2"> <Col className="ml-2 d-flex flex-wrap-nowrap">
<Row><strong>{value.sender}</strong></Row> <Row><strong>{value.sender}</strong></Row>
<Row className='d-flex flex-wrap-nowrap'> <Row className='d-flex flex-wrap-nowrap'>
<Col style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Col> <Col style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Col>
...@@ -168,10 +168,10 @@ function Chat(props) { ...@@ -168,10 +168,10 @@ function Chat(props) {
) )
} else { } else {
return ( //내가 보낸 메시지 return ( //내가 보낸 메시지
<Row key={index} className='mt-2 justify-content-end'> <Row key={index} className='mt-2 justify-content-end' style={{width:"100%"}}>
<Row className='d-flex flex-wrap-nowrap' > <Row className='d-flex flex-wrap-nowrap' >
<Col xs="auto" className="ml-3">{value.time}</Col> <Col xs="auto" className="ml-3">{value.time}</Col>
<Col className='mr-2' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Col> <Col className='mr-3' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Col>
</Row> </Row>
</Row> </Row>
) )
......
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