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
878528b8
Commit
878528b8
authored
Jul 23, 2021
by
Kim, Chaerin
Browse files
Merge remote-tracking branch 'origin/jiweon827' into merge
parents
c00faaf3
75d06d23
Changes
17
Hide whitespace changes
Inline
Side-by-side
client/src/apis/room.api.js
View file @
878528b8
import
axios
from
"
axios
"
;
const
login
=
async
(
payload
)
=>
{
const
{
data
}
=
await
axios
.
post
(
"
/api/
login
"
,
payload
);
const
create
=
async
(
payload
)
=>
{
const
{
data
}
=
await
axios
.
post
(
"
/api/
room/create
"
,
payload
);
return
data
;
};
const
signup
=
async
(
payload
)
=>
{
const
{
data
}
=
await
axios
.
p
os
t
(
"
/api/
signup
"
,
payload
);
const
join
=
async
(
payload
)
=>
{
const
{
data
}
=
await
axios
.
p
u
t
(
"
/api/
room/join
"
,
payload
);
return
data
;
};
const
roomApi
=
{
login
,
signup
};
const
roomApi
=
{
create
,
join
};
export
default
roomApi
;
client/src/components/Home/AddRoom.js
View file @
878528b8
import
CreateRoom
from
"
./CreateRoom
"
;
import
JoinRoom
from
"
./JoinRoom
"
;
const
AddRoom
=
()
=>
{
return
(
<
div
>
...
...
@@ -50,11 +53,19 @@ const AddRoom = () => {
backgroundColor
:
"
#E0CEE8
"
,
borderColor
:
"
#E0CEE8
"
,
}}
>
방참여하기
<
/button
>
<
div
className
=
"
modal fade
"
id
=
"
joinModal
"
tabIndex
=
"
-1
"
aria
-
labelledby
=
"
joinModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
style
=
{{
width
:
"
6rem
"
}}
>
방참여하기
<
div
className
=
"
modal-dialog
"
>
<
JoinRoom
/>
<
/div
>
<
/
button
>
<
/
div
>
<
/div
>
<
div
className
=
"
col-6 d-flex justify-content-center
"
>
<
button
...
...
@@ -70,88 +81,25 @@ const AddRoom = () => {
backgroundColor
:
"
#f5cfe3
"
,
borderColor
:
"
#f5cfe3
"
,
}}
>
방생성하기
<
/button
>
<
div
className
=
"
modal fade
"
id
=
"
makeModal
"
tabIndex
=
"
-1
"
aria
-
labelledby
=
"
makeModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
style
=
{{
width
:
"
6rem
"
}}
>
방생성하기
<
div
className
=
"
modal-dialog
"
>
<
CreateRoom
/>
<
/div
>
<
/
button
>
<
/
div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
{
/* 방참여하기 모달 */
}
<
div
className
=
"
modal
"
id
=
"
joinModal
"
tabIndex
=
"
-1
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
modal-header
"
>
<
div
>
방참여하기
<
/div
>
<
button
type
=
"
button
"
className
=
"
btn-close
"
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
><
/button
>
<
/div
>
<
div
className
=
"
modal-body
"
>
<
div
className
=
"
input-group mb-3
"
>
<
input
type
=
"
text
"
className
=
"
form-control
"
placeholder
=
"
참여코드를 입력하세요
"
aria
-
label
=
"
참여코드를 입력하세요
"
aria
-
describedby
=
"
basic-addon1
"
/>
<
/div
>
<
div
className
=
"
modal-footer
"
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
>
확인
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
{
/* 방생성하기 모달 */
}
<
div
className
=
"
modal
"
id
=
"
makeModal
"
tabIndex
=
"
-1
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
modal-header
"
>
<
div
>
방생성하기
<
/div
>
<
button
type
=
"
button
"
className
=
"
btn-close
"
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
><
/button
>
<
/div
>
<
div
className
=
"
modal-body
"
>
<
h6
>
방프로필사진
<
/h6
>
<
div
className
=
"
mb-4
"
>
<
input
type
=
"
file
"
className
=
"
upload-hidden
"
/>
<
/div
>
<
h6
>
방이름
<
/h6
>
<
div
className
=
"
input-group
"
>
<
input
type
=
"
text
"
className
=
"
form-control
"
placeholder
=
"
방이름을 입력해주세요
"
aria
-
label
=
"
방이름 입력해주세요
"
aria
-
describedby
=
"
basic-addon1
"
/>
<
/div
>
<
div
className
=
"
modal-footer
"
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
>
생성
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
);
};
...
...
client/src/components/Home/CreateRoom.js
0 → 100644
View file @
878528b8
import
{
useEffect
,
useState
}
from
"
react
"
;
import
roomApi
from
"
../../apis/room.api
"
;
const
userId
=
localStorage
.
getItem
(
'
user
'
);
console
.
log
(
userId
)
const
INIT_ROOM
=
{
name
:
''
,
profileimg
:
''
,
channel
:
[
'
회의
'
],
}
const
CreateRoom
=
()
=>
{
const
[
room
,
setRoom
]
=
useState
(
INIT_ROOM
)
const
[
error
,
setError
]
=
useState
(
""
);
const
[
success
,
setSuccess
]
=
useState
(
false
)
const
[
disabled
,
setDisabled
]
=
useState
(
true
)
useEffect
(()
=>
{
const
isRoom
=
Object
.
values
(
roomApi
).
every
((
el
)
=>
Boolean
(
el
));
isRoom
?
setDisabled
(
false
)
:
setDisabled
(
true
);
},
[
room
]);
// const userId = localStorage.getItem('user');
// setRoom({...room, owner: userId})
// setRoom({...room, member: userId})
function
handleChange
(
event
)
{
console
.
log
(
room
)
const
{
name
,
value
}
=
event
.
target
setRoom
({
...
room
,
[
name
]:
value
})
}
console
.
log
(
room
)
async
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
console
.
log
(
'
룸룸
'
,
room
)
try
{
const
res
=
await
roomApi
.
create
(
room
)
// console.log(res)
const
Id
=
res
.
id
// console.log(Id)
//alert(`방참여코드는 ${Id}입니다`)
//setSuccess(true)
}
catch
(
error
)
{
// catchErrors(error, setError);
}
finally
{
// setLoading(false);
}
}
if
(
success
)
{
console
.
log
(
'
success
'
,
success
)
alert
(
'
룸생성이 완료되었습니다!
'
)
//return <Redirect to='/' />
}
const
{
name
,
owner
,
member
,
profileimg
}
=
room
;
return
(
<
div
className
=
"
modal-content
"
>
<
form
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
"
modal-header
"
>
<
div
className
=
"
modal-title
"
id
=
"
makeModal
"
>
방생성하기
<
/div
>
<
button
type
=
"
button
"
className
=
"
btn-close
"
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
><
/button
>
<
/div
>
<
div
className
=
"
modal-body
"
>
<
h6
>
방프로필사진
<
/h6
>
<
div
className
=
"
mb-4
"
>
<
input
type
=
"
file
"
className
=
"
upload-hidden
"
onChange
=
{
handleChange
}
accept
=
"
image/*
"
name
=
"
profileimg
"
value
=
{
room
.
profileimg
}
/
>
<
/div
>
<
h6
>
방이름
<
/h6
>
<
div
className
=
"
input-group
"
>
<
input
type
=
"
text
"
className
=
"
form-control
"
placeholder
=
"
방이름을 입력해주세요
"
aria
-
label
=
"
방이름 입력해주세요
"
aria
-
describedby
=
"
basic-addon1
"
onChange
=
{
handleChange
}
name
=
"
name
"
value
=
{
room
.
name
}
/
>
<
/div
>
<
div
className
=
"
modal-footer
"
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
>
생성
<
/button
>
<
/div
>
<
/div
>
<
/form
>
<
/div
>
);
};
export
default
CreateRoom
;
\ No newline at end of file
client/src/components/Home/JoinRoom.js
0 → 100644
View file @
878528b8
import
{
useEffect
,
useState
}
from
"
react
"
;
import
{
Redirect
}
from
"
react-router-dom
"
;
import
roomApi
from
"
../../apis/room.api
"
;
const
userId
=
localStorage
.
getItem
(
'
user
'
);
const
JoinRoom
=
()
=>
{
const
[
roomId
,
setRoomId
]
=
useState
(
''
);
const
[
disabled
,
setDisabled
]
=
useState
(
true
);
const
[
error
,
setError
]
=
useState
(
""
);
const
[
success
,
setSuccess
]
=
useState
(
false
);
useEffect
(()
=>
{
const
isRoom
=
Object
.
values
(
roomApi
).
every
((
el
)
=>
Boolean
(
el
));
isRoom
?
setDisabled
(
false
)
:
setDisabled
(
true
);
},
[
roomId
]);
function
handleChange
(
event
)
{
const
{
value
}
=
event
.
target
;
setRoomId
(
value
);
console
.
log
(
roomId
);
}
async
function
handleSubmit
(
e
)
{
e
.
preventDefault
();
try
{
// setLoading(true);
// setError("");
console
.
log
(
'
userId:
'
,
userId
)
console
.
log
(
'
roomId:
'
,
roomId
)
const
data
=
await
roomApi
.
join
({
userId
:
userId
,
roomId
:
roomId
});
console
.
log
(
data
);
setSuccess
(
true
);
}
catch
(
error
)
{
// catchErrors(error, setError);
}
finally
{
// setLoading(false);
}
}
if
(
success
)
{
}
return
(
<
div
className
=
"
modal-content
"
>
<
form
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
"
modal-header
"
>
<
div
className
=
"
modal-title
"
id
=
"
joinModal
"
>
방참여하기
<
/div
>
<
button
type
=
"
button
"
className
=
"
btn-close
"
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
><
/button
>
<
/div
>
<
div
className
=
"
modal-body
"
>
<
div
className
=
"
input-group mb-3
"
>
<
input
type
=
"
text
"
className
=
"
form-control
"
placeholder
=
"
참여코드를 입력하세요
"
aria
-
label
=
"
참여코드를 입력하세요
"
aria
-
describedby
=
"
basic-addon1
"
name
=
"
roomId
"
value
=
{
roomId
}
onChange
=
{
handleChange
}
/
>
<
/div
>
<
div
className
=
"
modal-footer
"
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
>
확인
<
/button
>
<
/div
>
<
/div
>
<
/form
>
<
/div
>
);
};
export
default
JoinRoom
;
\ No newline at end of file
client/src/components/Login.js
View file @
878528b8
...
...
@@ -88,7 +88,7 @@ const Login = () => {
<
/div
>
<
/div
>
<
div
className
=
"
modal-footer
"
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
disabled
=
{
disabled
}
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
disabled
=
{
disabled
}
data
-
bs
-
dismiss
=
"
modal
"
>
로그인
<
/button
>
<
/div
>
...
...
client/src/components/Room/ChannelList.js
View file @
878528b8
import
{
Link
}
from
'
react-router-dom
'
import
React
,
{
useState
}
from
'
react
'
;
import
LeftHamb
e
rger
from
'
./LeftHamb
e
rger
'
;
import
RightHamb
e
rger
from
'
./RightHamb
e
rger
'
;
import
LeftHamb
u
rger
from
'
./LeftHamb
u
rger
'
;
import
RightHamb
u
rger
from
'
./RightHamb
u
rger
'
;
const
ChannelList
=
()
=>
{
return
(
<
div
>
<
nav
className
=
"
navbar navbar-light d-flex justify-content-between
"
>
<
LeftHamb
e
rger
/>
<
LeftHamb
u
rger
/>
<
div
>
<
Link
to
=
"
/user
"
>
<
img
src
=
"
/BORA.png
"
style
=
{{
width
:
'
160px
'
}}
/
>
<
/Link
>
<
/div
>
<
RightHamb
e
rger
/>
<
RightHamb
u
rger
/>
<
/nav
>
<
/div
>
)
...
...
client/src/components/Room/LeftHamberger.js
deleted
100644 → 0
View file @
c00faaf3
import
backward
from
"
../../backward.png
"
;
import
ChannelSingle
from
"
./ChannelSingle
"
;
const
LeftHamberger
=
()
=>
{
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
>
<
button
type
=
"
button
"
className
=
"
btn-close text-reset
"
data
-
bs
-
dismiss
=
"
offcanvas
"
aria
-
label
=
"
Close
"
><
/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
=
"
#exitRoom
"
style
=
{{
height
:
"
30px
"
,
fontWeight
:
"
bold
"
,
backgroundColor
:
"
#E0CEE8
"
,
color
:
"
black
"
,
border
:
"
1px #D64D61
"
,
}}
>
초대
<
/button
>
<
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
"
>
<
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
>
);
};
export
default
LeftHamberger
;
client/src/components/Room/LeftHamburger.js
0 → 100644
View file @
878528b8
import
backward
from
"
../../backward.png
"
;
import
ChannelSingle
from
"
./ChannelSingle
"
;
const
LeftHamberger
=
()
=>
{
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
>
<
button
type
=
"
button
"
className
=
"
btn-close text-reset
"
data
-
bs
-
dismiss
=
"
offcanvas
"
aria
-
label
=
"
Close
"
><
/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
>
);
};
export
default
LeftHamberger
;
client/src/components/Room/RightHamb
e
rger.js
→
client/src/components/Room/RightHamb
u
rger.js
View file @
878528b8
import
{
useState
}
from
"
react
"
;
import
ChannelSingle
from
'
./ChannelSingle
'
const
RightHamberger
=
()
=>
{
function
copyInput
()
{
const
t
=
document
.
querySelector
(
'
#roomId
'
).
innerText
;
console
.
log
(
t
)
navigator
.
clipboard
.
writeText
(
t
);
document
.
execCommand
(
'
copy
'
);
}
const
[
admin
,
setAdmin
]
=
useState
(
'
true
'
)
return
(
<
div
>
<
div
>
...
...
@@ -75,6 +69,20 @@ const RightHamberger = () => {
>
퇴장
<
/button
>
{
admin
?
<
button
type
=
"
button
"
className
=
"
m-3 rounded
"
style
=
{{
height
:
'
30px
'
,
fontWeight
:
'
bold
'
,
backgroundColor
:
'
#E0CEE8
'
,
color
:
'
black
'
,
border
:
'
1px #D64D61
'
,
}}
>
설정
<
/button> : null
}
<
div
className
=
"
modal fade
"
id
=
"
exitRoom
"
...
...
client/src/components/SignUp.js
View file @
878528b8
...
...
@@ -38,7 +38,7 @@ const Signup = () => {
async
function
handleSubmit
()
{
try
{
const
data
=
await
axios
.
post
(
"
https://localhost:8080
/api/room/1/1
"
,
user
)
const
data
=
await
axios
.
post
(
"
/api/room/1/1
"
,
user
)
// setLoading(true);
// setError("");
// const success = await login(user.email, user.password);
...
...
controllers/room.controller.js
View file @
878528b8
import
{
Room
}
from
"
../models/index.js
"
;
import
{
Room
,
User
}
from
"
../models/index.js
"
;
import
{
customAlphabet
}
from
'
nanoid
'
import
config
from
"
../config/app.config.js
"
;
import
isLength
from
'
validator/lib/isLength.js
'
const
nanoid
=
customAlphabet
(
'
1234567890abcdef
'
,
10
)
const
joinRoom
=
async
(
req
,
res
)
=>
{
console
.
log
(
'
req.body.value:
'
,
req
.
body
)
const
{
userId
,
roomId
}
=
req
.
body
console
.
log
(
'
userId:
'
,
userId
)
console
.
log
(
'
roomId:
'
,
roomId
)
const
room_Id
=
await
Room
.
findOne
({
where
:
{
id
:
roomId
}
});
console
.
log
(
'
room_Id:
'
,
room_Id
)
if
(
room_Id
)
{
//roomId에 일치하는 방의 member정보에 userId 저장하기
console
.
log
(
'
room_Id.member1:
'
,
room_Id
.
member
)
room_Id
.
member
.
push
(
userId
)
console
.
log
(
'
room_Id.member2:
'
,
room_Id
.
member
)
await
Room
.
update
({
'
member
'
:
room_Id
.
member
},
{
where
:
{
id
:
roomId
}
})
const
roomID
=
await
Room
.
findOne
({
where
:
{
id
:
roomId
}
});
console
.
log
(
'
room_Id2:
'
,
roomID
.
member
)
//userId에 일치하는 사용자의 roomNumber에 roomId저장하기
// const user_Id = await User.findOne({ where: { id: userId } });
// console.log('user_Id:', user_Id)
// console.log('user_Id.roomNumber1:', user_Id.roomNumber)
// user_Id.roomNumber.push(roomId)
// console.log('user_Id.roomNumber2:', user_Id.roomNumber)
// await User.update({ 'roomNumber': roomId }, { where: { id: userId } })
// const userID = await User.findOne({ where: { id: userId } });
// console.log('user_Id2:', userID.roomNumber)
}
else
{
return
res
.
status
(
422
).
send
(
'
참여코드와 일치하는 방이 존재하지 않습니다.
'
)
}
};
// const changemember = async (req, res) => {
// const { userId, roomId } = req.body
// // console.log(roomId)
// let room = await Room.findOne({ roomId: roomId }).select('member')
// const isPresent = room.member.indexOf(userId)
// indexOf : userId가 몇번째 인덱스인지 찾기
// try {
// if (isPresent < 0) {
// const memberId = room.member.push(userId)
// await Room.updateOne({ 'roomId': roomId }, { 'member': room.member })
// // console.log('room.member 업데이트 완료')
// return res.json(true)
// }
// else {
// return res.json(false)
// }
// } catch (error) {
// res.status(500).send('멤버 업데이트 실패')
// }
// }
const
createRoom
=
async
(
req
,
res
)
=>
{
console
.
log
(
'
룸정보
'
,
req
.
body
)
const
{
name
,
owner
,
member
,
profileimg
,
channel
}
=
req
.
body
;
console
.
log
(
'
owner:
'
,
owner
)
const
id
=
nanoid
()
console
.
log
(
'
id:
'
,
id
)
const
Id
=
await
Room
.
findOne
({
where
:
{
id
:
id
}
});
console
.
log
(
"
Id중복확인:
"
,
Id
)
while
(
Id
)
{
const
id
=
nanoid
()
const
Id
=
await
Room
.
findOne
({
where
:
{
id
:
id
}
});
}
const
test
=
async
(
req
,
res
)
=>
{
try
{
console
.
log
(
"
room=
"
,
req
.
body
);
res
.
json
(
"
안녕
"
);
if
(
!
isLength
(
name
,
{
min
:
3
,
max
:
20
}))
{
console
.
log
(
'
방이름은 3-20자여야 합니다.
'
)
return
res
.
status
(
422
).
send
(
'
방이름은 3-20자여야 합니다.
'
)
}
const
newRoom
=
await
Room
.
create
({
id
:
id
,
name
:
name
,
owner
:
owner
,
member
:
member
,
profileimg
:
profileimg
,
channel
:
channel
,
}).
then
(
_
=>
console
.
log
(
'
room정보:
'
,
id
,
name
,
owner
,
member
,
profileimg
,
channel
))
console
.
log
(
'
newRoom:
'
,
newRoom
)
res
.
json
(
newRoom
)
}
catch
(
error
)
{
console
.
log
(
error
)
;
return
res
.
status
(
500
).
send
(
"
안녕 중 에러
"
);
console
.
log
(
error
)
res
.
status
(
500
).
send
(
'
방생성 에러
'
)
}
}
;
}
export
default
{
test
,
joinRoom
,
createRoom
};
index.js
View file @
878528b8
...
...
@@ -2,7 +2,7 @@
import
dotenv
from
"
dotenv
"
;
import
app
from
"
./app.js
"
;
import
appConfig
from
"
./config/app.config.js
"
;
import
{
sequelize
,
User
}
from
"
./models/index.js
"
;
import
{
Room
,
sequelize
,
User
}
from
"
./models/index.js
"
;
dotenv
.
config
({
path
:
`
${
...
...
@@ -15,13 +15,22 @@ sequelize
.
then
(
async
()
=>
{
console
.
log
(
"
DB 연결 성공
"
);
await
User
.
create
({
id
:
9999
,
id
:
"
9999
"
,
name
:
"
admin
"
,
email
:
"
admin
"
,
password
:
"
admin!
"
,
gender
:
0
,
});
await
Room
.
create
({
id
:
"
1234567890
"
,
name
:
"
room
"
,
owner
:
[
'
600112d16d09ac6b7892d900
'
],
member
:
[
'
600112d16d09ac6b7892d900
'
],
profileimg
:
"
C:
\
fakepath
\
스크린샷(1).png
"
,
channel
:
[
'
회의
'
],
});
app
.
listen
(
appConfig
.
port
,
()
=>
{
console
.
log
(
`Server is running on port
${
appConfig
.
port
}
`
);
});
...
...
models/room.model.js
View file @
878528b8
...
...
@@ -5,17 +5,20 @@ const RoomModel = (sequelize) => {
"
room
"
,
{
id
:
{
type
:
DataTypes
.
INTEGER
,
type
:
DataTypes
.
STRING
,
primaryKey
:
true
,
},
name
:
{
type
:
DataTypes
.
STRING
,
},
owner
:
{
type
:
DataTypes
.
STRING
,
type
:
DataTypes
.
ARRAY
(
DataTypes
.
STRING
)
,
},
member
:
{
type
:
DataTypes
.
ARRAY
(
DataTypes
.
INTEGER
),
type
:
DataTypes
.
ARRAY
(
DataTypes
.
STRING
),
},
profileimg
:
{
type
:
DataTypes
.
STRING
,
},
channel
:
{
type
:
DataTypes
.
ARRAY
(
DataTypes
.
JSON
),
...
...
@@ -23,8 +26,8 @@ const RoomModel = (sequelize) => {
},
{
timestamps
:
true
}
);
return
Room
;
};
export
default
RoomModel
;
models/user.model.js
View file @
878528b8
...
...
@@ -22,10 +22,10 @@ const UserModel = (sequelize) => {
type
:
DataTypes
.
INTEGER
,
},
phone
:
{
type
:
DataTypes
.
STRING
,
type
:
DataTypes
.
INTEGER
,
},
img
:
{
type
:
DataTypes
.
ARRAY
(
DataTypes
.
INTEGER
)
,
type
:
DataTypes
.
STRING
,
},
roomNumber
:
{
type
:
DataTypes
.
ARRAY
(
DataTypes
.
STRING
),
...
...
package.json
View file @
878528b8
...
...
@@ -24,6 +24,7 @@
"
express
"
:
"
4.17.1
"
,
"
http
"
:
"
0.0.1-security
"
,
"
jsonwebtoken
"
:
"
^8.5.1
"
,
"
nanoid
"
:
"
^3.1.20
"
,
"
nodemon
"
:
"
^2.0.7
"
,
"
pg
"
:
"
^8.6.0
"
,
"
pg-hstore
"
:
"
^2.3.4
"
,
...
...
routes/index.js
View file @
878528b8
...
...
@@ -5,6 +5,6 @@ import roomRouter from "./room.route.js";
const
router
=
express
.
Router
();
router
.
use
(
"
/
"
,
userRouter
);
router
.
use
(
"
/room
/:userId/:channelId
"
,
roomRouter
);
router
.
use
(
"
/room
"
,
roomRouter
);
export
default
router
;
routes/room.route.js
View file @
878528b8
...
...
@@ -3,6 +3,8 @@ import roomCrtl from "../controllers/room.controller.js";
const
router
=
express
.
Router
();
router
.
route
(
"
/
"
).
post
(
roomCrtl
.
test
);
router
.
route
(
"
/create
"
).
post
(
roomCrtl
.
createRoom
);
router
.
route
(
"
/join
"
).
put
(
roomCrtl
.
joinRoom
);
export
default
router
;
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