Skip to content

GitLab

Commit 7ad5341d authored by 권병윤's avatar 권병윤
Browse files

Merge remote-tracking branch 'origin/woojiweon2' into byoungyun1

parents 2ddaecff 0e228dad
Hide whitespace changes
Inline Side-by-side
client/.gitignore
View file @ 7ad5341d
...@@ -22,4 +22,6 @@ npm-debug.log* ...@@ -22,4 +22,6 @@ npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
.env .env
\ No newline at end of file
kakao.config.json
\ No newline at end of file
client/package-lock.json
View file @ 7ad5341d
...@@ -14078,9 +14078,9 @@ ...@@ -14078,9 +14078,9 @@
"integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==" "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
}, },
"tar": { "tar": {
"version": "6.1.0", "version": "6.1.5",
"resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz", "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.5.tgz",
"integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==", "integrity": "sha512-FiK6MQyyaqd5vHuUjbg/NpO8BuEGeSXcmlH7Pt/JkugWS8s0w8nKybWjHDJiwzCAIKZ66uof4ghm4tBADjcqRA==",
"requires": { "requires": {
"chownr": "^2.0.0", "chownr": "^2.0.0",
"fs-minipass": "^2.0.0", "fs-minipass": "^2.0.0",
......
client/public/index.html
View file @ 7ad5341d
...@@ -39,5 +39,6 @@ ...@@ -39,5 +39,6 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
</body> </body>
</html> </html>
client/src/apis/room.api.js
View file @ 7ad5341d
import axios from "axios"; import axios from "axios";
const getRoom = async (id) => { const getRoom = async (id) => {
const { data } = await axios.post('/api/room/getRoom', id); const { data } = await axios.post("/api/room/getRoom", id);
return data; return data;
}; };
const exitRoom = async (ID) => { const exitRoom = async (ID) => {
const { data } = await axios.delete(`/api/room/exitRoom/${ID.id}/${ID.roomId}`); const { data } = await axios.delete(
`/api/room/exitRoom/${ID.id}/${ID.roomId}`
);
return data; return data;
}; };
...@@ -21,15 +23,47 @@ const join = async (payload) => { ...@@ -21,15 +23,47 @@ const join = async (payload) => {
}; };
const changename = async (payload) => { const changename = async (payload) => {
const { data } = await axios.put("/api/room/changename", payload) const { data } = await axios.put("/api/room/changename", payload);
return data; return data;
} };
const profileimg = async (formData) => { const profileimg = async (formData) => {
const { data } = await axios.put("/api/room/profileimg", formData); const { data } = await axios.put("/api/room/profileimg", formData);
return data; return data;
}; };
const roomApi = { getRoom, exitRoom, create, join, changename, profileimg }; const joinChannel = async (payload) => {
const { data } = await axios.post("/api/room/joinChannel", payload);
return data;
};
const doubleJoin = async (payload) => {
const { data } = await axios.post("/api/room/doubleJoin", payload);
return data;
};
const makeChannel = async (payload) => {
console.log("안녕", payload)
const { data } = await axios.put("/api/room/makeChannel", payload);
return data;
};
const channelDelete = async (payload) => {
const { data } = await axios.put("/api/room/channelDelete", payload);
return data;
};
const roomApi = {
getRoom,
exitRoom,
create,
join,
changename,
joinChannel,
doubleJoin,
profileimg,
makeChannel,
channelDelete
};
export default roomApi; export default roomApi;
client/src/components/Home/RoomSingle.js
View file @ 7ad5341d
...@@ -14,7 +14,7 @@ const INIT_ROOM = { ...@@ -14,7 +14,7 @@ const INIT_ROOM = {
const RoomSingle = () => { const RoomSingle = () => {
const [room, setRoom] = useState([INIT_ROOM]); const [room, setRoom] = useState([INIT_ROOM]);
const [error, setError] = useState(""); const [error, setError] = useState("");
const channelId = 'main'; const channelId = "main";
const { roomId } = useParams(room.roomId); const { roomId } = useParams(room.roomId);
async function getJoinRoom(Id) { async function getJoinRoom(Id) {
try { try {
...@@ -45,36 +45,40 @@ const RoomSingle = () => { ...@@ -45,36 +45,40 @@ const RoomSingle = () => {
{room && {room &&
room.map((el) => ( room.map((el) => (
<div> <div>
{room[0] === INIT_ROOM ? (<div></div>): ( {room[0] === INIT_ROOM ? (
<Link <div></div>
to={`/room/${el.roomId}/${channelId}`} ) : (
className="text-decoration-none text-dark" <Link
> to={`/room/${el.roomId}/${channelId}`}
<div className="text-decoration-none text-dark"
className="d-flex mx-4 my-2 p-2" key={el.roomId}
style={{ backgroundColor: "#C4C4C4" }}
> >
<div style={{ width: "37px", height: "37px" }}>
<img
src={`/roomUploads/${el.profileimg}`}
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div <div
className="mx-3 mt-2" className="d-flex mx-4 my-2 p-2"
style={{ style={{ backgroundColor: "#C4C4C4" }}
width: "250px",
overflow: "scroll",
whiteSpace: "nowrap",
msOverflowStyle: "none",
}}
> >
{el.name} <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> </div>
<div className="ms-auto mt-2"> {el.member}/100 </div> </Link>
</div> )}
</Link>)}
</div> </div>
))} ))}
</div> </div>
......
client/src/components/KakaoShareButton.js
View file @ 7ad5341d
...@@ -6,12 +6,12 @@ import catchErrors from "../context/catchError"; ...@@ -6,12 +6,12 @@ import catchErrors from "../context/catchError";
const INIT_invite = { const INIT_invite = {
id: "", id: "",
name:"", name: "",
} };
const KakaoShareButton = (porps) => { const KakaoShareButton = (porps) => {
const [inviteperson, setProfile] = useState(INIT_invite); const [inviteperson, setProfile] = useState(INIT_invite);
const [error,setError]=useState(""); const [error, setError] = useState("");
const { roomId } = useParams(); const { roomId } = useParams();
const invitepersonId = localStorage.getItem("user"); const invitepersonId = localStorage.getItem("user");
...@@ -32,16 +32,6 @@ const KakaoShareButton = (porps) => { ...@@ -32,16 +32,6 @@ const KakaoShareButton = (porps) => {
createKakaoButton(); createKakaoButton();
}, []); }, []);
useEffect(() => {
const script = document.createElement('script')
script.src = 'https://developers.kakao.com/sdk/js/kakao.js'
script.async = true
document.body.appendChild(script)
return () => {
document.body.removeChild(script)
}
}, [])
const createKakaoButton = () => { const createKakaoButton = () => {
// kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다 // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
if (window.Kakao) { if (window.Kakao) {
...@@ -52,30 +42,28 @@ const KakaoShareButton = (porps) => { ...@@ -52,30 +42,28 @@ const KakaoShareButton = (porps) => {
kakao.init(kakao_key[0].kakao_key); kakao.init(kakao_key[0].kakao_key);
} }
kakao.Link.createDefaultButton({ kakao.Link.createDefaultButton({
container: '#kakao-link-btn', container: "#kakao-link-btn",
objectType: 'text', objectType: "text",
text: text: `${inviteperson.name}님이 당신을 화상회의에 초대했습니다! 초대된 방 코드:${roomId}`,
`${inviteperson.name}님이 당신을 화상회의에 초대했습니다! 초대된 방 코드:${roomId}`, link: {
link: { mobileWebUrl: `http://localhost:3000/invite/${roomId}`,
mobileWebUrl: webUrl: `http://localhost:3000/invite/${roomId}`,
`http://localhost:3000/invite/${roomId}`,
webUrl:
`http://localhost:3000/invite/${roomId}`,
}, },
}); });
} }
}; };
return ( return (
<div className="kakao-share-button"> <div className="kakao-share-button">
{/* Kakao share button */} {/* Kakao share button */}
<button <button
id="kakao-link-btn" id="kakao-link-btn"
type="submit" type="submit"
className="col-2 p-1 btn btn-primary" className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal" data-bs-dismiss="modal"
style={{ width: "120px" }} style={{ width: "120px" }}
>카카오로 초대 >
카카오로 초대
</button> </button>
</div> </div>
); );
......
client/src/components/Login.js
View file @ 7ad5341d
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom' import { Link, Redirect } from 'react-router-dom'
import userApi from '../apis/user.api' import userApi from '../apis/user.api'
import catchErrors from '../context/catchError' import catchErrors from '../context/catchError'
import { handleLogin } from '../context/auth' import { handleLogin } from '../context/auth'
...@@ -46,7 +46,7 @@ const Login = () => { ...@@ -46,7 +46,7 @@ const Login = () => {
} }
if (success) { if (success) {
alert('로그인 되었습니다') alert('로그인 되었습니다')
window.location.href = `/user/${id}` return <Redirect to={`/user/${id}`} />;
} }
const { email, password } = user const { email, password } = user
......
client/src/components/Room/ChannelList.js
View file @ 7ad5341d
import { Link } from 'react-router-dom' import { Link, useParams } from 'react-router-dom'
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import RightHamburger from './RightHamburger'; import RightHamburger from './RightHamburger';
import roomApi from '../../apis/room.api';
import catchErrors from '../../context/catchError';
import userApi from '../../apis/user.api';
const INIT_CHANNEL = {
channelName: "",
joinUser: [],
};
const ChannelList = () => { const ChannelList = () => {
const { roomId } = useParams();
const [error, setError] = useState("");
const [channel, setChannel] = useState([INIT_CHANNEL]);
const id = localStorage.getItem('user'); const id = localStorage.getItem('user');
async function getChannel(roomId) {
try {
const data = await roomApi.getRoom([roomId]);
const Channel = data[0].channel;
const channelList = [];
for (const prop in Channel) {
for (const el in Channel[prop]) {
channelList.push({
channelName: el,
joinUser: Channel[prop][el],
});
}
}
setChannel(channelList);
} catch (error) {
catchErrors(error, setError);
}
}
async function exitChannel() {
try {
const data = await userApi.getUser(id);
const A = doubleJoinCheck(data.name)
if (A) {
await roomApi.doubleJoin({ roomId: roomId, index1: A.index1, index2: A.index2, joinChName: A.joinChName })
}
} catch (error) {
catchErrors(error, setError);
}
}
function doubleJoinCheck(e) {
for (const index in channel) {
for (const el in channel[index].joinUser) {
if (channel[index].joinUser[el] === e) {
const doublejoinCh = channel[index].channelName
const A = {
index1: index,
index2: el,
joinChName: doublejoinCh,
}
return A
}
}
}
}
useEffect(() => {
getChannel(roomId);
}, [roomId])
return ( return (
<div> <div>
<nav className="navbar navbar-light "> <nav className="navbar navbar-light ">
<div className="col-2"></div> <div className="col-2"></div>
<div> <div onClick={exitChannel}>
<Link to={`/user/${id}`}> <Link to={`/user/${id}`}>
<img src="/BORA.png" style={{ width: '160px' }} /> <img src="/BORA.png" style={{ width: '160px' }} />
</Link> </Link>
......
client/src/components/Room/ChannelSingle.js
View file @ 7ad5341d
import { useState } from 'react'
import { Link, useParams } from 'react-router-dom' 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 ChannelSingle = (props) => { const ChannelSingle = (props) => {
const { roomId, channelId } = useParams() console.log(props.channel);
console.log('props', props.channel) const [error, setError] = useState("");
console.log('hi', channelId) const [success, setSuccess] = useState(false);
const [roomName, setRoomName] = useState('');
const { roomId, channelId } = useParams();
const userId = localStorage.getItem('user')
async function joinChannel(e) {
console.log(e, userId)
try {
const data = await userApi.getUser(userId);
const index1 = indexCheck(e)
const A = doubleJoinCheck(data.name)
const mem = props.channel[index1].joinUser
const joinCh = mem.includes(data.name);
if (!joinCh) {
if (A) {
await roomApi.doubleJoin({ roomId: roomId, index1: A.index1, index2: A.index2, joinChName: A.joinChName })
}
await roomApi.joinChannel({ roomId: roomId, channelName: e, plusUser: data.name, index: index1 })
setRoomName(e)
setSuccess(true)
} else {
alert('이미 참여된 채널입니다.')
}
} catch (error) {
catchErrors(error, setError);
}
}
function indexCheck(e) {
for (const index1 in props.channel) {
if (props.channel[index1].channelName === e) {
return index1
}
}
}
function doubleJoinCheck(e) {
for (const index in props.channel) {
for (const el in props.channel[index].joinUser) {
if (props.channel[index].joinUser[el] === e) {
const doublejoinCh = props.channel[index].channelName
const A = {
index1: index,
index2: el,
joinChName: doublejoinCh,
}
return A
}
}
}
}
if (success) {
alert(`${roomName} 채널에 참가되었습니다.`)
window.location.href = `/room/${roomId}/${roomName}`
}
return ( return (
<div> <div>
<div className="overflow-auto" style={{ height: '610px' }}> <div className="overflow-auto" style={{ height: '610px' }}>
{props.channel.map((el) => ( {props.channel.map((el,i) => (
<div className="mb-3"> <div className="mb-3" key={`channel${i}`}>
<Link to={`/room/${roomId}/${el.channelName}`}> <div
<div className="m-3 p-1 row"
className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}
style={{ backgroundColor: '#E0CEE8' }} onClick={() => joinChannel(el.channelName)}
> >
{el.channelName === channelId ? ( {el.channelName === channelId ? (
<img <img
className="col-auto mt-2" className="col-auto mt-2"
src="/fullSpeaker.png" src="/fullSpeaker.png"
width="25px" width="25px"
height="25px" height="25px"
/> />
) : ( ) : (
<img <img
className="col-auto mt-2" className="col-auto mt-2"
src="/emptySpeaker.png" src="/emptySpeaker.png"
width="25px" width="25px"
height="25px" height="25px"
/> />
)} )}
<h5 className="col mt-2" style={{ color: 'black' }}> <h5 className="col mt-2" style={{ color: 'black' }}>
{el.channelName} {el.channelName}
</h5> </h5>
</div> </div>
</Link>
{el.joinUser &&
{el.joinName && el.joinUser.map((e,i) => (
el.joinName.map((e) => ( <div key={`member${i}`}>
<div>
<ul className="mx-5" style={{ color: '#76D079' }}> <ul className="mx-5" style={{ color: '#76D079' }}>
<li> <li>
<p style={{ color: 'black' }}>{e}</p> <p style={{ color: 'black' }}>{e}</p>
......
client/src/components/Room/Channelsettingchange.js
View file @ 7ad5341d
import { useState } from "react";
import { useParams } from "react-router"; import { useParams } from "react-router";
import Createchannel from "./Createchannel"; import roomApi from "../../apis/room.api";
import Deletechannel from "./Deletechannel";
const Channelsettingchange = (props) => { const INIT_Channel = {
id: "",
channelName: "",
number: "",
};
const ChannelSettingChange = (props) => {
const [Channel, setChannel] = useState(INIT_Channel);
const [error, setError] = useState("");
const { roomId } = useParams(); const { roomId } = useParams();
console.log(props); //console.log(props.channel.[0].channelName) //각 채널의 채널이름.
console.log(roomId); Channel.id = roomId;
const updateinfo = (event) => {
const { channelName, value } = event.target;
setChannel({ ...Channel, channelName: value });
console.log(Channel.channelName);
};
async function CreateChannel(e) {
let count = 0;
for (let a = 0; a < props.channel.length; a++) {
if (Channel.channelName === props.channel[a].channelName) {
count += 1;
}
}
if (count == 1) {
window.alert("이미 존재하는 채널 입니다. 다른 이름을 입력해 주십시오.");
} else {
Channel.number = props.channel.length;
window.location.reload();
const data = await roomApi.makeChannel(Channel);
window.alert("채널이 성공적으로 생성되었습니다.");
}
}
async function DeleteChannel(e) {
let count = 0;
for (let a = 0; a < props.channel.length; a++) {
if (Channel.channelName === props.channel[a].channelName) {//일치하면
count = count + 1;
Channel.number = a;
}
}
if (count === 1){
window.location.reload();
const data = await roomApi.channelDelete(Channel);
window.alert("채널이 성공적으로 삭제되었습니다.");
}
else {
window.alert(
"입력한 채널명과 일치하는 채널이 존재하지 않습니다. 다시 확인해 주십시오."
);
}
};
return ( return (
<div> <div>
<button <button
...@@ -21,14 +75,14 @@ const Channelsettingchange = (props) => { ...@@ -21,14 +75,14 @@ const Channelsettingchange = (props) => {
border: "1px #f5cfe3", border: "1px #f5cfe3",
}} }}
> >
채널 설정 변경{/* 방 설정 변경으로 바꾸기 */} 채널 설정 변경
</button> </button>
<div <div
className="modal fade" className="modal fade"
id="changechannel" id="changechannel"
tabIndex="-1" tabIndex="-1"
aria-labelledby="changechannelsettingLabel" aria-labelledby="changechannelLabel"
aria-hidden="true" aria-hidden="true"
> >
<div className="modal-dialog"> <div className="modal-dialog">
...@@ -37,8 +91,6 @@ const Channelsettingchange = (props) => { ...@@ -37,8 +91,6 @@ const Channelsettingchange = (props) => {
<div className="modal-title" id="changechannelsetting"> <div className="modal-title" id="changechannelsetting">
채널 설정 변경 채널 설정 변경
</div> </div>
{/* <Createchannel />
<Deletechannel /> */}
<button <button
type="button" type="button"
className="btn-close" className="btn-close"
...@@ -46,6 +98,188 @@ const Channelsettingchange = (props) => { ...@@ -46,6 +98,188 @@ const Channelsettingchange = (props) => {
aria-label="Close" aria-label="Close"
></button> ></button>
</div> </div>
<div className="modal-body d-flex justify-content-center"></div>
<div className="row mb-3">
<div
className="d-flex justify-content-center"
style={{ margin: "0px" }}
></div>
<div className="d-flex justify-content-evenly">
<button
type="submit"
data-bs-toggle="modal"
data-bs-target="#channelcreate"
style={{
weight: "100px",
height: "60px",
backgroundColor: "#f5cfe3",
borderRadius: "5px",
color: "black",
border: "1px #f5cfe3",
}}
>
채널 생성
</button>
<button
type="submit"
data-bs-toggle="modal"
data-bs-target="#channeldelete"
style={{
weight: "100px",
height: "60px",
backgroundColor: "#f5cfe3",
borderRadius: "5px",
color: "black",
border: "1px #f5cfe3",
}}
>
채널 삭제
</button>
{/* 채널생성 모달 */}
<div
className="modal fade"
id="channelcreate"
tabIndex="-1"
aria-labelledby="channelcreateLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div className="modal-title" id="createchannel">
채널 생성
</div>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="row mb-3">
<div
className="d-flex justify-content-center"
style={{ margin: "0px" }}
>
<p style={{ marginTop: "31px", marginBottom: "0px" }}>
채널 이름:{" "}
</p>
<input
onChange={updateinfo}
name="channelName"
value={Channel.channelName}
type="text"
className="form-control my-4 "
placeholder="생성할 채널 이름"
style={{
background: "#fcf4ff",
borderTop: "0",
borderRight: "0",
borderLeft: "0",
borderBottom: "1",
borderColor: "#d4cafb",
height: "38px",
width: "170px",
marginTop: "0px",
marginBottom: "0px",
}}
/>
</div>
<div className="d-flex justify-content-evenly">
<button
onClick={CreateChannel}
type="button"
className="col-2 p-1 btn btn-primary"
>
생성
</button>
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
취소
</button>
</div>
</div>
</div>
</div>
</div>
{/* 채널삭제 모달 */}
<div
className="modal fade"
id="channeldelete"
tabIndex="-1"
aria-labelledby="channeldeleteLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div className="modal-title" id="deletechannel__">
채널 삭제
</div>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="row mb-3">
<div
className="d-flex justify-content-center"
style={{ margin: "0px" }}
>
<p style={{ marginTop: "31px", marginBottom: "0px" }}>
채널 이름:{" "}
</p>
<input
onChange={updateinfo}
name="channelName"
value={Channel.channelName}
type="text"
className="form-control my-4 "
placeholder="삭제할 채널 이름"
style={{
background: "#fcf4ff",
borderTop: "0",
borderRight: "0",
borderLeft: "0",
borderBottom: "1",
borderColor: "#d4cafb",
height: "38px",
width: "170px",
marginTop: "0px",
marginBottom: "0px",
}}
/>
</div>
<div className="d-flex justify-content-evenly">
<button
onClick={DeleteChannel}
type="button"
className="col-2 p-1 btn btn-primary"
>
삭제
</button>
<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>
</div> </div>
...@@ -53,4 +287,4 @@ const Channelsettingchange = (props) => { ...@@ -53,4 +287,4 @@ const Channelsettingchange = (props) => {
); );
}; };
export default Channelsettingchange; export default ChannelSettingChange;
client/src/components/Room/Createchannel.js deleted 100644 → 0
View file @ 2ddaecff
/* 만들 채널의 이름을 입력받고(지금부터 "이름"이라 하자.), 그걸로 {"이름": []}의 형태로 체널을 만든다. 그후, 그 json파일을 현재 roomId의 channel에 추가한다. */
const Createchannel = () => {
return (
<div>
</div>
);
};
export default Createchannel;
\ No newline at end of file
client/src/components/Room/Deletechannel.js deleted 100644 → 0
View file @ 2ddaecff
/* 삭제할 채널의 이름을 입력받아서 일치하는 채널이름이 있으면 삭제하고, 없으면 그런 이름의 채널이 존재하지 않는다고 알림창을 띄운다. */
const Deletechannel = () => {
return (
<div>
</div>
);
};
export default Deletechannel;
\ No newline at end of file
client/src/components/Room/InitRoom.js
View file @ 7ad5341d
...@@ -17,9 +17,7 @@ const InitRoom = () => { ...@@ -17,9 +17,7 @@ const InitRoom = () => {
async function getRoom(roomId) { async function getRoom(roomId) {
try { try {
const data = await roomApi.getRoom([roomId]); const data = await roomApi.getRoom([roomId]);
console.log(data)
setRoom({...room, id:data[0].id, name:data[0].name, profileimg: data[0].profileimg}) setRoom({...room, id:data[0].id, name:data[0].name, profileimg: data[0].profileimg})
console.log(room.profileimg)
} catch (error) { } catch (error) {
catchErrors(error, setError); catchErrors(error, setError);
} }
......
client/src/components/Room/MakeChannel.js 0 → 100644
View file @ 7ad5341d
import { useState } from "react";
import { useParams } from "react-router-dom";
import roomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
const MakeChannel = () => {
const { roomId } = useParams();
const [channelName, setChannelName] = useState("");
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
function handleChange(event) {
const { value } = event.target;
setChannelName(value);
}
console.log(channelName)
async function handleSubmit(e) {
// e.preventDefault();
try {
const data = await roomApi.makeChannel({ roomId: roomId, channelName: channelName });
console.log('서버연결됬나요', data)
setSuccess(true);
} catch (error) {
catchErrors(error, setError);
} finally {
// setLoading(false);
}
}
if (success) {
// console.log('success', success)
alert('채널생성이 완료되었습니다!')
window.location.href = `/room/${roomId}/${channelName}`
}
return (
<div className="modal-content">
<form
onSubmit={handleSubmit}
>
<div className="modal-header">
<div className="modal-title" id="MakeChannelModal">
채널 생성하기
</div>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
{error && <div className="alert alert-danger">{error}</div>}
<div className="input-group mb-3">
<input
type="text"
className="form-control"
placeholder="생성할 채널이름을 입력하세요"
aria-label="생성할 채널이름을 입력하세요"
aria-describedby="basic-addon1"
name="channelName"
value={channelName}
onChange={handleChange}
/>
</div>
<div className="modal-footer">
<button
type="submit"
className="btn btn-primary">
확인
</button>
</div>
</div>
</form>
</div>
);
};
export default MakeChannel;
client/src/components/Room/RightHamburger.js
View file @ 7ad5341d
...@@ -4,8 +4,8 @@ import ChannelSingle from "./ChannelSingle"; ...@@ -4,8 +4,8 @@ import ChannelSingle from "./ChannelSingle";
import RoomApi from "../../apis/room.api"; import RoomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError"; import catchErrors from "../../context/catchError";
import KakaoShareButton from "../KakaoShareButton"; import KakaoShareButton from "../KakaoShareButton";
import Roomsettingchange from "./Roomsettingchange"; import RoomSettingChange from "./RoomSettingChange";
import Channelsettingchange from "./Channelsettingchange"; import ChannelSettingChange from "./ChannelSettingChange";
const INIT_ROOM = { const INIT_ROOM = {
name: "", name: "",
...@@ -14,7 +14,7 @@ const INIT_ROOM = { ...@@ -14,7 +14,7 @@ const INIT_ROOM = {
const INIT_CHANNEL = { const INIT_CHANNEL = {
channelName: "", channelName: "",
joinName: [], joinUser: [],
}; };
const RightHamburger = () => { const RightHamburger = () => {
...@@ -43,28 +43,22 @@ const RightHamburger = () => { ...@@ -43,28 +43,22 @@ const RightHamburger = () => {
console.log("id, roomid정보", id, roomId); console.log("id, roomid정보", id, roomId);
try { try {
const data = await RoomApi.exitRoom({ id, roomId }); const data = await RoomApi.exitRoom({ id, roomId });
console.log(data);
} catch (error) { } catch (error) {
catchErrors(error, setError); catchErrors(error, setError);
} }
} }
async function getChannel(roomId) { async function getChannel(roomId) {
const ID = roomId;
try { try {
const data = await RoomApi.getRoom([ID]); const data = await RoomApi.getRoom([roomId]);
const Channel = data[0].channel; const Channel = data[0].channel;
console.log("방데이터:", Channel);
const channelList = []; const channelList = [];
for (const prop in Channel) { for (const prop in Channel) {
// Channel의 항목(prop)으로 작업을 실행합니다 // Channel의 항목(prop)으로 작업을 실행합니다
for (const key in Channel[prop]) { for (const el in Channel[prop]) {
console.log(key);
console.log(prop);
console.log(Channel[prop][key]);
channelList.push({ channelList.push({
channelName: key, channelName: el,
joinName: Channel[prop][key], joinUser: Channel[prop][el],
}); });
} }
} }
...@@ -235,6 +229,9 @@ const RightHamburger = () => { ...@@ -235,6 +229,9 @@ const RightHamburger = () => {
<div className="modal-dialog"> <div className="modal-dialog">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header"> <div className="modal-header">
<div className="modal-title" id="changechannelsetting">
설정
</div>
<button <button
type="button" type="button"
className="btn-close" className="btn-close"
...@@ -247,8 +244,8 @@ const RightHamburger = () => { ...@@ -247,8 +244,8 @@ const RightHamburger = () => {
</div> </div>
<div className="row mb-3"> <div className="row mb-3">
<div className="d-flex justify-content-evenly"> <div className="d-flex justify-content-evenly">
<Roomsettingchange /> <RoomSettingChange />
<Channelsettingchange channel={channel} /> <ChannelSettingChange channel={channel} />
</div> </div>
</div> </div>
</div> </div>
......
client/src/components/Room/RoomHeader.js
View file @ 7ad5341d
...@@ -9,7 +9,7 @@ const INIT_ROOM = { ...@@ -9,7 +9,7 @@ const INIT_ROOM = {
const RoomHeader = () => { const RoomHeader = () => {
const {roomId}=useParams(); const {roomId, channelId}=useParams();
const [room, setRoom] = useState([INIT_ROOM]); const [room, setRoom] = useState([INIT_ROOM]);
const [error, setError] = useState("") const [error, setError] = useState("")
async function getRoom(Id) { async function getRoom(Id) {
...@@ -47,7 +47,7 @@ const RoomHeader = () => { ...@@ -47,7 +47,7 @@ const RoomHeader = () => {
color: '#6c33a2', color: '#6c33a2',
}} }}
> >
# 회의 # {channelId}
</a> </a>
</div> </div>
</div> </div>
......
client/src/components/Room/Roomsettingchange.js
View file @ 7ad5341d
...@@ -9,7 +9,7 @@ const INIT_Room = { ...@@ -9,7 +9,7 @@ const INIT_Room = {
profileimg: "", profileimg: "",
}; };
const Roomsettingchange = () => { const RoomSettingChange = () => {
const { roomId } = useParams(); const { roomId } = useParams();
const [Room, setRoom] = useState(INIT_Room); const [Room, setRoom] = useState(INIT_Room);
const [error, setError] = useState(""); const [error, setError] = useState("");
...@@ -32,6 +32,7 @@ const Roomsettingchange = () => { ...@@ -32,6 +32,7 @@ const Roomsettingchange = () => {
const updateinfo = (event) => { const updateinfo = (event) => {
const { name, value } = event.target; const { name, value } = event.target;
setRoom({ ...Room, [name]: value }); setRoom({ ...Room, [name]: value });
console.log(Room.name);
}; };
const handleChange = async (event) => { const handleChange = async (event) => {
...@@ -59,7 +60,7 @@ const Roomsettingchange = () => { ...@@ -59,7 +60,7 @@ const Roomsettingchange = () => {
}; };
return ( return (
<div className="d-flex flex-row-reverse"> <div>
<button <button
type="submit" type="submit"
data-bs-toggle="modal" data-bs-toggle="modal"
...@@ -73,7 +74,7 @@ const Roomsettingchange = () => { ...@@ -73,7 +74,7 @@ const Roomsettingchange = () => {
border: "1px #f5cfe3", border: "1px #f5cfe3",
}} }}
> >
방 설정 변경{/* 방 설정 변경으로 바꾸기 */} 방 설정 변경
</button> </button>
<div <div
...@@ -96,11 +97,10 @@ const Roomsettingchange = () => { ...@@ -96,11 +97,10 @@ const Roomsettingchange = () => {
aria-label="Close" aria-label="Close"
></button> ></button>
</div> </div>
<div className="modal-body d-flex justify-content-center"></div>
<div className="row mb-3"> <div className="row mb-3">
<div <div
className="d-flex justify-content-center" className="d-flex justify-content-center"
style={{ margin: "0px" }} style={{ marginTop: "20px" }}
> >
<input <input
type="file" type="file"
...@@ -165,4 +165,4 @@ const Roomsettingchange = () => { ...@@ -165,4 +165,4 @@ const Roomsettingchange = () => {
); );
}; };
export default Roomsettingchange; export default RoomSettingChange;
client/src/components/SignUp.js
View file @ 7ad5341d
...@@ -61,7 +61,7 @@ const Signup = () => { ...@@ -61,7 +61,7 @@ const Signup = () => {
if (success) { if (success) {
alert('회원가입이 완료되었습니다!') alert('회원가입이 완료되었습니다!')
window.location.href = '/' return <Redirect to="/" />;
} }
const { name, id, password, checkpw, phone } = user const { name, id, password, checkpw, phone } = user
......
client/src/pages/InvitePage.js
View file @ 7ad5341d
...@@ -7,16 +7,15 @@ import catchErrors from "../context/catchError"; ...@@ -7,16 +7,15 @@ import catchErrors from "../context/catchError";
const INIT_PROFILE = { const INIT_PROFILE = {
id: "", id: "",
roomNumber: "" roomNumber: "",
}; };
// userapi로 유저정보 불러다가, 참여방 목록에 그 방아이디 추가하고, 방에도 그 유저 아이디 추가한 다음에 참가시키기. // userapi로 유저정보 불러다가, 참여방 목록에 그 방아이디 추가하고, 방에도 그 유저 아이디 추가한 다음에 참가시키기.
const InvitePage = () => { const InvitePage = () => {
const [profile, setProfile] = useState([INIT_PROFILE]); const [profile, setProfile] = useState([INIT_PROFILE]);
const [success, setSuccess] = useState(false); const [error, setError] = useState("");
const [error,setError]=useState("");
const usercheck = localStorage.getItem("user"); const usercheck = localStorage.getItem("user");
const {roomId} = useParams(); const { roomId } = useParams();
async function getProfile(userID) { async function getProfile(userID) {
try { try {
...@@ -27,44 +26,49 @@ const InvitePage = () => { ...@@ -27,44 +26,49 @@ const InvitePage = () => {
} }
} }
async function joinroom(userId,roomId) { async function joinroom(userId, roomId) {
try { try {
// setLoading(true); // setLoading(true);
setError(""); setError("");
const data = await roomApi.join({ userId: userId, roomId: roomId }); const data = await roomApi.join({ userId: userId, roomId: roomId });
console.log('서버연결됬나요', data) console.log("서버연결됬나요", data);
setSuccess(true);
} catch (error) { } catch (error) {
catchErrors(error, setError); catchErrors(error, setError);
} finally { } finally {
// setLoading(false); // setLoading(false);
} }
} }
useEffect(() => { useEffect(() => {
getProfile(usercheck); getProfile(usercheck);
}, []); }, []);
function goInvitedroom() { function goInvitedroom() {
let check1= null; let check = null;
let check2= null; if (usercheck === null) check = false;
console.log(usercheck); else check = true;
if (usercheck)
joinroom(usercheck,roomId); if (check === true) {
if(success) joinroom(usercheck, roomId);
check1 = window.confirm("방 참여가 완료되었습니다.") window.alert("방 참여가 완료되었습니다.");
if(check1) window.location.href=`/user/${usercheck}`
window.location.href=`/user/${usercheck}` } else {
else window.alert("로그인이 필요합니다.");
check2 = window.confirm("로그인이 필요합니다.") window.location.href = `/`;
if(check2) }
window.location.href="/"
} }
function invitereject() { function invitereject() {
if(usercheck) let check = null;
window.location.href=`/user/${usercheck}` if (usercheck === null) check = false;
else else check = true;
window.location.href="/"
if (check === true) {
window.alert("유저 페이지로 이동합니다.");
window.location.href = `/user/${usercheck}`;
} else {
window.alert("로그인이 필요합니다.");
window.location.href = `/`;
}
} }
return ( return (
...@@ -74,15 +78,15 @@ const InvitePage = () => { ...@@ -74,15 +78,15 @@ const InvitePage = () => {
<div className="d-flex justify-content-evenly"> <div className="d-flex justify-content-evenly">
{/* 위 사진,이름 */} {/* 위 사진,이름 */}
<div <div
// style={{ // style={{
// width: "100%", // width: "100%",
// height: "140px", // height: "140px",
// textAlign: "center", // textAlign: "center",
// border: "3px", // border: "3px",
// borderStyle: "none solid solid", // borderStyle: "none solid solid",
// borderColor: "red", // borderColor: "red",
// fontSize: "12px", // fontSize: "12px",
// }} // }}
> >
{/* 방 부분 {/* 방 부분
<p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p> <p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p>
...@@ -94,39 +98,42 @@ const InvitePage = () => { ...@@ -94,39 +98,42 @@ const InvitePage = () => {
</div> </div>
<div <div
// style={{ // style={{
// width: "80%", // width: "80%",
// height: "200px", // height: "200px",
// textAlign: "center", // textAlign: "center",
// fontSize: "18px", // fontSize: "18px",
// marginLeft: "10%", // marginLeft: "10%",
// marginRight: "10%", // marginRight: "10%",
// }} // }}
> >
{/* 아래 텍스트 */} {/* 아래 텍스트 */}
<p align= "center" style={{ <p
fontSize: "30px", align="center"
marginTop: "120px", style={{
marginBottom: "80px" fontSize: "30px",
}}> marginTop: "120px",
marginBottom: "80px",
}}
>
축하합니다! 친구가 당신을 축하합니다! 친구가 당신을
<br/> <br />
화상회의에 초대했습니다. 화상회의에 초대했습니다.
<br/> <br />
<br/> <br />
<b>초대를 수락하시겠습니까?</b> <b>초대를 수락하시겠습니까?</b>
</p> </p>
</div> </div>
<div className="d-flex justify-content-evenly"> <div className="d-flex justify-content-evenly">
{/* 수락, 거절 버튼 */} {/* 수락, 거절 버튼 */}
{console.log(profile.roomNumber)}
<button <button
type="submit" type="submit"
className="col-2 p-1 btn btn-primary" className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal" data-bs-dismiss="modal"
style={{ width: "120px" }} style={{ width: "120px" }}
onClick={goInvitedroom} onClick={goInvitedroom}
> >
수락 수락
</button> </button>
......
server/controllers/room.controller.js
View file @ 7ad5341d
...@@ -12,7 +12,7 @@ const joinRoom = async (req, res) => { ...@@ -12,7 +12,7 @@ const joinRoom = async (req, res) => {
//roomId에 일치하는 방이 존재할때 //roomId에 일치하는 방이 존재할때
//roomId에 일치하는 방의 member정보에 userId 저장하기 //roomId에 일치하는 방의 member정보에 userId 저장하기
//member정보에 userId가 이미 저장되어 있는지 확인 -> 이미 참여된 방인지 확인 //member정보에 userId가 이미 저장되어 있는지 확인 -> 이미 참여된 방인지 확인
const includeUserId = room_Id.member.includes(parseInt(userId)); const includeUserId = room_Id.member.includes(parseInt(userId));// 이미 참여되어있는데 확인 못하고 있음.
// console.log('Include확인:',includeUserId) // console.log('Include확인:',includeUserId)
if (!includeUserId) { if (!includeUserId) {
//아직 참여되지 않은 방인경우 //아직 참여되지 않은 방인경우
...@@ -34,7 +34,7 @@ const joinRoom = async (req, res) => { ...@@ -34,7 +34,7 @@ const joinRoom = async (req, res) => {
{ roomNumber: user_Id.roomNumber }, { roomNumber: user_Id.roomNumber },
{ where: { id: userId } } { where: { id: userId } }
); );
res.json(true) res.json(true);
} else { } else {
return res.status(422).send("이미 참여된 방입니다."); return res.status(422).send("이미 참여된 방입니다.");
} }
...@@ -44,13 +44,15 @@ const joinRoom = async (req, res) => { ...@@ -44,13 +44,15 @@ const joinRoom = async (req, res) => {
}; };
const upLoadRoomImg = multer({ dest: "roomUploads/" }); const upLoadRoomImg = multer({ dest: "roomUploads/" });
const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]); const roomImgUpload = upLoadRoomImg.fields([
{ name: "profileimg", maxCount: 1 },
]);
const update = async (req, res) => { const update = async (req, res) => {
try { try {
console.log("id:", req.body.id); console.log("id:", req.body.id);
const id = req.body.id;//roomId const id = req.body.id; //roomId
const avatar = req.files["profileimg"][0];//profileimg const avatar = req.files["profileimg"][0]; //profileimg
const img = avatar.filename; const img = avatar.filename;
console.log(img); console.log(img);
await Room.update({ profileimg: img }, { where: { id: id } }); await Room.update({ profileimg: img }, { where: { id: id } });
...@@ -65,11 +67,11 @@ const createRoom = async (req, res) => { ...@@ -65,11 +67,11 @@ const createRoom = async (req, res) => {
const { userId, name } = req.body; const { userId, name } = req.body;
const avatar = req.files["profileimg"][0]; const avatar = req.files["profileimg"][0];
const img = avatar.filename; const img = avatar.filename;
const id = nanoid() const id = nanoid();
const Id = await Room.findOne({ where: { id: id } }); const Id = await Room.findOne({ where: { id: id } });
// console.log('id:', id) // console.log('id:', id)
while (Id) { while (Id) {
const id = nanoid() const id = nanoid();
const Id = await Room.findOne({ where: { id: id } }); const Id = await Room.findOne({ where: { id: id } });
} }
try { try {
...@@ -83,21 +85,25 @@ const createRoom = async (req, res) => { ...@@ -83,21 +85,25 @@ const createRoom = async (req, res) => {
owner: userId, owner: userId,
member: [userId], member: [userId],
profileimg: img, profileimg: img,
} };
// console.log('newRoom:', newRoom) // console.log('newRoom:', newRoom)
await Room.create(newRoom); await Room.create(newRoom);
//user.roomNumber에 id추가 //user.roomNumber에 id추가
const user_Id = await User.findOne({ where: { id: userId } }); const user_Id = await User.findOne({ where: { id: userId } });
if (user_Id.roomNumber) { //다른 roomNumber가 이미 들어가 있는 경우 id추가 if (user_Id.roomNumber) {
user_Id.roomNumber.push(id) //다른 roomNumber가 이미 들어가 있는 경우 id추가
} user_Id.roomNumber.push(id);
else { //첫 roomNumber인 경우 } else {
user_Id.roomNumber = [id] //첫 roomNumber인 경우
user_Id.roomNumber = [id];
} }
// console.log('user_Id.roomNumber2:', user_Id.roomNumber) // console.log('user_Id.roomNumber2:', user_Id.roomNumber)
await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: userId } }) await User.update(
res.json(newRoom) { roomNumber: user_Id.roomNumber },
{ where: { id: userId } }
);
res.json(newRoom);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
res.status(500).send("방생성 에러"); res.status(500).send("방생성 에러");
...@@ -109,7 +115,7 @@ const getRoom = async (req, res) => { ...@@ -109,7 +115,7 @@ const getRoom = async (req, res) => {
try { try {
const roomlist = await Room.findAll({ where: { id: req.body } }); const roomlist = await Room.findAll({ where: { id: req.body } });
// console.log(roomlist); // console.log(roomlist);
res.json(roomlist) res.json(roomlist);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
res.status(500).send("에러"); res.status(500).send("에러");
...@@ -117,36 +123,79 @@ const getRoom = async (req, res) => { ...@@ -117,36 +123,79 @@ const getRoom = async (req, res) => {
}; };
const exitRoom = async (req, res) => { const exitRoom = async (req, res) => {
const { id, roomId } = req.params const { id, roomId } = req.params;
console.log(id, roomId) console.log(id, roomId);
const room = await Room.findOne({ where: { id: roomId } }); const room = await Room.findOne({ where: { id: roomId } });
console.log(room.member) console.log(room.member);
const index = room.member.indexOf(id) const index = room.member.indexOf(id);
console.log('index',index) console.log("index", index);
room.member.splice(index,1) room.member.splice(index, 1);
await Room.update({ member: room.member }, { where: { id: roomId } }); await Room.update({ member: room.member }, { where: { id: roomId } });
const user = await User.findOne({ where: { id: id } }); const user = await User.findOne({ where: { id: id } });
console.log(user.roomNumber) console.log(user.roomNumber);
const index2 = user.roomNumber.indexOf(id) const index2 = user.roomNumber.indexOf(id);
console.log('index',index2) console.log("index", index2);
user.roomNumber.splice(index2,1) user.roomNumber.splice(index2, 1);
await User.update({ roomNumber: user.roomNumber }, { where: { id: id } }); await User.update({ roomNumber: user.roomNumber }, { where: { id: id } });
} };
const changename = async (req,res) => { const changename = async (req, res) => {
const {id, name} = req.body; const { id, name } = req.body;
console.log(req.body) console.log(req.body);
try { try {
await Room.update({ 'name': name },{ where: { id: id } }) await Room.update({ name: name }, { where: { id: id } });
const room1 = await Room.findOne({ where: { id: id } }) const room1 = await Room.findOne({ where: { id: id } });
console.log('Room:',room1) console.log("Room:", room1);
}catch (error) { } catch (error) {
console.log(error); console.log(error);
res.status(500).send("에러"); res.status(500).send("에러");
} }
}; };
const joinChannel = async (req, res) => {
const { roomId, channelName, plusUser, index } = req.body;
const room = await Room.findOne({ where: { id: roomId } });
room.channel[index][channelName].push(plusUser);
await Room.update({ channel: room.channel }, { where: { id: roomId } });
return res.json(true);
};
const doubleJoin = async (req, res) => {
const { roomId, index1, index2, joinChName } = req.body;
const room = await Room.findOne({ where: { id: roomId } });
room.channel[index1][joinChName].splice(index2, 1);
await Room.update({ channel: room.channel }, { where: { id: roomId } });
return res.json(true);
};
const makeChannel = async (req, res) => {
const { id, channelName, number } = req.body;
console.log(req.body);
const room = await Room.findOne({ where: { id: id } });
room.channel.push({[channelName] : []});
await Room.update({channel:room.channel},{where: {id: id}});
return res.json(true);
};
const channelDelete = async (req, res) => {
const { id, number } = req.body;
const room = await Room.findOne({ where: { id: id } });
room.channel.splice(number, 1 );
await Room.update({channel:room.channel},{where: {id: id}});
return res.json(true);
};
export default { export default {
joinRoom, roomImgUpload, update, createRoom, getRoom, exitRoom, changename joinRoom,
roomImgUpload,
createRoom,
getRoom,
exitRoom,
changename,
joinChannel,
doubleJoin,
update,
makeChannel,
channelDelete
}; };
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