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
76c3e723
Commit
76c3e723
authored
Aug 09, 2021
by
이재연
Browse files
Merge remote-tracking branch 'origin/woojiweon2' into jaeyeon2854
parents
427c6ec6
0e228dad
Changes
14
Show whitespace changes
Inline
Side-by-side
client/.env
deleted
100644 → 0
View file @
427c6ec6
REACT_APP_KAKAO_KEY=783f1ca14e1f14bc6442eedcd37c76a1
REACT_FETCH_URL=http://localhost:3000
\ No newline at end of file
client/.gitignore
View file @
76c3e723
...
@@ -23,3 +23,5 @@ yarn-debug.log*
...
@@ -23,3 +23,5 @@ yarn-debug.log*
yarn-error.log*
yarn-error.log*
.env
.env
kakao.config.json
\ No newline at end of file
client/src/App.js
View file @
76c3e723
...
@@ -23,7 +23,7 @@ function App() {
...
@@ -23,7 +23,7 @@ function App() {
<
Route
path
=
"
/profile/:id
"
component
=
{
ProfilePage
}
/
>
<
Route
path
=
"
/profile/:id
"
component
=
{
ProfilePage
}
/
>
<
Route
path
=
"
/room/:roomId/main
"
component
=
{
InitRoomPage
}
/
>
<
Route
path
=
"
/room/:roomId/main
"
component
=
{
InitRoomPage
}
/
>
<
Route
path
=
"
/room/:roomId/:channelId
"
component
=
{
RoomPage
}
/
>
<
Route
path
=
"
/room/:roomId/:channelId
"
component
=
{
RoomPage
}
/
>
<
Route
path
=
"
/
room/Invite
"
component
=
{
InvitePage
}
/
>
<
Route
path
=
"
/
invite/:roomId
"
component
=
{
InvitePage
}
/
>
<
/Switch
>
<
/Switch
>
{
/* </AuthProvider> */
}
{
/* </AuthProvider> */
}
<
/Router
>
<
/Router
>
...
...
client/src/apis/room.api.js
View file @
76c3e723
import
axios
from
"
axios
"
;
import
axios
from
"
axios
"
;
const
getRoom
=
async
(
id
)
=>
{
const
getRoom
=
async
(
id
)
=>
{
const
{
data
}
=
await
axios
.
post
(
'
/api/room/getRoom
'
,
id
);
const
{
data
}
=
await
axios
.
post
(
"
/api/room/getRoom
"
,
id
);
return
data
;
return
data
;
};
};
const
exitRoom
=
async
(
ID
)
=>
{
const
exitRoom
=
async
(
ID
)
=>
{
const
{
data
}
=
await
axios
.
delete
(
`/api/room/exitRoom/
${
ID
.
id
}
/
${
ID
.
roomId
}
`
);
const
{
data
}
=
await
axios
.
delete
(
`/api/room/exitRoom/
${
ID
.
id
}
/
${
ID
.
roomId
}
`
);
return
data
;
return
data
;
};
};
...
@@ -20,6 +22,11 @@ const join = async (payload) => {
...
@@ -20,6 +22,11 @@ const join = async (payload) => {
return
data
;
return
data
;
};
};
const
changename
=
async
(
payload
)
=>
{
const
{
data
}
=
await
axios
.
put
(
"
/api/room/changename
"
,
payload
);
return
data
;
};
const
joinChannel
=
async
(
payload
)
=>
{
const
joinChannel
=
async
(
payload
)
=>
{
const
{
data
}
=
await
axios
.
post
(
"
/api/room/joinChannel
"
,
payload
);
const
{
data
}
=
await
axios
.
post
(
"
/api/room/joinChannel
"
,
payload
);
return
data
;
return
data
;
...
@@ -30,12 +37,19 @@ const doubleJoin = async (payload) => {
...
@@ -30,12 +37,19 @@ const doubleJoin = async (payload) => {
return
data
;
return
data
;
};
};
// const makeChannel = async (payload) => {
// const makeChannel = async (payload) => {
// const { data } = await axios.post("/api/room/makeChannel", payload);
// const { data } = await axios.post("/api/room/makeChannel", payload);
// return data;
// return data;
// };
// };
const
roomApi
=
{
getRoom
,
exitRoom
,
create
,
join
,
joinChannel
,
doubleJoin
};
const
roomApi
=
{
getRoom
,
exitRoom
,
create
,
join
,
changename
,
joinChannel
,
doubleJoin
,
};
export
default
roomApi
;
export
default
roomApi
;
client/src/components/Home/RoomSingle.js
View file @
76c3e723
...
@@ -14,7 +14,7 @@ const INIT_ROOM = {
...
@@ -14,7 +14,7 @@ const INIT_ROOM = {
const
RoomSingle
=
()
=>
{
const
RoomSingle
=
()
=>
{
const
[
room
,
setRoom
]
=
useState
([
INIT_ROOM
]);
const
[
room
,
setRoom
]
=
useState
([
INIT_ROOM
]);
const
[
error
,
setError
]
=
useState
(
""
);
const
[
error
,
setError
]
=
useState
(
""
);
const
channelId
=
'
main
'
;
const
channelId
=
"
main
"
;
const
{
roomId
}
=
useParams
(
room
.
roomId
);
const
{
roomId
}
=
useParams
(
room
.
roomId
);
async
function
getJoinRoom
(
Id
)
{
async
function
getJoinRoom
(
Id
)
{
try
{
try
{
...
@@ -45,10 +45,13 @@ const RoomSingle = () => {
...
@@ -45,10 +45,13 @@ const RoomSingle = () => {
{
room
&&
{
room
&&
room
.
map
((
el
)
=>
(
room
.
map
((
el
)
=>
(
<
div
>
<
div
>
{
room
[
0
]
===
INIT_ROOM
?
(
<
div
><
/div>
)
:
(
{
room
[
0
]
===
INIT_ROOM
?
(
<
div
><
/div
>
)
:
(
<
Link
<
Link
to
=
{
`/room/
${
el
.
roomId
}
/
${
channelId
}
`
}
to
=
{
`/room/
${
el
.
roomId
}
/
${
channelId
}
`
}
className
=
"
text-decoration-none text-dark
"
className
=
"
text-decoration-none text-dark
"
key
=
{
el
.
roomId
}
>
>
<
div
<
div
className
=
"
d-flex mx-4 my-2 p-2
"
className
=
"
d-flex mx-4 my-2 p-2
"
...
@@ -74,7 +77,8 @@ const RoomSingle = () => {
...
@@ -74,7 +77,8 @@ const RoomSingle = () => {
<
/div
>
<
/div
>
<
div
className
=
"
ms-auto mt-2
"
>
{
el
.
member
}
/100 </
div
>
<
div
className
=
"
ms-auto mt-2
"
>
{
el
.
member
}
/100 </
div
>
<
/div
>
<
/div
>
<
/Link>
)
}
<
/Link
>
)}
<
/div
>
<
/div
>
))}
))}
<
/div
>
<
/div
>
...
...
client/src/components/KakaoShareButton.js
View file @
76c3e723
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
(()
=>
{
useEffect
(()
=>
{
createKakaoButton
();
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
=
()
=>
{
const
createKakaoButton
=
()
=>
{
// kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
// kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
if
(
window
.
Kakao
)
{
if
(
window
.
Kakao
)
{
...
@@ -12,23 +49,20 @@ const KakaoShareButton = () => {
...
@@ -12,23 +49,20 @@ 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
[
0
].
kakao_key
);
}
}
kakao
.
Link
.
createDefaultButton
({
kakao
.
Link
.
createDefaultButton
({
container
:
'
#kakao-link-btn
'
,
container
:
"
#kakao-link-btn
"
,
objectType
:
'
text
'
,
objectType
:
"
text
"
,
text
:
text
:
`
${
inviteperson
.
name
}
님이 당신을 화상회의에 초대했습니다! 초대된 방 코드:
${
roomId
}
`
,
`
${
ad
}
`
,
//'기본 템플릿으로 제공되는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오링크는 다른 템플릿을 이용해 보낼 수 있습니다.',
link
:
{
link
:
{
mobileWebUrl
:
mobileWebUrl
:
`http://localhost:3000/invite/
${
roomId
}
`
,
'
http://localhost:3000/room/Invite
'
,
webUrl
:
`http://localhost:3000/invite/
${
roomId
}
`
,
webUrl
:
'
http://localhost:3000/room/Invite
'
,
},
},
});
});
}
}
};
};
return
(
return
(
<
div
className
=
"
kakao-share-button
"
>
<
div
className
=
"
kakao-share-button
"
>
{
/* Kakao share button */
}
{
/* Kakao share button */
}
...
@@ -38,7 +72,9 @@ const KakaoShareButton = () => {
...
@@ -38,7 +72,9 @@ const KakaoShareButton = () => {
className
=
"
col-2 p-1 btn btn-primary
"
className
=
"
col-2 p-1 btn btn-primary
"
data
-
bs
-
dismiss
=
"
modal
"
data
-
bs
-
dismiss
=
"
modal
"
style
=
{{
width
:
"
120px
"
}}
style
=
{{
width
:
"
120px
"
}}
>
카카오로
초대
onClick
=
{()
=>
console
.
log
(
"
안녕
"
)}
>
카카오로
초대
<
/button
>
<
/button
>
<
/div
>
<
/div
>
);
);
...
...
client/src/components/Room/ChannelSingle.js
View file @
76c3e723
...
@@ -23,7 +23,7 @@ const ChannelSingle = (props) => {
...
@@ -23,7 +23,7 @@ const ChannelSingle = (props) => {
if
(
A
)
{
if
(
A
)
{
await
roomApi
.
doubleJoin
({
roomId
:
roomId
,
index1
:
A
.
index1
,
index2
:
A
.
index2
,
joinChName
:
A
.
joinChName
})
await
roomApi
.
doubleJoin
({
roomId
:
roomId
,
index1
:
A
.
index1
,
index2
:
A
.
index2
,
joinChName
:
A
.
joinChName
})
}
}
const
roomA
=
await
roomApi
.
joinChannel
({
roomId
:
roomId
,
channelName
:
e
,
plusUser
:
data
.
name
,
index
:
index1
})
await
roomApi
.
joinChannel
({
roomId
:
roomId
,
channelName
:
e
,
plusUser
:
data
.
name
,
index
:
index1
})
setRoomName
(
e
)
setRoomName
(
e
)
setSuccess
(
true
)
setSuccess
(
true
)
}
else
{
}
else
{
...
@@ -66,9 +66,8 @@ const ChannelSingle = (props) => {
...
@@ -66,9 +66,8 @@ const ChannelSingle = (props) => {
return
(
return
(
<
div
>
<
div
>
<
div
className
=
"
overflow-auto
"
style
=
{{
height
:
'
610px
'
}}
>
<
div
className
=
"
overflow-auto
"
style
=
{{
height
:
'
610px
'
}}
>
{
props
.
channel
.
map
((
el
)
=>
(
{
props
.
channel
.
map
((
el
,
i
)
=>
(
<
div
className
=
"
mb-3
"
>
<
div
className
=
"
mb-3
"
key
=
{
`channel
${
i
}
`
}
>
<
Link
to
=
{
`/room/
${
roomId
}
/
${
el
.
channelName
}
`
}
>
<
div
<
div
className
=
"
m-3 p-1 row
"
className
=
"
m-3 p-1 row
"
style
=
{{
backgroundColor
:
'
#E0CEE8
'
}}
style
=
{{
backgroundColor
:
'
#E0CEE8
'
}}
...
@@ -93,11 +92,10 @@ const ChannelSingle = (props) => {
...
@@ -93,11 +92,10 @@ const ChannelSingle = (props) => {
{
el
.
channelName
}
{
el
.
channelName
}
<
/h5
>
<
/h5
>
<
/div
>
<
/div
>
<
/Link
>
{
el
.
joinUser
&&
{
el
.
joinUser
&&
el
.
joinUser
.
map
((
e
)
=>
(
el
.
joinUser
.
map
((
e
,
i
)
=>
(
<
div
>
<
div
key
=
{
`member
${
i
}
`
}
>
<
ul
className
=
"
mx-5
"
style
=
{{
color
:
'
#76D079
'
}}
>
<
ul
className
=
"
mx-5
"
style
=
{{
color
:
'
#76D079
'
}}
>
<
li
>
<
li
>
<
p
style
=
{{
color
:
'
black
'
}}
>
{
e
}
<
/p
>
<
p
style
=
{{
color
:
'
black
'
}}
>
{
e
}
<
/p
>
...
...
client/src/components/Room/RightHamburger.js
View file @
76c3e723
import
{
useState
,
useEffect
}
from
"
react
"
;
import
React
,
{
useState
,
useEffect
}
from
"
react
"
;
import
{
Link
,
useParams
}
from
"
react-router-dom
"
;
import
{
Link
,
useParams
}
from
"
react-router-dom
"
;
import
ChannelSingle
from
"
./ChannelSingle
"
;
import
ChannelSingle
from
"
./ChannelSingle
"
;
import
RoomApi
from
"
../../apis/room.api
"
;
import
RoomApi
from
"
../../apis/room.api
"
;
import
catchErrors
from
"
../../context/catchError
"
;
import
catchErrors
from
"
../../context/catchError
"
;
import
KakaoShareButton
from
"
../KakaoShareButton
"
;
import
Roomnamechange
from
"
./Roomnamechange
"
;
const
INIT_ROOM
=
{
const
INIT_ROOM
=
{
name
:
""
,
name
:
""
,
owner
:
""
,
};
};
const
INIT_CHANNEL
=
{
const
INIT_CHANNEL
=
{
...
@@ -22,7 +25,13 @@ const RightHamburger = () => {
...
@@ -22,7 +25,13 @@ const RightHamburger = () => {
async
function
getRoom
(
roomId
)
{
async
function
getRoom
(
roomId
)
{
try
{
try
{
const
data
=
await
RoomApi
.
getRoom
([
roomId
]);
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
)
{
}
catch
(
error
)
{
catchErrors
(
error
,
setError
);
catchErrors
(
error
,
setError
);
}
}
...
@@ -106,7 +115,7 @@ const RightHamburger = () => {
...
@@ -106,7 +115,7 @@ const RightHamburger = () => {
color
:
"
#000000
"
,
color
:
"
#000000
"
,
}}
}}
>
>
{
room
.
name
}
{
room
[
0
]
.
name
}
<
/p
>
<
/p
>
<
h6
className
=
"
mt-2
"
id
=
"
roomId
"
>
<
h6
className
=
"
mt-2
"
id
=
"
roomId
"
>
{
"
"
}
{
"
"
}
...
@@ -159,13 +168,7 @@ const RightHamburger = () => {
...
@@ -159,13 +168,7 @@ const RightHamburger = () => {
<
/div
>
<
/div
>
<
div
className
=
"
row mb-3
"
>
<
div
className
=
"
row mb-3
"
>
<
div
className
=
"
d-flex justify-content-evenly
"
>
<
div
className
=
"
d-flex justify-content-evenly
"
>
<
button
<
KakaoShareButton
/>
type
=
"
submit
"
className
=
"
col-2 p-1 btn btn-primary
"
style
=
{{
width
:
"
120px
"
}}
>
카카오로
초대
<
/button
>
<
button
<
button
type
=
"
submit
"
type
=
"
submit
"
className
=
"
col-2 p-1 btn btn-primary
"
className
=
"
col-2 p-1 btn btn-primary
"
...
@@ -196,10 +199,12 @@ const RightHamburger = () => {
...
@@ -196,10 +199,12 @@ const RightHamburger = () => {
>
>
퇴장
퇴장
<
/button
>
<
/button
>
{
/* {admin
? (
{
room
[
0
].
owner
==
id
?
(
<
button
<
button
type
=
"
button
"
type
=
"
button
"
className
=
"
m-3 rounded
"
className
=
"
m-3 rounded
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#Roomsetting
"
style
=
{{
style
=
{{
height
:
"
30px
"
,
height
:
"
30px
"
,
fontWeight
:
"
bold
"
,
fontWeight
:
"
bold
"
,
...
@@ -210,7 +215,50 @@ const RightHamburger = () => {
...
@@ -210,7 +215,50 @@ const RightHamburger = () => {
>
>
설정
설정
<
/button
>
<
/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
<
div
className
=
"
modal fade
"
className
=
"
modal fade
"
...
...
client/src/components/Room/Roomnamechange.js
0 → 100644
View file @
76c3e723
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
;
client/src/kakao.config.json
0 → 100644
View file @
76c3e723
[
{
"kakao_key"
:
"db04e9a8403d8955211052864937034a"
}
]
\ No newline at end of file
client/src/pages/InvitePage.js
View file @
76c3e723
import
Header
from
"
../components/Header
"
;
import
Header
from
"
../components/Header
"
;
const
InvitePage
=
()
=>
{
const
InvitePage
=
()
=>
{
function
GoInvitedroom
()
{
const
usercheck
=
localStorage
.
getItem
(
"
user
"
);
// if() : //초대받은 사람이 로그인 o
// roomid = //서버에서 받아온 방 번호 저장
function
goInvitedroom
()
{
// //초대받은 사람의 참여한 방 목록에 roomid 추가
let
check1
=
null
;
// else //로그인x
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
I
nvitereject
()
{
function
i
nvitereject
()
{
// if () //초대받은 사람이 로그인 o
if
(
usercheck
)
// <Link to="/user/:id"></Link>//유저 페이지로 이동.
window
.
location
.
href
=
`/user/
${
usercheck
}
`
//
else
//로그인x
else
// <Link to="/"></Link> //메인화면으로 이동.
window
.
location
.
href
=
"
/
"
}
}
return
(
return
(
...
@@ -22,62 +30,47 @@ const InvitePage = () => {
...
@@ -22,62 +30,47 @@ const InvitePage = () => {
<
div
className
=
"
d-flex justify-content-evenly
"
>
<
div
className
=
"
d-flex justify-content-evenly
"
>
{
/* 위 사진,이름 */
}
{
/* 위 사진,이름 */
}
<
div
<
div
style
=
{{
//
style={{
width
:
"
100%
"
,
//
width: "100%",
height
:
"
140px
"
,
//
height: "140px",
textAlign
:
"
center
"
,
//
textAlign: "center",
border
:
"
3px
"
,
//
border: "3px",
borderStyle
:
"
none solid solid
"
,
//
borderStyle: "none solid solid",
borderColor
:
"
red
"
,
//
borderColor: "red",
fontSize
:
"
12px
"
,
//
fontSize: "12px",
}}
//
}}
>
>
{
/* 방 부분
*/
}
{
/* 방 부분
<p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p>
<p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p>
<img style={{ width: "90px", height: "90px" }}></img>
<img style={{ width: "90px", height: "90px" }}></img>
<p style={{ marginBottom: "0px", fontSize: "16px" }}>
<p style={{ marginBottom: "0px", fontSize: "16px" }}>
방
id
:
{
/*
${roomid}
*/
}
방 id: ${roomid}
<
/p
>
</p>
*/
}
<
/div
>
<
/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
>
<
div
<
div
style
=
{{
//
style={{
width
:
"
80%
"
,
//
width: "80%",
height
:
"
200px
"
,
//
height: "200px",
textAlign
:
"
center
"
,
//
textAlign: "center",
fontSize
:
"
18px
"
,
//
fontSize: "18px",
marginLeft
:
"
10%
"
,
//
marginLeft: "10%",
marginRight
:
"
10%
"
,
//
marginRight: "10%",
}}
//
}}
>
>
{
/* 아래 텍스트 */
}
{
/* 아래 텍스트 */
}
<
p
>
<
p
align
=
"
center
"
style
=
{{
<
br
><
/br
>
fontSize
:
"
30px
"
,
축하합니다
!
친구
{
/*${InvitePerson.nickname}*/
}
가
화상회의방
{
"
"
}
marginTop
:
"
120px
"
,
{
/*${InvitedRoo.roomid}*/
}
로
초대하였습니다
.
marginBottom
:
"
80px
"
<
br
><
/br
>
}}
>
<
br
><
/br
>
축하합니다
!
친구가
당신을
초대를
수락하시겠습니까
?
<
br
/>
화상회의에
초대했습니다
.
<
br
/>
<
br
/>
<
b
>
초대를
수락하시겠습니까
?
<
/b
>
<
/p
>
<
/p
>
<
/div
>
<
/div
>
...
@@ -88,7 +81,8 @@ const InvitePage = () => {
...
@@ -88,7 +81,8 @@ const InvitePage = () => {
className
=
"
col-2 p-1 btn btn-primary
"
className
=
"
col-2 p-1 btn btn-primary
"
data
-
bs
-
dismiss
=
"
modal
"
data
-
bs
-
dismiss
=
"
modal
"
style
=
{{
width
:
"
120px
"
}}
style
=
{{
width
:
"
120px
"
}}
onClick
=
{
GoInvitedroom
}
onClick
=
{
goInvitedroom
}
>
>
수락
수락
<
/button
>
<
/button
>
...
@@ -97,7 +91,7 @@ const InvitePage = () => {
...
@@ -97,7 +91,7 @@ const InvitePage = () => {
className
=
"
col-2 p-1 btn btn-primary
"
className
=
"
col-2 p-1 btn btn-primary
"
data
-
bs
-
dismiss
=
"
modal
"
data
-
bs
-
dismiss
=
"
modal
"
style
=
{{
width
:
"
120px
"
}}
style
=
{{
width
:
"
120px
"
}}
onClick
=
{
I
nvitereject
}
onClick
=
{
i
nvitereject
}
>
>
거절
거절
<
/button
>
<
/button
>
...
...
server/controllers/room.controller.js
View file @
76c3e723
...
@@ -34,7 +34,7 @@ const joinRoom = async (req, res) => {
...
@@ -34,7 +34,7 @@ const joinRoom = async (req, res) => {
{
roomNumber
:
user_Id
.
roomNumber
},
{
roomNumber
:
user_Id
.
roomNumber
},
{
where
:
{
id
:
userId
}
}
{
where
:
{
id
:
userId
}
}
);
);
res
.
json
(
true
)
res
.
json
(
true
)
;
}
else
{
}
else
{
return
res
.
status
(
422
).
send
(
"
이미 참여된 방입니다.
"
);
return
res
.
status
(
422
).
send
(
"
이미 참여된 방입니다.
"
);
}
}
...
@@ -44,17 +44,19 @@ const joinRoom = async (req, res) => {
...
@@ -44,17 +44,19 @@ const joinRoom = async (req, res) => {
};
};
const
upLoadRoomImg
=
multer
({
dest
:
"
roomUploads/
"
});
const
upLoadRoomImg
=
multer
({
dest
:
"
roomUploads/
"
});
const
roomImgUpload
=
upLoadRoomImg
.
fields
([{
name
:
"
profileimg
"
,
maxCount
:
1
}]);
const
roomImgUpload
=
upLoadRoomImg
.
fields
([
{
name
:
"
profileimg
"
,
maxCount
:
1
},
]);
const
createRoom
=
async
(
req
,
res
)
=>
{
const
createRoom
=
async
(
req
,
res
)
=>
{
const
{
userId
,
name
}
=
req
.
body
;
const
{
userId
,
name
}
=
req
.
body
;
const
avatar
=
req
.
files
[
"
profileimg
"
][
0
];
const
avatar
=
req
.
files
[
"
profileimg
"
][
0
];
const
img
=
avatar
.
filename
;
const
img
=
avatar
.
filename
;
const
id
=
nanoid
()
const
id
=
nanoid
()
;
const
Id
=
await
Room
.
findOne
({
where
:
{
id
:
id
}
});
const
Id
=
await
Room
.
findOne
({
where
:
{
id
:
id
}
});
// console.log('id:', id)
// console.log('id:', id)
while
(
Id
)
{
while
(
Id
)
{
const
id
=
nanoid
()
const
id
=
nanoid
()
;
const
Id
=
await
Room
.
findOne
({
where
:
{
id
:
id
}
});
const
Id
=
await
Room
.
findOne
({
where
:
{
id
:
id
}
});
}
}
try
{
try
{
...
@@ -68,21 +70,25 @@ const createRoom = async (req, res) => {
...
@@ -68,21 +70,25 @@ const createRoom = async (req, res) => {
owner
:
userId
,
owner
:
userId
,
member
:
[
userId
],
member
:
[
userId
],
profileimg
:
img
,
profileimg
:
img
,
}
}
;
// console.log('newRoom:', newRoom)
// console.log('newRoom:', newRoom)
await
Room
.
create
(
newRoom
);
await
Room
.
create
(
newRoom
);
//user.roomNumber에 id추가
//user.roomNumber에 id추가
const
user_Id
=
await
User
.
findOne
({
where
:
{
id
:
userId
}
});
const
user_Id
=
await
User
.
findOne
({
where
:
{
id
:
userId
}
});
if
(
user_Id
.
roomNumber
)
{
//다른 roomNumber가 이미 들어가 있는 경우 id추가
if
(
user_Id
.
roomNumber
)
{
user_Id
.
roomNumber
.
push
(
id
)
//다른 roomNumber가 이미 들어가 있는 경우 id추가
}
user_Id
.
roomNumber
.
push
(
id
);
else
{
//첫 roomNumber인 경우
}
else
{
user_Id
.
roomNumber
=
[
id
]
//첫 roomNumber인 경우
user_Id
.
roomNumber
=
[
id
];
}
}
// console.log('user_Id.roomNumber2:', user_Id.roomNumber)
// console.log('user_Id.roomNumber2:', user_Id.roomNumber)
await
User
.
update
({
'
roomNumber
'
:
user_Id
.
roomNumber
},
{
where
:
{
id
:
userId
}
})
await
User
.
update
(
res
.
json
(
newRoom
)
{
roomNumber
:
user_Id
.
roomNumber
},
{
where
:
{
id
:
userId
}
}
);
res
.
json
(
newRoom
);
}
catch
(
error
)
{
}
catch
(
error
)
{
console
.
log
(
error
);
console
.
log
(
error
);
res
.
status
(
500
).
send
(
"
방생성 에러
"
);
res
.
status
(
500
).
send
(
"
방생성 에러
"
);
...
@@ -94,7 +100,7 @@ const getRoom = async (req, res) => {
...
@@ -94,7 +100,7 @@ const getRoom = async (req, res) => {
try
{
try
{
const
roomlist
=
await
Room
.
findAll
({
where
:
{
id
:
req
.
body
}
});
const
roomlist
=
await
Room
.
findAll
({
where
:
{
id
:
req
.
body
}
});
// console.log(roomlist);
// console.log(roomlist);
res
.
json
(
roomlist
)
res
.
json
(
roomlist
)
;
}
catch
(
error
)
{
}
catch
(
error
)
{
console
.
log
(
error
);
console
.
log
(
error
);
res
.
status
(
500
).
send
(
"
에러
"
);
res
.
status
(
500
).
send
(
"
에러
"
);
...
@@ -102,46 +108,51 @@ const getRoom = async (req, res) => {
...
@@ -102,46 +108,51 @@ const getRoom = async (req, res) => {
};
};
const
exitRoom
=
async
(
req
,
res
)
=>
{
const
exitRoom
=
async
(
req
,
res
)
=>
{
const
{
id
,
roomId
}
=
req
.
params
const
{
id
,
roomId
}
=
req
.
params
;
console
.
log
(
id
,
roomId
)
console
.
log
(
id
,
roomId
)
;
const
room
=
await
Room
.
findOne
({
where
:
{
id
:
roomId
}
});
const
room
=
await
Room
.
findOne
({
where
:
{
id
:
roomId
}
});
console
.
log
(
room
.
member
)
console
.
log
(
room
.
member
)
;
const
index
=
room
.
member
.
indexOf
(
id
)
const
index
=
room
.
member
.
indexOf
(
id
)
;
console
.
log
(
'
index
'
,
index
)
console
.
log
(
"
index
"
,
index
)
;
room
.
member
.
splice
(
index
,
1
)
room
.
member
.
splice
(
index
,
1
)
;
await
Room
.
update
({
member
:
room
.
member
},
{
where
:
{
id
:
roomId
}
});
await
Room
.
update
({
member
:
room
.
member
},
{
where
:
{
id
:
roomId
}
});
const
user
=
await
User
.
findOne
({
where
:
{
id
:
id
}
});
const
user
=
await
User
.
findOne
({
where
:
{
id
:
id
}
});
console
.
log
(
user
.
roomNumber
)
console
.
log
(
user
.
roomNumber
)
;
const
index2
=
user
.
roomNumber
.
indexOf
(
id
)
const
index2
=
user
.
roomNumber
.
indexOf
(
id
)
;
console
.
log
(
'
index
'
,
index2
)
console
.
log
(
"
index
"
,
index2
)
;
user
.
roomNumber
.
splice
(
index2
,
1
)
user
.
roomNumber
.
splice
(
index2
,
1
)
;
await
User
.
update
({
roomNumber
:
user
.
roomNumber
},
{
where
:
{
id
:
id
}
});
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
(
"
에러
"
);
}
};
const
joinChannel
=
async
(
req
,
res
)
=>
{
const
joinChannel
=
async
(
req
,
res
)
=>
{
const
{
roomId
,
channelName
,
plusUser
,
index
}
=
req
.
body
const
{
roomId
,
channelName
,
plusUser
,
index
}
=
req
.
body
;
console
.
log
(
'
연결성공
'
)
const
room
=
await
Room
.
findOne
({
where
:
{
id
:
roomId
}
});
const
room
=
await
Room
.
findOne
({
where
:
{
id
:
roomId
}
});
room
.
channel
[
index
][
channelName
].
push
(
plusUser
)
room
.
channel
[
index
][
channelName
].
push
(
plusUser
);
console
.
log
(
'
확인2
'
,
room
.
channel
[
index
])
console
.
log
(
'
확인2
'
,
room
.
channel
)
await
Room
.
update
({
channel
:
room
.
channel
},
{
where
:
{
id
:
roomId
}
});
await
Room
.
update
({
channel
:
room
.
channel
},
{
where
:
{
id
:
roomId
}
});
return
res
.
json
(
true
)
return
res
.
json
(
true
)
;
}
}
;
const
doubleJoin
=
async
(
req
,
res
)
=>
{
const
doubleJoin
=
async
(
req
,
res
)
=>
{
console
.
log
(
'
연결성공
'
,
req
.
body
)
const
{
roomId
,
index1
,
index2
,
joinChName
}
=
req
.
body
;
const
{
roomId
,
index1
,
index2
,
joinChName
}
=
req
.
body
console
.
log
(
index1
)
const
room
=
await
Room
.
findOne
({
where
:
{
id
:
roomId
}
});
const
room
=
await
Room
.
findOne
({
where
:
{
id
:
roomId
}
});
console
.
log
(
room
.
channel
[
index1
][
joinChName
])
room
.
channel
[
index1
][
joinChName
].
splice
(
index2
,
1
);
room
.
channel
[
index1
][
joinChName
].
splice
(
index2
,
1
)
console
.
log
(
room
.
channel
[
index1
][
joinChName
])
console
.
log
(
'
room.channel
'
,
room
.
channel
)
await
Room
.
update
({
channel
:
room
.
channel
},
{
where
:
{
id
:
roomId
}
});
await
Room
.
update
({
channel
:
room
.
channel
},
{
where
:
{
id
:
roomId
}
});
return
res
.
json
(
true
)
return
res
.
json
(
true
)
;
}
}
;
// const makeChannel = async (req, res) => {
// const makeChannel = async (req, res) => {
// const { roomId, channelName } = req.body
// const { roomId, channelName } = req.body
...
@@ -149,5 +160,12 @@ const doubleJoin = async (req, res) => {
...
@@ -149,5 +160,12 @@ const doubleJoin = async (req, res) => {
// }
// }
export
default
{
export
default
{
joinRoom
,
roomImgUpload
,
createRoom
,
getRoom
,
exitRoom
,
joinChannel
,
doubleJoin
,
joinRoom
,
roomImgUpload
,
createRoom
,
getRoom
,
exitRoom
,
changename
,
joinChannel
,
doubleJoin
,
};
};
server/index.js
View file @
76c3e723
...
@@ -23,21 +23,21 @@ sequelize
...
@@ -23,21 +23,21 @@ sequelize
roomNumber
:
[
"
1234567abc
"
,
"
abc7654321
"
],
roomNumber
:
[
"
1234567abc
"
,
"
abc7654321
"
],
});
});
await
Room
.
create
({
//
await Room.create({
id
:
"
1234567abc
"
,
//
id: "1234567abc",
name
:
"
room
"
,
//
name: "room",
owner
:
8888
,
//
owner: 8888,
member
:
[
'
8888
'
,
'
9999
'
],
//
member: [8888],
profileimg
:
"
23bf0d83f161b5bf066f0a81beeb4e78
"
,
//
profileimg: "
defaultimg
",
});
//
});
await
Room
.
create
({
//
await Room.create({
id
:
"
abc7654321
"
,
//
id: "abc7654321",
name
:
"
room1
"
,
//
name: "room1",
owner
:
9999
,
//
owner: 9999,
member
:
[
'
9999
'
],
//
member: [9999],
profileimg
:
"
23bf0d83f161b5bf066f0a81beeb4e78
"
,
//
profileimg: "
defaultimg
",
});
//
});
app
.
listen
(
appConfig
.
port
,
()
=>
{
app
.
listen
(
appConfig
.
port
,
()
=>
{
console
.
log
(
`Server is running on port
${
appConfig
.
port
}
`
);
console
.
log
(
`Server is running on port
${
appConfig
.
port
}
`
);
...
...
server/routes/room.route.js
View file @
76c3e723
...
@@ -6,6 +6,7 @@ router.route("/getRoom").post(roomCrtl.getRoom);
...
@@ -6,6 +6,7 @@ router.route("/getRoom").post(roomCrtl.getRoom);
router
.
route
(
"
/exitRoom/:id/:roomId
"
).
delete
(
roomCrtl
.
exitRoom
);
router
.
route
(
"
/exitRoom/:id/:roomId
"
).
delete
(
roomCrtl
.
exitRoom
);
router
.
route
(
"
/create
"
).
post
(
roomCrtl
.
roomImgUpload
,
roomCrtl
.
createRoom
);
router
.
route
(
"
/create
"
).
post
(
roomCrtl
.
roomImgUpload
,
roomCrtl
.
createRoom
);
router
.
route
(
"
/join
"
).
put
(
roomCrtl
.
joinRoom
);
router
.
route
(
"
/join
"
).
put
(
roomCrtl
.
joinRoom
);
router
.
route
(
"
/changename
"
).
put
(
roomCrtl
.
changename
);
router
.
route
(
"
/joinChannel
"
).
post
(
roomCrtl
.
joinChannel
);
router
.
route
(
"
/joinChannel
"
).
post
(
roomCrtl
.
joinChannel
);
router
.
route
(
"
/doubleJoin
"
).
post
(
roomCrtl
.
doubleJoin
);
router
.
route
(
"
/doubleJoin
"
).
post
(
roomCrtl
.
doubleJoin
);
// router.route("/makeChannel").post(roomCrtl.makeChannel);
// router.route("/makeChannel").post(roomCrtl.makeChannel);
...
...
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