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
7959b787
Commit
7959b787
authored
Jun 28, 2021
by
Kim, Chaerin
Browse files
homeguest, login, signup UI
parent
320e5438
Changes
5
Hide whitespace changes
Inline
Side-by-side
BORA_LOGO.png
deleted
100644 → 0
View file @
320e5438
15.9 KB
BORA.PNG
→
client/public/
BORA.PNG
View file @
7959b787
File moved
client/src/components/Login.js
View file @
7959b787
import
{
useEffect
,
useState
}
from
"
react
"
;
const
INIT_USER
=
{
id
:
""
,
password
:
""
,
};
const
Login
=
()
=>
{
return
(
<
div
>
Login
Component
입니다
.
// const { error, loading, login } = useAuth();
const
[
user
,
setUser
]
=
useState
(
INIT_USER
);
const
[
disabled
,
setDisabled
]
=
useState
(
true
);
const
[
error
,
setError
]
=
useState
(
""
);
const
[
success
,
setSuccess
]
=
useState
(
false
);
useEffect
(()
=>
{
const
isUser
=
Object
.
values
(
user
).
every
((
el
)
=>
Boolean
(
el
));
isUser
?
setDisabled
(
false
)
:
setDisabled
(
true
);
},
[
user
]);
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
;
setUser
({
...
user
,
[
name
]:
value
});
console
.
log
(
user
);
}
async
function
handleSubmit
()
{
try
{
// setLoading(true);
// setError("");
// const success = await login(user.email, user.password);
console
.
log
(
user
);
setSuccess
(
success
);
}
catch
(
error
)
{
// catchErrors(error, setError);
}
finally
{
// setLoading(false);
}
}
const
{
id
,
password
}
=
user
;
return
(
<
div
className
=
"
modal-content
"
>
<
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
>
<
div
className
=
"
modal-body
"
>
<
div
>
<
label
>
아이디
<
/label
>
<
input
className
=
"
form-control
"
id
=
"
id
"
type
=
"
text
"
name
=
"
id
"
placeholder
=
"
아이디를 입력하세요
"
value
=
{
id
}
onChange
=
{
handleChange
}
/
>
<
/div
>
<
div
>
<
label
>
비밀번호
<
/label
>
<
input
className
=
"
form-control
"
id
=
"
password
"
type
=
"
password
"
name
=
"
password
"
placeholder
=
"
비밀번호를 입력하세요
"
value
=
{
password
}
onChange
=
{
handleChange
}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
modal-footer
"
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
disabled
=
{
disabled
}
>
로그인
<
/button
>
<
/div
>
)
<
/form
>
<
/div
>
);
};
export
default
Login
;
client/src/components/SignUp.js
View file @
7959b787
import
{
useEffect
,
useState
}
from
"
react
"
;
const
INIT_USER
=
{
name
:
""
,
idNumber1
:
""
,
idNumber2
:
""
,
id
:
""
,
password
:
""
,
checkpw
:
""
,
phone
:
""
,
};
const
Signup
=
()
=>
{
return
(
<
div
>
Signup
Component
입니다
.
const
[
user
,
setUser
]
=
useState
(
INIT_USER
);
const
[
error
,
setError
]
=
useState
(
""
);
const
[
success
,
setSuccess
]
=
useState
(
false
);
let
disabled
=
false
;
useEffect
(()
=>
{
disabled
=
!
(
user
.
name
&&
user
.
idNumber1
&&
user
.
idNumber2
&&
user
.
id
&&
user
.
password
&&
user
.
checkpw
);
},
[
user
]);
function
handleChange
(
event
)
{
const
{
name
,
value
}
=
event
.
target
;
setUser
({
...
user
,
[
name
]:
value
});
console
.
log
(
user
);
}
async
function
handleSubmit
()
{
try
{
// setLoading(true);
// setError("");
// const success = await login(user.email, user.password);
console
.
log
(
user
);
setSuccess
(
success
);
}
catch
(
error
)
{
// catchErrors(error, setError);
}
finally
{
// setLoading(false);
}
}
const
{
name
,
idNumber1
,
idNumber2
,
id
,
password
,
checkpw
,
phone
}
=
user
;
return
(
<
div
className
=
"
modal-content
"
>
<
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
>
<
div
className
=
"
modal-body
"
>
<
div
className
=
"
p-2
"
>
<
label
className
=
"
p-1
"
>
이름
<
/label
>
<
input
className
=
"
form-control
"
id
=
"
name
"
type
=
"
text
"
name
=
"
name
"
placeholder
=
"
이름을 입력하세요
"
value
=
{
name
}
onChange
=
{
handleChange
}
/
>
<
/div
>
<
div
className
=
"
p-2
"
>
<
label
className
=
"
p-1
"
>
주민등록번호
<
/label
>
<
div
className
=
"
d-flex text-center
"
>
<
div
className
=
"
col-4
"
>
<
input
className
=
"
m-2 form-control
"
id
=
"
idNumber1
"
type
=
"
text
"
name
=
"
idNumber1
"
placeholder
=
"
●●●●●●
"
value
=
{
idNumber1
}
onChange
=
{
handleChange
}
/
>
<
/div
>
<
div
className
=
"
col-1
"
>
ㅡ
<
/div
>
<
div
className
=
"
col-1
"
>
<
input
className
=
"
m-2 form-control
"
id
=
"
idNumber2
"
type
=
"
text
"
name
=
"
idNumber2
"
placeholder
=
"
●
"
value
=
{
idNumber2
}
onChange
=
{
handleChange
}
/
>
<
/div
>
******
<
/div
>
<
/div
>
<
div
className
=
"
p-2
"
>
<
label
className
=
"
p-1
"
>
아이디
<
/label
>
<
input
className
=
"
form-control
"
id
=
"
id
"
type
=
"
text
"
name
=
"
id
"
placeholder
=
"
아이디를 입력하세요
"
value
=
{
id
}
onChange
=
{
handleChange
}
/
>
<
/div
>
<
div
className
=
"
p-2
"
>
<
label
className
=
"
p-1
"
>
비밀번호
<
/label
>
<
input
className
=
"
form-control
"
id
=
"
password
"
type
=
"
password
"
name
=
"
password
"
placeholder
=
"
비밀번호를 입력하세요
"
value
=
{
password
}
onChange
=
{
handleChange
}
/
>
<
/div
>
<
div
className
=
"
p-2
"
>
<
label
className
=
"
p-1
"
>
비밀번호확인
<
/label
>
<
input
className
=
"
form-control
"
id
=
"
checkpw
"
type
=
"
password
"
name
=
"
checkpw
"
placeholder
=
"
비밀번호를 다시 입력하세요
"
value
=
{
checkpw
}
onChange
=
{
handleChange
}
/
>
<
/div
>
<
div
className
=
"
p-2
"
>
<
label
className
=
"
p-1
"
>
전화번호
(
선택
)
<
/label
>
<
input
className
=
"
form-control
"
id
=
"
phone
"
type
=
"
text
"
name
=
"
phone
"
placeholder
=
"
숫자만 입력하세요
"
value
=
{
phone
}
onChange
=
{
handleChange
}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
modal-footer
"
>
<
button
type
=
"
submit
"
className
=
"
btn btn-primary
"
disabled
=
{
disabled
}
>
회원가입
<
/button
>
<
/div
>
)
<
/form
>
<
/div
>
);
};
export
default
Signup
;
client/src/pages/HomeGuestPage.js
View file @
7959b787
...
...
@@ -3,13 +3,48 @@ import SignUp from "../components/SignUp";
const
HomeGuestPage
=
()
=>
{
return
(
<
div
>
HomeGuest
Page
입니다
.
<
h1
>
logo
자리
<
/h1
>
<
p
>
로그인
<
/p
>
<
Login
/>
<
p
>
회원가입
<
/p
>
<
SignUp
/>
<
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
"
>
<
button
type
=
"
button
"
className
=
"
col-4 btn btn-info
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#loginModal
"
>
로그인
<
/button
>
<
div
className
=
"
modal fade
"
id
=
"
loginModal
"
tabIndex
=
"
-1
"
aria
-
labelledby
=
"
loginModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog
"
>
<
Login
/>
<
/div
>
<
/div
>
<
button
type
=
"
button
"
className
=
"
col-4 btn btn-info
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#signupModal
"
>
회원가입
<
/button
>
<
/div
>
<
div
className
=
"
modal fade
"
id
=
"
signupModal
"
tabIndex
=
"
-1
"
aria
-
labelledby
=
"
signupModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog
"
>
<
SignUp
/>
<
/div
>
<
/div
>
<
/div
>
);
};
...
...
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