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 = () => {
return (
<div>
<form
style={{ backgroundColor: "#FCF4FF" }}
style={{ backgroundColor: '#FCF4FF' }}
className="flex-column align-items-center justify-content-center p-2"
>
<div className="d-flex justify-content-center">
<Link to="/user">
<img src="/BORA.png" style={{ width: "160px" }} />
<img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
</form>
<div
style={{ backgroundColor: "#262626", width: "auto", height: "2px" }}
style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
></div>
</div>
);
};
)
}
export default Header;
export default Header
client/src/components/Home/AddRoom.js
View file @ 21fb43bd
const AddRoom = () => {
return (
<form className="m-3">
<div className="row justify-content-around">
<div className="col">
<h4>참여중인 방목록</h4>
<div>
<div className="mx-4 my-3 d-flex justify-content-between">
<div className="fs-4">
참여중인 방목록
</div>
<button
type="button"
className="col-2"
className="py-1 px-2"
data-bs-toggle="modal"
data-bs-target="#myModal"
style={{ backgroundColor: "#FCF4FF", borderColor: "#FCF4FF" }}
style={{
display: "flex",
flexDirection: "column",
borderStyle: "solid",
borderRadius: "5px",
backgroundColor: "#E0CEE8",
borderColor: "#E0CEE8",
}}
>
+
추가
</button>
</div>
......@@ -28,11 +35,11 @@ const AddRoom = () => {
></button>
</div>
<div className="modal-body">
<div className="row justify-content-around mt-4 mb-4">
<div className="col-5">
<div className="row justify-content-evenly mt-4 mb-4 fs-6">
<div className="col-6 d-flex justify-content-center">
<button
type="button"
className="p-4"
className="p-3"
data-bs-toggle="modal"
data-bs-target="#joinModal"
style={{
......@@ -40,18 +47,19 @@ const AddRoom = () => {
flexDirection: "column",
borderStyle: "solid",
borderRadius: "5px",
borderColor: "#C4C4C4",
backgroundColor: "#C4C4C4",
padding: "10px",
backgroundColor: "#E0CEE8",
borderColor: "#E0CEE8",
}}
>
방참여하기
<div style={{ width: "6rem" }} >
방참여하기
</div>
</button>
</div>
<div className="col-5">
<div className="col-6 d-flex justify-content-center">
<button
type="button"
className="p-4"
className="p-3"
data-bs-toggle="modal"
data-bs-target="#makeModal"
style={{
......@@ -59,12 +67,13 @@ const AddRoom = () => {
flexDirection: "column",
borderStyle: "solid",
borderRadius: "5px",
borderColor: "#C4C4C4",
backgroundColor: "#C4C4C4",
padding: "10px",
backgroundColor: "#f5cfe3",
borderColor: "#f5cfe3",
}}
>
방생성하기
<div style={{ width: "6rem" }} >
방생성하기
</div>
</button>
</div>
</div>
......@@ -97,15 +106,7 @@ const AddRoom = () => {
/>
</div>
<div className="modal-footer">
<button
type="button"
className="btn-primary"
style={{
borderStyle: "solid",
borderRadius: "5px",
padding: "15px",
}}
>
<button type="submit" className="btn btn-primary">
확인
</button>
</div>
......@@ -128,11 +129,11 @@ const AddRoom = () => {
></button>
</div>
<div className="modal-body">
<h5>방프로필사진</h5>
<div className="filebox mb-4">
<input type="file" id="ex_filename" className="upload-hidden" />
<h6>방프로필사진</h6>
<div className="mb-4">
<input type="file" className="upload-hidden" />
</div>
<h5>방이름</h5>
<h6>방이름</h6>
<div className="input-group">
<input
type="text"
......@@ -143,15 +144,7 @@ const AddRoom = () => {
/>
</div>
<div className="modal-footer">
<button
type="button"
className="btn-primary"
style={{
borderStyle: "solid",
borderRadius: "5px",
padding: "15px",
}}
>
<button type="submit" className="btn btn-primary">
생성
</button>
</div>
......@@ -159,7 +152,7 @@ const AddRoom = () => {
</div>
</div>
</div>
</form>
</div>
);
};
......
client/src/components/Home/HomeProfile.js
View file @ 21fb43bd
......@@ -12,8 +12,6 @@ const HomeProfile = () => {
style={{
width: "157px",
height: "157px",
borderStyle: "solid",
borderColor: "#262626",
}}
/>
</div>
......
client/src/components/Home/RoomSingle.js
View file @ 21fb43bd
......@@ -6,137 +6,53 @@ const RoomSingle = () => {
return (
<Link to={`/room/${id}/${channelId}`} className="text-decoration-none text-dark">
<div
className="row justify-content-start mx-4 my-2 p-2"
className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<div style={{ width: "37px", height: "37px" }}>
<img
src="BORA.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="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 className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
<div className="ms-auto mt-2"> 15/34 </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" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<div style={{ width: "37px", height: "37px" }}>
<img
src="BORA.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 className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
<div className="ms-auto mt-2"> 15/34 </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" }}
>
<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
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<div style={{ width: "37px", height: "37px" }}>
<img
src="BORA.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 className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
<div className="ms-auto mt-2"> 15/34 </div>
</div>
</Link>
</Link >
);
};
......
client/src/components/Profile/Info.js
View file @ 21fb43bd
......@@ -4,14 +4,14 @@ const Info = () => {
return (
<div className="container" style={{ background: "#FCF4FF" }}>
<div
className="row justify-content-center mx-1"
className="row justify-content-center my-4"
style={{ fontSize: "25px", fontWeight: "bold" }}
>
CHERRY #0805
</div>
<div className="row">
<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>
......
client/src/components/Profile/InfoUpdate.js
View file @ 21fb43bd
import { Link } from "react-router-dom";
const InfoUpdate = () => {
function inputfile(){
console.log('aa')
}
const id = 1;
const number = 1234;
return (
<div class="container" style={{ background: "#FCF4FF" }}>
<div class="row">
<div className="container" style={{ background: "#FCF4FF" }}>
<div className="row">
<div>
<label
class="form-label mx-2 my-4"
className="form-label mx-2 my-4"
style={{ fontSize: "18px", fontWeight: "bold" }}
>
프로필 정보
......@@ -15,46 +20,88 @@ const InfoUpdate = () => {
<Link to={`/profile/${id}`}>
<button
type="button"
class="btn btn-outline-white "
className="btn btn-outline-white "
style={{
background: "#E8B7FF",
fontSize: "13px",
fontWeight: "bold",
}}
>
확인
돌아가기
</button>
</Link>
</div>
</div>
<div class="col"></div>
<div class="col">
<div className="col">
<div>
<div class="row">
<div className="row">
<div className="d-flex justify-content-center">
<img
src="/cherry.jpg"
className="rounded-circle"
id="imgfile"
className="rounded-circle mt-2"
style={{ height: "320px", width: "320px" }}
/>
</div>
<div
className="row justify-content-center my-3 mx-1"
style={{ fontSize: "25px", fontWeight: "bold" }}
>
CHERRY #0805
<div className="mt-2 d-flex justify-content-end">
<label for='inputfile' style={{ fontSize: "13px", fontWeight: "bold" }}>사진 선택</label>
<input type="file" id='inputfile' style={{display:'none'}}/>
</div>
<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 class="col-6">
<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>
<label
class="form-label"
......@@ -62,54 +109,44 @@ const InfoUpdate = () => {
>
새 비밀번호
</label>
<input type="text" class="form-control" />
<input type="text" className="form-control" />
</div>
<div>
<label
class="form-label"
className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 비밀번호 확인
</label>
<input type="text" class="form-control" />
<input type="text" className="form-control" />
</div>
</div>
</div>
<div class="col-6">
<div class="input-group my-3 ">
<div className="col-6">
<div className="input-group my-3 ">
<div>
<label
class="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
현재 전화번호
</label>
<input type="text" class="form-control" />
</div>
<div>
<label
class="form-label"
className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 전화번호
</label>
<input type="text" class="form-control" />
<input type="text" className="form-control" />
</div>
<div>
<label
class="form-label"
className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 전화번호 확인
</label>
<input type="text" class="form-control" />
<input type="text" className="form-control" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col"></div>
</div>
);
};
......
client/src/components/Profile/Profile.js
View file @ 21fb43bd
......@@ -8,7 +8,7 @@ const Profile = () => {
<div className="row">
<form>
<label
class="form-label mx-2 my-4"
className="form-label mx-2 my-4"
style={{ fontSize: "18px", fontWeight: "bold" }}
>
프로필 정보
......@@ -32,7 +32,7 @@ const Profile = () => {
<div className="d-flex justify-content-center">
<img
src="/cherry.jpg"
className="rounded-circle"
className="rounded-circle mt-2"
style={{ height: "320px", width: "320px" }}
/>
</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 = () => {
// function copytoClipboard() {
// const [code, setCode] = useState()
// const roomcode = document.getElementById("textarea")
// alert("코드를 복사하였습니다.")
// }
return (
<div>
ChannelList Component 입니다.
<ChannelSingle />
<nav className="navbar navbar-light d-flex justify-content-between">
<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>
);
};
)
}
export default ChannelList;
export default ChannelList
client/src/components/Room/ChannelSingle.js
View file @ 21fb43bd
const ChannelSingle = () => {
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>
)
};
......
client/src/components/Room/Controller.js
View file @ 21fb43bd
......@@ -2,39 +2,74 @@ import ScreenSelect from './ScreenSelect'
import video_btn from '../../videobtn.png'
import speaker_btn from '../../speakerbtn.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 [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 (
<div className="container">
<div className="row">
<div
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">
<img src={mic_btn} width="45" height="40" />
{mic ? <div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={micOn}>
<img src={micoff_btn} width="45" height="40" />
</button>
</div>
<div className="col d-flex justify-content-center">
<button type="button" className="btn">
: <div className="col d-flex justify-content-center">
<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" />
</button>
</div>
<div className="col d-flex justify-content-center">
}
{video ? <div className="col d-flex justify-content-center">
<button
type="button"
className="btn"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
src={video_btn}
data-bs-target="#shareModal"
onClick="location.href='ScreenSelect.js'"
onClick={videoOn}
>
<img src={video_btn} width="45" />
<img src={videooff_btn} width="45" />
</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>
<ScreenSelect />
<ScreenSelect videoOff={videoOff} />
</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 = () => {
return (
<div className="container">
<div className="row">
<div
className=" col d-flex justify-content-space-between"
style={{ backgroundColor: "#C4C4C4" }}
<div
className="d-flex justify-content-between align-items-center p-2"
style={{ backgroundColor: '#C4C4C4', height: '60px' }}
>
<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"
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>
# 회의
</a>
</div>
</div>
);
};
)
}
export default RoomHeader;
export default RoomHeader
client/src/components/Room/Screen.js
View file @ 21fb43bd
......@@ -4,7 +4,7 @@ const Screen = () => {
<div className="row">
<div className="col" style={{ backgroundColor: '#FCF4FF' }}>
<p className="m-2" style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}>
스크린
스크린<br/>
</p>
<div className="col m-5"></div>
</div>
......
client/src/components/Room/ScreenSelect.js
View file @ 21fb43bd
const ScreenSelect = () => {
import Controller from "./Controller"
const ScreenSelect = ({videoOff}) => {
return (
<div className="container">
<div
className="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
id="shareModal"
tabIndex="-1"
aria-labelledby="shareModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
<h5 className="modal-title" id="shareModalLabel">
공유 화면 선택
</h5>
<button
......@@ -19,20 +21,21 @@ const ScreenSelect = () => {
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
onClick={videoOff}
></button>
</div>
<div className="modal-body">
<div className="row">
<div className="col-sm-6 mb-3">
<div className="card">
<div style={{ height:'150px'}} className="card-body">
<div style={{ height: '150px' }} className="card-body">
<p className="card-text">공유화면1</p>
</div>
</div>
</div>
<div className="col-sm-6">
<div className="card">
<div style={{ height:'150px'}} className="card-body">
<div style={{ height: '150px' }} className="card-body">
<p className="card-text">공유화면2</p>
</div>
</div>
......
client/src/components/Room/User.js
View file @ 21fb43bd
......@@ -2,31 +2,31 @@ const User = () => {
return (
<div className="container">
<div className="row">
<div className="col" style={{ backgroundColor: "#DEC7F5" }}>
<div className="col" style={{ backgroundColor: "#DEC7F5", position:'absolute', bottom:'58px', width: '414px'}}>
<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"
className="me-2 rounded-circle"
/>
<img
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
className="me-2 rounded-circle"
/>
<img
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
className="me-2 rounded-circle"
/>
</div>
<div className="col m-3" xs={6} md={4}>
......@@ -34,43 +34,11 @@ const User = () => {
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
className="me-2 rounded-circle"
/>
</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>
);
};
......
client/src/components/SignUp.js
View file @ 21fb43bd
......@@ -80,7 +80,7 @@ const Signup = () => {
<div className="d-flex text-center">
<div className="col-4">
<input
className="m-2 form-control"
className="mt-2 form-control"
id="idNumber1"
type="text"
name="idNumber1"
......@@ -89,19 +89,21 @@ const Signup = () => {
onChange={handleChange}
/>
</div>
<div className="col-1">ㅡ</div>
<div className="col-1 pt-3 ps-2">ㅡ</div>
<div className="col-1">
<input
className="m-2 form-control"
className="mt-2 ms-2 form-control"
id="idNumber2"
type="text"
style={{width:'35px'}}
name="idNumber2"
placeholder="●"
value={idNumber2}
onChange={handleChange}
maxLength='1'
/>
</div>
******
<div className="pt-3 ps-4">* * * * * *</div>
</div>
</div>
<div className="p-2">
......
client/src/pages/RoomPage.js
View file @ 21fb43bd
......@@ -8,7 +8,8 @@ import Controller from '../components/Room/Controller'
const RoomPage = () => {
return (
<div>
<Header hamburger={ChannelList} />
{/* <Header hamburger={ChannelList} /> */}
<ChannelList />
<RoomHeader />
<Screen />
<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