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

0806

parent d7cf7826
REACT_APP_KAKAO_KEY=783f1ca14e1f14bc6442eedcd37c76a1
REACT_FETCH_URL=http://localhost:3000
\ No newline at end of file
......@@ -23,7 +23,7 @@ function App() {
<Route path="/profile/:id" component={ProfilePage} />
<Route path="/room/:roomId/main" component={InitRoomPage} />
<Route path="/room/:roomId/:channelId" component={RoomPage} />
<Route path="/room/Invite" component={InvitePage} />
<Route path="/invite/:roomId" component={InvitePage} />
</Switch>
{/* </AuthProvider> */}
</Router>
......
......@@ -20,6 +20,11 @@ const join = async (payload) => {
return data;
};
const roomApi = { getRoom, exitRoom, create, join };
const changename = async (payload) => {
const { data } = await axios.put("/api/room/changename", payload)
return data;
}
const roomApi = { getRoom, exitRoom, create, join, changename };
export default roomApi;
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import kakao_key from "../kakao.config.json";
import userApi from "../apis/user.api";
import catchErrors from "../context/catchError";
const INIT_invite = {
id: "",
name:"",
}
const KakaoShareButton = (porps) => {
const [inviteperson, setProfile] = useState(INIT_invite);
const [error,setError]=useState("");
const { roomId } = useParams();
const invitepersonId = localStorage.getItem("user");
async function getProfile(userID) {
try {
const data = await userApi.getUser(userID);
setProfile(data);
} catch (error) {
catchErrors(error, setError);
}
}
useEffect(() => {
getProfile(invitepersonId);
}, []);
const KakaoShareButton = () => {
useEffect(() => {
createKakaoButton();
}, []);
const ad = "이름"
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) {
......@@ -12,23 +49,23 @@ const KakaoShareButton = () => {
// 중복 initialization 방지
if (!kakao.isInitialized()) {
// 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
kakao.init(process.env.REACT_APP_KAKAO_KEY);
kakao.init(kakao_key[0].kakao_key);
}
kakao.Link.createDefaultButton({
container: '#kakao-link-btn',
objectType: 'text',
text:
`${ad}`,
//'기본 템플릿으로 제공되는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오링크는 다른 템플릿을 이용해 보낼 수 있습니다.',
`${inviteperson.name}님이 당신을 화상회의에 초대했습니다! 초대된 방 코드:${roomId}`,
link: {
mobileWebUrl:
'http://localhost:3000/room/Invite',
`http://localhost:3000/invite/${roomId}`,
webUrl:
'http://localhost:3000/room/Invite',
`http://localhost:3000/invite/${roomId}`,
},
});
}
};
return (
<div className="kakao-share-button">
{/* Kakao share button */}
......
import { useState, useEffect } from "react";
import React, { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import ChannelSingle from "./ChannelSingle";
import RoomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
import KakaoShareButton from "../KakaoShareButton";
import Roomnamechange from "./Roomnamechange";
const INIT_ROOM = {
name: "",
owner: "",
};
const INIT_CHANNEL = {
......@@ -22,7 +25,13 @@ const RightHamburger = () => {
async function getRoom(roomId) {
try {
const data = await RoomApi.getRoom([roomId]);
setRoom({ ...room, name: data[0].name });
const roomdata = [];
roomdata.push({
name: data[0].name,
owner: data[0].owner,
});
console.log(roomdata);
setRoom(roomdata);
} catch (error) {
catchErrors(error, setError);
}
......@@ -112,7 +121,7 @@ const RightHamburger = () => {
color: "#000000",
}}
>
{room.name}
{room[0].name}
</p>
<h6 className="mt-2" id="roomId">
{" "}
......@@ -165,13 +174,7 @@ const RightHamburger = () => {
</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>
<KakaoShareButton />
<button
type="submit"
className="col-2 p-1 btn btn-primary"
......@@ -202,10 +205,12 @@ const RightHamburger = () => {
>
퇴장
</button>
{/* {admin ? (
{room[0].owner == id ? (
<button
type="button"
className="m-3 rounded"
data-bs-toggle="modal"
data-bs-target="#Roomsetting"
style={{
height: "30px",
fontWeight: "bold",
......@@ -216,7 +221,50 @@ const RightHamburger = () => {
>
설정
</button>
) : null} */}
) : null}
<div
className="modal fade"
id="Roomsetting"
tabIndex="-1"
aria-labelledby="RoomsettingLabel"
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"
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
className="modal fade"
......
import { useParams } from "react-router-dom";
import React, { useEffect, useState } from "react";
import RoomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
const INIT_Room = {
id: "",
name: "",
};
const Roomnamechange = () => {
const { roomId } = useParams();
const [Room, setRoom] = useState(INIT_Room);
const [error, setError] = useState("");
Room.id = roomId;
async function getdata(Roomdata) {
try {
const data = await RoomApi.getRoom(Roomdata);
setRoom(data);
console.log(data);
} catch (error) {
catchErrors(error, setError);
}
}
useEffect(() => {
getdata(roomId);
}, []);
const updateinfo = (event) => {
const { name, value } = event.target;
setRoom({ ...Room, [name]: value });
console.log(Room);
};
const changeinfo = async (event) => {
const req = await RoomApi.changename(Room);
};
return (
<div className="d-flex flex-row-reverse">
<button
type="submit"
data-bs-toggle="modal"
data-bs-target="#changeRoomname"
style={{
weight: "100px",
height: "60px",
backgroundColor: "#f5cfe3",
borderRadius: "5px",
color: "black",
border: "1px #f5cfe3",
}}
>
이름 변경
</button>
<div
className="modal fade"
id="changeRoomname"
tabIndex="-1"
aria-labelledby="changeRoomnameLabel"
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-center" style={{ margin:"0px"}}>
{/* <Link to="/user/:id"> */}
<p style={{marginTop: "31px", marginBottom: "0px"}}> 이름: </p>
<input
onChange={updateinfo}
name="name"
value={Room.name}
type="text"
className="form-control my-4 "
placeholder="변경할 방 이름 입력"
style={{
background: "#fcf4ff",
borderTop: "0",
borderRight: "0",
borderLeft: "0",
borderBottom: "1",
borderColor: "#d4cafb",
height: "38px",
width: "130px",
marginTop: "0px",
marginBottom: "0px"
}}
/>
</div>
<div className="d-flex justify-content-evenly">
{/* <Link to={`/room/${roomId}/${Room.channel}`}> */}
<button
onClick={changeinfo}
type="button"
className="col-2 p-1 btn btn-primary"
>
저장
</button>
{/* </Link> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
취소
</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Roomnamechange;
[
{
"kakao_key" : "db04e9a8403d8955211052864937034a"
}
]
\ No newline at end of file
import Header from "../components/Header";
const InvitePage = () => {
function GoInvitedroom() {
// if() : //초대받은 사람이 로그인 o
// roomid = //서버에서 받아온 방 번호 저장
// //초대받은 사람의 참여한 방 목록에 roomid 추가
// else //로그인x
// //로그인 하게 보냄.
const usercheck = localStorage.getItem("user");
function goInvitedroom() {
let check1= null;
let check2= null;
if (usercheck)
check1 = window.confirm("카카오톡으로 전달된 초대코드를 사용해 참여해 주세요")
if(check1)
window.location.href=`/user/${usercheck}`
else
check2 = window.confirm("로그인이 필요합니다.")
if(check2)
window.location.href="/"
}
function Invitereject() {
// if () //초대받은 사람이 로그인 o
// <Link to="/user/:id"></Link>//유저 페이지로 이동.
// else //로그인x
// <Link to="/"></Link> //메인화면으로 이동.
function invitereject() {
if(usercheck)
window.location.href=`/user/${usercheck}`
else
window.location.href="/"
}
return (
......@@ -22,62 +30,47 @@ const InvitePage = () => {
<div className="d-flex justify-content-evenly">
{/* 위 사진,이름 */}
<div
style={{
width: "100%",
height: "140px",
textAlign: "center",
border: "3px",
borderStyle: "none solid solid",
borderColor: "red",
fontSize: "12px",
}}
// style={{
// width: "100%",
// height: "140px",
// textAlign: "center",
// border: "3px",
// borderStyle: "none solid solid",
// borderColor: "red",
// fontSize: "12px",
// }}
>
{/* 방 부분 */}
{/* 방 부분
<p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p>
<img style={{ width: "90px", height: "90px" }}></img>
<p style={{ marginBottom: "0px", fontSize: "16px" }}>
id: {/*${roomid}*/}
</p>
방 id: ${roomid}
</p> */}
</div>
{/* <div
style={{
width: "207px",
height: "140px",
textAlign: "center",
border: "3px",
borderStyle: "none solid solid none",
borderColor: "red",
fontSize: "12px",
}}
>
초대한 사람 부분
<p style={{ marginBottom: "0px", fontSize: "16px" }}>초대한 사람</p>
<img src={UserImage} style={{ width: "90px", height: "90px" }}></img>
<p style={{ marginBottom: "0px", fontSize: "16px" }}>
이름: {/*${nickname}
</p>
</div>*/}
</div>
<div
style={{
width: "80%",
height: "200px",
textAlign: "center",
fontSize: "18px",
marginLeft: "10%",
marginRight: "10%",
}}
// style={{
// width: "80%",
// height: "200px",
// textAlign: "center",
// fontSize: "18px",
// marginLeft: "10%",
// marginRight: "10%",
// }}
>
{/* 아래 텍스트 */}
<p>
<br></br>
축하합니다! 친구{/*${InvitePerson.nickname}*/} 화상회의방{" "}
{/*${InvitedRoo.roomid}*/} 초대하였습니다.
<br></br>
<br></br>
초대를 수락하시겠습니까?
<p align= "center" style={{
fontSize: "30px",
marginTop: "120px",
marginBottom: "80px"
}}>
축하합니다! 친구가 당신을
<br/>
화상회의에 초대했습니다.
<br/>
<br/>
<b>초대를 수락하시겠습니까?</b>
</p>
</div>
......@@ -88,7 +81,8 @@ const InvitePage = () => {
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={GoInvitedroom}
onClick={goInvitedroom}
>
수락
</button>
......@@ -97,7 +91,7 @@ const InvitePage = () => {
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={Invitereject}
onClick={invitereject}
>
거절
</button>
......
......@@ -119,6 +119,19 @@ const exitRoom = async (req, res) => {
await User.update({ roomNumber: user.roomNumber }, { where: { id: id } });
}
const changename = async (req,res) => {
const {id, name} = req.body;
console.log(req.body)
try {
await Room.update({ 'name': name },{ where: { id: id } })
const room1 = await Room.findOne({ where: { id: id } })
console.log('Room:',room1)
}catch (error) {
console.log(error);
res.status(500).send("에러");
}
};
export default {
joinRoom, roomImgUpload, createRoom, getRoom, exitRoom,
joinRoom, roomImgUpload, createRoom, getRoom, exitRoom, changename
};
......@@ -6,5 +6,6 @@ router.route("/getRoom").post(roomCrtl.getRoom);
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);
export default router;
\ No newline at end of file
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