chat

client/src/Components/Chat.js

@@ -142,7 +142,7 @@ function Chat(props) {
           <a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
         </div>
         : null}
-      <div id="chat-body" style={{ overflow: 'auto', paddingRight: '15px', width: "100%", height: "400px", background: '' }}>
+      <div id="chat-body" style={{ overflow: 'auto', paddingRight: '15px', width: "100%", height: "400px", margin: "1%", background: '' }}>
         {chat.map((value, index) => {
           if (!(value.msg === '')) {
             if (value.sender === "system") {
@@ -153,25 +153,25 @@ function Chat(props) {
               )
             } else if (!(value.sender === user.nickname)) {
               return (
-                <Row key={index} className='d-flex flex-wrap-nowrap mt-2' style={{width:"100%"}}>
+                <Row key={index} className='d-flex flex-wrap-nowrap mt-2' style={{ width: "95%", maxWidth: '95%' }}>
                   <Col xs="auto">
                     <Image src={value.img && `/images/${value.img}`} style={{ width: "55px", height: "55px" }} roundedCircle />
                   </Col>
-                  <Col className="ml-2ㄱ">
+                  <Col className="ml-2">
                     <Row><strong>{value.sender}</strong></Row>
-                    <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 xs="auto">{value.time}</Col>
+                    <Row xs="auto" className='d-flex flex-wrap-nowrap'>
+                      <Row style={{ width: 'max-content', maxWidth: '80%', 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='mt-2 justify-content-end' style={{width:"100%"}}>
+                <Row key={index} className='mt-2 justify-content-end' style={{ width: "100%" }}>
                   <Row className='d-flex flex-wrap-nowrap' >
                     <Col xs="auto" className="ml-3">{value.time}</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>
+                    <Col className='mr-1' 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>
               )