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
butter-studio
Commits
4e0b5e3d
Commit
4e0b5e3d
authored
Jul 07, 2021
by
Jiwon Yoon
Browse files
Merge branch 'gyumin'
parents
e1e50b29
252c5369
Changes
5
Show whitespace changes
Inline
Side-by-side
client/src/components/Login/Login.js
View file @
4e0b5e3d
...
...
@@ -2,21 +2,48 @@ import { useState } from "react";
import
styles
from
"
./login.module.scss
"
;
const
Login
=
()
=>
{
const
[
state
,
setState
]
=
useState
(
true
)
//useState를 이용해서 각 state 생성 및 초기값 저장
const
[
state
,
setState
]
=
useState
(
true
);
// 이 줄은 css에 해당하는 state
const
[
loginText
,
setLoginText
]
=
useState
({
id
:
''
,
password
:
''
});
const
[
guestText
,
setGusetText
]
=
useState
({
guestName
:
''
,
gusetBirthday
:
''
,
gusetMbnum
:
''
,
guestPassword
:
''
})
//input태그에 걸려있는 onchange에서 실행할 함수설정
const
handleLoginOnChange
=
(
e
)
=>
{
// ... 전개 연산자
// 현재 state에 방금 변화한 값을 다시 저장함
setLoginText
({
...
loginText
,
[
e
.
target
.
name
]:
e
.
target
.
value
,
})
};
const
handleGuestOnChange
=
(
e
)
=>
{
setGusetText
({
...
guestText
,
[
e
.
target
.
name
]:
e
.
target
.
value
})
}
return
(
<
div
className
=
{
`d-flex flex-column col-md-5 col-10`
}
>
{
/* nav-tabs */
}
<
ul
className
=
"
nav nav-fill nav-tabs w-100
"
id
=
"
loginTab
"
role
=
"
tablist
"
>
<
li
className
=
"
nav-item fs-6
"
role
=
"
presentation
"
>
<
button
className
=
{
`nav-link active px-2
${
styles
.
fontSize
}
`
}
style
=
{{
color
:
state
?
"
black
"
:
"
yellow
"
,
backgroundColor
:
state
?
"
yellow
"
:
"
black
"
}}
<
button
className
=
{
`nav-link active px-2
${
styles
.
fontSize
}
`
}
style
=
{{
color
:
state
?
"
black
"
:
"
#FEDC00
"
,
backgroundColor
:
state
?
"
#FEDC00
"
:
"
black
"
}}
id
=
"
login-tab
"
data
-
bs
-
toggle
=
"
tab
"
data
-
bs
-
target
=
"
#login
"
type
=
"
button
"
role
=
"
tab
"
aria
-
controls
=
"
login
"
aria
-
selected
=
"
true
"
onClick
=
{()
=>
setState
(
true
)}
>
로그인
<
/button
>
<
/li
>
<
li
className
=
"
nav-item
"
role
=
"
presentation
"
>
<
button
className
=
{
`nav-link px-2
${
styles
.
fontSize
}
`
}
id
=
"
guest-tab
"
data
-
bs
-
toggle
=
"
tab
"
data
-
bs
-
target
=
"
#guest
"
type
=
"
button
"
role
=
"
tab
"
aria
-
controls
=
"
guest
"
aria
-
selected
=
"
false
"
onClick
=
{()
=>
setState
(
false
)}
style
=
{{
color
:
state
?
"
yellow
"
:
"
black
"
,
backgroundColor
:
state
?
"
black
"
:
"
yellow
"
}}
>
비회원
예매
확인
<
/button
>
onClick
=
{()
=>
setState
(
false
)}
style
=
{{
color
:
state
?
"
#FEDC00
"
:
"
black
"
,
backgroundColor
:
state
?
"
black
"
:
"
#FEDC00
"
}}
>
비회원
예매
확인
<
/button
>
<
/li
>
<
/ul
>
...
...
@@ -24,9 +51,9 @@ const Login = () => {
{
/* 로그인 */
}
<
div
className
=
"
tab-pane fade show active
"
id
=
"
login
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
login-tab
"
>
<
div
className
=
"
d-flex flex-column
"
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
id
"
id
=
"
id
"
placeholder
=
"
ID
"
/>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
password
"
id
=
"
password
"
placeholder
=
"
Password
"
minlength
=
"
8
"
required
/>
<
input
className
=
"
bg-ButterYellow text-dark border-0 rounded-2 mt-2
"
type
=
"
submit
"
value
=
"
Login
"
/>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
id
"
placeholder
=
"
ID
"
onChange
=
{
handleLoginOnChange
}
/
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
password
"
placeholder
=
"
Password
"
onChange
=
{
handleLoginOnChange
}
minlength
=
"
8
"
required
/>
<
input
className
=
{
`border-0 rounded-2 mt-2
${
styles
.
butterYellow
}
${
styles
.
btnHover
}
`
}
type
=
"
submit
"
value
=
"
Login
"
/>
<
span
><
a
href
=
"
./signup
"
className
=
{
styles
.
intoSignupPage
}
>
회원이
아니십니까
?
<
/a></
span
>
<
/div
>
<
/div
>
...
...
@@ -34,15 +61,15 @@ const Login = () => {
{
/* 비회원예매 학인 */
}
<
div
className
=
"
tab-pane fade
"
id
=
"
guest
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
guest-tab
"
>
<
div
className
=
"
d-flex flex-column
"
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
guestName
"
id
=
"
guestName
"
placeholder
=
"
이름
"
minlength
=
"
8
"
required
/>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
gusetBirthday
"
id
=
"
gusetBirthday
"
placeholder
=
"
생년월일
"
minlength
=
"
8
"
required
/>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
gusetMbnum
"
id
=
"
gusetMbnum
"
placeholder
=
"
휴대폰 번호
"
minlength
=
"
8
"
required
/>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
guestPassword
"
id
=
"
password
"
placeholder
=
"
비밀번호
"
minlength
=
"
8
"
required
/>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
guestName
"
id
=
"
guestName
"
placeholder
=
"
이름
"
onChange
=
{
handleGuestOnChange
}
minlength
=
"
8
"
required
/>
<
input
className
=
{
styles
.
input
}
type
=
"
number
"
name
=
"
gusetBirthday
"
id
=
"
gusetBirthday
"
placeholder
=
"
생년월일
"
onChange
=
{
handleGuestOnChange
}
minlength
=
"
8
"
required
/>
<
input
className
=
{
styles
.
input
}
type
=
"
number
"
name
=
"
gusetMbnum
"
id
=
"
gusetMbnum
"
placeholder
=
"
휴대폰 번호
"
onChange
=
{
handleGuestOnChange
}
minlength
=
"
8
"
required
/>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
guestPassword
"
id
=
"
password
"
placeholder
=
"
비밀번호
"
onChange
=
{
handleGuestOnChange
}
minlength
=
"
8
"
required
/>
<
p
className
=
{
`text-white
${
styles
.
fontSizeTwo
}
`
}
>
※
비회원
정보
오
입력
시
예매
내역
확인
/
취소
및
티켓
발권이
어려울
수
있으니
다시
한번
확인해
주시기
바랍니다
.
<
/p
>
<
input
className
=
"
bg-ButterYellow text-dark border-0 rounded-2 mt-2
"
type
=
"
submit
"
value
=
"
비회원 예매 확인
"
/>
<
input
className
=
{
`border-0 rounded-2 mt-2
${
styles
.
butterYellow
}
${
styles
.
btnHover
}
`
}
type
=
"
submit
"
value
=
"
비회원 예매 확인
"
/>
<
/div
>
<
/div
>
<
/div
>
...
...
client/src/components/Login/login.module.scss
View file @
4e0b5e3d
.intoSignupPage
{
font-size
:
1
0
px
;
font-size
:
1
3
px
;
text-decoration
:
none
;
color
:
white
;
}
...
...
@@ -10,7 +10,7 @@
.input
{
margin
:
0
.5rem
0
0
0
;
padding
:
0
.5rem
0
0
.5rem
0
;
color
:
white
;
color
:
black
;
border-radius
:
3px
;
}
...
...
@@ -19,5 +19,15 @@
}
.fontSizeTwo
{
font-size
:
10px
;
font-size
:
11px
;
}
.butterYellow
{
background-color
:
#FEDC00
;
}
.btnHover
:hover
{
background-color
:
black
;
color
:
#FEDC00
;
transition
:
1s
ease-out
;
}
\ No newline at end of file
client/src/components/Signup/Signup.js
View file @
4e0b5e3d
import
styles
from
"
./signup.module.scss
"
;
import
{
useState
}
from
'
react
'
;
const
Signup
=
()
=>
{
const
[
userText
,
setUserState
]
=
useState
({
userName
:
''
,
userBirthday
:
0
,
userMbnum
:
0
,
userPassword
:
''
,
userRePassword
:
''
})
const
handleUserOnChange
=
(
e
)
=>
{
setUserState
({
...
userText
,
[
e
.
target
.
name
]:
e
.
target
.
value
})
}
return
(
<
div
className
=
{
`d-flex
${
styles
.
signup
}
col-md-8 col-12 align-items-center`
}
>
<
table
>
<
colgroup
>
<
col
class
=
"
col1
"
/>
<
col
/>
<
/colgroup
>
<
tbody
>
<
tr
>
<
th
>
<
label
for
=
"
guestName
"
>
이름
<
/label
>
<
/th
>
<
td
><
input
type
=
"
text
"
placeholder
=
"
이름
"
/><
/td
>
<
/tr
>
<
tr
>
<
th
>
<
label
for
=
"
guestBirthday
"
>
생년월일
<
/label
>
<
/th
>
<
td
><
input
type
=
"
text
"
placeholder
=
"
생년월일(6자리)
"
/><
/td
>
<
/tr
>
<
tr
>
<
th
>
<
label
for
=
"
guestMbnum
"
>
휴대폰
번호
<
/label
>
<
/th
>
<
td
><
input
type
=
"
text
"
placeholder
=
"
'-'없이 입력
"
/><
/td
>
<
/tr
>
<
tr
>
<
th
>
<
label
for
=
"
guestPassword
"
>
비밀번호
<
/label
>
<
/th
>
<
td
><
input
type
=
"
password
"
placeholder
=
"
숫자 4자리
"
/><
/td
>
<
/tr
>
<
tr
>
<
/tr
>
<
/tbody
>
<
/table
>
<
p
>
※
비회원
정보
오
입력
시
예매
내역
확인
/
취소
및
티켓
발권이
어려울
수
있으니
다시
한번
확인해
주시기
바랍니다
.
<
/p
>
<
div
class
=
"
guestLoginBtn
"
>
<
input
class
=
"
guestLoginBtn
"
type
=
"
submit
"
value
=
"
비회원 예매 확인
"
/>
<
div
className
=
{
`d-flex
${
styles
.
signup
}
col-md-8 col-12 justify-content-center`
}
>
<
div
className
=
"
d-flex flex-column
"
>
{
console
.
log
(
userText
)}
<
div
className
=
{
styles
.
contents
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
아이디
<
/label
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
userName
"
id
=
"
userID
"
placeholder
=
"
8자리
"
onChange
=
{
handleUserOnChange
}
minlength
=
"
8
"
required
/>
<
button
className
=
{
` border-0 rounded-2 mt-2
${
styles
.
butterYellow
}
${
styles
.
btnHover
}
`
}
>
중복확인
<
/button
>
<
/div
>
<
div
className
=
{
styles
.
contents
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
별명
<
/label
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
userName
"
id
=
"
userName
"
placeholder
=
"
별명
"
onChange
=
{
handleUserOnChange
}
minlength
=
"
8
"
required
/>
<
/div
>
<
div
className
=
{
styles
.
contents
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
생년월일
<
/label
>
<
input
className
=
{
styles
.
input
}
type
=
"
number
"
name
=
"
userBirthday
"
id
=
"
userBirthday
"
placeholder
=
"
6자리
"
onChange
=
{
handleUserOnChange
}
minlength
=
"
6
"
required
/>
<
/div
>
<
div
className
=
{
styles
.
contents
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
휴대폰
번호
<
/label
>
<
input
className
=
{
styles
.
input
}
type
=
"
number
"
name
=
"
userMbnum
"
id
=
"
userMbnum
"
placeholder
=
"
-없이 8자리 입력
"
onChange
=
{
handleUserOnChange
}
minlength
=
"
8
"
required
/>
<
/div
>
<
div
className
=
{
styles
.
contents
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
<
/label
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
userPassword
"
id
=
"
password
"
placeholder
=
"
비밀번호
"
onChange
=
{
handleUserOnChange
}
minlength
=
"
8
"
required
/>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
userRePassword
"
id
=
"
password
"
placeholder
=
"
비밀번호 확인
"
onChange
=
{
handleUserOnChange
}
minlength
=
"
8
"
required
/>
<
/div
>
<
input
className
=
{
` border-0 rounded-2 mt-2
${
styles
.
butterYellow
}
${
styles
.
btnHover
}
`
}
type
=
"
submit
"
value
=
"
가입하기
"
/>
<
/div
>
<
/div
>
)
...
...
client/src/components/Signup/signup.module.scss
View file @
4e0b5e3d
.input
{
margin
:
0
.5rem
0
0
0
;
padding
:
0
.5rem
0
0
.5rem
0
;
color
:black
;
border-radius
:
3px
;
}
.butterYellow
{
background-color
:
#FEDC00
;
}
.btnHover
:hover
{
background-color
:
black
;
color
:
#FEDC00
;
transition
:
1s
ease-out
;
}
.contents
{
display
:
flex
;
flex-direction
:
column
;
justify-content
:
space-around
;
align-items
:
center
;
padding-top
:
5px
;
}
.signupLabel
{
color
:
white
;
}
\ No newline at end of file
client/src/pages/SignupPage.js
View file @
4e0b5e3d
...
...
@@ -2,7 +2,7 @@ import Signup from '../components/Signup'
const
SignupPage
=
()
=>
{
return
(
<
div
>
<
div
className
=
"
d-flex justify-content-center
"
>
<
Signup
/>
<
/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