Fix: 리스트 생성 라벨 onChange마다 에러 설정되는 함수 수정

8-Sprinters · Feb 24, 2024 · 93a9c70 · 93a9c70
1 parent eaffd8e
commit 93a9c70
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/app/list/create/_components/CreateList.tsx b/src/app/list/create/_components/CreateList.tsx
@@ -81,6 +81,15 @@ function CreateList({ onNextClick, type }: CreateListProps) {
     handleQueryParams();
   }, []);
 
+  const isValid =
+    title &&
+    category &&
+    !errors.title &&
+    !errors.category &&
+    !errors.labels &&
+    !errors.collaboratorIds &&
+    !errors.description;
+
   return (
     <div>
       {/* 헤더 */}
@@ -92,10 +101,8 @@ function CreateList({ onNextClick, type }: CreateListProps) {
         }}
         right={
           <button
-            className={title && category ? styles.headerNextButtonActive : styles.headerNextButton}
-            disabled={
-              !!errors.title || !!errors.category || !!errors.labels || !!errors.collaboratorIds || !!errors.description
-            }
+            className={isValid ? styles.headerNextButtonActive : styles.headerNextButton}
+            disabled={!isValid}
             onClick={onNextClick}
           >
             다음

diff --git a/src/app/list/create/_components/list/LabelInput.tsx b/src/app/list/create/_components/list/LabelInput.tsx
@@ -25,7 +25,7 @@ interface LabelInputProps {
  * @param rules 라벨 개수, 길이, 고유성 규칙과 그 에러메시지
  */
 function LabelInput({ name, placeholder, rules }: LabelInputProps) {
-  const { setValue, setError, formState, control } = useFormContext();
+  const { setValue, setError, formState, control, clearErrors } = useFormContext();
   const { errors } = formState;
   const labels = useWatch({ control, name: name });
 
@@ -66,7 +66,7 @@ function LabelInput({ name, placeholder, rules }: LabelInputProps) {
         placeholder={placeholder}
         onKeyDown={handleEnterKeyDown}
         onChange={(e) => {
-          setError(name, { message: '' });
+          clearErrors(name);
           setLabelInput(e.target.value);
         }}
       />