Feat: #65 회원가입 폼 UI 수정 및 관련 로직 수정

src/components/common/Timer.tsx

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+
+type TimerProps = {
+  time: number;
+  onTimeout: () => void;
+};
+
+export default function Timer({ time, onTimeout }: TimerProps) {
+  const [timeLeft, setTimeLeft] = useState(time);
+
+  useEffect(() => {
+    if (timeLeft === 0) {
+      onTimeout();
+      return;
+    }
+    const timer = setInterval(() => {
+      setTimeLeft((prevTime) => prevTime - 1);
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [timeLeft, onTimeout]);
+
+  const formatTime = (seconds: number) => {
+    const minutes = Math.floor(seconds / 60)
+      .toString()
+      .padStart(2, '0');
+    const remainingSeconds = (seconds % 60).toString().padStart(2, '0');
+    return `${minutes}:${remainingSeconds}`;
+  };
+
+  return <p className="text-sm font-regular text-error">{formatTime(timeLeft)}</p>;
+}

src/constants/formValidationRules.ts

@@ -1,9 +1,9 @@
 import Validator from '@utils/Validator';
 import { deepFreeze } from '@utils/deepFreeze';
-import { EMAIL_REGEX, ID_REGEX, NICKNAME_REGEX, PASSWORD_REGEX, PHONE_REGEX } from '@constants/regex';
-
-import type { Project } from '@/types/ProjectType';
-import type { Task } from '@/types/TaskType';
+import { EMAIL_REGEX, ID_REGEX, NICKNAME_REGEX, PASSWORD_REGEX } from './regex';
+import { USER_SETTINGS } from './userSettings';
+import { Project } from '@/types/ProjectType';
+import { Task } from '@/types/TaskType';
 
 type ValidateOption = { [key: string]: (value: string) => string | boolean };
 
@@ -55,30 +55,30 @@ export const STATUS_VALIDATION_RULES = deepFreeze({
         Validator.isDuplicatedName(colorList, value) ? '이미 사용중인 색상입니다.' : true,
     },
   }),
+});
+
+export const USER_AUTH_VALIDATION_RULES = deepFreeze({
   EMAIL: {
     required: '이메일 인증을 진행해 주세요.',
+    maxLength: {
+      value: USER_SETTINGS.MAX_EMAIL_LENGTH,
+      message: `이메일은 최대 ${USER_SETTINGS.MAX_EMAIL_LENGTH}자까지 입력 가능합니다.`,
+    },
     pattern: {
       value: EMAIL_REGEX,
       message: '이메일 형식에 맞지 않습니다.',
     },
   },
   CERTIFICATION: { required: '인증번호를 입력해 주세요.' },
-  PHONE: {
-    required: '휴대폰 번호 인증을 진행해 주세요.',
-    pattern: {
-      value: PHONE_REGEX,
-      message: '휴대폰 번호를 정확히 입력해 주세요.',
-    },
-  },
   NICKNAME: {
     required: '닉네임을 입력해 주세요.',
     minLength: {
-      value: 2,
-      message: '닉네임은 최소 2자 이상이어야 합니다.',
+      value: USER_SETTINGS.MIN_NICKNAME_LENGTH,
+      message: `닉네임은 최소 ${USER_SETTINGS.MIN_NICKNAME_LENGTH}자 이상이어야 합니다.`,
     },
     maxLength: {
-      value: 20,
-      message: '닉네임은 최대 20자까지 입력 가능합니다.',
+      value: USER_SETTINGS.MAX_NICKNAME_LENGTH,
+      message: `닉네임은 최대 ${USER_SETTINGS.MAX_NICKNAME_LENGTH}자까지 입력 가능합니다.`,
     },
     pattern: {
       value: NICKNAME_REGEX,
@@ -88,16 +88,16 @@ export const STATUS_VALIDATION_RULES = deepFreeze({
   PASSWORD: {
     required: '비밀번호를 입력해 주세요.',
     minLength: {
-      value: 8,
-      message: '비밀번호는 최소 8자 이상이어야 합니다.',
+      value: USER_SETTINGS.MIN_PW_LENGTH,
+      message: `비밀번호는 최소 ${USER_SETTINGS.MIN_PW_LENGTH}자 이상이어야 합니다.`,
     },
     maxLength: {
-      value: 16,
-      message: '비밀번호는 최대 16자 이하여야 합니다.',
+      value: USER_SETTINGS.MAX_PW_LENGTH,
+      message: `비밀번호는 최대 ${USER_SETTINGS.MAX_PW_LENGTH}자 이하여야 합니다.`,
     },
     pattern: {
       value: PASSWORD_REGEX,
-      message: '비밀번호는 영문자, 숫자, 기호를 모두 포함해야 합니다.',
+      message: '영문자, 숫자, 기호를 조합해 비밀번호를 생성해주세요.',
     },
   },
   PASSWORD_CONFIRM: (password: string) => ({
@@ -107,12 +107,12 @@ export const STATUS_VALIDATION_RULES = deepFreeze({
   ID: {
     required: '아이디를 입력해 주세요.',
     minLength: {
-      value: 2,
-      message: '아이디는 최소 2자 이상이어야 합니다.',
+      value: USER_SETTINGS.MIN_ID_LENGTH,
+      message: `아이디는 최소 ${USER_SETTINGS.MIN_ID_LENGTH}자 이상이어야 합니다.`,
     },
     maxLength: {
-      value: 255,
-      message: '아이디는 최대 255자 이하여야 합니다.',
+      value: USER_SETTINGS.MAX_ID_LENGTH,
+      message: `아이디는 최대 ${USER_SETTINGS.MAX_ID_LENGTH}자 이하여야 합니다.`,
     },
     pattern: {
       value: ID_REGEX,

src/constants/regex.ts

@@ -1,6 +1,11 @@
-export const EMAIL_REGEX = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}(?:\.[a-z]{2,})?$/i;
-export const PASSWORD_REGEX =
-  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[~`!@#$%^&*()_\-+={[}\]|\\:;"'<,>.?/])[A-Za-z\d~`!@#$%^&*()_\-+={[}\]|\\:;"'<,>.?/]{8,16}$/;
+import { USER_SETTINGS } from './userSettings';
+
+export const EMAIL_REGEX = /^[a-z0-9._%+-]+@[a-z0-9-]+\.[a-z]{2,3}(?:\.[a-z]{2,3})?$/i;
 export const PHONE_REGEX = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;
-export const NICKNAME_REGEX = /^[a-zA-Z0-9가-힣]+$/;
+export const PASSWORD_REGEX = new RegExp(
+  `^(?=.*[A-Za-z])(?=.*\\d)(?=.*[~\`!@#$%^&*()_\\-+={[}\\]|\\\\:;"'<,>.?/])[A-Za-z\\d~\`!@#$%^&*()_\\-+={[}\\]|\\\\:;"'<,>.?/]{${USER_SETTINGS.MIN_PW_LENGTH},${USER_SETTINGS.MAX_PW_LENGTH}}$`,
+);
+export const NICKNAME_REGEX = new RegExp(
+  `^[a-zA-Z0-9가-힣]{${USER_SETTINGS.MIN_NICKNAME_LENGTH},${USER_SETTINGS.MAX_NICKNAME_LENGTH}}$`,
+);
 export const ID_REGEX = /^[a-z0-9._+@가-힣-]+(?:@[a-z0-9.-]+\.[a-z]{2,}(?:\.[a-z]{2,}))?$/i;

src/constants/units.ts

@@ -0,0 +1,10 @@
+export const KB = 1024;
+export const MB = 1024 * KB;
+export const GB = 1024 * MB;
+
+export const fileSizeUnits = Object.freeze([
+  { unit: 'GB', value: GB },
+  { unit: 'MB', value: MB },
+  { unit: 'KB', value: KB },
+  { unit: 'B', value: 1 },
+]);

src/constants/userSettings.ts

@@ -0,0 +1,13 @@
+import { MB } from './units';
+
+export const USER_SETTINGS = Object.freeze({
+  MAX_IMAGE_SIZE: 2 * MB,
+  MAX_LINK_COUNT: 5,
+  MIN_ID_LENGTH: 2,
+  MAX_ID_LENGTH: 32,
+  MIN_PW_LENGTH: 8,
+  MAX_PW_LENGTH: 16,
+  MIN_NICKNAME_LENGTH: 2,
+  MAX_NICKNAME_LENGTH: 20,
+  MAX_EMAIL_LENGTH: 128,
+});

src/pages/user/SearchIdPage.tsx

@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 import ValidationInput from '@/components/common/ValidationInput';
-import { STATUS_VALIDATION_RULES } from '@/constants/formValidationRules';
+import { USER_AUTH_VALIDATION_RULES } from '@/constants/formValidationRules';
 import { SearchIDForm } from '@/types/UserType';
 import AuthForm from '@/components/user/authForm/AuthForm';
 import FooterLinks from '@/components/user/authForm/FooterLinks';
@@ -30,14 +30,14 @@ export default function SearchIdPage() {
         buttonLabel="인증번호 발송"
         placeholder="이메일"
         errors={errors.email?.message}
-        register={register('email', STATUS_VALIDATION_RULES.EMAIL)}
+        register={register('email', USER_AUTH_VALIDATION_RULES.EMAIL)}
       />
 
       {/* 이메일 인증 */}
       <ValidationInput
         placeholder="인증번호"
         errors={errors.code?.message}
-        register={register('code', STATUS_VALIDATION_RULES.CERTIFICATION)}
+        register={register('code', USER_AUTH_VALIDATION_RULES.CERTIFICATION)}
       />
 
       <div className="flex flex-col text-center">

src/pages/user/SearchPasswordPage.tsx

@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 import ValidationInput from '@/components/common/ValidationInput';
-import { STATUS_VALIDATION_RULES } from '@/constants/formValidationRules';
+import { USER_AUTH_VALIDATION_RULES } from '@/constants/formValidationRules';
 import AuthForm from '@/components/user/authForm/AuthForm';
 import FooterLinks from '@/components/user/authForm/FooterLinks';
 import { SearchPasswordForm } from '@/types/UserType';
@@ -13,7 +13,7 @@ export default function SearchPasswordPage() {
   } = useForm<SearchPasswordForm>({
     mode: 'onChange',
     defaultValues: {
-      id: '',
+      userId: '',
       email: '',
       code: '',
     },
@@ -28,8 +28,8 @@ export default function SearchPasswordPage() {
       {/* 아이디 */}
       <ValidationInput
         placeholder="아이디"
-        errors={errors.id?.message}
-        register={register('id', STATUS_VALIDATION_RULES.ID)}
+        errors={errors.userId?.message}
+        register={register('userId', USER_AUTH_VALIDATION_RULES.ID)}
       />
 
       {/* 이메일 */}
@@ -38,14 +38,14 @@ export default function SearchPasswordPage() {
         buttonLabel="인증번호 발송"
         placeholder="이메일"
         errors={errors.email?.message}
-        register={register('email', STATUS_VALIDATION_RULES.EMAIL)}
+        register={register('email', USER_AUTH_VALIDATION_RULES.EMAIL)}
       />
 
       {/* 이메일 인증 */}
       <ValidationInput
         placeholder="인증번호"
         errors={errors.code?.message}
-        register={register('code', STATUS_VALIDATION_RULES.CERTIFICATION)}
+        register={register('code', USER_AUTH_VALIDATION_RULES.CERTIFICATION)}
       />
 
       <div className="flex flex-col text-center">

src/pages/user/SignInPage.tsx

@@ -3,7 +3,7 @@ import Kakao from '@assets/social_kakao_icon.svg';
 import Google from '@assets/social_google_icon.svg';
 import { UserSignInForm } from '@/types/UserType';
 import ValidationInput from '@/components/common/ValidationInput';
-import { STATUS_VALIDATION_RULES } from '@/constants/formValidationRules';
+import { USER_AUTH_VALIDATION_RULES } from '@/constants/formValidationRules';
 import AuthForm from '@/components/user/authForm/AuthForm';
 import FooterLinks from '@/components/user/authForm/FooterLinks';
 
@@ -15,7 +15,7 @@ export default function SignInPage() {
   } = useForm({
     mode: 'onChange',
     defaultValues: {
-      id: '',
+      userId: '',
       password: '',
     },
   });
@@ -26,20 +26,20 @@ export default function SignInPage() {
 
   return (
     <>
-      <AuthForm onSubmit={handleSubmit(onSubmit)} styles="mt-40">
+      <AuthForm onSubmit={handleSubmit(onSubmit)} marginTop="mt-40">
         {/* 아이디 */}
         <ValidationInput
           placeholder="아이디"
-          errors={errors.id?.message}
-          register={register('id', STATUS_VALIDATION_RULES.ID)}
+          errors={errors.userId?.message}
+          register={register('userId', USER_AUTH_VALIDATION_RULES.ID)}
         />
 
         {/* 비밀번호 */}
         <ValidationInput
           placeholder="비밀번호 (영문자, 숫자, 기호 포함 8~16자리)"
           type="password"
           errors={errors.password?.message}
-          register={register('password', STATUS_VALIDATION_RULES.PASSWORD)}
+          register={register('password', USER_AUTH_VALIDATION_RULES.PASSWORD)}
         />
 
         <div className="flex flex-col text-center">