Commit 252c5369 authored by 한규민's avatar 한규민
Browse files

loginAndSignupState임시저장+css

parent f5a2b8dc
...@@ -2,21 +2,48 @@ import { useState } from "react"; ...@@ -2,21 +2,48 @@ import { useState } from "react";
import styles from "./login.module.scss"; import styles from "./login.module.scss";
const Login = () => { 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 ( return (
<div className={`d-flex flex-column col-md-5 col-10`}> <div className={`d-flex flex-column col-md-5 col-10`}>
{/* nav-tabs */} {/* nav-tabs */}
<ul className="nav nav-fill nav-tabs w-100" id="loginTab" role="tablist"> <ul className="nav nav-fill nav-tabs w-100" id="loginTab" role="tablist">
<li className="nav-item fs-6" role="presentation"> <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" 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> onClick={() => setState(true)}>로그인</button>
</li> </li>
<li className="nav-item" role="presentation"> <li className="nav-item" role="presentation">
<button className={`nav-link px-2 ${styles.fontSize}`} <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" 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> </li>
</ul> </ul>
...@@ -24,9 +51,9 @@ const Login = () => { ...@@ -24,9 +51,9 @@ const Login = () => {
{/* 로그인 */} {/* 로그인 */}
<div className="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab"> <div className="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<div className="d-flex flex-column "> <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="id" placeholder="ID" onChange={handleLoginOnChange}/>
<input className={styles.input} type="text" name="password" id="password" placeholder="Password" minlength="8" required /> <input className={styles.input} type="text" name="password" placeholder="Password" onChange={handleLoginOnChange} minlength="8" required />
<input className="bg-ButterYellow text-dark border-0 rounded-2 mt-2" type="submit" value="Login" /> <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> <span><a href="./signup" className={styles.intoSignupPage}>회원이 아니십니까?</a></span>
</div> </div>
</div> </div>
...@@ -34,15 +61,15 @@ const Login = () => { ...@@ -34,15 +61,15 @@ const Login = () => {
{/* 비회원예매 학인 */} {/* 비회원예매 학인 */}
<div className="tab-pane fade" id="guest" role="tabpanel" aria-labelledby="guest-tab"> <div className="tab-pane fade" id="guest" role="tabpanel" aria-labelledby="guest-tab">
<div className="d-flex flex-column"> <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="guestName" id="guestName" placeholder="이름" onChange={handleGuestOnChange} minlength="8" required />
<input className={styles.input} type="text" name="gusetBirthday" id="gusetBirthday" placeholder="생년월일" minlength="8" required /> <input className={styles.input} type="number" name="gusetBirthday" id="gusetBirthday" placeholder="생년월일" onChange={handleGuestOnChange} minlength="8" required />
<input className={styles.input} type="text" name="gusetMbnum" id="gusetMbnum" placeholder="휴대폰 번호" 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="비밀번호" 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 className={`text-white ${styles.fontSizeTwo}`}>
비회원 정보 입력 예매 내역 확인/취소 티켓 발권이 어려울 있으니 다시 한번 확인해 주시기 바랍니다. 비회원 정보 입력 예매 내역 확인/취소 티켓 발권이 어려울 있으니 다시 한번 확인해 주시기 바랍니다.
</p> </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> </div>
</div> </div>
......
.intoSignupPage{ .intoSignupPage{
font-size: 10px; font-size: 13px;
text-decoration: none; text-decoration: none;
color: white; color: white;
} }
.intoSignupPage:hover { .intoSignupPage:hover {
text-decoration: none; text-decoration: none;
color: #FEDC00; color: #FEDC00;
} }
.input { .input {
margin: 0.5rem 0 0 0; margin: 0.5rem 0 0 0;
padding: 0.5rem 0 0.5rem 0; padding: 0.5rem 0 0.5rem 0;
color:white; color:black;
border-radius: 3px; border-radius: 3px;
} }
...@@ -19,5 +19,15 @@ ...@@ -19,5 +19,15 @@
} }
.fontSizeTwo{ .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
import styles from "./signup.module.scss"; import styles from "./signup.module.scss";
import { useState } from 'react';
const Signup = () => { 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 ( return (
<div className={`d-flex ${styles.signup} col-md-8 col-12 justify-content-center`}> <div className={`d-flex ${styles.signup} col-md-8 col-12 justify-content-center`}>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<input className={styles.input} type="text" name="guestName" id="guestName" placeholder="이름" minlength="8" required /> {console.log(userText)}
<input className={styles.input} type="text" name="gusetBirthday" id="gusetBirthday" placeholder="생년월일" minlength="8" required /> <div className={styles.contents}>
<input className={styles.input} type="text" name="gusetMbnum" id="gusetMbnum" placeholder="휴대폰 번호" minlength="8" required /> <label className={styles.signupLabel}>아이디</label>
<input className={styles.input} type="text" name="guestPassword" id="password" placeholder="비밀번호" minlength="8" required /> <input className={styles.input} type="text" name="userName" id="userID" placeholder="8자리" onChange={handleUserOnChange} minlength="8" required />
<input className="bg-ButterYellow text-dark border-0 rounded-2 mt-2" type="submit" value="가입하기" /> <button className={` border-0 rounded-2 mt-2 ${styles.butterYellow} ${styles.btnHover}`}>중복확인</button>
</div> </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> </div>
) )
} }
......
.input { .input {
margin: 0.5rem 0 0 0; margin: 0.5rem 0 0 0;
padding: 0.5rem 0 0.5rem 0; padding: 0.5rem 0 0.5rem 0;
color:white; color:black;
border-radius: 3px; border-radius: 3px;
} }
\ No newline at end of file
.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
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