Skip to content

GitLab

Commit 1a37189e authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

Merge remote-tracking branch 'origin/jaeyeon2' into layout-merge

parents 1090e69e 22c4af4c
Hide whitespace changes
Inline Side-by-side
client/src/components/Home/RoomSingle.js
View file @ 1a37189e
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom'
const RoomSingle = () => { const RoomSingle = () => {
const id = 1; const id = 1
const channelId = 1; const channelId = 1
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="d-flex mx-4 my-2 p-2" className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }} style={{ backgroundColor: '#C4C4C4' }}
> >
<div 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="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}> <div
데계 재미있는 수학과 데계데계데계 재미있는 수학과</div> className="mx-3 mt-2"
style={{
width: '250px',
overflow:'scroll',
whiteSpace: 'nowrap',
msOverflowStyle:'none',
}}
>
데계 재미있는 수학과 데계데계데계 재미있는 수학과
</div>
<div className="ms-auto mt-2"> 15/34 </div> <div className="ms-auto mt-2"> 15/34 </div>
</div> </div>
<div <div
className="d-flex mx-4 my-2 p-2" className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }} style={{ backgroundColor: '#C4C4C4' }}
> >
<div 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="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}> <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>
<div <div
className="d-flex mx-4 my-2 p-2" className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }} style={{ backgroundColor: '#C4C4C4' }}
> >
<div 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="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}> <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>
); )
}; }
export default RoomSingle; export default RoomSingle
client/src/components/Profile/InfoUpdate.js
View file @ 1a37189e
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import React, { useState } from "react";
const InfoUpdate = () => { const InfoUpdate = () => {
// const INIT_ACCOUNT={
// name:"",
// }
// const [account, setAccount] = useState(INIT_ACCOUNT)
// const handleChange = (e)=>{
// const {name, value, files}=e.target
// if(files){
// setAccount({...account,[name]:files})
// console.log('aaaaaaa')
// } else{
// setAccount({...account, [name]:value})
// }
// }
function inputfile(){
console.log('aa')
}
const id = 1; const id = 1;
const number = 1234; const number = 1234;
return ( return (
...@@ -36,18 +49,41 @@ const InfoUpdate = () => { ...@@ -36,18 +49,41 @@ const InfoUpdate = () => {
<div className="col"> <div className="col">
<div> <div>
<div className="row"> <div className="row">
<div className="d-flex justify-content-center"> <div
className="d-flex justify-content-center"
style={{ position: "relative" }}
>
<img <img
src="/cherry.jpg" src="/cherry.jpg"
id="imgfile" id="imgfile"
className="rounded-circle mt-2" className="rounded-circle mt-2"
style={{ height: "320px", width: "320px" }} style={{ height: "320px", width: "320px" }}
/> />
<div
className="d-flex justify-content-end"
style={{ position: "absolute", left: "295px", top: "30px" }}
>
<label for="inputfile">
<img
className="rounded-circle"
src="/infoimg.jpg"
// onChange={handleChange}
style={{
width: "50px",
height: "50px",
backgroundColor: "white",
}}
/>
</label>
<input
type="file"
accept="image/*"
id="inputfile"
style={{ display: "none" }}
/>
</div>
</div> </div>
<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"> <div className="col d-flex justify-content-center">
<input <input
type="text" type="text"
......
client/src/components/Room/ChannelList.js
View file @ 1a37189e
import ChannelSingle from './ChannelSingle'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import backward from '../../backward.png' import React, { useState } from 'react';
import LeftHamberger from './LeftHamberger';
import RightHamberger from './RightHamberger';
const ChannelList = () => { const ChannelList = () => {
// function copytoClipboard() {
// const [code, setCode] = useState()
// const roomcode = document.getElementById("textarea")
// alert("코드를 복사하였습니다.")
// }
return ( return (
<div> <div>
<nav className="navbar navbar-light d-flex justify-content-between"> <nav className="navbar navbar-light d-flex justify-content-between">
<div> <LeftHamberger />
<Link to="/user">
<button type="button" className="btn">
<img src={backward} width="25" height="25" />
</button>
</Link>
</div>
<div> <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>
<RightHamberger />
<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> </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>
) )
} }
......
client/src/components/Room/ChannelSingle.js
View file @ 1a37189e
const ChannelSingle = () => { const ChannelSingle = () => {
return ( return (
<div className="overflow-auto" style={{ height: '610px' }}> <div className="overflow-auto" style={{ height: '610px' }}>
<div className="mb-3"> <div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}> <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
<img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" /> <img
<h5 className="col mt-2">회의</h5> className="col-auto mt-2"
</div> src="/fullSpeaker.png"
<ul className="mx-5"> width="25px"
<li> height="25px"
CHERRY />
</li> <h5 className="col mt-2">회의</h5>
<li> </div>
JAEYEON <ul className="mx-5" style={{ color: '#76D079' }}>
</li> <li>
<li> <p style={{ color: 'black' }}>CHERRY</p>
SEOYEON </li>
</li> <li>
<li> <p style={{ color: 'black' }}>JAEYEON</p>
JIWEON </li>
</li> <li>
<li> <p style={{ color: 'black' }}>SEOYEON</p>
BYOUNGYUN </li>
</li> <li>
</ul> <p style={{ color: 'black' }}>JIWEON</p>
</div> </li>
<li>
<div className="mb-3"> <p style={{ color: 'black' }}>BYOUNGYUN</p>
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}> </li>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" /> </ul>
<h5 className="col mt-2">사담</h5> </div>
</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="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}> <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" /> <img
<h5 className="col mt-2">일반</h5> className="col-auto mt-2"
</div> src="/emptySpeaker.png"
<ul className="mx-5"> width="25px"
<li> height="25px"
CHERRY />
</li> <h5 className="col mt-2">사담</h5>
<li> </div>
JAEYEON <ul className="mx-5" style={{ color: '#76D079' }}>
</li> <li>
<li> <p style={{ color: 'black' }}>CHERRY</p>
SEOYEON </li>
</li> <li>
<li> <p style={{ color: 'black' }}>JAEYEON</p>
JIWEON </li>
</li> <li>
<li> <p style={{ color: 'black' }}>SEOYEON</p>
BYOUNGYUN </li>
</li> <li>
</ul> <p style={{ color: 'black' }}>JIWEON</p>
</div> </li>
<li>
<p style={{ color: 'black' }}>BYOUNGYUN</p>
</li>
</ul>
</div>
<div className="mb-3"> <div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}> <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" /> <img
<h5 className="col mt-2">공지</h5> className="col-auto mt-2"
</div> src="/emptySpeaker.png"
<ul className="mx-5"> width="25px"
<li> height="25px"
CHERRY />
</li> <h5 className="col mt-2">일반</h5>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
</div> </div>
<ul className="mx-5" style={{ color: '#76D079' }}>
<li>
<p style={{ color: 'black' }}>CHERRY</p>
</li>
<li>
<p style={{ color: 'black' }}>JAEYEON</p>
</li>
<li>
<p style={{ color: 'black' }}>SEOYEON</p>
</li>
<li>
<p style={{ color: 'black' }}>JIWEON</p>
</li>
<li>
<p style={{ color: 'black' }}>BYOUNGYUN</p>
</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" style={{ color: '#76D079' }}>
<li>
<p style={{ color: 'black' }}>CHERRY</p>
</li>
<li>
<p style={{ color: 'black' }}>JAEYEON</p>
</li>
<li>
<p style={{ color: 'black' }}>SEOYEON</p>
</li>
<li>
<p style={{ color: 'black' }}>JIWEON</p>
</li>
<li>
<p style={{ color: 'black' }}>BYOUNGYUN</p>
</li>
</ul>
</div>
</div>
)
}
export default ChannelSingle; export default ChannelSingle
client/src/components/Room/LeftHamberger.js 0 → 100644
View file @ 1a37189e
import backward from "../../backward.png";
import ChannelSingle from "./ChannelSingle";
const LeftHamberger = () => {
function roomIdCopy() {
const t = document.querySelector("#roomId").innerText;
console.log(t);
navigator.clipboard.writeText(t);
//document.execCommand("copy");
}
return (
<div>
<div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#left-hamburger"
aria-controls="left-hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: "#f4c1f2" }}
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
<div
className="offcanvas offcanvas-start"
style={{ width: "330px" }}
tabIndex="-1"
id="left-hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: "bold",
fontSize: "15px",
width: "150px",
color: "#000000",
}}
>
온/오프라인 사용자
</p>
<h6 className="mt-2" id="roomId">
{" "}
#ASV2AE985{" "}
</h6>
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div className="overflow-auto" style={{ height: "610px" }}>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<h5 className="col mt-2">온라인 사용자</h5>
</div>
<ul className="mx-5" style={{ color: "#76D079" }}>
<li>
<p style={{ color: "black" }}>CHERRY</p>
</li>
<li>
<p style={{ color: "black" }}>JAEYEON</p>
</li>
<li>
<p style={{ color: "black" }}>SEOYEON</p>
</li>
<li>
<p style={{ color: "black" }}>JIWEON</p>
</li>
<li>
<p style={{ color: "black" }}>BYOUNGYUN</p>
</li>
</ul>
</div>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<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 className="d-flex flex-row-reverse">
<button
type="button"
className="m-3 rounded"
data-bs-toggle="modal"
data-bs-target="#exitRoom"
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">
<button
type="submit"
className="col-2 p-1 btn btn-primary"
style={{ width: "120px" }}
>
카카오로 초대
</button>
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={roomIdCopy}
>
방 Id 복사
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default LeftHamberger;
client/src/components/Room/RightHamberger.js 0 → 100644
View file @ 1a37189e
import ChannelSingle from './ChannelSingle'
const RightHamberger = () => {
function copyInput() {
const t = document.querySelector('#roomId').innerText;
console.log(t)
navigator.clipboard.writeText(t);
document.execCommand('copy');
}
return (
<div>
<div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#right-hamburger"
aria-controls="right-hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: '#f4c1f2' }}
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
<div
className="offcanvas offcanvas-end"
style={{ width: '330px' }}
tabIndex="-1"
id="right-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" id="roomId" > #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>
<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 RightHamberger
\ No newline at end of file
client/src/components/Room/Screen.js
View file @ 1a37189e
const Screen = () => { const Screen = () => {
const user = '00'
return ( return (
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col" style={{ backgroundColor: '#FCF4FF' }}> <div className="col mt-3 d-flex justify-content-space-between" style={{ backgroundColor: '#FCF4FF' }}>
<p className="m-2" style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}> <img
스크린<br/> className="rounded-circle"
src="/cherry.jpg"
width="40px"
height="40px"
/>
<p
className="m-2"
style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}
>
{user}님이 화면공유중...
<br />
</p> </p>
<div className="col m-5"></div> <div className="col m-5"></div>
</div> </div>
......
client/src/components/SignUp.js
View file @ 1a37189e
...@@ -89,6 +89,7 @@ const Signup = () => { ...@@ -89,6 +89,7 @@ const Signup = () => {
type="text" type="text"
name="idNumber1" name="idNumber1"
placeholder="●●●●●●" placeholder="●●●●●●"
maxLength='6'
value={idNumber1} value={idNumber1}
onChange={handleChange} onChange={handleChange}
/> />
...@@ -153,7 +154,7 @@ const Signup = () => { ...@@ -153,7 +154,7 @@ const Signup = () => {
id="phone" id="phone"
type="text" type="text"
name="phone" name="phone"
placeholder="숫자만 입력하세요" placeholder="'-'을 제외하고 입력하세요"
value={phone} value={phone}
onChange={handleChange} onChange={handleChange}
/> />
......
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