0127 채팅테마

client/src/Components/Chat.js

@@ -126,14 +126,14 @@ function Chat(props) {
 
 
   return (
-    <div id="chat" style={{display:"flex", flexDirection:"column", justifyContent:"space-between", padding:'15px', width:"100%", height:"600px", position:"relative"}}>
-      <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", borderColor: "9174ad", width: "100%", height: "80px" }}>
-        <a onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#513B66" /></a>
+    <div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "580px", position: "relative" }}>
+      <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}>
+        <a onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
         <div style={{ justifyContent: "center" }}>
-          <p style={{ color: "#513B66", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </p>
-          <p style={{ fontSize: "0.8em", textAlign: "center", margin: "0.5px 0px 0px 0px" }}> {props.roomCode} </p>
+          <p style={{ color: "#333333", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </p>
+          <p style={{ color: "#333333", fontSize: "0.8em", textAlign: "center", margin: "0.5px 0px 0px 0px" }}> {props.roomCode} </p>
         </div>
-        <a onClick={() => setExit(!exit)} style={{ margin: "0px 15px 0px 0px" }}><BsList size="20" color="#513B66" /></a>
+        <a onClick={() => setExit(!exit)} style={{ margin: "0px 15px 0px 0px" }}><BsList size="20" color="#333333" /></a>
       </div>
       {exit ?
         <div id="chat-exit-check" style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center", margin: "1%", backgroundColor: "#30284D", borderRadius: "5px", height: "50px" }}>
@@ -142,7 +142,7 @@ function Chat(props) {
           <a onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
         </div>
         : null}
-      <Container id="chat-body" style={{ overflow: 'auto', padding: '15px', width:"100%", margin: "1%", background: '' }}>
+      <div id="chat-body" style={{ overflow: 'auto', padding: '15px', width: "100%", height: "400px", margin: "1%", background: '' }}>
         {chat.map((value, index) => {
           if (!(value.msg === '')) {
             if (value.sender === "system") {
@@ -171,7 +171,7 @@ function Chat(props) {
                 <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 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>
                   </Row>
                 </Row>
               )
@@ -181,15 +181,19 @@ function Chat(props) {
           }
         })
         }
-      </Container >
-      <Form onSubmit={sendMsgCH} style={{width:"100%", height:"40px", position:"absolute", bottom:"0"}}>
-        <Form.Group style={{display:"flex", flexDirection:"row", justifyContent:"space-evenly"}}>
-          <Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ borderColor: "#9174ad", width:"75%" }} />
-          <Button className="ml-1" type="submit" disabled={disabled} style={{ width: "15%", backgroundColor: "#513B66" }}>
-            <FiSend size="1em" color="FAFAFA" />
-          </Button>
-        </Form.Group>
-      </Form>
+      </div>
+      <div id="chat-low-side" style={{ width: "95%", height: "60px", position: "absolute", bottom: "0", padding: "10px 5px 5px 10px" }}>
+        <div id="chat-form" style={{ width: "100%", height: "100%", borderStyle: "solid", borderWidth: "2px", borderColor: "#C1C1C1", borderRadius: "25px", padding: "3px 2px 2px 3px" }}>
+          <Form onSubmit={sendMsgCH}>
+            <Form.Group style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}>
+              <Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ width: "80%", height: "90%", borderColor: "#FFFFFF" }} />
+              <Button type="submit" disabled={disabled} style={{ justifyContent: "center", width: "10%", height: "90%", borderRadius: "20px", backgroundColor: "#C1C1C1", borderColor: "#FFFFFF" }}>
+                <FiSend size="16px" color="FAFAFA" />
+              </Button>
+            </Form.Group>
+          </Form>
+        </div>
+      </div>
     </div>
   );
 }

client/src/Pages/HomePage.js

 import React, { useState, useEffect } from 'react';
 import { Row, Col, Button, Tabs, Tab } from 'react-bootstrap';
+import styled from 'styled-components';
 import ClosedList from '../Components/ClosedList';
 import OpenList from '../Components/OpenList';
 import Menu from '../Components/Menu';
@@ -174,20 +175,21 @@ function Home() {
             <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse>
               <Nav> */}
-          <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
-            <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-              <ClosedList closedlist={closedlist} singleChat={singleChat} recievedMsg={recievedMsg} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
-            </Tab>
-            <Tab eventKey="open" title="공개방" onClick={handleChatc}>
-              <OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
-            </Tab>
-          </Tabs>
+          <Sdiv chat={chat}>
+            <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
+              <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
+                <ClosedList closedlist={closedlist} singleChat={singleChat} recievedMsg={recievedMsg} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
+              </Tab>
+              <Tab eventKey="open" title="공개방" onClick={handleChatc}>
+                <OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
+              </Tab>
+            </Tabs>
+          </Sdiv>
           {/* </Nav>
             </Navbar.Collapse>
           </Navbar> */}
-
         </Col>
-        <Col style={{ padding: "0" }}>
+        <Col style={{ padding: "5px", marginLeft: "15px" }}>
           <>
             {(show || chat) ?
               null
@@ -224,4 +226,12 @@ function Home() {
   );
 }
 
+const Sdiv = styled.div`
+    @media screen and (max-width: 768px) {
+     display: ${({ chat }) => {
+     return chat === false ? 'block' : 'none'
+    }}
+   }
+`
+
 export default Home;
\ No newline at end of file

package.json

@@ -29,6 +29,7 @@
     "nodemon": "^2.0.6",
     "react-icons": "^4.1.0",
     "socket.io": "^3.0.5",
+    "styled-components": "^5.2.1",
     "validator": "^13.5.2"
   }
 }