Skip to content

GitLab

Commit b9bb0fb3 authored by 한규민's avatar 한규민
Browse files

loginSignup_scss

parent 4ff0e564
Hide whitespace changes
Inline Side-by-side
client/src/App.js
View file @ b9bb0fb3
...@@ -14,6 +14,7 @@ function App() { ...@@ -14,6 +14,7 @@ function App() {
<Switch> <Switch>
<Route exact path="/" component={HomePage} /> <Route exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} /> <Route path="/login" component={LoginPage} />
<Route path="/signup" component={SignupPage} />
</Switch> </Switch>
</Router> </Router>
); );
......
client/src/components/Login/Login.js
View file @ b9bb0fb3
import { useState } from "react";
import styles from "./login.module.scss"; import styles from "./login.module.scss";
const Login = ()=>{ const Login = () => {
return( const [state, setState] = useState(true)
<div className="login">
<div class="nav-tabs"> return (
<span><a href="loginPage.html" class="login">로그인</a></span> <div className={`d-flex ${styles.login} col-md-8 col-12 align-items-center`}>
<span><a>|</a></span> {/* nav-tabs */}
<span><a href="guestLoginPage.html" class="nomember">비회원 예매확인</a></span> <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> </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> </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
* { input {
padding: 0; margin: 5px 0;
margin: 0; padding: 5px 5px;
box-sizing: border-box; color:white;
width: 100%; }
background: black;
} label{
color: white;
// .loginPage { }
// padding: 20px; .btn{
// } background-color: black;
color: #FEDC00;
.nav-tabs a { }
padding: 0 10px; .login{
} flex-direction: column;
}
.nav-tabs {
.box{
display: flex;
padding: 0 10px;
width: 100%;
}
.inputContents {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
border: none;
padding: 12px 0;
}
.nav-tabs a {
text-decoration: none; text-decoration: none;
color: white; color: white;
} }
// .loginPage { .navLink{
// margin: 0 auto; background-color: yellow;
// padding: 20px; }
// width: 300px;
// display: flex; .loginBtn {
// flex-direction: column; color : black;
// justify-content: center; background-color: #FEDC00;
// }
input {
margin: 5px 0;
padding: 5px 5px;
}
.loginBtn {
background-color: yellow;
border: none; border: none;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
} }
.intoRegisterPage { .intoSignupPage {
text-decoration: none;
color: white; 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/pages/LoginPage.js
View file @ b9bb0fb3
...@@ -3,7 +3,7 @@ import Login from "../components/Login/Login"; ...@@ -3,7 +3,7 @@ import Login from "../components/Login/Login";
const LoginPage = () => { const LoginPage = () => {
return ( return (
<div> <div className="bg-dark row justify-content-center">
<Login /> <Login />
</div> </div>
) )
......
client/src/pages/SignupPage.js
View file @ b9bb0fb3
import Signup from '../components/Signup'
const SignupPage = () => { const SignupPage = () => {
return ( return (
<div> <div>
<Signup/>
</div> </div>
) )
} }
......
client/src/scss/custom.scss
View file @ b9bb0fb3
...@@ -8,6 +8,13 @@ ...@@ -8,6 +8,13 @@
justify-content: center; 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) { @media (max-width: 767px) {
.carousel-inner .carousel-item > div { .carousel-inner .carousel-item > div {
display: none; display: none;
...@@ -34,4 +41,8 @@ ...@@ -34,4 +41,8 @@
.carousel-inner .carousel-item-end, .carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { .carousel-inner .carousel-item-start {
transform: translateX(0); transform: translateX(0);
} }
\ No newline at end of file
// .nav-link{
// color: yellow;
// }
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment