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
461f7743
Commit
461f7743
authored
Aug 02, 2021
by
권병윤
Browse files
as
parent
5d816c05
Changes
6
Show whitespace changes
Inline
Side-by-side
client/kakao-config.json
deleted
100644 → 0
View file @
5d816c05
{
"REACT_APP_KAKAO_KEY"
:
"783f1ca14e1f14bc6442eedcd37c76a1"
}
\ No newline at end of file
client/src/components/Home/RoomList.js
View file @
461f7743
import
AddRoom
from
"
./AddRoom
"
;
import
RoomSingle
from
"
./RoomSingle
"
;
//import userApi from "../../apis/user.api";
const
RoomList
=
()
=>
{
// const userid = localStorage.getItem("user");//로컬 스토리지에 있는 내 유저 아이디 받아온것.
// useEffect(async() => {
// const { data } = await userApi.getUser(userid);
// return () => {
// cleanup
// }
// }, [input])
// // 내 유저 아이디로 서버에서 그 아이디에 맞는 정보 가져오기
// const allroomid = data.roomNumber; //내가 속해있는 방의 id전부 불러와서
// const i = null;
// function joinedroom(allroomid) { //그 갯수만큼 반복을 시킨다. 이때,
// for (i=0; i<allroomid.length; i++) {
// <RoomSingle />
// localStorage.setItem(`joinroomid${i+1}`, allroomid[i]);
// }
// }
return
(
<
div
>
<
AddRoom
/>
...
...
client/src/components/Home/RoomSingle.js
View file @
461f7743
...
...
@@ -6,7 +6,8 @@ import userApi from '../../apis/user.api';
const
RoomSingle
=
()
=>
{
const
[
roomNum
,
setRoomNum
]
=
useState
(
''
)
const
[
room
,
setRoom
]
=
useState
([])
const
roomId
=
localStorage
.
getItem
(
'
user
'
);
// const roomId = localStorage.getItem('user');
const
roomId
=
"
abc7654321
"
const
channelId
=
1
const
A
=
[]
...
...
client/src/components/Room/LeftHamberger.js
deleted
100644 → 0
View file @
5d816c05
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
);
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
LeftHamberger
;
client/src/components/Room/LeftHamburger.js
View file @
461f7743
import
UserState
from
"
./UserState
"
;
import
{
Link
}
from
"
react-router-dom
"
;
import
{
Link
,
useParams
}
from
"
react-router-dom
"
;
import
KakaoShareButton
from
"
../KakaoShareButton
"
;
import
{
useEffect
}
from
"
react
"
;
const
LeftHamburger
=
()
=>
{
const
{
roomId
}
=
useParams
();
useEffect
(()
=>
{
const
script
=
document
.
createElement
(
"
script
"
);
script
.
src
=
"
https://developers.kakao.com/sdk/js/kakao.js
"
;
...
...
@@ -14,16 +15,11 @@ const LeftHamburger = () => {
};
},
[]);
// 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
);
navigator
.
clipboard
.
writeText
(
link
[
4
]);
//document.execCommand("copy");
}
return
(
<
div
>
<
div
>
...
...
@@ -62,8 +58,7 @@ const LeftHamburger = () => {
온
/
오프라인
사용자
<
/p
>
<
h6
className
=
"
mt-2
"
id
=
"
roomId
"
>
{
"
"
}
#
ASV2AE985
{
"
"
}
{
`
${
roomId
}
`
}
<
/h6
>
<
/div
>
<
UserState
/>
...
...
client/src/components/Room/RightHamburger.js
View file @
461f7743
import
{
useState
}
from
"
react
"
;
import
{
useState
,
useEffect
}
from
"
react
"
;
import
{
useParams
}
from
"
react-router-dom
"
;
import
ChannelSingle
from
'
./ChannelSingle
'
;
import
Rightimg
from
'
../../images/RightHamburgerImg.png
'
import
RoomApi
from
"
../../apis/room.api
"
;
// const INIT_Room = {
// id: '',
// name: '',
// member: '',
// profileimg: '',
// channel: ''
// }
const
RightHamburger
=
()
=>
{
const
[
admin
,
setAdmin
]
=
useState
(
'
true
'
)
const
{
roomId
}
=
useParams
();
// const [Room, setRoom] = useState(INIT_Room)
// async function Roomstate(Roomid) {
// try {
// const data = await RoomApi.getRoom(Roomid)
// console.log("여기 데이터 표시")
// setRoom(data)
// } catch (error) {
// // catchErrors(error, setError)
// }
// }
// useEffect(() => {
// Roomstate(link[4])
// }, []) 이거 getRoom이 작동 안하는것 같다.
/*
1. 서버에서 현재 입장한 Roomid 받아다가 보여주기(좌,우 공통)
2. Roomid확인 후 그 방의 channel 받아다가 보여주기(각 채널과, 그 안에 있는 사람들. 이때, 각 채널은 일종의 버튼이고, 클릭하면 거기로 나의 정보를 옮긴다.)
...
...
@@ -47,9 +70,9 @@ const RightHamburger = () => {
color
:
'
#000000
'
,
}}
>
방
이름
방
이름
{
/*Room.name*/
}
<
/p
>
<
h6
className
=
"
mt-2
"
id
=
"
roomId
"
>
Roomid
<
/h6
>
<
h6
className
=
"
mt-2
"
id
=
"
roomId
"
>
{
`
${
roomId
}
`
}
<
/h6
>
<
button
type
=
"
button
"
className
=
"
btn-close text-reset
"
...
...
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