Merge branch 'FE/AuthMaxLength' into 'frontend'

[Front-End] fix: 로그인 / 회원가입 / 마이페이지 최대 글자수 제한 및 스타일 적용

See merge request s11-webmobile1-sub2/S11P12A701!200

frontend/src/components/AuthForm/InputBox.jsx

@@ -1,7 +1,19 @@
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 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 (
     <div className={`${styles.inputBox} ${hasError && styles.errorBox}`}>
       <label
@@ -15,9 +27,11 @@ export default forwardRef(function InputBox({ title, id = null, type, hasError =
         id={id}
         className={`${styles.input} ${styles.textSubheading}`}
         ref={ref}
-        maxLength={200}
+        maxLength={maxLength}
+        onInput={handleInput}
         required
       />
+      {isMaxLengthReached && <div className={styles.maxLengthMessage}>최대 {maxLength}자까지 입력 가능합니다</div>}
       {children}
     </div>
   );

frontend/src/components/InfoEditForm/InfoEditForm.jsx

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

frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx

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

frontend/src/pages/LoginPage/LoginPage.jsx

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

frontend/src/pages/UserRegisterPage/UserRegisterPage.jsx

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