refactor : 폼 옵션 validate 분리

Space-Club · Jan 20, 2024 · fa6b67a · fa6b67a
1 parent 7839f65
commit fa6b67a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/src/constants/errorMessage.ts b/src/constants/errorMessage.ts
@@ -48,6 +48,7 @@ const ERROR_MESSAGE = {
   COMMON: {
     CURRENT_REF_ERROR: '할당된 current ref가 없습니다',
     TRIM: '공백으로만 이루어질 수 없습니다.',
+    NON_TITLE: '제목이 입력되지 않은 항목이 있습니다.',
   },
 } as const;
 

diff --git a/src/hooks/useCloseOnOutsideClick.ts b/src/hooks/useCloseOnOutsideClick.ts
@@ -2,27 +2,26 @@ import { useEffect, useRef, useState } from 'react';
 
 const useCloseOnOutsideClick = () => {
   const [isOpen, setIsOpen] = useState(false);
-  const ref = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    document.addEventListener('mousedown', (event) => handleClickOutside(event));
-
-    return () => {
-      document.removeEventListener('mousedown', (event) => handleClickOutside(event));
-    };
-  }, [ref]);
-
+  const targetRef = useRef<HTMLDivElement>(null);
   const toggleOpen = () => {
     setIsOpen((prev) => !prev);
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
+    if (targetRef.current && !targetRef.current.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
 
-  return { isOpen, setIsOpen, toggleOpen, ref };
+  useEffect(() => {
+    document.addEventListener('mousedown', (event) => handleClickOutside(event));
+
+    return () => {
+      document.removeEventListener('mousedown', (event) => handleClickOutside(event));
+    };
+  }, [targetRef]);
+
+  return { isOpen, setIsOpen, toggleOpen, targetRef };
 };
 
 export default useCloseOnOutsideClick;
diff --git a/src/utils/validate.ts b/src/utils/validate.ts
@@ -5,6 +5,7 @@ import {
   MIN_CLUB_NAME_LENGTH,
 } from '@/constants/club';
 import { ERROR_MESSAGE } from '@/constants/errorMessage';
+import { FormOption } from '@/types/form';
 
 const { TRIM } = ERROR_MESSAGE.COMMON;
 const { START_TIME, LARGER } = ERROR_MESSAGE.EVENT;
@@ -86,6 +87,28 @@ const validateClubInfo = (clubInfo: string) => {
   return true;
 };
 
+//비어있는 title이 없는지 확인하고, 중복되는 id와 title이 있는지 확인
+//함수형이고 선언적으로
+const validateFormOptions = (formOptions: FormOption[]) => {
+  const isTitleEmpty = formOptions.some(({ title }) => !title.trim());
+  const isTitleDuplicated = formOptions.some(
+    (formOption, index) =>
+      formOptions.findIndex(
+        (comparisonFormOption) => comparisonFormOption.title === formOption.title,
+      ) !== index,
+  );
+
+  if (isTitleEmpty) {
+    return false;
+  }
+
+  if (isTitleDuplicated) {
+    return false;
+  }
+
+  return true;
+};
+
 export {
   validateTrim,
   validateName,
@@ -95,4 +118,5 @@ export {
   validateTodayDate,
   validateClubName,
   validateClubInfo,
+  validateFormOptions,
 };