Skip to content

GitLab

Commit 21fb43bd authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

Merge branch 'layout-merge' into 'master' 

Layout merge

See merge request research/bora_it!6
parents 0eb44346 139cdb8c
Hide whitespace changes
Inline Side-by-side
client/src/components/Header.js
View file @ 21fb43bd
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom'
const Header = () => { const Header = () => {
return ( return (
<div> <div>
<form <form
style={{ backgroundColor: "#FCF4FF" }} style={{ backgroundColor: '#FCF4FF' }}
className="flex-column align-items-center justify-content-center p-2" className="flex-column align-items-center justify-content-center p-2"
> >
<div className="d-flex justify-content-center"> <div className="d-flex justify-content-center">
<Link to="/user"> <Link to="/user">
<img src="/BORA.png" style={{ width: "160px" }} /> <img src="/BORA.png" style={{ width: '160px' }} />
</Link> </Link>
</div> </div>
</form> </form>
<div <div
style={{ backgroundColor: "#262626", width: "auto", height: "2px" }} style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
></div> ></div>
</div> </div>
); )
}; }
export default Header; export default Header
client/src/components/Home/AddRoom.js
View file @ 21fb43bd
const AddRoom = () => { const AddRoom = () => {
return ( return (
<form className="m-3"> <div>
<div className="row justify-content-around"> <div className="mx-4 my-3 d-flex justify-content-between">
<div className="col"> <div className="fs-4">
<h4>참여중인 방목록</h4> 참여중인 방목록
</div> </div>
<button <button
type="button" type="button"
className="col-2" className="py-1 px-2"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#myModal" data-bs-target="#myModal"
style={{ backgroundColor: "#FCF4FF", borderColor: "#FCF4FF" }} style={{
display: "flex",
flexDirection: "column",
borderStyle: "solid",
borderRadius: "5px",
backgroundColor: "#E0CEE8",
borderColor: "#E0CEE8",
}}
> >
+ 추가
</button> </button>
</div> </div>
...@@ -28,11 +35,11 @@ const AddRoom = () => { ...@@ -28,11 +35,11 @@ const AddRoom = () => {
></button> ></button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="row justify-content-around mt-4 mb-4"> <div className="row justify-content-evenly mt-4 mb-4 fs-6">
<div className="col-5"> <div className="col-6 d-flex justify-content-center">
<button <button
type="button" type="button"
className="p-4" className="p-3"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#joinModal" data-bs-target="#joinModal"
style={{ style={{
...@@ -40,18 +47,19 @@ const AddRoom = () => { ...@@ -40,18 +47,19 @@ const AddRoom = () => {
flexDirection: "column", flexDirection: "column",
borderStyle: "solid", borderStyle: "solid",
borderRadius: "5px", borderRadius: "5px",
borderColor: "#C4C4C4", backgroundColor: "#E0CEE8",
backgroundColor: "#C4C4C4", borderColor: "#E0CEE8",
padding: "10px",
}} }}
> >
방참여하기 <div style={{ width: "6rem" }} >
방참여하기
</div>
</button> </button>
</div> </div>
<div className="col-5"> <div className="col-6 d-flex justify-content-center">
<button <button
type="button" type="button"
className="p-4" className="p-3"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#makeModal" data-bs-target="#makeModal"
style={{ style={{
...@@ -59,12 +67,13 @@ const AddRoom = () => { ...@@ -59,12 +67,13 @@ const AddRoom = () => {
flexDirection: "column", flexDirection: "column",
borderStyle: "solid", borderStyle: "solid",
borderRadius: "5px", borderRadius: "5px",
borderColor: "#C4C4C4", backgroundColor: "#f5cfe3",
backgroundColor: "#C4C4C4", borderColor: "#f5cfe3",
padding: "10px",
}} }}
> >
방생성하기 <div style={{ width: "6rem" }} >
방생성하기
</div>
</button> </button>
</div> </div>
</div> </div>
...@@ -97,15 +106,7 @@ const AddRoom = () => { ...@@ -97,15 +106,7 @@ const AddRoom = () => {
/> />
</div> </div>
<div className="modal-footer"> <div className="modal-footer">
<button <button type="submit" className="btn btn-primary">
type="button"
className="btn-primary"
style={{
borderStyle: "solid",
borderRadius: "5px",
padding: "15px",
}}
>
확인 확인
</button> </button>
</div> </div>
...@@ -128,11 +129,11 @@ const AddRoom = () => { ...@@ -128,11 +129,11 @@ const AddRoom = () => {
></button> ></button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<h5>방프로필사진</h5> <h6>방프로필사진</h6>
<div className="filebox mb-4"> <div className="mb-4">
<input type="file" id="ex_filename" className="upload-hidden" /> <input type="file" className="upload-hidden" />
</div> </div>
<h5>방이름</h5> <h6>방이름</h6>
<div className="input-group"> <div className="input-group">
<input <input
type="text" type="text"
...@@ -143,15 +144,7 @@ const AddRoom = () => { ...@@ -143,15 +144,7 @@ const AddRoom = () => {
/> />
</div> </div>
<div className="modal-footer"> <div className="modal-footer">
<button <button type="submit" className="btn btn-primary">
type="button"
className="btn-primary"
style={{
borderStyle: "solid",
borderRadius: "5px",
padding: "15px",
}}
>
생성 생성
</button> </button>
</div> </div>
...@@ -159,7 +152,7 @@ const AddRoom = () => { ...@@ -159,7 +152,7 @@ const AddRoom = () => {
</div> </div>
</div> </div>
</div> </div>
</form> </div>
); );
}; };
......
client/src/components/Home/HomeProfile.js
View file @ 21fb43bd
...@@ -12,8 +12,6 @@ const HomeProfile = () => { ...@@ -12,8 +12,6 @@ const HomeProfile = () => {
style={{ style={{
width: "157px", width: "157px",
height: "157px", height: "157px",
borderStyle: "solid",
borderColor: "#262626",
}} }}
/> />
</div> </div>
......
client/src/components/Home/RoomSingle.js
View file @ 21fb43bd
...@@ -6,137 +6,53 @@ const RoomSingle = () => { ...@@ -6,137 +6,53 @@ const RoomSingle = () => {
return ( return (
<Link to={`/room/${id}/${channelId}`} className="text-decoration-none text-dark"> <Link to={`/room/${id}/${channelId}`} className="text-decoration-none text-dark">
<div <div
className="row justify-content-start mx-4 my-2 p-2" className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }} style={{ backgroundColor: "#C4C4C4" }}
> >
<div className="col-2" style={{ width: "37px", height: "37px" }}> <div style={{ width: "37px", height: "37px" }}>
<img <img
src="BORA.png" src="BORA.png"
className="rounded-circle" className="rounded-circle"
style={{ width: "37px", height: "37px" }} style={{ width: "37px", height: "37px" }}
/> />
</div> </div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div> <div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
<div className="col-2 mt-2"> 15/34 </div> 데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
</div> <div className="ms-auto mt-2"> 15/34 </div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="BORA_LOGO.png"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="cherry.jpg"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="BORA_LOGO.png"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div> </div>
<div <div
className="row justify-content-start mx-4 my-2 p-2" className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }} style={{ backgroundColor: "#C4C4C4" }}
> >
<div className="col-2" style={{ width: "37px", height: "37px" }}> <div style={{ width: "37px", height: "37px" }}>
<img <img
src="BORA.png" src="BORA.png"
className="rounded-circle" className="rounded-circle"
style={{ width: "37px", height: "37px" }} style={{ width: "37px", height: "37px" }}
/> />
</div> </div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div> <div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
<div className="col-2 mt-2"> 15/34 </div> 데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
<div className="ms-auto mt-2"> 15/34 </div>
</div> </div>
<div <div
className="row justify-content-start mx-4 my-2 p-2" className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }} style={{ backgroundColor: "#C4C4C4" }}
> >
<div className="col-2" style={{ width: "37px", height: "37px" }}> <div style={{ width: "37px", height: "37px" }}>
<img
src="cherry.jpg"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="BORA_LOGO.png"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img <img
src="BORA.png" src="BORA.png"
className="rounded-circle" className="rounded-circle"
style={{ width: "37px", height: "37px" }} style={{ width: "37px", height: "37px" }}
/> />
</div> </div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div> <div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
<div className="col-2 mt-2"> 15/34 </div> 데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
</div> <div className="ms-auto mt-2"> 15/34 </div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="cherry.jpg"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div> </div>
</Link> </Link >
); );
}; };
......
client/src/components/Profile/Info.js
View file @ 21fb43bd
...@@ -4,14 +4,14 @@ const Info = () => { ...@@ -4,14 +4,14 @@ const Info = () => {
return ( return (
<div className="container" style={{ background: "#FCF4FF" }}> <div className="container" style={{ background: "#FCF4FF" }}>
<div <div
className="row justify-content-center mx-1" className="row justify-content-center my-4"
style={{ fontSize: "25px", fontWeight: "bold" }} style={{ fontSize: "25px", fontWeight: "bold" }}
> >
CHERRY #0805 CHERRY #0805
</div> </div>
<div className="row"> <div className="row">
<div className="col-3"></div> <div className="col-3"></div>
<div className="col-6 my-5"> <div className="col-6 my-2">
<h2 className="mb-3" style={{ fontSize: "13px", fontWeight: "bold" }}> <h2 className="mb-3" style={{ fontSize: "13px", fontWeight: "bold" }}>
이름 이름
</h2> </h2>
......
client/src/components/Profile/InfoUpdate.js
View file @ 21fb43bd
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
const InfoUpdate = () => { const InfoUpdate = () => {
function inputfile(){
console.log('aa')
}
const id = 1; const id = 1;
const number = 1234;
return ( return (
<div class="container" style={{ background: "#FCF4FF" }}> <div className="container" style={{ background: "#FCF4FF" }}>
<div class="row"> <div className="row">
<div> <div>
<label <label
class="form-label mx-2 my-4" className="form-label mx-2 my-4"
style={{ fontSize: "18px", fontWeight: "bold" }} style={{ fontSize: "18px", fontWeight: "bold" }}
> >
프로필 정보 프로필 정보
...@@ -15,46 +20,88 @@ const InfoUpdate = () => { ...@@ -15,46 +20,88 @@ const InfoUpdate = () => {
<Link to={`/profile/${id}`}> <Link to={`/profile/${id}`}>
<button <button
type="button" type="button"
class="btn btn-outline-white " className="btn btn-outline-white "
style={{ style={{
background: "#E8B7FF", background: "#E8B7FF",
fontSize: "13px", fontSize: "13px",
fontWeight: "bold", fontWeight: "bold",
}} }}
> >
확인 돌아가기
</button> </button>
</Link> </Link>
</div> </div>
</div> </div>
<div class="col"></div>
<div class="col"> <div className="col">
<div> <div>
<div class="row"> <div className="row">
<div className="d-flex justify-content-center"> <div className="d-flex justify-content-center">
<img <img
src="/cherry.jpg" src="/cherry.jpg"
className="rounded-circle" id="imgfile"
className="rounded-circle mt-2"
style={{ height: "320px", width: "320px" }} style={{ height: "320px", width: "320px" }}
/> />
</div> </div>
<div <div className="mt-2 d-flex justify-content-end">
className="row justify-content-center my-3 mx-1" <label for='inputfile' style={{ fontSize: "13px", fontWeight: "bold" }}>사진 선택</label>
style={{ fontSize: "25px", fontWeight: "bold" }} <input type="file" id='inputfile' style={{display:'none'}}/>
> </div>
CHERRY #0805 <div className="col d-flex justify-content-center">
<input
type="text"
className="form-control my-4 "
placeholder="사용자명 입력"
style={{
background: "#fcf4ff",
borderTop: "0",
borderRight: "0",
borderLeft: "0",
borderBottom: "1",
borderColor: "#E8B7FF",
height: "38px",
width: "130px",
}}
/>
<div
className="justify-content-center ms-2 my-4"
style={{ fontSize: "25px", fontWeight: "bold" }}
>
#{number}
</div>
</div>
<div className="d-flex justify-content-center">
<label
class="form-label me-3"
style={{
outline: "none",
fontSize: "13px",
fontWeight: "bold",
}}
>
현재 비밀번호
</label>
<input
type="text"
class="form-control"
style={{ height: "38px", width: "200px" }}
/>
<button
type="button"
className="btn btn-outline-white ms-2"
style={{
background: "#E8B7FF",
fontSize: "13px",
fontWeight: "bold",
}}
>
수정하기
</button>
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="input-group mx-2 my-3"> <div class="input-group mx-2 my-3">
<div>
<label
class="form-label "
style={{ fontSize: "13px", fontWeight: "bold" }}
>
현재 비밀번호
</label>
<input type="text" class="form-control" />
</div>
<div> <div>
<label <label
class="form-label" class="form-label"
...@@ -62,54 +109,44 @@ const InfoUpdate = () => { ...@@ -62,54 +109,44 @@ const InfoUpdate = () => {
> >
새 비밀번호 새 비밀번호
</label> </label>
<input type="text" class="form-control" /> <input type="text" className="form-control" />
</div> </div>
<div> <div>
<label <label
class="form-label" className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }} style={{ fontSize: "13px", fontWeight: "bold" }}
> >
새 비밀번호 확인 새 비밀번호 확인
</label> </label>
<input type="text" class="form-control" /> <input type="text" className="form-control" />
</div> </div>
</div> </div>
</div> </div>
<div class="col-6"> <div className="col-6">
<div class="input-group my-3 "> <div className="input-group my-3 ">
<div> <div>
<label <label
class="form-label" className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
현재 전화번호
</label>
<input type="text" class="form-control" />
</div>
<div>
<label
class="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }} style={{ fontSize: "13px", fontWeight: "bold" }}
> >
새 전화번호 새 전화번호
</label> </label>
<input type="text" class="form-control" /> <input type="text" className="form-control" />
</div> </div>
<div> <div>
<label <label
class="form-label" className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }} style={{ fontSize: "13px", fontWeight: "bold" }}
> >
새 전화번호 확인 새 전화번호 확인
</label> </label>
<input type="text" class="form-control" /> <input type="text" className="form-control" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col"></div>
</div> </div>
); );
}; };
......
client/src/components/Profile/Profile.js
View file @ 21fb43bd
...@@ -8,7 +8,7 @@ const Profile = () => { ...@@ -8,7 +8,7 @@ const Profile = () => {
<div className="row"> <div className="row">
<form> <form>
<label <label
class="form-label mx-2 my-4" className="form-label mx-2 my-4"
style={{ fontSize: "18px", fontWeight: "bold" }} style={{ fontSize: "18px", fontWeight: "bold" }}
> >
프로필 정보 프로필 정보
...@@ -32,7 +32,7 @@ const Profile = () => { ...@@ -32,7 +32,7 @@ const Profile = () => {
<div className="d-flex justify-content-center"> <div className="d-flex justify-content-center">
<img <img
src="/cherry.jpg" src="/cherry.jpg"
className="rounded-circle" className="rounded-circle mt-2"
style={{ height: "320px", width: "320px" }} style={{ height: "320px", width: "320px" }}
/> />
</div> </div>
......
client/src/components/Room/ChannelList.js
View file @ 21fb43bd
import ChannelSingle from "./ChannelSingle"; import ChannelSingle from './ChannelSingle'
import { Link } from 'react-router-dom'
import backward from '../../backward.png'
const ChannelList = () => { const ChannelList = () => {
// function copytoClipboard() {
// const [code, setCode] = useState()
// const roomcode = document.getElementById("textarea")
// alert("코드를 복사하였습니다.")
// }
return ( return (
<div> <div>
ChannelList Component 입니다. <nav className="navbar navbar-light d-flex justify-content-between">
<ChannelSingle /> <div>
<Link to="/user">
<button type="button" className="btn">
<img src={backward} width="25" height="25" />
</button>
</Link>
</div>
<div>
<Link to="/user">
<img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
<div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#hamburger"
aria-controls="hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: '#f4c1f2' }}
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div
className="offcanvas offcanvas-end"
style={{ width: '330px' }}
tabIndex="-1"
id="hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: 'bold',
fontSize: '15px',
overflow: 'scroll',
whiteSpace: 'nowrap',
width: '150px',
color: '#000000',
}}
>
데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
</p>
<h6 className="mt-2"> #ASV2AE985 </h6>
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<ChannelSingle />
<div>
<div className="d-flex flex-row-reverse">
<button
type="button"
className="m-3 rounded text-white"
data-bs-toggle="modal"
data-bs-target="#exitRoom"
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#D64D61',
color: 'black',
border: '1px #D64D61',
}}
>
퇴장
</button>
{/* {admin ? <button
type="button"
className="m-3 rounded"
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#E0CEE8',
color: 'black',
border: '1px #D64D61',
}}
>
설정
</button> : null} */}
<button
type="button"
className="m-3 rounded"
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#E0CEE8',
color: 'black',
border: '1px #D64D61',
}}
>
설정
</button>
<div
className="modal fade"
id="exitRoom"
tabIndex="-1"
aria-labelledby="exitRoomLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body d-flex justify-content-center">
이방에서 퇴장하시겠습니까?
</div>
<div className="row mb-3">
<div className="d-flex justify-content-evenly">
{/* <Link to="/user"> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
>
예
</button>
{/* </Link> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
아니요
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
); )
}; }
export default ChannelList; export default ChannelList
client/src/components/Room/ChannelSingle.js
View file @ 21fb43bd
const ChannelSingle = () => { const ChannelSingle = () => {
return ( return (
<div> <div className="overflow-auto" style={{ height: '610px' }}>
음성 채널 목록 <div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">회의</h5>
</div>
<ul className="mx-5">
<li>
CHERRY
</li>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">사담</h5>
</div>
<ul className="mx-5">
<li>
CHERRY
</li>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">일반</h5>
</div>
<ul className="mx-5">
<li>
CHERRY
</li>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">공지</h5>
</div>
<ul className="mx-5">
<li>
CHERRY
</li>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
</div> </div>
) )
}; };
......
client/src/components/Room/Controller.js
View file @ 21fb43bd
...@@ -2,39 +2,74 @@ import ScreenSelect from './ScreenSelect' ...@@ -2,39 +2,74 @@ import ScreenSelect from './ScreenSelect'
import video_btn from '../../videobtn.png' import video_btn from '../../videobtn.png'
import speaker_btn from '../../speakerbtn.png' import speaker_btn from '../../speakerbtn.png'
import mic_btn from '../../micbtn.png' import mic_btn from '../../micbtn.png'
import videooff_btn from '../../videooffbtn.png'
import speakeroff_btn from '../../speakeroffbtn.png'
import micoff_btn from '../../micoffbtn.png'
import React, { useState } from 'react';
const Controller = () => { const Controller = () => {
const [mic, setMic] = useState("true")
const [speaker, setSpeaker] = useState("true")
const [video, setVideo] = useState("true")
const micOn = (() => setMic(false));
const micOff = (() => setMic(true));
const speakerOn = (() => setSpeaker(false));
const speakerOff = (() => setSpeaker(true));
const videoOn = (() => setVideo(false));
const videoOff = (() => setVideo(true));
return ( return (
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div <div
className="col d-flex justify-content-center" className="col d-flex justify-content-center"
style={{ backgroundColor: '#C4C4C4' }} style={{ backgroundColor: '#C4C4C4', position: 'absolute', bottom: 0, width: '414px' }}
> >
<div className="col d-flex justify-content-center">
<button type="button" className="btn"> {mic ? <div className="col d-flex justify-content-center">
<img src={mic_btn} width="45" height="40" /> <button type="button" className="btn" onClick={micOn}>
<img src={micoff_btn} width="45" height="40" />
</button> </button>
</div> </div>
<div className="col d-flex justify-content-center"> : <div className="col d-flex justify-content-center">
<button type="button" className="btn"> <button type="button" className="btn" onClick={micOff}>
<img src={mic_btn} width="45" height="40" />
</button>
</div>
}
{speaker ? <div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={speakerOn}>
<img src={speakeroff_btn} width="45" />
</button>
</div> : <div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={speakerOff}>
<img src={speaker_btn} width="45" /> <img src={speaker_btn} width="45" />
</button> </button>
</div> </div>
<div className="col d-flex justify-content-center"> }
{video ? <div className="col d-flex justify-content-center">
<button <button
type="button" type="button"
className="btn" className="btn"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#exampleModal" data-bs-target="#shareModal"
src={video_btn}
onClick="location.href='ScreenSelect.js'" onClick="location.href='ScreenSelect.js'"
onClick={videoOn}
> >
<img src={video_btn} width="45" /> <img src={videooff_btn} width="45" />
</button> </button>
</div> </div> :
<div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={videoOff}>
<img src={video_btn} width="45" />
</button>
</div>}
</div> </div>
<ScreenSelect /> <ScreenSelect videoOff={videoOff} />
</div> </div>
</div> </div>
) )
} }
......
client/src/components/Room/RoomHeader.js
View file @ 21fb43bd
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom'
const RoomHeader = () => { const RoomHeader = () => {
return ( return (
<div className="container"> <div
<div className="row"> className="d-flex justify-content-between align-items-center p-2"
<div style={{ backgroundColor: '#C4C4C4', height: '60px' }}
className=" col d-flex justify-content-space-between" >
style={{ backgroundColor: "#C4C4C4" }} <div className="d-flex align-items-center">
<img
className="rounded-circle"
src="/cherry.jpg"
width="40px"
height="40px"
/>
<a
className="p-3 ms-1 text-center text-decoration-none"
style={{
fontWeight: 'bold',
fontSize: '20px',
color: '#6c33a2',
}}
> >
<img # 회의
className="m-2 rounded-circle" </a>
src="/cherry.jpg"
width="40"
height="40"
/>
<p
className="m-2"
style={{
fontWeight: "bold",
fontSize: "15px",
whiteSpace: "pre-wrap",
}}
>
<p>데계 재밌는 수학과</p> #ASV2AE98
</p>
<p className="m-2" style={{ fontWeight: "bold", fontSize: "20px" }}>
회의
</p>
<Link to="/user">
<button
type="button"
className="m-2 rounded"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#E8B7FF",
color: "black",
border: "1px #f4c1f2",
}}
>
돌아가기
</button>
</Link>
</div>
</div> </div>
</div> </div>
); )
}; }
export default RoomHeader; export default RoomHeader
client/src/components/Room/Screen.js
View file @ 21fb43bd
...@@ -4,7 +4,7 @@ const Screen = () => { ...@@ -4,7 +4,7 @@ const Screen = () => {
<div className="row"> <div className="row">
<div className="col" style={{ backgroundColor: '#FCF4FF' }}> <div className="col" style={{ backgroundColor: '#FCF4FF' }}>
<p className="m-2" style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}> <p className="m-2" style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}>
스크린 스크린<br/>
</p> </p>
<div className="col m-5"></div> <div className="col m-5"></div>
</div> </div>
......
client/src/components/Room/ScreenSelect.js
View file @ 21fb43bd
const ScreenSelect = () => { import Controller from "./Controller"
const ScreenSelect = ({videoOff}) => {
return ( return (
<div className="container"> <div className="container">
<div <div
className="modal fade" className="modal fade"
id="exampleModal" id="shareModal"
tabindex="-1" tabIndex="-1"
aria-labelledby="exampleModalLabel" aria-labelledby="shareModalLabel"
aria-hidden="true" aria-hidden="true"
> >
<div className="modal-dialog"> <div className="modal-dialog">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header"> <div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel"> <h5 className="modal-title" id="shareModalLabel">
공유 화면 선택 공유 화면 선택
</h5> </h5>
<button <button
...@@ -19,20 +21,21 @@ const ScreenSelect = () => { ...@@ -19,20 +21,21 @@ const ScreenSelect = () => {
className="btn-close" className="btn-close"
data-bs-dismiss="modal" data-bs-dismiss="modal"
aria-label="Close" aria-label="Close"
onClick={videoOff}
></button> ></button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="row"> <div className="row">
<div className="col-sm-6 mb-3"> <div className="col-sm-6 mb-3">
<div className="card"> <div className="card">
<div style={{ height:'150px'}} className="card-body"> <div style={{ height: '150px' }} className="card-body">
<p className="card-text">공유화면1</p> <p className="card-text">공유화면1</p>
</div> </div>
</div> </div>
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6">
<div className="card"> <div className="card">
<div style={{ height:'150px'}} className="card-body"> <div style={{ height: '150px' }} className="card-body">
<p className="card-text">공유화면2</p> <p className="card-text">공유화면2</p>
</div> </div>
</div> </div>
......
client/src/components/Room/User.js
View file @ 21fb43bd
...@@ -2,31 +2,31 @@ const User = () => { ...@@ -2,31 +2,31 @@ const User = () => {
return ( return (
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col" style={{ backgroundColor: "#DEC7F5" }}> <div className="col" style={{ backgroundColor: "#DEC7F5", position:'absolute', bottom:'58px', width: '414px'}}>
<p <p
className="m-2" className="m-2"
style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }} style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
> >
참여 중인 사용자 화면공유 중인 사용자
</p> </p>
<div className="col m-3" xs={6} md={4}> <div className="col m-3" xs={6} md={4}>
<img <img
src="/cherry.jpg" src="/cherry.jpg"
width="40" width="40"
height="40" height="40"
className="rounded-circle" className="me-2 rounded-circle"
/> />
<img <img
src="/cherry.jpg" src="/cherry.jpg"
width="40" width="40"
height="40" height="40"
className="rounded-circle" className="me-2 rounded-circle"
/> />
<img <img
src="/cherry.jpg" src="/cherry.jpg"
width="40" width="40"
height="40" height="40"
className="rounded-circle" className="me-2 rounded-circle"
/> />
</div> </div>
<div className="col m-3" xs={6} md={4}> <div className="col m-3" xs={6} md={4}>
...@@ -34,43 +34,11 @@ const User = () => { ...@@ -34,43 +34,11 @@ const User = () => {
src="/cherry.jpg" src="/cherry.jpg"
width="40" width="40"
height="40" height="40"
className="rounded-circle" className="me-2 rounded-circle"
/> />
</div> </div>
</div> </div>
</div> </div>
<div className="row">
<div className="col" style={{ backgroundColor: "#BCB0C6" }}>
<p
className="m-2"
style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
>
참여하고 있지 않은 사용자
</p>
<div className="col m-3" xs={6} md={4}>
<img
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
/>
<img
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
/>
<img
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
/>
</div>
<div className="col m-3" xs={6} md={4}></div>
<div className="col m-5"></div>
</div>
</div>
</div> </div>
); );
}; };
......
client/src/components/SignUp.js
View file @ 21fb43bd
...@@ -80,7 +80,7 @@ const Signup = () => { ...@@ -80,7 +80,7 @@ const Signup = () => {
<div className="d-flex text-center"> <div className="d-flex text-center">
<div className="col-4"> <div className="col-4">
<input <input
className="m-2 form-control" className="mt-2 form-control"
id="idNumber1" id="idNumber1"
type="text" type="text"
name="idNumber1" name="idNumber1"
...@@ -89,19 +89,21 @@ const Signup = () => { ...@@ -89,19 +89,21 @@ const Signup = () => {
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
<div className="col-1">ㅡ</div> <div className="col-1 pt-3 ps-2">ㅡ</div>
<div className="col-1"> <div className="col-1">
<input <input
className="m-2 form-control" className="mt-2 ms-2 form-control"
id="idNumber2" id="idNumber2"
type="text" type="text"
style={{width:'35px'}}
name="idNumber2" name="idNumber2"
placeholder="●" placeholder="●"
value={idNumber2} value={idNumber2}
onChange={handleChange} onChange={handleChange}
maxLength='1'
/> />
</div> </div>
****** <div className="pt-3 ps-4">* * * * * *</div>
</div> </div>
</div> </div>
<div className="p-2"> <div className="p-2">
......
client/src/pages/RoomPage.js
View file @ 21fb43bd
...@@ -8,7 +8,8 @@ import Controller from '../components/Room/Controller' ...@@ -8,7 +8,8 @@ import Controller from '../components/Room/Controller'
const RoomPage = () => { const RoomPage = () => {
return ( return (
<div> <div>
<Header hamburger={ChannelList} /> {/* <Header hamburger={ChannelList} /> */}
<ChannelList />
<RoomHeader /> <RoomHeader />
<Screen /> <Screen />
<User /> <User />
......
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