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
e74098fc
Commit
e74098fc
authored
Aug 04, 2021
by
이재연
Browse files
거의다아다다ㅏ다다닫다다다다닫다
parents
bbc945b7
93d06f1e
Changes
7
Hide whitespace changes
Inline
Side-by-side
client/src/apis/room.api.js
View file @
e74098fc
...
...
@@ -5,6 +5,11 @@ const getRoom = async (id) => {
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
{
data
}
=
await
axios
.
post
(
"
/api/room/create
"
,
formData
);
return
data
;
...
...
@@ -15,6 +20,6 @@ const join = async (payload) => {
return
data
;
};
const
roomApi
=
{
getRoom
,
create
,
join
};
const
roomApi
=
{
getRoom
,
exitRoom
,
create
,
join
};
export
default
roomApi
;
client/src/components/Home/RoomSingle.js
View file @
e74098fc
...
...
@@ -6,7 +6,7 @@ import catchErrors from "../../context/catchError";
const
id
=
localStorage
.
getItem
(
"
user
"
);
const
INIT_ROOM
=
{
roomId
:
""
,
roomId
:
""
,
name
:
""
,
profileimg
:
""
,
member
:
""
,
...
...
@@ -15,7 +15,7 @@ const RoomSingle = () => {
const
[
room
,
setRoom
]
=
useState
([
INIT_ROOM
]);
const
[
error
,
setError
]
=
useState
(
""
);
const
channelId
=
'
main
'
;
const
{
roomId
}
=
useParams
(
room
.
roomId
);
const
{
roomId
}
=
useParams
(
room
.
roomId
);
async
function
getJoinRoom
(
Id
)
{
try
{
const
User
=
await
userApi
.
getUser
(
Id
);
...
...
@@ -24,7 +24,7 @@ const RoomSingle = () => {
let
roomlist
=
[];
for
(
let
prop
in
Room
)
{
roomlist
.
push
({
roomId
:
Room
[
prop
].
id
,
roomId
:
Room
[
prop
].
id
,
name
:
Room
[
prop
].
name
,
profileimg
:
Room
[
prop
].
profileimg
,
member
:
Room
[
prop
].
member
.
length
,
...
...
@@ -38,41 +38,45 @@ const RoomSingle = () => {
useEffect
(()
=>
{
getJoinRoom
(
id
);
},
[
id
]);
console
.
log
(
room
)
const
{
profileimg
}
=
room
;
return
(
<
div
>
{
room
&&
room
.
map
((
el
)
=>
(
<
Link
to
=
{
`/room/
${
el
.
roomId
}
/main`
}
className
=
"
text-decoration-none text-dark
"
>
<
div
className
=
"
d-flex mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
<
div
>
{
room
===
INIT_ROOM
?
(
<
div
><
/div>
)
:
(
<
Link
to
=
{
`/room/
${
el
.
roomId
}
/
${
channelId
}
`
}
className
=
"
text-decoration-none text-dark
"
>
<
div
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
>
<
img
src
=
{
`/roomUploads/
${
el
.
profileimg
}
`
}
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/
>
<
/div
>
<
div
className
=
"
mx-3 mt-2
"
style
=
{{
width
:
"
250px
"
,
overflow
:
"
scroll
"
,
whiteSpace
:
"
nowrap
"
,
msOverflowStyle
:
"
none
"
,
}}
className
=
"
d-flex mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
{
el
.
name
}
<
div
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
>
<
img
src
=
{
`/roomUploads/
${
el
.
profileimg
}
`
}
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/
>
<
/div
>
<
div
className
=
"
mx-3 mt-2
"
style
=
{{
width
:
"
250px
"
,
overflow
:
"
scroll
"
,
whiteSpace
:
"
nowrap
"
,
msOverflowStyle
:
"
none
"
,
}}
>
{
el
.
name
}
<
/div
>
<
div
className
=
"
ms-auto mt-2
"
>
{
el
.
member
}
/100 </
div
>
<
/div
>
<
div
className
=
"
ms-auto mt-2
"
>
{
el
.
member
}
/100 </
div
>
<
/div
>
<
/Link
>
<
/Link>
)
}
<
/div
>
))}
<
/div
>
);
...
...
client/src/components/Room/ChannelSingle.js
View file @
e74098fc
import
{
Link
,
Route
,
Switch
,
useParams
}
from
'
react-router-dom
'
import
{
Link
,
useParams
}
from
'
react-router-dom
'
const
ChannelSingle
=
(
props
)
=>
{
const
{
roomId
,
channelId
}
=
useParams
()
...
...
client/src/components/Room/RightHamburger.js
View file @
e74098fc
import
{
useState
,
useEffect
}
from
"
react
"
;
import
{
useParams
}
from
"
react-router-dom
"
;
import
{
Link
,
useParams
}
from
"
react-router-dom
"
;
import
ChannelSingle
from
"
./ChannelSingle
"
;
import
RoomApi
from
"
../../apis/room.api
"
;
import
roomApi
from
"
../../apis/room.api
"
;
import
catchErrors
from
"
../../context/catchError
"
;
const
INIT_CHANNEL
=
{
channelName
:
""
,
joinName
:
[],
};
const
INIT_ROOM
=
{
name
:
""
,
channelName
:
""
,
joinName
:
[],
};
const
RightHamburger
=
()
=>
{
const
[
channel
,
setChannel
]
=
useState
([
INIT_CHANNEL
]);
const
[
room
,
setRoom
]
=
useState
([
INIT_ROOM
]);
const
{
roomId
}
=
useParams
();
const
[
error
,
setError
]
=
useState
(
""
);
const
[
channel
,
setChannel
]
=
useState
([
INIT_CHANNEL
]);
const
{
roomId
}
=
useParams
();
const
[
error
,
setError
]
=
useState
(
""
);
const
id
=
localStorage
.
getItem
(
'
user
'
);
async
function
exitRoom
()
{
console
.
log
(
'
id, roomid정보
'
,
id
,
roomId
)
try
{
const
data
=
await
roomApi
.
exitRoom
({
id
,
roomId
})
console
.
log
(
data
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
);
}
async
function
getroom
(
Id
)
{
try
{
const
Room
=
await
roomApi
.
getRoom
([
Id
]);
setRoom
({...
room
,
name
:
Room
[
0
].
name
})
}
catch
(
error
)
{
catchErrors
(
error
,
setError
);
}
}
async
function
getChannel
(
roomId
)
{
// console.log('roomId', roomId)
const
ID
=
roomId
;
try
{
const
data
=
await
roomApi
.
getRoom
([
ID
]);
const
Channel
=
data
[
0
].
channel
;
// console.log('방데이터:', Channel)
const
channelList
=
[];
for
(
const
prop
in
Channel
)
{
// Channel의 항목(prop)으로 작업을 실행합니다
for
(
const
key
in
Channel
[
prop
])
{
// console.log(key)
// console.log(prop)
// console.log(Channel[prop][key])
channelList
.
push
({
channelName
:
key
,
joinName
:
Channel
[
prop
][
key
],
});
async
function
getChannel
(
roomId
)
{
// console.log('roomId', roomId)
const
ID
=
roomId
try
{
const
data
=
await
roomApi
.
getRoom
([
ID
]);
const
Channel
=
data
[
0
].
channel
console
.
log
(
'
방데이터:
'
,
Channel
)
const
channelList
=
[];
for
(
const
prop
in
Channel
)
{
// Channel의 항목(prop)으로 작업을 실행합니다
for
(
const
key
in
Channel
[
prop
])
{
console
.
log
(
key
)
console
.
log
(
prop
)
console
.
log
(
Channel
[
prop
][
key
])
channelList
.
push
({
channelName
:
key
,
joinName
:
Channel
[
prop
][
key
]
});
}
}
setChannel
(
channelList
);
}
catch
(
error
)
{
catchErrors
(
error
,
setError
);
}
}
setChannel
(
channelList
);
}
catch
(
error
)
{
catchErrors
(
error
,
setError
);
}
}
// console.log(channel)
useEffect
(()
=>
{
...
...
@@ -115,97 +114,40 @@ const RightHamburger = () => {
aria
-
label
=
"
Close
"
><
/button
>
<
/div
>
<
ChannelSingle
channel
=
{
channel
}
/
>
<
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
>
<
button
type
=
"
button
"
className
=
"
m-3 rounded text-white
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#exitRoom
"
style
=
{{
height
:
"
30px
"
,
fontWeight
:
"
bold
"
,
backgroundColor
:
"
#d86da6
"
,
color
:
"
black
"
,
border
:
"
1px #d86da6
"
,
}}
className
=
"
navbar-toggler
"
type
=
"
button
"
data
-
bs
-
toggle
=
"
offcanvas
"
data
-
bs
-
target
=
"
#right-hamburger
"
aria
-
controls
=
"
right-hamburger
"
aria
-
expanded
=
"
false
"
aria
-
label
=
"
Toggle navigation
"
style
=
{{
border
:
"
#f4c1f2
"
}}
>
퇴장
<
img
src
=
{
Rightimg
}
width
=
"
50px
"
height
=
"
30px
"
/>
<
/button
>
{
/* {admin ? (
<
/div
>
<
ChannelSingle
channel
=
{
channel
}
/
>
<
div
>
<
div
className
=
"
d-flex flex-row-reverse
"
>
<
button
type
=
"
button
"
className
=
"
m-3 rounded text-white
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#exitRoom
"
style
=
{{
height
:
"
30px
"
,
fontWeight
:
"
bold
"
,
backgroundColor
:
"
#d86da6
"
,
color
:
"
black
"
,
border
:
"
1px #d86da6
"
,
}}
>
퇴장
<
/button
>
{
/* {admin ? (
<button
type="button"
className="m-3 rounded"
...
...
@@ -221,56 +163,116 @@ const RightHamburger = () => {
</button>
) : null} */
}
<
div
className
=
"
modal fade
"
id
=
"
exitRoom
"
tabIndex
=
"
-1
"
aria
-
labelledby
=
"
exitRoomLabel
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
modal-header
"
>
<
div
className
=
"
modal fade
"
id
=
"
exitRoom
"
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
"
>
<
Link
to
=
{
`/user/
${
id
}
`
}
className
=
"
col-2 p-1 btn btn-primary
"
>
<
button
type
=
"
button
"
onClick
=
{
exitRoom
}
className
=
"
btn btn-primary
"
data
-
bs
-
dismiss
=
"
modal
"
>
예
<
/button
>
<
/Link
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
data
-
bs
-
dismiss
=
"
modal
"
>
아니요
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
d-flex flex-row-reverse
"
>
<
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
"
>
{
/* <Link to="/user/:id"> */
}
<
button
type
=
"
submit
"
className
=
"
col-2 p-1 btn btn-primary
"
data
-
bs
-
dismiss
=
"
modal
"
>
예
<
/button
>
{
/* </Link> */
}
<
button
type
=
"
submit
"
className
=
"
col-2 p-1 btn btn-primary
"
data
-
bs
-
dismiss
=
"
modal
"
>
아니요
<
/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
-
dismiss
=
"
modal
"
style
=
{{
width
:
"
120px
"
}}
onClick
=
{
roomIdCopy
}
>
방
Id
복사
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
);
};
);
};
export
default
RightHamburger
;
export
default
RightHamburger
;
\ No newline at end of file
server/controllers/room.controller.js
View file @
e74098fc
...
...
@@ -2,7 +2,6 @@ import { Room, User } from "../models/index.js";
import
{
customAlphabet
}
from
"
nanoid
"
;
import
isLength
from
"
validator/lib/isLength.js
"
;
import
RoomModel
from
"
../models/room.model.js
"
;
import
multer
from
"
multer
"
;
const
nanoid
=
customAlphabet
(
"
1234567890abcdef
"
,
10
);
...
...
@@ -44,6 +43,7 @@ const joinRoom = async (req, res) => {
}
};
const
multer
=
require
(
"
multer
"
);
const
upLoadRoomImg
=
multer
({
dest
:
"
roomUploads/
"
});
const
roomImgUpload
=
upLoadRoomImg
.
fields
([{
name
:
"
profileimg
"
,
maxCount
:
1
}]);
...
...
@@ -91,10 +91,10 @@ const createRoom = async (req, res) => {
};
const
getRoom
=
async
(
req
,
res
)
=>
{
console
.
log
(
"
fhgfghdgfdgf:
"
,
req
.
body
);
//
console.log("fhgfghdgfdgf:", req.body);
try
{
const
roomlist
=
await
Room
.
findAll
({
where
:
{
id
:
req
.
body
}
});
console
.
log
(
roomlist
);
const
roomlist
=
await
Room
.
findAll
({
where
:
{
id
:
req
.
body
}
});
//
console.log(roomlist);
res
.
json
(
roomlist
)
}
catch
(
error
)
{
console
.
log
(
error
);
...
...
@@ -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
{
joinRoom
,
roomImgUpload
,
createRoom
,
getRoom
joinRoom
,
roomImgUpload
,
createRoom
,
getRoom
,
exitRoom
,
};
server/models/room.model.js
View file @
e74098fc
import
pkg
from
'
sequelize
'
;
const
{
DataTypes
}
=
pkg
;
import
{
DataTypes
}
from
"
sequelize
"
;
const
RoomModel
=
(
sequelize
)
=>
{
const
Room
=
sequelize
.
define
(
...
...
@@ -16,7 +15,7 @@ const RoomModel = (sequelize) => {
type
:
DataTypes
.
INTEGER
,
},
member
:
{
type
:
DataTypes
.
ARRAY
(
DataTypes
.
INTEGER
),
type
:
DataTypes
.
ARRAY
(
DataTypes
.
STRING
),
//type: DataTypes.STRING,
},
profileimg
:
{
...
...
server/routes/room.route.js
View file @
e74098fc
...
...
@@ -3,7 +3,8 @@ import roomCrtl from "../controllers/room.controller.js";
const
router
=
express
.
Router
();
router
.
route
(
"
/getRoom
"
).
post
(
roomCrtl
.
getRoom
);
router
.
route
(
"
/exitRoom/:id/:roomId
"
).
delete
(
roomCrtl
.
exitRoom
);
router
.
route
(
"
/create
"
).
post
(
roomCrtl
.
roomImgUpload
,
roomCrtl
.
createRoom
);
router
.
route
(
"
/join
"
).
put
(
roomCrtl
.
joinRoom
);
export
default
router
;
export
default
router
;
\ No newline at end of file
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