Skip to content

GitLab

Commit c0273f7b authored by 이재연's avatar 이재연
Browse files

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

parents 9e5bf331 8274fab1
Hide whitespace changes
Inline Side-by-side
client/src/components/Home/AddRoom.js
View file @ c0273f7b
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 pt-2"> <div className="fs-4">
<h4>참여중인 방목록</h4> 참여중인 방목록
</div> </div>
<button <button
type="button" type="button"
className="col-2 btn btn-info" className="py-1 px-2"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#myModal" data-bs-target="#myModal"
style={{
display: "flex",
flexDirection: "column",
borderStyle: "solid",
borderRadius: "5px",
backgroundColor: "#E0CEE8",
borderColor: "#E0CEE8",
}}
> >
+ 추가
</button> </button>
</div> </div>
...@@ -39,8 +47,8 @@ const AddRoom = () => { ...@@ -39,8 +47,8 @@ const AddRoom = () => {
flexDirection: "column", flexDirection: "column",
borderStyle: "solid", borderStyle: "solid",
borderRadius: "5px", borderRadius: "5px",
backgroundColor: "#f6c7ba", backgroundColor: "#E0CEE8",
borderColor: "#f6c7ba", borderColor: "#E0CEE8",
}} }}
> >
<div style={{ width: "6rem" }} > <div style={{ width: "6rem" }} >
...@@ -59,8 +67,8 @@ const AddRoom = () => { ...@@ -59,8 +67,8 @@ const AddRoom = () => {
flexDirection: "column", flexDirection: "column",
borderStyle: "solid", borderStyle: "solid",
borderRadius: "5px", borderRadius: "5px",
backgroundColor: "#f6c7ba", backgroundColor: "#f5cfe3",
borderColor: "#f6c7ba", borderColor: "#f5cfe3",
}} }}
> >
<div style={{ width: "6rem" }} > <div style={{ width: "6rem" }} >
...@@ -122,8 +130,8 @@ const AddRoom = () => { ...@@ -122,8 +130,8 @@ const AddRoom = () => {
</div> </div>
<div className="modal-body"> <div className="modal-body">
<h6>방프로필사진</h6> <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>
<h6>방이름</h6> <h6>방이름</h6>
<div className="input-group"> <div className="input-group">
...@@ -144,7 +152,7 @@ const AddRoom = () => { ...@@ -144,7 +152,7 @@ const AddRoom = () => {
</div> </div>
</div> </div>
</div> </div>
</form> </div>
); );
}; };
......
client/src/components/Home/RoomSingle.js
View file @ c0273f7b
...@@ -16,7 +16,7 @@ const RoomSingle = () => { ...@@ -16,7 +16,7 @@ const RoomSingle = () => {
style={{ width: "37px", height: "37px" }} style={{ width: "37px", height: "37px" }}
/> />
</div> </div>
<div className="text-truncate mx-3 mt-2" style={{ width: "250px" }} title="데계 재미있는 수학과 데계데계데계 재미있는 수학과"> <div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
데계 재미있는 수학과 데계데계데계 재미있는 수학과</div> 데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
<div className="ms-auto mt-2"> 15/34 </div> <div className="ms-auto mt-2"> 15/34 </div>
</div> </div>
...@@ -32,8 +32,24 @@ const RoomSingle = () => { ...@@ -32,8 +32,24 @@ const RoomSingle = () => {
style={{ width: "37px", height: "37px" }} style={{ width: "37px", height: "37px" }}
/> />
</div> </div>
<marquee className="text-overflow-auto white-space-nowrap mx-3 mt-2" style={{ width: "250px" }} title="데계 재미있는 수학과 데계데계데계 재미있는 수학과"> <div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
데계 재미있는 수학과 데계데계데계 재미있는 수학과</marquee> 데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
<div className="ms-auto mt-2"> 15/34 </div>
</div>
<div
className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div style={{ width: "37px", height: "37px" }}>
<img
src="BORA.png"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</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 className="ms-auto mt-2"> 15/34 </div>
</div> </div>
</Link > </Link >
......
client/src/components/Room/ChannelList.js
View file @ c0273f7b
import ChannelSingle from "./ChannelSingle"; import ChannelSingle from './ChannelSingle'
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom'
import backward from '../../backward.png'
const ChannelList = () => { const ChannelList = () => {
return ( return (
<div> <div>
<nav className="row navbar navbar-light"> <nav className="navbar navbar-light d-flex justify-content-between">
<div className="col-4"> <div>
<Link to="/user"> <Link to="/user">
<button <button
type="button" type="button"
className="m-2 rounded" className="btn"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#E8B7FF",
color: "black",
border: "1px #f4c1f2",
}}
> >
돌아가기 <img src={backward} width="25" height="25" />
</button> </button>
</Link> </Link>
</div> </div>
<div className="col-4 d-flex justify-content-center"> <div>
<Link to="/user"> <Link to="/user">
<img src="/BORA.png" style={{ width: "160px" }} /> <img src="/BORA.png" style={{ width: '160px' }} />
</Link> </Link>
</div> </div>
<div className="col-4 d-flex justify-content-end"> <div>
<button <button
className="navbar-toggler" className="navbar-toggler"
type="button" type="button"
...@@ -38,54 +32,34 @@ const ChannelList = () => { ...@@ -38,54 +32,34 @@ const ChannelList = () => {
aria-controls="hamburger" aria-controls="hamburger"
aria-expanded="false" aria-expanded="false"
aria-label="Toggle navigation" aria-label="Toggle navigation"
style={{ border: "#f4c1f2", }} style={{ border: '#f4c1f2' }}
> >
<span className="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
</button> </button>
</div> </div>
</nav> </nav>
<div className="offcanvas offcanvas-start" tabindex="-1" id="hamburger" aria-labelledby="hamburgerLabel"> <div
className="offcanvas offcanvas-start"
style={{ width: "330px" }}
tabIndex="-1"
id="hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header"> <div className="offcanvas-header">
<h5 className="offcanvas-title" id="offcanvasExampleLabel">음성 채널 목록</h5> <h5 className="col-6 offcanvas-title" id="offcanvasExampleLabel">
<button type="button" className="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> 음성 채널 목록
</h5>
<h6 className="mt-2"> #ASV2AE985 </h6>
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div> </div>
<div className="overflow-auto" style={{ height: "610px" }}> <ChannelSingle />
<div className="mb-3">
<div className="m-3 p-2 row" style={{ backgroundColor: "#C4C4C4" }}>
<img className="col-auto" src="/fullSpeaker.png" width="30px" height="30px" />
<h5 className="col">회의</h5>
</div>
<div className="mx-5">
<ChannelSingle />
</div>
</div>
<div className="mb-3">
<div className="m-3 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<h5>사담</h5>
</div>
<div className="mx-5">
<ChannelSingle />
</div>
</div>
<div className="mb-3">
<div className="m-3 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<h5>공지</h5>
</div>
<div className="mx-5">
<ChannelSingle />
</div>
</div>
<div className="mb-3">
<div className="m-3 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<h5>공지</h5>
</div>
<div className="mx-5">
<ChannelSingle />
</div>
</div>
</div>
<div className="d-flex flex-row-reverse"> <div className="d-flex flex-row-reverse">
<button <button
...@@ -94,20 +68,31 @@ const ChannelList = () => { ...@@ -94,20 +68,31 @@ const ChannelList = () => {
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#exitRoom" data-bs-target="#exitRoom"
style={{ style={{
height: "30px", height: '30px',
fontWeight: "bold", fontWeight: 'bold',
backgroundColor: "#FF0000", backgroundColor: '#D64D61',
color: "black", color: 'black',
border: "1px #f4c1f2", border: '1px #D64D61',
}} }}
> >
퇴장 퇴장
</button> </button>
<div className="modal fade" id="exitRoom" tabindex="-1" aria-labelledby="exitRoomLabel" aria-hidden="true"> <div
className="modal fade"
id="exitRoom"
tabindex="-1"
aria-labelledby="exitRoomLabel"
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">
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div> </div>
<div className="modal-body d-flex justify-content-center"> <div className="modal-body d-flex justify-content-center">
이방에서 퇴장하시겠습니까? 이방에서 퇴장하시겠습니까?
...@@ -115,9 +100,17 @@ const ChannelList = () => { ...@@ -115,9 +100,17 @@ const ChannelList = () => {
<div className="row mb-3"> <div className="row mb-3">
<div className="d-flex justify-content-evenly"> <div className="d-flex justify-content-evenly">
{/* <Link to="/user"> */} {/* <Link to="/user"> */}
<button type="submit" className="col-2 p-1 btn btn-primary">예</button> <button type="submit" className="col-2 p-1 btn btn-primary">
예
</button>
{/* </Link> */} {/* </Link> */}
<button type="submit" className="col-2 p-1 btn btn-primary" data-bs-dismiss="modal">아니요</button> <button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
아니요
</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -125,10 +118,8 @@ const ChannelList = () => { ...@@ -125,10 +118,8 @@ const ChannelList = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
)
}
export default ChannelList
</div >
);
};
export default ChannelList;
client/src/components/Room/ChannelSingle.js
View file @ c0273f7b
const ChannelSingle = () => { const ChannelSingle = () => {
return ( return (
<div> <div className="overflow-auto" style={{ height: '610px' }}>
<div> <div className="mb-3">
- CHERRY <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>
<div>
- JAEYEON <div className="mb-3">
</div> <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<div> <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
- SEOYEON <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>
- JIWEON <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>
- BYOUNGYUN <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> </div>
) )
}; };
......
client/src/components/Room/Controller.js
View file @ c0273f7b
...@@ -5,45 +5,70 @@ import mic_btn from '../../micbtn.png' ...@@ -5,45 +5,70 @@ import mic_btn from '../../micbtn.png'
import videooff_btn from '../../videooffbtn.png' import videooff_btn from '../../videooffbtn.png'
import speakeroff_btn from '../../speakeroffbtn.png' import speakeroff_btn from '../../speakeroffbtn.png'
import micoff_btn from '../../micoffbtn.png' import micoff_btn from '../../micoffbtn.png'
import React, { useState } from 'react';
const Controller = () => { const Controller = () => {
const [mic, setMic] = useState("true")
const [video, setVideo] = useState("true")
const [speaker, setSpeaker] = 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', position:'absolute', bottom:0 }} style={{ backgroundColor: '#C4C4C4', position: 'absolute', bottom: 0, width:'414px' }}
> >
{/* <div className="col d-flex justify-content-center"> {mic ? <div className="col d-flex justify-content-center">
<button type="button" className="btn"> <button type="button" className="btn" onClick={micOn}>
<img src={mic_btn} width="45" height="40" /> <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" onClick> <button type="button" className="btn" onClick={micOff}>
<img src={micoff_btn} width="45" height="40" /> <img src={mic_btn} width="45" height="40" />
</button>
</div>
<div className="col d-flex justify-content-center">
<button type="button" className="btn">
<img src={speakeroff_btn} width="45" />
</button> </button>
</div> </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>
}
{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}
onClick="location.href='ScreenSelect.js'"
onClick={videoOn}
>
<img src={videooff_btn} width="45" />
</button>
</div> :
<div className="col d-flex justify-content-center"> <div className="col d-flex justify-content-center">
<button <button type="button" className="btn" onClick={videoOff}>
type="button" <img src={video_btn} width="45" />
className="btn"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
src={video_btn}
onClick="location.href='ScreenSelect.js'"
>
<img src={videooff_btn} width="45" />
</button> </button>
</div> </div>}
</div>
<ScreenSelect />
</div> </div>
<ScreenSelect />
</div> </div>
</div>
) )
} }
......
client/src/components/Room/RoomHeader.js
View file @ c0273f7b
...@@ -2,45 +2,37 @@ import { Link } from 'react-router-dom' ...@@ -2,45 +2,37 @@ 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: '15px',
overflow: 'scroll',
whiteSpace: 'nowrap',
width: '280px',
color: '#000000',
}}
> >
<img 데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
className="m-2 rounded-circle" </a>
src="/cherry.jpg"
width="40"
height="40"
/>
<p
className="m-2"
style={{
fontWeight: 'bold',
fontSize: '15px',
}}
>
<p
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: '110px',
}}
>
데계 재밌는 수학과
</p>{' '}
#ASV2AE985
</p>
<p
className='mt-3'
style={{ fontWeight: 'bold', fontSize: '20px', color: '#571e80' }}
>
Ch.회의
</p>
</div>
</div> </div>
<a
className="text-decoration-none"
style={{ fontWeight: 'bold', fontSize: '20px', color: '#6c33a2' }}
>
# 회의
</a>
</div> </div>
) )
} }
......
client/src/components/Room/User.js
View file @ c0273f7b
...@@ -14,19 +14,19 @@ const User = () => { ...@@ -14,19 +14,19 @@ const User = () => {
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,7 +34,7 @@ const User = () => { ...@@ -34,7 +34,7 @@ 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>
...@@ -52,19 +52,19 @@ const User = () => { ...@@ -52,19 +52,19 @@ const User = () => {
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> <div className="col m-3" xs={6} md={4}></div>
......
client/src/micoffbtn.png
View replaced file @ 9e5bf331 View file @ c0273f7b
client/src/micoffbtn.png

28.2 KB | W: | H:

client/src/micoffbtn.png

28.6 KB | W: | H:

client/src/micoffbtn.png
client/src/micoffbtn.png
client/src/micoffbtn.png
client/src/micoffbtn.png
  • 2-up
  • Swipe
  • Onion skin
client/src/speakerbtn.png
View replaced file @ 9e5bf331 View file @ c0273f7b
client/src/speakerbtn.png

20 KB | W: | H:

client/src/speakerbtn.png

16.6 KB | W: | H:

client/src/speakerbtn.png
client/src/speakerbtn.png
client/src/speakerbtn.png
client/src/speakerbtn.png
  • 2-up
  • Swipe
  • Onion skin
client/src/videooffbtn.png
View replaced file @ 9e5bf331 View file @ c0273f7b
client/src/videooffbtn.png

1.98 KB | W: | H:

client/src/videooffbtn.png

10.2 KB | W: | H:

client/src/videooffbtn.png
client/src/videooffbtn.png
client/src/videooffbtn.png
client/src/videooffbtn.png
  • 2-up
  • Swipe
  • Onion skin
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