fix: 로그인 / 회원가입 최대 글자수 제한 및 스타일 적용

This commit is contained in:
정기영 2024-08-14 09:35:08 +09:00
parent 5555121f61
commit 6fe9c0769d
5 changed files with 29 additions and 8 deletions

View File

@ -1,7 +1,19 @@
import { forwardRef } from 'react'; import { forwardRef, useState } from 'react';
import styles from './InputBox.module.css'; import styles from './InputBox.module.css';
export default forwardRef(function InputBox({ title, id = null, type, hasError = null, children }, ref) { export default forwardRef(function InputBox(
{ title, id = null, type, hasError = null, children, maxLength = 50 },
ref
) {
const [isMaxLengthReached, setIsMaxLengthReached] = useState(false);
const handleInput = (e) => {
if (e.target.value.length >= maxLength) {
setIsMaxLengthReached(true);
} else {
setIsMaxLengthReached(false);
}
};
return ( return (
<div className={`${styles.inputBox} ${hasError && styles.errorBox}`}> <div className={`${styles.inputBox} ${hasError && styles.errorBox}`}>
<label <label
@ -15,9 +27,11 @@ export default forwardRef(function InputBox({ title, id = null, type, hasError =
id={id} id={id}
className={`${styles.input} ${styles.textSubheading}`} className={`${styles.input} ${styles.textSubheading}`}
ref={ref} ref={ref}
maxLength={200} maxLength={maxLength}
onInput={handleInput}
required required
/> />
{isMaxLengthReached && <div className={styles.maxLengthMessage}>최대 {maxLength}자까지 입력 가능합니다</div>}
{children} {children}
</div> </div>
); );

View File

@ -27,7 +27,7 @@ export default function InfoEditForm({ name, email, onSubmit, usingEmail }) {
placeholder="이름" placeholder="이름"
type="text" type="text"
id="username" id="username"
maxLength={200} maxLength={20}
className={`${styles.input} ${styles.textBody}`} className={`${styles.input} ${styles.textBody}`}
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
@ -48,7 +48,7 @@ export default function InfoEditForm({ name, email, onSubmit, usingEmail }) {
id="useremail" id="useremail"
className={`${styles.input} ${styles.textBody} ${usingEmail && styles.errorBox}`} className={`${styles.input} ${styles.textBody} ${usingEmail && styles.errorBox}`}
value={useremail} value={useremail}
maxLength={200} maxLength={50}
onChange={(e) => setUseremail(e.target.value)} onChange={(e) => setUseremail(e.target.value)}
required required
/> />

View File

@ -35,7 +35,7 @@ export default function PasswordChangeForm({ onSubmit, onError }) {
type="password" type="password"
id="currentPassword" id="currentPassword"
ref={currentPasswordRef} ref={currentPasswordRef}
maxLength={200} maxLength={20}
className={error === 'currentPwError' ? styles.inputErrorBox : styles.inputBox} className={error === 'currentPwError' ? styles.inputErrorBox : styles.inputBox}
required required
/> />
@ -47,7 +47,7 @@ export default function PasswordChangeForm({ onSubmit, onError }) {
type="password" type="password"
id="newPassword" id="newPassword"
ref={newPasswordRef} ref={newPasswordRef}
maxLength={200} maxLength={20}
className={error === 'samePwError' ? styles.inputErrorBox : styles.inputBox} className={error === 'samePwError' ? styles.inputErrorBox : styles.inputBox}
required required
/> />
@ -59,7 +59,7 @@ export default function PasswordChangeForm({ onSubmit, onError }) {
type="password" type="password"
id="confirmPassword" id="confirmPassword"
ref={confirmPasswordRef} ref={confirmPasswordRef}
maxLength={200} maxLength={20}
className={error === 'confirmError' ? styles.inputErrorBox : styles.inputBox} className={error === 'confirmError' ? styles.inputErrorBox : styles.inputBox}
required required
/> />

View File

@ -52,12 +52,14 @@ export default function LoginPage() {
id="id" id="id"
type="text" type="text"
ref={idRef} ref={idRef}
maxLength={20}
/> />
<InputBox <InputBox
title="비밀번호" title="비밀번호"
type="password" type="password"
id="password" id="password"
ref={passwordRef} ref={passwordRef}
maxLength={20}
> >
<Link <Link
to={'../password-reset'} to={'../password-reset'}

View File

@ -82,7 +82,9 @@ export default function UserRegisterPage() {
id="ID" id="ID"
ref={idRef} ref={idRef}
hasError={error === 'existingId'} hasError={error === 'existingId'}
maxLength={20}
> >
{}
{error === 'existingId' && <div>이미 존재하는 아이디입니다</div>} {error === 'existingId' && <div>이미 존재하는 아이디입니다</div>}
</InputBox> </InputBox>
<InputBox <InputBox
@ -90,6 +92,7 @@ export default function UserRegisterPage() {
type="text" type="text"
id="name" id="name"
ref={nameRef} ref={nameRef}
maxLength={20}
/> />
<InputBox <InputBox
title="이메일" title="이메일"
@ -105,6 +108,7 @@ export default function UserRegisterPage() {
type="password" type="password"
id="password" id="password"
ref={passwordRef} ref={passwordRef}
maxLength={20}
/> />
<InputBox <InputBox
title="비밀번호 확인" title="비밀번호 확인"
@ -112,6 +116,7 @@ export default function UserRegisterPage() {
id="passwordConfirm" id="passwordConfirm"
ref={passwordConfirmRef} ref={passwordConfirmRef}
hasError={error === 'pwNotMatch'} hasError={error === 'pwNotMatch'}
maxLength={20}
> >
{error === 'pwNotMatch' && <div>비밀번호가 일치하지 않습니다</div>} {error === 'pwNotMatch' && <div>비밀번호가 일치하지 않습니다</div>}
</InputBox> </InputBox>