Skip to content

GitLab

Commit dd3c8aaa authored by 우지원's avatar 우지원
Browse files

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

parents a139def2 079d3ea2
Show whitespace changes
Inline Side-by-side
client/public/index.html
View file @ dd3c8aaa
......@@ -39,5 +39,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
</body>
</html>
client/src/apis/room.api.js
View file @ dd3c8aaa
......@@ -27,6 +27,11 @@ const changename = async (payload) => {
return data;
};
const profileimg = async (formData) => {
const { data } = await axios.put("/api/room/profileimg", formData);
return data;
};
const joinChannel = async (payload) => {
const { data } = await axios.post("/api/room/joinChannel", payload);
return data;
......@@ -37,6 +42,16 @@ const doubleJoin = async (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 removeRoom = async (ID)=>{
const { data } = await axios.delete(
`/api/room/removeRoom/${ID.roomId}`
......@@ -57,6 +72,9 @@ const roomApi = {
changename,
joinChannel,
doubleJoin,
profileimg,
makeChannel,
channelDelete,
removeRoom
};
......
client/src/components/Home/CreateRoom.js
View file @ dd3c8aaa
......@@ -22,6 +22,7 @@ const CreateRoom = () => {
function handleChange(event) {
const { name, value, files } = event.target;
console.log(event.target)
if (files) {
setRoom({ ...room, [name]: files[0] })
} else {
......
client/src/components/KakaoShareButton.js
View file @ dd3c8aaa
......@@ -32,16 +32,6 @@ const KakaoShareButton = (porps) => {
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 = () => {
// kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
if (window.Kakao) {
......@@ -72,7 +62,6 @@ const KakaoShareButton = (porps) => {
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={() => console.log("안녕")}
>
카카오로 초대
</button>
......
client/src/components/Room/ChannelSingle.js
View file @ dd3c8aaa
......@@ -5,6 +5,7 @@ import userApi from '../../apis/user.api'
import catchErrors from "../../context/catchError";
const ChannelSingle = (props) => {
console.log(props.channel);
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
const [roomName, setRoomName] = useState('');
......
client/src/components/Room/Channelsettingchange.js 0 → 100644
View file @ dd3c8aaa
import { useState } from "react";
import { useParams } from "react-router";
import roomApi from "../../apis/room.api";
const INIT_Channel = {
id: "",
channelName: "",
number: "",
};
const ChannelSettingChange = (props) => {
const [Channel, setChannel] = useState(INIT_Channel);
const [error, setError] = useState("");
const { roomId } = useParams();
//console.log(props.channel.[0].channelName) //각 채널의 채널이름.
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;
alert("채널이 성공적으로 생성되었습니다.");
window.location.reload();
const data = await roomApi.makeChannel(Channel);
}
}
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){
alert("채널이 성공적으로 삭제되었습니다.");
window.location.reload();
const data = await roomApi.channelDelete(Channel);
}
else {
window.alert(
"입력한 채널명과 일치하는 채널이 존재하지 않습니다. 다시 확인해 주십시오."
);
}
};
return (
<div>
<button
type="submit"
data-bs-toggle="modal"
data-bs-target="#changechannel"
style={{
weight: "100px",
height: "60px",
backgroundColor: "#f5cfe3",
borderRadius: "5px",
color: "black",
border: "1px #f5cfe3",
}}
>
채널 설정 변경
</button>
<div
className="modal fade"
id="changechannel"
tabIndex="-1"
aria-labelledby="changechannelLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div className="modal-title" id="changechannelsetting">
채널 설정 변경
</div>
<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-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>
);
};
export default ChannelSettingChange;
client/src/components/Room/MakeChannel.js
View file @ dd3c8aaa
......@@ -61,7 +61,7 @@ const MakeChannel = () => {
aria-label="생성할 채널이름을 입력하세요"
aria-describedby="basic-addon1"
name="channelName"
// value={channelName}
value={channelName}
onChange={handleChange}
/>
</div>
......
client/src/components/Room/RightHamburger.js
View file @ dd3c8aaa
......@@ -3,7 +3,8 @@ import { Link, useParams } from "react-router-dom";
import ChannelSingle from "./ChannelSingle";
import catchErrors from "../../context/catchError";
import KakaoShareButton from "../KakaoShareButton";
import Roomnamechange from "./Roomnamechange";
import RoomSettingChange from "./RoomSettingChange";
import ChannelSettingChange from "./ChannelSettingChange";
import userApi from "../../apis/user.api";
import roomApi from "../../apis/room.api";
......@@ -16,6 +17,7 @@ const INIT_CHANNEL = {
channelName: "",
joinUser: [],
};
const RightHamburger = () => {
const [channel, setChannel] = useState([INIT_CHANNEL]);
const [room, setRoom] = useState([INIT_ROOM]);
......@@ -290,6 +292,9 @@ const RightHamburger = () => {
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div className="modal-title" id="changechannelsetting">
설정
</div>
<button
type="button"
className="btn-close"
......@@ -302,21 +307,8 @@ const RightHamburger = () => {
</div>
<div className="row mb-3">
<div className="d-flex justify-content-evenly">
{/* <button
type="submit"
data-bs-dismiss="modal"
style={{
weight: "100px",
height: "60px",
backgroundColor: "#f5cfe3",
borderRadius: "5px",
color: "black",
border: "1px #f5cfe3",
}}
>
채널 이름 변경
</button> */}
<Roomnamechange />
<RoomSettingChange />
<ChannelSettingChange channel={channel} />
</div>
</div>
</div>
......
client/src/components/Room/Roomnamechange.js → client/src/components/Room/Roomsettingchange.js
View file @ dd3c8aaa
......@@ -6,9 +6,10 @@ import catchErrors from "../../context/catchError";
const INIT_Room = {
id: "",
name: "",
profileimg: "",
};
const Roomnamechange = () => {
const RoomSettingChange = () => {
const { roomId } = useParams();
const [Room, setRoom] = useState(INIT_Room);
const [error, setError] = useState("");
......@@ -31,15 +32,35 @@ const Roomnamechange = () => {
const updateinfo = (event) => {
const { name, value } = event.target;
setRoom({ ...Room, [name]: value });
console.log(Room);
console.log(Room.name);
};
const handleChange = async (event) => {
const { files } = event.target;
console.log("files:", files);
let formData = new FormData();
formData.append("profileimg", files[0]);
formData.append("id", roomId);
try {
const res = await RoomApi.profileimg(formData);
// if (files) {
// setRoom({ ...Room, profileimg: res });
// } else {
// setRoom();
// }
} catch (error) {
catchErrors(error, setError);
}
};
const changeinfo = async (event) => {
window.location.reload();
// window.location.href = window.location.href;
const req = await RoomApi.changename(Room);
};
return (
<div className="d-flex flex-row-reverse">
<div>
<button
type="submit"
data-bs-toggle="modal"
......@@ -53,7 +74,7 @@ const Roomnamechange = () => {
border: "1px #f5cfe3",
}}
>
방 이름 변경
방 설정 변경
</button>
<div
......@@ -66,6 +87,9 @@ const Roomnamechange = () => {
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div className="modal-title" id="changeRoomsetting">
방 설정 변경
</div>
<button
type="button"
className="btn-close"
......@@ -73,11 +97,27 @@ const Roomnamechange = () => {
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-center" style={{ margin:"0px"}}>
<div
className="d-flex justify-content-center"
style={{ marginTop: "20px" }}
>
<input
type="file"
className="upload-hidden"
onChange={handleChange}
accept="image/*"
name="profileimg"
/>
</div>
<div
className="d-flex justify-content-center"
style={{ margin: "0px" }}
>
{/* <Link to="/user/:id"> */}
<p style={{marginTop: "31px", marginBottom: "0px"}}>방 이름: </p>
<p style={{ marginTop: "31px", marginBottom: "0px" }}>
방 이름:{" "}
</p>
<input
onChange={updateinfo}
name="name"
......@@ -95,7 +135,7 @@ const Roomnamechange = () => {
height: "38px",
width: "130px",
marginTop: "0px",
marginBottom: "0px"
marginBottom: "0px",
}}
/>
</div>
......@@ -125,4 +165,4 @@ const Roomnamechange = () => {
);
};
export default Roomnamechange;
export default RoomSettingChange;
client/src/pages/InvitePage.js
View file @ dd3c8aaa
import Header from "../components/Header";
import { useState, useEffect } from "react";
import { useParams } from "react-router";
import roomApi from "../apis/room.api";
import userApi from "../apis/user.api";
import catchErrors from "../context/catchError";
const INIT_PROFILE = {
id: "",
roomNumber: "",
};
// userapi로 유저정보 불러다가, 참여방 목록에 그 방아이디 추가하고, 방에도 그 유저 아이디 추가한 다음에 참가시키기.
const InvitePage = () => {
const [profile, setProfile] = useState([INIT_PROFILE]);
const [error, setError] = useState("");
const usercheck = sessionStorage.getItem("user");
const { roomId } = useParams();
async function getProfile(userID) {
try {
const data = await userApi.getUser(userID);
setProfile(data);
} catch (error) {
catchErrors(error, setError);
}
}
async function joinroom(userId, roomId) {
try {
// setLoading(true);
setError("");
const data = await roomApi.join({ userId: userId, roomId: roomId });
console.log("서버연결됬나요", data);
} catch (error) {
catchErrors(error, setError);
} finally {
// setLoading(false);
}
}
useEffect(() => {
getProfile(usercheck);
}, []);
function goInvitedroom() {
let check1= null;
let check2= null;
if (usercheck)
check1 = window.confirm("카카오톡으로 전달된 초대코드를 사용해 참여해 주세요")
if(check1)
let check = null;
if (usercheck === null) check = false;
else check = true;
if (check === true) {
joinroom(usercheck, roomId);
window.alert("방 참여가 완료되었습니다.");
window.location.href=`/user/${usercheck}`
else
check2 = window.confirm("로그인이 필요합니다.")
if(check2)
window.location.href="/"
} else {
window.alert("로그인이 필요합니다.");
window.location.href = `/`;
}
}
function invitereject() {
if(usercheck)
window.location.href=`/user/${usercheck}`
else
window.location.href="/"
let check = null;
if (usercheck === null) check = false;
else check = true;
if (check === true) {
window.alert("유저 페이지로 이동합니다.");
window.location.href = `/user/${usercheck}`;
} else {
window.alert("로그인이 필요합니다.");
window.location.href = `/`;
}
}
return (
......@@ -60,29 +108,32 @@ const InvitePage = () => {
// }}
>
{/* 아래 텍스트 */}
<p align= "center" style={{
<p
align="center"
style={{
fontSize: "30px",
marginTop: "120px",
marginBottom: "80px"
}}>
marginBottom: "80px",
}}
>
축하합니다! 친구가 당신을
<br/>
<br />
화상회의에 초대했습니다.
<br/>
<br/>
<br />
<br />
<b>초대를 수락하시겠습니까?</b>
</p>
</div>
<div className="d-flex justify-content-evenly">
{/* 수락, 거절 버튼 */}
{console.log(profile.roomNumber)}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={goInvitedroom}
>
수락
</button>
......
server/controllers/room.controller.js
View file @ dd3c8aaa
......@@ -44,6 +44,21 @@ const roomImgUpload = upLoadRoomImg.fields([
{ name: "profileimg", maxCount: 1 },
]);
const update = async (req, res) => {
try {
console.log("id:", req.body.id);
const id = req.body.id; //roomId
const avatar = req.files["profileimg"][0]; //profileimg
const img = avatar.filename;
console.log(img);
await Room.update({ profileimg: img }, { where: { id: id } });
res.json(img);
} catch (error) {
console.log(error);
res.status(500).send("이미지 업데이트 실패");
}
};
const createRoom = async (req, res) => {
const { userId, name } = req.body;
const avatar = req.files["profileimg"][0];
......@@ -166,10 +181,22 @@ const removeRoom = async (req, res) => {
}
};
// const makeChannel = async (req, res) => {
// const { roomId, channelName } = req.body
// console.log(roomId, channelName)
// }
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 {
joinRoom,
......@@ -180,5 +207,8 @@ export default {
changename,
joinChannel,
doubleJoin,
update,
makeChannel,
channelDelete,
removeRoom,
};
server/routes/room.route.js
View file @ dd3c8aaa
......@@ -7,8 +7,11 @@ router.route("/exitRoom/:id/:roomId").delete(roomCrtl.exitRoom);
router.route("/create").post(roomCrtl.roomImgUpload, roomCrtl.createRoom);
router.route("/join").put(roomCrtl.joinRoom);
router.route("/changename").put(roomCrtl.changename);
router.route("/profileimg").put(roomCrtl.roomImgUpload, roomCrtl.update)
router.route("/joinChannel").post(roomCrtl.joinChannel);
router.route("/doubleJoin").post(roomCrtl.doubleJoin);
router.route("/makeChannel").put(roomCrtl.makeChannel);
router.route("/channelDelete").put(roomCrtl.channelDelete);
router.route("/removeRoom/:roomId").delete(roomCrtl.removeRoom);
// router.route("/makeChannel").post(roomCrtl.makeChannel);
......
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