Skip to content

GitLab

Commit d8d3d203 authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

merge-all

parent 3e9c534c
Hide whitespace changes
Inline Side-by-side
client/src/App.js
View file @ d8d3d203
......@@ -5,6 +5,10 @@ import HomeUserPage from "./pages/HomeUserPage";
import ProfilePage from "./pages/ProfilePage";
import RoomPage from "./pages/RoomPage";
import InfoUpdatePage from "./pages/InfoUpdatePage";
import InvitePage from "./pages/InvitePage";
import SingupPage from "./components/SignUp";
import LoginPage from "./components/Login"
import InitRoomPage from "./pages/InitRoomPage";
function App() {
return (
......@@ -12,10 +16,14 @@ function App() {
{/* <AuthProvider> */}
<Switch>
<Route exact path="/" component={HomeGuestPage} />
<Route exact path="/user" component={HomeUserPage} />
<Route exact path="/user/:id" component={HomeUserPage} />
<Route exact path="/signup" component={SingupPage} />
<Route exact path="/login" component={LoginPage} />
<Route path="/profile/:id/update" component={InfoUpdatePage} />
<Route path="/profile/:id" component={ProfilePage} />
<Route path="/room/:roomId/:channelId" component={RoomPage} />
<Route path="/room/:roomId" component={InitRoomPage} />
<Route path="/room/Invite" component={InvitePage} />
</Switch>
{/* </AuthProvider> */}
</Router>
......
client/src/apis/room.api.js
View file @ d8d3d203
import axios from "axios";
const getRoom = async (id) => {
const { data } = await axios.get(`/api/room/getRoom/${id}`);
const { data } = await axios.post('/api/room/getRoom', id);
return data;
};
const create = async (payload) => {
const { data } = await axios.post("/api/room/create", payload);
const create = async (formData) => {
const { data } = await axios.post("/api/room/create", formData);
return data;
};
......
client/src/apis/user.api.js
View file @ d8d3d203
import axios from "axios";
const getUser = async (id) => {
// console.log('id222:',id.userID)
const { data } = await axios.get(`/api/getUser/${id}`);
return data;
};
......
client/src/components/Header.js
View file @ d8d3d203
......@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom'
import { handleLogout } from '../context/auth'
const Header = () => {
const id = localStorage.getItem('user');
return (
<div>
<form
......@@ -10,7 +11,7 @@ const Header = () => {
>
<div className="d-flex justify-content-end">
<div>
<Link to="/user">
<Link to={`/user/${id}`}>
<img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
......@@ -51,14 +52,14 @@ const Header = () => {
<div className="row mb-3">
<div className="d-flex justify-content-evenly">
<Link to="/" className="col-2 p-1 btn btn-primary">
<button
type="submit"
className="btn btn-primary"
onClick={() => handleLogout()}
data-bs-dismiss="modal"
>
예
</button>
<button
type="submit"
className="btn btn-primary"
onClick={() => handleLogout()}
data-bs-dismiss="modal"
>
예
</button>
</Link>
<button
type="submit"
......
client/src/components/Home/AddRoom.js
View file @ d8d3d203
......@@ -5,14 +5,13 @@ const AddRoom = () => {
return (
<div>
<div className="mx-4 my-3 d-flex justify-content-between">
<div className="fs-4">
참여중인 방목록
</div>
<div className="fs-4">참여중인 방목록</div>
<button
type="button"
className="py-1 px-2"
data-bs-toggle="modal"
data-bs-target="#myModal"
// data-bs-dismiss="modal"
style={{
display: "flex",
flexDirection: "column",
......@@ -45,7 +44,6 @@ const AddRoom = () => {
className="p-3"
data-bs-toggle="modal"
data-bs-target="#joinModal"
// data-bs-dismiss="modal"
style={{
display: "flex",
flexDirection: "column",
......@@ -54,7 +52,8 @@ const AddRoom = () => {
backgroundColor: "#E0CEE8",
borderColor: "#E0CEE8",
}}
>방참여하기
>
방참여하기
</button>
<div
className="modal fade"
......@@ -83,7 +82,8 @@ const AddRoom = () => {
backgroundColor: "#f5cfe3",
borderColor: "#f5cfe3",
}}
>방생성하기
>
방생성하기
</button>
<div
className="modal fade"
......
client/src/components/Home/CreateRoom.js
View file @ d8d3d203
......@@ -3,11 +3,9 @@ import { Redirect } from "react-router-dom";
import roomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
const userId = localStorage.getItem('user');
const id = localStorage.getItem('user');
const INIT_ROOM = {
name: '',
owner: userId,
member: userId,
profileimg: '',
}
......@@ -23,17 +21,26 @@ const CreateRoom = () => {
}, [room]);
function handleChange(event) {
// console.log(room)
const { name, value } = event.target
setRoom({ ...room, [name]: value })
const { name, value, files } = event.target;
if (files) {
setRoom({ ...room, [name]: files[0] })
} else {
setRoom({ ...room, [name]: value })
}
console.log(room)
}
async function handleSubmit(e) {
e.preventDefault()
// console.log('룸룸', room)
let formData = new FormData();
console.log('profileimg:', room.profileimg)
console.log('name:', room.name)
formData.append("name", room.name);
formData.append("userId", id);
formData.append("profileimg", room.profileimg);
try {
const res = await roomApi.create(room)
// console.log(res)
const res = await roomApi.create(formData)
console.log(res)
const Id = res.id
console.log(Id)
alert(`방참여코드는 ${Id}입니다`)
......@@ -46,9 +53,10 @@ const CreateRoom = () => {
}
if (success) {
console.log('success', success)
// console.log('success', success)
alert('룸생성이 완료되었습니다!')
return <Redirect to='/user' />
window.location.href=`/user/${id}`
// return <Redirect to={`/user/${id}`} />
}
const { name, owner, member, profileimg } = room;
......@@ -57,7 +65,9 @@ const CreateRoom = () => {
<div className="modal-content" >
<form onSubmit={handleSubmit}>
<div className="modal-header">
<div className="modal-title" id="makeModal">방생성하기</div>
<div className="modal-title" id="makeModal">
방생성하기
</div>
<button
type="button"
className="btn-close"
......@@ -66,6 +76,7 @@ const CreateRoom = () => {
></button>
</div>
<div className="modal-body">
{error && <div className="alert alert-danger">{error}</div>}
<h6>방프로필사진</h6>
<div className="mb-4">
<input
......@@ -74,7 +85,7 @@ const CreateRoom = () => {
onChange={handleChange}
accept="image/*"
name="profileimg"
value={room.profileimg} />
/>
</div>
<h6>방이름</h6>
<div className="input-group">
......@@ -86,7 +97,6 @@ const CreateRoom = () => {
aria-describedby="basic-addon1"
onChange={handleChange}
name="name"
value={room.name}
/>
</div>
<div className="modal-footer">
......
client/src/components/Home/HomeProfile.js
View file @ d8d3d203
......@@ -6,28 +6,27 @@ import catchErrors from "../../context/catchError";
const userprofile = localStorage.getItem("user");
const INIT_USER = {
id: userprofile,
email: '',
img: '',
}
email: "",
img: "",
};
const HomeProfile = () => {
const [user, setUser] = useState(INIT_USER)
const [user, setUser] = useState(INIT_USER);
const [error, setError]= useState("");
async function getSetUser(userID) {
try {
console.log('userID', userID)
const data = await userApi.getUser(userID)
console.log(data)
setUser(data)
// console.log(user)
const data = await userApi.getUser(userID);
setUser(data);
} catch (error) {
// catchErrors(error, setError)
catchErrors(error, setError);
}
}
useEffect(() => {
getSetUser(userprofile)
}, [userprofile])
getSetUser(userprofile);
}, [userprofile]);
return (
<Link to={`/profile/${user.id}`} className="text-decoration-none text-dark">
......@@ -40,7 +39,6 @@ const HomeProfile = () => {
width: "157px",
height: "157px",
}}
// value={user.img}
/>
</div>
<h1 className="d-flex justify-content-center"> {user.email} </h1>
......
client/src/components/Home/JoinRoom.js
View file @ d8d3d203
import { useEffect, useState } from "react";
import { Redirect } from "react-router-dom";
import roomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
const userId = localStorage.getItem('user');
const id = localStorage.getItem("user");
const JoinRoom = () => {
const [roomId, setRoomId] = useState('');
const [roomId, setRoomId] = useState("");
const [disabled, setDisabled] = useState(true);
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
......@@ -18,34 +19,36 @@ const JoinRoom = () => {
function handleChange(event) {
const { value } = event.target;
setRoomId(value);
// console.log(roomId);
}
async function handleSubmit(e) {
e.preventDefault();
try {
// setLoading(true);
// setError("");
// console.log('userId:', userId)
// console.log('roomId:', roomId)
const data = await roomApi.join({ userId: userId, roomId: roomId });
// console.log(data);
setError("");
const data = await roomApi.join({ userId: id, roomId: roomId });
console.log('서버연결됬나요', data)
setSuccess(true);
} catch (error) {
// catchErrors(error, setError);
catchErrors(error, setError);
} finally {
// setLoading(false);
}
}
if (success) {
return <Redirect to="/user" />;
// console.log('success', success)
alert('룸참여가 완료되었습니다!')
window.location.href=`/room/${roomId}/1`
}
return (
<div className="modal-content">
<form onSubmit={handleSubmit}>
<div className="modal-header">
<div className="modal-title" id="joinModal">방참여하기</div>
<div className="modal-title" id="joinModal">
방참여하기
</div>
<button
type="button"
className="btn-close"
......@@ -54,6 +57,7 @@ const JoinRoom = () => {
></button>
</div>
<div className="modal-body">
{error && <div className="alert alert-danger">{error}</div>}
<div className="input-group mb-3">
<input
type="text"
......@@ -67,7 +71,9 @@ const JoinRoom = () => {
/>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary">
<button
type="submit"
className="btn btn-primary">
확인
</button>
</div>
......@@ -77,4 +83,4 @@ const JoinRoom = () => {
);
};
export default JoinRoom;
\ No newline at end of file
export default JoinRoom;
client/src/components/Home/RoomSingle.js
View file @ d8d3d203
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom'
import roomApi from '../../apis/room.api';
import userApi from '../../apis/user.api';
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import roomApi from "../../apis/room.api";
import userApi from "../../apis/user.api";
import catchErrors from "../../context/catchError";
const id = localStorage.getItem("user");
const INIT_ROOM = {
roomId:"",
name: "",
profileimg: "",
member: "",
};
const RoomSingle = () => {
const [roomNum, setRoomNum] = useState('')
const [room, setRoom] = useState([])
const roomId = localStorage.getItem('user');
const channelId = 1
const A = []
// async function getJoinRoom(Id) {
// try {
// console.log('id:',id)
// const User = await userApi.getUser({id: Id})
// console.log('User1:',User)
// console.log('User2:',User.roomNumber)
// const RoomNumArr = User.roomNumber
// console.log('setRoomNum:',RoomNumArr)
// const Room = await roomApi.getRoom(RoomNumArr)
// } catch (error) {
// // catchErrors(error, setError)
// }
// }
// useEffect(() => {
// getJoinRoom(id)
// }, [id])
const [room, setRoom] = useState([INIT_ROOM]);
const [error, setError] = useState("");
const channelId = 'main';
const {roomId}=useParams(room.roomId);
async function getJoinRoom(Id) {
try {
const User = await userApi.getUser(Id);
const RoomNumArr = User.roomNumber;
const Room = await roomApi.getRoom(RoomNumArr);
let roomlist = [];
for (let prop in Room) {
roomlist.push({
roomId:Room[prop].id,
name: Room[prop].name,
profileimg: Room[prop].profileimg,
member: Room[prop].member.length,
});
}
setRoom(roomlist);
} catch (error) {
catchErrors(error, setError);
}
}
useEffect(() => {
getJoinRoom(id);
}, [id]);
const { profileimg } = room;
return (
<Link
to={`/room/${roomId}/${channelId}`}
className="text-decoration-none text-dark"
>
<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',
msOverflowStyle:'none',
}}
>
데계 재미있는 수학과 데계데계데계 재미있는 수학과
</div>
<div className="ms-auto mt-2"> 15/34 </div>
</div>
</Link>
)
}
<div>
{room &&
room.map((el) => (
<Link
to={`/room/${el.roomId}/${channelId}`}
className="text-decoration-none text-dark"
>
<div
className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div style={{ width: "37px", height: "37px" }}>
<img
src={`/roomUploads/${el.profileimg}`}
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div
className="mx-3 mt-2"
style={{
width: "250px",
overflow: "scroll",
whiteSpace: "nowrap",
msOverflowStyle: "none",
}}
>
{el.name}
</div>
<div className="ms-auto mt-2"> {el.member}/100 </div>
</div>
</Link>
))}
</div>
);
};
export default RoomSingle
export default RoomSingle;
client/src/components/KakaoShareButton.js 0 → 100644
View file @ d8d3d203
import React, { useEffect } from "react";
const KakaoShareButton = () => {
useEffect(() => {
createKakaoButton();
}, []);
const ad = "이름"
const createKakaoButton = () => {
// kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
if (window.Kakao) {
const kakao = window.Kakao;
// 중복 initialization 방지
if (!kakao.isInitialized()) {
// 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
kakao.init(process.env.REACT_APP_KAKAO_KEY);
}
kakao.Link.createDefaultButton({
container: '#kakao-link-btn',
objectType: 'text',
text:
`${ad}`,
//'기본 템플릿으로 제공되는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오링크는 다른 템플릿을 이용해 보낼 수 있습니다.',
link: {
mobileWebUrl:
'http://localhost:3000/room/Invite',
webUrl:
'http://localhost:3000/room/Invite',
},
});
}
};
return (
<div className="kakao-share-button">
{/* Kakao share button */}
<button
id="kakao-link-btn"
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
>카카오로 초대
</button>
</div>
);
};
export default KakaoShareButton;
client/src/components/Login.js
View file @ d8d3d203
import { useEffect, useState } from 'react'
import { Redirect } from 'react-router-dom'
import { Link } from 'react-router-dom'
import userApi from '../apis/user.api'
import catchErrors from "../context/catchError";
import { handleLogin } from '../context/auth';
import catchErrors from '../context/catchError'
import { handleLogin } from '../context/auth'
const INIT_USER = {
userId: '9999',
email: '',
password: '',
}
const Login = () => {
// const { loading, login, catchErrorAuth } = useAuth()
const [user, setUser] = useState(INIT_USER)
const [disabled, setDisabled] = useState(true)
const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
const [id, setId] = useState('')
useEffect(() => {
const isUser = Object.values(user).every((el) => Boolean(el))
......@@ -27,12 +28,13 @@ const Login = () => {
async function handleSubmit(e) {
e.preventDefault()
console.log('로그인')
try {
// setLoading(true);
// setError("");
console.log('user정보:', user)
const data = await userApi.login(user)
console.log(data)
setId(data.id)
handleLogin(data.id)
setSuccess(true)
} catch (error) {
......@@ -43,63 +45,59 @@ const Login = () => {
}
}
if (success) {
alert('로그인 되었습니다')
return <Redirect to="/user" />
alert('로그인 되었습니다');
window.location.href = `/user/${id}`
}
const { email, password } = user
return (
<div className="modal-content">
{error && <div className="alert alert-danger">{error}</div>}
<div className="container">
<form onSubmit={handleSubmit}>
<div className="modal-header">
<h5 className="modal-title" id="loginModalLabel">
로그인
</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
<div className="m-3 d-flex justify-content-center">
<Link to="/">
<img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
<div className="modal-body">
<div>
<label>아이디</label>
<input
className="form-control"
id="email"
type="text"
name="email"
placeholder="아이디를 입력하세요"
value={email}
onChange={handleChange}
/>
<div className="row mt-5 d-flex align-items-center">
<h2 style={{ textAlign: 'center' }}>로그인</h2>
{error && <div className="alert alert-danger">{error}</div>}
<div className="form-group">
<div className="mt-5">
<label>아이디</label>
<input
className="form-control"
id="email"
type="text"
name="email"
placeholder="아이디를 입력하세요"
value={email}
onChange={handleChange}
/>
</div>
<div className="mt-3">
<label>비밀번호</label>
<input
className="form-control"
id="password"
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
value={password}
onChange={handleChange}
/>
</div>
</div>
<div>
<label>비밀번호</label>
<input
className="form-control"
id="loginPassword"
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
value={password}
onChange={handleChange}
/>
<div className="mt-4 d-flex justify-content-center">
<button
type="submit"
className="btn btn-primary"
disabled={disabled}
>
로그인
</button>
</div>
</div>
<div className="modal-footer">
<button
type="submit"
className="btn btn-primary"
disabled={disabled}
data-bs-dismiss="modal"
>
로그인
</button>
</div>
</form>
</div>
)
......
client/src/components/Profile/Info.js
View file @ d8d3d203
import userApi from "../../apis/user.api";
import { useEffect, useState } from "react";
import catchErrors from "../../context/catchError";
const userprofile = localStorage.getItem("user");
const INIT_PROFILE = {
......@@ -11,12 +12,15 @@ const INIT_PROFILE = {
const Info = () => {
const [profile, setProfile] = useState(INIT_PROFILE);
const [error, setError]= useState("");
async function getProfile(userID) {
try {
const data = await userApi.getUser(userID);
setProfile(data);
} catch (error) {}
} catch (error) {
catchErrors(error, setError);
}
}
useEffect(() => {
getProfile(userprofile);
......
client/src/components/Profile/InfoUpdate.js
View file @ d8d3d203
import { Link, useParams } from "react-router-dom";
import React, { useEffect, useState } from "react";
import userApi from "../../apis/user.api";
import catchErrors from "../../context/catchError";
const userprofile = localStorage.getItem("user");
const INIT_PROFILE = {
......@@ -16,12 +17,15 @@ const InfoUpdate = () => {
const [profile, setProfile] = useState(INIT_PROFILE);
const [error,setError]=useState("");
async function getProfile(userID) {
try {
const data = await userApi.getUser(userID);
setProfile(data);
} catch (error) {}
} catch (error) {
catchErrors(error, setError);
}
}
useEffect(() => {
......@@ -30,6 +34,7 @@ const InfoUpdate = () => {
const handleChange = async (event) => {
const { files } = event.target;
console.log('files:',files)
let formData = new FormData();
formData.append("img", files[0]);
formData.append("id", userprofile);
......@@ -39,7 +44,9 @@ const InfoUpdate = () => {
setProfile({...profile, img:res})
}else{
setProfile()
} } catch (error) {}
} } catch (error) {
catchErrors(error, setError);
}
};
const changeinfo = async (event) => {
......
client/src/components/Profile/Profile.js
View file @ d8d3d203
import { Link, useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import userApi from "../../apis/user.api";
import catchErrors from "../../context/catchError";
const userprofile = localStorage.getItem("user");
const INIT_PROFILE = {
......@@ -11,14 +11,18 @@ const INIT_PROFILE = {
const Profile = () => {
const [profile, setProfile] = useState(INIT_PROFILE);
const [error,setError]= useState("");
async function getProfile(userID) {
try {
const data = await userApi.getUser(userID);
console.log(data)
setProfile(data.img)
} catch (error) {}
} catch (error) {
catchErrors(error, setError);
}
}
console.log(profile)
useEffect(() => {
getProfile(userprofile);
}, [userprofile]);
......
client/src/components/Room/ChannelList.js
View file @ d8d3d203
import { Link } from 'react-router-dom'
import React, { useState } from 'react';
import LeftHamburger from './LeftHamburger';
import RightHamburger from './RightHamburger';
const ChannelList = () => {
const id = localStorage.getItem('user');
return (
<div>
<nav className="navbar navbar-light d-flex justify-content-between">
<LeftHamburger />
<nav className="navbar navbar-light ">
<div className="col-2"></div>
<div>
<Link to="/user">
<Link to={`/user/${id}`}>
<img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
......
client/src/components/Room/ChannelSingle.js
View file @ d8d3d203
const ChannelSingle = () => {
return (
<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" 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>
import { Link, Route, Switch, useParams } from "react-router-dom";
<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>
const ChannelSingle = (props) => {
const { roomId } = useParams();
console.log("props", props.channel);
return (
<div>
<div className="overflow-auto" style={{ height: "610px" }}>
{props.channel.map((el) => (
<div className="mb-3">
<Link to={`${roomId}/${el.channelName}`}>
<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" style={{ color: "black" }}>
{el.channelName}
</h5>
</div>{" "}
</Link>
<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>
{el.joinName &&
el.joinName.map((e) => (
<div>
<ul className="mx-5" style={{ color: "#76D079" }}>
<li>
<p style={{ color: "black" }}>{e}</p>
</li>
</ul>
</div>
))}
</div>
))}
</div>
</div>
)
}
);
};
export default ChannelSingle
export default ChannelSingle;
client/src/components/Room/Controller.js
View file @ d8d3d203
import ScreenSelect from './ScreenSelect'
import video_btn from '../../images/videobtn.png'
import speaker_btn from '../../images/speakerbtn.png'
import mic_btn from '../../images/micbtn.png'
import videooff_btn from '../../images/videooffbtn.png'
import speakeroff_btn from '../../images/speakeroffbtn.png'
import micoff_btn from '../../images/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 [mic, setMic] = useState(true)
const [speaker, setSpeaker] = useState(true)
const [video, setVideo] = useState(true)
const micOn = (() => setMic(false));
const micOff = (() => setMic(true));
......@@ -29,22 +23,22 @@ const Controller = () => {
{mic ? <div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={micOn}>
<img src={micoff_btn} width="45" height="40" />
<img src="/micoffbtn.png" width="45" height="40" />
</button>
</div>
: <div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={micOff}>
<img src={mic_btn} width="45" height="40" />
<img src="/micbtn.png" 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" />
<img src="/speakeroffbtn.png" 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="/speakerbtn.png" width="45" />
</button>
</div>
}
......@@ -57,12 +51,12 @@ const Controller = () => {
onClick="location.href='ScreenSelect.js'"
onClick={videoOn}
>
<img src={videooff_btn} width="45" />
<img src="/videooffbtn.png" width="45" />
</button>
</div> :
<div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={videoOff}>
<img src={video_btn} width="45" />
<img src="/videobtn.png" width="45" />
</button>
</div>}
</div>
......
client/src/components/Room/InitRoom.js 0 → 100644
View file @ d8d3d203
import { useEffect, useState } from "react";
import catchErrors from "../../context/catchError";
import { useParams } from "react-router-dom";
import roomApi from "../../apis/room.api";
const INIT_ROOM = {
id: "",
name: "",
profileimg: "",
};
const InitRoom = () => {
const { roomId } = useParams();
const [room, setRoom] = useState(INIT_ROOM);
const [error, setError] = useState("");
async function getRoom(roomId) {
console.log(roomId)
try {
const data = await roomApi.getRoom([roomId]);
setRoom(data[0]);
} catch (error) {
catchErrors(error, setError);
}
}
console.log(room)
useEffect(() => {
console.log('roomId확인', roomId)
getRoom(roomId);
}, [roomId]);
return (
<div>
<div style={{ backgroundColor: "#262626", width: "auto", height: "2px" }} />
<form className="flex-row align-items-center justify-content-center m-5">
<div className="d-flex justify-content-center">
<img
src={`/roomUploads/${room.profileimg}`}
className="rounded-circle"
style={{
width: "250px",
height: "250px",
}}
/>
</div>
<div className="d-flex justify-content-center mt-3">
<div>
<div className="row">
<h6 className="col" style={{ text: 'center' }}> 방이름 </h6>
<h4 className="col"> {room.name} </h4>
</div>
<div className="row">
<h6 className="col"> 방코드 </h6>
<h4 className="col"> {room.id} </h4>
</div>
</div>
</div>
</form>
</div>
);
};
export default InitRoom;
client/src/components/Room/LeftHamburger.js deleted 100644 → 0
View file @ 3e9c534c
import backward from "../../images/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="#inviteRoom"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#E0CEE8",
color: "black",
border: "1px #D64D61",
}}
>
초대
</button>
<div
className="modal fade"
id="inviteRoom"
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-toggle="modal"
data-bs-target="#copyRoomId"
onClick={roomIdCopy}
style={{ width: "120px" }}
>
방 Id 복사
</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/RightHamburger.js
View file @ d8d3d203
import { useState } from "react";
import ChannelSingle from './ChannelSingle'
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import ChannelSingle from "./ChannelSingle";
import Rightimg from "../../images/RightHamburgerImg.png";
import RoomApi from "../../apis/room.api";
import roomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
const RightHamberger = () => {
const [admin, setAdmin] = useState('true')
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>
const INIT_CHANNEL = {
channelName: "",
joinName: [],
};
const INIT_ROOM = {
name: "",
};
const RightHamburger = () => {
const [channel, setChannel] = useState([INIT_CHANNEL]);
const [room, setRoom] = useState([INIT_ROOM]);
const { roomId } = useParams();
const [error, setError] = useState("");
async function getroom(Id) {
try {
const Room = await roomApi.getRoom([Id]);
setRoom({...room, name:Room[0].name})
} catch (error) {
catchErrors(error, setError);
}
}
async function getChannel(roomId) {
// console.log('roomId', roomId)
const ID = roomId;
try {
const data = await roomApi.getRoom([ID]);
const Channel = data[0].channel;
// console.log('방데이터:', Channel)
const channelList = [];
for (const prop in Channel) {
// Channel의 항목(prop)으로 작업을 실행합니다
for (const key in Channel[prop]) {
// console.log(key)
// console.log(prop)
// console.log(Channel[prop][key])
channelList.push({
channelName: key,
joinName: Channel[prop][key],
});
}
}
setChannel(channelList);
} catch (error) {
catchErrors(error, setError);
}
}
// console.log(channel)
useEffect(() => {
getChannel(roomId);
getroom(roomId)
}, [roomId]);
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="#right-hamburger"
aria-controls="right-hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: "#f4c1f2" }}
>
<img src={Rightimg} width="50px" height="30px" />
</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: "hidden",
whiteSpace: "nowrap",
width: "150px",
color: "#000000",
}}
>
{room.name}
</p>
<h6 className="mt-2" id="roomId">
{" "}
{`${roomId}`}{" "}
</h6>
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<ChannelSingle channel={channel} />
<div>
<div className="d-flex flex-row-reverse">
<button
type="button"
className="m-3 rounded"
data-bs-toggle="modal"
data-bs-target="#inviteRoom"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#E0CEE8",
color: "black",
border: "1px #D64D61",
}}
>
초대
</button>
<div
className="offcanvas offcanvas-end"
style={{ width: '330px' }}
tabIndex="-1"
id="right-hamburger"
aria-labelledby="hamburgerLabel"
className="modal fade"
id="inviteRoom"
tabIndex="-1"
aria-labelledby="exitRoomLabel"
aria-hidden="true"
>
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: 'bold',
fontSize: '15px',
overflow: 'hidden',
whiteSpace: 'nowrap',
width: '150px',
color: '#000000',
}}
>
데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
</p>
<h6 className="mt-2" id="roomId" > #ASV2AE985 </h6>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
type="button"
className="btn-close"
data-bs-dismiss="modal"
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: '#d86da6',
color: 'black',
border: '1px #d86da6',
}}
>
퇴장
</button>
{admin ? <button
type="button"
className="m-3 rounded"
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#E0CEE8',
color: 'black',
border: '1px #D64D61',
}}
>
설정
</button> : null}
<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"> */}
</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"
data-bs-toggle="modal"
data-bs-target="#copyRoomId"
onClick={roomIdCopy}
style={{ width: "120px" }}
>
예
</button>
{/* </Link> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
아니요
</button>
</div>
</div>
</div>
</div>
</div>
방 Id 복사
</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>
<button
type="button"
className="m-3 rounded text-white"
data-bs-toggle="modal"
data-bs-target="#exitRoom"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#d86da6",
color: "black",
border: "1px #d86da6",
}}
>
퇴장
</button>
{/* {admin ? (
<button
type="button"
className="m-3 rounded"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#E0CEE8",
color: "black",
border: "1px #D64D61",
}}
>
설정
</button>
) : null} */}
}
<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/:id"> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
예
</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>
</div>
);
};
export default RightHamberger
\ No newline at end of file
export default RightHamburger;
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