e

client/src/Components/Chat.js

@@ -126,8 +126,8 @@ 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%" }}>
+      <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%" }}>
           <Col md="auto">
             <Button variant="light" onClick={handleClick} >{`<`}</Button>
           </Col>
@@ -145,49 +145,51 @@ function Chat(props) {
             <Col md="auto"><Button variant="light" onClick={exitAndCloseRoom}>{"나가기"}</Button></Col>
           </Row>
           : null}
-        {chat.map((value, index) => {
-          if (!(value.msg === '')) {
-            if (value.sender === "system") {
-              return (
-                <Row className='border' style={{ background: "#FFFAFA" }}>
-                  {value.msg}
-                </Row>
-              )
-            } else if (!(value.sender === user.nickname)) {
-              return (
-                <Row key={index} className='m-1' >
-                  <Col xs={2}>
-                    <Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle />
-                  </Col>
-                  <Col xs={8}>
-                    <Row><strong>{value.sender}</strong></Row>
-                    <Row className='d-flex flex-wrap-nowrap'>
-                      <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>
+        <div className="m-2" style={{ overflow: 'auto', padding: '20px', margin: "1%", height: "370px" }}>
+          {chat.map((value, index) => {
+            if (!(value.msg === '')) {
+              if (value.sender === "system") {
+                return (
+                  <Row className='border' style={{ background: "#FFFAFA" }}>
+                    {value.msg}
+                  </Row>
+                )
+              } else if (!(value.sender === user.nickname)) {
+                return (
+                  <Row key={index} className='m-1' >
+                    <Col xs={2}>
+                      <Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle />
+                    </Col>
+                    <Col xs={8}>
+                      <Row><strong>{value.sender}</strong></Row>
+                      <Row className='d-flex flex-wrap-nowrap'>
+                        <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>
-                  </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>
-              )
+                )
+              }
+            } else {
+              return null
             }
-          } else {
-            return null
+          })
           }
-        })
-        }
+        </div>
 
       </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" }}  />
+          <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>
         </Form.Group>