Featuer/#29 sign in validation

src/constants/message-constants.ts

@@ -5,11 +5,15 @@ export const AUTH_MESSAGE = {
     EMAIL_INVALID: '올바른 이메일 형식이어야 합니다.',
     PASSWORD_LENGTH: '비밀번호는 6자 이상이어야 합니다.',
     PASSWORD_SPECIAL_CHAR: '비밀번호는 최소 하나의 특수 문자를 포함해야 합니다.',
+    EMAIL_EMPTY_FIELD: '이메일을 입력해주세요.',
+    PASSWORD_EMPTY_FIELD: '비밀번호를 입력해주세요.'
   },
   RESULT: {
     SIGN_UP_SUCCESS: '회원 가입에 성공했습니다.',
     SIGN_UP_FAILED: '회원 가입에 실패했습니다.',
     SIGN_UP_EXIST_ERROR: '이미 존재하는 이메일입니다.',
     SIGN_UP_EMPTY_FIELD: '모든 값을 입력해주세요.',
+    SIGN_IN_SUCCESS: '로그인에 성공했습니다.',
+    SIGN_IN_FAILED: '이메일 혹은 비밀번호를 확인해주세요.'
   },
 };

src/features/auth/auth-input.tsx

@@ -1,18 +1,17 @@
-import { UseFormRegister } from 'react-hook-form';
-import { FormData } from './sign-up/data/schema';
+import { Path, UseFormRegister } from 'react-hook-form';
 
