Commit e4f87946 authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0122 최종수정

parent 0bfa56e9
......@@ -73,7 +73,7 @@ function Chat(props) {
const time = new Date().toLocaleTimeString()
return (
<div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
<Row class="d-flex justify-content-center" style={{ border:"2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px", margin: "1%" }}>
<Row className="d-flex justify-content-center" style={{ border:"2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px", margin: "1%" }}>
<Col md="auto">
<Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
</Col>
......
......@@ -24,6 +24,7 @@ function EnterRoom(props) {
let res = await axios.post('/room/enterRoom', { enterCode })
await axios.put('/room/member', { userId: userId, roomId: enterCode })
props.setRoomName(res.data)
props.setRoomCode(enterCode)
props.enterChatRoom(enterCode)
props.handleCloseEnter()
props.handleChato()
......
......@@ -22,11 +22,11 @@ const INIT_ROOM = {
function Home() {
const [showModal, setShowModal] = useState(false);
const [showEnter, setEnter] = useState(false);
const [showEnter, setShowEnter] = useState(false);
const [chat, setChat] = useState(false);
const [open, setOpen] = useState(false);
const [room, setRoom] = useState(INIT_ROOM)
const [show, setShow] = useState(true)
const [show, setShow] = useState(false)
//소켓
const [singleChat, setSingleChat] = useState('')
......@@ -39,10 +39,10 @@ function Home() {
const handleCloseModal = () => setShowModal(false);
const handleShowModal = () => setShowModal(true);
const handleCloseEnter = () => setEnter(false);
const handleShowEnter = () => setEnter(true);
const handleCloseEnter = () => setShowEnter(false);
const handleShowEnter = () => setShowEnter(true);
const handleChato = () => setChat(true);
const handleChatc = () => setOpen(true);
const handleChatc = () => setChat(false);
......@@ -61,6 +61,7 @@ function Home() {
console.log(roomInf.data)
console.log(roomInf.data[0])
setRoom(roomInf.data[0])
setOpen(true)
setShow(false)
}
......@@ -108,46 +109,46 @@ function Home() {
<Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
<ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode}/>
<ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
</Tab>
<Tab eventKey="open" title="공개방" onClick={handleChato}>
<OpenList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode}/>
<Tab eventKey="open" title="공개방" onClick={handleChatc}>
<OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
</Tab>
</Tabs>
</Col>
<Col style={{ padding: "0" }}>
{show ? <>
{chat ?
<Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} roomName={roomName} />
<>
{(show || chat) ?
null
: <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
<Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
</div>}
</> : <>
{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">
<h2 className="d-flex justify-content-center mb-3">현재 {room.roomName} 입니다.</h2>
<h5> 관심분야 : {room.interest}</h5>
<h5> 참여인원 : {room.member.length}</h5>
<h5 className="mb-3"> 방코드(방코드를 통해서도 참여할 있습니다.) : {room.roomId}</h5>
<Row className='justify-content-center'>
<Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
<Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
</Row>
</div>
</div>
}
{chat ?
<Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} recievedMsg={recievedMsg} setSingleChat={setSingleChat} roomCode={roomCode} roomName={roomName} />
: null}
{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">
<h2 className="d-flex justify-content-center mb-3">현재 {room.roomName} 입니다.</h2>
<h5> 관심분야 : {room.interest}</h5>
<h5> 참여인원 : {room.member.length}</h5>
<h5 className="mb-3"> 방코드(방코드를 통해서도 참여할 있습니다.) : {room.roomId}</h5>
<Row className='justify-content-center'>
<Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
<Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
</Row>
</div>
</div> :
<div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
<Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
</div>}
</>}
</div>
</div>
: null}
</>
</Col>
</Row>
<RoomMake showModal={showModal} handleCloseModal={handleCloseModal} handleChato={handleChato}/>
<EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName}/>
<RoomMake showModal={showModal} handleCloseModal={handleCloseModal} handleChato={handleChato} />
<EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
</>
);
}
......
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