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
b9bb0fb3
Commit
b9bb0fb3
authored
Jul 05, 2021
by
한규민
Browse files
loginSignup_scss
parent
4ff0e564
Changes
12
Show whitespace changes
Inline
Side-by-side
client/src/App.js
View file @
b9bb0fb3
...
...
@@ -14,6 +14,7 @@ function App() {
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
HomePage
}
/
>
<
Route
path
=
"
/login
"
component
=
{
LoginPage
}
/
>
<
Route
path
=
"
/signup
"
component
=
{
SignupPage
}
/
>
<
/Switch
>
<
/Router
>
);
...
...
client/src/components/Login/Login.js
View file @
b9bb0fb3
import
{
useState
}
from
"
react
"
;
import
styles
from
"
./login.module.scss
"
;
const
Login
=
()
=>
{
return
(
<
div
className
=
"
login
"
>
<
div
class
=
"
nav-tabs
"
>
<
span
><
a
href
=
"
loginPage.html
"
class
=
"
login
"
>
로그인
<
/a></
span
>
<
span
><
a
>|<
/a></
span
>
<
span
><
a
href
=
"
guestLoginPage.html
"
class
=
"
nomember
"
>
비회원
예매확인
<
/a></
span
>
const
Login
=
()
=>
{
const
[
state
,
setState
]
=
useState
(
true
)
return
(
<
div
className
=
{
`d-flex
${
styles
.
login
}
col-md-8 col-12 align-items-center`
}
>
{
/* nav-tabs */
}
<
ul
className
=
"
nav nav-fill nav-tabs
"
id
=
"
loginTab
"
role
=
"
tablist
"
>
<
li
className
=
"
nav-item
"
role
=
"
presentation
"
>
<
button
className
=
"
nav-link active
"
style
=
{{
color
:
state
?
"
black
"
:
"
yellow
"
,
}}
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 bg-black
"
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
"
}}
>
비회원
예매
확인
<
/button
>
<
/li
>
<
/ul
>
<
div
className
=
"
tab-content
"
id
=
"
myTabContent
"
>
{
/* 로그인 */
}
<
div
className
=
"
tab-pane fade show active
"
id
=
"
login
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
login-tab
"
>
<
div
className
=
{
styles
.
inputContents
}
>
<
input
type
=
"
text
"
name
=
"
id
"
id
=
"
id
"
placeholder
=
"
ID
"
/>
<
input
type
=
"
text
"
name
=
"
password
"
id
=
"
password
"
placeholder
=
"
Password
"
minlength
=
"
8
"
required
/>
<
input
className
=
{
styles
.
loginBtn
}
type
=
"
submit
"
value
=
"
Login
"
/>
<
span
><
a
href
=
"
./signup
"
className
=
{
styles
.
SignupPage
}
>
회원이
아니십니까
?
<
/a></
span
>
<
/div
>
<
/div
>
{
/* 비회원예매 학인 */
}
<
div
className
=
"
tab-pane fade
"
id
=
"
guest
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
guest-tab
"
>
<
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
>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
id
=
"
id
"
name
=
"
id
"
placeholder
=
"
ID
"
><
/input
>
<
input
type
=
"
password
"
name
=
"
password
"
id
=
"
password
"
placeholder
=
"
Password
"
minlength
=
"
8
"
required
><
/input
>
<
input
class
=
"
loginBtn
"
type
=
"
submit
"
value
=
"
Login
"
><
/input
>
<
span
><
a
href
=
"
registerPage
"
class
=
"
intoRegisterPage
"
>
회원이
아니십니까
?
<
/a></
span
>
<
/div
>
)
}
...
...
client/src/components/Login/index.js
0 → 100644
View file @
b9bb0fb3
export
{
default
}
from
'
./Login
'
\ No newline at end of file
client/src/components/Login/login.module.scss
View file @
b9bb0fb3
*
{
padding
:
0
;
margin
:
0
;
box-sizing
:
border-box
;
width
:
100%
;
background
:
black
;
}
// .loginPage {
// padding: 20px;
// }
input
{
margin
:
5px
0
;
padding
:
5px
5px
;
color
:white
;
}
.nav-tabs
a
{
label
{
color
:
white
;
}
.btn
{
background-color
:
black
;
color
:
#FEDC00
;
}
.login
{
flex-direction
:
column
;
}
.box
{
display
:
flex
;
padding
:
0
10px
;
}
width
:
100%
;
}
.nav-tab
s
{
.inputContent
s
{
display
:
flex
;
justify-content
:
space-between
;
border
:
none
;
padding
:
12px
0
;
}
.nav-tabs
a
{
flex-direction
:
column
;
text-decoration
:
none
;
color
:
white
;
}
}
// .loginPage {
// margin: 0 auto;
// padding: 20px;
// width: 300px;
// display: flex;
// flex-direction: column;
// justify-content: center;
// }
input
{
margin
:
5px
0
;
padding
:
5px
5px
;
}
.loginBtn
{
.navLink
{
background-color
:
yellow
;
}
.loginBtn
{
color
:
black
;
background-color
:
#FEDC00
;
border
:
none
;
font-size
:
15px
;
font-weight
:
bold
;
}
}
.intoRegisterPage
{
.intoSignupPage
{
text-decoration
:
none
;
color
:
white
;
}
\ No newline at end of file
}
.intoSignupPage
:hover
{
text-decoration
:
none
;
color
:
#FEDC00
;
}
\ No newline at end of file
client/src/components/Signup/Signup.js
0 → 100644
View file @
b9bb0fb3
import
styles
from
"
./signup.module.scss
"
;
const
Signup
=
()
=>
{
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
>
<
/div
>
)
}
export
default
Signup
\ No newline at end of file
client/src/components/Signup/index.js
0 → 100644
View file @
b9bb0fb3
export
{
default
}
from
'
./Signup
'
\ No newline at end of file
client/src/components/Signup/signup.module.scss
0 → 100644
View file @
b9bb0fb3
input
{
margin
:
5px
0
;
padding
:
5px
5px
;
color
:white
;
}
label
{
color
:
white
;
}
.btn
{
background-color
:
black
;
color
:
#FEDC00
;
}
.signup
{
flex-direction
:
column
;
}
ul
{
padding
:
0
10px
;
}
.inputContents
{
display
:
flex
;
flex-direction
:
column
;
text-decoration
:
none
;
padding
:
0
10px
;
color
:
white
;
}
.nav-link
,
.nav-link.active
{
background-color
:
black
;
}
.loginBtn
{
color
:
black
;
background-color
:
#FEDC00
;
border
:
none
;
font-size
:
15px
;
font-weight
:
bold
;
}
.intoSignupPage
{
text-decoration
:
none
;
color
:
white
;
}
.intoSignupPage
:hover
{
text-decoration
:
none
;
color
:
#FEDC00
;
}
\ No newline at end of file
client/src/fonts/HangeulNuriB.ttf
0 → 100644
View file @
b9bb0fb3
File added
client/src/fonts/HangeulNuriR.ttf
0 → 100644
View file @
b9bb0fb3
File added
client/src/pages/LoginPage.js
View file @
b9bb0fb3
...
...
@@ -3,7 +3,7 @@ import Login from "../components/Login/Login";
const
LoginPage
=
()
=>
{
return
(
<
div
>
<
div
className
=
"
bg-dark row justify-content-center
"
>
<
Login
/>
<
/div
>
)
...
...
client/src/pages/SignupPage.js
View file @
b9bb0fb3
import
Signup
from
'
../components/Signup
'
const
SignupPage
=
()
=>
{
return
(
<
div
>
<
Signup
/>
<
/div
>
)
}
...
...
client/src/scss/custom.scss
View file @
b9bb0fb3
...
...
@@ -8,6 +8,13 @@
justify-content
:
center
;
}
@font-face
{
font-family
:
'HangeulNuri-Bold'
;
src
:
url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/HangeulNuri-Bold.woff')
format
(
'woff'
);
font-weight
:
normal
;
font-style
:
normal
;
}
@media
(
max-width
:
767px
)
{
.carousel-inner
.carousel-item
>
div
{
display
:
none
;
...
...
@@ -35,3 +42,7 @@
.carousel-inner
.carousel-item-start
{
transform
:
translateX
(
0
);
}
// .nav-link{
// color: yellow;
// }
\ 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