feat: InputBox 컴포넌트 추가
This commit is contained in:
parent
7d91267569
commit
9fc0827f4a
26
frontend/src/components/AuthForm/InputBox.jsx
Normal file
26
frontend/src/components/AuthForm/InputBox.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { forwardRef } from 'react';
|
||||
import styles from './InputBox.module.css';
|
||||
|
||||
const InputBox = forwardRef(({ title, id = null, type, children }, ref) => {
|
||||
return (
|
||||
<div className={styles.inputBox}>
|
||||
<label
|
||||
htmlFor={id}
|
||||
className={styles.textBody}
|
||||
>
|
||||
{title}
|
||||
</label>
|
||||
<input
|
||||
type={type}
|
||||
id={id}
|
||||
className={`${styles.input} ${styles.textSubheading}`}
|
||||
ref={ref}
|
||||
required
|
||||
/>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
InputBox.displayName = 'InputBox';
|
||||
|
||||
export default InputBox;
|
13
frontend/src/components/AuthForm/InputBox.module.css
Normal file
13
frontend/src/components/AuthForm/InputBox.module.css
Normal file
@ -0,0 +1,13 @@
|
||||
.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;
|
||||
}
|
@ -1 +1,2 @@
|
||||
export { default as AuthForm } from './AuthForm';
|
||||
export { default as InputBox } from './InputBox';
|
Loading…
Reference in New Issue
Block a user