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
c5ab0718
Commit
c5ab0718
authored
Aug 04, 2021
by
우지원
Browse files
퇴장완료!예예~~~
parent
d8d3d203
Changes
7
Show whitespace changes
Inline
Side-by-side
client/src/apis/room.api.js
View file @
c5ab0718
...
@@ -5,6 +5,11 @@ const getRoom = async (id) => {
...
@@ -5,6 +5,11 @@ const getRoom = async (id) => {
return
data
;
return
data
;
};
};
const
exitRoom
=
async
(
ID
)
=>
{
const
{
data
}
=
await
axios
.
delete
(
`/api/room/exitRoom/
${
ID
.
id
}
/
${
ID
.
roomId
}
`
);
return
data
;
};
const
create
=
async
(
formData
)
=>
{
const
create
=
async
(
formData
)
=>
{
const
{
data
}
=
await
axios
.
post
(
"
/api/room/create
"
,
formData
);
const
{
data
}
=
await
axios
.
post
(
"
/api/room/create
"
,
formData
);
return
data
;
return
data
;
...
@@ -15,6 +20,6 @@ const join = async (payload) => {
...
@@ -15,6 +20,6 @@ const join = async (payload) => {
return
data
;
return
data
;
};
};
const
roomApi
=
{
getRoom
,
create
,
join
};
const
roomApi
=
{
getRoom
,
exitRoom
,
create
,
join
};
export
default
roomApi
;
export
default
roomApi
;
client/src/components/Home/RoomSingle.js
View file @
c5ab0718
...
@@ -6,7 +6,7 @@ import catchErrors from "../../context/catchError";
...
@@ -6,7 +6,7 @@ import catchErrors from "../../context/catchError";
const
id
=
localStorage
.
getItem
(
"
user
"
);
const
id
=
localStorage
.
getItem
(
"
user
"
);
const
INIT_ROOM
=
{
const
INIT_ROOM
=
{
roomId
:
""
,
roomId
:
""
,
name
:
""
,
name
:
""
,
profileimg
:
""
,
profileimg
:
""
,
member
:
""
,
member
:
""
,
...
@@ -15,7 +15,7 @@ const RoomSingle = () => {
...
@@ -15,7 +15,7 @@ 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
{
const
User
=
await
userApi
.
getUser
(
Id
);
const
User
=
await
userApi
.
getUser
(
Id
);
...
@@ -24,7 +24,7 @@ const RoomSingle = () => {
...
@@ -24,7 +24,7 @@ const RoomSingle = () => {
let
roomlist
=
[];
let
roomlist
=
[];
for
(
let
prop
in
Room
)
{
for
(
let
prop
in
Room
)
{
roomlist
.
push
({
roomlist
.
push
({
roomId
:
Room
[
prop
].
id
,
roomId
:
Room
[
prop
].
id
,
name
:
Room
[
prop
].
name
,
name
:
Room
[
prop
].
name
,
profileimg
:
Room
[
prop
].
profileimg
,
profileimg
:
Room
[
prop
].
profileimg
,
member
:
Room
[
prop
].
member
.
length
,
member
:
Room
[
prop
].
member
.
length
,
...
@@ -38,12 +38,15 @@ const RoomSingle = () => {
...
@@ -38,12 +38,15 @@ const RoomSingle = () => {
useEffect
(()
=>
{
useEffect
(()
=>
{
getJoinRoom
(
id
);
getJoinRoom
(
id
);
},
[
id
]);
},
[
id
]);
console
.
log
(
room
)
const
{
profileimg
}
=
room
;
const
{
profileimg
}
=
room
;
return
(
return
(
<
div
>
<
div
>
{
room
&&
{
room
&&
room
.
map
((
el
)
=>
(
room
.
map
((
el
)
=>
(
<
div
>
{
room
===
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
"
...
@@ -72,7 +75,8 @@ const RoomSingle = () => {
...
@@ -72,7 +75,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
>
);
);
...
...
client/src/components/Room/ChannelSingle.js
View file @
c5ab0718
import
{
Link
,
Route
,
Switch
,
useParams
}
from
"
react-router-dom
"
;
import
{
Link
,
useParams
}
from
'
react-router-dom
'
const
ChannelSingle
=
(
props
)
=>
{
const
ChannelSingle
=
(
props
)
=>
{
const
{
roomId
}
=
useParams
();
const
{
roomId
,
channelId
}
=
useParams
()
console
.
log
(
"
props
"
,
props
.
channel
);
console
.
log
(
'
props
'
,
props
.
channel
)
console
.
log
(
'
hi
'
,
channelId
)
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
)
=>
(
<
div
className
=
"
mb-3
"
>
<
div
className
=
"
mb-3
"
>
<
Link
to
=
{
`
${
roomId
}
/
${
el
.
channelName
}
`
}
>
<
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
'
}}
>
>
{
el
.
channelName
===
channelId
?
(
<
img
<
img
className
=
"
col-auto mt-2
"
className
=
"
col-auto mt-2
"
src
=
"
/fullSpeaker.png
"
src
=
"
/fullSpeaker.png
"
width
=
"
25px
"
width
=
"
25px
"
height
=
"
25px
"
height
=
"
25px
"
/>
/>
<
h5
className
=
"
col mt-2
"
style
=
{{
color
:
"
black
"
}}
>
)
:
(
<
img
className
=
"
col-auto mt-2
"
src
=
"
/emptySpeaker.png
"
width
=
"
25px
"
height
=
"
25px
"
/>
)}
<
h5
className
=
"
col mt-2
"
style
=
{{
color
:
'
black
'
}}
>
{
el
.
channelName
}
{
el
.
channelName
}
<
/h5
>
<
/h5
>
<
/div>
{" "
}
<
/div
>
<
/Link
>
<
/Link
>
{
el
.
joinName
&&
{
el
.
joinName
&&
el
.
joinName
.
map
((
e
)
=>
(
el
.
joinName
.
map
((
e
)
=>
(
<
div
>
<
div
>
<
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
>
<
/li
>
<
/li
>
<
/ul
>
<
/ul
>
<
/div
>
<
/div
>
...
@@ -39,7 +49,7 @@ const ChannelSingle = (props) => {
...
@@ -39,7 +49,7 @@ const ChannelSingle = (props) => {
))}
))}
<
/div
>
<
/div
>
<
/div
>
<
/div
>
)
;
)
}
;
}
export
default
ChannelSingle
;
export
default
ChannelSingle
\ No newline at end of file
client/src/components/Room/RightHamburger.js
View file @
c5ab0718
import
{
useState
,
useEffect
}
from
"
react
"
;
import
{
useState
,
useEffect
}
from
"
react
"
;
import
{
useParams
}
from
"
react-router-dom
"
;
import
{
Link
,
useParams
}
from
"
react-router-dom
"
;
import
ChannelSingle
from
"
./ChannelSingle
"
;
import
ChannelSingle
from
"
./ChannelSingle
"
;
import
Rightimg
from
"
../../images/RightHamburgerImg.png
"
;
import
Rightimg
from
"
../../images/RightHamburgerImg.png
"
;
import
RoomApi
from
"
../../apis/room.api
"
;
import
RoomApi
from
"
../../apis/room.api
"
;
...
@@ -10,42 +10,40 @@ const INIT_CHANNEL = {
...
@@ -10,42 +10,40 @@ const INIT_CHANNEL = {
channelName
:
""
,
channelName
:
""
,
joinName
:
[],
joinName
:
[],
};
};
const
INIT_ROOM
=
{
name
:
""
,
};
const
RightHamburger
=
()
=>
{
const
RightHamburger
=
()
=>
{
const
[
channel
,
setChannel
]
=
useState
([
INIT_CHANNEL
]);
const
[
channel
,
setChannel
]
=
useState
([
INIT_CHANNEL
]);
const
[
room
,
setRoom
]
=
useState
([
INIT_ROOM
]);
const
{
roomId
}
=
useParams
();
const
{
roomId
}
=
useParams
();
const
[
error
,
setError
]
=
useState
(
""
);
const
[
error
,
setError
]
=
useState
(
""
);
const
id
=
localStorage
.
getItem
(
'
user
'
);
async
function
getroom
(
Id
)
{
async
function
exitRoom
()
{
console
.
log
(
'
id, roomid정보
'
,
id
,
roomId
)
try
{
try
{
const
Room
=
await
roomApi
.
g
etRoom
(
[
Id
]);
const
data
=
await
roomApi
.
e
xi
tRoom
(
{
id
,
roomId
})
setRoom
({...
room
,
name
:
Room
[
0
].
name
}
)
console
.
log
(
data
)
}
catch
(
error
)
{
}
catch
(
error
)
{
catchErrors
(
error
,
setError
);
catchErrors
(
error
,
setError
);
}
}
}
}
async
function
getChannel
(
roomId
)
{
async
function
getChannel
(
roomId
)
{
// console.log('roomId', roomId)
// console.log('roomId', roomId)
const
ID
=
roomId
;
const
ID
=
roomId
try
{
try
{
const
data
=
await
roomApi
.
getRoom
([
ID
]);
const
data
=
await
roomApi
.
getRoom
([
ID
]);
const
Channel
=
data
[
0
].
channel
;
const
Channel
=
data
[
0
].
channel
//
console.log('방데이터:', Channel)
console
.
log
(
'
방데이터:
'
,
Channel
)
const
channelList
=
[];
const
channelList
=
[];
for
(
const
prop
in
Channel
)
{
for
(
const
prop
in
Channel
)
{
// Channel의 항목(prop)으로 작업을 실행합니다
// Channel의 항목(prop)으로 작업을 실행합니다
for
(
const
key
in
Channel
[
prop
])
{
for
(
const
key
in
Channel
[
prop
])
{
//
console.log(key)
console
.
log
(
key
)
//
console.log(prop)
console
.
log
(
prop
)
//
console.log(Channel[prop][key])
console
.
log
(
Channel
[
prop
][
key
])
channelList
.
push
({
channelList
.
push
({
channelName
:
key
,
channelName
:
key
,
joinName
:
Channel
[
prop
][
key
]
,
joinName
:
Channel
[
prop
][
key
]
});
});
}
}
}
}
...
@@ -57,16 +55,9 @@ const RightHamburger = () => {
...
@@ -57,16 +55,9 @@ const RightHamburger = () => {
// console.log(channel)
// console.log(channel)
useEffect
(()
=>
{
useEffect
(()
=>
{
// console.log('roomId', roomId)
getChannel
(
roomId
);
getChannel
(
roomId
);
getroom
(
roomId
)
},
[
roomId
]);
},
[
roomId
]);
function
roomIdCopy
()
{
const
t
=
document
.
querySelector
(
"
#roomId
"
).
innerText
;
console
.
log
(
t
);
navigator
.
clipboard
.
writeText
(
t
);
document
.
execCommand
(
"
copy
"
);
}
return
(
return
(
<
div
>
<
div
>
<
div
>
<
div
>
...
@@ -103,7 +94,7 @@ const RightHamburger = () => {
...
@@ -103,7 +94,7 @@ const RightHamburger = () => {
color
:
"
#000000
"
,
color
:
"
#000000
"
,
}}
}}
>
>
{
r
oom
.
name
}
방
이름
{
/*R
oom.name
*/
}
<
/p
>
<
/p
>
<
h6
className
=
"
mt-2
"
id
=
"
roomId
"
>
<
h6
className
=
"
mt-2
"
id
=
"
roomId
"
>
{
"
"
}
{
"
"
}
...
@@ -120,77 +111,6 @@ const RightHamburger = () => {
...
@@ -120,77 +111,6 @@ const RightHamburger = () => {
<
ChannelSingle
channel
=
{
channel
}
/
>
<
ChannelSingle
channel
=
{
channel
}
/
>
<
div
>
<
div
>
<
div
className
=
"
d-flex flex-row-reverse
"
>
<
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
>
<
button
<
button
type
=
"
button
"
type
=
"
button
"
className
=
"
m-3 rounded text-white
"
className
=
"
m-3 rounded text-white
"
...
@@ -244,18 +164,21 @@ const RightHamburger = () => {
...
@@ -244,18 +164,21 @@ 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
"
>
{
/* <Link to="/user/:id"> */
}
<
Link
to
=
{
`/user/
${
id
}
`
}
className
=
"
col-2 p-1 btn btn-primary
"
>
{
/* <div onSubmit={exitSubmit}> */
}
<
button
<
button
type
=
"
submit
"
type
=
"
button
"
className
=
"
col-2 p-1 btn btn-primary
"
onClick
=
{
exitRoom
}
className
=
"
btn btn-primary
"
data
-
bs
-
dismiss
=
"
modal
"
data
-
bs
-
dismiss
=
"
modal
"
>
>
예
예
<
/button
>
<
/button
>
{
/* </Link> */
}
{
/* </div> */
}
<
/Link
>
<
button
<
button
type
=
"
submit
"
type
=
"
submit
"
className
=
"
col-2 p-1
btn btn-primary
"
className
=
"
btn btn-primary
"
data
-
bs
-
dismiss
=
"
modal
"
data
-
bs
-
dismiss
=
"
modal
"
>
>
아니요
아니요
...
@@ -269,8 +192,6 @@ const RightHamburger = () => {
...
@@ -269,8 +192,6 @@ const RightHamburger = () => {
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
);
);
};
};
...
...
server/controllers/room.controller.js
View file @
c5ab0718
...
@@ -2,7 +2,6 @@ import { Room, User } from "../models/index.js";
...
@@ -2,7 +2,6 @@ import { Room, User } from "../models/index.js";
import
{
customAlphabet
}
from
"
nanoid
"
;
import
{
customAlphabet
}
from
"
nanoid
"
;
import
isLength
from
"
validator/lib/isLength.js
"
;
import
isLength
from
"
validator/lib/isLength.js
"
;
import
RoomModel
from
"
../models/room.model.js
"
;
import
RoomModel
from
"
../models/room.model.js
"
;
import
multer
from
"
multer
"
;
const
nanoid
=
customAlphabet
(
"
1234567890abcdef
"
,
10
);
const
nanoid
=
customAlphabet
(
"
1234567890abcdef
"
,
10
);
...
@@ -44,6 +43,7 @@ const joinRoom = async (req, res) => {
...
@@ -44,6 +43,7 @@ const joinRoom = async (req, res) => {
}
}
};
};
const
multer
=
require
(
"
multer
"
);
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
}]);
...
@@ -91,10 +91,10 @@ const createRoom = async (req, res) => {
...
@@ -91,10 +91,10 @@ const createRoom = async (req, res) => {
};
};
const
getRoom
=
async
(
req
,
res
)
=>
{
const
getRoom
=
async
(
req
,
res
)
=>
{
console
.
log
(
"
fhgfghdgfdgf:
"
,
req
.
body
);
//
console.log("fhgfghdgfdgf:", req.body);
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
);
...
@@ -102,6 +102,24 @@ const getRoom = async (req, res) => {
...
@@ -102,6 +102,24 @@ const getRoom = async (req, res) => {
}
}
};
};
const
exitRoom
=
async
(
req
,
res
)
=>
{
const
{
id
,
roomId
}
=
req
.
params
console
.
log
(
id
,
roomId
)
const
room
=
await
Room
.
findOne
({
where
:
{
id
:
roomId
}
});
console
.
log
(
room
.
member
)
const
index
=
room
.
member
.
indexOf
(
id
)
console
.
log
(
'
index
'
,
index
)
room
.
member
.
splice
(
index
,
1
)
await
Room
.
update
({
member
:
room
.
member
},
{
where
:
{
id
:
roomId
}
});
const
user
=
await
User
.
findOne
({
where
:
{
id
:
id
}
});
console
.
log
(
user
.
roomNumber
)
const
index2
=
user
.
roomNumber
.
indexOf
(
id
)
console
.
log
(
'
index
'
,
index2
)
user
.
roomNumber
.
splice
(
index2
,
1
)
await
User
.
update
({
roomNumber
:
user
.
roomNumber
},
{
where
:
{
id
:
id
}
});
}
export
default
{
export
default
{
joinRoom
,
roomImgUpload
,
createRoom
,
getRoom
joinRoom
,
roomImgUpload
,
createRoom
,
getRoom
,
exitRoom
,
};
};
server/index.js
View file @
c5ab0718
...
@@ -27,7 +27,7 @@ sequelize
...
@@ -27,7 +27,7 @@ sequelize
id
:
"
1234567abc
"
,
id
:
"
1234567abc
"
,
name
:
"
room
"
,
name
:
"
room
"
,
owner
:
8888
,
owner
:
8888
,
member
:
[
8888
],
member
:
[
'
8888
'
,
'
9999
'
],
profileimg
:
"
defaultimg
"
,
profileimg
:
"
defaultimg
"
,
});
});
...
@@ -35,7 +35,7 @@ sequelize
...
@@ -35,7 +35,7 @@ sequelize
id
:
"
abc7654321
"
,
id
:
"
abc7654321
"
,
name
:
"
room1
"
,
name
:
"
room1
"
,
owner
:
9999
,
owner
:
9999
,
member
:
[
9999
],
member
:
[
'
9999
'
],
profileimg
:
"
defaultimg
"
,
profileimg
:
"
defaultimg
"
,
});
});
...
...
server/models/room.model.js
View file @
c5ab0718
import
pkg
from
'
sequelize
'
;
import
{
DataTypes
}
from
"
sequelize
"
;
const
{
DataTypes
}
=
pkg
;
const
RoomModel
=
(
sequelize
)
=>
{
const
RoomModel
=
(
sequelize
)
=>
{
const
Room
=
sequelize
.
define
(
const
Room
=
sequelize
.
define
(
...
@@ -16,7 +15,7 @@ const RoomModel = (sequelize) => {
...
@@ -16,7 +15,7 @@ const RoomModel = (sequelize) => {
type
:
DataTypes
.
INTEGER
,
type
:
DataTypes
.
INTEGER
,
},
},
member
:
{
member
:
{
type
:
DataTypes
.
ARRAY
(
DataTypes
.
INTEGER
),
type
:
DataTypes
.
ARRAY
(
DataTypes
.
STRING
),
//type: DataTypes.STRING,
//type: DataTypes.STRING,
},
},
profileimg
:
{
profileimg
:
{
...
...
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