Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
bora-it
Commits
c4b5738e
Commit
c4b5738e
authored
Jul 28, 2021
by
우지원
Browse files
0728
parent
dfe5b8fb
Changes
1
Hide whitespace changes
Inline
Side-by-side
client/src/components/Room/LeftHamburger.js
View file @
c4b5738e
import
UserState
from
"
./UserState
"
;
import
{
Link
}
from
"
react-router-dom
"
;
import
KakaoShareButton
from
"
../KakaoShareButton
"
;
import
{
useEffect
}
from
"
react
"
;
import
backward
from
"
../../backward.png
"
;
import
ChannelSingle
from
"
./ChannelSingle
"
;
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
);
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
/>
function
roomIdCopy
()
{
const
t
=
document
.
querySelector
(
"
#roomId
"
).
innerText
;
console
.
log
(
t
);
navigator
.
clipboard
.
writeText
(
t
);
document
.
execCommand
(
"
copy
"
);
}
return
(
<
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
>
<
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
=
"
modal fade
"
id
=
"
InviteRoom
"
tabIndex
=
"
-1
"
aria
-
labelledby
=
"
InviteRoomLabel
"
aria
-
hidden
=
"
true
"
className
=
"
offcanvas offcanvas-start
"
style
=
{{
width
:
"
330px
"
}}
tabIndex
=
"
-1
"
id
=
"
left-hamburger
"
aria
-
labelledby
=
"
hamburgerLabel
"
>
<
div
className
=
"
modal-dialog
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
modal-header
"
>
<
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
>
<
button
type
=
"
button
"
className
=
"
btn-close
"
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
type
=
"
button
"
className
=
"
btn-close
text-reset
"
data
-
bs
-
dismiss
=
"
offcanvas
"
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
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
>
<
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
=
"
exitRoomLabel
"
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
"
style
=
{{
width
:
"
120px
"
}}
>
카카오로
초대
<
/button
>
{
/*
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#copyRoomId"
onClick={roomIdCopy}
style={{ width: "120px" }}
>
방 Id 복사
</button> */
}
<
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
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
);
);
};
export
default
LeftHamberger
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment