Skip to content

GitLab

Commit db0836db authored by 우지원's avatar 우지원
Browse files

Merge remote-tracking branch 'origin/sooModalTest' into jiweon827

parents 501b8de9 8dfaaaab
Hide whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ db0836db
...@@ -3,7 +3,8 @@ import React, { useState, useEffect } from 'react'; ...@@ -3,7 +3,8 @@ import React, { useState, useEffect } from 'react';
import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap'; import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap';
import { isAuthenticated } from '../utils/auth'; import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors'; import catchErrors from '../utils/catchErrors';
import { BsCaretLeftFill, BsList, BsExclamationCircleFill, BsCheck, BsX } from "react-icons/bs";
import { FiSend } from "react-icons/fi";
const INIT_CHAT = { const INIT_CHAT = {
msg: '', msg: '',
...@@ -125,78 +126,75 @@ function Chat(props) { ...@@ -125,78 +126,75 @@ function Chat(props) {
return ( return (
<> <div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "580px", position: "relative" }}>
<Container id="chat" style={{ padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#9174ad", background: '' }}> <div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}>
<Row className="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#9174ad", height: "80px", margin: "1%" }}> <a onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
<Col md="auto"> <div style={{ justifyContent: "center" }}>
<Button variant="light" onClick={handleClick} >{`<`}</Button> <p style={{ color: "#333333", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </p>
</Col> <p style={{ color: "#333333", fontSize: "0.8em", textAlign: "center", margin: "0.5px 0px 0px 0px" }}> {props.roomCode} </p>
<Col> </div>
<Row style={{ fontWeight: "bold", fontSize: "x-large" }}> {props.roomName} </Row> <a onClick={() => setExit(!exit)} style={{ margin: "0px 15px 0px 0px" }}><BsList size="20" color="#333333" /></a>
<Row > {props.roomCode} </Row> </div>
</Col> {exit ?
<Col md="auto"> <div id="chat-exit-check" style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center", margin: "1%", backgroundColor: "#30284D", borderRadius: "5px", height: "50px" }}>
<Button variant="light" onClick={() => setExit(true)}>{'='}</Button> <p style={{ width: "70%", color: "#FAFAFA", fontSize: "1em", margin: "0px 10px 0px 20px" }}><BsExclamationCircleFill size="1em" color="#F2D788" /> 퇴장하시겠습니까?</p>
</Col> <a onClick={exitAndCloseRoom}><BsCheck size="1em" color="#F2D788" /></a>
</Row> <a onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
{exit ? </div>
<Row> : null}
<Col>퇴장하시겠습니까?</Col> <div id="chat-body" style={{ overflow: 'auto', padding: '15px', width: "100%", height: "400px", margin: "1%", background: '' }}>
<Col md="auto"><Button variant="light" onClick={exitAndCloseRoom}>{"나가기"}</Button></Col> {chat.map((value, index) => {
</Row> if (!(value.msg === '')) {
: null} if (value.sender === "system") {
<div className="m-2" style={{ overflow: 'auto', padding: '20px', margin: "1%", height: "370px" }}> return (
{chat.map((value, index) => { <Row className='border' style={{ background: "#FFFAFA" }}>
if (!(value.msg === '')) { {value.msg}
if (value.sender === "system") { </Row>
return ( )
<Row className='border' style={{ background: "#FFFAFA" }}> } else if (!(value.sender === user.nickname)) {
{value.msg} return (
</Row> <Row key={index} className='m-1' >
) <Col xs={2}>
} else if (!(value.sender === user.nickname)) { <Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle />
return ( </Col>
<Row key={index} className='m-1' > <Col xs={8}>
<Col xs={2}> <Row><strong>{value.sender}</strong></Row>
<Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle /> <Row className='d-flex flex-wrap-nowrap'>
</Col> <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 xs={8}> <Col className='ml-1'>{value.time}</Col>
<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> </Row>
</Row> </Col>
) </Row>
} )
} else { } else {
return null 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: 'px', fontSize: 'x-large' }}>{value.msg}</Row>
</Row>
</Row>
)
} }
}) } else {
return null
} }
})
}
</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>
</Container > </div>
<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" }} />
<Button className="ml-1" type="submit" disabled={disabled} style={{ width: '25%', backgroundColor: "#9174ad", borderColor: "#9174ad" }}>전송
</Button>
</Form.Group>
</Form>
</>
); );
} }
......
client/src/Pages/HomePage.js
View file @ db0836db
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Row, Col, Button, Tabs, Tab } from 'react-bootstrap'; import { Row, Col, Button, Tabs, Tab } from 'react-bootstrap';
import styled from 'styled-components';
import ClosedList from '../Components/ClosedList'; import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList'; import OpenList from '../Components/OpenList';
import Menu from '../Components/Menu'; import Menu from '../Components/Menu';
...@@ -170,16 +171,25 @@ function Home() { ...@@ -170,16 +171,25 @@ function Home() {
<Menu /> <Menu />
<Row className="mr-0"> <Row className="mr-0">
<Col className="list" md={5}> <Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" > {/* <Navbar>
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} > <Navbar.Toggle aria-controls="basic-navbar-nav" />
<ClosedList closedlist={closedlist} singleChat={singleChat} recievedMsg={recievedMsg} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} /> <Navbar.Collapse>
</Tab> <Nav> */}
<Tab eventKey="open" title="공개방" onClick={handleChatc}> <Sdiv chat={chat}>
<OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} /> <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
</Tab> <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
</Tabs> <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>
<Col style={{ padding: "0" }}> <Col style={{ padding: "5px", marginLeft: "15px" }}>
<> <>
{(show || chat) ? {(show || chat) ?
null null
...@@ -216,4 +226,12 @@ function Home() { ...@@ -216,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; export default Home;
\ No newline at end of file
package.json
View file @ db0836db
...@@ -27,7 +27,9 @@ ...@@ -27,7 +27,9 @@
"multer": "^1.4.2", "multer": "^1.4.2",
"nanoid": "^3.1.20", "nanoid": "^3.1.20",
"nodemon": "^2.0.6", "nodemon": "^2.0.6",
"react-icons": "^4.1.0",
"socket.io": "^3.0.5", "socket.io": "^3.0.5",
"styled-components": "^5.2.1",
"validator": "^13.5.2" "validator": "^13.5.2"
} }
} }
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