feat: AuthForm 컴포넌트 inputBox 제거 및 기능변경
This commit is contained in:
parent
9fc0827f4a
commit
1c84395807
@ -1,72 +1,39 @@
|
|||||||
import styles from './AuthForm.module.css';
|
import styles from './AuthForm.module.css';
|
||||||
import { useState } from 'react';
|
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
export default function AuthForm() {
|
export default function AuthForm({ children, title, buttonText, linkProps = null, submitFunction }) {
|
||||||
const [username, setUsername] = useState('');
|
const handleSubmit = (e) => {
|
||||||
const [password, setPassword] = useState('');
|
e.preventDefault();
|
||||||
|
submitFunction();
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form className={styles.loginForm}>
|
<form
|
||||||
<span className={styles.loginText}>로그인</span>
|
onSubmit={handleSubmit}
|
||||||
|
className={styles.loginForm}
|
||||||
|
>
|
||||||
|
<span className={styles.loginText}>{title}</span>
|
||||||
|
|
||||||
<div className={styles.formGroup}>
|
<div className={styles.formGroup}>{children}</div>
|
||||||
<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}>
|
<div className={styles.loginBox}>
|
||||||
<button
|
<button
|
||||||
className={`${styles.loginButton} ${styles.textBodyStrong}`}
|
className={`${styles.loginButton} ${styles.textBodyStrong}`}
|
||||||
type="submit"
|
type="submit"
|
||||||
>
|
>
|
||||||
로그인
|
{buttonText}
|
||||||
{/* 로그인 버튼 색깔이랑 글자 색깔 바꿔야함. */}
|
{/* 로그인 버튼 색깔이랑 글자 색깔 바꿔야함. */}
|
||||||
</button>
|
</button>
|
||||||
<span className={styles.textBody}>
|
{linkProps && (
|
||||||
아직 회원이 아니신가요?
|
<span className={styles.textBody}>
|
||||||
<Link
|
{linkProps.message}
|
||||||
to="/"
|
<Link
|
||||||
className={styles.textBodyStrong}
|
to={linkProps.path}
|
||||||
>
|
className={styles.textBodyStrong}
|
||||||
회원가입
|
>
|
||||||
</Link>
|
{linkProps.title}
|
||||||
</span>
|
</Link>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
@ -21,20 +21,6 @@
|
|||||||
width: 100%;
|
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 {
|
.loginButton {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
Loading…
Reference in New Issue
Block a user