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

src/components/common/Timer.tsx

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+export default function Timer({ time, onTimeout }: { time: number; onTimeout: () => void }) {
+  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);
+    const remainingSeconds = seconds % 60;
+    return `${minutes < 10 ? '0' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+  };
+
+  return <p className="text-sm font-regular text-error">{formatTime(timeLeft)}</p>;
+}

src/constants/formValidationRules.ts

@@ -1,6 +1,6 @@
 import Validator from '@utils/Validator';
 import { deepFreeze } from '@utils/deepFreeze';
-import { EMAIL_REGEX, ID_REGEX, NICKNAME_REGEX, PASSWORD_REGEX, PHONE_REGEX } from './regex';
+import { EMAIL_REGEX, ID_REGEX, NICKNAME_REGEX, PASSWORD_REGEX } from './regex';
 
 export const STATUS_VALIDATION_RULES = deepFreeze({
   STATUS_NAME: (nameList: string[]) => ({
@@ -32,13 +32,6 @@ export const STATUS_VALIDATION_RULES = deepFreeze({
     },
   },
   CERTIFICATION: { required: '인증번호를 입력해 주세요.' },
-  PHONE: {
-    required: '휴대폰 번호 인증을 진행해 주세요.',
-    pattern: {
-      value: PHONE_REGEX,
-      message: '휴대폰 번호를 정확히 입력해 주세요.',
-    },
-  },
   NICKNAME: {
     required: '닉네임을 입력해 주세요.',
     minLength: {

src/pages/user/SearchPasswordPage.tsx

@@ -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', STATUS_VALIDATION_RULES.ID)}
       />
 
       {/* 이메일 */}

src/pages/user/SignInPage.tsx

@@ -15,7 +15,7 @@ export default function SignInPage() {
   } = useForm({
     mode: 'onChange',
     defaultValues: {
-      id: '',
+      userId: '',
       password: '',
     },
   });
@@ -26,12 +26,12 @@ 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', STATUS_VALIDATION_RULES.ID)}
         />
 
         {/* 비밀번호 */}