Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[임희서] sprint8 #711

Merged
merged 1 commit into from
Jun 27, 2024
Merged

[임희서] sprint8 #711

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 49 additions & 71 deletions src/utils/checkValidationHook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,89 +3,67 @@ import { useState } from "react";
const EmailPattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

잘 작성 해주셨습니다만, 몇가지 개선할 부분이 보입니다.

  1. 삼항연산자를 동시에 두번 이상 사용하는건 자제해주세요. 가독성이 떨어집니다.
  2. 하나의 훅 안에서 여러가지 유효성 검사를 하고 있는데, 이 부분을 분리해도 좋을것 같아요.

아래 코드를 참고해주세요!

import { useState, useMemo, useEffect } from 'react';

const EmailPattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;

const emailValidator = (value) => {
  if (!value) return "이메일을 입력해주세요";
  if (!EmailPattern.test(value)) return "잘못된 이메일 형식입니다";
  return "";
};

const nicknameValidator = (value) => {
  if (!value) return "닉네임을 입력해주세요";
  return "";
};

const passwordValidator = (value) => {
  if (!value) return "비밀번호를 입력해주세요";
  if (value.length < 8) return "비밀번호를 8자 이상 입력해주세요";
  return "";
};

const confirmPasswordValidator = (value, password) => {
  if (value !== password) return "비밀번호가 일치하지 않습니다";
  return "";
};

export default function useValidationCheck(type) {
  const initialErrorMessages = useMemo(() => {
    if (type === "login") {
      return { emailError: "initial", passwordError: "initial" };
    }
    return {
      emailError: "initial",
      nicknameError: "initial",
      passwordError: "initial",
      confirmPasswordError: "initial"
    };
  }, [type]);

  const [errorMessages, setErrorMessages] = useState(initialErrorMessages);

  useEffect(() => {
    setErrorMessages(initialErrorMessages);
  }, [initialErrorMessages]);

  const setError = (field, message) => {
    setErrorMessages((prev) => ({ ...prev, [field]: message }));
  };

  const createValidator = (field, validatorFn) => (value, extraArg) => {
    setError(field, validatorFn(value, extraArg));
  };

  const validationFunctions = useMemo(() => {
    const baseFunctions = {
      checkEmail: createValidator("emailError", emailValidator),
      checkPassword: createValidator("passwordError", passwordValidator),
    };

    if (type !== "login") {
      return {
        ...baseFunctions,
        checkNickname: createValidator("nicknameError", nicknameValidator),
        checkConfirmPassword: createValidator("confirmPasswordError", confirmPasswordValidator),
      };
    }

    return baseFunctions;
  }, [type]);

  return { errorMessages, ...validationFunctions };
}


export default function useValidationCheck(type) {
const [errorMessages, setErrorMessages] = useState(() => {
if (type === "login") {
return {
emailError: "initial",
passwordError: "initial",
};
} else {
return {
emailError: "initial",
nicknameError: "initial",
passwordError: "initial",
confirmPasswordError: "initial",
};
}
});
const initialErrorMessages =
type === "login"
? {
emailError: "initial",
passwordError: "initial",
}
: {
emailError: "initial",
nicknameError: "initial",
passwordError: "initial",
confirmPasswordError: "initial",
};

const [errorMessages, setErrorMessages] = useState(initialErrorMessages);

const setError = (field, message) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 양을 줄이기 위해 따로 setError를 만드셨군요 👍

setErrorMessages((prev) => ({ ...prev, [field]: message }));
};

const checkEmail = (value) => {
if (!value || !EmailPattern.test(value)) {
setErrorMessages((prev) => ({
...prev,
emailError: !value
? "이메일을 입력해주세요"
setError(
"emailError",
!value
? "이메일을 입력해주세요"
: EmailPattern.test(value)
? ""
: "잘못된 이메일 형식입니다",
}));
} else
setErrorMessages((prev) => ({
...prev,
emailError: "",
}));
);
};

const checkNickname = (value) => {
if (!value) {
setErrorMessages((prev) => ({
...prev,
nicknameError: "닉네임을 입력해주세요",
}));
} else
setErrorMessages((prev) => ({
...prev,
nicknameError: "",
}));
setError("nickNameError", !value ? "닉네임을 입력해주세요" : "");
};

const checkPassword = (value) => {
if (!value || value.length < 8) {
setErrorMessages((prev) => ({
...prev,
passwordError: !value
? "비밀번호를 입력해주세요"
: "비밀번호를 8자 이상 입력해주세요",
}));
} else
setErrorMessages((prev) => ({
...prev,
passwordError: "",
}));
setError(
"passwordError",
!value
? "비밀번호를 입력해주세요"
: value.length < 8
? "비밀번호를 8자 이상 입력해주세요"
: "",
);
};

const checkConfirmPassword = (value, password) => {
if (value !== password) {
setErrorMessages((prev) => ({
...prev,
confirmPasswordError: "비밀번호가 일치하지 않습니다",
}));
} else
setErrorMessages((prev) => ({
...prev,
confirmPasswordError: "",
}));
setError(
"confirmPasswordError",
value === password ? "" : "비밀번호가 일치하지 않습니다",
);
};

return type === "login"
? {
errorMessages,
checkEmail,
checkPassword,
}
: {
errorMessages,
checkEmail,
checkNickname,
checkPassword,
checkConfirmPassword,
};
const validators = {
checkEmail,
checkPassword,
};

if (type !== "login") {
validators.checkNickname = checkNickname;
validators.checkConfirmPassword = checkConfirmPassword;
}

return { errorMessages, ...validators };
}
Loading