From 93a9c709c09438c431a5ccf86c6186ca08b46eab Mon Sep 17 00:00:00 2001
From: Seoyoung <seoyoungiyo@gmail.com>
Date: Sat, 24 Feb 2024 17:04:09 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=20=EB=9D=BC=EB=B2=A8=20onChange=EB=A7=88=EB=8B=A4?=
 =?UTF-8?q?=20=EC=97=90=EB=9F=AC=20=EC=84=A4=EC=A0=95=EB=90=98=EB=8A=94=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/list/create/_components/CreateList.tsx    | 15 +++++++++++----
 .../list/create/_components/list/LabelInput.tsx   |  4 ++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app/list/create/_components/CreateList.tsx b/src/app/list/create/_components/CreateList.tsx
index 6ff9188b..52d4b80f 100644
--- 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
index 1925e50c..202ef8fe 100644
--- 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);
         }}
       />