Commit 6a147e31 authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0127미디어쿼리2

parent 5b6abe07
...@@ -128,18 +128,18 @@ function Chat(props) { ...@@ -128,18 +128,18 @@ 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" }}> <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" }}> <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> <a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
<div style={{ justifyContent: "center" }}> <div style={{ justifyContent: "center" }}>
<p style={{ color: "#333333", fontWeight: "bold", fontSize: "1.6em", textAlign: "center", margin: "0px 0px 0.5px 0px" }}> {props.roomName} </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> <p style={{ color: "#333333", fontSize: "0.8em", textAlign: "center", margin: "0.5px 0px 0px 0px" }}> {props.roomCode} </p>
</div> </div>
<a onClick={() => setExit(!exit)} style={{ margin: "0px 15px 0px 0px" }}><BsList size="20" color="#333333" /></a> <a href="#;" onClick={() => setExit(!exit)} style={{ margin: "0px 15px 0px 0px" }}><BsList size="20" color="#333333" /></a>
</div> </div>
{exit ? {exit ?
<div id="chat-exit-check" style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center", margin: "1%", backgroundColor: "#30284D", borderRadius: "5px", height: "50px" }}> <div id="chat-exit-check" style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center", margin: "1%", backgroundColor: "#30284D", borderRadius: "5px", height: "50px" }}>
<p style={{ width: "70%", color: "#FAFAFA", fontSize: "1em", margin: "0px 10px 0px 20px" }}><BsExclamationCircleFill size="1em" color="#F2D788" /> 퇴장하시겠습니까?</p> <p style={{ width: "70%", color: "#FAFAFA", fontSize: "1em", margin: "0px 10px 0px 20px" }}><BsExclamationCircleFill size="1em" color="#F2D788" /> 퇴장하시겠습니까?</p>
<a onClick={exitAndCloseRoom}><BsCheck size="1em" color="#F2D788" /></a> <a href="#;" onClick={exitAndCloseRoom}><BsCheck size="1em" color="#F2D788" /></a>
<a onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a> <a href="#;" onClick={() => setExit(!exit)}><BsX size="1em" color="#F2D788" /></a>
</div> </div>
: null} : null}
<div id="chat-body" style={{ overflow: 'auto', padding: '15px', width: "100%", height: "400px", margin: "1%", background: '' }}> <div id="chat-body" style={{ overflow: 'auto', padding: '15px', width: "100%", height: "400px", margin: "1%", background: '' }}>
......
import React from 'react' import React from 'react'
import { Badge, ListGroup } from 'react-bootstrap'; import { Badge, ListGroup } from 'react-bootstrap';
const INIT_LIST = [{
interest: '',
isOpen: '',
memeber: [],
roomId: '',
roomName: '',
}]
function ClosedList(props) { function ClosedList(props) {
function enterChatRoomCH(e) { function enterChatRoomCH(e) {
......
import React from 'react' import React, { useState } from 'react'
import { Navbar, Nav } from 'react-bootstrap'; import { Navbar, Nav } from 'react-bootstrap';
import { handleLogout } from '../utils/auth'; import { handleLogout } from '../utils/auth';
import styled from 'styled-components';
import { BsPeopleCircle } from "react-icons/bs";
import { AiOutlineLogout } from "react-icons/ai";
function Menu() { function Menu() {
const [showIcon, setShowIcon] = useState(false);
const name = sessionStorage.getItem('name'); const name = sessionStorage.getItem('name');
console.log('showIcon', showIcon)
return ( return (
<Navbar style={{ backgroundColor: "#61477a" }} variant="dark"> <MenuDiv setShowIcon={setShowIcon}>
<div className="container-fluid"> <Navbar style={{ backgroundColor: "#61477a", heigth: "100%" }} variant="dark">
<Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand> <div className="container-fluid">
{name ? <Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
<> {name ?
<Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}> <>
<Nav.Item className="mt-2 mr-4">{name} 환영합니다</Nav.Item> <Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}>
<Nav.Link href="/profile">Profile</Nav.Link> <Nav.Item className="mt-2 mr-4">{name} 환영합니다</Nav.Item>
<Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link> { showIcon ?
</Nav> <a href="/profile"><BsPeopleCircle size="15" color="#FFFFFF"/></a>
</> :<Nav.Link href="/profile">Profile</Nav.Link>}
: <> { showIcon ?
<Nav className="nav navbar-nav"> <a href="/login" onClick={() => handleLogout()}><AiOutlineLogout size="15" color="#FFFFFF"/></a>
<Nav.Link href="/login">Login</Nav.Link> :<Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link>}
<Nav.Link href="/signup">Signup</Nav.Link> </Nav>
</Nav> </>
</>} : <>
</div> <Nav className="nav navbar-nav">
</Navbar> <Nav.Link href="/login">Login</Nav.Link>
<Nav.Link href="/signup">Signup</Nav.Link>
</Nav>
</>}
</div>
</Navbar>
</MenuDiv>
) )
} }
const MenuDiv = styled.div`
@media (max-width: 500px) {
display: 'none';
}
`
export default Menu export default Menu
...@@ -170,14 +170,10 @@ function Home() { ...@@ -170,14 +170,10 @@ function Home() {
}, []) }, [])
return ( return (
<> <div style={{weight: "100vw", height:"100vh", backgroundColor: "#4A5D7E"}}>
<Menu /> <Menu style={{weight:"100%", height: "10%"}}/>
<Row className="mr-0"> <Row className="mr-0" style={{weight:"100%", height: "80%"}}>
<Col className="list" md={5}> <Col className="list" md={5}>
{/* <Navbar>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse>
<Nav> */}
<Sdiv chat={chat}> <Sdiv chat={chat}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" > <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} > <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
...@@ -188,9 +184,6 @@ function Home() { ...@@ -188,9 +184,6 @@ function Home() {
</Tab> </Tab>
</Tabs> </Tabs>
</Sdiv> </Sdiv>
{/* </Nav>
</Navbar.Collapse>
</Navbar> */}
</Col> </Col>
<Col style={{ padding: "5px", marginLeft: "15px" }}> <Col style={{ padding: "5px", marginLeft: "15px" }}>
<> <>
...@@ -204,7 +197,7 @@ function Home() { ...@@ -204,7 +197,7 @@ function Home() {
{chat ? {chat ?
<Chat handleChatc={handleChatc} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} /> <Chat handleChatc={handleChatc} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} />
: null} : null}
{open ? {(open && !chat) ?
<div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark"> <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="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75"> <div className="mt-5 p-5 shadow w-75">
...@@ -225,7 +218,7 @@ function Home() { ...@@ -225,7 +218,7 @@ function Home() {
</Row> </Row>
<RoomMake showModal={showModal} handleCloseModal={handleCloseModal} /> <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
<EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} sysmsg={sysmsg} setSysmsg={setSysmsg} /> <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} sysmsg={sysmsg} setSysmsg={setSysmsg} />
</> </div>
); );
} }
......
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