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
48ba15b7
Commit
48ba15b7
authored
Aug 02, 2021
by
seoyeon
Browse files
회원가입 로그인
parent
6903b3c1
Changes
5
Hide whitespace changes
Inline
Side-by-side
client/src/App.js
View file @
48ba15b7
...
...
@@ -6,6 +6,8 @@ import ProfilePage from "./pages/ProfilePage";
import
RoomPage
from
"
./pages/RoomPage
"
;
import
InfoUpdatePage
from
"
./pages/InfoUpdatePage
"
;
import
InvitePage
from
"
./pages/InvitePage
"
;
import
SingupPage
from
"
./components/SignUp
"
;
import
LoginPage
from
"
./components/Login
"
function
App
()
{
return
(
...
...
@@ -14,6 +16,8 @@ function App() {
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
HomeGuestPage
}
/
>
<
Route
exact
path
=
"
/user
"
component
=
{
HomeUserPage
}
/
>
<
Route
exact
path
=
"
/signup
"
component
=
{
SingupPage
}
/
>
<
Route
exact
path
=
"
/login
"
component
=
{
LoginPage
}
/
>
<
Route
path
=
"
/profile/:id/update
"
component
=
{
InfoUpdatePage
}
/
>
<
Route
path
=
"
/profile/:id
"
component
=
{
ProfilePage
}
/
>
<
Route
path
=
"
/room/:roomId/:channelId
"
component
=
{
RoomPage
}
>
...
...
client/src/components/Login.js
View file @
48ba15b7
import
{
useEffect
,
useState
,
useRef
}
from
'
react
'
import
{
Redirect
}
from
'
react-router-dom
'
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
import
userApi
from
'
../apis/user.api
'
import
catchErrors
from
'
../context/catchError
'
import
{
handleLogin
}
from
'
../context/auth
'
...
...
@@ -63,56 +63,52 @@ const Login = () => {
const
{
email
,
password
}
=
user
return
(
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
container
"
>
<
form
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
"
modal-header
"
>
<
h5
className
=
"
modal-title
"
id
=
"
loginModalLabel
"
>
로그인
<
/h5
>
<
button
type
=
"
button
"
className
=
"
btn-close
"
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
><
/button
>
<
div
className
=
"
m-3 d-flex justify-content-center
"
>
<
Link
to
=
"
/
"
>
<
img
src
=
"
/BORA.png
"
style
=
{{
width
:
'
160px
'
}}
/
>
<
/Link
>
<
/div
>
{
error
&&
<
div
className
=
"
alert alert-danger
"
>
{
error
}
<
/div>
}
<
div
className
=
"
modal-body
"
>
<
div
>
<
label
>
아이디
<
/label
>
<
input
className
=
"
form-control
"
id
=
"
email
"
type
=
"
text
"
name
=
"
email
"
placeholder
=
"
아이디를 입력하세요
"
value
=
{
email
}
onChange
=
{
handleChange
}
/
>
<
div
className
=
"
row mt-5 d-flex align-items-center
"
>
<
h2
style
=
{{
textAlign
:
'
center
'
}}
>
로그인
<
/h2
>
{
error
&&
<
div
className
=
"
alert alert-danger
"
>
{
error
}
<
/div>
}
<
div
className
=
"
form-group
"
>
<
div
className
=
"
mt-5
"
>
<
label
>
아이디
<
/label
>
<
input
className
=
"
form-control
"
id
=
"
email
"
type
=
"
text
"
name
=
"
email
"
placeholder
=
"
아이디를 입력하세요
"
value
=
{
email
}
onChange
=
{
handleChange
}
/
>
<
/div
>
<
div
className
=
"
mt-3
"
>
<
label
>
비밀번호
<
/label
>
<
input
className
=
"
form-control
"
id
=
"
password
"
type
=
"
password
"
name
=
"
password
"
placeholder
=
"
비밀번호를 입력하세요
"
value
=
{
password
}
onChange
=
{
handleChange
}
/
>
<
/div
>
<
/div
>
<
div
>
<
label
>
비밀번호
<
/label
>
<
input
className
=
"
form-control
"
id
=
"
password
"
type
=
"
password
"
name
=
"
password
"
placeholder
=
"
비밀번호를 입력하세요
"
value
=
{
password
}
onChange
=
{
handleChange
}
/
>
<
div
className
=
"
mt-4 d-flex justify-content-center
"
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
disabled
=
{
disabled
}
>
로그인
<
/button
>
<
/div
>
<
/div
>
<
div
className
=
"
modal-footer
"
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
disabled
=
{
disabled
}
data
-
bs
-
dismiss
=
"
modal
"
>
로그인
<
/button
>
<
/div
>
<
/form
>
<
/div
>
)
...
...
client/src/components/SignUp.js
View file @
48ba15b7
import
axios
from
"
axios
"
;
import
{
useEffect
,
useState
}
from
"
react
"
;
import
{
Redirect
}
from
"
react-router-dom
"
;
import
userApi
from
"
../apis/user.api
"
;
import
catchErrors
from
"
../context/catchError
"
;
import
axios
from
'
axios
'
import
{
useEffect
,
useState
}
from
'
react
'
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
import
userApi
from
'
../apis/user.api
'
import
catchErrors
from
'
../context/catchError
'
const
INIT_USER
=
{
name
:
""
,
email
:
""
,
password
:
""
,
checkpw
:
""
,
phone
:
""
,
}
;
name
:
''
,
email
:
''
,
password
:
''
,
checkpw
:
''
,
phone
:
''
,
}
const
Signup
=
()
=>
{
const
[
user
,
setUser
]
=
useState
(
INIT_USER
)
;
const
[
error
,
setError
]
=
useState
(
""
);
const
[
disabled
,
setDisabled
]
=
useState
(
false
)
;
const
[
success
,
setSuccess
]
=
useState
(
false
)
;
const
[
user
,
setUser
]
=
useState
(
INIT_USER
)
const
[
error
,
setError
]
=
useState
(
''
)
const
[
disabled
,
setDisabled
]
=
useState
(
false
)
const
[
success
,
setSuccess
]
=
useState
(
false
)
useEffect
(()
=>
{
setDisabled
(
!
(
user
.
name
&&
user
.
email
&&
user
.
password
&&
user
.
checkpw
)
);
},
[
user
]);
setDisabled
(
!
(
user
.
name
&&
user
.
email
&&
user
.
password
&&
user
.
checkpw
))
},
[
user
])
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
;
setUser
({
...
user
,
[
name
]:
value
})
;
const
{
name
,
value
}
=
event
.
target
setUser
({
...
user
,
[
name
]:
value
})
}
async
function
handleSubmit
()
{
async
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
console
.
log
(
'
회원가입
'
)
try
{
const
data
=
await
userApi
.
signup
(
user
);
if
(
!
checkPassword
())
{
return
}
const
data
=
await
userApi
.
signup
(
user
)
console
.
log
(
data
)
setSuccess
(
true
)
;
setError
(
""
);
setSuccess
(
true
)
setError
(
''
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
);
console
.
log
(
'
error
'
)
catchErrors
(
error
,
setError
)
}
finally
{
// setLoading(false);
}
}
function
checkPassword
(
event
)
{
const
p1
=
user
.
password
;
const
p2
=
user
.
checkpw
;
const
p1
=
user
.
password
const
p2
=
user
.
checkpw
if
(
p1
!==
p2
)
{
event
.
preventDefault
()
;
alert
(
"
비밀번호가 일치하지 않습니다.
"
);
return
false
;
//
event.preventDefault()
alert
(
'
비밀번호가 일치하지 않습니다.
'
)
return
false
}
else
{
setSuccess
(
true
);
return
true
;
alert
(
'
회원가입 되었습니다.
'
)
window
.
location
.
href
=
'
/
'
return
true
}
}
if
(
success
)
{
alert
(
"
회원가입 되었습니다.
"
);
<
Redirect
to
=
"
/
"
/>
;
}
const
{
name
,
id
,
password
,
checkpw
,
phone
}
=
user
;
const
{
name
,
id
,
password
,
checkpw
,
phone
}
=
user
return
(
<
div
className
=
"
modal-content
"
>
{
error
&&
<
div
className
=
"
alert alert-danger
"
>
{
error
}
<
/div>
}
<
div
className
=
"
container
"
>
{
error
&&
<
div
className
=
"
alert alert-danger
"
>
{
error
}
<
/div>
}
<
form
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
"
modal-header
"
>
<
h5
className
=
"
modal-title
"
id
=
"
loginModalLabel
"
>
회원가입
<
/h5
>
<
button
type
=
"
button
"
className
=
"
btn-close
"
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
><
/button
>
<
div
className
=
"
m-3 d-flex justify-content-center
"
>
<
Link
to
=
"
/
"
>
<
img
src
=
"
/BORA.png
"
style
=
{{
width
:
'
160px
'
}}
/
>
<
/Link
>
<
/div
>
<
div
className
=
"
modal-body
"
>
<
div
className
=
"
row mt-4
"
>
<
h5
style
=
{{
textAlign
:
'
center
'
}}
>
회원가입
<
/h5
>
<
/div
>
<
div
className
=
"
form-group
"
>
<
div
className
=
"
p-2
"
>
<
label
className
=
"
p-1
"
>
이름
<
/label
>
<
input
...
...
@@ -140,21 +133,21 @@ const Signup = () => {
onChange
=
{
handleChange
}
/
>
<
/div
>
<
/div
>
{
console
.
log
(
disabled
)}
<
div
className
=
"
modal-footer
"
>
{
/* {console.log(disabled)} */
}
<
div
className
=
"
mt-3 d-flex justify-content-center
"
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
onClick
=
{
checkPassword
}
onClick
=
{
handleSubmit
}
disabled
=
{
disabled
}
>
회원가입
<
/button
>
<
/div
>
<
/form>
<
/div
>
<
/form
>
<
/div
>
)
;
}
;
)
}
export
default
Signup
;
export
default
Signup
client/src/pages/HomeGuestPage.js
View file @
48ba15b7
import
{
Link
}
from
"
react-router-dom
"
;
import
Login
from
"
../components/Login
"
;
import
SignUp
from
"
../components/SignUp
"
;
...
...
@@ -6,44 +7,22 @@ const HomeGuestPage = () => {
<
div
className
=
"
d-flex flex-column justify-content-center h-100 font-weight-bold
"
>
<
img
src
=
"
BORA.PNG
"
className
=
"
w-100 p-4
"
/>
<
div
className
=
"
d-flex flex-column align-items-center
"
>
<
Link
to
=
"
/login
"
>
<
button
type
=
"
button
"
className
=
"
col-4 btn btn-info
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#loginModal
"
className
=
"
row-4 btn btn-info
"
>
로그인
<
/button
>
<
div
className
=
"
modal fade
"
id
=
"
loginModal
"
tabIndex
=
"
-1
"
aria
-
labelledby
=
"
loginModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog
"
>
<
Login
/>
<
/div
>
<
/div
>
<
/Link
>
<
Link
to
=
"
/signup
"
>
<
button
type
=
"
button
"
className
=
"
col-4 btn btn-info
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#signupModal
"
className
=
"
row-4 btn btn-info
"
>
회원가입
<
/button
>
<
/div
>
<
div
className
=
"
modal fade
"
id
=
"
signupModal
"
tabIndex
=
"
-1
"
aria
-
labelledby
=
"
signupModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog
"
>
<
SignUp
/>
<
/div
>
<
/Link
>
<
/div
>
<
/div
>
);
...
...
controllers/user.controller.js
View file @
48ba15b7
...
...
@@ -70,7 +70,7 @@ const login = async (req, res) => {
const
signup
=
async
(
req
,
res
)
=>
{
try
{
//
console.log('sign up= ', req.body)
console
.
log
(
'
sign up=
'
,
req
.
body
)
const
{
name
,
email
,
password
,
gender
,
phone
}
=
req
.
body
const
id
=
Math
.
floor
(
Math
.
random
()
*
(
9999
-
1000
)
+
1000
)
// console.log('id:', id)
...
...
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