Feat: #27 로그인 페이지 생성 및 Validation 작성

src/constants/formValidationRules.ts

@@ -58,7 +58,7 @@ export const STATUS_VALIDATION_RULES = deepFreeze({
     },
     pattern: {
       value: PASSWORD_REGEX,
-      message: '비밀번호는 영문자, 숫자, 기호를 포함해야 합니다.',
+      message: '비밀번호는 영문자, 숫자, 기호를 모두 포함해야 합니다.',
     },
   }),
   PASSWORD_CONFIRM: () => ({

src/globals.css

@@ -85,4 +85,12 @@
   .selected::before {
     @apply absolute left-0 top-0 block h-30 w-3 bg-main content-[''];
   }
+
+  .auth-btn {
+    @apply flex h-30 items-center justify-center rounded-lg bg-sub px-8 font-bold;
+  }
+
+  .auth-input {
+    @apply h-30 flex-grow rounded-lg border border-input px-8 text-sm outline-none placeholder:text-emphasis;
+  }
 }

src/layouts/page/AuthLayout.tsx

@@ -5,7 +5,7 @@ export default function AuthLayout() {
   return (
     <div className="flex h-screen flex-row items-center justify-evenly bg-main">
       <img src={AuthGULogo} alt="Auth GU Logo" />
-      <main className="font-emphasis flex h-[90vh] flex-col overflow-y-scroll rounded-2xl bg-[white] p-30 scrollbar-hide">
+      <main className="flex h-[90vh] flex-col overflow-y-scroll rounded-2xl bg-[white] p-30 scrollbar-hide">
         <Outlet />
       </main>
     </div>

src/pages/user/SignInPage.tsx

@@ -24,87 +24,66 @@ export default function SignInPage() {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="flex w-300 flex-col gap-8 text-emphasis">
-      <div className="mb-24 mt-30 text-large">
+    <form onSubmit={handleSubmit(onSubmit)} noValidate className="flex h-screen w-300 flex-col py-30">
+      <section className="h-1/6 text-large text-main">
         Welcome to our site!
         <br /> Grow Up your Life with us.
-      </div>
-      <div className="flex flex-row gap-8">
-        <input
-          {...register('email', {
-            required: '이메일(아이디)을 입력해 주세요.',
-            pattern: {
-              value: EMAIL_REGEX,
-              message: '이메일 형식에 맞지 않습니다.',
-            },
-          })}
-          type="email"
-          placeholder="이메일 (아이디)"
-          className={`auth-input ${errors.email && `border-2 border-[#FF0000]`}`}
+      </section>
+
+      <section className="flex flex-grow flex-col justify-center gap-8">
+        {/* 이메일(아이디) */}
+        <ValidationInput
+          placeholder="이메일"
+          errors={errors.email?.message}
+          register={register('email', STATUS_VALIDATION_RULES.EMAIL())}
         />
-      </div>
-      {errors.email && <p className="text-sm text-[#FF0000]">{errors.email.message}</p>}
 
-      <input
-        {...register('password', {
-          required: '비밀번호를 입력해 주세요.',
-          minLength: {
-            value: 8,
-            message: '비밀번호는 최소 8자 이상이어야 합니다.',
-          },
-          maxLength: {
-            value: 16,
-            message: '비밀번호는 최대 16자 이하여야 합니다.',
-          },
-          pattern: {
-            value: PASSWORD_REGEX,
-            message: '비밀번호는 영문자, 숫자, 기호를 포함해야 합니다.',
-          },
-        })}
-        placeholder="비밀번호 (영문자, 숫자, 기호 포함 8~16자리)"
-        type="password"
-        id="password"
-        className={`auth-input ${errors.password && `border-2 border-[#FF0000]`}`}
-      />
-      {errors.password && <p className="text-sm text-[#FF0000]">{errors.password.message}</p>}
+        {/* 비밀번호 */}
+        <ValidationInput
+          placeholder="비밀번호 (영문자, 숫자, 기호 포함 8~16자리)"
+          type="password"
+          errors={errors.password?.message}
+          register={register('password', STATUS_VALIDATION_RULES.PASSWORD())}
+        />
 
-      <div className="flex flex-col gap-4 text-center">
-        <button type="submit" className="auth-btn" disabled={isSubmitting}>
-          로그인
-        </button>
-      </div>
+        <div className="flex flex-col gap-4 text-center">
+          <button type="submit" className="auth-btn" disabled={isSubmitting}>
+            로그인
+          </button>
+        </div>
 
-      <div className="flex flex-row justify-center gap-8">
-        <p className="cursor-pointer font-bold" onClick={() => nav('/search/id')} onKeyDown={() => nav('/search/id')}>
-          아이디 찾기
-        </p>
-        <p>|</p>
-        <p
-          className="cursor-pointer font-bold"
-          onClick={() => nav('/search/password')}
-          onKeyDown={() => nav('/search/password')}
-        >
-          비밀번호 찾기
-        </p>
-      </div>
+        <div className="flex flex-row justify-center gap-8">
+          <button type="button" className="cursor-pointer bg-inherit font-bold" onClick={() => nav('/search/id')}>
+            아이디 찾기
+          </button>
+          <p>|</p>
+          <button type="button" className="cursor-pointer bg-inherit font-bold" onClick={() => nav('/search/password')}>
+            비밀번호 찾기
+          </button>
+        </div>
 
-      <div className="mb-35 mt-15 flex flex-row items-center justify-center gap-8">
-        <p className="items-center font-bold">회원이 아니신가요?</p>
-        <button type="button" className="auth-btn" onClick={() => nav('/signup')}>
-          회원가입
-        </button>
-      </div>
+        <div className="mb-35 mt-15 flex flex-row items-center justify-center gap-8">
+          <p className="items-center font-bold">회원이 아니신가요?</p>
+          <button type="button" className="auth-btn" onClick={() => nav('/signup')}>
+            회원가입
+          </button>
+        </div>
+      </section>
 
-      <div className="flex flex-col gap-4 text-center">
-        <button type="button" className="auth-btn bg-[#f6e04b]" disabled={isSubmitting}>
-          <img src={Kakao} alt="Kakao" className="mr-5 size-15" />
-          카카오 로그인
+      <section className="flex h-1/6 flex-col gap-4 text-center">
+        <button type="button" className="auth-btn bg-kakao" disabled={isSubmitting}>
+          <div className="flex w-81 items-center justify-between">
+            <img src={Kakao} alt="Kakao" className="size-15" />
+            카카오 로그인
+          </div>
         </button>
         <button type="button" className="auth-btn bg-button" disabled={isSubmitting}>
-          <img src={Google} alt="Google" className="mr-5 size-40" />
-          구글 로그인
+          <div className="flex w-81 items-center justify-between">
+            <img src={Google} alt="Google" className="size-42" />
+            로그인
+          </div>
         </button>
-      </div>
+      </section>
     </form>
   );
 }

tailwind.config.js

@@ -60,6 +60,16 @@ export default {
         scroll: 'var(--color-scroll)',
         button: 'var(--color-button)',
         kakao: 'var(--color-kakao)',
+        todo: {
+          red: 'var(--color-todo-red)',
+          yellow: 'var(--color-todo-yellow)',
+          green: 'var(--color-todo-green)',
+          blue: 'var(--color-todo-blue)',
+          orange: 'var(--color-todo-orange)',
+          purple: 'var(--color-todo-purple)',
+          'yellow-green': 'var(--color-todo-yellow-green)',
+          gray: 'var(--color-todo-gray)',
+        },
       },
     },
   },