Skip to content

GitLab

Commit 8dfaaaab authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0127 채팅테마

parent 0ab8917f
Show whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ 8dfaaaab
......@@ -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,16 +181,20 @@ 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" />
</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
View file @ 8dfaaaab
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,6 +175,7 @@ function Home() {
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse>
<Nav> */}
<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} />
......@@ -182,12 +184,12 @@ function Home() {
<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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment