FE-73🐛 태그를 입력했다가 지웠을때 버튼 활성화되있는 버그 수정

src/pageLayout/Epigram/AddEpigram.tsx

@@ -1,4 +1,4 @@
-import React, { KeyboardEvent, useState } from 'react';
+import React, { KeyboardEvent, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import Header from '@/components/Header/Header';
@@ -15,11 +15,12 @@ import useTagManagement from '@/hooks/useTagManagementHook';
 import { useMeQuery } from '@/hooks/userQueryHooks';
 
 function AddEpigram() {
-  const [isAlertOpen, setIsAlertOpen] = useState(false);
-  const [alertContent, setAlertContent] = useState({ title: '', description: '' });
   const router = useRouter();
   const { data: userData, isPending, isError } = useMeQuery();
+  const [isAlertOpen, setIsAlertOpen] = useState(false);
+  const [alertContent, setAlertContent] = useState({ title: '', description: '' });
   const [selectedAuthorOption, setSelectedAuthorOption] = useState('directly'); // 기본값을 'directly'로 설정
+  const [isFormValid, setIsFormValid] = useState(false);
 
   const form = useForm<AddEpigramFormType>({
     resolver: zodResolver(AddEpigramFormSchema),
@@ -32,6 +33,20 @@ function AddEpigram() {
     },
   });
 
+  // NOTE: 필수항목들에 값이 들어있는지 확인
+  const checkFormEmpty = () => {
+    const { content, author, tags } = form.getValues();
+    return content.trim() !== '' && author.trim() !== '' && tags.length > 0;
+  };
+
+  // NOTE: form의 변화를 감지
+  useEffect(() => {
+    const subscription = form.watch(() => {
+      setIsFormValid(checkFormEmpty());
+    });
+    return () => subscription.unsubscribe();
+  }, [form]);
+
   const { currentTag, setCurrentTag, handleAddTag, handleRemoveTag } = useTagManagement(form.setValue, form.getValues, form.setError);
 
   const addEpigramMutation = useAddEpigram({
@@ -92,14 +107,15 @@ function AddEpigram() {
     return <div>사용자 정보를 불러오는 데 실패했습니다. 페이지를 새로고침 해주세요.</div>;
   }
 
-  // NOTE: 태그를 저장할려고할때 enter키를 누르면 폼제출이 되는걸 방지
+  // NOTE: 태그를 저장하려고 할때 enter키를 누르면 폼제출이 되는걸 방지
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       e.preventDefault();
       handleAddTag();
     }
   };
 
+  // NOTE: url와title은 필수 항목이 아니라서 빈칸으로 제출할 때 항목에서 제외
   const handleSubmit = (data: AddEpigramFormType) => {
     const submitData = { ...data };
 
@@ -114,11 +130,6 @@ function AddEpigram() {
     addEpigramMutation.mutate(submitData);
   };
 
-  const isRequiredFieldsValid = () => {
-    const { content, author, tags } = form.getValues();
-    return content.trim() !== '' && author.trim() !== '' && tags.length > 0;
-  };
-
   return (
     <>
       <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
@@ -268,12 +279,8 @@ function AddEpigram() {
                 </FormItem>
               )}
             />
-            {/* NOTE: disabled 상태일 때의 스타일 */}
-            <Button
-              className='h-11 lg:h-16 rounded-xl text-semibold lg:text-2xl text-white bg-black-500 disabled:bg-blue-400 '
-              type='submit'
-              disabled={addEpigramMutation.isPending || !isRequiredFieldsValid()}
-            >
+            {/* NOTE: 필수항목들에 값이 채워져있으면 폼제출 버튼 활성화 */}
+            <Button className='h-11 lg:h-16 rounded-xl text-semibold lg:text-2xl text-white bg-black-500 disabled:bg-blue-400 ' type='submit' disabled={addEpigramMutation.isPending || !isFormValid}>
               {addEpigramMutation.isPending ? '제출 중...' : '작성 완료'}
             </Button>
           </form>

src/schema/addEpigram.ts

@@ -26,7 +26,6 @@ export const AddEpigramResponseSchema = z.object({
   id: z.number().int().positive(),
 });
 
-// 폼 입력값을 위한 스키마
 export const AddEpigramFormSchema = z
   .object({
     tags: z.array(z.string().min(1).max(10)).min(1, { message: '최소 1개의 태그를 추가해주세요.' }).max(3),
@@ -36,7 +35,7 @@ export const AddEpigramFormSchema = z
     referenceTitle: z.union([z.string().max(100, { message: '100자 이내로 입력해주세요.' }), z.literal('')]).optional(),
   })
   .refine((data) => (data.referenceUrl === '' && data.referenceTitle === '') || (data.referenceUrl !== '' && data.referenceTitle !== ''), {
-    message: 'URL과 제목을 모두 입력하거나 모두 비워두세요.',
+    message: 'URL과 제목을 모두 입력하거나 모두 비워주세요.',
     path: ['referenceUrl', 'referenceTitle'],
   });