[Refactor] react-hook-form 도입 (#593)

* chore[#589]: react-hook-form 설치

* refactor[#589]: login form에 useForm 적용

* refactor[#589]: 이메일 회원가입 폼에 useForm 적용

* refactor[#589]: 비밀번호 확인 폼에 useForm 적용

* refactor[#589]: 비밀번호 확인 폼에 form 태그 적용

- "Password field is not contained in a form" 에러로 인해 form 태그 사용

* fix[#589]: 탈퇴하기와 취소 버튼을 감싸는 div 태그 스타일 수정

* refactor[#589]: 비밀번호 설정 폼에 useForm 적용

* refactor[#589]: 회원가입 폼에 이전 페이지로 이동하는 모달 로직 추가

* refactor[#589]: 비밀번호 변경 폼에 useForm 적용

* refactor[#589]: 닉네임 변경 폼에 useForm 적용

* refactor[#589]: 로그인 폼의 handleSubmit에 onError 설정

* refactor[#589]: 기본정보 등록 폼에 useForm 적용

* refactor[#589]: handleSubmit의 onError 설정

* refactor[#589]: 에러 메세지 상수화

* refactor[#589]: 인증 코드 보내고 난 후 이메일 수정할 경우, 시간, 인증코드, mutation 초기화

* style[#589]: 새 비밀번호 Input 네이밍 변경

* refactor[#589]: 정규표현식을 저장하고 있는 변수 위치 이동

Author: aken-you

package-lock.json

@@ -18,6 +18,7 @@
     "@vis.gl/react-google-maps": "^1.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.2",
     "react-modal-sheet": "^3.1.0",
     "react-router-dom": "^6.26.1",
     "zustand": "^4.5.5"

package.json

@@ -1,10 +1,13 @@
-import { useState } from "react";
+import { forwardRef, useState } from "react";
 import { VisibilityOffIcon, VisibilityOnIcon } from "@/shared/ui/icon";
 import { Input, type InputProps } from "@/shared/ui/input";
 
 type FixedInputProps = "type" | "componentType";
 
-export const PasswordInput = (props: Omit<InputProps, FixedInputProps>) => {
+export const PasswordInput = forwardRef<
+  HTMLInputElement,
+  Omit<InputProps, FixedInputProps>
+>((props, ref) => {
   const [isVisibilityOn, setIsVisibilityOn] = useState<boolean>(false);
 
   const handleVisibility = () => {
@@ -13,6 +16,7 @@ export const PasswordInput = (props: Omit<InputProps, FixedInputProps>) => {
 
   return (
     <Input
+      ref={ref}
       componentType="outlinedText"
       type={isVisibilityOn ? "text" : "password"}
       trailingNode={
@@ -30,4 +34,4 @@ export const PasswordInput = (props: Omit<InputProps, FixedInputProps>) => {
       {...props}
     />
   );
-};
+});

src/entities/auth/ui/input.tsx

@@ -1,3 +1,7 @@
-export { usePostCheckDuplicateNicknameState } from "../api";
-export { validateNickname } from "../lib";
-export { NicknameInput } from "../ui";
+export { usePostCheckDuplicateNickname } from "../api";
+export {
+  NICKNAME_MAX_LENGTH,
+  emailRegex,
+  passwordRegex,
+  nicknameRegex,
+} from "../constants";

src/features/auth/@x/setting.ts

@@ -1,9 +1,5 @@
-import {
-  MutationState,
-  useMutation,
-  useMutationState,
-} from "@tanstack/react-query";
-import { apiClient } from "@/shared/lib";
+import { useMutation } from "@tanstack/react-query";
+import { apiClient, type HttpError } from "@/shared/lib";
 import { SIGN_UP_END_POINT } from "../constants";
 
 export interface PostCheckDuplicateNicknameRequest {
@@ -21,27 +17,8 @@ const postCheckDuplicateNickname = async ({
 };
 
 export const usePostCheckDuplicateNickname = () => {
-  return useMutation<unknown, Error, PostCheckDuplicateNicknameRequest>({
+  return useMutation<unknown, HttpError, PostCheckDuplicateNicknameRequest>({
     mutationFn: postCheckDuplicateNickname,
     mutationKey: ["checkDuplicateNickname"],
   });
 };
-
-export const usePostCheckDuplicateNicknameState = () => {
-  // mutate 상태 결과들을 보고 중복된 닉네임인지 판단
-  const mutationState = useMutationState<
-    MutationState<unknown, Error, PostCheckDuplicateNicknameRequest>
-  >({
-    filters: {
-      mutationKey: ["checkDuplicateNickname"],
-    },
-  });
-
-  const lastMutationState = mutationState[mutationState.length - 1];
-
-  // todo 409 코드일 경우, 중복된 닉네임 처리
-  const isDuplicateNickname = lastMutationState?.status === "error";
-  const isPending = lastMutationState?.status === "pending";
-
-  return { isDuplicateNickname, isPending };
-};

src/features/auth/api/postCheckDuplicateNickname.ts

@@ -336,3 +336,11 @@ export const dogBreeds = [
 export const REGION_API_DEBOUNCE_DELAY = 500;
 
 export const VERIFICATION_CODE_LENGTH = 7;
+
+export const NICKNAME_MAX_LENGTH = 20;
+
+// 정규표현식
+export const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+export const passwordRegex =
+  /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*()_+]).{8,15}$/;
+export const nicknameRegex = /^[a-zA-Z0-9가-힣]{1,20}$/;

src/features/auth/constants/form.ts

@@ -1,3 +1,5 @@
+import { NICKNAME_MAX_LENGTH, VERIFICATION_CODE_LENGTH } from "./form";
+
 export const errorMessage = {
   PERMISSION_DENIED: "위치 정보를 요청 할 수 있도록 권한을 허용해주세요",
   POSITION_UNAVAILABLE:
@@ -6,3 +8,64 @@ export const errorMessage = {
   UNKNOWN: "알 수 없는 에러가 발생했습니다",
   NON_SELECTED_ADDRESS: "동네를 선택해주세요",
 };
+
+export const loginErrorMessage = {
+  email: {
+    required: "이메일 형식으로 입력해 주세요.",
+    pattern: "올바른 이메일 형식으로 입력해 주세요.",
+  },
+  submit: {
+    required: "아이디 또는 비밀번호를 모두 입력해 주세요.",
+    invalid: "이메일 또는 비밀번호를 다시 확인해 주세요.",
+  },
+};
+
+export const signUpFormValidationMessage = {
+  email: "올바른 이메일 형식입니다.",
+  verificationCode: "인증되었습니다.",
+  password: "사용가능한 비밀번호 입니다.",
+  confirmPassword: "비밀번호가 일치합니다.",
+};
+export const signUpFormErrorMessage = {
+  email: {
+    required: "이메일 형식으로 입력해 주세요.",
+    pattern: "이메일 형식으로 입력해 주세요.",
+    validate: "이미 가입된 이메일입니다.",
+  },
+  verificationCode: {
+    required: `인증코드 ${VERIFICATION_CODE_LENGTH}자리를 입력해 주세요.`,
+    minLength: `인증코드 ${VERIFICATION_CODE_LENGTH}자리를 입력해 주세요.`,
+    isNotMatched: "인증코드를 다시 확인해 주세요.",
+    isTimeOver: "인증시간이 만료되었습니다. 재전송 버튼을 눌러주세요.",
+  },
+  password: {
+    required: "비밀번호를 입력해 주세요.",
+    pattern: "비밀번호 형식에 맞게 입력해 주세요.",
+  },
+  confirmPassword: {
+    required: "비밀번호를 다시 입력해 주세요.",
+    pattern: "비밀번호 형식에 맞게 입력해 주세요.",
+    isNotMatchedWithPassword: "비밀번호가 서로 일치하지 않습니다.",
+  },
+  submit: {
+    required: "이메일과 비밀번호를 모두 입력해 주세요.",
+    invalid: "이메일 또는 비밀번호를 올바르게 입력해 주세요.",
+  },
+};
+
+export const userInfoFormValidationMessage = {
+  email: "사용가능한 닉네임입니다.",
+};
+export const userInfoFormErrorMessage = {
+  nickname: {
+    required: `${NICKNAME_MAX_LENGTH}자 이내의 한글 영어 숫자만 사용 가능합니다.`,
+    pattern: `${NICKNAME_MAX_LENGTH}자 이내의 한글 영어 숫자만 사용 가능합니다.`,
+    maxLength: `${NICKNAME_MAX_LENGTH}자 이내의 한글 영어 숫자만 사용 가능합니다.`,
+    validate: "이미 존재하는 닉네임입니다.",
+  },
+  submit: {
+    required: "필수 항목을 모두 입력해 주세요.",
+    invalidNickname: "올바른 닉네임을 입력해 주세요.",
+    requiredTermsAgreement: "필수 약관에 모두 동의해 주세요.",
+  },
+};