-type Props = {
+type Props<T> = {
   label: string;
-  id: keyof FormData;
-  register: UseFormRegister<FormData>;
+  id: Path<T>;
+  register: UseFormRegister<T>;
   error?: { message?: string };
   type: string;
 };
 
-const AuthInput = ({ label, id, register, error, type }: Props) => (
+const AuthInput = <T,>({ label, id, register, error, type }: Props<T>) => (
   <div className='flex w-full flex-col px-3 py-2'>
     <label>{label}</label>
-    <input {...register(id)} type={type} className='border-b border-gray-300' />
+    <input {...register(id)} type={type} className='border-b border-gray-300 focus:outline-0' />
     <div className='h-6 text-sm'>{error && <p className='text-primary'>{error.message}</p>}</div>
   </div>
 );

src/features/auth/sign-up/api/client-services.ts

@@ -1,17 +1,20 @@
 import { ROUTE_HANDLER_PATH } from '@/constants/path-constant';
 
-type SignUpProps = {
+type Props = {
   name: string;
   email: string;
   password: string;
 };
 
-export const postSignUp = async (sign_up_data: SignUpProps) => {
+const { AUTH } = ROUTE_HANDLER_PATH;
+const { SIGN_UP } = AUTH;
+
+export const postSignUp = async (signUpData: Props) => {
   try {
-    const res = await fetch(ROUTE_HANDLER_PATH.AUTH.SIGN_UP, {
+    const res = await fetch(SIGN_UP, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(sign_up_data),
+      body: JSON.stringify(signUpData),
     });
 
     const data = await res.json();

src/features/auth/sign-up/data/schema.ts

@@ -6,19 +6,22 @@ const NAME_VALIDATION_MAX = 8;
 const NAME_VALIDATION_REGEX = /^[a-zA-Z0-9가-힣]+$/;
 const PASSWORD_VALIDATION_MIN = 6;
 
+const { VALIDATION } = AUTH_MESSAGE;
+const { NAME_LENGTH, NAME_SPECIAL_CHAR, EMAIL_INVALID, PASSWORD_LENGTH, PASSWORD_SPECIAL_CHAR } = VALIDATION;
+
 export const schema = z.object({
   name: z
     .string()
     .trim()
-    .min(NAME_VALIDATION_MIN, AUTH_MESSAGE.VALIDATION.NAME_LENGTH)
-    .max(NAME_VALIDATION_MAX, AUTH_MESSAGE.VALIDATION.NAME_LENGTH)
-    .regex(NAME_VALIDATION_REGEX, AUTH_MESSAGE.VALIDATION.NAME_SPECIAL_CHAR),
-  email: z.string().trim().email(AUTH_MESSAGE.VALIDATION.EMAIL_INVALID),
+    .min(NAME_VALIDATION_MIN, NAME_LENGTH)
+    .max(NAME_VALIDATION_MAX, NAME_LENGTH)
+    .regex(NAME_VALIDATION_REGEX, NAME_SPECIAL_CHAR),
+  email: z.string().trim().email(EMAIL_INVALID),
   password: z
     .string()
     .trim()
-    .min(PASSWORD_VALIDATION_MIN, AUTH_MESSAGE.VALIDATION.PASSWORD_LENGTH)
-    .regex(/[^a-zA-Z0-9]/, AUTH_MESSAGE.VALIDATION.PASSWORD_SPECIAL_CHAR),
+    .min(PASSWORD_VALIDATION_MIN, PASSWORD_LENGTH)
+    .regex(/[^a-zA-Z0-9]/, PASSWORD_SPECIAL_CHAR),
 });
 
-export type FormData = z.infer<typeof schema>;
+export type SignUpFormData = z.infer<typeof schema>;

src/features/auth/sign-up/sign-up-auth-form.tsx

@@ -2,28 +2,28 @@
 
 import { PATH } from '@/constants/path-constant';
 import { useRouter } from 'next/navigation';
-import { postSignUp } from './api/client-services';
+import { postSignUp } from '@/features/auth/sign-up/api/client-services';
 import { AUTH_MESSAGE } from '@/constants/message-constants';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import AuthInput from '@/features/auth/auth-input';
-import { FormData, schema } from './data/schema';
+import { SignUpFormData, schema } from '@/features/auth/sign-up/data/schema';
 
 const SignUpAuthForm = () => {
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<FormData>({
+  } = useForm<SignUpFormData>({
     resolver: zodResolver(schema),
     mode: 'onBlur',
-    defaultValues: { name: '', email: '', password: '' } as FormData,
+    defaultValues: { name: '', email: '', password: '' } as SignUpFormData,
   });
   const router = useRouter();
 
-  const onSubmit = async (data: FormData) => {
+  const onSubmit = async (data: SignUpFormData) => {
     try {
-      await postSignUp(data as Required<FormData>);
+      await postSignUp(data as Required<SignUpFormData>);
       router.push(PATH.AUTH.SIGN_IN);
       alert(AUTH_MESSAGE.RESULT.SIGN_UP_SUCCESS);
     } catch (error) {
@@ -38,7 +38,7 @@ const SignUpAuthForm = () => {
       </p>
       <p className='mb-4 text-center font-extralight'>우리 같이 취업을 향한 여정을 떠나볼까요?</p>
       <p className='mb-10 text-center font-extralight text-black/30'>원할한 서비스 이용을 위해 회원가입 해주세요.</p>
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit(onSubmit)} noValidate>
         <AuthInput label='NAME' id='name' register={register} error={errors.name} type='text' />
         <AuthInput label='EMAIL' id='email' register={register} error={errors.email} type='email' />
         <AuthInput label='PASSWORD' id='password' register={register} error={errors.password} type='password' />

src/features/auth/sing-in/data/schema.ts

@@ -0,0 +1,14 @@
+import { AUTH_MESSAGE } from '@/constants/message-constants';
+import { z } from 'zod';
+
+const PASSWORD_VALIDATION_MIN = 1;
+
+const { VALIDATION } = AUTH_MESSAGE;
+const { EMAIL_EMPTY_FIELD, PASSWORD_EMPTY_FIELD } = VALIDATION;
+
+export const schema = z.object({
+  email: z.string().trim().email(EMAIL_EMPTY_FIELD),
+  password: z.string().trim().min(PASSWORD_VALIDATION_MIN, PASSWORD_EMPTY_FIELD),
+});
+
+export type SignInFormData = z.infer<typeof schema>;

src/features/auth/sing-in/sign-in-auth-form.tsx

@@ -4,30 +4,40 @@ import { PATH } from '@/constants/path-constant';
 import { signIn } from 'next-auth/react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import AuthInput from '@/features/auth/auth-input';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { schema, SignInFormData } from '@/features/auth/sing-in/data/schema';
+import Image from 'next/image';
+import { AUTH_MESSAGE } from '@/constants/message-constants';
 
 const callback_url = `${process.env.NEXT_PUBLIC_BASE_URL}/${PATH.ON_BOARDING}`;
 
+const { RESULT } = AUTH_MESSAGE;
+const { SIGN_IN_SUCCESS, SIGN_IN_FAILED } = RESULT;
+
 const SignInAuthForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<SignInFormData>({
+    resolver: zodResolver(schema),
+    mode: 'onBlur',
+    defaultValues: { email: '', password: '' } as SignInFormData,
+  });
   const router = useRouter();
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const formData = new FormData(e.target as HTMLFormElement);
-
-    const sign_in_data = {
-      email: String(formData.get('email')),
-      password: String(formData.get('password')),
-    };
+  const onSubmit = async (data: SignInFormData) => {
     try {
       const res = await signIn('credentials', {
-        ...sign_in_data,
+        ...data,
         redirect: false,
       });
       if (!res.ok) {
-        throw new Error('로그인에 실패했습니다.');
+        throw new Error(SIGN_IN_FAILED);
       } else {
-        alert('로그인에 성공했습니다.');
+        alert(SIGN_IN_SUCCESS);
         router.replace(PATH.ON_BOARDING);
       }
     } catch (error) {
@@ -37,55 +47,46 @@ const SignInAuthForm = () => {
 
   return (
     <div className='mx-auto w-full max-w-md rounded-lg bg-white p-6 shadow-md'>
-      <h2 className='mb-6 text-center text-2xl font-bold'>로그인</h2>
-      <form className='space-y-4' onSubmit={handleSubmit}>
-        <div>
-          <label htmlFor='email' className='mb-1 block text-sm font-medium text-gray-700'>
-            이메일
-          </label>
-          <input
-            id='email'
-            name='email'
-            type='email'
-            className='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
-            required
-          />
-        </div>
-        <div>
-          <label htmlFor='password' className='mb-1 block text-sm font-medium text-gray-700'>
-            비밀번호
-          </label>
-          <input
-            id='password'
-            name='password'
-            type='password'
-            className='w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
-            required
-          />
-        </div>
+      <p className='mb-1 text-center text-2xl font-light'>
+        만나서 반가워요.<span className='font-normal'>병아리</span>씨!
+      </p>
+      <p className='mb-4 text-center font-extralight'>우리 같이 취업을 향한 여정을 떠나볼까요?</p>
+      <p className='mb-10 text-center font-extralight text-black/30'>원할한 서비스 이용을 위해 로그인 해주세요.</p>
+      <form onSubmit={handleSubmit(onSubmit)} noValidate>
+        <AuthInput label='EMAIL' id='email' register={register} error={errors.email} type='email' />
+        <AuthInput label='PASSWORD' id='password' register={register} error={errors.password} type='password' />
         <button
           type='submit'
-          className='w-full rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-blue-300'
+          className='bg-blue-white mt-2 w-full rounded-md border border-gray-400 px-4 py-2 text-sm font-medium text-black shadow-sm'
         >
           로그인
         </button>
       </form>
-      <div className='mt-4 flex flex-col gap-2 text-center'>
-        <Link href={PATH.AUTH.SIGN_UP}>계정이 없으신가요?</Link>
+      <div className='mt-2 flex flex-col gap-2 text-center'>
         <>
           <button
             onClick={() => signIn('google', { callbackUrl: callback_url })}
-            className='w-full rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-blue-300'
+            className='flex w-full items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm'
           >
-            구글 로그인
+            <Image src='/assets/google_icon.png' alt='구글 로그인' width={14} height={14} />
+            구글 계정으로 로그인
           </button>
           <button
             onClick={() => signIn('naver', { callbackUrl: callback_url })}
-            className='w-full rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-blue-300'
+            className='flex w-full items-center justify-center gap-2 rounded-md bg-[#03C75A] px-4 py-2 text-sm font-bold text-white shadow-sm'
           >
-            네이버
+            <Image src='/assets/naver_icon.png' alt='네이버 로그인' width={24} height={24} />
+            네이버 아이디로 로그인
           </button>
         </>
+        <div className='my-4 flex w-full items-center'>
+          <div className='flex-1 border-t'></div>
+          <span className='px-3 text-sm font-extralight text-gray-500'>OR</span>
+          <div className='flex-1 border-t'></div>
+        </div>
+        <Link href={PATH.AUTH.SIGN_UP} className='font-extralight'>
+          30초만에 회원가입하기
+        </Link>
       </div>
     </div>
   );