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

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

parents a139def2 079d3ea2
...@@ -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>
...@@ -27,6 +27,11 @@ const changename = async (payload) => { ...@@ -27,6 +27,11 @@ const changename = async (payload) => {
return data; return data;
}; };
const profileimg = async (formData) => {
const { data } = await axios.put("/api/room/profileimg", formData);
return data;
};
const joinChannel = async (payload) => { const joinChannel = async (payload) => {
const { data } = await axios.post("/api/room/joinChannel", payload); const { data } = await axios.post("/api/room/joinChannel", payload);
return data; return data;
...@@ -37,6 +42,16 @@ const doubleJoin = async (payload) => { ...@@ -37,6 +42,16 @@ const doubleJoin = async (payload) => {
return data; 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 removeRoom = async (ID)=>{
const { data } = await axios.delete( const { data } = await axios.delete(
`/api/room/removeRoom/${ID.roomId}` `/api/room/removeRoom/${ID.roomId}`
...@@ -57,6 +72,9 @@ const roomApi = { ...@@ -57,6 +72,9 @@ const roomApi = {
changename, changename,
joinChannel, joinChannel,
doubleJoin, doubleJoin,
profileimg,
makeChannel,
channelDelete,
removeRoom removeRoom
}; };
......
...@@ -22,6 +22,7 @@ const CreateRoom = () => { ...@@ -22,6 +22,7 @@ const CreateRoom = () => {
function handleChange(event) { function handleChange(event) {
const { name, value, files } = event.target; const { name, value, files } = event.target;
console.log(event.target)
if (files) { if (files) {
setRoom({ ...room, [name]: files[0] }) setRoom({ ...room, [name]: files[0] })
} else { } else {
......
...@@ -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) {
...@@ -72,7 +62,6 @@ const KakaoShareButton = (porps) => { ...@@ -72,7 +62,6 @@ const KakaoShareButton = (porps) => {
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={() => console.log("안녕")}
> >
카카오로 초대 카카오로 초대
</button> </button>
......
...@@ -5,6 +5,7 @@ import userApi from '../../apis/user.api' ...@@ -5,6 +5,7 @@ import userApi from '../../apis/user.api'
import catchErrors from "../../context/catchError"; import catchErrors from "../../context/catchError";
const ChannelSingle = (props) => { const ChannelSingle = (props) => {
console.log(props.channel);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false);
const [roomName, setRoomName] = useState(''); const [roomName, setRoomName] = useState('');
......
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;
...@@ -61,7 +61,7 @@ const MakeChannel = () => { ...@@ -61,7 +61,7 @@ const MakeChannel = () => {
aria-label="생성할 채널이름을 입력하세요" aria-label="생성할 채널이름을 입력하세요"
aria-describedby="basic-addon1" aria-describedby="basic-addon1"
name="channelName" name="channelName"
// value={channelName} value={channelName}
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
......
...@@ -3,7 +3,8 @@ import { Link, useParams } from "react-router-dom"; ...@@ -3,7 +3,8 @@ import { Link, useParams } from "react-router-dom";
import ChannelSingle from "./ChannelSingle"; import ChannelSingle from "./ChannelSingle";
import catchErrors from "../../context/catchError"; import catchErrors from "../../context/catchError";
import KakaoShareButton from "../KakaoShareButton"; import KakaoShareButton from "../KakaoShareButton";
import Roomnamechange from "./Roomnamechange"; import RoomSettingChange from "./RoomSettingChange";
import ChannelSettingChange from "./ChannelSettingChange";
import userApi from "../../apis/user.api"; import userApi from "../../apis/user.api";
import roomApi from "../../apis/room.api"; import roomApi from "../../apis/room.api";
...@@ -16,6 +17,7 @@ const INIT_CHANNEL = { ...@@ -16,6 +17,7 @@ const INIT_CHANNEL = {
channelName: "", channelName: "",
joinUser: [], joinUser: [],
}; };
const RightHamburger = () => { const RightHamburger = () => {
const [channel, setChannel] = useState([INIT_CHANNEL]); const [channel, setChannel] = useState([INIT_CHANNEL]);
const [room, setRoom] = useState([INIT_ROOM]); const [room, setRoom] = useState([INIT_ROOM]);
...@@ -290,6 +292,9 @@ const RightHamburger = () => { ...@@ -290,6 +292,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"
...@@ -302,21 +307,8 @@ const RightHamburger = () => { ...@@ -302,21 +307,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">
{/* <button <RoomSettingChange />
type="submit" <ChannelSettingChange channel={channel} />
data-bs-dismiss="modal"
style={{
weight: "100px",
height: "60px",
backgroundColor: "#f5cfe3",
borderRadius: "5px",
color: "black",
border: "1px #f5cfe3",
}}
>
채널 이름 변경
</button> */}
<Roomnamechange />
</div> </div>
</div> </div>
</div> </div>
......
...@@ -6,9 +6,10 @@ import catchErrors from "../../context/catchError"; ...@@ -6,9 +6,10 @@ import catchErrors from "../../context/catchError";
const INIT_Room = { const INIT_Room = {
id: "", id: "",
name: "", name: "",
profileimg: "",
}; };
const Roomnamechange = () => { 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("");
...@@ -31,15 +32,35 @@ const Roomnamechange = () => { ...@@ -31,15 +32,35 @@ const Roomnamechange = () => {
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); 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) => { const changeinfo = async (event) => {
window.location.reload();
// window.location.href = window.location.href;
const req = await RoomApi.changename(Room); const req = await RoomApi.changename(Room);
}; };
return ( return (
<div className="d-flex flex-row-reverse"> <div>
<button <button
type="submit" type="submit"
data-bs-toggle="modal" data-bs-toggle="modal"
...@@ -53,7 +74,7 @@ const Roomnamechange = () => { ...@@ -53,7 +74,7 @@ const Roomnamechange = () => {
border: "1px #f5cfe3", border: "1px #f5cfe3",
}} }}
> >
이름 변경 설정 변경
</button> </button>
<div <div
...@@ -66,6 +87,9 @@ const Roomnamechange = () => { ...@@ -66,6 +87,9 @@ const Roomnamechange = () => {
<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="changeRoomsetting">
설정 변경
</div>
<button <button
type="button" type="button"
className="btn-close" className="btn-close"
...@@ -73,11 +97,27 @@ const Roomnamechange = () => { ...@@ -73,11 +97,27 @@ const Roomnamechange = () => {
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 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"> */} {/* <Link to="/user/:id"> */}
<p style={{marginTop: "31px", marginBottom: "0px"}}> 이름: </p> <p style={{ marginTop: "31px", marginBottom: "0px" }}>
이름:{" "}
</p>
<input <input
onChange={updateinfo} onChange={updateinfo}
name="name" name="name"
...@@ -95,7 +135,7 @@ const Roomnamechange = () => { ...@@ -95,7 +135,7 @@ const Roomnamechange = () => {
height: "38px", height: "38px",
width: "130px", width: "130px",
marginTop: "0px", marginTop: "0px",
marginBottom: "0px" marginBottom: "0px",
}} }}
/> />
</div> </div>
...@@ -125,4 +165,4 @@ const Roomnamechange = () => { ...@@ -125,4 +165,4 @@ const Roomnamechange = () => {
); );
}; };
export default Roomnamechange; export default RoomSettingChange;
import Header from "../components/Header"; 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 InvitePage = () => {
const [profile, setProfile] = useState([INIT_PROFILE]);
const [error, setError] = useState("");
const usercheck = sessionStorage.getItem("user"); 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() { function goInvitedroom() {
let check1= null; let check = null;
let check2= null; if (usercheck === null) check = false;
if (usercheck) else check = true;
check1 = window.confirm("카카오톡으로 전달된 초대코드를 사용해 참여해 주세요")
if(check1) if (check === true) {
joinroom(usercheck, roomId);
window.alert("방 참여가 완료되었습니다.");
window.location.href=`/user/${usercheck}` window.location.href=`/user/${usercheck}`
else } else {
check2 = window.confirm("로그인이 필요합니다.") window.alert("로그인이 필요합니다.");
if(check2) window.location.href = `/`;
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 (
...@@ -60,29 +108,32 @@ const InvitePage = () => { ...@@ -60,29 +108,32 @@ const InvitePage = () => {
// }} // }}
> >
{/* 아래 텍스트 */} {/* 아래 텍스트 */}
<p align= "center" style={{ <p
align="center"
style={{
fontSize: "30px", fontSize: "30px",
marginTop: "120px", marginTop: "120px",
marginBottom: "80px" 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>
......
...@@ -44,6 +44,21 @@ const roomImgUpload = upLoadRoomImg.fields([ ...@@ -44,6 +44,21 @@ const roomImgUpload = upLoadRoomImg.fields([
{ name: "profileimg", maxCount: 1 }, { 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 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];
...@@ -166,10 +181,22 @@ const removeRoom = async (req, res) => { ...@@ -166,10 +181,22 @@ const removeRoom = async (req, res) => {
} }
}; };
// const makeChannel = async (req, res) => { const makeChannel = async (req, res) => {
// const { roomId, channelName } = req.body const { id, channelName, number } = req.body;
// console.log(roomId, channelName) 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, joinRoom,
...@@ -180,5 +207,8 @@ export default { ...@@ -180,5 +207,8 @@ export default {
changename, changename,
joinChannel, joinChannel,
doubleJoin, doubleJoin,
update,
makeChannel,
channelDelete,
removeRoom, removeRoom,
}; };
...@@ -7,8 +7,11 @@ router.route("/exitRoom/:id/:roomId").delete(roomCrtl.exitRoom); ...@@ -7,8 +7,11 @@ router.route("/exitRoom/:id/:roomId").delete(roomCrtl.exitRoom);
router.route("/create").post(roomCrtl.roomImgUpload, roomCrtl.createRoom); router.route("/create").post(roomCrtl.roomImgUpload, roomCrtl.createRoom);
router.route("/join").put(roomCrtl.joinRoom); router.route("/join").put(roomCrtl.joinRoom);
router.route("/changename").put(roomCrtl.changename); router.route("/changename").put(roomCrtl.changename);
router.route("/profileimg").put(roomCrtl.roomImgUpload, roomCrtl.update)
router.route("/joinChannel").post(roomCrtl.joinChannel); router.route("/joinChannel").post(roomCrtl.joinChannel);
router.route("/doubleJoin").post(roomCrtl.doubleJoin); 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("/removeRoom/:roomId").delete(roomCrtl.removeRoom);
// router.route("/makeChannel").post(roomCrtl.makeChannel); // 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