feat: 로그인폼 추가

This commit is contained in:
minwucho 2024-07-16 14:52:38 +09:00
parent dbf1031c55
commit d0d018c5cc
3 changed files with 149 additions and 0 deletions

View File

@ -0,0 +1,73 @@
import styles from './AuthForm.module.css';
import { useState } from 'react';
import { Link } from 'react-router-dom';
export default function AuthForm() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
return (
<form className={styles.loginForm}>
<span className={styles.loginText}>로그인</span>
<div className={styles.formGroup}>
<div className={styles.inputBox}>
<label
htmlFor="username"
className={styles.textBody}
>
ID
</label>
<input
type="text"
id="username"
className={`${styles.input} ${styles.textSubheading}`}
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
</div>
<div className={styles.inputBox}>
<label
htmlFor="password"
className={styles.textBody}
>
비밀번호
</label>
<input
className={`${styles.input} ${styles.textSubheading}`}
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<Link
to="/"
className={`${styles.textBodyStrong} ${styles.secondaryColor}`}
>
비밀번호를 잊으셨나요?
</Link>
</div>
</div>
<div className={styles.loginBox}>
<button
className={`${styles.loginButton} ${styles.textBodyStrong}`}
type="submit"
>
로그인
{/* 로그인 버튼 색깔이랑 글자 색깔 바꿔야함. */}
</button>
<span className={styles.textBody}>
아직 회원이 아니신가요?&nbsp;&nbsp;
<Link
to="/"
className={styles.textBodyStrong}
>
회원가입
</Link>
</span>
</div>
</form>
);
}

View File

@ -0,0 +1,75 @@
.loginForm {
max-width: 480px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 40px;
gap: 40px;
}
.loginText {
font-size: 36px;
line-height: 1.2;
font-weight: 900;
}
.formGroup {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
.inputBox {
display: flex;
flex-direction: column;
gap: 8px;
}
.input {
border-radius: 8px;
width: 100%;
border: 1px solid var(--border-color);
box-sizing: border-box;
padding: 16px;
}
.loginButton {
width: 100%;
background-color: var(--primary-color);
color: white;
padding: 12px;
box-sizing: border-box;
border-radius: 8px;
}
.loginBox {
text-align: center;
width: 100%;
gap: 10px;
display: flex;
flex-direction: column;
}
.textBody {
font-size: 16px;
line-height: 1.4;
font-weight: 400;
}
.textSubheading {
font-size: 20px;
line-height: 1.2;
font-weight: 400;
}
.textBodyStrong {
font-size: 16px;
line-height: 1.4;
font-weight: 700;
}
.secondaryColor {
color: var(--text-color-secondary);
}

View File

@ -0,0 +1 @@
export { default as AuthForm } from './AuthForm';