채팅방

client/src/Components/Chat.js

@@ -66,6 +66,7 @@ function Chat(props) {
     props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
     console.log('나간시간', realTime, usualTime)
     setChat([''])
+
     props.handleChatc()
     props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
   }
@@ -141,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', padding: '15px', width: "100%", height: "400px", margin: "1%", 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") {
@@ -152,25 +153,25 @@ function Chat(props) {
               )
             } 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 />
+                <Row key={index} className='d-flex flex-wrap-nowrap mt-2'>
+                  <Col xs="auto">
+                      <Image src={value.img && `/images/${value.img}`} style={{ width: "55px", height: "55px" }} roundedCircle />
                   </Col>
-                  <Col xs={8}>
+                  <Col className="ml-2">
                     <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>
+                      <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>
                   </Col>
                 </Row>
               )
             } else {
               return ( //내가 보낸 메시지
-                <Row key={index} className='m-1 justify-content-end'>
+                <Row key={index} className='mt-2 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: 'px', fontSize: 'x-large' }}>{value.msg}</Row>
+                    <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>
                   </Row>
                 </Row>
               )

client/src/Pages/HomePage.js

@@ -196,9 +196,10 @@ function Home() {
                 <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
                 <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
               </div>} </>
-            : <> {open ? <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
+            : <> {open ? 
+            <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
               <div className="d-flex justify-content-center">
-                <div className="mt-5 p-5 shadow w-75">
+                <div className="mt-5 p-5 mr-2" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', position: "relative" }}>
                   <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName}방 입니다.</h2>
                   <h5>▷ 관심분야 : {room.interest}</h5>
                   <h5>▷ 참여인원 : {room.member.length}</h5>