From 6fe9c0769dfc14374005735314fb21fd93aab28a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Wed, 14 Aug 2024 09:35:08 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20/=20?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EC=B5=9C=EB=8C=80=20?=
 =?UTF-8?q?=EA=B8=80=EC=9E=90=EC=88=98=20=EC=A0=9C=ED=95=9C=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/AuthForm/InputBox.jsx | 20 ++++++++++++++++---
 .../components/InfoEditForm/InfoEditForm.jsx  |  4 ++--
 .../PasswordChangeForm/PasswordChangeForm.jsx |  6 +++---
 frontend/src/pages/LoginPage/LoginPage.jsx    |  2 ++
 .../UserRegisterPage/UserRegisterPage.jsx     |  5 +++++
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/AuthForm/InputBox.jsx b/frontend/src/components/AuthForm/InputBox.jsx
index 0e5da9d..d7786f9 100644
--- a/frontend/src/components/AuthForm/InputBox.jsx
+++ b/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>
   );
diff --git a/frontend/src/components/InfoEditForm/InfoEditForm.jsx b/frontend/src/components/InfoEditForm/InfoEditForm.jsx
index fb82762..30f41d2 100644
--- a/frontend/src/components/InfoEditForm/InfoEditForm.jsx
+++ b/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
         />
diff --git a/frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx b/frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx
index 0c204bf..2e0fe27 100644
--- a/frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx
+++ b/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
         />
diff --git a/frontend/src/pages/LoginPage/LoginPage.jsx b/frontend/src/pages/LoginPage/LoginPage.jsx
index fada596..f0bc5a0 100644
--- a/frontend/src/pages/LoginPage/LoginPage.jsx
+++ b/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'}
diff --git a/frontend/src/pages/UserRegisterPage/UserRegisterPage.jsx b/frontend/src/pages/UserRegisterPage/UserRegisterPage.jsx
index b5a42f9..c24bf29 100644
--- a/frontend/src/pages/UserRegisterPage/UserRegisterPage.jsx
+++ b/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>