채팅방

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", margin: "1%", background: '' }}>
+      <div id="chat-body" style={{ overflow: 'auto', paddingRight: '15px', width: "95vw", height: "400px", background: '' }}>
         {chat.map((value, index) => {
           if (!(value.msg === '')) {
             if (value.sender === "system") {
@@ -152,12 +152,12 @@ function Chat(props) {
                 </Row>
               )
             } else if (!(value.sender === user.nickname)) {
-              return (
-                <Row key={index} className='d-flex flex-wrap-nowrap mt-2'>
+              return ( 
+                <Row key={index} className='d-flex flex-wrap-nowrap mt-2' style={{width:"100%"}}>
                   <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 d-flex flex-wrap-nowrap">
                     <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>
@@ -168,10 +168,10 @@ function Chat(props) {
               )
             } else {
               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' >
                     <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>
               )