MyLifePlaylist💖 form 유효성검사 추가, 모달창 스타일링 수정2

카테고리 추가시 이미 존재하는 경우 예외 처리

  const ERROR_CATEGORY_DUPLICATE = "이미 등록된 카테고리입니다.";
  
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors },
  } = useForm<IAddCategoryForm>();
  const categoryTemplate = useRecoilValue(categoryTemplateAtom);

  const addCategorySubmit = async (data: IAddCategoryForm) => {
    if (categoryTemplate[data.categoryName]) return setError("categoryName", { message: ERROR_CATEGORY_DUPLICATE }, { shouldFocus: true }); // for validation
  ...
  }
    
  return (
    ...
    <ErrorMessage>{errors?.categoryName?.message}</ErrorMessage>
    ...
  )

 

 

카테고리 추가시 같은 이름의 필드가 존재하는 경우 예외 처리

  const ERROR_FIELD_DUPLICATE = "중복된 필드가 있습니다.";
  
  const typingAttrs: string[] = [];
  const selectingAttrs: { [selectingAttr: string]: string[] } = {};
  Object.keys(data).forEach((attr) => {
    if (attr.includes("typingAttr")) typingAttrs.push(data[attr]);
    else if (attr.includes("selectingAttr")) {
      const id = attr.slice(14);
      selectingAttrs[data[attr]] = options[id];
    } 
  });

  const fieldnames = typingAttrs.concat(Object.keys(selectingAttrs));
  // for validation
  if (fieldnames.length !== fieldnames.filter((fieldname, index) => fieldnames.indexOf(fieldname) === index).length)
    return setError("categoryName", { message: ERROR_FIELD_DUPLICATE }, { shouldFocus: true });

 

 

select필드의 option 추가시 같은 이름의 option이 존재하는 경우 예외 처리

 const onOptionInputChange = (id: string, event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.value[event.target.value.length - 1] === ",") {
      const newOptions = Object.assign({}, options);
      const newOption = event.target.value.slice(0, event.target.value.length - 1);

      if (!newOptions[id]) newOptions[id] = [newOption];
      else if (newOptions[id].indexOf(newOption) !== -1) return; // for validation
      else newOptions[id] = [...newOptions[id], newOption];

      setOptions(newOptions);
      event.target.value = "";
    }

 

 

Register 모달창, Update 모달창 변경 스타일링 적용

지난번 AddCategoryModal만 스타일링을 변경하여 나머지 모달창들도 같은 디자인으로 수정하였다.

MyLikes💖 모달창 스타일링 수정, 해시태그 입력 UI 구현

 

리스트 수정시 또 버그를 발견했다.. 업데이트 후 input 초기화되는 값이 업데이트 전 값이라서 수정해야 한다.
useEffect로 form의 초기값을 초기화해주는데, 의존성 배열이 빠져서 생긴 이슈였다. 빈 배열을 추가해줌으로써 해결했다.