Skip to content

GitLab

Commit 293f3283 authored by 권병윤's avatar 권병윤
Browse files

as

parent a4bff5ef
Hide whitespace changes
Inline Side-by-side
client/.env 0 → 100644
View file @ 293f3283
REACT_APP_KAKAO_KEY=783f1ca14e1f14bc6442eedcd37c76a1
REACT_FETCH_URL=http://localhost:3000
\ No newline at end of file
client/public/index.html
View file @ 293f3283
......@@ -25,6 +25,11 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>BORA It</title>
<script src="//developers.kakao.com/sdk/js/kakao.js"></script>
<script>
Kakao.init(process.env.REACT_APP_KAKAO_KEY);//SDK초기화
console.log(Kakao.isInitialized());// 초기화 여부 판단
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
client/src/App.js
View file @ 293f3283
......@@ -5,6 +5,7 @@ import HomeUserPage from "./pages/HomeUserPage";
import ProfilePage from "./pages/ProfilePage";
import RoomPage from "./pages/RoomPage";
import InfoUpdatePage from "./pages/InfoUpdatePage";
import InvitePage from "./pages/InvitePage";
function App() {
return (
......@@ -16,6 +17,7 @@ function App() {
<Route path="/profile/:id/update" component={InfoUpdatePage} />
<Route path="/profile/:id" component={ProfilePage} />
<Route path="/room/:roomId/:channelId" component={RoomPage} />
<Route path="/room/Invite" component={InvitePage} />
</Switch>
{/* </AuthProvider> */}
</Router>
......
client/src/components/KakaoShareButton.js 0 → 100644
View file @ 293f3283
import React, { useEffect } from "react";
import kakao_login from "../kakao_login.png";
const KakaoShareButton = () => {
useEffect(() => {
createKakaoButton();
}, []);
const ad = "이름"
const createKakaoButton = () => {
// kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
if (window.Kakao) {
const kakao = window.Kakao;
// 중복 initialization 방지
if (!kakao.isInitialized()) {
// 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
kakao.init(process.env.REACT_APP_KAKAO_KEY);
}
kakao.Link.createDefaultButton({
container: '#kakao-link-btn',
objectType: 'text',
text:
`${ad}`,
//'기본 템플릿으로 제공되는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오링크는 다른 템플릿을 이용해 보낼 수 있습니다.',
link: {
mobileWebUrl:
'http://localhost:3000/room/Invite',
webUrl:
'http://localhost:3000/room/Invite',
},
});
}
};
return (
<div className="kakao-share-button">
{/* Kakao share button */}
<button
id="kakao-link-btn"
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
>카카오로 초대
</button>
</div>
);
};
export default KakaoShareButton;
client/src/components/Login.js
View file @ 293f3283
......@@ -84,7 +84,7 @@ const Login = () => {
</div>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary" disabled={disabled}>
<button type="submit" className="btn btn-primary" disabled={disabled} data-bs-dismiss="modal">
로그인
</button>
</div>
......
client/src/components/Room/LeftHamberger.js
View file @ 293f3283
import backward from "../../backward.png";
import ChannelSingle from "./ChannelSingle";
import UserState from "./UserState";
import { Link } from "react-router-dom";
import KakaoShareButton from "../KakaoShareButton";
import { useEffect } from "react";
const LeftHamberger = () => {
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);
};
}, []);
// function KakaoCode() {
// window.location.href
// ="https://kauth.kakao.com/oauth/authorize?client_id=ca4c7126765a1dfd4c127c27415d4abc&redirect_uri=http://localhost:3000/room/Invite&response_type=code&prompt=login&scope=talk_message,friends"
// }
function roomIdCopy() {
const t = document.querySelector("#roomId").innerText;
console.log(t);
......@@ -49,58 +65,15 @@ const LeftHamberger = () => {
{" "}
#ASV2AE985{" "}
</h6>
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div className="overflow-auto" style={{ height: "610px" }}>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<h5 className="col mt-2">온라인 사용자</h5>
</div>
<ul className="mx-5" style={{ color: "#76D079" }}>
<li>
<p style={{ color: "black" }}>CHERRY</p>
</li>
<li>
<p style={{ color: "black" }}>JAEYEON</p>
</li>
<li>
<p style={{ color: "black" }}>SEOYEON</p>
</li>
<li>
<p style={{ color: "black" }}>JIWEON</p>
</li>
<li>
<p style={{ color: "black" }}>BYOUNGYUN</p>
</li>
</ul>
</div>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<h5 className="col mt-2">오프라인 사용자</h5>
</div>
<ul className="mx-5">
<li>CHERRY</li>
<li>JAEYEON</li>
<li>SEOYEON</li>
<li>JIWEON</li>
<li>BYOUNGYUN</li>
</ul>
</div>
</div>
<UserState />
<div>
<div className="d-flex flex-row-reverse">
<button
type="button"
className="m-3 rounded"
data-bs-toggle="modal"
data-bs-target="#exitRoom"
data-bs-target="#InviteRoom"
style={{
height: "30px",
fontWeight: "bold",
......@@ -113,9 +86,9 @@ const LeftHamberger = () => {
</button>
<div
className="modal fade"
id="exitRoom"
id="InviteRoom"
tabIndex="-1"
aria-labelledby="exitRoomLabel"
aria-labelledby="InviteRoomLabel"
aria-hidden="true"
>
<div className="modal-dialog">
......@@ -133,13 +106,16 @@ const LeftHamberger = () => {
</div>
<div className="row mb-3">
<div className="d-flex justify-content-evenly">
<button
{/* <button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={KakaoCode}
>
카카오로 초대
</button>
카카오로 초대
</button> */}
<KakaoShareButton />
<button
type="submit"
className="col-2 p-1 btn btn-primary"
......
client/src/components/Room/RightHamberger.js
View file @ 293f3283
import ChannelSingle from './ChannelSingle'
const RightHamberger = () => {
......@@ -40,7 +39,7 @@ const RightHamberger = () => {
style={{
fontWeight: 'bold',
fontSize: '15px',
overflow: 'scroll',
overflow: 'hidden',
whiteSpace: 'nowrap',
width: '150px',
color: '#000000',
......@@ -101,6 +100,7 @@ const RightHamberger = () => {
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
예
</button>
......
client/src/components/Room/UserState.js 0 → 100644
View file @ 293f3283
const UserState = () => {
return (
<div className="overflow-auto" style={{ height: '610px' }}>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">Online</h5>
</div>
<ul className="mx-5">
<li>
CHERRY
</li>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">Offline</h5>
</div>
<ul className="mx-5">
<li>
CHERRY
</li>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
</div>
)
};
export default UserState;
client/src/pages/InvitePage.js 0 → 100644
View file @ 293f3283
import Header from "../components/Header";
import UserImage from "../../src/kakao_login.png";
import RoomImage from "../../src/kakao_login.png";
const InvitePage = () => {
function GoInvitedroom() {
// if() : //초대받은 사람이 로그인 o
// roomid = //서버에서 받아온 방 번호 저장
// //초대받은 사람의 참여한 방 목록에 roomid 추가
// else //로그인x
// //로그인 하게 보냄.
}
function Invitereject() {
// if () //초대받은 사람이 로그인 o
// <Link to="/user"></Link>//유저 페이지로 이동.
// else //로그인x
// <Link to="/"></Link> //메인화면으로 이동.
}
return (
<div>
{/*페이지 전체*/}
<Header />
<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",
}}
>
{/* 방 부분 */}
<p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p>
<img src={RoomImage} style={{ width: "90px", height: "90px" }}></img>
<p style={{ marginBottom: "0px", fontSize: "16px" }}>
방 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%",
}}
>
{/* 아래 텍스트 */}
<p>
<br></br>
축하합니다! 친구{/*${InvitePerson.nickname}*/}가 화상회의방{" "}
{/*${InvitedRoo.roomid}*/}로 초대하였습니다.
<br></br>
<br></br>
초대를 수락하시겠습니까?
</p>
</div>
<div className="d-flex justify-content-evenly">
{/* 수락, 거절 버튼 */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={GoInvitedroom}
>
수락
</button>
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={Invitereject}
>
거절
</button>
</div>
</div>
);
};
export default InvitePage;
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