찍찍이 #로그인/회원가입 (퍼블리싱, 훅폼 적용)

내가 맡은 공통 컴포넌트 구현이 어느덧 끝났고 디자인 도안이 계속 바뀌고 있어서 추후 리팩토링 할 예정입니다.

다음 역할은 로그인/회원가입 페이지 입니다.

로그인/회원가입 PR

피그마 도안

로고는 아직 미정이라 리액트 아이콘으로..

• 로고 컴포넌트 분리
• 페이지별 각 input 컴포넌트 분리
• 보기 / 숨기기 아이콘 조건부 렌더링 분리
• Footer(찍찍이가 처음이신가요) 분리
  

input의 데이터 타입, props 타입 정의 ( 중복 작성 해결 )

import { UseFormRegister, UseFormGetValues, FieldError } from 'react-hook-form';

export interface AuthDataType {
  name?: string;
  email: string;
  password: string;
  passwordChk?: string;
}

export interface AuthInputProps {
  register: UseFormRegister<AuthDataType>;
  error?: FieldError;
  getValues?: UseFormGetValues<AuthDataType>;
}

export type AuthType = '로그인' | '회원가입';

react-hook-form 적용 또한 input 별 유효성 검사 유틸함수로 분리 (onBlur 모드)

ex) 아이디 관련 input

...
// 로그인 페이지
 const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<AuthDataType>({ mode: 'onBlur' });

  return (
    ...
       <EmailInput register={register} error={errors.email} />

import { Input } from '@/components/common/Input';
import { PLACEHOLDERS } from '@/constants/Placeholders';
import { AuthInputProps } from '@/types/AuthType';
import { emailValidation } from '@/utils/authValidation';

export const EmailInput = ({ register, error }: AuthInputProps) => {
  return (
    <div className="flex w-full flex-col items-start gap-12">
      <span className="text-base-semibold text-slate-800 ">아이디</span>
      <Input
        type="text"
        placeholder={PLACEHOLDERS.EMAIL}
        {...register('email', emailValidation)}
      />
      {error && <span className="text-sm text-red-500">{error.message}</span>}
    </div>
  );
};

//유효성 검사 유틸함수 (다른 input에 관한 것도 있음.)
...

export const emailValidation = {
  required: '이메일을 입력해주세요.',
  pattern: {
    value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    message: '올바른 이메일 형식을 입력해주세요.',
  },
};

...

React Hook Form은 비제어 방식의 강점을 극대화하여, 리렌더링 부담을 줄이고 자동 포커싱과 유효성 검사의 편리함을 내장하여 훨씬 좋아보였습니다.
제어 컴포넌트 방식도 유용하지만, 가독성과 효율성 측면에서 React Hook Form이 제공하는 경험이 훨씬 더 좋아보여 선호하였습니다.

---

로그인 GIF

회원가입 GIF

추가로 버튼 컴포넌트는 작업 중이고 footer 부분의 오류는 수정하였습니다.