[FE] 비밀번호 입력 간소화 및 모바일 숫자 키패드를 적용 (#342)

* refactor: 입력 필드 유효성 검사 규칙 개선 및 단순화

TERN으로 변경하여 정규표현식 사용
- 각 필드의 유효성 검사 규칙을 정규표현식으로 단순화
- 비밀번호 규칙을 4자리 숫자로 변경
- 비밀번호 input type을 number로 설정

* feat: iOS 숫자 키패드 지원을 위한 입력 필드 속성 추가

frontend/src/constants/inputFields.ts

@@ -1,22 +1,11 @@
-export const INPUT_FIELD_RULES = {
-  meetingName: {
-    minLength: 1,
-    maxLength: 10,
-  },
-  nickname: {
-    minLength: 1,
-    maxLength: 5,
-  },
-  password: {
-    minLength: 1,
-    maxLength: 10,
-    pattern: /^[a-zA-Z0-9!@#$%]+$/,
-  },
+export const INPUT_FIELD_PATTERN = {
+  meetingName: /^.{1,10}$/, // 1~10자 사이의 모든 문자
+  nickname: /^.{1,5}$/, // 1~5자 사이의 모든 문자,
+  password: /^\d{4}$/, // 4자리 숫자
 };
 
 export const FIELD_DESCRIPTIONS = {
   meetingName: '약속 이름은 1~10자 사이로 입력해 주세요.',
-  nickname: '닉네임을 1~5자 사이로 입력해 주세요.',
-  password:
-    '비밀번호를 1~10자 사이로 입력해 주세요.\n사용 가능한 문자는 알파벳, 숫자, 특수문자(!@#$%)입니다.',
+  nickname: '닉네임은 1~5자 사이로 입력해 주세요.',
+  password: '비밀번호는 4자리 숫자로 입력해 주세요.',
 };

frontend/src/hooks/useInput/useInput.ts

@@ -2,9 +2,8 @@ import type { ChangeEvent } from 'react';
 import { useState } from 'react';
 
 interface ValidationRules {
-  minLength?: number;
-  maxLength?: number;
   pattern?: RegExp;
+  errorMessage?: string;
 }
 
 const useInput = (rules?: ValidationRules) => {
@@ -14,17 +13,10 @@ const useInput = (rules?: ValidationRules) => {
   const getValidationError = (input: string) => {
     if (!rules) return null;
 
-    if (rules.minLength && input.length < rules.minLength) {
-      return `최소 ${rules.minLength}글자 이상이어야 합니다.`;
-    }
-
-    if (rules.maxLength && input.length > rules.maxLength) {
-      return `최대 ${rules.maxLength}글자까지 입력 가능합니다.`;
-    }
-
     if (rules.pattern && !rules.pattern.test(input)) {
-      return '올바른 형식이 아닙니다.';
+      return rules.errorMessage || '올바른 형식이 아닙니다.';
     }
+
     return null;
   };
 

frontend/src/pages/AttendeeLoginPage/index.tsx

@@ -1,6 +1,5 @@
 import { useParams } from 'react-router-dom';
 
-import PasswordInput from '@components/PasswordInput';
 import { Button } from '@components/_common/Buttons/Button';
 import Field from '@components/_common/Field';
 import Input from '@components/_common/Input';
@@ -9,7 +8,7 @@ import useInput from '@hooks/useInput/useInput';
 
 import { usePostLoginMutation } from '@stores/servers/user/mutations';
 
-import { FIELD_DESCRIPTIONS, INPUT_FIELD_RULES } from '@constants/inputFields';
+import { FIELD_DESCRIPTIONS, INPUT_FIELD_PATTERN } from '@constants/inputFields';
 
 import { s_container, s_inputContainer } from './AttendeeLoginPage.styles';
 
@@ -22,18 +21,17 @@ export default function AttendeeLoginPage() {
     onValueChange: handleAttendeeNameChange,
     errorMessage: attendeeNameErrorMessage,
   } = useInput({
-    minLength: INPUT_FIELD_RULES.nickname.minLength,
-    maxLength: INPUT_FIELD_RULES.nickname.maxLength,
+    pattern: INPUT_FIELD_PATTERN.nickname,
+    errorMessage: FIELD_DESCRIPTIONS.nickname,
   });
 
   const {
     value: attendeePassword,
     onValueChange: handleAttendeePasswordChange,
     errorMessage: attendeePasswordErrorMessage,
   } = useInput({
-    minLength: INPUT_FIELD_RULES.password.minLength,
-    maxLength: INPUT_FIELD_RULES.password.maxLength,
-    pattern: INPUT_FIELD_RULES.password.pattern,
+    pattern: INPUT_FIELD_PATTERN.password,
+    errorMessage: FIELD_DESCRIPTIONS.password,
   });
 
   const isFormValid = () => {
@@ -79,7 +77,11 @@ export default function AttendeeLoginPage() {
         <Field>
           <Field.Label id="비밀번호" labelText="비밀번호" />
           <Field.Description description={FIELD_DESCRIPTIONS.password} />
-          <PasswordInput
+          <Input
+            type="number"
+            id="비밀번호"
+            inputMode="numeric"
+            pattern="[0-9]*"
             placeholder="비밀번호를 입력하세요."
             value={attendeePassword}
             onChange={handleAttendeePasswordChange}

frontend/src/pages/CreateMeetingPage/index.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 
-import PasswordInput from '@components/PasswordInput';
 import TimeRangeSelector from '@components/TimeRangeSelector';
 import { Button } from '@components/_common/Buttons/Button';
 import Calendar from '@components/_common/Calendar';
@@ -13,7 +12,7 @@ import useTimeRangeDropdown from '@hooks/useTimeRangeDropdown/useTimeRangeDropdo
 
 import { usePostMeetingMutation } from '@stores/servers/meeting/mutation';
 
-import { FIELD_DESCRIPTIONS, INPUT_FIELD_RULES } from '@constants/inputFields';
+import { FIELD_DESCRIPTIONS, INPUT_FIELD_PATTERN } from '@constants/inputFields';
 
 import { s_confirmContainer, s_formContainer } from './CreateMeetingPage.styles';
 
@@ -25,27 +24,26 @@ export default function CreateMeetingPage() {
     onValueChange: handleMeetingNameChange,
     errorMessage: meetingNameErrorMessage,
   } = useInput({
-    minLength: INPUT_FIELD_RULES.meetingName.minLength,
-    maxLength: INPUT_FIELD_RULES.meetingName.maxLength,
+    pattern: INPUT_FIELD_PATTERN.meetingName,
+    errorMessage: FIELD_DESCRIPTIONS.meetingName,
   });
 
   const {
     value: hostName,
     onValueChange: handleHostNameChange,
     errorMessage: hostNameErrorMessage,
   } = useInput({
-    minLength: INPUT_FIELD_RULES.nickname.minLength,
-    maxLength: INPUT_FIELD_RULES.nickname.maxLength,
+    pattern: INPUT_FIELD_PATTERN.nickname,
+    errorMessage: FIELD_DESCRIPTIONS.nickname,
   });
 
   const {
     value: hostPassword,
     onValueChange: handleHostPasswordChange,
     errorMessage: hostPasswordError,
   } = useInput({
-    minLength: INPUT_FIELD_RULES.password.minLength,
-    maxLength: INPUT_FIELD_RULES.password.maxLength,
-    pattern: INPUT_FIELD_RULES.password.pattern,
+    pattern: INPUT_FIELD_PATTERN.password,
+    errorMessage: FIELD_DESCRIPTIONS.password,
   });
 
   const [selectedDates, setSelectedDates] = useState<string[]>([]);
@@ -114,7 +112,14 @@ export default function CreateMeetingPage() {
         <Field>
           <Field.Label id="비밀번호" labelText="비밀번호" />
           <Field.Description description={FIELD_DESCRIPTIONS.password} />
-          <PasswordInput id="비밀번호" value={hostPassword} onChange={handleHostPasswordChange} />
+          <Input
+            type="number"
+            id="비밀번호"
+            inputMode="numeric"
+            pattern="[0-9]*"
+            value={hostPassword}
+            onChange={handleHostPasswordChange}
+          />
           <Field.ErrorMessage errorMessage={hostPasswordError} />
         </Field>