Commit 5d816c05 authored by 권병윤's avatar 권병윤
Browse files

0802

parent f3b19503
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import kakao_key from "../kakao-config.json"
const KakaoShareButton = () => { const KakaoShareButton = () => {
useEffect(() => { useEffect(() => {
...@@ -12,7 +13,7 @@ const KakaoShareButton = () => { ...@@ -12,7 +13,7 @@ const KakaoShareButton = () => {
// 중복 initialization 방지 // 중복 initialization 방지
if (!kakao.isInitialized()) { if (!kakao.isInitialized()) {
// 두번째 step 에서 가져온 javascript key 를 이용하여 initialize // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
kakao.init(process.env.REACT_APP_KAKAO_KEY); kakao.init(kakao_key.REACT_APP_KAKAO_KEY);
} }
kakao.Link.createDefaultButton({ kakao.Link.createDefaultButton({
container: '#kakao-link-btn', container: '#kakao-link-btn',
......
import UserState from "./UserState";
import { Link } from "react-router-dom";
import KakaoShareButton from "../KakaoShareButton";
import { useEffect } from "react";
const LeftHamburger = () => {
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);
navigator.clipboard.writeText(t);
//document.execCommand("copy");
}
return (
<div>
<div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#left-hamburger"
aria-controls="left-hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: "#f4c1f2" }}
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
<div
className="offcanvas offcanvas-start"
style={{ width: "330px" }}
tabIndex="-1"
id="left-hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: "bold",
fontSize: "15px",
width: "150px",
color: "#000000",
}}
>
/오프라인 사용자
</p>
<h6 className="mt-2" id="roomId">
{" "}
#ASV2AE985{" "}
</h6>
</div>
<UserState />
<div>
<div className="d-flex flex-row-reverse">
<button
type="button"
className="m-3 rounded"
data-bs-toggle="modal"
data-bs-target="#InviteRoom"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#E0CEE8",
color: "black",
border: "1px #D64D61",
}}
>
초대
</button>
<div
className="modal fade"
id="InviteRoom"
tabIndex="-1"
aria-labelledby="InviteRoomLabel"
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"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={KakaoCode}
>
카카오로 초대
</button> */}
<KakaoShareButton />
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={roomIdCopy}
>
Id 복사
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default LeftHamburger;
import { useState } from "react"; import { useState } from "react";
import ChannelSingle from './ChannelSingle' import ChannelSingle from './ChannelSingle';
import Rightimg from '../../images/RightHamburgerImg.png'
import RoomApi from "../../apis/room.api";
const RightHamberger = () => { const RightHamburger = () => {
const [admin, setAdmin] = useState('true') const [admin, setAdmin] = useState('true')
/*
1. 서버에서 현재 입장한 Roomid 받아다가 보여주기(좌,우 공통)
2. Roomid확인 후 그 방의 channel 받아다가 보여주기(각 채널과, 그 안에 있는 사람들. 이때, 각 채널은 일종의 버튼이고, 클릭하면 거기로 나의 정보를 옮긴다.)
3. 서버에서 로그인 on/off 구분해서 받아다가 일치하는 userid가 있으면 그사람의 on/off요소 보여주기
*/
return ( return (
<div> <div>
<div> <div>
...@@ -16,10 +24,9 @@ const RightHamberger = () => { ...@@ -16,10 +24,9 @@ const RightHamberger = () => {
aria-label="Toggle navigation" aria-label="Toggle navigation"
style={{ border: '#f4c1f2' }} style={{ border: '#f4c1f2' }}
> >
<span className="navbar-toggler-icon"></span> <img src={Rightimg} width="50px" height="30px"/>
</button> </button>
</div> </div>
<div <div
className="offcanvas offcanvas-end" className="offcanvas offcanvas-end"
style={{ width: '330px' }} style={{ width: '330px' }}
...@@ -40,9 +47,9 @@ const RightHamberger = () => { ...@@ -40,9 +47,9 @@ const RightHamberger = () => {
color: '#000000', color: '#000000',
}} }}
> >
데계데계데계데계데계데계데계데계데계데계 재밌는 수학과 이름
</p> </p>
<h6 className="mt-2" id="roomId" > #ASV2AE985 </h6> <h6 className="mt-2" id="roomId" > Roomid </h6>
<button <button
type="button" type="button"
className="btn-close text-reset" className="btn-close text-reset"
...@@ -135,4 +142,4 @@ const RightHamberger = () => { ...@@ -135,4 +142,4 @@ const RightHamberger = () => {
} }
export default RightHamberger export default RightHamburger
\ No newline at end of file \ No newline at end of file
{
"REACT_APP_KAKAO_KEY": "783f1ca14e1f14bc6442eedcd37c76a1"
}
\ No newline at end of file
This diff is collapsed.
...@@ -3,17 +3,12 @@ ...@@ -3,17 +3,12 @@
"version": "1.0.0", "version": "1.0.0",
"description": "Streaming Service", "description": "Streaming Service",
"main": "index.js", "main": "index.js",
"type": "module",
"scripts": { "scripts": {
"start": "nodemon index.js", "start": "node dist/index.js",
"dev": "nodemon -r esm index.js", "build": "tsc",
"build": "tsc -p ." "dev": "nodemon",
}, "test": "echo \"Error: no test specified\" && exit 1"
"nodemonConfig": {
"ignore": [
"test/*",
"docs/*",
"client/*"
]
}, },
"repository": { "repository": {
"type": "git", "type": "git",
...@@ -27,21 +22,21 @@ ...@@ -27,21 +22,21 @@
"cookie-parser": "^1.4.5", "cookie-parser": "^1.4.5",
"cors": "2.8.5", "cors": "2.8.5",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"esm": "^3.2.25",
"express": "4.17.1", "express": "4.17.1",
"http": "0.0.1-security", "http": "0.0.1-security",
"jsonwebtoken": "^8.5.1", "jsonwebtoken": "^8.5.1",
"multer": "^1.4.2", "multer": "^1.4.2",
"nanoid": "^3.1.23", "nanoid": "^3.1.20",
"nodemon": "^2.0.7", "nodemon": "^2.0.7",
"pg": "^8.6.0", "pg": "^8.6.0",
"pg-hstore": "^2.3.4", "pg-hstore": "^2.3.4",
"postgres": "^1.0.2", "postgres": "^1.0.2",
"sequelize": "^6.6.5", "sequelize": "^6.6.5",
"socket.io": "2.3.0", "socket.io": "^4.1.3",
"wrtc": "0.4.6" "wrtc": "^0.4.7"
}, },
"devDependencies": { "devDependencies": {
"@types/socket.io": "^3.0.2",
"nodemon": "2.0.7" "nodemon": "2.0.7"
} }
} }
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